@m4l/components 0.1.18 → 0.1.20

package/components/mui_extended/Avatar/index.dadb0528.js

@@ -0,0 +1,37 @@
+import { forwardRef as p } from "react";
+import { useTheme as s } from "@mui/material/styles";
+import { Skeleton as f, Avatar as m } from "@mui/material";
+import { useModuleSkeleton as u } from "@m4l/core";
+import { jsx as t } from "react/jsx-runtime";
+const l = () => /* @__PURE__ */ t(f, {
+  variant: "circular",
+  width: "32px",
+  height: "32px"
+}), d = p(({
+  color: e = "default",
+  children: a,
+  sx: o,
+  ...n
+}, i) => {
+  const r = s();
+  return u() ? /* @__PURE__ */ t(l, {}) : e === "default" ? /* @__PURE__ */ t(m, {
+    ref: i,
+    sx: o,
+    ...n,
+    children: a
+  }) : /* @__PURE__ */ t(m, {
+    ref: i,
+    sx: {
+      fontWeight: r.typography.fontWeightMedium,
+      color: r.palette[e].contrastText,
+      backgroundColor: r.palette[e].main,
+      ...o
+    },
+    ...n,
+    children: a
+  });
+});
+d.displayName = "Avatar";
+export {
+  d as A
+};

package/components/mui_extended/Avatar/subcomponents/SkeletonAvatar/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SkeletonAvatar: () => JSX.Element;

package/components/mui_extended/Button/index.16591787.js

@@ -0,0 +1,144 @@
+import { useModuleSkeleton as g, useEnvironment as B, useModuleDictionary as k } from "@m4l/core";
+import { Skeleton as m, styled as S, IconButton as v, Tooltip as I } from "@mui/material";
+import _ from "@mui/material/Button";
+import { jsx as i } from "react/jsx-runtime";
+import { LoadingButton as b } from "@mui/lab";
+import { I as x } from "../IconButton/index.4b5ce8b5.js";
+import { styled as h, alpha as F } from "@mui/material/styles";
+import { u as L } from "../../DynamicFilter/index.8a571617.js";
+import { useMemo as u } from "react";
+import { I as $ } from "../../Image/index.c9da2d5a.js";
+const G = (t) => g() ? /* @__PURE__ */ i(_, {
+  ...t
+}) : /* @__PURE__ */ i(m, {
+  sx: {
+    borderRadius: 2
+  },
+  variant: "rectangular",
+  width: "100px",
+  height: "36px"
+}), D = S("div")(({
+  theme: t
+}) => ({
+  display: "flex",
+  width: "100%",
+  borderRadius: t.spacing(1),
+  overflow: "hidden"
+})), W = () => /* @__PURE__ */ i(D, {
+  id: "WrapperSKTLoadingButton",
+  children: /* @__PURE__ */ i(m, {
+    variant: "rectangular",
+    width: "100%",
+    height: "48px"
+  })
+}), H = (t) => {
+  const {
+    children: r,
+    ...n
+  } = t;
+  return g() ? /* @__PURE__ */ i(W, {}) : /* @__PURE__ */ i(b, {
+    ...n,
+    children: r
+  });
+}, w = h("div")(({
+  theme: t
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: t.spacing(3.75),
+  height: t.spacing(3.75),
+  background: F(t.palette.primary.main, 0.3)
+})), C = h("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 J() {
+  const {
+    isSkeleton: t,
+    fireOnChangeFilters: r,
+    automatic: n,
+    isDirty: o,
+    isValid: e
+  } = L(), {
+    host_static_assets: s,
+    environment_assets: l
+  } = B();
+  if (t)
+    return /* @__PURE__ */ i(w, {
+      children: /* @__PURE__ */ i(m, {
+        variant: "circular",
+        width: 20,
+        height: 20
+      })
+    });
+  const a = u(() => n || !o ? "action.active" : e ? "primary.main" : "error.main", [n, e, o]);
+  return /* @__PURE__ */ i(C, {
+    id: "WrapperFilterButton",
+    className: o && e ? "isDirty" : "",
+    children: /* @__PURE__ */ i(x, {
+      bgColor: a,
+      dictionaryTooltip: "dynamic_filter.filter_tooltip",
+      onClick: () => r(),
+      "aria-label": "settings",
+      src: `${s}/${l}/frontend/components/dynamic_filter/assets/icons/${n ? "refresh" : "search"}.svg`
+    })
+  });
+}
+function O({
+  src: t,
+  width: r,
+  height: n,
+  className: o,
+  useIntersectionObserver: e,
+  skeletonVariant: s = "circle",
+  tooltip: l,
+  dictionaryTooltip: a,
+  sx: d = {
+    width: 40,
+    height: 40
+  },
+  ...y
+}) {
+  const {
+    getLabel: c
+  } = k(), p = u(() => a && c ? c(a) : l, [l, a, c]), f = u(() => /* @__PURE__ */ i(v, {
+    sx: d,
+    className: `m4l_image_button ${o || ""}`,
+    ...y,
+    children: /* @__PURE__ */ i($, {
+      src: t,
+      width: r,
+      height: n,
+      useIntersectionObserver: e,
+      skeletonVariant: s
+    })
+  }), [t, r, n, e, s, d]);
+  return p ? /* @__PURE__ */ i(I, {
+    title: p || "",
+    children: f
+  }) : f;
+}
+export {
+  G as B,
+  J as F,
+  O as I,
+  H as L
+};

package/components/mui_extended/IconButton/index.4b5ce8b5.js

@@ -0,0 +1,103 @@
+import { m as p } from "framer-motion";
+import { forwardRef as f, useMemo as v } from "react";
+import { IconButton as l, Box as I, Skeleton as b, Tooltip as h } from "@mui/material";
+import { jsx as e } from "react/jsx-runtime";
+import { useModuleDictionary as x, useModuleSkeleton as B } from "@m4l/core";
+import { I as d } from "../../Icon/index.f569765b.js";
+const g = {
+  hover: {
+    scale: 1.1
+  },
+  tap: {
+    scale: 0.95
+  }
+}, S = {
+  hover: {
+    scale: 1.09
+  },
+  tap: {
+    scale: 0.97
+  }
+}, k = {
+  hover: {
+    scale: 1.08
+  },
+  tap: {
+    scale: 0.99
+  }
+};
+function w({
+  size: n,
+  children: t
+}) {
+  const a = n === "small", o = n === "large";
+  return /* @__PURE__ */ e(I, {
+    component: p.div,
+    whileTap: "tap",
+    whileHover: "hover",
+    variants: a && g || o && k || S,
+    sx: {
+      display: "inline-flex"
+    },
+    children: t
+  });
+}
+const M = f(({
+  children: n,
+  size: t = "medium",
+  ...a
+}, o) => /* @__PURE__ */ e(w, {
+  size: t,
+  children: /* @__PURE__ */ e(l, {
+    size: t,
+    ref: o,
+    ...a,
+    children: n
+  })
+}));
+M.displayName = "IconButtonAnimate";
+const A = () => /* @__PURE__ */ e(b, {
+  variant: "circular",
+  width: "30px",
+  height: "30px"
+});
+function N({
+  src: n,
+  tooltip: t,
+  size: a = "small",
+  dictionaryTooltip: o,
+  bgColor: s = "primary.active",
+  rotate: c,
+  ...r
+}) {
+  const {
+    getLabel: i
+  } = x(), u = B(), m = v(() => {
+    if (!r.disabled)
+      return o && i ? i(o) : t;
+  }, [o, i, r.disabled]);
+  return u ? /* @__PURE__ */ e(A, {}) : m ? /* @__PURE__ */ e(h, {
+    title: m || "",
+    children: /* @__PURE__ */ e(l, {
+      size: a,
+      ...r,
+      children: /* @__PURE__ */ e(d, {
+        src: n,
+        bgColor: r.disabled ? "action.disabled" : s,
+        rotate: c
+      })
+    })
+  }) : /* @__PURE__ */ e(l, {
+    size: a,
+    ...r,
+    children: /* @__PURE__ */ e(d, {
+      src: n,
+      bgColor: r.disabled ? "action.disabled" : s,
+      rotate: c
+    })
+  });
+}
+export {
+  N as I,
+  M as a
+};

package/components/mui_extended/IconButton/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
 import { IconButtonProps } from './types';
-export declare function IconButton({ src, tooltip, size, dictionaryTooltip, bgColor, ...other }: IconButtonProps & MUIIconButtonProps): JSX.Element;
+export declare function IconButton({ src, tooltip, size, dictionaryTooltip, bgColor, rotate, ...other }: IconButtonProps & MUIIconButtonProps): JSX.Element;

package/components/mui_extended/IconButton/subcomponents/SkeletonIconButton/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SkeletonIconButton: () => JSX.Element;

package/components/mui_extended/ImageButton/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ImageButtonProps } from './types';
+export declare function ImageButton({ src, width, height, className, useIntersectionObserver, skeletonVariant, tooltip, dictionaryTooltip, sx, ...other }: ImageButtonProps): JSX.Element;

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

@@ -0,0 +1,7 @@
+import { ImageProps } from '../../Image/types';
+import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+export interface ImageButtonProps extends ImageProps, MUIIconButtonProps {
+    tooltip?: string;
+    className?: string;
+    dictionaryTooltip?: string;
+}

package/components/mui_extended/LinkWithRoute/index.16436ab8.js

@@ -0,0 +1,26 @@
+import { Link as k } from "react-router-dom";
+import { Skeleton as m, Link as h } from "@mui/material";
+import { useModuleSkeleton as l } from "@m4l/core";
+import { jsx as t } from "react/jsx-runtime";
+const a = (e) => {
+  const {
+    to: o,
+    children: n,
+    skeletonWidth: i = "100%",
+    skeletonHeight: r = "14px",
+    ...s
+  } = e;
+  return l() ? /* @__PURE__ */ t(m, {
+    variant: "text",
+    width: i,
+    height: r
+  }) : /* @__PURE__ */ t(h, {
+    component: k,
+    to: o,
+    ...s,
+    children: n
+  });
+};
+export {
+  a as L
+};

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

@@ -1,11 +1,7 @@
 import { LinkProps as MuiLinkProps } from '@mui/material';
 import { To } from 'history';
-export interface SkeletonProps {
-    isSkeleton?: boolean;
-    width?: string | number;
-    height?: string | number;
-}
 export interface LinkWithRouteProps extends MuiLinkProps {
     to: To;
-    skeletonProps: SkeletonProps;
+    skeletonWidth: string | number;
+    skeletonHeight: string | number;
 }

package/components/mui_extended/LoadingButton/subcomponents/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SkeletonLoadingButton: () => JSX.Element;

package/components/mui_extended/LoadingButton/subcomponents/Skeleton/styles.d.ts

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

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

@@ -1,5 +1,5 @@
 import { LoadingButtonProps } from '@mui/lab';
+import { ReactNode } from 'react';
 export interface MuiLabLoadingButtonProps extends LoadingButtonProps {
-    isSkeleton?: boolean;
-    children?: any;
+    children?: ReactNode;
 }

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

@@ -2,7 +2,7 @@
 export declare const WrapperMenuActions: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "warning" | "info" | "primary" | "error" | "secondary" | "success" | undefined;
+    color?: "error" | "default" | "inherit" | "warning" | "info" | "primary" | "secondary" | "success" | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
@@ -26,5 +26,5 @@ export declare const WrapperMenuActions: import("@emotion/styled").StyledCompone
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "tabIndex" | "disabled" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "disabled" | "children" | "tabIndex" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "sx" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const LabelMemuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { MenuPopoverProps } from '../MenuPopover/types';
+import { PopoverProps } from '../Popover/types';
 export interface ComponentActionProps {
     description?: string;
     onClick: (props?: any) => void;
@@ -14,7 +14,7 @@ export interface MenuAction {
     color?: string;
     component?: (props: ComponentActionProps) => JSX.Element;
 }
-export interface MenuActionsProps extends Omit<MenuPopoverProps, 'open'> {
+export interface MenuActionsProps extends Omit<PopoverProps, 'open'> {
     objItem?: any;
     urlIcon?: string;
     menuActions: MenuAction[] | ((row: any) => MenuAction[]);

package/components/mui_extended/Pager/{index.f0911163.js → index.80c2f8a0.js}

@@ -1,6 +1,6 @@
 import { useMemo as y } from "react";
 import { Skeleton as i, TablePagination as R } from "@mui/material";
-import { P as S } from "../../CommonActions/components/Actions/index.6b25caed.js";
+import { P as S } from "../../CommonActions/components/Actions/index.a908e4b9.js";
 import { styled as a } from "@mui/material/styles";
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 a("div")(() => ({

package/components/mui_extended/Popover/index.305f2ea5.js

@@ -0,0 +1,218 @@
+import { useState as c } from "react";
+import { Popover as g, styled as d, Stack as h, MenuItem as b } from "@mui/material";
+import { I as u } from "../../Image/index.c9da2d5a.js";
+import { useLocales as f } from "@m4l/graphics";
+import "@m4l/core";
+import "../../Icon/index.f569765b.js";
+import { styled as I } from "@mui/material/styles";
+import { jsxs as m, jsx as l, Fragment as x } from "react/jsx-runtime";
+import "../Accordion/index.49f5df8e.js";
+import "../Avatar/index.dadb0528.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "@mui/lab";
+import { I as S } from "../Button/index.16591787.js";
+import "../../CommonActions/components/Actions/index.a908e4b9.js";
+import "../Pager/index.80c2f8a0.js";
+import "../Tab/index.e0653a0a.js";
+const O = I("span")(({
+  arrowType: t,
+  theme: e
+}) => {
+  const o = `solid 1px ${e.palette.grey[50012]}`, a = {
+    borderRadius: "0 0 3px 0",
+    top: -6,
+    borderBottom: o,
+    borderRight: o
+  }, n = {
+    borderRadius: "3px 0 0 0",
+    bottom: -6,
+    borderTop: o,
+    borderLeft: o
+  }, r = {
+    borderRadius: "0 3px 0 0",
+    left: -6,
+    borderTop: o,
+    borderRight: o
+  }, s = {
+    borderRadius: "0 0 0 3px",
+    right: -6,
+    borderBottom: o,
+    borderLeft: o
+  };
+  return {
+    display: "none",
+    [e.breakpoints.up("sm")]: {
+      zIndex: 1,
+      width: 12,
+      height: 12,
+      content: "''",
+      position: "absolute",
+      display: "block",
+      transform: "rotate(-135deg)",
+      background: e.palette.background.paper
+    },
+    ...t === "top-left" && {
+      ...a,
+      left: 20
+    },
+    ...t === "top-center" && {
+      ...a,
+      left: 0,
+      right: 0,
+      margin: "auto"
+    },
+    ...t === "top-right" && {
+      ...a,
+      right: 20
+    },
+    ...t === "bottom-left" && {
+      ...n,
+      left: 20
+    },
+    ...t === "bottom-center" && {
+      ...n,
+      left: 0,
+      right: 0,
+      margin: "auto"
+    },
+    ...t === "bottom-right" && {
+      ...n,
+      right: 20
+    },
+    ...t === "left-top" && {
+      ...r,
+      top: 20
+    },
+    ...t === "left-center" && {
+      ...r,
+      top: 0,
+      bottom: 0,
+      margin: "auto"
+    },
+    ...t === "left-bottom" && {
+      ...r,
+      bottom: 20
+    },
+    ...t === "right-top" && {
+      ...s,
+      top: 20
+    },
+    ...t === "right-center" && {
+      ...s,
+      top: 0,
+      bottom: 0,
+      margin: "auto"
+    },
+    ...t === "right-bottom" && {
+      ...s,
+      bottom: 20
+    }
+  };
+});
+function v({
+  children: t,
+  arrowType: e = "top-right",
+  sx: p,
+  className: i,
+  ...o
+}) {
+  return /* @__PURE__ */ m(g, {
+    className: `m4l_popover ${i || ""}`,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    },
+    PaperProps: {
+      sx: {
+        p: 1,
+        overflow: "inherit",
+        ...p
+      }
+    },
+    ...o,
+    children: [e !== "no-arrow" && /* @__PURE__ */ l(O, {
+      arrowType: e
+    }), t]
+  });
+}
+const P = d("span")(({
+  theme: t
+}) => ({
+  marginLeft: t.spacing(1)
+}));
+function V() {
+  const {
+    allLang: t,
+    currentLang: e,
+    onChangeLang: p
+  } = f(), [i, o] = c(null), a = (r) => {
+    o(r.currentTarget);
+  }, n = () => {
+    o(null);
+  };
+  return /* @__PURE__ */ m(x, {
+    children: [/* @__PURE__ */ l(S, {
+      className: "m4l_language_popover",
+      onClick: a,
+      sx: {
+        width: 40,
+        height: 40,
+        ...i && {
+          bgcolor: "action.selected"
+        }
+      },
+      src: e.icon,
+      alt: e.label,
+      width: "24px",
+      height: "24px",
+      skeletonVariant: "circle",
+      tooltip: "dddd"
+    }), /* @__PURE__ */ l(v, {
+      arrowType: "top-right",
+      open: Boolean(i),
+      anchorEl: i,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      onClose: n,
+      sx: {
+        mt: 1.5,
+        ml: 0.75,
+        width: 180,
+        rowGap: "100px",
+        "& .MuiMenuItem-root": {
+          px: 1,
+          typography: "body2",
+          borderRadius: 0.75
+        }
+      },
+      children: /* @__PURE__ */ l(h, {
+        spacing: 0.75,
+        children: t.map((r) => /* @__PURE__ */ m(b, {
+          selected: r.value === e.value,
+          onClick: () => {
+            p(r.value), n();
+          },
+          children: [/* @__PURE__ */ l(u, {
+            alt: r.label,
+            src: r.icon,
+            width: "24px",
+            height: "24px"
+          }), /* @__PURE__ */ l(P, {
+            children: r.label
+          })]
+        }, r.value))
+      })
+    })]
+  });
+}
+export {
+  V as L,
+  v as P
+};

package/components/mui_extended/Popover/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PopoverProps } from './types';
+export declare function Popover({ children, arrowType, sx, className, ...other }: PopoverProps): JSX.Element;
+export default Popover;

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

@@ -0,0 +1,9 @@
+import { PopoverProps as MUIPopeverProps } from '@mui/material';
+export declare type ArrowType = 'no-arrow' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'right-top' | 'right-center' | 'right-bottom';
+export declare type ArrowStyleProps = {
+    arrowType: ArrowType;
+};
+export interface PopoverProps extends MUIPopeverProps {
+    className?: string;
+    arrowType?: ArrowType;
+}

package/components/mui_extended/Typography/index.e5494696.js

@@ -0,0 +1,31 @@
+import { useModuleSkeleton as s } from "@m4l/core";
+import { Skeleton as p, Typography as i } from "@mui/material";
+import { jsx as r } from "react/jsx-runtime";
+const h = (t) => {
+  const {
+    skeletonWidth: e,
+    skeletongHeight: o
+  } = t;
+  return /* @__PURE__ */ r(p, {
+    variant: "text",
+    width: e,
+    height: o
+  });
+};
+function k(t) {
+  const {
+    skeletonWidth: e = "100%",
+    skeletongHeight: o = "18px",
+    ...n
+  } = t;
+  return s() ? /* @__PURE__ */ r(h, {
+    skeletonWidth: e,
+    skeletongHeight: o
+  }) : /* @__PURE__ */ r(i, {
+    className: "m4l_typography",
+    ...n
+  });
+}
+export {
+  k as T
+};