@zeniai/web-components 3.16.52 → 3.16.54

package/dist/PortfolioDetails-C4QFrCtd.js

@@ -1,653 +0,0 @@
-import { j as e, u as Z } from "./vendor-.pnpm-BZbZ6JJC.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-Bove2J7o.js";
-import { g as ce } from "./treasuryColorHelper-Bg0esw6P.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
-};