@m4l/components 1.0.0 → 1.0.2

package/components/mui_extended/CheckBox/index.c5c8721c.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { generateUtilityClasses, generateUtilityClass, Skeleton, styled, Checkbox } from "@mui/material";
+import clsx from "clsx";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { unstable_composeClasses } from "@mui/base";
+import { useModuleSkeleton } from "@m4l/core";
+import { forwardRef } from "react";
+import { F as FieldLabel } from "../../FieldLabel/index.400a46e0.js";
+const COMPONENT_CLASS_NAME = "M4LCheckBox";
+generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "root",
+  "skeleton",
+  "small",
+  "medium",
+  "stateDisabled"
+]);
+function getRHFCheckboxUtilityClass(slot) {
+  return generateUtilityClass(COMPONENT_CLASS_NAME, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.size === "small" && "small",
+      ownerState.size === "medium" && "medium",
+      ownerState.disabled && "stateDisabled"
+    ],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getRHFCheckboxUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const SkeletonCheckBox = (props) => {
+  const { classes } = props;
+  return /* @__PURE__ */ jsx("div", { className: classes.skeleton, children: /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "18px", height: "18px" }) });
+};
+const CheckBoxRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LCheckBox?.styleOverrides
+}));
+const CheckBox = forwardRef((props, ref) => {
+  const {
+    className,
+    size = "small",
+    disabled,
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    htmlFor
+  } = props;
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    size: !isDesktop ? "medium" : size,
+    disabled
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsxs(CheckBoxRoot, { className: clsx(classes.root, className), ref, children: [
+    !isSkeleton ? /* @__PURE__ */ jsx(Checkbox, { id: htmlFor, ...props }) : /* @__PURE__ */ jsx(SkeletonCheckBox, { classes }),
+    label && /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        label,
+        mandatory,
+        mandatoryMessage,
+        helperMessage,
+        htmlFor
+      }
+    )
+  ] });
+});
+export {
+  CheckBox as C
+};

package/components/mui_extended/CircularProgress/index.967e70b7.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { CircularProgress as CircularProgress$1 } from "@mui/material";
+const CircularProgress = (props) => {
+  return /* @__PURE__ */ jsx(CircularProgress$1, { ...props });
+};
+export {
+  CircularProgress as C
+};

package/components/mui_extended/IconButton/index.87f4726c.js

@@ -0,0 +1,120 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { Skeleton, generateUtilityClasses, generateUtilityClass, Tooltip, IconButton as IconButton$1 } from "@mui/material";
+import { I as Icon } from "../../Icon/index.2e8ec5a1.js";
+import { styled } from "@mui/material/styles";
+import { unstable_composeClasses } from "@mui/base";
+import clsx from "clsx";
+import { useResponsiveDesktop } from "@m4l/graphics";
+const SkeletonIconButton = (props) => {
+  const { classes } = props;
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "rectangular",
+      className: classes.skeleton,
+      "data-testid": "SkeletonIconButton"
+    }
+  );
+};
+const IconButtonRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LIconButton?.styleOverrides
+}));
+const componentName = "M4LIconButton";
+const iconButtonClasses = generateUtilityClasses(componentName, [
+  "root",
+  "skeleton",
+  "sizemSall",
+  "sizeMedium",
+  "variantPrimary",
+  "variantSecondary",
+  "variantLine",
+  "isFocus",
+  "isDisabled",
+  "togglePressed",
+  "toggleNotPressed"
+]);
+function getIconButtonUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.size === "small" && "sizeSmall",
+      ownerState.size === "medium" && "sizeMedium",
+      ownerState.variant === "primary" && ownerState.isSkeleton !== true && "variantPrimary",
+      ownerState.variant === "secondary" && ownerState.isSkeleton !== true && "variantSecondary",
+      ownerState.variant === "line" && ownerState.isSkeleton !== true && "variantLine",
+      ownerState.isFocus && !ownerState.isDisabled && "isFocus",
+      ownerState.isDisabled && "isDisabled"
+    ],
+    skeleton: ["skeleton"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getIconButtonUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const IconButton = (props) => {
+  const {
+    src,
+    tooltip,
+    size = "small",
+    dictionaryTooltipId,
+    rotationAngle,
+    variant = "line",
+    disabled,
+    className,
+    onClick,
+    ...other
+  } = props;
+  const { getLabel } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const finalTooltip = useMemo(() => {
+    if (disabled) {
+      return void 0;
+    }
+    if (tooltip && tooltip !== "") {
+      return tooltip;
+    }
+    if (dictionaryTooltipId && getLabel) {
+      return getLabel(dictionaryTooltipId);
+    }
+    return void 0;
+  }, [tooltip, dictionaryTooltipId, getLabel, disabled]);
+  const [isfocus] = useState(false);
+  const ownerState = {
+    variant,
+    size: isDesktop ? size : "medium",
+    isSkeleton,
+    isFocus: disabled ? false : isfocus,
+    isDisabled: disabled
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(IconButtonRoot, { className: clsx(classes.root, className), "data-testid": "IconButtonRoot", children: !isSkeleton ? /* @__PURE__ */ jsx(Fragment, { children: finalTooltip ? /* @__PURE__ */ jsx(Tooltip, { title: finalTooltip || "", children: /* @__PURE__ */ jsx(
+    IconButton$1,
+    {
+      ...other,
+      onClick,
+      disableRipple: true,
+      disabled,
+      children: /* @__PURE__ */ jsx(Icon, { src, size })
+    }
+  ) }) : /* @__PURE__ */ jsx(
+    IconButton$1,
+    {
+      ...other,
+      onClick,
+      disableRipple: true,
+      disabled,
+      children: /* @__PURE__ */ jsx(Icon, { src, size: isDesktop ? size : "medium", rotationAngle })
+    }
+  ) }) : /* @__PURE__ */ jsx(SkeletonIconButton, { classes }) });
+};
+export {
+  IconButton as I,
+  iconButtonClasses as i
+};

package/components/{LinearProgressIndeterminate/index.de9d447c.js → mui_extended/LinearProgress/index.52edc848.js}

@@ -1,9 +1,14 @@
 import { jsx } from "react/jsx-runtime";
+import { LinearProgress as LinearProgress$1, generateUtilityClasses, styled } from "@mui/material";
 import clsx from "clsx";
-import { generateUtilityClasses, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { G as LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME, J as ICON_PREFIX, T as TEST_PROP_ID } from "../areas/constants.5387d83e.js";
-import { g as getComponentUtilityClass } from "../../utils/index.9ee4c99a.js";
+import { g as getComponentUtilityClass } from "../../../utils/index.0660ee9c.js";
+import { T as TEST_PROP_ID } from "../../areas/constants.630a4f42.js";
+const LinearProgress = (props) => {
+  const { ...other } = props;
+  return /* @__PURE__ */ jsx(LinearProgress$1, { ...other });
+};
+const LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME = "M4LinearProgressIndeterminate";
 generateUtilityClasses(
   LINEAR_PROGRESS_INDETERMINATE_CLASS_NAME,
   [
@@ -26,6 +31,7 @@ const useLinearProgressIndeterminateUtilityClasses = () => {
 const LinearProgressIndeterminateRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LinearProgressIndeterminate?.styleOverrides
 }));
+const ICON_PREFIX = "M4LinearProgressIndeterminate";
 const getNameLinearProgressIndeterminateDataTestId = (KEY) => {
   return `${ICON_PREFIX}-${KEY}`;
 };
@@ -49,5 +55,6 @@ const LinearProgressIndeterminate = () => {
   );
 };
 export {
-  LinearProgressIndeterminate as L
+  LinearProgressIndeterminate as L,
+  LinearProgress as a
 };

package/components/mui_extended/LinkWithRoute/index.288c51f3.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Link as Link$1 } from "react-router-dom";
+import { Skeleton, Link } from "@mui/material";
+import { useModuleSkeleton } from "@m4l/core";
+const LinkWithRoute = (props) => {
+  const { to, children, skeletonWidth = "100%", skeletonHeight = "14px", ...other } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: skeletonWidth, height: skeletonHeight });
+  }
+  return /* @__PURE__ */ jsx(Link, { component: Link$1, to, ...other, children });
+};
+export {
+  LinkWithRoute as L
+};

package/components/{Page/index.fdf04592.js → mui_extended/Pager/index.46aec921.js}

@@ -1,20 +1,20 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React__default, { useMemo } from "react";
+import { 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 { I as IconButton } from "../IconButton/index.87f4726c.js";
+import { useEnvironment, useBase } from "@m4l/core";
+import { useResponsiveContainerStore } 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 { T as Typography } from "../Typography/index.2a1c68f8.js";
+import { I as Icon } from "../../Icon/index.2e8ec5a1.js";
+import { c as classes } from "../../PrintingSystem/index.89493ad6.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",
@@ -268,97 +268,8 @@ const PagerNode = (props) => {
     }
   );
 };
-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,
+  Pager as a,
   getPagerComponentsDictionary as g
 };