@m4l/components 0.1.35 → 0.1.37

package/components/hook-form/RHFTextField/index.3cb4b35f.js

@@ -1,146 +0,0 @@
-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.25ff14bd.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/components/index.d.ts

@@ -1,39 +0,0 @@
-export * from '../components/animate';
-export * from '../components/hook-form';
-export * from '../components/mui_extended';
-export * from './formatters';
-export * from './formatters/types';
-export * from './formatters/dicctionary';
-export { DataGrid } from '../components/DataGrid';
-export * from '../components/DataGrid/formatters';
-export type { Column, EditorProps, FormatterProps } from 'react-data-grid';
-export type { RowKey } from '../components/DataGrid/types';
-export { getDataGridComponentsDictionary as getGridComponentsDictionary } from '../components/DataGrid/dictionary';
-export { TextEditor, NumberEditor } from '../components/DataGrid/subcomponents/editors/TextEditor';
-export { getDataGridRowsFromSet } from './DataGrid/utils/getDataGridRowsFromSet';
-export * from '../components/DynamicFilter';
-export * from '../components/DynamicFilter/dictionary';
-export * from '../components/ErrorLabel';
-export type { FilterFieldApply, RawFilterFieldApply, InitialFilterFieldApply, } from '../components/DynamicFilter/types';
-export * from './CommonActions/';
-export * from './CommonActions/dictionary';
-export * from '../components/Icon';
-export * from './Image';
-export * from '../components/LanguagePopover';
-export * from '../components/Loadable';
-export * from '../components/ModalDialog';
-export * from '../components/ModalDialog/dictionary';
-export * from '../components/NoItemSelected';
-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 './HelmetPage';
-export * from '../components/PropertyValue';
-export * from '../components/Resizeable';
-export * from '../components/ScrollBar';
-export { ScrollToTop } from '../components/ScrollToTop';
-export * from '../components/SplitLayout';
-export type { SplitPosition } from '../components/SplitLayout/types';

package/components/mui_extended/Accordion/index.86b97783.js

@@ -1,107 +0,0 @@
-import { Skeleton, Accordion as Accordion$1, AccordionSummary, AccordionDetails } from "@mui/material";
-import { I as IconButton } from "../IconButton/index.25ff14bd.js";
-import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { I as Icon } from "../../Icon/index.619fa9ad.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/components/mui_extended/Button/index.44282241.js

@@ -1,178 +0,0 @@
-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.25ff14bd.js";
-import { styled as styled$1, alpha } from "@mui/material/styles";
-import { u as useBase } from "../../DynamicFilter/index.68bcbc88.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/components/mui_extended/IconButton/index.25ff14bd.js

@@ -1,120 +0,0 @@
-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.619fa9ad.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
-};

package/components/mui_extended/MenuActions/types.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { PopoverProps } from '../Popover/types';
-export interface ComponentActionProps {
-    description?: string;
-    onClick: (props?: any) => void;
-}
-export interface MenuAction {
-    urlIcon: string;
-    iconWidth?: number;
-    iconHeight?: number;
-    dictionaryField: string;
-    onClick: (props?: any) => void;
-    disabled: boolean;
-    color?: string;
-    component?: (props: ComponentActionProps) => JSX.Element;
-}
-export interface MenuActionsProps extends Omit<PopoverProps, 'open'> {
-    objItem?: any;
-    urlIcon?: string;
-    menuActions: MenuAction[] | ((row: any) => MenuAction[]);
-    toolTip?: string;
-    marginTop?: number | string;
-    marginBottom?: number | string;
-    marginRight?: number | string;
-    marginLeft?: number | string;
-    width?: number;
-}