@mx-cartographer/experiences 8.0.19 → 8.0.20

package/dist/WidgetContainer-DYKMArWw.mjs

@@ -0,0 +1,468 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import h from "react";
+import { observer as re } from "mobx-react-lite";
+import z from "@mui/material/Button";
+import se from "@mui/material/Card";
+import le from "@mui/material/CardContent";
+import de from "@mui/material/Divider";
+import K from "@mui/material/IconButton";
+import me from "@mui/material/Paper";
+import A from "@mui/material/Stack";
+import { ChevronLeft as ce } from "@mxenabled/mx-icons";
+import { Icon as D, Text as G, DateRangePicker as J } from "@mxenabled/mxui";
+import { u as ue } from "./useDimensions-CeDR9V8N.mjs";
+import { G as pe } from "./GlobalAccountFilter-CmnaZDS6.mjs";
+import { b as oe, u as ne, g as ge, a as he, W as fe } from "./hooks-BxkfR-Ff.mjs";
+import { addMonths as Q } from "date-fns/addMonths";
+import { addDays as be } from "date-fns/addDays";
+import { addYears as Z } from "date-fns/addYears";
+import { differenceInCalendarDays as Re } from "date-fns/differenceInCalendarDays";
+import { endOfDay as _e } from "date-fns/endOfDay";
+import { endOfMonth as w } from "date-fns/endOfMonth";
+import { endOfToday as ee } from "date-fns/endOfToday";
+import { endOfYear as Ce } from "date-fns/endOfYear";
+import { startOfMonth as xe } from "date-fns/startOfMonth";
+import { startOfToday as De } from "date-fns/startOfToday";
+import { startOfYear as ke } from "date-fns/startOfYear";
+import { subMonths as V } from "date-fns/subMonths";
+import { subDays as ye } from "date-fns/subDays";
+import { subYears as te } from "date-fns/subYears";
+import ae from "@mui/material/Box";
+import Te from "@mui/material/ButtonGroup";
+import Me from "@mui/material/Tab";
+import ve from "@mui/material/Tabs";
+import Pe from "@mui/material/ToggleButton";
+import Se from "@mui/material/ToggleButtonGroup";
+import Le from "@mui/material/styles/useTheme";
+import { u as Ye } from "./useAriaLive-MkYebyUR.mjs";
+import { D as Ee } from "./Dialog-Ck34yr-d.mjs";
+import { D as Ae } from "./Drawer-Bbe4AMB1.mjs";
+import { u as ie } from "./useScreenSize-CUcpY7aJ.mjs";
+import { f as M, D as v } from "./DateFormats-BMpMrZpW.mjs";
+import { L as Be } from "./Loader-D3rjKx72.mjs";
+import { A as Oe } from "./Analytics-0Xm_BjHU.mjs";
+const Ne = (o) => {
+  const { isDesktop: d, isMobile: a, isSmallTablet: m, isTablet: r } = ie(o), n = 24;
+  let u = 48, c = 32, P = 0, p = "h1";
+  const s = a || m;
+  let _ = !1;
+  r && !m ? (u = 24, c = 24, p = "h2") : s && (u = 8, c = 10, P = 10, p = "h3", _ = !0);
+  const i = {
+    pb: s ? 12 : 0,
+    ...s && {
+      px: u,
+      "& .mx-cmn-date-range-selector": { m: 0, width: "100%" },
+      "& .mx-cmn-date-range-selector > .MuiBox-root": { display: "flex" },
+      "& .MuiButtonGroup-root": { width: "100%" },
+      "& .MuiButtonGroup-middleButton": { flex: 1 },
+      "& .MuiToggleButtonGroup-root": { width: "100%", justifyContent: "center" }
+    }
+  };
+  return {
+    actionsFlex: s ? 0 : 1,
+    containerSquareCorners: _,
+    headerHeadingLevel: p,
+    headerPaddingBottom: P,
+    headerPaddingTop: c,
+    headerPaddingX: u,
+    iconSize: n,
+    isCompact: s,
+    isDesktop: d,
+    slotSx: i
+  };
+}, Ie = ({
+  calendarActions: o,
+  color: d = "primary",
+  copy: a,
+  range: m = [xe(De()), w(ee())],
+  shouldShrinkToIcon: r = !0,
+  variant: n = "outlined"
+}) => {
+  const u = Le(), { isMobile: c } = ie(), { announce: P, ariaLive: p } = Ye(), [s, _] = h.useState(m), [i, F] = h.useState(a.dateRangePickerCopy.dateRangeThisMonth), [C, B] = h.useState(s), [E, k] = h.useState(!1), [H, W] = h.useState(!0), [S, j] = h.useState(6), O = {
+    buttons: [
+      { ariaLabel: "3 Months", label: "3M", value: 3 },
+      { ariaLabel: "6 Months", label: "6M", value: 6 },
+      { ariaLabel: "9 Months", label: "9M", value: 9 },
+      { ariaLabel: "1 Year", label: "1Y", value: 12 }
+    ],
+    tabs: [
+      { label: "3 Months", value: 3 },
+      { label: "6 Months", value: 6 },
+      { label: "9 Months", value: 9 },
+      { label: "1 Year", value: 12 }
+    ]
+  };
+  h.useEffect(() => {
+    _(m), B(m);
+  }, [m]), h.useEffect(() => {
+    (n === "timeframebuttons" || n === "timeframetabs") && o.onRangeChanged($());
+  }, [S]);
+  const $ = () => {
+    const t = w(ee());
+    return [w(V(t, S)), t];
+  }, N = (t) => {
+    const [l, g] = s, b = t === "previous";
+    let R;
+    if (i === a.dateRangePickerCopy.dateRangeThisMonth || i === a.dateRangePickerCopy.dateRangeLastMonth)
+      R = [
+        b ? V(l, 1) : Q(l, 1),
+        w(b ? V(g, 1) : Q(g, 1))
+      ];
+    else if (i === a.dateRangePickerCopy.dateRangeYTD || i === a.dateRangePickerCopy.dateRangeLastYear) {
+      const T = ke(l), x = Ce(l);
+      R = [
+        b ? te(T, 1) : Z(T, 1),
+        b ? te(x, 1) : Z(x, 1)
+      ];
+    } else {
+      const T = Re(g, l), x = b ? ye : be;
+      R = [x(l, T), x(g, T)];
+    }
+    _(R), o.onRangeChanged(R);
+  }, L = () => {
+    _(C), W(
+      i === a.dateRangePickerCopy.dateRangeThisMonth || i === a.dateRangePickerCopy.dateRangeLastMonth
+    ), o.onRangeChanged(C);
+  }, y = (t, l) => {
+    t[1] = t[1] ?? t[0];
+    const g = [t[0], t[1] ? _e(t[1]) : t[1]], b = M(g[0], v.MONTH_DAY_YEAR), R = M(g[1], v.MONTH_DAY_YEAR);
+    B(g), F(l), P(`${a.dateRangePickerCopy}: ${b} - ${R}`);
+  }, Y = (t) => {
+    j(t);
+  };
+  return /* @__PURE__ */ f(ae, { className: "mx-cmn-date-range-selector", m: 4, children: [
+    /* @__PURE__ */ f(
+      ae,
+      {
+        sx: {
+          [u.breakpoints.down("sm")]: {
+            display: r ? "none" : "flex",
+            justifyContent: "center"
+          },
+          [u.breakpoints.up("sm")]: { display: "inline-flex" }
+        },
+        children: [
+          n === "readonly" && /* @__PURE__ */ f(A, { alignItems: "center", direction: "row", gap: 8, children: [
+            /* @__PURE__ */ e(D, { name: "calendar_month", size: 24 }),
+            /* @__PURE__ */ e(G, { bold: !0, children: M(C[0], v.MONTH_DAY) }),
+            /* @__PURE__ */ e(D, { name: "remove" }),
+            /* @__PURE__ */ e(G, { bold: !0, children: M(C[1], v.MONTH_DAY_YEAR) })
+          ] }),
+          n !== "readonly" && n !== "timeframebuttons" && n !== "timeframetabs" && /* @__PURE__ */ f(
+            Te,
+            {
+              color: d,
+              sx: {
+                "& .MuiButtonGroup-grouped": {
+                  padding: c ? 0 : 12
+                },
+                "& .MuiButtonGroup-middleButton": {
+                  px: 24
+                },
+                height: 44
+              },
+              variant: n,
+              children: [
+                /* @__PURE__ */ e(
+                  z,
+                  {
+                    "aria-disabled": o.shouldDisablePrevious,
+                    "aria-label": a.dateRangePreviousAria,
+                    color: o.shouldDisablePrevious ? "secondary" : "primary",
+                    onClick: () => o.shouldDisablePrevious ? null : N("previous"),
+                    children: /* @__PURE__ */ e(D, { name: "chevron_left", size: 20 })
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  z,
+                  {
+                    "aria-disabled": o.shouldDisablePicker,
+                    color: d,
+                    onClick: () => o.shouldDisablePicker ? null : k(!0),
+                    startIcon: /* @__PURE__ */ e(D, { name: "calendar_month", size: 20 }),
+                    sx: {
+                      p: c ? 0 : 8
+                    },
+                    children: H ? M(s[0], v.MONTH_YEAR) : /* @__PURE__ */ f("span", { children: [
+                      M(s[0], v.MONTH_DAY_YEAR),
+                      " -",
+                      " ",
+                      M(s[1], v.MONTH_DAY_YEAR)
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  z,
+                  {
+                    "aria-disabled": o.shouldDisableNext,
+                    "aria-label": a.dateRangeNextAria,
+                    color: o.shouldDisableNext ? "secondary" : "primary",
+                    onClick: () => o.shouldDisableNext ? null : N("next"),
+                    children: /* @__PURE__ */ e(D, { name: "chevron_right", size: 20 })
+                  }
+                )
+              ]
+            }
+          ),
+          n === "timeframebuttons" && /* @__PURE__ */ e(
+            Se,
+            {
+              "aria-label": a.dateRangeEditTitle,
+              color: d,
+              exclusive: !0,
+              orientation: "horizontal",
+              value: S,
+              children: O.buttons.map((t) => /* @__PURE__ */ e(
+                Pe,
+                {
+                  "aria-label": t.ariaLabel,
+                  onClick: () => Y(t.value),
+                  sx: { width: 56 },
+                  value: t.value,
+                  children: t.label
+                },
+                t.label
+              ))
+            }
+          ),
+          n === "timeframetabs" && /* @__PURE__ */ e(
+            ve,
+            {
+              indicatorColor: "primary",
+              onChange: (t, l) => Y(l),
+              textColor: "primary",
+              value: S,
+              variant: "fullWidth",
+              children: O.tabs.map((t) => /* @__PURE__ */ e(
+                Me,
+                {
+                  label: /* @__PURE__ */ e(G, { bold: !0, variant: "body1", children: t.label }),
+                  sx: { minWidth: 80 },
+                  value: t.value
+                },
+                t.label
+              ))
+            }
+          )
+        ]
+      }
+    ),
+    E && c && /* @__PURE__ */ f(
+      Ae,
+      {
+        ariaLabelClose: a.dateRangeCloseAria,
+        isOpen: E,
+        onClose: () => k(!1),
+        onPrimaryAction: () => {
+          L(), k(!1);
+        },
+        primaryText: a.dateRangeEditApply,
+        title: a.dateRangeEditTitle,
+        children: [
+          p,
+          /* @__PURE__ */ e(
+            J,
+            {
+              copy: a.dateRangePickerCopy,
+              dateRange: C,
+              onRangeChanged: y,
+              selectedShortcut: i,
+              sx: { p: 0 }
+            }
+          )
+        ]
+      }
+    ),
+    E && !c && /* @__PURE__ */ f(
+      Ee,
+      {
+        copy: { title: a.dateRangeEditTitle },
+        isOpen: !0,
+        onClose: () => k(!1),
+        onPrimaryAction: () => L(),
+        primaryText: a.dateRangeEditApply,
+        sx: {
+          "& .MuiDialogContent-root": {
+            padding: 0
+          }
+        },
+        children: [
+          p,
+          /* @__PURE__ */ e(
+            J,
+            {
+              copy: a.dateRangePickerCopy,
+              dateRange: C,
+              onRangeChanged: y,
+              selectedShortcut: i,
+              sx: {
+                pt: 0,
+                "& .MuiPickersLayout-toolbar": {
+                  gridColumn: "1/4"
+                }
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, we = Ie, ze = re(
+  ({ calendarActions: o, dateRange: d, dateRangeVariant: a }) => {
+    const { displayedDateRange: m } = oe(), { common: r } = ne(), n = {
+      dateRangePickerCopy: {
+        dateRangeFrom: r.date_range_picker.from,
+        dateRangeTo: r.date_range_picker.to,
+        dateRangeCustom: r.date_range_picker.custom,
+        dateRangeSelectARange: r.date_range_picker.select_range,
+        dateRangeThisMonth: r.date_range_picker.this_month,
+        dateRangeLastMonth: r.date_range_picker.last_month,
+        dateRangeLast30Days: r.date_range_picker.last_30_days,
+        dateRangeLast90Days: r.date_range_picker.last_90_days,
+        dateRangeYTD: r.date_range_picker.ytd,
+        dateRangeLastYear: r.date_range_picker.last_year,
+        dateRangeSelect: r.date_range_picker.select
+      },
+      dateRangeEditApply: r.date_range_picker.edit_apply,
+      dateRangeEditTitle: r.date_range_picker.edit_title,
+      dateRangeNextAria: r.date_range_picker.next_aria,
+      dateRangePreviousAria: r.date_range_picker.previous_aria
+    }, u = d ? d.start : m.start, c = d ? d.end : m.end;
+    return /* @__PURE__ */ e(
+      we,
+      {
+        calendarActions: o,
+        copy: n,
+        range: [u, c],
+        shouldShrinkToIcon: !1,
+        variant: a
+      }
+    );
+  }
+), St = re(
+  ({
+    actions: o,
+    allowedAccountTypes: d,
+    calendarActions: a,
+    children: m,
+    className: r = "mx-cmn-widget",
+    dateRange: n,
+    dateRangeVariant: u,
+    hasDivider: c = !1,
+    onAccountsFilterClick: P,
+    onBackClick: p,
+    onMenuClick: s,
+    showAccountFilter: _ = !0,
+    slotComponent: i,
+    sx: F = {},
+    title: C = ""
+  }) => {
+    const [B, { height: E, width: k }] = ue(), { onEvent: H } = ge(), {
+      actionsFlex: W,
+      containerSquareCorners: S,
+      headerHeadingLevel: j,
+      headerPaddingBottom: O,
+      headerPaddingTop: $,
+      headerPaddingX: N,
+      iconSize: L,
+      isCompact: y,
+      isDesktop: Y,
+      slotSx: t
+    } = Ne(k), { isCopyLoaded: l } = oe(), { common: g } = ne(), {
+      config: { display_widget_headings: b }
+    } = he(), R = () => {
+      p && (p(), H(Oe.WIDGET_BACK_CLICK));
+    };
+    if (!l)
+      return /* @__PURE__ */ e(Be, {});
+    const T = () => y && s ? /* @__PURE__ */ e(K, { color: "primary", onClick: s, sx: { p: 10 }, children: /* @__PURE__ */ e(D, { name: "menu_open", size: L, sx: { transform: "rotate(180deg)" } }) }) : p ? /* @__PURE__ */ e(
+      K,
+      {
+        "aria-label": g.back_to_dashboard,
+        color: "primary",
+        onClick: R,
+        sx: { p: 10 },
+        children: /* @__PURE__ */ e(ce, { size: 24 })
+      }
+    ) : null, x = a && /* @__PURE__ */ e(A, { alignItems: "center", sx: t, children: /* @__PURE__ */ e(
+      ze,
+      {
+        calendarActions: a,
+        dateRange: n,
+        dateRangeVariant: u
+      }
+    ) });
+    return /* @__PURE__ */ e(
+      me,
+      {
+        className: r,
+        elevation: 1,
+        ref: B,
+        square: S,
+        sx: { borderBottomLeftRadius: 0, borderBottomRightRadius: 0, margin: 0, ...F },
+        children: /* @__PURE__ */ f(se, { children: [
+          /* @__PURE__ */ f(
+            A,
+            {
+              alignItems: "center",
+              alignSelf: "stretch",
+              direction: "row",
+              justifyContent: "space-between",
+              sx: {
+                pb: O,
+                pt: $,
+                px: N
+              },
+              children: [
+                T(),
+                /* @__PURE__ */ e(A, { alignItems: "flex-start", minWidth: 0, sx: { flex: 1 }, children: b && /* @__PURE__ */ e(G, { sx: { width: "100%" }, truncate: !0, variant: j, children: C }) }),
+                !y && (i || x),
+                /* @__PURE__ */ f(
+                  A,
+                  {
+                    alignItems: "center",
+                    direction: "row",
+                    justifyContent: "flex-end",
+                    sx: { flex: W, flexShrink: 0 },
+                    children: [
+                      _ && /* @__PURE__ */ e(
+                        pe,
+                        {
+                          allowedAccountTypes: d,
+                          isDesktop: Y,
+                          onAccountFilterClick: P
+                        }
+                      ),
+                      o?.map((q) => {
+                        if (h.isValidElement(q))
+                          return h.cloneElement(q, { isDesktop: Y });
+                        const { iconName: I, onClick: X, label: U } = q;
+                        return Y ? /* @__PURE__ */ e(
+                          z,
+                          {
+                            onClick: X,
+                            startIcon: /* @__PURE__ */ e(D, { name: I, size: L }),
+                            children: U
+                          },
+                          I
+                        ) : /* @__PURE__ */ e(K, { "aria-label": U, color: "primary", onClick: X, children: /* @__PURE__ */ e(D, { name: I, size: L }) }, I);
+                      })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          y && (i || x),
+          y && c && /* @__PURE__ */ e(de, {}),
+          /* @__PURE__ */ e(le, { children: /* @__PURE__ */ e(fe, { availableHeight: E, availableWidth: k, children: m }) })
+        ] })
+      }
+    );
+  }
+);
+export {
+  we as D,
+  St as W,
+  Ne as u
+};