@mx-cartographer/experiences 9.2.4-alpha.al0 → 9.3.0-alpha.bb1

package/dist/spending/components/SpendingLegend/index.es.js

@@ -0,0 +1,46 @@
+import "react";
+import i from "@mui/material/Stack";
+import { Text as u } from "@mxenabled/mxui";
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import p from "@mui/material/Box";
+var x = ({ data: e, onSelected: n, selectedId: t }) => {
+  const d = (r, o) => {
+    (r.key === "Enter" || r.key === " ") && (r.preventDefault(), n(o));
+  };
+  return /* @__PURE__ */ a(i, {
+    gap: 8,
+    height: "100%",
+    justifyContent: "center",
+    my: "auto",
+    children: e.categoryData.map((r) => /* @__PURE__ */ c(i, {
+      alignItems: "center",
+      "aria-label": r.name,
+      "aria-pressed": r.guid === t,
+      direction: "row",
+      gap: 8,
+      onClick: () => n(r.guid),
+      onKeyDown: (o) => d(o, r.guid),
+      role: "button",
+      sx: {
+        cursor: "pointer",
+        touchAction: "manipulation"
+      },
+      tabIndex: 0,
+      children: [/* @__PURE__ */ a(p, {
+        borderRadius: 4,
+        height: 8,
+        sx: { backgroundColor: r.color },
+        width: 8
+      }), /* @__PURE__ */ a(u, {
+        bold: r.guid === t,
+        variant: "caption",
+        children: r.name
+      })]
+    }, r.guid))
+  });
+};
+export {
+  x as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/spending/components/SpendingLegend/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/spending/components/SpendingLegend.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport type { SpendingData } from '../utils/SpendingData'\n\ninterface SpendingLegendProps {\n  data: SpendingData\n  onSelected: (id: string) => void\n  selectedId: string\n}\n\nconst SpendingLegend: React.FC<SpendingLegendProps> = ({ data, onSelected, selectedId }) => {\n  const handleKeyDown = (event: React.KeyboardEvent, guid: string) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onSelected(guid)\n    }\n  }\n\n  return (\n    <Stack gap={8} height=\"100%\" justifyContent=\"center\" my=\"auto\">\n      {data.categoryData.map((item) => (\n        <Stack\n          alignItems=\"center\"\n          aria-label={item.name}\n          aria-pressed={item.guid === selectedId}\n          direction=\"row\"\n          gap={8}\n          key={item.guid}\n          onClick={() => onSelected(item.guid)}\n          onKeyDown={(e) => handleKeyDown(e, item.guid)}\n          role=\"button\"\n          sx={{ cursor: 'pointer', touchAction: 'manipulation' }}\n          tabIndex={0}\n        >\n          <Box borderRadius={4} height={8} sx={{ backgroundColor: item.color }} width={8} />\n          <Text bold={item.guid === selectedId} variant=\"caption\">\n            {item.name}\n          </Text>\n        </Stack>\n      ))}\n    </Stack>\n  )\n}\n\nexport default SpendingLegend\n"],"mappings":";;;;;AAeA,IAAM,IAAA,CAAiD,EAAE,MAAA,GAAM,YAAA,GAAY,YAAA,EAAA,MAAiB;AAC1F,QAAM,IAAA,CAAiB,GAA4B,MAAiB;AAClE,KAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,EAAW,CAAI;AAAA,EAEnB;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,IAAG,QAAO;AAAA,IAAO,gBAAe;AAAA,IAAS,IAAG;AAAA,cACrD,EAAK,aAAa,IAAA,CAAK,MACtB,gBAAA,EAAC,GAAD;AAAA,MACE,YAAW;AAAA,MACX,cAAY,EAAK;AAAA,MACjB,gBAAc,EAAK,SAAS;AAAA,MAC5B,WAAU;AAAA,MACV,KAAK;AAAA,MAEL,SAAA,MAAe,EAAW,EAAK,IAAI;AAAA,MACnC,WAAA,CAAY,MAAM,EAAc,GAAG,EAAK,IAAI;AAAA,MAC5C,MAAK;AAAA,MACL,IAAI;AAAA,QAAE,QAAQ;AAAA,QAAW,aAAa;AAAA,MAAe;AAAA,MACrD,UAAU;AAAA,gBAXZ,CAaE,gBAAA,EAAC,GAAD;AAAA,QAAK,cAAc;AAAA,QAAG,QAAQ;AAAA,QAAG,IAAI,EAAE,iBAAiB,EAAK,MAAM;AAAA,QAAG,OAAO;AAAA,MAAI,CAAA,GACjF,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM,EAAK,SAAS;AAAA,QAAY,SAAQ;AAAA,kBAC3C,EAAK;AAAA,MACF,CAAA,CACD;AAAA,OAXA,EAAK,IAWL,CACR;AAAA,EACI,CAAA;AAEX"}

package/dist/spending/components/SpendingList/index.es.js

@@ -0,0 +1,124 @@
+import { useGlobalCopyStore as y } from "../../../common/context/hooks/index.es.js";
+import { formatCurrency as l } from "../../../core/utils/NumberFormatting/index.es.js";
+import f from "react";
+import { observer as x } from "mobx-react-lite";
+import s from "@mui/material/Stack";
+import { Text as t } from "@mxenabled/mxui";
+import { jsx as i, jsxs as o } from "react/jsx-runtime";
+import b from "@mui/material/Box";
+import C from "@mui/material/Divider";
+import p from "@mui/material/List";
+import u from "@mui/material/ListItem";
+import h from "@mui/material/ListItemButton";
+import v from "@mui/material/Collapse";
+var w = ({ data: n, onSelected: g, selectedId: d = "", title: m }) => {
+  const { spending: c } = y(), a = n.categoryData.find((r) => r.guid === d);
+  return /* @__PURE__ */ o(s, {
+    direction: "column",
+    justifyContent: "center",
+    maxWidth: 400,
+    minWidth: 275,
+    width: "100%",
+    children: [
+      /* @__PURE__ */ i(t, {
+        bold: !0,
+        id: "spending-list-title",
+        sx: { py: 12 },
+        variant: "h3",
+        children: `${m} ${c.by_category}`
+      }),
+      /* @__PURE__ */ i(C, { "aria-hidden": "true" }),
+      /* @__PURE__ */ i(p, {
+        "aria-labelledby": "spending-list-title",
+        children: n.categoryData.map((r) => /* @__PURE__ */ o(f.Fragment, { children: [/* @__PURE__ */ i(u, {
+          disableGutters: !0,
+          disablePadding: !0,
+          sx: {
+            borderBottom: 1,
+            borderColor: "divider",
+            minHeight: 44
+          },
+          children: /* @__PURE__ */ o(h, {
+            "aria-expanded": a?.guid === r.guid,
+            id: `spending-list-category-${r.guid}`,
+            onClick: () => g(r.guid),
+            sx: {
+              minHeight: 44,
+              px: 8,
+              py: 0
+            },
+            children: [/* @__PURE__ */ i(b, {
+              "aria-hidden": "true",
+              borderRadius: 4,
+              flexShrink: 0,
+              height: 8,
+              role: "presentation",
+              sx: {
+                backgroundColor: r.color,
+                mr: 8
+              },
+              width: 8
+            }), /* @__PURE__ */ o(s, {
+              alignItems: "center",
+              direction: "row",
+              justifyContent: "space-between",
+              width: "100%",
+              children: [/* @__PURE__ */ i(t, {
+                bold: d === r.guid,
+                children: r.name
+              }), /* @__PURE__ */ i(t, {
+                bold: d === r.guid,
+                variant: "body1",
+                children: l(r.amount, "0,0.00")
+              })]
+            })]
+          })
+        }), r.categoryTotals && r.categoryTotals.length > 0 && /* @__PURE__ */ i(v, {
+          in: a?.guid === r.guid,
+          unmountOnExit: !0,
+          children: /* @__PURE__ */ i(p, {
+            sx: {
+              borderBottom: 1,
+              borderColor: "divider"
+            },
+            children: a?.categoryTotals?.map((e) => /* @__PURE__ */ i(u, {
+              sx: {
+                pl: 12,
+                py: 0
+              },
+              children: /* @__PURE__ */ i(h, {
+                id: `spending-list-subcategory-${e.guid}`,
+                onClick: () => g(e.guid, !0),
+                sx: {
+                  minHeight: 44,
+                  px: 8,
+                  py: 0
+                },
+                children: /* @__PURE__ */ o(s, {
+                  direction: "row",
+                  justifyContent: "space-between",
+                  width: "100%",
+                  children: [/* @__PURE__ */ o(t, { children: [e.name, " "] }), /* @__PURE__ */ i(t, { children: l(e.amount, "0,0.00") })]
+                })
+              })
+            }, e.guid))
+          })
+        })] }, r.guid))
+      }),
+      /* @__PURE__ */ i(t, {
+        bold: !0,
+        sx: {
+          mt: 12,
+          pr: 8,
+          textAlign: "right"
+        },
+        children: `${c.total}: ${l(n.totalAmount, "0,0.00")}`
+      })
+    ]
+  });
+}, _ = x(w);
+export {
+  _ as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/spending/components/SpendingList/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/spending/components/SpendingList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Collapse from '@mui/material/Collapse'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\nimport { SpendingData } from '../utils/SpendingData'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface SpendingListProps {\n  data: SpendingData\n  onSelected: (id: string, isSubcategory?: boolean) => void\n  selectedId?: string\n  title: string\n}\n\nconst SpendingList: React.FC<SpendingListProps> = ({\n  data,\n  onSelected,\n  selectedId = '',\n  title,\n}) => {\n  const { spending: spendingCopy } = useGlobalCopyStore()\n  const selectedCategory = data.categoryData.find((parent) => parent.guid === selectedId)\n\n  return (\n    <Stack direction=\"column\" justifyContent=\"center\" maxWidth={400} minWidth={275} width=\"100%\">\n      <Text bold={true} id=\"spending-list-title\" sx={{ py: 12 }} variant=\"h3\">\n        {`${title} ${spendingCopy.by_category}`}\n      </Text>\n\n      <Divider aria-hidden=\"true\" />\n\n      <List aria-labelledby=\"spending-list-title\">\n        {data.categoryData.map((item) => (\n          <React.Fragment key={item.guid}>\n            <ListItem\n              disableGutters={true}\n              disablePadding={true}\n              sx={{\n                borderBottom: 1,\n                borderColor: 'divider',\n                minHeight: 44,\n              }}\n            >\n              <ListItemButton\n                aria-expanded={Boolean(selectedCategory?.guid === item.guid)}\n                id={`spending-list-category-${item.guid}`}\n                onClick={() => onSelected(item.guid)}\n                sx={{ minHeight: 44, px: 8, py: 0 }}\n              >\n                <Box\n                  aria-hidden=\"true\"\n                  borderRadius={4}\n                  flexShrink={0}\n                  height={8}\n                  role=\"presentation\"\n                  sx={{ backgroundColor: item.color, mr: 8 }}\n                  width={8}\n                />\n                <Stack\n                  alignItems=\"center\"\n                  direction=\"row\"\n                  justifyContent=\"space-between\"\n                  width=\"100%\"\n                >\n                  <Text bold={selectedId === item.guid}>{item.name}</Text>\n                  <Text bold={selectedId === item.guid} variant=\"body1\">\n                    {formatCurrency(item.amount, '0,0.00')}\n                  </Text>\n                </Stack>\n              </ListItemButton>\n            </ListItem>\n\n            {item.categoryTotals && item.categoryTotals.length > 0 && (\n              <Collapse in={Boolean(selectedCategory?.guid === item.guid)} unmountOnExit={true}>\n                <List sx={{ borderBottom: 1, borderColor: 'divider' }}>\n                  {selectedCategory?.categoryTotals?.map((subItem) => (\n                    <ListItem\n                      key={subItem.guid}\n                      sx={{\n                        pl: 12,\n                        py: 0,\n                      }}\n                    >\n                      <ListItemButton\n                        id={`spending-list-subcategory-${subItem.guid}`}\n                        onClick={() => onSelected(subItem.guid, true)}\n                        sx={{ minHeight: 44, px: 8, py: 0 }}\n                      >\n                        <Stack direction=\"row\" justifyContent=\"space-between\" width=\"100%\">\n                          <Text>{subItem.name} </Text>\n                          <Text>{formatCurrency(subItem.amount, '0,0.00')}</Text>\n                        </Stack>\n                      </ListItemButton>\n                    </ListItem>\n                  ))}\n                </List>\n              </Collapse>\n            )}\n          </React.Fragment>\n        ))}\n      </List>\n\n      <Text bold={true} sx={{ mt: 12, pr: 8, textAlign: 'right' }}>\n        {`${spendingCopy.total}: ${formatCurrency(data.totalAmount, '0,0.00')}`}\n      </Text>\n    </Stack>\n  )\n}\n\nexport default observer(SpendingList)\n"],"mappings":"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"}

package/dist/spending/components/SpendingTabLabel/index.es.js

@@ -0,0 +1,22 @@
+import { formatCurrency as e } from "../../../core/utils/NumberFormatting/index.es.js";
+import "react";
+import a from "@mui/material/Stack";
+import { Text as r } from "@mxenabled/mxui";
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+var u = ({ amount: t, label: i, variant: n = "full" }) => /* @__PURE__ */ m(a, {
+  direction: "column",
+  children: [/* @__PURE__ */ o(r, {
+    bold: !0,
+    sx: { textTransform: "none" },
+    variant: "body1",
+    children: i
+  }), /* @__PURE__ */ o(r, {
+    variant: "caption",
+    children: e(t, n === "mini" ? "0,0" : "0,0.00")
+  })]
+});
+export {
+  u as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/spending/components/SpendingTabLabel/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/spending/components/SpendingTabLabel.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface SpendingTabLabelProps {\n  amount: number\n  label: string\n  variant?: 'mini' | 'full'\n}\n\nconst SpendingTabLabel: React.FC<SpendingTabLabelProps> = ({ amount, label, variant = 'full' }) => {\n  return (\n    <Stack direction=\"column\">\n      <Text bold={true} sx={{ textTransform: 'none' }} variant=\"body1\">\n        {label}\n      </Text>\n      <Text variant=\"caption\">{formatCurrency(amount, variant === 'mini' ? '0,0' : '0,0.00')}</Text>\n    </Stack>\n  )\n}\n\nexport default SpendingTabLabel\n"],"mappings":";;;;;AAaA,IAAM,IAAA,CAAqD,EAAE,QAAA,GAAQ,OAAA,GAAO,SAAA,IAAU,OAAA,MAElF,gBAAA,EAAC,GAAD;AAAA,EAAO,WAAU;AAAA,YAAjB,CACE,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,IAAI,EAAE,eAAe,OAAO;AAAA,IAAG,SAAQ;AAAA,cACtD;AAAA,EACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,IAAM,SAAQ;AAAA,cAAW,EAAe,GAAQ,MAAY,SAAS,QAAQ,QAAQ;AAAA,EAAQ,CAAA,CACxF"}