@zeniai/web-components 3.16.79 → 3.16.80

package/dist/TopExCard-BCaOe3p9.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-D8643Kw5.js";
-import x from "@emotion/styled";
-import { C as nt, R as at } from "./ReloadCard-gyd0aB63.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
-};

package/dist/TopExCard-DlZrCuqT.cjs

@@ -1,38 +0,0 @@
-"use strict";const e=require("./vendor-.pnpm-CT-Z_-kn.cjs"),g=require("react"),O=require("@zeniai/client-epic-state"),s=require("./index-B_9e_5dM.cjs"),h=require("@emotion/styled"),C=require("./ReloadCard-hX3bIayG.cjs"),R=require("./graphic-no-data-l-C-ZhJpjS.cjs"),z=h(s.CardContentBox)`
-  justify-content: space-between;
-  margin: 0;
-  height: ${t=>t.height!=null?t.height+"px":"auto"};
-  width: ${t=>t.width!=null?t.width+"px":"auto"};
-`,w=h.div``,M=h(s.SmallRegular)`
-  color: ${t=>t.theme.colors.hero};
-  margin: ${s.Space.sp2} ${s.Space.sp0} ${s.Space.sp2} ${s.Space.sp0};
-`,T=({width:t,height:i,label:o})=>{const c=e.useTheme();return e.jsxRuntimeExports.jsxs(z,{height:i,width:t,children:[e.jsxRuntimeExports.jsx(w,{}),c.mode==="light"?e.jsxRuntimeExports.jsx(R.SvgGraphicNoDataL,{style:{marginBottom:s.Space.sp4}}):e.jsxRuntimeExports.jsx(R.SvgGraphicNoDataD,{style:{marginBottom:s.Space.sp4}}),e.jsxRuntimeExports.jsx(M,{children:o})]})},_=h.div``;function q({allowedValues:t,timeframeSelected:i,onTimeframeChanged:o,textStyle:c}){const a=r=>s.appLocale.getLocalizedStrings().timeframe[r];return e.jsxRuntimeExports.jsx(_,{onClick:r=>r.stopPropagation(),children:e.jsxRuntimeExports.jsx(s.Picker$1,{pickerValues:t,valueToLabel:a,selectedValue:i,onPickerSelectionChanged:o,optionTextStyle:c})})}const K=h(s.SmallRegularSp)`
-  color: ${t=>t.theme.colors.champion};
-`,S=h.div`
-  display: flex;
-  flex: 0 1 auto;
-  flex-direction: row;
-  align-items: center;
-`;function G({dimension:t,reportTitle:i,cardType:o,cardIndex:c,onCardClick:a,timeframe:r,allowedValues:m,chartElement:l,onTimeframeChange:x}){const u=m.length>0?" - ":"";return e.jsxRuntimeExports.jsx(s.Card,{"data-testid":s.generateDataTestId("dashboard",`${o}-timeframe-${r}`),style:{cursor:"pointer"},dimension:t,onClick:()=>a(c,o),children:e.jsxRuntimeExports.jsxs(s.CardContentBox,{children:[e.jsxRuntimeExports.jsxs(S,{style:{marginBottom:s.sp[3]},children:[e.jsxRuntimeExports.jsx(K,{children:i!=null?i+u:s.toCardTitle(o)+u})," ",m.length>0?e.jsxRuntimeExports.jsx(q,{timeframeSelected:r,onTimeframeChanged:n=>x?.(n??"month"),allowedValues:m}):null]}),e.jsxRuntimeExports.jsx(S,{style:{width:"100%",height:"100%",cursor:"pointer"},children:e.jsxRuntimeExports.jsx("div",{style:{width:"100%",height:"100%"},children:e.jsxRuntimeExports.jsx(e.AutoSizer,{children:({height:n,width:p})=>l(p,n)})})})]})})}function y({card:t,reportTitle:i,actions:o,timeframe:c,allowedValues:a,chartElement:r,onTimeframeChange:m}){return t.fetchState==="In-Progress"||t.fetchState==="Not-Started"?e.jsxRuntimeExports.jsx(C.ChartCardLoading,{dimension:t.dimension,animated:!t.disableAnimations}):t.fetchState==="Error"?e.jsxRuntimeExports.jsx(C.ReloadCard,{dimension:t.dimension,cardType:t.cardType,cardIndex:t.cardIndex,onReloadData:o.onReloadData,reportTitle:i}):e.jsxRuntimeExports.jsx(G,{dimension:t.dimension,reportTitle:i,cardType:t.cardType,cardIndex:t.cardIndex,onCardClick:o.onCardClick,timeframe:c,allowedValues:a??["month","quarter","year"],chartElement:r,onTimeframeChange:l=>{o.onTimeframeChange?.(t.cardType,l),m?.(t.cardType,l)}})}g.memo(y);const D=(t,i,o)=>{const c=i.map(n=>({label:n.timePeriod,startDate:n.startDate,endDate:n.endDate})),a=o.total,r=o.accountsOrdered.map(n=>({accountId:n.accountId,accountDescription:n.accountDescription,balance:n.balance,logo:n.logo}))??[],m=Math.min(t,r.length),l=r.length?t-r.length:0,x=a?.amount;if(r.length>0&&l>0&&x!=null&&x!==0){const n=r[m-1].balance,p=n?.available?.amount!=null?Math.min(30,n?.available?.amount/x*100):30;for(let d=0;d<l;d+=1){const j=p*(l-d)/(l+1);r.push({accountId:d.toString(),accountDescription:"",balance:{available:{amount:x*j/100,currencySymbol:n.available.currencySymbol,currencyCode:n.available.currencyCode}}})}}const u=r.map(n=>{const p="top_expenses",d={accountId:n.accountId,accountDescription:n.accountDescription,total:a??void 0,logo:n.logo??"",barKey:p};return d[p]=n.balance.available,d});return{timeframeLabelsInOrder:c,chartItems:u}},f=37,E=2,N=h.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};
-`,P=h.div`
-  display: flex;
-  align-items: center;
-  flex: 4 1 0;
-`,Y=h.img`
-  height: ${s.Space.sp4};
-`,V=h(s.SmallRegular)`
-  margin-left: ${s.Space.sp2};
-`,X=h(s.LargeMedium)`
-  flex: 1 1 0;
-  color: ${t=>t.theme.colors.primary};
-`,H=h(s.StandardRegular)`
-  flex: 1 1 0;
-  margin-right: ${s.Space.sp2};
-`;function W({report:t,width:i,height:o,showBarHoverBackground:c}){const a=e.useTheme(),r=D(t.topExpenses.accountsOrdered.length,t.allTimePeriods,t.topExpenses),m=(l,x)=>e.jsxRuntimeExports.jsx(e.Bar,{dataKey:u=>{const n=u[x]!=null?u[x]:void 0;return n!=null&&n.amount>0?n.amount:0},isAnimationActive:!0,animationDuration:800,background:{fill:a.colors.background},children:l.map(u=>e.jsxRuntimeExports.jsx(e.Cell,{fill:a.colors.topExCustomColor},x))},Math.random());return r.chartItems.length===0?null:e.jsxRuntimeExports.jsx(Q,{chartItemArray:r.chartItems,showBarHoverBackground:c,barElement:m(r.chartItems,r.chartItems[0].barKey),width:i,height:o})}const J=t=>{const{barKey:i,payload:o,chartItems:c,width:a,y:r}=t,m=o.value,l=c.find(x=>x.accountId==m);return l==null||l.accountDescription==null?null:e.jsxRuntimeExports.jsx("foreignObject",{y:r-o.offset+E,width:a,height:f,children:e.jsxRuntimeExports.jsxs(N,{children:[e.jsxRuntimeExports.jsxs(P,{children:[e.jsxRuntimeExports.jsx(Y,{src:l.logo,alt:l.accountDescription,loading:"lazy"}),e.jsxRuntimeExports.jsx(V,{children:l.accountDescription})]}),e.jsxRuntimeExports.jsx(X,{children:"⟶"}),e.jsxRuntimeExports.jsx(H,{children:s.amountToString("0,0",l[i])})]})})},Q=({chartItemArray:t,barElement:i,width:o,height:c})=>{const a=t[0],r=a.total,m=a.barKey;return e.jsxRuntimeExports.jsxs(e.BarChart,{data:t,layout:"vertical",width:o,barCategoryGap:E,height:t.length?(f+2*E)*t.length:c,barSize:f,margin:{top:0,right:0,left:0,bottom:0},style:{display:"flex",flex:"1 1 auto",cursor:"default"},children:[e.jsxRuntimeExports.jsx(e.XAxis,{hide:!0,axisLine:!1,type:"number",domain:[l=>Math.min(0,l),r?.amount??0]}),e.jsxRuntimeExports.jsx(e.YAxis,{orientation:"left",yAxisId:0,dataKey:l=>l.accountId,type:"category",axisLine:!1,tickLine:!1,width:o/2,mirror:!1,tick:e.jsxRuntimeExports.jsx(J,{width:o/2,chartItems:t,barKey:m})}),i]})},b=41,v=4;function U({report:t,width:i,height:o,showBarHoverBackground:c,isDetailPage:a}){const r=e.useTheme(),m=D(a===!0?t.topExpenses.accountsOrdered.length:6,t.allTimePeriods,t.topExpenses),l=(x,u,n)=>e.jsxRuntimeExports.jsxs(e.Bar,{dataKey:p=>{const d=p[u]!=null?p[u]:void 0;return d!=null&&d.amount>0?d.amount:0},isAnimationActive:!0,animationDuration:a===!0?800:void 0,background:void 0,children:[e.jsxRuntimeExports.jsx(e.LabelList,{dataKey:"accountDescription",position:"insideLeft",offset:8,content:p=>{const{x:d,y:j,value:$,height:k,offset:A}=p;return e.jsxRuntimeExports.jsx(e.Text,{x:d+A,y:j+k/2,fill:r.colors.hero,fontSize:s.textStyles.smallRegular.fontSize,verticalAnchor:"middle",width:n-110,maxLines:1,children:$})}}),x.map(p=>e.jsxRuntimeExports.jsx(e.Cell,{fill:p.accountDescription!==""?r.colors.graphColor29:r.colors.grey3,fillOpacity:p.accountDescription!==""?.32:1},u))]},Math.random());return m.chartItems.length===0?null:e.jsxRuntimeExports.jsx(Z,{chartItemArray:m.chartItems,showBarHoverBackground:c,barElement:l(m.chartItems,m.chartItems[0].barKey,i),width:i,height:o,isDetailPage:a===!0})}const Z=({chartItemArray:t,barElement:i,width:o,height:c,isDetailPage:a})=>{const r=e.useTheme(),m=t[0],l=m.total,x=m.barKey,u=l?.currencySymbol??"";return e.jsxRuntimeExports.jsxs(e.BarChart,{data:t,layout:"vertical",width:o,barCategoryGap:a?v:2,height:a?t.length?(b+2*v)*t.length:c:c+5,barSize:a?b:38,margin:{top:0,right:a?s.sp[0]:s.sp[3],left:a?s.sp[0]:s.sp[3],bottom:0},style:{display:"flex",flex:"1 1 auto",cursor:a?"default":"pointer"},children:[e.jsxRuntimeExports.jsx(e.XAxis,{hide:!0,axisLine:!1,type:"number",domain:[n=>Math.min(0,n),l?.amount??0]}),e.jsxRuntimeExports.jsx(e.YAxis,{orientation:"right",yAxisId:0,dataKey:n=>{const p=n[x]!=null?n[x]:void 0,{accountDescription:d}=n;return d!==""&&p!=null?p.amount:0},type:"category",axisLine:!1,tickLine:!1,width:o,mirror:!0,tick:{fill:r.colors.hero,...s.textStyles.smallRegular.cssObject},tickFormatter:n=>n!==0?s.amountValueToString("0,0.[00]a",n,u):""}),i]})};function F(t){const i=s.useWindowSizeContext();return i!=="small"&&i!=="medium-compact"&&t.isDetailPage===!0?e.jsxRuntimeExports.jsx(W,{...t}):e.jsxRuntimeExports.jsx(U,{...t})}const I=g.memo(F,e.isEqual);function L(t){if(t==null||t.length===0)return!0;let i=!0;for(const o of t)if(o.balance.available.amount!==0){i=!1;break}return i}function B({card:t,actions:i,data:o,dndProps:c}){const[a,r]=g.useState(o?.topExTimePeriod??"last_month"),m=[...O.TOP_EX_TIME_PERIODS],l=t.fetchState==="Completed"?L(o?.topExpenses.accountsOrdered):!1,x=(u,n)=>l===!1?e.jsxRuntimeExports.jsx(I,{report:o,width:u,height:n,timeframe:a}):e.jsxRuntimeExports.jsx(T,{width:u,height:n,label:s.appLocale.getLocalizedStrings().chartCard.no_data.top_expenses[a]});return e.jsxRuntimeExports.jsx(s.DraggedDiv,{isDragging:c?.draggedCardType!=null,isDragOver:c?.dragOverCard===t.cardType,draggable:!0,onDragStart:u=>c?.onDragStart(t.cardType,u),onDragOver:u=>c?.onDragOver(u,t.cardType),onDragLeave:u=>c?.onDragLeave(u),onDrop:u=>c?.onDrop(u,t.cardType),dimension:t.dimension,children:e.jsxRuntimeExports.jsx(y,{card:t,actions:i,timeframe:a,chartElement:x,allowedValues:m,onTimeframeChange:(u,n)=>r(n)})},t.cardIndex)}g.memo(B);exports.ChartCard=y;exports.EmptyChartContent=T;exports.MemoTopExChart=I;exports.TopExCard=B;exports.isEmptyBalances=L;