@zeniai/web-components 3.16.80 → 3.16.81

package/dist/TopExCard-DeYN3ImD.js

@@ -1,568 +0,0 @@
-import { u as f, j as e, A as K, a0 as T, _ as I, $ as E, X as L, Y as k, b0 as G, b1 as P, k as N } from "./vendor-.pnpm-DtFedGku.js";
-import b, { useState as X } from "react";
-import { TOP_EX_TIME_PERIODS as Y } from "@zeniai/client-epic-state";
-import { S as g, ev as $, G as B, eX as V, a as A, eu as q, j as H, D as p, ew as W, P as J, a5 as Q, y as U, p as Z, t as R, dM as F, u as tt, et } from "./index-CTjYJrsF.js";
-import x from "@emotion/styled";
-import { C as nt, R as at } from "./ReloadCard-Cnz9ywvF.js";
-import { S as ot, a as rt } from "./graphic-no-data-l-DU4J8fDt.js";
-const st = x($)`
-  justify-content: space-between;
-  margin: 0;
-  height: ${(t) => t.height != null ? t.height + "px" : "auto"};
-  width: ${(t) => t.width != null ? t.width + "px" : "auto"};
-`, it = x.div``, lt = x(B)`
-  color: ${(t) => t.theme.colors.hero};
-  margin: ${g.sp2} ${g.sp0} ${g.sp2} ${g.sp0};
-`, ct = ({
-  width: t,
-  height: s,
-  label: a
-}) => {
-  const l = f();
-  return /* @__PURE__ */ e.jsxs(st, { height: s, width: t, children: [
-    /* @__PURE__ */ e.jsx(it, {}),
-    l.mode === "light" ? /* @__PURE__ */ e.jsx(ot, { style: { marginBottom: g.sp4 } }) : /* @__PURE__ */ e.jsx(rt, { style: { marginBottom: g.sp4 } }),
-    /* @__PURE__ */ e.jsx(lt, { children: a })
-  ] });
-}, mt = x.div``;
-function ut({
-  allowedValues: t,
-  timeframeSelected: s,
-  onTimeframeChanged: a,
-  textStyle: l
-}) {
-  const r = (o) => A.getLocalizedStrings().timeframe[o];
-  return /* @__PURE__ */ e.jsx(
-    mt,
-    {
-      onClick: (o) => o.stopPropagation(),
-      children: /* @__PURE__ */ e.jsx(
-        V,
-        {
-          pickerValues: t,
-          valueToLabel: r,
-          selectedValue: s,
-          onPickerSelectionChanged: a,
-          optionTextStyle: l
-        }
-      )
-    }
-  );
-}
-const dt = x(J)`
-  color: ${(t) => t.theme.colors.champion};
-`, S = x.div`
-  display: flex;
-  flex: 0 1 auto;
-  flex-direction: row;
-  align-items: center;
-`;
-function ht({
-  dimension: t,
-  reportTitle: s,
-  cardType: a,
-  cardIndex: l,
-  onCardClick: r,
-  timeframe: o,
-  allowedValues: m,
-  chartElement: i,
-  onTimeframeChange: u
-}) {
-  const c = m.length > 0 ? " - " : "";
-  return /* @__PURE__ */ e.jsx(
-    q,
-    {
-      "data-testid": H(
-        "dashboard",
-        `${a}-timeframe-${o}`
-      ),
-      style: { cursor: "pointer" },
-      dimension: t,
-      onClick: () => r(l, a),
-      children: /* @__PURE__ */ e.jsxs($, { children: [
-        /* @__PURE__ */ e.jsxs(S, { style: { marginBottom: p[3] }, children: [
-          /* @__PURE__ */ e.jsx(dt, { children: s != null ? s + c : W(a) + c }),
-          " ",
-          m.length > 0 ? /* @__PURE__ */ e.jsx(
-            ut,
-            {
-              timeframeSelected: o,
-              onTimeframeChanged: (n) => u?.(n ?? "month"),
-              allowedValues: m
-            }
-          ) : null
-        ] }),
-        /* @__PURE__ */ e.jsx(S, { style: { width: "100%", height: "100%", cursor: "pointer" }, children: /* @__PURE__ */ e.jsx(
-          "div",
-          {
-            style: {
-              width: "100%",
-              height: "100%"
-            },
-            children: /* @__PURE__ */ e.jsx(K, { children: ({ height: n, width: d }) => i(d, n) })
-          }
-        ) })
-      ] })
-    }
-  );
-}
-function O({
-  card: t,
-  reportTitle: s,
-  actions: a,
-  timeframe: l,
-  allowedValues: r,
-  chartElement: o,
-  onTimeframeChange: m
-}) {
-  return t.fetchState === "In-Progress" || t.fetchState === "Not-Started" ? /* @__PURE__ */ e.jsx(
-    nt,
-    {
-      dimension: t.dimension,
-      animated: !t.disableAnimations
-    }
-  ) : t.fetchState === "Error" ? /* @__PURE__ */ e.jsx(
-    at,
-    {
-      dimension: t.dimension,
-      cardType: t.cardType,
-      cardIndex: t.cardIndex,
-      onReloadData: a.onReloadData,
-      reportTitle: s
-    }
-  ) : /* @__PURE__ */ e.jsx(
-    ht,
-    {
-      dimension: t.dimension,
-      reportTitle: s,
-      cardType: t.cardType,
-      cardIndex: t.cardIndex,
-      onCardClick: a.onCardClick,
-      timeframe: l,
-      allowedValues: r ?? ["month", "quarter", "year"],
-      chartElement: o,
-      onTimeframeChange: (i) => {
-        a.onTimeframeChange?.(t.cardType, i), m?.(t.cardType, i);
-      }
-    }
-  );
-}
-b.memo(O);
-const w = (t, s, a) => {
-  const l = s.map(
-    (n) => ({
-      label: n.timePeriod,
-      startDate: n.startDate,
-      endDate: n.endDate
-    })
-  ), r = a.total, o = a.accountsOrdered.map((n) => ({
-    accountId: n.accountId,
-    accountDescription: n.accountDescription,
-    balance: n.balance,
-    logo: n.logo
-  })) ?? [], m = Math.min(
-    t,
-    o.length
-  ), i = o.length ? t - o.length : 0, u = r?.amount;
-  if (o.length > 0 && i > 0 && u != null && u !== 0) {
-    const n = o[m - 1].balance, d = n?.available?.amount != null ? Math.min(
-      30,
-      n?.available?.amount / u * 100
-    ) : 30;
-    for (let h = 0; h < i; h += 1) {
-      const y = d * (i - h) / (i + 1);
-      o.push({
-        accountId: h.toString(),
-        accountDescription: "",
-        balance: {
-          available: {
-            amount: u * y / 100,
-            currencySymbol: n.available.currencySymbol,
-            currencyCode: n.available.currencyCode
-          }
-        }
-      });
-    }
-  }
-  const c = o.map((n) => {
-    const d = "top_expenses", h = {
-      accountId: n.accountId,
-      accountDescription: n.accountDescription,
-      total: r ?? void 0,
-      logo: n.logo ?? "",
-      barKey: d
-    };
-    return h[d] = n.balance.available, h;
-  });
-  return { timeframeLabelsInOrder: l, chartItems: c };
-}, C = 37, j = 2, xt = x.div`
-  display: flex;
-  flex-direction: row;
-  flex: 1 1 auto;
-  justify-content: space-between;
-  align-items: center;
-  height: 100%;
-  color: ${(t) => t.theme.colors.hero};
-`, gt = x.div`
-  display: flex;
-  align-items: center;
-  flex: 4 1 0;
-`, pt = x.img`
-  height: ${g.sp4};
-`, ft = x(B)`
-  margin-left: ${g.sp2};
-`, yt = x(U)`
-  flex: 1 1 0;
-  color: ${(t) => t.theme.colors.primary};
-`, Ct = x(Z)`
-  flex: 1 1 0;
-  margin-right: ${g.sp2};
-`;
-function jt({
-  report: t,
-  width: s,
-  height: a,
-  showBarHoverBackground: l
-}) {
-  const r = f(), o = w(
-    t.topExpenses.accountsOrdered.length,
-    t.allTimePeriods,
-    t.topExpenses
-  ), m = (i, u) => /* @__PURE__ */ e.jsx(
-    T,
-    {
-      dataKey: (c) => {
-        const n = c[u] != null ? c[u] : void 0;
-        return n != null && n.amount > 0 ? n.amount : 0;
-      },
-      isAnimationActive: !0,
-      animationDuration: 800,
-      background: {
-        fill: r.colors.background
-      },
-      children: i.map((c) => /* @__PURE__ */ e.jsx(I, { fill: r.colors.topExCustomColor }, u))
-    },
-    Math.random()
-  );
-  return o.chartItems.length === 0 ? null : /* @__PURE__ */ e.jsx(
-    St,
-    {
-      chartItemArray: o.chartItems,
-      showBarHoverBackground: l,
-      barElement: m(
-        o.chartItems,
-        o.chartItems[0].barKey
-      ),
-      width: s,
-      height: a
-    }
-  );
-}
-const bt = (t) => {
-  const { barKey: s, payload: a, chartItems: l, width: r, y: o } = t, m = a.value, i = l.find(
-    (u) => u.accountId == m
-  );
-  return i == null || i.accountDescription == null ? null : /* @__PURE__ */ e.jsx(
-    "foreignObject",
-    {
-      y: o - a.offset + j,
-      width: r,
-      height: C,
-      children: /* @__PURE__ */ e.jsxs(xt, { children: [
-        /* @__PURE__ */ e.jsxs(gt, { children: [
-          /* @__PURE__ */ e.jsx(
-            pt,
-            {
-              src: i.logo,
-              alt: i.accountDescription,
-              loading: "lazy"
-            }
-          ),
-          /* @__PURE__ */ e.jsx(ft, { children: i.accountDescription })
-        ] }),
-        /* @__PURE__ */ e.jsx(yt, { children: "⟶" }),
-        /* @__PURE__ */ e.jsx(Ct, { children: Q("0,0", i[s]) })
-      ] })
-    }
-  );
-}, St = ({
-  chartItemArray: t,
-  barElement: s,
-  width: a,
-  height: l
-}) => {
-  const r = t[0], o = r.total, m = r.barKey;
-  return /* @__PURE__ */ e.jsxs(
-    E,
-    {
-      data: t,
-      layout: "vertical",
-      width: a,
-      barCategoryGap: j,
-      height: t.length ? (C + 2 * j) * t.length : l,
-      barSize: C,
-      margin: {
-        top: 0,
-        right: 0,
-        left: 0,
-        bottom: 0
-      },
-      style: {
-        display: "flex",
-        flex: "1 1 auto",
-        cursor: "default"
-      },
-      children: [
-        /* @__PURE__ */ e.jsx(
-          L,
-          {
-            hide: !0,
-            axisLine: !1,
-            type: "number",
-            domain: [
-              (i) => Math.min(0, i),
-              o?.amount ?? 0
-            ]
-          }
-        ),
-        /* @__PURE__ */ e.jsx(
-          k,
-          {
-            orientation: "left",
-            yAxisId: 0,
-            dataKey: (i) => i.accountId,
-            type: "category",
-            axisLine: !1,
-            tickLine: !1,
-            width: a / 2,
-            mirror: !1,
-            tick: /* @__PURE__ */ e.jsx(
-              bt,
-              {
-                width: a / 2,
-                chartItems: t,
-                barKey: m
-              }
-            )
-          }
-        ),
-        s
-      ]
-    }
-  );
-}, v = 41, D = 4;
-function vt({
-  report: t,
-  width: s,
-  height: a,
-  showBarHoverBackground: l,
-  isDetailPage: r
-}) {
-  const o = f(), m = w(
-    r === !0 ? t.topExpenses.accountsOrdered.length : 6,
-    t.allTimePeriods,
-    t.topExpenses
-  ), i = (u, c, n) => /* @__PURE__ */ e.jsxs(
-    T,
-    {
-      dataKey: (d) => {
-        const h = d[c] != null ? d[c] : void 0;
-        return h != null && h.amount > 0 ? h.amount : 0;
-      },
-      isAnimationActive: !0,
-      animationDuration: r === !0 ? 800 : void 0,
-      background: void 0,
-      children: [
-        /* @__PURE__ */ e.jsx(
-          G,
-          {
-            dataKey: "accountDescription",
-            position: "insideLeft",
-            offset: 8,
-            content: (d) => {
-              const { x: h, y, value: z, height: M, offset: _ } = d;
-              return /* @__PURE__ */ e.jsx(
-                P,
-                {
-                  x: h + _,
-                  y: y + M / 2,
-                  fill: o.colors.hero,
-                  fontSize: R.smallRegular.fontSize,
-                  verticalAnchor: "middle",
-                  width: n - 110,
-                  maxLines: 1,
-                  children: z
-                }
-              );
-            }
-          }
-        ),
-        u.map((d) => /* @__PURE__ */ e.jsx(
-          I,
-          {
-            fill: d.accountDescription !== "" ? o.colors.graphColor29 : o.colors.grey3,
-            fillOpacity: d.accountDescription !== "" ? 0.32 : 1
-          },
-          c
-        ))
-      ]
-    },
-    Math.random()
-  );
-  return m.chartItems.length === 0 ? null : /* @__PURE__ */ e.jsx(
-    Dt,
-    {
-      chartItemArray: m.chartItems,
-      showBarHoverBackground: l,
-      barElement: i(
-        m.chartItems,
-        m.chartItems[0].barKey,
-        s
-      ),
-      width: s,
-      height: a,
-      isDetailPage: r === !0
-    }
-  );
-}
-const Dt = ({
-  chartItemArray: t,
-  barElement: s,
-  width: a,
-  height: l,
-  isDetailPage: r
-}) => {
-  const o = f(), m = t[0], i = m.total, u = m.barKey, c = i?.currencySymbol ?? "";
-  return /* @__PURE__ */ e.jsxs(
-    E,
-    {
-      data: t,
-      layout: "vertical",
-      width: a,
-      barCategoryGap: r ? D : 2,
-      height: r ? t.length ? (v + 2 * D) * t.length : l : l + 5,
-      barSize: r ? v : 38,
-      margin: {
-        top: 0,
-        right: r ? p[0] : p[3],
-        left: r ? p[0] : p[3],
-        bottom: 0
-      },
-      style: {
-        display: "flex",
-        flex: "1 1 auto",
-        cursor: r ? "default" : "pointer"
-      },
-      children: [
-        /* @__PURE__ */ e.jsx(
-          L,
-          {
-            hide: !0,
-            axisLine: !1,
-            type: "number",
-            domain: [
-              (n) => Math.min(0, n),
-              i?.amount ?? 0
-            ]
-          }
-        ),
-        /* @__PURE__ */ e.jsx(
-          k,
-          {
-            orientation: "right",
-            yAxisId: 0,
-            dataKey: (n) => {
-              const d = n[u] != null ? n[u] : void 0, { accountDescription: h } = n;
-              return h !== "" && d != null ? d.amount : 0;
-            },
-            type: "category",
-            axisLine: !1,
-            tickLine: !1,
-            width: a,
-            mirror: !0,
-            tick: {
-              fill: o.colors.hero,
-              ...R.smallRegular.cssObject
-            },
-            tickFormatter: (n) => n !== 0 ? F("0,0.[00]a", n, c) : ""
-          }
-        ),
-        s
-      ]
-    }
-  );
-};
-function Tt(t) {
-  const s = tt();
-  return s !== "small" && s !== "medium-compact" && t.isDetailPage === !0 ? /* @__PURE__ */ e.jsx(jt, { ...t }) : /* @__PURE__ */ e.jsx(vt, { ...t });
-}
-const It = b.memo(Tt, N);
-function Et(t) {
-  if (t == null || t.length === 0)
-    return !0;
-  let s = !0;
-  for (const a of t)
-    if (a.balance.available.amount !== 0) {
-      s = !1;
-      break;
-    }
-  return s;
-}
-function Lt({
-  card: t,
-  actions: s,
-  data: a,
-  dndProps: l
-}) {
-  const [r, o] = X(
-    a?.topExTimePeriod ?? "last_month"
-  ), m = [...Y], i = t.fetchState === "Completed" ? Et(a?.topExpenses.accountsOrdered) : !1, u = (c, n) => i === !1 ? /* @__PURE__ */ e.jsx(
-    It,
-    {
-      report: a,
-      width: c,
-      height: n,
-      timeframe: r
-    }
-  ) : /* @__PURE__ */ e.jsx(
-    ct,
-    {
-      width: c,
-      height: n,
-      label: A.getLocalizedStrings().chartCard.no_data.top_expenses[r]
-    }
-  );
-  return /* @__PURE__ */ e.jsx(
-    et,
-    {
-      isDragging: l?.draggedCardType != null,
-      isDragOver: l?.dragOverCard === t.cardType,
-      draggable: !0,
-      onDragStart: (c) => l?.onDragStart(t.cardType, c),
-      onDragOver: (c) => l?.onDragOver(c, t.cardType),
-      onDragLeave: (c) => l?.onDragLeave(c),
-      onDrop: (c) => l?.onDrop(c, t.cardType),
-      dimension: t.dimension,
-      children: /* @__PURE__ */ e.jsx(
-        O,
-        {
-          card: t,
-          actions: s,
-          timeframe: r,
-          chartElement: u,
-          allowedValues: m,
-          onTimeframeChange: (c, n) => o(n)
-        }
-      )
-    },
-    t.cardIndex
-  );
-}
-b.memo(Lt);
-export {
-  O as C,
-  ct as E,
-  It as M,
-  Lt as T,
-  Et as i
-};