@zeniai/web-components 3.16.31 → 3.16.32

package/dist/PortfolioDetails-DgBQTG2N.js

@@ -0,0 +1,653 @@
+import { j as e, u as Z } from "./vendor-.pnpm-DxbX2tX4.js";
+import { useState as H } from "react";
+import i from "@emotion/styled";
+import { a as K, S as t, kf as X, p as G, dB as ee, u as oe, a5 as F, R as O, Z as y, C as I, _ as J, G as B, bb as ie, J as te, L as re, ag as se, Q as le, E as ne, aI as ae, D as E } from "./index-Cynhe4j_.js";
+import { g as ce } from "./treasuryColorHelper-73WJKkar.js";
+const {
+  common: n,
+  spendManagement: { treasury: s },
+  dateFormat: de
+} = K.getLocalizedStrings(), u = {
+  portfolioYieldMarginTop: new O(-E[1], E[0]),
+  sliderWidth: new O(143, 177)
+}, qe = ({
+  isInReview: o,
+  isSetup: r,
+  fundDetails: m,
+  allocation: c,
+  amount: h,
+  fundAllocations: v,
+  page: w
+}) => {
+  const a = pe(m);
+  return /* @__PURE__ */ e.jsxs(ge, { children: [
+    !r && /* @__PURE__ */ e.jsx(
+      he,
+      {
+        style: {
+          alignSelf: "flex-start",
+          padding: `${t.sp2} ${t.sp0}`
+        },
+        children: `${s.portfolioAllocation.title}`
+      }
+    ),
+    a.map((j, x) => {
+      const W = v?.find(
+        (Y) => Y.fundCode === m[x].fundCode
+      )?.amount;
+      return /* @__PURE__ */ e.jsx(
+        xe,
+        {
+          portfolio: j,
+          fund: m[x],
+          fundIndex: x,
+          allocationPercentage: c.allocation?.[m[x].fundCode] || 0,
+          isInReview: o,
+          isSetup: r,
+          isLast: x === a.length - 1,
+          amount: h,
+          currentAllocationAmount: W,
+          page: w
+        },
+        m[x]?.fundCode || x
+      );
+    })
+  ] });
+}, pe = (o) => o.map((r) => [
+  {
+    label: s.promoPage.liquidity,
+    value: r.liquidityTimeline || n.strings.hyphen
+  },
+  {
+    label: s.promoPage.fundSize,
+    value: X(r.fundSize, r.currencyCode)
+  },
+  {
+    label: s.promoPage.maturity,
+    value: `${r.maturity} ${n.timeStrings.days}`
+  },
+  {
+    label: s.promoPage.expenseRatio,
+    value: `${r.expenseRatio}${s.promoPage.expenseRatioSuffix}`
+  },
+  {
+    label: s.promoPage.riskRating,
+    value: r.riskRating || n.strings.hyphen
+  },
+  {
+    label: s.promoPage.composition,
+    value: Array.isArray(r.compositions) && r.compositions.length > 0 ? `${r.compositions[0].investedIn} ${r.compositions[0].percentage}${n.strings.percentage}` : n.strings.hyphen,
+    tag: Array.isArray(r.compositions) && r.compositions.length > 1 ? `+${r.compositions.length - 1}` : void 0,
+    compositions: r.compositions ?? []
+  }
+]), xe = ({
+  portfolio: o,
+  fund: r,
+  fundIndex: m,
+  allocationPercentage: c,
+  isInReview: h,
+  isSetup: v,
+  isLast: w,
+  amount: a,
+  currentAllocationAmount: j,
+  page: x
+}) => {
+  const Y = ee().analytics, M = Z(), l = oe(), $ = j ? j.amount : a != null && a.amount > 0 && c > 0 ? a.amount * c / 100 : void 0, [p, Q] = H(!1), g = ce(m, M), b = () => {
+    p || Y.trackTreasuryProspectusClick(
+      r.fundName,
+      r.fundCode,
+      x
+    ), Q((d) => !d);
+  };
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(me, { children: /* @__PURE__ */ e.jsxs(
+      fe,
+      {
+        windowSize: l,
+        children: [
+          /* @__PURE__ */ e.jsxs(ye, { windowSize: l, children: [
+            /* @__PURE__ */ e.jsxs(ue, { windowSize: l, children: [
+              /* @__PURE__ */ e.jsxs(
+                ve,
+                {
+                  isInReview: h,
+                  windowSize: l,
+                  children: [
+                    /* @__PURE__ */ e.jsx(we, { children: r.fundCode }),
+                    /* @__PURE__ */ e.jsx(je, { color: g.fundNameColor, children: `${r.fundCompanyName} ${r.fundName}` })
+                  ]
+                }
+              ),
+              l !== "small" && /* @__PURE__ */ e.jsxs(P, { onClick: b, children: [
+                p ? s.transferDrawer.calculator.footerText.hide : s.overviewPage.fundTile.viewDetails,
+                p ? /* @__PURE__ */ e.jsx(k, {}) : /* @__PURE__ */ e.jsx(D, {})
+              ] })
+            ] }),
+            l !== "small" && /* @__PURE__ */ e.jsx(e.Fragment, { children: h ? /* @__PURE__ */ e.jsxs(q, { style: { alignItems: "flex-start" }, children: [
+              /* @__PURE__ */ e.jsxs(f, { windowSize: l, children: [
+                c,
+                n.strings.percentage
+              ] }),
+              /* @__PURE__ */ e.jsx(U, { children: $ != null ? F("0,0.[00]", {
+                amount: $,
+                currencyCode: a?.currencyCode != null && a.currencyCode !== "" ? a.currencyCode : "USD",
+                currencySymbol: a?.currencySymbol != null && a.currencySymbol !== "" ? a.currencySymbol : "$"
+              }) : n.strings.empty })
+            ] }) : /* @__PURE__ */ e.jsxs(be, { children: [
+              /* @__PURE__ */ e.jsxs(f, { windowSize: l, children: [
+                c,
+                n.strings.percentage
+              ] }),
+              /* @__PURE__ */ e.jsxs(R, { children: [
+                /* @__PURE__ */ e.jsx(
+                  z,
+                  {
+                    type: "range",
+                    min: 0,
+                    max: 100,
+                    step: 1,
+                    value: c,
+                    readOnly: !0,
+                    windowSize: l
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(
+                  L,
+                  {
+                    color: g.fundNameColor,
+                    style: {
+                      width: `calc(${u.sliderWidth.value(l)}/100*${c}px)`,
+                      zIndex: 1
+                    }
+                  }
+                )
+              ] })
+            ] }) }),
+            l !== "small" && /* @__PURE__ */ e.jsxs(q, { children: [
+              /* @__PURE__ */ e.jsxs(C, { children: [
+                s.overviewPage.sevenDayYield,
+                /* @__PURE__ */ e.jsx(
+                  y,
+                  {
+                    data: s.overviewPage.fundTile.sevenDayYieldTooltip,
+                    variant: "small-description",
+                    placement: "bottom-end",
+                    style: { minWidth: "496px", padding: `12px ${t.sp3}` },
+                    enterDelay: 300,
+                    children: /* @__PURE__ */ e.jsx(A, {})
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsxs(
+                S,
+                {
+                  windowSize: l,
+                  style: {
+                    marginRight: t.sp3
+                  },
+                  children: [
+                    r.yield,
+                    n.strings.percentage
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          l === "small" && /* @__PURE__ */ e.jsx(Ie, { children: v ? (
+            // Setup mode - compact layout
+            /* @__PURE__ */ e.jsxs(Re, { children: [
+              /* @__PURE__ */ e.jsxs(ze, { children: [
+                /* @__PURE__ */ e.jsxs(Be, { children: [
+                  /* @__PURE__ */ e.jsxs(f, { windowSize: l, children: [
+                    c,
+                    n.strings.percentage
+                  ] }),
+                  /* @__PURE__ */ e.jsxs(R, { children: [
+                    /* @__PURE__ */ e.jsx(
+                      z,
+                      {
+                        type: "range",
+                        min: 0,
+                        max: 100,
+                        step: 1,
+                        value: c,
+                        readOnly: !0,
+                        windowSize: l
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsx(
+                      L,
+                      {
+                        color: g.fundNameColor,
+                        style: {
+                          width: `calc(${u.sliderWidth.value(l)}/100*${c}px)`,
+                          zIndex: 1
+                        }
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ e.jsxs(Le, { children: [
+                  /* @__PURE__ */ e.jsxs(C, { children: [
+                    s.overviewPage.sevenDayYield,
+                    /* @__PURE__ */ e.jsx(
+                      y,
+                      {
+                        data: s.overviewPage.fundTile.sevenDayYieldTooltip,
+                        variant: "small-description",
+                        placement: "bottom-end",
+                        style: { padding: `12px ${t.sp3}` },
+                        enterDelay: 300,
+                        children: /* @__PURE__ */ e.jsx(A, {})
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e.jsxs(S, { windowSize: l, children: [
+                    r.yield,
+                    n.strings.percentage
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ e.jsxs(
+                P,
+                {
+                  onClick: b,
+                  style: { marginBottom: t.sp2 },
+                  children: [
+                    p ? s.transferDrawer.calculator.footerText.hide : s.overviewPage.fundTile.viewDetails,
+                    p ? /* @__PURE__ */ e.jsx(k, {}) : /* @__PURE__ */ e.jsx(D, {})
+                  ]
+                }
+              )
+            ] })
+          ) : h ? (
+            // Review mode - existing layout
+            /* @__PURE__ */ e.jsxs(Ye, { children: [
+              /* @__PURE__ */ e.jsxs(V, { children: [
+                /* @__PURE__ */ e.jsxs(f, { windowSize: l, children: [
+                  c,
+                  n.strings.percentage
+                ] }),
+                /* @__PURE__ */ e.jsx(U, { children: $ != null ? F("0,0.[00]", {
+                  amount: $,
+                  currencyCode: a?.currencyCode != null && a.currencyCode !== "" ? a.currencyCode : "USD",
+                  currencySymbol: a?.currencySymbol != null && a.currencySymbol !== "" ? a.currencySymbol : "$"
+                }) : n.strings.empty }),
+                /* @__PURE__ */ e.jsxs(
+                  P,
+                  {
+                    onClick: b,
+                    style: {
+                      margin: `${t.sp2} ${t.sp0}`,
+                      ...w ? { marginBottom: t.sp0 } : {}
+                    },
+                    children: [
+                      p ? s.transferDrawer.calculator.footerText.hide : s.overviewPage.fundTile.viewDetails,
+                      p ? /* @__PURE__ */ e.jsx(k, {}) : /* @__PURE__ */ e.jsx(D, {})
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsxs(_, { children: [
+                /* @__PURE__ */ e.jsxs(C, { children: [
+                  s.overviewPage.sevenDayYield,
+                  /* @__PURE__ */ e.jsx(
+                    y,
+                    {
+                      data: s.overviewPage.fundTile.sevenDayYieldTooltip,
+                      variant: "small-description",
+                      placement: "bottom-end",
+                      style: { padding: `12px ${t.sp3}` },
+                      enterDelay: 300,
+                      children: /* @__PURE__ */ e.jsx(A, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e.jsxs(S, { windowSize: l, children: [
+                  r.yield,
+                  n.strings.percentage
+                ] })
+              ] })
+            ] })
+          ) : (
+            // Normal mode - existing slider layout
+            /* @__PURE__ */ e.jsxs(Me, { children: [
+              /* @__PURE__ */ e.jsxs(V, { children: [
+                /* @__PURE__ */ e.jsxs(f, { windowSize: l, children: [
+                  c,
+                  n.strings.percentage
+                ] }),
+                /* @__PURE__ */ e.jsxs(R, { children: [
+                  /* @__PURE__ */ e.jsx(
+                    z,
+                    {
+                      type: "range",
+                      min: 0,
+                      max: 100,
+                      step: 1,
+                      value: c,
+                      readOnly: !0,
+                      windowSize: l
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    L,
+                    {
+                      color: g.fundNameColor,
+                      style: {
+                        width: `calc(${u.sliderWidth.value(l)}/100*${c}px)`,
+                        zIndex: 1
+                      }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e.jsxs(P, { onClick: b, children: [
+                  p ? s.transferDrawer.calculator.footerText.hide : s.overviewPage.fundTile.viewDetails,
+                  p ? /* @__PURE__ */ e.jsx(k, {}) : /* @__PURE__ */ e.jsx(D, {})
+                ] })
+              ] }),
+              /* @__PURE__ */ e.jsxs(_, { children: [
+                /* @__PURE__ */ e.jsxs(C, { children: [
+                  s.overviewPage.sevenDayYield,
+                  /* @__PURE__ */ e.jsx(
+                    y,
+                    {
+                      data: s.overviewPage.fundTile.sevenDayYieldTooltip,
+                      variant: "small-description",
+                      placement: "bottom-end",
+                      style: { padding: `12px ${t.sp3}` },
+                      enterDelay: 300,
+                      children: /* @__PURE__ */ e.jsx(A, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e.jsxs(S, { windowSize: l, children: [
+                  r.yield,
+                  n.strings.percentage
+                ] })
+              ] })
+            ] })
+          ) })
+        ]
+      },
+      o[0].label
+    ) }),
+    p && /* @__PURE__ */ e.jsxs(Ce, { children: [
+      /* @__PURE__ */ e.jsx(T, { children: r.description }),
+      /* @__PURE__ */ e.jsx(Se, { style: { marginLeft: t.sp3 }, children: o.map((d) => /* @__PURE__ */ e.jsxs(Pe, { windowSize: l, children: [
+        /* @__PURE__ */ e.jsx(T, { children: n.strings.dividerDot }),
+        /* @__PURE__ */ e.jsx(T, { style: { minWidth: "140px" }, children: d.label }),
+        /* @__PURE__ */ e.jsxs(
+          T,
+          {
+            style: {
+              color: d.label === s.promoPage.fundSize ? g.fundNameColor : M.colors.primary,
+              borderBottom: `1px solid ${M.colors.grey3}`,
+              width: "100%",
+              padding: `${t.sp1} ${t.sp0}`,
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: t.sp2
+            },
+            children: [
+              d.value,
+              !!d.tag && d.label === s.promoPage.composition && /* @__PURE__ */ e.jsx(
+                y,
+                {
+                  variant: "list-description",
+                  data: {
+                    title: n.strings.empty,
+                    items: Array.isArray(d.compositions) && d.compositions.length > 0 ? d.compositions.map(
+                      (N) => ({
+                        text: `${n.strings.dividerDot}  ${N.investedIn}`,
+                        amount: `${N.percentage}${n.strings.percentage}`
+                      })
+                    ) : []
+                  },
+                  placement: "bottom-end",
+                  style: {
+                    minWidth: "312px",
+                    padding: `12px ${t.sp3}`
+                  },
+                  children: /* @__PURE__ */ e.jsx(De, { children: d.tag })
+                }
+              )
+            ]
+          }
+        )
+      ] }, d.label)) }),
+      /* @__PURE__ */ e.jsxs(
+        ke,
+        {
+          onClick: () => window.open(r.url, "_blank"),
+          children: [
+            /* @__PURE__ */ e.jsx($e, { children: `${s.promoPage.asOf} ${r.asOfDate.format(de.visual.MMMDCommaYYYYformat)}` }),
+            /* @__PURE__ */ e.jsx(Te, {})
+          ]
+        }
+      )
+    ] }),
+    (!w || v) && /* @__PURE__ */ e.jsx(Ae, { style: { width: "100%", marginBottom: t.sp3 } })
+  ] });
+}, me = i.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${t.sp2};
+  width: 100%;
+`, he = i(G)`
+  color: ${(o) => o.theme.colors.hero};
+`, ge = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`, ye = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  align-items: flex-start;
+`, fe = i.div`
+  display: flex;
+  flex-direction: ${(o) => o.windowSize === "small" ? "column" : "row"};
+  width: 100%;
+  margin-bottom: ${t.sp2};
+`, ue = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: ${(o) => o.windowSize === "small" ? "auto" : "245px"};
+`, ve = i(J)`
+  color: ${I.graphColor34Dark};
+  max-width: 280px;
+`, we = i.span`
+  color: ${(o) => o.theme.colors.primary};
+  margin-right: ${t.sp1};
+`, je = i.span`
+  color: ${(o) => o.color ?? I.graphColor34Dark};
+`, q = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: 129px;
+`, f = i(re)`
+  color: ${(o) => o.theme.colors.primary};
+  min-width: ${t.sp7};
+  text-align: left;
+`, S = i(J)`
+  color: ${I.success};
+  margin-top: ${(o) => u.portfolioYieldMarginTop.valuePx(o.windowSize)};
+`, C = i(B)`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: ${t.sp1};
+  color: ${(o) => o.theme.colors.hero};
+`, $e = i(ne)`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: ${t.sp1};
+`, U = i(B)`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: ${t.sp1};
+  color: ${(o) => o.theme.colors.primary};
+`, be = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.sp2};
+  width: 240px;
+`, R = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  position: relative;
+  flex: 1;
+`, Se = i.div``, z = i.input`
+  width: ${({ windowSize: o }) => u.sliderWidth.valuePx(o)};
+  cursor: default;
+  pointer-events: none;
+
+  &[type="range"]::-webkit-slider-runnable-track {
+    height: 2px;
+    background-color: ${(o) => o.theme.colors.grey3};
+  }
+
+  &[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  &[type="range"]::-webkit-slider-thumb {
+    visibility: hidden;
+  }
+`, L = i.div`
+  position: absolute;
+  height: 2px;
+  background-color: ${(o) => o.color ?? I.graphColor34Dark};
+`, P = i(B)`
+  color: ${(o) => o.theme.colors.hero};
+  align-self: flex-start;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.sp1};
+  cursor: pointer;
+`, D = i(te)`
+  width: 12px;
+  height: 12px;
+  color: ${(o) => o.theme.colors.hero};
+`, Ce = i.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-self: flex-start;
+  gap: ${t.sp2};
+  margin-bottom: ${t.sp3};
+`, T = i(G)`
+  color: ${(o) => o.theme.colors.hero};
+`, Pe = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${(o) => o.windowSize === "small" ? t.sp1 : t.sp2};
+`, De = i(le)`
+  color: ${(o) => o.theme.colors.hero};
+  padding: 1px 6px;
+  border: 1px solid ${(o) => o.theme.colors.grey2};
+  border-radius: ${t.sp1};
+`, Te = i(ae)`
+  width: 12px;
+  height: 12px;
+`, ke = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  gap: ${t.sp2};
+  width: fit-content;
+  cursor: pointer;
+  color: ${(o) => o.theme.colors.hero};
+
+  &:hover {
+    color: ${(o) => o.theme.colors.primary};
+    text-decoration: underline;
+  }
+`, k = i(ie)`
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  min-width: 12px;
+  min-height: 12px;
+  color: ${(o) => o.theme.colors.hero};
+`, Ae = i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(o) => o.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, A = i(se)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${(o) => o.theme.colors.hero};
+  margin-bottom: -3px;
+  cursor: pointer;
+  :hover {
+    color: ${(o) => o.theme.colors.primary};
+  }
+`, Ie = i.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  margin-top: ${t.sp2};
+`, Ye = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+`, Me = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`, V = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+`, _ = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`, Re = i.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: ${t.sp2};
+`, ze = i.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  gap: ${t.sp2};
+  justify-content: space-between;
+`, Le = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`, Be = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.sp3};
+`;
+export {
+  qe as P
+};