@m4l/components 0.2.35 → 1.0.0

package/components/Page/index.fdf04592.js

@@ -0,0 +1,364 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+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 { 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 "../../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
+}));
+generateUtilityClasses(componentName, [
+  "root",
+  "labelRowsPerPageContainer",
+  "labelRowsPager",
+  "select",
+  "selectMenuItem",
+  "selectMenuPopover",
+  "labelDisplayRows",
+  "pagerActions",
+  "customTablePaginationRoot",
+  "skeletonRoot",
+  "skeletonRowsPerPage",
+  "skeletonButtonContainer",
+  "skeletonIconButton",
+  "actionIconFirstPage",
+  "actionIconPrevious",
+  "actionIconNextPage",
+  "actionIconLastPage"
+]);
+function getPagerUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const pagerUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    labelRowsPerPageContainer: ["labelRowsPerPageContainer"],
+    labelRowsPager: ["labelRowsBager"],
+    select: ["select"],
+    selectMenuPopover: ["selectMenuPopover"],
+    selectMenuItem: ["selectMenuItem"],
+    labelDisplayRows: ["labelDisplayRows"],
+    pagerActions: ["pagerActions"],
+    customTablePaginationRoot: ["customTablePaginationRoot"],
+    skeletonRoot: ["skeletonRoot"],
+    skeletonRowsPerPage: ["skeletonRowsPerPage"],
+    skeletonButtonContainer: ["skeletonButtonContainer"],
+    skeletonIconButton: ["skeletonIconButton"],
+    actionIconFirstPage: ["actionIconFirstPage"],
+    actionIconPrevious: ["actionIconPrevious"],
+    actionIconNextPage: ["actionIconNextPage"],
+    actionIconLastPage: ["actionIconLastPage"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPagerUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function PagerActions(props) {
+  const { count, page, rowsPerPage, onPageChange, classes: classes2 } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const handleFirstPageButtonClick = (event) => {
+    onPageChange(event, 0);
+  };
+  const handleBackButtonClick = (event) => {
+    onPageChange(event, page - 1);
+  };
+  const handleNextButtonClick = (event) => {
+    onPageChange(event, page + 1);
+  };
+  const handleLastPageButtonClick = (event) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes2.pagerActions, children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        dictionaryTooltipId: "pager.first",
+        onClick: handleFirstPageButtonClick,
+        disabled: page === 0,
+        "aria-label": "first page",
+        className: classes2.actionIconFirstPage,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        dictionaryTooltipId: "pager.previous",
+        onClick: handleBackButtonClick,
+        disabled: page === 0,
+        "aria-label": "first page",
+        className: classes2.actionIconPrevious,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        dictionaryTooltipId: "pager.next",
+        onClick: handleNextButtonClick,
+        disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+        "aria-label": "next page",
+        className: classes2.actionIconNextPage,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        dictionaryTooltipId: "pager.last",
+        onClick: handleLastPageButtonClick,
+        disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+        "aria-label": "last page",
+        className: classes2.actionIconLastPage,
+        src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`
+      }
+    )
+  ] });
+}
+const CustomTablePagination = (props) => {
+  const {
+    count,
+    page,
+    rowsPerPage,
+    rowsPerPageOptions = [10, 25, 50, 100],
+    labelRowsPerPage,
+    classes: classes2,
+    onRowsPerPageChange,
+    onPageChange,
+    SelectProps,
+    labelDisplayedRows = defaultLabelDisplayedRows
+  } = props;
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const isUpSm = useResponsiveContainerStore((state) => state.isUpSm, shallow);
+  const theme = useTheme();
+  function defaultLabelDisplayedRows({
+    from,
+    to,
+    count: count2
+  }) {
+    return `${from}\u2013${to} of ${count2 !== -1 ? count2 : `more than ${to}`}`;
+  }
+  const getLabelDisplayedRowsTo = () => {
+    if (count === -1) {
+      return (page + 1) * rowsPerPage;
+    }
+    return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage);
+  };
+  const CustomIconComponent = (props2) => /* @__PURE__ */ jsx(
+    Icon,
+    {
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/chevronDown.svg`,
+      ...props2
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    rowsPerPageOptions?.length > 1 ? /* @__PURE__ */ jsxs("div", { className: classes2.labelRowsPerPageContainer, children: [
+      isUpSm ? /* @__PURE__ */ jsx(Typography, { variant: "body", children: labelRowsPerPage }) : null,
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          variant: "standard",
+          ...!SelectProps?.variant && { input: /* @__PURE__ */ jsx(InputBase, {}) },
+          value: rowsPerPage,
+          onChange: (e) => {
+            onRowsPerPageChange(e);
+          },
+          className: classes2.select,
+          MenuProps: {
+            className: classes2.selectMenuPopover,
+            sx: { ...theme.components?.M4LPagerMenuPopover?.styleOverrides }
+          },
+          IconComponent: CustomIconComponent,
+          ...SelectProps,
+          children: rowsPerPageOptions.map((item, idx) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              className: classes2.selectMenuItem,
+              value: item,
+              children: item
+            },
+            `${classes2.selectMenuItem}-${idx}`
+          ))
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx(Typography, { variant: "body", className: classes2.labelDisplayRows, children: labelDisplayedRows({
+      from: count === 0 ? 0 : page * rowsPerPage + 1,
+      to: getLabelDisplayedRowsTo(),
+      count: count === -1 ? -1 : count,
+      page
+    }) }),
+    /* @__PURE__ */ jsx(
+      PagerActions,
+      {
+        count,
+        page,
+        rowsPerPage,
+        onPageChange,
+        classes: classes2
+      }
+    )
+  ] });
+};
+function Pager(props) {
+  const {
+    totalRecords,
+    rowsPerPageOptions = [5, 10, 2],
+    rowsPerPage = 25,
+    page,
+    onPageChange,
+    onRowsPerPageChange,
+    labelRows = "Rows per page",
+    labelOf = "Of",
+    isXs
+  } = props;
+  const currentPage = useMemo(() => {
+    if (rowsPerPage * page > totalRecords) {
+      return Math.floor(totalRecords / rowsPerPage);
+    }
+    return page;
+  }, [page, rowsPerPage, totalRecords]);
+  const handleChangeRowsPerPage = (event) => {
+    onRowsPerPageChange(parseInt(event.target.value, 10));
+    onPageChange(0);
+  };
+  const handleChangePage = (_event, newPage) => {
+    onPageChange(newPage);
+  };
+  const classes2 = pagerUtilityClasses();
+  return /* @__PURE__ */ jsx(PagerRoot, { className: classes2.root, children: /* @__PURE__ */ jsx(
+    CustomTablePagination,
+    {
+      rowsPerPageOptions,
+      count: totalRecords,
+      rowsPerPage,
+      classes: classes2,
+      labelRowsPerPage: labelRows,
+      page: currentPage,
+      onPageChange: handleChangePage,
+      onRowsPerPageChange: handleChangeRowsPerPage,
+      labelDisplayedRows: !isXs ? ({ from, to, count }) => `${from}-${to} ${labelOf} ${count}` : () => ``
+    }
+  ) });
+}
+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 {
+  HelmetPage as H,
+  PagerNode as P,
+  PageRender as a,
+  Pager as b,
+  getPagerComponentsDictionary as g
+};

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

@@ -1,4 +1,4 @@
-import { paperFormUtilityClasses } from ".";
+import { paperFormUtilityClasses } from '.';
 export interface PaperFormClassesType {
     root: string;
     headerContainer: string;

package/components/PaperForm/index.8121e3da.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { useModuleSkeleton } from "@m4l/core";
+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
+}));
+const HeaderContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  borderBottom: `1px solid ${theme.vars.palette.divider}`,
+  paddingBottom: theme.spacing(3),
+  marginBottom: theme.spacing(2),
+  overflow: "hidden"
+}));
+const IconTitleContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  alignItems: "center",
+  color: theme.vars.palette.text.primary,
+  ...theme.colorSchemes.finalTheme.typography.subtitle1
+}));
+const IconHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: theme.spacing(1.5)
+}));
+const Content = styled("div")(() => ({
+  flexGrow: 1,
+  position: "relative"
+}));
+const SkTPaperFormHeader = styled("div")(({ theme }) => ({
+  width: "auto",
+  display: "grid",
+  gridTemplateColumns: `${theme.spacing(2)} auto`,
+  gridGap: `${theme.spacing(1.5)}`,
+  paddingBottom: `${theme.spacing(3)}`,
+  borderBottom: `1px solid ${theme.vars.palette.divider}`,
+  marginBottom: `${theme.spacing(3)}`
+}));
+const Header = (props) => {
+  const { urlIcon, title, classes } = props;
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsx(HeaderContainer, { id: "Header", className: classes.headerContainer, children: !isSkeleton ? /* @__PURE__ */ jsxs(IconTitleContainer, { className: classes.iconTitleContainer, children: [
+    urlIcon ? /* @__PURE__ */ jsx(IconHeader, { className: classes.iconHeaderContainer, children: /* @__PURE__ */ jsx(Icon, { src: urlIcon }) }) : null,
+    title
+  ] }) : /* @__PURE__ */ jsxs(SkTPaperFormHeader, { className: classes.skeletonContainer, children: [
+    /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 16, height: 16 }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 68, height: 14 })
+  ] }) });
+};
+generateUtilityClasses(componentName, [
+  "root",
+  "headerContainer",
+  "iconTitleContainer",
+  "iconHeaderContainer",
+  "skeletonContainer",
+  "isForm"
+]);
+function getPaperFormUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const paperFormUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.isForm && "isForm"],
+    headerContainer: ["headerContainer"],
+    iconTitleContainer: ["iconTitleContainer"],
+    iconHeaderContainer: ["iconHeaderContainer"],
+    skeletonContainer: ["skeletonContainer"],
+    content: ["content"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPaperFormUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function PaperForm(props) {
+  const { urlIcon, title, children, isForm = false } = props;
+  const ownerState = {
+    isForm
+  };
+  const classes = paperFormUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsxs(PaperFormRoot, { className: classes.root, children: [
+    /* @__PURE__ */ jsx(Header, { urlIcon, title, classes }),
+    /* @__PURE__ */ jsx(Content, { className: classes.content, children })
+  ] });
+}
+export {
+  PaperForm as P
+};

package/components/PaperForm/styles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+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/PaperForm/types.d.ts

@@ -9,5 +9,4 @@ export interface PaperFormProps {
 export interface HeaderProps extends Omit<PaperFormProps, 'children' | 'isForm'> {
     classes: Classes;
 }
-export interface OwnerState extends Pick<PaperFormProps, 'isForm'> {
-}
+export declare type OwnerState = Pick<PaperFormProps, 'isForm'>;

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

@@ -1,4 +1,4 @@
-import { periodUtilityClasses } from ".";
+import { periodUtilityClasses } from '.';
 export interface PeriodClassesType {
     root: string;
     containerDateLabel: string;