@mx-cartographer/experiences 9.0.2 → 9.1.0-alpha.bb1

package/dist/MiniWidgetContainer-COwnjfy7.mjs

@@ -0,0 +1,110 @@
+import { j as x } from "./Loader-BlVzRtUd.mjs";
+import a from "react";
+import { H3 as g, P as v, Text as z } from "@mxenabled/mxui";
+import C from "@mui/material/Button";
+import { ChevronRight as R, Icon as S } from "@mxenabled/mx-icons";
+import { Fragment as D, jsx as r, jsxs as p } from "react/jsx-runtime";
+import I from "@mui/material/Box";
+import B from "@mui/material/IconButton";
+import E from "@mui/material/Card";
+import T from "@mui/material/CardContent";
+import w from "@mui/material/CardHeader";
+var H = (s, t) => a.useMemo(() => {
+  let o = null;
+  return (...e) => {
+    o && clearTimeout(o), o = setTimeout(() => {
+      s(...e);
+    }, t);
+  };
+}, [s, t]);
+function j(s = 100) {
+  const [t, o] = a.useState({
+    width: 0,
+    height: 0
+  }), e = a.useRef(null), c = a.useRef(t), m = H((n, i) => {
+    (n !== c.current.width || i !== c.current.height) && (o({
+      width: n,
+      height: i
+    }), c.current = {
+      width: n,
+      height: i
+    });
+  }, s), d = a.useCallback((n) => {
+    if (e.current && (e.current.disconnect(), e.current = null), n?.nodeType === Node.ELEMENT_NODE) {
+      const i = new ResizeObserver(([l]) => {
+        if (l && l.borderBoxSize) {
+          const { inlineSize: u, blockSize: f } = l.borderBoxSize[0];
+          m(u, f);
+        }
+      });
+      i.observe(n), e.current = i;
+    }
+  }, [m]);
+  return a.useEffect(() => () => {
+    e.current && e.current.disconnect();
+  }, []), [d, t];
+}
+var $ = ({ children: s, className: t = "mx-cmn-mini-widget", closeLabel: o, contentStyles: e, onClose: c, onPrimaryCtaClick: m, primaryCtaLabel: d = "", primaryCtaLabelAria: n = "", subTitle: i = "", sx: l = {}, title: u = "" }) => {
+  const [f, { height: h, width: b }] = j();
+  return /* @__PURE__ */ p(E, {
+    className: t,
+    sx: {
+      touchAction: "manipulation",
+      ...l
+    },
+    children: [/* @__PURE__ */ r(w, {
+      sx: { pb: 8 },
+      title: /* @__PURE__ */ p(D, { children: [/* @__PURE__ */ p(I, {
+        sx: {
+          alignItems: "center",
+          display: "grid",
+          gap: 2,
+          gridTemplateColumns: "1fr auto",
+          pb: 4
+        },
+        children: [u && /* @__PURE__ */ r(g, { children: u }), c ? /* @__PURE__ */ r(B, {
+          "aria-label": o,
+          onClick: c,
+          size: "small",
+          children: /* @__PURE__ */ r(S, {
+            name: "close",
+            size: 24
+          })
+        }) : m && /* @__PURE__ */ r(C, {
+          "aria-label": n,
+          endIcon: /* @__PURE__ */ r(R, {}),
+          onClick: m,
+          size: "small",
+          children: /* @__PURE__ */ r(z, {
+            bold: !0,
+            variant: "body2",
+            children: d
+          })
+        })]
+      }), i && /* @__PURE__ */ r(v, {
+        color: "text.secondary",
+        sx: {
+          fontSize: 15,
+          lineHeight: "20px"
+        },
+        variant: "body2",
+        children: i
+      })] })
+    }), /* @__PURE__ */ r(T, {
+      ref: f,
+      sx: {
+        p: 0,
+        ...e
+      },
+      children: /* @__PURE__ */ r(x, {
+        availableHeight: h,
+        availableWidth: b,
+        children: s
+      })
+    })]
+  });
+};
+export {
+  j as n,
+  $ as t
+};

package/dist/OriginalBalanceAction-sbiqaxok.mjs

@@ -0,0 +1,110 @@
+import { J as v, X as f } from "./core-BexP5oiV.mjs";
+import { Bn as S, kn as _ } from "./accounts-DkyAiLpg.mjs";
+import { g as p, p as y } from "./Loader-BlVzRtUd.mjs";
+import h from "react";
+import { observer as b } from "mobx-react-lite";
+import { jsx as r } from "react/jsx-runtime";
+import T from "@mui/material/TextField";
+var I = b(({ goal: e }) => {
+  const { goals: n } = y(), { setAlert: o, setSelectedGoal: l, updateGoal: m } = p(), [t, s] = h.useState(e.interest_rate ?? 0), c = !e.guid, i = t < 0, d = async () => {
+    const a = {
+      ...e,
+      interest_rate: t
+    };
+    e.interest_rate = t, c ? l(a) : (await m(a), o(n.alert_goal_updated_interest_rate));
+  }, u = () => {
+    setTimeout(() => {
+      s(e.interest_rate ?? 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ r(_, {
+    isDisabled: e.is_complete,
+    isSaveDisabled: i,
+    label: `${n.details_interest_rate} (%)`,
+    onCancel: u,
+    onSave: d,
+    primaryText: n.details_interest_rate,
+    secondaryText: f(Number(e.interest_rate) / 100),
+    zeroStateText: e.interest_rate ? void 0 : n.add_interest_rate,
+    children: /* @__PURE__ */ r(T, {
+      error: i,
+      fullWidth: !0,
+      onChange: (a) => s(isNaN(parseFloat(a.target.value)) ? 0 : parseFloat(a.target.value)),
+      type: "number",
+      value: t
+    })
+  });
+}), F = b(({ goal: e }) => {
+  const { goals: n } = y(), { setAlert: o, setSelectedGoal: l, updateGoal: m } = p(), [t, s] = h.useState(e.monthly_payment ?? 0), c = !e.guid, i = t < 0 || t > 9999999999e-2, d = async () => {
+    const a = {
+      ...e,
+      monthly_payment: t
+    };
+    e.monthly_payment = t, c ? l(a) : (await m({
+      ...e,
+      monthly_payment: t
+    }), o(n.alert_goal_updated_payment));
+  }, u = () => {
+    setTimeout(() => {
+      s(e.monthly_payment || 0);
+    }, 250);
+  };
+  return /* @__PURE__ */ r(_, {
+    isDisabled: e.is_complete,
+    isSaveDisabled: i,
+    label: n.details_monthly_payment,
+    onCancel: u,
+    onSave: d,
+    primaryText: n.details_monthly_payment,
+    secondaryText: v(e.monthly_payment, "0,0"),
+    zeroStateText: e.monthly_payment ? void 0 : n.add_monthly_payment,
+    children: /* @__PURE__ */ r(S, {
+      amount: t,
+      autoFocus: !0,
+      error: i,
+      fullWidth: !0,
+      minAmount: 0,
+      setAmount: (a) => s(isNaN(Number(a)) ? t : Number(a)),
+      sx: { ".MuiTypography-body1": { p: 0 } }
+    })
+  });
+}), z = b(({ goal: e }) => {
+  const { goals: n } = y(), { setAlert: o, setSelectedGoal: l, updateGoal: m } = p(), [t, s] = h.useState(e.initial_amount), c = !e.guid, i = t < 0 || t > 9999999999e-2, d = async () => {
+    const a = {
+      ...e,
+      initial_amount: t
+    };
+    e.initial_amount = t, c ? l(a) : (await m({
+      ...e,
+      initial_amount: t
+    }), o(n.alert_goal_updated_balance));
+  }, u = () => {
+    setTimeout(() => {
+      s(e.initial_amount);
+    }, 250);
+  };
+  return /* @__PURE__ */ r(_, {
+    isDisabled: e.is_complete,
+    isSaveDisabled: i,
+    label: n.details_original_balance,
+    onCancel: u,
+    onSave: d,
+    primaryText: n.details_original_balance,
+    secondaryText: v(e.initial_amount, "0,0"),
+    zeroStateText: !e.initial_amount && !e.is_complete ? n.add_original_balance : void 0,
+    children: /* @__PURE__ */ r(S, {
+      amount: t,
+      autoFocus: !0,
+      error: i,
+      fullWidth: !0,
+      minAmount: 0,
+      setAmount: (a) => s(isNaN(Number(a)) ? t : Number(a)),
+      sx: { ".MuiTypography-body1": { p: 0 } }
+    })
+  });
+});
+export {
+  F as n,
+  I as r,
+  z as t
+};

package/dist/SpendingLegend-D15ixlQ1.mjs

@@ -0,0 +1,222 @@
+import { f as p } from "./GlobalCopyApi-BeXzaDH9.mjs";
+import { J as b, rt as _ } from "./core-BexP5oiV.mjs";
+import { dr as w, mr as N, vr as k } from "./accounts-DkyAiLpg.mjs";
+import { p as A } from "./Loader-BlVzRtUd.mjs";
+import T from "react";
+import { observer as M } from "mobx-react-lite";
+import h from "@mui/material/Stack";
+import { CategoryIcon as G, CategoryIconVariants as O, P as j, Text as f } from "@mxenabled/mxui";
+import R from "@mui/material/Button";
+import { Fragment as $, jsx as l, jsxs as y } from "react/jsx-runtime";
+import { useTheme as V } from "@mui/material/styles";
+import v from "@mui/material/Box";
+var D = 5, B = (a, s, i, c) => c.reduce((t, r) => {
+  const n = a.find((m) => m.guid === r.category_guid);
+  if (!n) return t;
+  const o = n.parent_guid ?? n.guid, d = a.find((m) => m.guid === o);
+  if (!d || r.total <= 0) return t;
+  const e = {
+    guid: n.guid,
+    name: n.guid === o ? `${s.parent_category_totals_label_general} ${n.name}` : n.name,
+    color: _(d.guid, i),
+    amount: r.total
+  }, g = t.find((m) => m.guid === o);
+  return g ? (g.amount += r.total, g.categoryTotals?.push(e)) : t.push({
+    guid: o,
+    name: d.name,
+    color: _(d.guid, i),
+    categoryTotals: [e],
+    amount: r.total
+  }), t;
+}, []), Z = (a, s, i, c) => {
+  const t = B(a, s, i, c).filter((e) => e.guid !== p.INCOME && e.guid !== p.INVESTMENTS && e.guid !== p.TRANSFER && e.amount > 0).sort((e, g) => g.amount - e.amount), r = t.reduce((e, g) => e + g.amount, 0), n = t.length > D ? D : t.length, o = t.slice(0, n), d = o.map((e) => ({
+    id: e.guid,
+    color: _(e.guid, i),
+    label: e.name,
+    value: e.amount / r * 100
+  }));
+  if (t.length > 5) {
+    const e = t.slice(D), g = e.reduce((m, C) => m + C.amount, 0);
+    o.push({
+      guid: "other",
+      color: i.palette.categories.others || "",
+      name: s.saving_goal_other,
+      categoryTotals: e,
+      amount: g
+    }), d.push({
+      id: "other",
+      color: i.palette.categories.others || "",
+      label: s.saving_goal_other,
+      value: g / r * 100
+    });
+  }
+  return {
+    categoryData: o,
+    donutData: d,
+    totalAmount: r
+  };
+}, tt = (a, s, i) => {
+  const c = a.filter((n) => n.guid === p.INCOME || n.parent_guid === p.INCOME), t = s.filter((n) => c.some((o) => o.guid === n.category_guid)).sort((n, o) => n.total - o.total).map((n, o) => ({
+    guid: n.category_guid,
+    name: a.find((d) => d.guid === n.category_guid)?.name,
+    color: i[o % i.length],
+    categoryTotals: [],
+    amount: Math.abs(n.total)
+  })), r = t.reduce((n, o) => n + o.amount, 0);
+  return {
+    categoryData: t,
+    donutData: t.map((n) => ({
+      id: n.guid,
+      color: n.color,
+      label: n.name,
+      value: n.amount / r * 100
+    })),
+    totalAmount: r
+  };
+}, P = ({ data: a, isIncome: s = !1, onSelected: i, onViewTransactions: c, selectedId: t, size: r = 150, totalLabel: n, variant: o = "mini" }) => {
+  const { spending: d } = A(), e = V(), { isTablet: g } = N(), { announce: m, ariaLive: C } = w(), u = T.useMemo(() => t ? a.categoryData.find((x) => x.guid === t) : void 0, [t]);
+  T.useEffect(() => {
+    if (u) {
+      const x = b(u.amount, o === "mini" ? "0,0" : "0,0.00");
+      m(`${u.name}: ${x}`);
+    }
+  }, [
+    u,
+    m,
+    o
+  ]);
+  const E = a.donutData.length > 0 ? a.donutData : [{
+    id: "0",
+    color: e.palette.divider,
+    value: 100
+  }], S = () => {
+    c?.(t);
+  }, I = g ? 32 : 48;
+  return /* @__PURE__ */ y($, { children: [C, /* @__PURE__ */ l(k, {
+    data: E,
+    onClick: i,
+    selectedId: t,
+    size: r,
+    children: /* @__PURE__ */ l(h, {
+      alignItems: "center",
+      height: "100%",
+      justifyContent: "center",
+      width: "100%",
+      children: /* @__PURE__ */ y(h, {
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: r,
+        minWidth: r,
+        children: [
+          u && /* @__PURE__ */ y(h, {
+            alignItems: "center",
+            gap: o === "mini" ? 0 : 8,
+            mb: o === "mini" ? 0 : 8,
+            mt: o === "mini" ? 0 : -16,
+            sx: o === "mini" ? {
+              gap: 0,
+              mb: 0
+            } : {
+              gap: {
+                xs: 4,
+                xl: 8
+              },
+              mb: {
+                xs: 4,
+                xl: 8
+              }
+            },
+            children: [/* @__PURE__ */ l(v, {
+              "aria-hidden": "true",
+              role: "presentation",
+              children: /* @__PURE__ */ l(G, {
+                categoryGuid: s ? p.INCOME : u.guid,
+                size: o === "mini" ? 24 : I,
+                variant: O.Transparent
+              })
+            }), /* @__PURE__ */ l(f, {
+              color: "text.secondary",
+              noWrap: !0,
+              variant: o === "mini" ? "tiny" : "body1",
+              children: u ? u.name : n
+            })]
+          }),
+          !u && o === "full" && /* @__PURE__ */ l(f, {
+            bold: !0,
+            color: "text.secondary",
+            sx: { mb: {
+              xs: 4,
+              xl: 8
+            } },
+            children: n
+          }),
+          /* @__PURE__ */ l(j, {
+            variant: o === "mini" ? "h2" : "h1",
+            children: u ? b(u.amount, o === "mini" ? "0,0" : "0,0.00") : b(a.totalAmount, o === "mini" ? "0,0" : "0,0.00")
+          }),
+          !u && o === "mini" && /* @__PURE__ */ l(f, {
+            color: "text.secondary",
+            noWrap: !0,
+            variant: "tiny",
+            children: n
+          }),
+          o === "full" && /* @__PURE__ */ l(R, {
+            "aria-label": `View ${u?.name || ""} Transactions`,
+            disabled: a.categoryData.length === 0,
+            onClick: S,
+            sx: {
+              mt: {
+                xl: 4,
+                xs: 0
+              },
+              zIndex: 1
+            },
+            variant: "text",
+            children: d.view_transactions
+          })
+        ]
+      })
+    })
+  })] });
+}, nt = M(P), ot = ({ data: a, onSelected: s, selectedId: i }) => {
+  const c = (t, r) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), s(r));
+  };
+  return /* @__PURE__ */ l(h, {
+    gap: 8,
+    height: "100%",
+    justifyContent: "center",
+    my: "auto",
+    children: a.categoryData.map((t) => /* @__PURE__ */ y(h, {
+      alignItems: "center",
+      "aria-label": t.name,
+      "aria-pressed": t.guid === i,
+      direction: "row",
+      gap: 8,
+      onClick: () => s(t.guid),
+      onKeyDown: (r) => c(r, t.guid),
+      role: "button",
+      sx: {
+        cursor: "pointer",
+        touchAction: "manipulation"
+      },
+      tabIndex: 0,
+      children: [/* @__PURE__ */ l(v, {
+        borderRadius: 4,
+        height: 8,
+        sx: { backgroundColor: t.color },
+        width: 8
+      }), /* @__PURE__ */ l(f, {
+        bold: t.guid === i,
+        variant: "caption",
+        children: t.name
+      })]
+    }, t.guid))
+  });
+};
+export {
+  Z as i,
+  nt as n,
+  tt as r,
+  ot as t
+};