@zeniai/web-components 3.16.66 → 3.16.67

package/dist/TrendChart-CfFlybne.js

@@ -1,333 +0,0 @@
-import { j as s, a0 as K, u as R, A as M, $ as z, Q as _, X, Y as q, R as N, aR as O } from "./vendor-.pnpm-DtFedGku.js";
-import V, { useRef as W, useEffect as w, useState as G } from "react";
-import { formatZeniDate as d } from "@zeniai/client-epic-state";
-import { S as $, C as I, p as F, a as j, j as S, t as A, dK as Q } from "./index-BUq811J_.js";
-import { c as J, g as v, b as Z, d as B } from "./chartTypes-BqIAJjXL.js";
-import C from "@emotion/styled";
-import { a as H } from "./toCOABalancesWithID-CvuAyGla.js";
-import { t as U } from "./toChartData-DNohv-tx.js";
-const P = C.div`
-  display: flex;
-`, aa = C.div`
-  flex: display;
-  opacity: 0.85;
-  border-radius: ${$.sp1};
-  flex-direction: column;
-  padding: ${$.sp3};
-  background-color: ${(a) => a.theme.colors.black};
-`, ta = C(F)`
-  color: ${(a) => a.color ?? I.neutralGrey2Light};
-  text-align: left;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`, ea = ({
-  active: a,
-  payload: t,
-  trendType: e
-}) => {
-  const r = [];
-  return t?.forEach((l) => {
-    const n = l.name;
-    if (l && a && l.value !== 0) {
-      const u = l.payload, x = l.color, m = n != null && u.record[n] != null ? u.record[n].amount : void 0;
-      r.push({
-        barName: e,
-        value: m,
-        color: x
-      });
-    }
-  }), r;
-}, ra = (a) => {
-  const t = ea(a);
-  return t.length ? /* @__PURE__ */ s.jsx(P, { children: /* @__PURE__ */ s.jsx(aa, { children: t.map((e, r) => /* @__PURE__ */ s.jsx(
-    ta,
-    {
-      color: e.color,
-      children: `${e.barName}: ${J(
-        e.value
-      )}`
-    },
-    e.barName + r
-  )) }) }) : null;
-}, oa = V.memo(ra), na = (a, t, e, r) => {
-  let l = [];
-  if (r != null) {
-    const n = sa(r, e);
-    n != null && n.length > 0 && (l = H("trend", "actual", n));
-  }
-  if (l.length > 0) {
-    const n = v("trend", "actual"), u = {};
-    return u[n] = l, U(
-      a,
-      t,
-      n,
-      u
-    );
-  } else
-    return;
-}, sa = (a, t) => {
-  if (a != null)
-    switch (t) {
-      case "month":
-        return a.monthly;
-      case "quarter":
-        return a.quarterly;
-      case "year":
-        return a.yearly;
-      case "free_range":
-        throw new Error("free_range dates are not supported!");
-    }
-}, k = [v("trend", "actual")];
-function ga({
-  firstMonthOfFY: a,
-  trendReport: t,
-  timeframe: e,
-  selectedTimePeriod: r,
-  graphColor: l,
-  width: n,
-  height: u,
-  onTimeframeSelectionChanged: x
-}) {
-  const m = W(!1), b = r != null ? ca(
-    a,
-    r,
-    e
-  ) : void 0, g = j.getLocalizedStrings().reports.trend[t?.balancesKind];
-  w(() => {
-    m.current = !0;
-  }, []);
-  const h = na(
-    a,
-    k,
-    e,
-    t
-  ), D = (y) => {
-    const f = [];
-    return k.forEach((o) => {
-      f.push(
-        /* @__PURE__ */ s.jsx(
-          K,
-          {
-            name: o,
-            isAnimationActive: m.current,
-            dataKey: (c) => {
-              const i = c.record;
-              return (i[o] != null && i[o].amount != null ? i[o].amount : void 0)?.amount ?? 0;
-            },
-            maxBarSize: 36,
-            fill: y.toString(),
-            "data-testid": S(o, "bar")
-          },
-          o
-        )
-      );
-    }), f;
-  };
-  return h == null ? null : /* @__PURE__ */ s.jsx(
-    la,
-    {
-      chartData: h,
-      timeframe: e,
-      selectedLabel: b,
-      barElements: D(l),
-      customToolTipContent: ({ active: y, payload: f }) => /* @__PURE__ */ s.jsx(
-        oa,
-        {
-          active: y,
-          payload: f,
-          trendType: g
-        }
-      ),
-      width: n,
-      height: u,
-      onTimeframeSelectionChanged: x
-    }
-  );
-}
-const la = ({
-  chartData: a,
-  timeframe: t,
-  selectedLabel: e,
-  barElements: r,
-  customToolTipContent: l,
-  width: n,
-  height: u,
-  onTimeframeSelectionChanged: x
-}) => {
-  const m = R(), [b, g] = G([
-    void 0,
-    void 0
-  ]), h = a.timeseries, D = Z(a), y = h.map(
-    (o) => o.label
-  );
-  w(
-    () => {
-      if (e != null) {
-        const o = B(
-          e.label,
-          y,
-          1
-        );
-        g(o);
-      } else
-        g([void 0, void 0]);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t, e]
-  );
-  const f = (o) => {
-    if (o?.activePayload == null || o?.activePayload.length === 0)
-      return;
-    const c = o.activePayload[0];
-    if (c?.payload?.record?.[v("trend", "actual")]?.amount == null)
-      return;
-    const i = c.payload.record[v("trend", "actual")].amount;
-    if (i != null && i.amount === 0 || c?.payload?.timeLabel?.label == null)
-      return;
-    const L = c.payload.timeLabel.label, E = c.payload.timeLabel.startDate, T = c.payload.timeLabel.endDate, Y = B(
-      L,
-      y,
-      1
-    );
-    g(Y), x?.(t, {
-      startDate: E,
-      endDate: T
-    });
-  };
-  return /* @__PURE__ */ s.jsx(
-    "div",
-    {
-      style: { width: n, height: u },
-      "data-testid": S("simple-bar-chart"),
-      children: /* @__PURE__ */ s.jsx(M, { children: ({ height: o, width: c }) => /* @__PURE__ */ s.jsxs(
-        z,
-        {
-          "data-testid": S("bar-chart"),
-          width: c,
-          height: o,
-          data: a.recordByTimeseries,
-          barCategoryGap: "30%",
-          margin: {
-            top: 5,
-            right: 20,
-            left: 0,
-            bottom: 5
-          },
-          style: { display: "flex", flex: "1 1 auto", cursor: "pointer" },
-          onClick: f,
-          children: [
-            /* @__PURE__ */ s.jsx(
-              _,
-              {
-                horizontal: !0,
-                vertical: !1,
-                strokeWidth: 0.5,
-                stroke: m.colors.grey3
-              }
-            ),
-            /* @__PURE__ */ s.jsx(
-              X,
-              {
-                dataKey: (i) => i.timeLabel.label,
-                type: "category",
-                axisLine: { stroke: m.colors.grey3, strokeWidth: 0.5 },
-                tickLine: !1,
-                tick: {
-                  color: m.colors.hero,
-                  ...A.extraSmallRegular.cssObject
-                }
-              }
-            ),
-            /* @__PURE__ */ s.jsx(
-              q,
-              {
-                type: "number",
-                axisLine: !1,
-                tickLine: !1,
-                tick: {
-                  color: m.colors.hero,
-                  ...A.extraSmallRegular.cssObject
-                },
-                tickFormatter: (i) => Q("0,0.[00]a", i, D)
-              }
-            ),
-            /* @__PURE__ */ s.jsx(
-              N,
-              {
-                cursor: !1,
-                content: l,
-                allowEscapeViewBox: { x: !1, y: !0 }
-              }
-            ),
-            e != null && /* @__PURE__ */ s.jsx(
-              O,
-              {
-                x1: b[0],
-                x2: b[1],
-                opacity: 0.3,
-                fillOpacity: 0.3,
-                stopOpacity: 0.1
-              }
-            ),
-            r
-          ]
-        }
-      ) })
-    }
-  );
-}, { dateFormat: p } = j.getLocalizedStrings(), ca = (a, t, e) => {
-  let r = "";
-  switch (e) {
-    case "week":
-      t.startDate.month() !== t.endDate.month() ? r = `${d(
-        t.startDate,
-        p.visual.MMMYYFormat,
-        a
-      )} - ${d(
-        t.endDate,
-        p.visual.MMMYYFormat,
-        a
-      )}` : r = `${d(
-        t.startDate,
-        p.visual.Dformat,
-        a
-      )} - ${d(
-        t.endDate,
-        p.visual.MMMDCommaYYYYformat,
-        a
-      )}`;
-      break;
-    case "month":
-      r = `${d(
-        t.startDate,
-        p.visual.MMMYYFormat,
-        a
-      )}`;
-      break;
-    case "quarter":
-      r = `${j.getLocalizedStrings().quarterPrefix}${d(
-        t.startDate,
-        p.visual.QYYformat,
-        a
-      )}`;
-      break;
-    case "year":
-      r = `${d(
-        t.startDate,
-        p.visual.YYYYformat,
-        a
-      )}`;
-      break;
-    case "free_range":
-      throw new Error("free_range dates are not supported!");
-  }
-  return {
-    label: r,
-    startDate: t.startDate,
-    endDate: t.endDate
-  };
-};
-export {
-  ga as default
-};

package/dist/TrendWithTransactions-CBDKBziX.js

@@ -1,346 +0,0 @@
-import { j as t, A as q } from "./vendor-.pnpm-DtFedGku.js";
-import { useState as G, useRef as K } from "react";
-import r from "@emotion/styled";
-import { j as S, S as i, p as V, a as b, b as Y, u as D, A as z, R as c, D as o, L as I, H as _ } from "./index-BUq811J_.js";
-import O from "./TrendChart-CfFlybne.js";
-import { N as J } from "./NoDataChart-DZ2Rihu9.js";
-import { I as Q } from "./InsightsSection-C-GdV3SN.js";
-import { T as U } from "./TransactionList-Drwy-Ecy.js";
-const X = r.div`
-  display: inline-block;
-`, Z = r.div`
-  background-color: ${(e) => e.theme.colors.grey3};
-  display: flex;
-  align-items: center;
-  padding: ${i.sp0} ${i.sp3};
-  border-radius: ${i.sp6};
-  height: ${i.sp6};
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    background-color: ${(e) => e.theme.colors.grey2};
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, W = r.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-`, ee = r(V)`
-  margin-right: ${i.sp2};
-`, te = r(Y)`
-  width: ${i.sp3};
-  height: ${i.sp3};
-  color: inherit;
-  &:hover {
-    color: inherit;
-  }
-`;
-function ie({
-  selectedTimeframeTick: e,
-  onTimeFilterClosed: n
-}) {
-  const l = () => {
-    n?.();
-  };
-  return /* @__PURE__ */ t.jsx(X, { children: /* @__PURE__ */ t.jsx(
-    Z,
-    {
-      onClick: l,
-      "data-testid": S("time-filter-indicator"),
-      children: /* @__PURE__ */ t.jsxs(W, { children: [
-        /* @__PURE__ */ t.jsx(ee, { children: ne(e) }),
-        /* @__PURE__ */ t.jsx(te, { preserveAspectRatio: "none" })
-      ] })
-    }
-  ) });
-}
-const ne = (e) => {
-  const n = e.startDate, l = b.getLocalizedStrings();
-  return `${n.format(l.dateFormat.visual.MMMYYFormat)}`;
-}, re = {
-  filterMarginLeft: new c(o[3], o[8])
-}, oe = r.div`
-  display: flex;
-  flex: 1 1 auto;
-  width: 100%;
-  flex-direction: column;
-`, ae = r.div`
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  margin: ${i.sp0};
-`, se = r.div`
-  margin: ${(e) => `${i.sp4} ${i.sp0} ${i.sp3} 
-    ${re.filterMarginLeft.valuePx(e.windowSize)}`};
-`, de = r.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: ${i.sp8};
-`;
-function le({
-  firstMonthOfFY: e,
-  selectedTimePeriod: n,
-  showSelectedPeriodTags: l,
-  fetchState: s,
-  transactions: d,
-  isDetailPage: g,
-  onTransactionItemClick: m,
-  onSelectedTimePeriodClear: u,
-  onLoadPreviousTransactionsClick: L,
-  onTransactionListHeightChanged: p
-}) {
-  const $ = s === "In-Progress" || s === "Not-Started", v = d.length === 0 && $, j = d.length > 0 && $, P = g !== !0 && l !== !0 ? {
-    isLoading: j && (s === "In-Progress" || s === "Not-Started"),
-    onLoadPreviousClick: (T, H) => {
-      L?.(T, H);
-    }
-  } : void 0, h = D();
-  return /* @__PURE__ */ t.jsx(
-    oe,
-    {
-      "data-testid": S("trend-transactions-list-container"),
-      children: v === !1 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        g === !1 && l === !0 && n != null && /* @__PURE__ */ t.jsx(se, { windowSize: h, children: /* @__PURE__ */ t.jsx(
-          ie,
-          {
-            selectedTimeframeTick: n,
-            onTimeFilterClosed: u
-          }
-        ) }),
-        n != null && /* @__PURE__ */ t.jsx(
-          ae,
-          {
-            "data-testid": S("trend-transactions-list"),
-            children: /* @__PURE__ */ t.jsx(
-              U,
-              {
-                firstMonthOfFY: e,
-                timeframe: "quarter",
-                timePeriod: n,
-                transactions: d,
-                isFirstLotLoading: $ && !j,
-                componentName: "trend.transactions.list",
-                trackPerformance: !1,
-                onTransactionItemClick: m,
-                showLoadPrevious: P,
-                onListInnerElementHeightChanged: p
-              }
-            )
-          }
-        )
-      ] }) : /* @__PURE__ */ t.jsx(de, { children: /* @__PURE__ */ t.jsx(z, { size: "Standard", start: !0 }) })
-    }
-  );
-}
-const a = {
-  headingMarginLeftRight: new c(o[3], o[8]),
-  headingMarginTop: new c(o[3], o[6]),
-  headingMarginTopDetail: new c(0, 0),
-  headingMarginBottom: new c(o[4], o[5]),
-  chartMarginLeftRight: new c(o[3], o[8]),
-  smallHeadingMarginTop: new c(o[7], o[5]),
-  smallHeadingMarginBottom: new c(o[4], o[3])
-}, y = {
-  trendChartHeight: 360,
-  emptyTrendChartHeight: new c(360, 432),
-  selectedTimeHeight: 136,
-  // 80 size of time filter + 56 bottom spacer
-  loaderTrendChartHeight: new c(470, 470)
-}, ce = r.div`
-  display: flex;
-  flex: 1 1 auto;
-  min-height: 100%;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${(e) => e.isDetailPage === !0 || e.page === "vendorDetailPage" ? e.theme.colors.grey4 : e.theme.colors.grey5};
-`, ge = r.div`
-  display: flex;
-  justify-content: center;
-  padding: ${i.sp6} ${i.sp8};
-`, he = r.div`
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  height: 360px;
-  margin: ${(e) => `${i.sp0} ${a.chartMarginLeftRight.valuePx(
-  e.windowSize
-)}`};
-  margin-bottom: ${(e) => e.bottomMarginNeeded === !0 ? i.sp8 : i.sp0};
-`, me = r(_)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${(e) => a.headingMarginTop.valuePx(e.windowSize)};
-  margin-left: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => a.headingMarginBottom.valuePx(e.windowSize)};
-  margin-right: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
-`, ue = r(I)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${(e) => a.smallHeadingMarginTop.valuePx(e.windowSize)};
-  margin-left: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => a.smallHeadingMarginBottom.valuePx(e.windowSize)};
-  margin-right: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
-`, xe = r(I)`
-  color: ${(e) => e.theme.colors.primary};
-  margin-top: ${(e) => a.headingMarginTopDetail.valuePx(e.windowSize)};
-  margin-left: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => a.headingMarginBottom.valuePx(e.windowSize)};
-  margin-right: ${(e) => a.headingMarginLeftRight.valuePx(e.windowSize)};
-`, fe = r.div`
-  display: flex;
-  margin: ${i.sp0} ${i.sp8};
-`, pe = r.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  height: ${(e) => e.height}px;
-`, $e = r.div`
-  position: relative;
-  box-shadow: ${(e) => e.page === "vendorDetailPage" ? "unset" : `${i.sp0} 2px ${i.sp1} ${e.theme.colors.dropShadowNormal}`};
-  background-color: ${(e) => e.page === "vendorDetailPage" ? e.theme.colors.grey4 : e.theme.colors.grey5};
-`, ve = r.div`
-  position: relative;
-`, je = r.div`
-  flex: 1 1 auto;
-  display: flex;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, we = r.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: ${(e) => e.isDetailPage === !0 ? "inherited" : "100vh"};
-  margin-top: ${i.sp8};
-`, Ce = r.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: ${(e) => y.loaderTrendChartHeight.valuePx(e.windowSize)};
-  margin-top: ${i.sp8};
-`;
-function Re({
-  firstMonthOfFY: e,
-  trendWithTransactionsReport: n,
-  graphColor: l,
-  isDetailPage: s,
-  initialTransactionListHeight: d = 5,
-  page: g,
-  onTransactionItemClick: m,
-  onTimePeriodChange: u
-}) {
-  const L = n.fetchState !== "Completed", p = n.selectedPeriod ?? {
-    timeframe: "quarter",
-    timePeriod: n.transactionTimePeriod
-  }, $ = "month", v = p?.timeframe === "month", j = n.trendReport?.dataAvailable == null, P = () => n.trendReport?.fetchState === "In-Progress" && n.fetchState === "Completed", h = n.trendReport?.trendReport, T = () => {
-    u?.("TransactionList");
-  }, H = (x, f) => {
-    const C = {
-      timeframe: f,
-      addTimePeriod: x,
-      currentTimePeriod: n.selectedPeriod?.timePeriod
-    };
-    u?.("TransactionListLoadMore", C);
-  }, w = D(), [N, B] = G(d), M = K(null), R = () => {
-    const x = h?.insights != null && h?.insights.length > 0;
-    return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-      j ? P() ? /* @__PURE__ */ t.jsx(Ce, { windowSize: w, children: /* @__PURE__ */ t.jsx(z, { size: "Standard", start: !0 }) }) : /* @__PURE__ */ t.jsx(fe, { children: /* @__PURE__ */ t.jsx(
-        J,
-        {
-          title: b.getLocalizedStrings().chartCard.no_data_available
-        }
-      ) }) : /* @__PURE__ */ t.jsx(
-        he,
-        {
-          windowSize: w,
-          "data-testid": S(
-            "trend-with-transactions-chart",
-            g
-          ),
-          bottomMarginNeeded: !x,
-          children: /* @__PURE__ */ t.jsx(q, { children: ({ height: f, width: C }) => /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
-            O,
-            {
-              firstMonthOfFY: e,
-              trendReport: h,
-              timeframe: $,
-              selectedTimePeriod: v === !0 ? p?.timePeriod : void 0,
-              graphColor: l,
-              onTimeframeSelectionChanged: (k, E) => {
-                u?.("Chart", {
-                  timeframe: k,
-                  addTimePeriod: E
-                });
-              },
-              width: C,
-              height: f
-            }
-          ) }) })
-        }
-      ),
-      h?.insights != null && h?.insights.length > 0 && /* @__PURE__ */ t.jsx(ge, { ref: M, children: /* @__PURE__ */ t.jsx(Q, { insights: h?.insights }) })
-    ] });
-  }, F = (x) => /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx(
-    le,
-    {
-      firstMonthOfFY: x.firstMonthOfFY,
-      selectedTimePeriod: p?.timePeriod,
-      showSelectedPeriodTags: v,
-      isDetailPage: s,
-      fetchState: n.transactionView?.fetchState ?? "Not-Started",
-      transactions: n.transactionView?.transactions ?? [],
-      onTransactionItemClick: m,
-      onLoadPreviousTransactionsClick: H,
-      onSelectedTimePeriodClear: T,
-      onTransactionListHeightChanged: (f) => {
-        B(f);
-      }
-    }
-  ) }), A = (x) => {
-    const f = M.current != null ? M.current.clientHeight : 56;
-    return (j === !0 ? y.emptyTrendChartHeight.value(w) : y.trendChartHeight) + (v === !0 ? y.selectedTimeHeight : 0) + f + x;
-  };
-  return /* @__PURE__ */ t.jsx(ce, { page: g, isDetailPage: s, children: L === !0 ? /* @__PURE__ */ t.jsx(we, { isDetailPage: s, children: /* @__PURE__ */ t.jsx(z, { size: "Standard", start: !0 }) }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(
-      ye,
-      {
-        windowSize: w,
-        report: n,
-        isDetailPage: s,
-        page: g
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      pe,
-      {
-        windowSize: w,
-        height: A(N),
-        children: s === !0 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(ve, { children: /* @__PURE__ */ t.jsx(R, {}) }),
-          /* @__PURE__ */ t.jsx(F, { firstMonthOfFY: e })
-        ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx($e, { page: g, children: /* @__PURE__ */ t.jsx(R, {}) }),
-          /* @__PURE__ */ t.jsx(je, { children: /* @__PURE__ */ t.jsx(F, { firstMonthOfFY: e }) })
-        ] })
-      }
-    )
-  ] }) });
-}
-const ye = ({
-  windowSize: e,
-  report: n,
-  isDetailPage: l,
-  page: s
-}) => {
-  const d = n.trendReport?.trendReport;
-  if (d == null)
-    return null;
-  const g = d?.balancesKind === "income" ? d.customer.name : d.vendor.name, m = b.getLocalizedStrings().reports.trend[d?.balancesKind];
-  if (l)
-    return /* @__PURE__ */ t.jsx(xe, { windowSize: e, children: m });
-  const u = g + " " + m;
-  return s === "vendorDetailPage" ? /* @__PURE__ */ t.jsx(ue, { windowSize: e, children: m }) : /* @__PURE__ */ t.jsx(me, { windowSize: e, children: u });
-};
-export {
-  Re as T
-};