@zeniai/web-components 3.17.6 → 3.17.7

package/dist/TopExCard-3NE-ZhGU.js

@@ -1,569 +0,0 @@
-import { u as f, j as e, A as K, k as G } from "./vendor-.pnpm-B2klaOGU.js";
-import b, { useState as P } from "react";
-import { TOP_EX_TIME_PERIODS as N } from "@zeniai/client-epic-state";
-import { S as g, ev as T, F as I, eX as V, a as E, eu as X, e as Y, D as p, ew as q, P as H, a2 as W, w as F, o as J, t as L, dM as Q, u as U, et as Z } from "./index-BURcUrxk.js";
-import x from "@emotion/styled";
-import { Bar as k, Cell as B, BarChart as $, XAxis as A, YAxis as R, LabelList as tt, Text as et } from "recharts";
-import { C as nt, R as ot } from "./ReloadCard-DYUG6A03.js";
-import { S as at, a as rt } from "./graphic-no-data-l-DU4J8fDt.js";
-const st = x(T)`
-  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(I)`
-  color: ${(t) => t.theme.colors.hero};
-  margin: ${g.sp2} ${g.sp0} ${g.sp2} ${g.sp0};
-`, ct = ({
-  width: t,
-  height: s,
-  label: o
-}) => {
-  const l = f();
-  return /* @__PURE__ */ e.jsxs(st, { height: s, width: t, children: [
-    /* @__PURE__ */ e.jsx(it, {}),
-    l.mode === "light" ? /* @__PURE__ */ e.jsx(at, { style: { marginBottom: g.sp4 } }) : /* @__PURE__ */ e.jsx(rt, { style: { marginBottom: g.sp4 } }),
-    /* @__PURE__ */ e.jsx(lt, { children: o })
-  ] });
-}, mt = x.div``;
-function ut({
-  allowedValues: t,
-  timeframeSelected: s,
-  onTimeframeChanged: o,
-  textStyle: l
-}) {
-  const r = (a) => E.getLocalizedStrings().timeframe[a];
-  return /* @__PURE__ */ e.jsx(
-    mt,
-    {
-      onClick: (a) => a.stopPropagation(),
-      children: /* @__PURE__ */ e.jsx(
-        V,
-        {
-          pickerValues: t,
-          valueToLabel: r,
-          selectedValue: s,
-          onPickerSelectionChanged: o,
-          optionTextStyle: l
-        }
-      )
-    }
-  );
-}
-const dt = x(H)`
-  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: o,
-  cardIndex: l,
-  onCardClick: r,
-  timeframe: a,
-  allowedValues: m,
-  chartElement: i,
-  onTimeframeChange: u
-}) {
-  const c = m.length > 0 ? " - " : "";
-  return /* @__PURE__ */ e.jsx(
-    X,
-    {
-      "data-testid": Y(
-        "dashboard",
-        `${o}-timeframe-${a}`
-      ),
-      style: { cursor: "pointer" },
-      dimension: t,
-      onClick: () => r(l, o),
-      children: /* @__PURE__ */ e.jsxs(T, { children: [
-        /* @__PURE__ */ e.jsxs(S, { style: { marginBottom: p[3] }, children: [
-          /* @__PURE__ */ e.jsx(dt, { children: s != null ? s + c : q(o) + c }),
-          " ",
-          m.length > 0 ? /* @__PURE__ */ e.jsx(
-            ut,
-            {
-              timeframeSelected: a,
-              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: o,
-  timeframe: l,
-  allowedValues: r,
-  chartElement: a,
-  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(
-    ot,
-    {
-      dimension: t.dimension,
-      cardType: t.cardType,
-      cardIndex: t.cardIndex,
-      onReloadData: o.onReloadData,
-      reportTitle: s
-    }
-  ) : /* @__PURE__ */ e.jsx(
-    ht,
-    {
-      dimension: t.dimension,
-      reportTitle: s,
-      cardType: t.cardType,
-      cardIndex: t.cardIndex,
-      onCardClick: o.onCardClick,
-      timeframe: l,
-      allowedValues: r ?? ["month", "quarter", "year"],
-      chartElement: a,
-      onTimeframeChange: (i) => {
-        o.onTimeframeChange?.(t.cardType, i), m?.(t.cardType, i);
-      }
-    }
-  );
-}
-b.memo(O);
-const w = (t, s, o) => {
-  const l = s.map(
-    (n) => ({
-      label: n.timePeriod,
-      startDate: n.startDate,
-      endDate: n.endDate
-    })
-  ), r = o.total, a = o.accountsOrdered.map((n) => ({
-    accountId: n.accountId,
-    accountDescription: n.accountDescription,
-    balance: n.balance,
-    logo: n.logo
-  })) ?? [], m = Math.min(
-    t,
-    a.length
-  ), i = a.length ? t - a.length : 0, u = r?.amount;
-  if (a.length > 0 && i > 0 && u != null && u !== 0) {
-    const n = a[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);
-      a.push({
-        accountId: h.toString(),
-        accountDescription: "",
-        balance: {
-          available: {
-            amount: u * y / 100,
-            currencySymbol: n.available.currencySymbol,
-            currencyCode: n.available.currencyCode
-          }
-        }
-      });
-    }
-  }
-  const c = a.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(I)`
-  margin-left: ${g.sp2};
-`, yt = x(F)`
-  flex: 1 1 0;
-  color: ${(t) => t.theme.colors.primary};
-`, Ct = x(J)`
-  flex: 1 1 0;
-  margin-right: ${g.sp2};
-`;
-function jt({
-  report: t,
-  width: s,
-  height: o,
-  showBarHoverBackground: l
-}) {
-  const r = f(), a = w(
-    t.topExpenses.accountsOrdered.length,
-    t.allTimePeriods,
-    t.topExpenses
-  ), m = (i, u) => /* @__PURE__ */ e.jsx(
-    k,
-    {
-      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(B, { fill: r.colors.topExCustomColor }, u))
-    },
-    Math.random()
-  );
-  return a.chartItems.length === 0 ? null : /* @__PURE__ */ e.jsx(
-    St,
-    {
-      chartItemArray: a.chartItems,
-      showBarHoverBackground: l,
-      barElement: m(
-        a.chartItems,
-        a.chartItems[0].barKey
-      ),
-      width: s,
-      height: o
-    }
-  );
-}
-const bt = (t) => {
-  const { barKey: s, payload: o, chartItems: l, width: r, y: a } = t, m = o.value, i = l.find(
-    (u) => u.accountId == m
-  );
-  return i == null || i.accountDescription == null ? null : /* @__PURE__ */ e.jsx(
-    "foreignObject",
-    {
-      y: a - o.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: W("0,0", i[s]) })
-      ] })
-    }
-  );
-}, St = ({
-  chartItemArray: t,
-  barElement: s,
-  width: o,
-  height: l
-}) => {
-  const r = t[0], a = r.total, m = r.barKey;
-  return /* @__PURE__ */ e.jsxs(
-    $,
-    {
-      data: t,
-      layout: "vertical",
-      width: o,
-      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(
-          A,
-          {
-            hide: !0,
-            axisLine: !1,
-            type: "number",
-            domain: [
-              (i) => Math.min(0, i),
-              a?.amount ?? 0
-            ]
-          }
-        ),
-        /* @__PURE__ */ e.jsx(
-          R,
-          {
-            orientation: "left",
-            yAxisId: 0,
-            dataKey: (i) => i.accountId,
-            type: "category",
-            axisLine: !1,
-            tickLine: !1,
-            width: o / 2,
-            mirror: !1,
-            tick: /* @__PURE__ */ e.jsx(
-              bt,
-              {
-                width: o / 2,
-                chartItems: t,
-                barKey: m
-              }
-            )
-          }
-        ),
-        s
-      ]
-    }
-  );
-}, v = 41, D = 4;
-function vt({
-  report: t,
-  width: s,
-  height: o,
-  showBarHoverBackground: l,
-  isDetailPage: r
-}) {
-  const a = f(), m = w(
-    r === !0 ? t.topExpenses.accountsOrdered.length : 6,
-    t.allTimePeriods,
-    t.topExpenses
-  ), i = (u, c, n) => /* @__PURE__ */ e.jsxs(
-    k,
-    {
-      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(
-          tt,
-          {
-            dataKey: "accountDescription",
-            position: "insideLeft",
-            offset: 8,
-            content: (d) => {
-              const { x: h, y, value: z, height: M, offset: _ } = d;
-              return /* @__PURE__ */ e.jsx(
-                et,
-                {
-                  x: h + _,
-                  y: y + M / 2,
-                  fill: a.colors.hero,
-                  fontSize: L.smallRegular.fontSize,
-                  verticalAnchor: "middle",
-                  width: n - 110,
-                  maxLines: 1,
-                  children: z
-                }
-              );
-            }
-          }
-        ),
-        u.map((d) => /* @__PURE__ */ e.jsx(
-          B,
-          {
-            fill: d.accountDescription !== "" ? a.colors.graphColor29 : a.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: o,
-      isDetailPage: r === !0
-    }
-  );
-}
-const Dt = ({
-  chartItemArray: t,
-  barElement: s,
-  width: o,
-  height: l,
-  isDetailPage: r
-}) => {
-  const a = f(), m = t[0], i = m.total, u = m.barKey, c = i?.currencySymbol ?? "";
-  return /* @__PURE__ */ e.jsxs(
-    $,
-    {
-      data: t,
-      layout: "vertical",
-      width: o,
-      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(
-          A,
-          {
-            hide: !0,
-            axisLine: !1,
-            type: "number",
-            domain: [
-              (n) => Math.min(0, n),
-              i?.amount ?? 0
-            ]
-          }
-        ),
-        /* @__PURE__ */ e.jsx(
-          R,
-          {
-            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: o,
-            mirror: !0,
-            tick: {
-              fill: a.colors.hero,
-              ...L.smallRegular.cssObject
-            },
-            tickFormatter: (n) => n !== 0 ? Q("0,0.[00]a", n, c) : ""
-          }
-        ),
-        s
-      ]
-    }
-  );
-};
-function Tt(t) {
-  const s = U();
-  return s !== "small" && s !== "medium-compact" && t.isDetailPage === !0 ? /* @__PURE__ */ e.jsx(jt, { ...t }) : /* @__PURE__ */ e.jsx(vt, { ...t });
-}
-const It = b.memo(Tt, G);
-function Et(t) {
-  if (t == null || t.length === 0)
-    return !0;
-  let s = !0;
-  for (const o of t)
-    if (o.balance.available.amount !== 0) {
-      s = !1;
-      break;
-    }
-  return s;
-}
-function Lt({
-  card: t,
-  actions: s,
-  data: o,
-  dndProps: l
-}) {
-  const [r, a] = P(
-    o?.topExTimePeriod ?? "last_month"
-  ), m = [...N], i = t.fetchState === "Completed" ? Et(o?.topExpenses.accountsOrdered) : !1, u = (c, n) => i === !1 ? /* @__PURE__ */ e.jsx(
-    It,
-    {
-      report: o,
-      width: c,
-      height: n,
-      timeframe: r
-    }
-  ) : /* @__PURE__ */ e.jsx(
-    ct,
-    {
-      width: c,
-      height: n,
-      label: E.getLocalizedStrings().chartCard.no_data.top_expenses[r]
-    }
-  );
-  return /* @__PURE__ */ e.jsx(
-    Z,
-    {
-      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) => a(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-DmwZA85J.cjs

@@ -1,38 +0,0 @@
-"use strict";const e=require("./vendor-.pnpm-D0ILHvHB.cjs"),j=require("react"),z=require("@zeniai/client-epic-state"),s=require("./index-DqpzSdEQ.cjs"),g=require("@emotion/styled"),h=require("recharts"),R=require("./ReloadCard-CVL6Z0eZ.cjs"),S=require("./graphic-no-data-l-C-ZhJpjS.cjs"),w=g(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"};
-`,M=g.div``,_=g(s.SmallRegular)`
-  color: ${t=>t.theme.colors.hero};
-  margin: ${s.Space.sp2} ${s.Space.sp0} ${s.Space.sp2} ${s.Space.sp0};
-`,D=({width:t,height:i,label:o})=>{const c=e.useTheme();return e.jsxRuntimeExports.jsxs(w,{height:i,width:t,children:[e.jsxRuntimeExports.jsx(M,{}),c.mode==="light"?e.jsxRuntimeExports.jsx(S.SvgGraphicNoDataL,{style:{marginBottom:s.Space.sp4}}):e.jsxRuntimeExports.jsx(S.SvgGraphicNoDataD,{style:{marginBottom:s.Space.sp4}}),e.jsxRuntimeExports.jsx(_,{children:o})]})},q=g.div``;function K({allowedValues:t,timeframeSelected:i,onTimeframeChanged:o,textStyle:c}){const a=r=>s.appLocale.getLocalizedStrings().timeframe[r];return e.jsxRuntimeExports.jsx(q,{onClick:r=>r.stopPropagation(),children:e.jsxRuntimeExports.jsx(s.Picker$1,{pickerValues:t,valueToLabel:a,selectedValue:i,onPickerSelectionChanged:o,optionTextStyle:c})})}const G=g(s.SmallRegularSp)`
-  color: ${t=>t.theme.colors.champion};
-`,b=g.div`
-  display: flex;
-  flex: 0 1 auto;
-  flex-direction: row;
-  align-items: center;
-`;function N({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(b,{style:{marginBottom:s.sp[3]},children:[e.jsxRuntimeExports.jsx(G,{children:i!=null?i+u:s.toCardTitle(o)+u})," ",m.length>0?e.jsxRuntimeExports.jsx(K,{timeframeSelected:r,onTimeframeChanged:n=>x?.(n??"month"),allowedValues:m}):null]}),e.jsxRuntimeExports.jsx(b,{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 C({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(R.ChartCardLoading,{dimension:t.dimension,animated:!t.disableAnimations}):t.fetchState==="Error"?e.jsxRuntimeExports.jsx(R.ReloadCard,{dimension:t.dimension,cardType:t.cardType,cardIndex:t.cardIndex,onReloadData:o.onReloadData,reportTitle:i}):e.jsxRuntimeExports.jsx(N,{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)}})}j.memo(C);const I=(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 f=p*(l-d)/(l+1);r.push({accountId:d.toString(),accountDescription:"",balance:{available:{amount:x*f/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}},E=37,y=2,P=g.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};
-`,Y=g.div`
-  display: flex;
-  align-items: center;
-  flex: 4 1 0;
-`,V=g.img`
-  height: ${s.Space.sp4};
-`,X=g(s.SmallRegular)`
-  margin-left: ${s.Space.sp2};
-`,H=g(s.LargeMedium)`
-  flex: 1 1 0;
-  color: ${t=>t.theme.colors.primary};
-`,W=g(s.StandardRegular)`
-  flex: 1 1 0;
-  margin-right: ${s.Space.sp2};
-`;function J({report:t,width:i,height:o,showBarHoverBackground:c}){const a=e.useTheme(),r=I(t.topExpenses.accountsOrdered.length,t.allTimePeriods,t.topExpenses),m=(l,x)=>e.jsxRuntimeExports.jsx(h.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(h.Cell,{fill:a.colors.topExCustomColor},x))},Math.random());return r.chartItems.length===0?null:e.jsxRuntimeExports.jsx(U,{chartItemArray:r.chartItems,showBarHoverBackground:c,barElement:m(r.chartItems,r.chartItems[0].barKey),width:i,height:o})}const Q=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+y,width:a,height:E,children:e.jsxRuntimeExports.jsxs(P,{children:[e.jsxRuntimeExports.jsxs(Y,{children:[e.jsxRuntimeExports.jsx(V,{src:l.logo,alt:l.accountDescription,loading:"lazy"}),e.jsxRuntimeExports.jsx(X,{children:l.accountDescription})]}),e.jsxRuntimeExports.jsx(H,{children:"⟶"}),e.jsxRuntimeExports.jsx(W,{children:s.amountToString("0,0",l[i])})]})})},U=({chartItemArray:t,barElement:i,width:o,height:c})=>{const a=t[0],r=a.total,m=a.barKey;return e.jsxRuntimeExports.jsxs(h.BarChart,{data:t,layout:"vertical",width:o,barCategoryGap:y,height:t.length?(E+2*y)*t.length:c,barSize:E,margin:{top:0,right:0,left:0,bottom:0},style:{display:"flex",flex:"1 1 auto",cursor:"default"},children:[e.jsxRuntimeExports.jsx(h.XAxis,{hide:!0,axisLine:!1,type:"number",domain:[l=>Math.min(0,l),r?.amount??0]}),e.jsxRuntimeExports.jsx(h.YAxis,{orientation:"left",yAxisId:0,dataKey:l=>l.accountId,type:"category",axisLine:!1,tickLine:!1,width:o/2,mirror:!1,tick:e.jsxRuntimeExports.jsx(Q,{width:o/2,chartItems:t,barKey:m})}),i]})},v=41,T=4;function Z({report:t,width:i,height:o,showBarHoverBackground:c,isDetailPage:a}){const r=e.useTheme(),m=I(a===!0?t.topExpenses.accountsOrdered.length:6,t.allTimePeriods,t.topExpenses),l=(x,u,n)=>e.jsxRuntimeExports.jsxs(h.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(h.LabelList,{dataKey:"accountDescription",position:"insideLeft",offset:8,content:p=>{const{x:d,y:f,value:k,height:A,offset:O}=p;return e.jsxRuntimeExports.jsx(h.Text,{x:d+O,y:f+A/2,fill:r.colors.hero,fontSize:s.textStyles.smallRegular.fontSize,verticalAnchor:"middle",width:n-110,maxLines:1,children:k})}}),x.map(p=>e.jsxRuntimeExports.jsx(h.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(F,{chartItemArray:m.chartItems,showBarHoverBackground:c,barElement:l(m.chartItems,m.chartItems[0].barKey,i),width:i,height:o,isDetailPage:a===!0})}const F=({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(h.BarChart,{data:t,layout:"vertical",width:o,barCategoryGap:a?T:2,height:a?t.length?(v+2*T)*t.length:c:c+5,barSize:a?v: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(h.XAxis,{hide:!0,axisLine:!1,type:"number",domain:[n=>Math.min(0,n),l?.amount??0]}),e.jsxRuntimeExports.jsx(h.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 tt(t){const i=s.useWindowSizeContext();return i!=="small"&&i!=="medium-compact"&&t.isDetailPage===!0?e.jsxRuntimeExports.jsx(J,{...t}):e.jsxRuntimeExports.jsx(Z,{...t})}const L=j.memo(tt,e.isEqual);function B(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 $({card:t,actions:i,data:o,dndProps:c}){const[a,r]=j.useState(o?.topExTimePeriod??"last_month"),m=[...z.TOP_EX_TIME_PERIODS],l=t.fetchState==="Completed"?B(o?.topExpenses.accountsOrdered):!1,x=(u,n)=>l===!1?e.jsxRuntimeExports.jsx(L,{report:o,width:u,height:n,timeframe:a}):e.jsxRuntimeExports.jsx(D,{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(C,{card:t,actions:i,timeframe:a,chartElement:x,allowedValues:m,onTimeframeChange:(u,n)=>r(n)})},t.cardIndex)}j.memo($);exports.ChartCard=C;exports.EmptyChartContent=D;exports.MemoTopExChart=L;exports.TopExCard=$;exports.isEmptyBalances=B;