@zeniai/web-components 3.17.10 → 3.17.11

package/dist/TrendChart-IhW6W0nl.cjs

@@ -1,16 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),j=require("react"),g=require("recharts"),p=require("@zeniai/client-epic-state"),i=require("./index-oQR57CDD.cjs"),x=require("./chartTypes-BIRLf_oW.cjs"),C=require("@emotion/styled"),$=require("./toCOABalancesWithID-BVJHQ9PF.cjs"),k=require("./toChartData-D2MQO6ix.cjs"),q=C.div`
-  display: flex;
-`,w=C.div`
-  flex: display;
-  opacity: 0.85;
-  border-radius: ${i.Space.sp1};
-  flex-direction: column;
-  padding: ${i.Space.sp3};
-  background-color: ${t=>t.theme.colors.black};
-`,K=C(i.StandardRegular)`
-  color: ${t=>t.color??i.Colors.neutralGrey2Light};
-  text-align: left;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`,Y=({active:t,payload:e,trendType:a})=>{const r=[];return e?.forEach(l=>{const s=l.name;if(l&&t&&l.value!==0){const m=l.payload,b=l.color,d=s!=null&&m.record[s]!=null?m.record[s].amount:void 0;r.push({barName:a,value:d,color:b})}}),r},M=t=>{const e=Y(t);return e.length?o.jsxRuntimeExports.jsx(q,{children:o.jsxRuntimeExports.jsx(w,{children:e.map((a,r)=>o.jsxRuntimeExports.jsx(K,{color:a.color,children:`${a.barName}: ${x.currencyFormatter(a.value)}`},a.barName+r))})}):null},V=j.memo(M),Z=(t,e,a,r)=>{let l=[];if(r!=null){const s=z(r,a);s!=null&&s.length>0&&(l=$.balancesToCOABalancesWithKey("trend","actual",s))}if(l.length>0){const s=x.getChartValueKey("trend","actual"),m={};return m[s]=l,k.toChartData(t,e,s,m)}else return},z=(t,e)=>{if(t!=null)switch(e){case"month":return t.monthly;case"quarter":return t.quarterly;case"year":return t.yearly;case"free_range":throw new Error("free_range dates are not supported!")}},L=[x.getChartValueKey("trend","actual")];function I({firstMonthOfFY:t,trendReport:e,timeframe:a,selectedTimePeriod:r,graphColor:l,width:s,height:m,onTimeframeSelectionChanged:b}){const d=j.useRef(!1),v=r!=null?_(t,r,a):void 0,D=i.appLocale.getLocalizedStrings().reports.trend[e?.balancesKind];j.useEffect(()=>{d.current=!0},[]);const S=Z(t,L,a,e),E=f=>{const h=[];return L.forEach(n=>{h.push(o.jsxRuntimeExports.jsx(g.Bar,{name:n,isAnimationActive:d.current,dataKey:c=>{const u=c.record;return(u[n]!=null&&u[n].amount!=null?u[n].amount:void 0)?.amount??0},maxBarSize:36,fill:f.toString(),"data-testid":i.generateDataTestId(n,"bar")},n))}),h};return S==null?null:o.jsxRuntimeExports.jsx(O,{chartData:S,timeframe:a,selectedLabel:v,barElements:E(l),customToolTipContent:({active:f,payload:h})=>o.jsxRuntimeExports.jsx(V,{active:f,payload:h,trendType:D}),width:s,height:m,onTimeframeSelectionChanged:b})}const O=({chartData:t,timeframe:e,selectedLabel:a,barElements:r,customToolTipContent:l,width:s,height:m,onTimeframeSelectionChanged:b})=>{const d=o.useTheme(),[v,D]=j.useState([void 0,void 0]),S=t.timeseries,E=x.getCurrencySymbol(t),f=S.map(n=>n.label);j.useEffect(()=>{if(a!=null){const n=x.getXAxisSelectionRange(a.label,f,1);D(n)}else D([void 0,void 0])},[e,a]);const h=n=>{if(n?.activePayload==null||n?.activePayload.length===0)return;const c=n.activePayload[0];if(c?.payload?.record?.[x.getChartValueKey("trend","actual")]?.amount==null)return;const u=c.payload.record[x.getChartValueKey("trend","actual")].amount;if(u!=null&&u.amount===0||c?.payload?.timeLabel?.label==null)return;const R=c.payload.timeLabel.label,T=c.payload.timeLabel.startDate,A=c.payload.timeLabel.endDate,B=x.getXAxisSelectionRange(R,f,1);D(B),b?.(e,{startDate:T,endDate:A})};return o.jsxRuntimeExports.jsx("div",{style:{width:s,height:m},"data-testid":i.generateDataTestId("simple-bar-chart"),children:o.jsxRuntimeExports.jsx(o.AutoSizer,{children:({height:n,width:c})=>o.jsxRuntimeExports.jsxs(g.BarChart,{"data-testid":i.generateDataTestId("bar-chart"),width:c,height:n,data:t.recordByTimeseries,barCategoryGap:"30%",margin:{top:5,right:20,left:0,bottom:5},style:{display:"flex",flex:"1 1 auto",cursor:"pointer"},onClick:h,children:[o.jsxRuntimeExports.jsx(g.CartesianGrid,{horizontal:!0,vertical:!1,strokeWidth:.5,stroke:d.colors.grey3}),o.jsxRuntimeExports.jsx(g.XAxis,{dataKey:u=>u.timeLabel.label,type:"category",axisLine:{stroke:d.colors.grey3,strokeWidth:.5},tickLine:!1,tick:{color:d.colors.hero,...i.textStyles.extraSmallRegular.cssObject}}),o.jsxRuntimeExports.jsx(g.YAxis,{type:"number",axisLine:!1,tickLine:!1,tick:{color:d.colors.hero,...i.textStyles.extraSmallRegular.cssObject},tickFormatter:u=>i.amountValueToString("0,0.[00]a",u,E)}),o.jsxRuntimeExports.jsx(g.Tooltip,{cursor:!1,content:l,allowEscapeViewBox:{x:!1,y:!0}}),a!=null&&o.jsxRuntimeExports.jsx(g.ReferenceArea,{x1:v[0],x2:v[1],opacity:.3,fillOpacity:.3,stopOpacity:.1}),r]})})})},{dateFormat:y}=i.appLocale.getLocalizedStrings(),_=(t,e,a)=>{let r="";switch(a){case"week":e.startDate.month()!==e.endDate.month()?r=`${p.formatZeniDate(e.startDate,y.visual.MMMYYFormat,t)} - ${p.formatZeniDate(e.endDate,y.visual.MMMYYFormat,t)}`:r=`${p.formatZeniDate(e.startDate,y.visual.Dformat,t)} - ${p.formatZeniDate(e.endDate,y.visual.MMMDCommaYYYYformat,t)}`;break;case"month":r=`${p.formatZeniDate(e.startDate,y.visual.MMMYYFormat,t)}`;break;case"quarter":r=`${i.appLocale.getLocalizedStrings().quarterPrefix}${p.formatZeniDate(e.startDate,y.visual.QYYformat,t)}`;break;case"year":r=`${p.formatZeniDate(e.startDate,y.visual.YYYYformat,t)}`;break;case"free_range":throw new Error("free_range dates are not supported!")}return{label:r,startDate:e.startDate,endDate:e.endDate}};exports.default=I;

package/dist/TrendWithTransactions-BuhaLWRV.js

@@ -1,346 +0,0 @@
-import { j as t, A as q } from "./vendor-.pnpm-B2klaOGU.js";
-import { useState as G, useRef as K } from "react";
-import r from "@emotion/styled";
-import { e as S, S as i, o as V, a as b, b as Y, u as D, A as z, R as c, D as o, k as I, H as _ } from "./index-DcL7gbcq.js";
-import O from "./TrendChart-BW32ef_8.js";
-import { N as J } from "./NoDataChart-Cn6PixBA.js";
-import { I as Q } from "./InsightsSection-CCLVRPkT.js";
-import { T as U } from "./TransactionList-BbYgOogU.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: P,
-  onTransactionListHeightChanged: p
-}) {
-  const $ = s === "In-Progress" || s === "Not-Started", v = d.length === 0 && $, w = d.length > 0 && $, L = g !== !0 && l !== !0 ? {
-    isLoading: w && (s === "In-Progress" || s === "Not-Started"),
-    onLoadPreviousClick: (T, H) => {
-      P?.(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: $ && !w,
-                componentName: "trend.transactions.list",
-                trackPerformance: !1,
-                onTransactionItemClick: m,
-                showLoadPrevious: L,
-                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;
-`, we = r.div`
-  flex: 1 1 auto;
-  display: flex;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, je = 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 P = n.fetchState !== "Completed", p = n.selectedPeriod ?? {
-    timeframe: "quarter",
-    timePeriod: n.transactionTimePeriod
-  }, $ = "month", v = p?.timeframe === "month", w = n.trendReport?.dataAvailable == null, L = () => 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);
-  }, j = 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: [
-      w ? L() ? /* @__PURE__ */ t.jsx(Ce, { windowSize: j, 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: j,
-          "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: (F, E) => {
-                u?.("Chart", {
-                  timeframe: F,
-                  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 }) })
-    ] });
-  }, k = (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 (w === !0 ? y.emptyTrendChartHeight.value(j) : y.trendChartHeight) + (v === !0 ? y.selectedTimeHeight : 0) + f + x;
-  };
-  return /* @__PURE__ */ t.jsx(ce, { page: g, isDetailPage: s, children: P === !0 ? /* @__PURE__ */ t.jsx(je, { isDetailPage: s, children: /* @__PURE__ */ t.jsx(z, { size: "Standard", start: !0 }) }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsx(
-      ye,
-      {
-        windowSize: j,
-        report: n,
-        isDetailPage: s,
-        page: g
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      pe,
-      {
-        windowSize: j,
-        height: A(N),
-        children: s === !0 ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx(ve, { children: /* @__PURE__ */ t.jsx(R, {}) }),
-          /* @__PURE__ */ t.jsx(k, { firstMonthOfFY: e })
-        ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-          /* @__PURE__ */ t.jsx($e, { page: g, children: /* @__PURE__ */ t.jsx(R, {}) }),
-          /* @__PURE__ */ t.jsx(we, { children: /* @__PURE__ */ t.jsx(k, { 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
-};

package/dist/TrendWithTransactions-D4uJMWQI.cjs

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