@m4l/components 0.1.40 → 0.1.41

package/components/LanguagePopover/index.cbc4b282.js

@@ -0,0 +1,144 @@
+import { useState, useEffect } from "react";
+import { styled, Stack, MenuItem } from "@mui/material";
+import { I as Image } from "../Image/index.93d5f37f.js";
+import { useLocales } from "@m4l/graphics";
+import { useEnvironment, useNetwork } from "@m4l/core";
+import "../Icon/index.8d754623.js";
+import "@mui/material/styles";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import "../mui_extended/Accordion/index.a541c71c.js";
+import "../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
+import "@mui/lab";
+import { I as ImageButton } from "../mui_extended/Button/index.86a155a2.js";
+import { P as Popover } from "../mui_extended/Popover/index.53c77d23.js";
+import "../mui_extended/MenuActions/index.ee17bddd.js";
+import "../mui_extended/Pager/index.74d3f5fc.js";
+import "../mui_extended/Tab/index.e0653a0a.js";
+const LabelItem = styled("span")(({
+  theme
+}) => ({
+  marginLeft: theme.spacing(1)
+}));
+const ContainerProgress = styled("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(0.75, 0),
+  margin: theme.spacing(0, 1.25)
+}));
+const ContainerMenuItems = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column"
+}));
+function LanguagePopover() {
+  const {
+    currentLocale,
+    onChangeLocale
+  } = useLocales();
+  const {
+    domain_token
+  } = useEnvironment();
+  const {
+    networkOperation
+  } = useNetwork();
+  const [open, setOpen] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [allLocales, setAllLocales] = useState([]);
+  const handleOpen = (event) => {
+    setOpen(event.currentTarget);
+  };
+  const handleClose = () => {
+    setOpen(null);
+  };
+  useEffect(() => {
+    let mounted = true;
+    if (open === null || loading || allLocales.length > 0) {
+      return;
+    }
+    setLoading(true);
+    networkOperation({
+      method: "GET",
+      endPoint: `na/locales`,
+      parms: {
+        domain_token
+      }
+    }).then((response) => {
+      if (mounted) {
+        setAllLocales(response.data);
+      }
+    }).finally(() => {
+      setLoading(false);
+    });
+    return function cleanUp() {
+      mounted = false;
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(ImageButton, {
+      className: "m4l_language_popover",
+      onClick: handleOpen,
+      sx: {
+        width: 40,
+        height: 40,
+        ...open && {
+          bgcolor: "action.selected"
+        }
+      },
+      src: currentLocale?.url_icon || "",
+      alt: currentLocale?.name,
+      width: "24px",
+      height: "24px",
+      skeletonVariant: "circle",
+      tooltip: "dddd"
+    }), /* @__PURE__ */ jsx(Popover, {
+      arrowType: "top-right",
+      open: Boolean(open),
+      anchorEl: open,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      onClose: handleClose,
+      sx: {
+        mt: 1.5,
+        ml: 0.75,
+        width: 180,
+        rowGap: "100px",
+        "& .MuiMenuItem-root": {
+          px: 1,
+          typography: "body2",
+          borderRadius: 0.75
+        }
+      },
+      children: /* @__PURE__ */ jsxs(ContainerMenuItems, {
+        children: [allLocales.length === 0 && /* @__PURE__ */ jsx(ContainerProgress, {
+          children: /* @__PURE__ */ jsx(CircularProgress, {
+            size: "20px"
+          })
+        }), allLocales.length > 0 && /* @__PURE__ */ jsx(Stack, {
+          spacing: 0.75,
+          children: allLocales.map((option) => /* @__PURE__ */ jsxs(MenuItem, {
+            selected: option.lang === currentLocale?.lang && option?.script === currentLocale?.script && option?.region === currentLocale?.region,
+            onClick: () => {
+              onChangeLocale(option);
+              handleClose();
+            },
+            children: [/* @__PURE__ */ jsx(Image, {
+              alt: option.name,
+              src: option.url_icon,
+              width: "24px",
+              height: "24px"
+            }), /* @__PURE__ */ jsx(LabelItem, {
+              children: option.name
+            })]
+          }, option.lang || option.script || option.region))
+        })]
+      })
+    })]
+  });
+}
+export {
+  LanguagePopover as L
+};

package/components/LanguagePopover/index.d.ts

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

package/components/LanguagePopover/styles.d.ts

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

package/components/Loadable/index.117eaced.js

@@ -0,0 +1,14 @@
+import { Suspense } from "react";
+import { P as PropagateLoader } from "../animate/PropagateLoader/index.be5b02c3.js";
+import { jsx } from "react/jsx-runtime";
+const Loadable = (Component) => function EmbededLoadable(props) {
+  return /* @__PURE__ */ jsx(Suspense, {
+    fallback: /* @__PURE__ */ jsx(PropagateLoader, {}),
+    children: /* @__PURE__ */ jsx(Component, {
+      ...props
+    })
+  });
+};
+export {
+  Loadable as L
+};

package/components/Loadable/index.d.ts

@@ -0,0 +1,2 @@
+import { ElementType } from 'react';
+export declare const Loadable: (Component: ElementType) => (props: any) => JSX.Element;

package/components/ModalDialog/index.a684827f.js

@@ -0,0 +1,123 @@
+import { Dialog, Paper } from "@mui/material";
+import { c as cjs } from "../../react-draggable.84d6b038.js";
+import { u as useModal } from "../../hooks/useModal/index.d14edee3.js";
+import { styled } from "@mui/material/styles";
+import { a as getThemeVariantColor } from "../../utils/index.899eb67b.js";
+import { R as ResizeableWindow } from "../Resizeable/index.c96c0f09.js";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.d3e1f36e.js";
+const WrapperDialog = styled(Dialog)(() => ({}));
+const Container = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  overflow: "hidden",
+  padding: theme.spacing(3)
+}));
+styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  minHeight: theme.spacing(5),
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  overflow: "hidden"
+}));
+styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  alignItems: "center",
+  cursor: "move",
+  ...theme.typography.subtitle1,
+  color: theme.palette.text.primary
+}));
+styled("div")(({ theme, variant }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginRight: theme.spacing(1.5),
+  "& > span": {
+    background: getThemeVariantColor(theme, variant)
+  }
+}));
+styled("div")(() => ({
+  flexGrow: 1,
+  position: "relative",
+  overflow: "auto"
+}));
+styled("div")(({ theme, variant }) => ({
+  ...theme.typography.subtitle1,
+  color: getThemeVariantColor(theme, variant),
+  width: "100%",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+  overflow: "hidden"
+}));
+const DragabblePaperComponent = (props) => {
+  return /* @__PURE__ */ jsx(cjs.exports, {
+    handle: ".m4l_draggable_handle",
+    cancel: '[class*="MuiDialogContent-root"]',
+    children: /* @__PURE__ */ jsx(Paper, {
+      sx: {
+        maxHeight: "unset",
+        maxWidth: "unset"
+      },
+      ...props
+    })
+  });
+};
+function PaperComponent(props) {
+  return /* @__PURE__ */ jsx(Paper, {
+    sx: {
+      maxHeight: "unset",
+      maxWidth: "unset",
+      height: "100%"
+    },
+    ...props
+  });
+}
+const ModalDialog = () => {
+  const {
+    open,
+    initialWidth = 600,
+    initialHeigth = 400,
+    maxWidth,
+    maxHeigth,
+    window,
+    fullScreen
+  } = useModal();
+  const isDesktop = useResponsiveDesktop();
+  const contentComnponent = /* @__PURE__ */ jsx(Container, {
+    id: "Container",
+    children: typeof window === "function" ? window() : window
+  });
+  return /* @__PURE__ */ jsxs(WrapperDialog, {
+    open,
+    "aria-labelledby": "child-modal-title",
+    "aria-describedby": "child-modal-description",
+    PaperComponent: isDesktop ? DragabblePaperComponent : PaperComponent,
+    maxWidth: false,
+    fullWidth: !isDesktop,
+    fullScreen,
+    disableEnforceFocus: true,
+    children: [isDesktop && /* @__PURE__ */ jsx(ResizeableWindow, {
+      width: initialWidth,
+      height: initialHeigth,
+      maxWidth,
+      maxHeigth,
+      children: contentComnponent
+    }), !isDesktop && contentComnponent]
+  });
+};
+function getModalDialogComponentsDictionary() {
+  return ["modal_dialog"].concat(getCommonActionsDictionary());
+}
+const defaultModalDialogDictionary = {
+  modal_dialog: {}
+};
+export {
+  ModalDialog as M,
+  defaultModalDialogDictionary as d,
+  getModalDialogComponentsDictionary as g
+};

package/components/NoItemSelected/dictionary.d.ts

@@ -0,0 +1,3 @@
+import { Dictionary } from '@m4l/core';
+export declare function getNoItemSelectedComponentsDictionary(): string[];
+export declare const defaultNoItemSelectedDictionary: Dictionary;

package/components/NoItemSelected/index.46d2f632.js

@@ -0,0 +1,85 @@
+import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { styled } from "@mui/material/styles";
+import { I as Image } from "../Image/index.93d5f37f.js";
+import { Skeleton } from "@mui/material";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+const WrapperNoItemSelected = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  maxWidth: "400px",
+  minWidth: "300px",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: theme.spacing(3)
+}));
+const Img = styled(Image)(() => ({
+  display: "flex"
+}));
+const Label = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  padding: `${theme.spacing(1.5)} ${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(1)}`,
+  color: theme.palette.text.primary
+}));
+const WrapperSKTNoItemSelected = styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  minWidth: "100%",
+  minHeight: "230px",
+  mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
+  WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`
+}));
+function NoItemSelected() {
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const src = useMemo(() => {
+    return `${host_static_assets}/${environment_assets}/frontend/components/no_item_selected/assets/icons/no_selected.svg`;
+  }, []);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(WrapperNoItemSelected, {
+      id: "WrapperNoItemSelected",
+      children: /* @__PURE__ */ jsx(WrapperSKTNoItemSelected, {
+        id: "WrapperSKTNoItemSelected",
+        children: /* @__PURE__ */ jsx(Skeleton, {
+          variant: "rectangular",
+          width: "100%",
+          height: "100%"
+        })
+      })
+    });
+  }
+  return /* @__PURE__ */ jsxs(WrapperNoItemSelected, {
+    id: "WrapperNoItemSelected",
+    children: [/* @__PURE__ */ jsx(Img, {
+      src,
+      width: "100%",
+      height: "100%"
+    }), /* @__PURE__ */ jsx(Label, {
+      children: getLabel("no_item_selected.message")
+    })]
+  });
+}
+function getNoItemSelectedComponentsDictionary() {
+  return ["no_item_selected"];
+}
+const defaultNoItemSelectedDictionary = {
+  no_item_selected: {
+    message: "Please select a item to show detail"
+  }
+};
+export {
+  NoItemSelected as N,
+  defaultNoItemSelectedDictionary as d,
+  getNoItemSelectedComponentsDictionary as g
+};

package/components/NoItemSelected/index.d.ts

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

package/components/NoItemSelected/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const WrapperNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Img: import("@emotion/styled").StyledComponent<import("../Image/types").ImageProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Label: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const WrapperSKTNoItemSelected: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/ObjectLogs/components/DetailDialog/index.d.ts

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

package/components/ObjectLogs/components/DetailDialog/styles.d.ts

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

package/components/ObjectLogs/components/DetailFormatter/index.d.ts

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

package/components/ObjectLogs/dictionary.d.ts

@@ -0,0 +1,3 @@
+import { Dictionary } from '@m4l/core';
+export declare function getObjectLogsComponentsDictionary(): string[];
+export declare const defaultObjectLogDictionary: Dictionary;