@m4l/components 0.1.35 → 0.1.36

package/dist/components/hook-form/RHFTextField/index.7feaec71.js

@@ -0,0 +1,146 @@
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled, Skeleton, TextField, InputAdornment } from "@mui/material";
+import { forwardRef, useState } from "react";
+import { I as IconButton } from "../../mui_extended/IconButton/index.e3adaa33.js";
+import { useFormContext, Controller } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+const WrapperSkeletonRHFTextField = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "42.25px",
+  alignItems: "center",
+  justifyContent: "space-between",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: "12px 14px",
+  borderRadius: theme.spacing(1)
+}));
+const SkeletonTextField = (props) => {
+  const {
+    skeletonWidth,
+    skeletonHeight,
+    skeletonVariant
+  } = props;
+  if (skeletonVariant === "text") {
+    return /* @__PURE__ */ jsx(WrapperSkeletonRHFTextField, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      })
+    });
+  }
+  return /* @__PURE__ */ jsxs(WrapperSkeletonRHFTextField, {
+    children: [/* @__PURE__ */ jsx(Skeleton, {
+      variant: "text",
+      width: skeletonWidth,
+      height: skeletonHeight
+    }), /* @__PURE__ */ jsx(Skeleton, {
+      variant: "circular",
+      width: "20px",
+      height: "20px"
+    })]
+  });
+};
+const RHFTextField = forwardRef((props, inputRef) => {
+  const {
+    name: nameRHF,
+    autoComplete = "off",
+    skeletonWidth = "100%",
+    skeletonHeight = "18px",
+    type,
+    skeletonVariant = "text",
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonTextField, {
+      skeletonWidth,
+      skeletonHeight,
+      skeletonVariant
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name: nameRHF,
+    control,
+    render: ({
+      field: {
+        onChange,
+        onBlur,
+        value,
+        name,
+        ref
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      const onInternalChange = (event) => {
+        if (type === "number") {
+          if (event.target.value) {
+            onChange(Number(event.target.value));
+            return;
+          }
+        }
+        onChange(event);
+      };
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          inputRef,
+          autoComplete,
+          onChange: onInternalChange,
+          onBlur,
+          value: value || "",
+          name,
+          ref,
+          fullWidth: true,
+          error: !!error,
+          helperText: error?.message,
+          type,
+          ...other
+        }
+      );
+    }
+  });
+});
+RHFTextField.displayName = "RHFTextField";
+const RHFTextFieldPassword = (props) => {
+  const {
+    name,
+    label,
+    skeletonWidth,
+    skeletonHeight
+  } = props;
+  const [showPassword, setShowPassword] = useState(false);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  return /* @__PURE__ */ jsx(RHFTextField, {
+    name,
+    label,
+    type: showPassword ? "text" : "password",
+    skeletonVariant: "password",
+    autoComplete: "on",
+    skeletonWidth,
+    skeletonHeight,
+    InputProps: {
+      endAdornment: /* @__PURE__ */ jsx(InputAdornment, {
+        position: "end",
+        children: /* @__PURE__ */ jsx(IconButton, {
+          onClick: () => setShowPassword(!showPassword),
+          src: showPassword ? `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye.svg` : `${host_static_assets}/${environment_assets}/frontend/domain/host/login/assets/icons/eye_off.svg`
+        })
+      })
+    }
+  });
+};
+export {
+  RHFTextField as R,
+  RHFTextFieldPassword as a
+};

package/dist/components/index.d.ts

@@ -0,0 +1,40 @@
+export * from './animate';
+export * from './areas';
+export * from './hook-form';
+export * from './mui_extended';
+export * from './formatters';
+export * from './formatters/types';
+export * from './formatters/dicctionary';
+export { DataGrid } from './DataGrid';
+export * from './DataGrid/formatters';
+export type { Column, EditorProps, FormatterProps } from 'react-data-grid';
+export type { RowKey } from './DataGrid/types';
+export { getDataGridComponentsDictionary as getGridComponentsDictionary } from './DataGrid/dictionary';
+export { TextEditor, NumberEditor } from './DataGrid/subcomponents/editors/TextEditor';
+export { getDataGridRowsFromSet } from './DataGrid/utils/getDataGridRowsFromSet';
+export * from './DynamicFilter';
+export * from './DynamicFilter/dictionary';
+export * from './ErrorLabel';
+export type { FilterFieldApply, RawFilterFieldApply, InitialFilterFieldApply, } from './DynamicFilter/types';
+export * from './CommonActions/';
+export * from './CommonActions/dictionary';
+export * from './DraggableWindow';
+export * from './Icon';
+export * from './Image';
+export * from './LanguagePopover';
+export * from './Loadable';
+export * from './modal';
+export * from './NoItemSelected';
+export * from './NoItemSelected/dictionary';
+export * from './ObjectLogs';
+export * from './ObjectLogs/dictionary';
+export * from './PaperForm';
+export * from './Period';
+export type { PeriodType } from './Period/types';
+export * from './HelmetPage';
+export * from './PropertyValue';
+export * from './ResizeableWindow';
+export * from './ScrollBar';
+export { ScrollToTop } from './ScrollToTop';
+export * from './SplitLayout';
+export type { SplitPosition } from './SplitLayout/types';

package/dist/components/modal/ModalDialog/types.d.ts

@@ -0,0 +1,6 @@
+import { VariantColor } from '../../../utils/types';
+export interface ModalDialogProps {
+}
+export interface VariantProps {
+    variant?: VariantColor;
+}

package/dist/components/modal/WindowBase/index.d.ts

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

package/dist/components/modal/WindowBase/styles.d.ts

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

package/dist/components/modal/WindowBase/subcomponents/Header/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { VariantProps } from '../../types';
+export declare const WrapperHeader: 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> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModalTitle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/modal/WindowBase/subcomponents/Header/types.d.ts

@@ -0,0 +1,2 @@
+import { WindowBaseProps } from '../../types';
+export declare type HeaderProps = Pick<WindowBaseProps, 'title' | 'variant' | 'onClickCancel'>;

package/dist/components/modal/WindowBase/types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { VariantColor } from '../../../utils/types';
+export interface WindowBaseProps {
+    title: string;
+    variant?: VariantColor;
+    children: ReactNode;
+    onClickCancel?: () => void;
+}
+export declare type VariantProps = Pick<WindowBaseProps, 'variant'>;

package/dist/components/modal/WindowConfirm/index.d.ts

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

package/dist/components/modal/WindowConfirm/subcomponents/MessageIlustration/index.d.ts

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

package/dist/components/modal/WindowConfirm/subcomponents/MessageIlustration/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { VariantProps } from './types';
+export declare const WrapperMessageIlustration: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ModalContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IllustrationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MessageContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & VariantProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/modal/WindowConfirm/subcomponents/MessageIlustration/types.d.ts

@@ -0,0 +1,8 @@
+import { VariantColor } from '../../../../../utils/types';
+export interface ModalConfirmProps {
+    variant?: VariantColor;
+    msg?: string;
+}
+export interface VariantProps {
+    variant?: VariantColor;
+}

package/dist/components/modal/WindowConfirm/types.d.ts

@@ -0,0 +1,10 @@
+import { VariantColor } from '../../../utils/types';
+export interface WindowConfirmProps {
+    title: string;
+    variant?: VariantColor;
+    titleAccept?: string;
+    msg: string;
+    onClickIntro?: () => void;
+    onClickCancel?: () => void;
+}
+export declare type VariantProps = Pick<WindowConfirmProps, 'variant'>;

package/dist/components/modal/index.d.ts

@@ -0,0 +1,4 @@
+export { ModalDialog } from './ModalDialog';
+export * from './ModalDialog/dictionary';
+export * from './WindowConfirm';
+export * from './WindowBase';

package/dist/components/mui_extended/Accordion/index.8e123c57.js

@@ -0,0 +1,107 @@
+import { Skeleton, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
+import { I as IconButton } from "../IconButton/index.e3adaa33.js";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { I as Icon } from "../../Icon/index.1dbd3e58.js";
+import { styled } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  borderRadius: theme.spacing(0.5),
+  height: theme.spacing(4.5),
+  minHeight: theme.spacing(4.5),
+  backgroundColor: theme.palette.background.header,
+  paddingLeft: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+  marginBottom: "0px"
+}));
+const WrapperAccordionLabel = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  gap: theme.spacing(2)
+}));
+const Label = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.subtitle2
+}));
+const AccordionLabel = (props) => {
+  const {
+    isSkeleton,
+    label,
+    SKTWidht,
+    SKTHeight,
+    labelIcon
+  } = props;
+  return /* @__PURE__ */ jsx("div", {
+    children: isSkeleton ? /* @__PURE__ */ jsxs(WrapperAccordionLabel, {
+      children: [labelIcon && /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "16px",
+        height: "16px"
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: SKTWidht,
+        height: SKTHeight
+      })]
+    }) : /* @__PURE__ */ jsxs(WrapperAccordionLabel, {
+      children: [labelIcon && /* @__PURE__ */ jsx(Icon, {
+        src: labelIcon
+      }), /* @__PURE__ */ jsx(Label, {
+        children: label
+      })]
+    })
+  });
+};
+function Accordion(props) {
+  const {
+    label,
+    SKTWidht,
+    SKTHeight,
+    children,
+    accordionProps,
+    summaryProps,
+    labelIcon
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const isSkeleton = useModuleSkeleton();
+  return /* @__PURE__ */ jsxs(Accordion$1, {
+    variant: "outlined",
+    square: true,
+    TransitionProps: {
+      unmountOnExit: true
+    },
+    defaultExpanded: true,
+    ...accordionProps,
+    children: [/* @__PURE__ */ jsx(AccordionSummary, {
+      "aria-controls": "expanded-content",
+      disableTouchRipple: false,
+      expandIcon: /* @__PURE__ */ jsx(IconButton, {
+        "aria-label": "settings",
+        src: `${host_static_assets}/${environment_assets}/frontend/components/accordion/assets/icons/expanded.svg`
+      }),
+      ...summaryProps,
+      children: /* @__PURE__ */ jsx(AccordionLabel, {
+        isSkeleton,
+        label,
+        SKTWidht,
+        SKTHeight,
+        labelIcon
+      })
+    }), /* @__PURE__ */ jsx(AccordionDetails, {
+      children
+    })]
+  });
+}
+export {
+  Accordion as A
+};

package/dist/components/mui_extended/Button/index.55fc70dc.js

@@ -0,0 +1,178 @@
+import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
+import { Skeleton, styled, IconButton as IconButton$1, Tooltip } from "@mui/material";
+import MuiButton from "@mui/material/Button";
+import { jsx } from "react/jsx-runtime";
+import { LoadingButton as LoadingButton$1 } from "@mui/lab";
+import { I as IconButton } from "../IconButton/index.e3adaa33.js";
+import { styled as styled$1, alpha } from "@mui/material/styles";
+import { u as useBase } from "../../DynamicFilter/index.32f84995.js";
+import { useMemo } from "react";
+import { I as Image } from "../../Image/index.93d5f37f.js";
+const Button = (props) => {
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(Skeleton, {
+      sx: {
+        borderRadius: 2
+      },
+      variant: "rectangular",
+      width: "100px",
+      height: "36px"
+    });
+  }
+  return /* @__PURE__ */ jsx(MuiButton, {
+    ...props
+  });
+};
+const WrapperSkeleton = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  borderRadius: theme.spacing(1),
+  overflow: "hidden"
+}));
+const SkeletonLoadingButton = () => /* @__PURE__ */ jsx(WrapperSkeleton, {
+  id: "WrapperSKTLoadingButton",
+  children: /* @__PURE__ */ jsx(Skeleton, {
+    variant: "rectangular",
+    width: "100%",
+    height: "48px"
+  })
+});
+const LoadingButton = (props) => {
+  const {
+    children,
+    ...other
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonLoadingButton, {});
+  }
+  return /* @__PURE__ */ jsx(LoadingButton$1, {
+    ...other,
+    children
+  });
+};
+const SKTWrapperFilterButton = styled$1("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75),
+  background: alpha(theme.palette.primary.main, 0.3)
+}));
+const WrapperFilterButton = styled$1("div")(() => ({
+  "&.isDirty": {
+    animationName: "dirtyEffect",
+    animationDuration: "1s",
+    animationFillMode: "both",
+    animationIterationCount: "infinite",
+    transition: "all .3s",
+    "@keyframes dirtyEffect": {
+      "20%": {
+        opacity: 1
+      },
+      "50%": {
+        opacity: 0.5
+      },
+      "100%": {
+        opacity: 1
+      }
+    }
+  },
+  "&.isDirtyError": {}
+}));
+function FilterButton() {
+  const {
+    isSkeleton,
+    fireOnChangeFilters,
+    automatic,
+    isDirty,
+    isValid
+  } = useBase();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTWrapperFilterButton, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        height: 20
+      })
+    });
+  }
+  const color = useMemo(() => {
+    if (automatic || !isDirty) {
+      return "action.active";
+    }
+    if (!isValid) {
+      return "error.main";
+    }
+    return "primary.main";
+  }, [automatic, isValid, isDirty]);
+  return /* @__PURE__ */ jsx(WrapperFilterButton, {
+    id: "WrapperFilterButton",
+    className: isDirty && isValid ? "isDirty" : "",
+    children: /* @__PURE__ */ jsx(IconButton, {
+      bgColor: color,
+      dictionaryTooltip: "dynamic_filter.filter_tooltip",
+      onClick: () => fireOnChangeFilters(),
+      "aria-label": "settings",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/${automatic ? "refresh" : "search"}.svg`
+    })
+  });
+}
+function ImageButton({
+  src,
+  width,
+  height,
+  className,
+  useIntersectionObserver,
+  skeletonVariant = "circle",
+  tooltip,
+  dictionaryTooltip,
+  sx = {
+    width: 40,
+    height: 40
+  },
+  ...other
+}) {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const finalTooltip = useMemo(() => {
+    if (dictionaryTooltip && getLabel) {
+      return getLabel(dictionaryTooltip);
+    }
+    return tooltip;
+  }, [tooltip, dictionaryTooltip, getLabel]);
+  const imageButton = useMemo(() => {
+    return /* @__PURE__ */ jsx(IconButton$1, {
+      sx,
+      className: `m4l_image_button ${className ? className : ""}`,
+      ...other,
+      children: /* @__PURE__ */ jsx(Image, {
+        src,
+        width,
+        height,
+        useIntersectionObserver,
+        skeletonVariant
+      })
+    });
+  }, [src, width, height, useIntersectionObserver, skeletonVariant, sx]);
+  return finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+    title: finalTooltip || "",
+    children: imageButton
+  }) : imageButton;
+}
+export {
+  Button as B,
+  FilterButton as F,
+  ImageButton as I,
+  LoadingButton as L
+};

package/dist/components/mui_extended/IconButton/index.e3adaa33.js

@@ -0,0 +1,120 @@
+import { m } from "framer-motion";
+import { forwardRef, useMemo } from "react";
+import { IconButton as IconButton$1, Box, Skeleton, Tooltip } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { I as Icon } from "../../Icon/index.1dbd3e58.js";
+const varSmall = {
+  hover: {
+    scale: 1.1
+  },
+  tap: {
+    scale: 0.95
+  }
+};
+const varMedium = {
+  hover: {
+    scale: 1.09
+  },
+  tap: {
+    scale: 0.97
+  }
+};
+const varLarge = {
+  hover: {
+    scale: 1.08
+  },
+  tap: {
+    scale: 0.99
+  }
+};
+function AnimateWrap({
+  size,
+  children
+}) {
+  const isSmall = size === "small";
+  const isLarge = size === "large";
+  return /* @__PURE__ */ jsx(Box, {
+    component: m.div,
+    whileTap: "tap",
+    whileHover: "hover",
+    variants: isSmall && varSmall || isLarge && varLarge || varMedium,
+    sx: {
+      display: "inline-flex"
+    },
+    children
+  });
+}
+const IconButtonAnimate = forwardRef(({
+  children,
+  size = "medium",
+  ...other
+}, ref) => /* @__PURE__ */ jsx(AnimateWrap, {
+  size,
+  children: /* @__PURE__ */ jsx(IconButton$1, {
+    size,
+    ref,
+    ...other,
+    children
+  })
+}));
+IconButtonAnimate.displayName = "IconButtonAnimate";
+const SkeletonIconButton = () => {
+  return /* @__PURE__ */ jsx(Skeleton, {
+    variant: "circular",
+    width: "30px",
+    height: "30px"
+  });
+};
+function IconButton({
+  src,
+  tooltip,
+  size = "small",
+  dictionaryTooltip,
+  bgColor = "primary.active",
+  rotationAngle,
+  angleTransition,
+  ...other
+}) {
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const finalTooltip = useMemo(() => {
+    if (other.disabled) {
+      return void 0;
+    }
+    if (dictionaryTooltip && getLabel) {
+      return getLabel(dictionaryTooltip);
+    }
+    return tooltip;
+  }, [dictionaryTooltip, getLabel, other.disabled]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonIconButton, {});
+  }
+  return finalTooltip ? /* @__PURE__ */ jsx(Tooltip, {
+    title: finalTooltip || "",
+    children: /* @__PURE__ */ jsx(IconButton$1, {
+      size,
+      ...other,
+      children: /* @__PURE__ */ jsx(Icon, {
+        src,
+        bgColor: other.disabled ? "action.disabled" : bgColor,
+        rotationAngle
+      })
+    })
+  }) : /* @__PURE__ */ jsx(IconButton$1, {
+    size,
+    ...other,
+    children: /* @__PURE__ */ jsx(Icon, {
+      src,
+      bgColor: other.disabled ? "action.disabled" : bgColor,
+      rotationAngle,
+      angleTransition
+    })
+  });
+}
+export {
+  IconButton as I,
+  IconButtonAnimate as a
+};