@zeniai/web-components 3.17.24 → 3.17.26

package/dist/TimeRangeSwitcher-jct2_5PE.js

@@ -0,0 +1,265 @@
+import { j as t, A, k as z, aF as K, as as V } from "./vendor-.pnpm-UYinI_7q.js";
+import * as x from "react";
+import { createRef as q, useRef as T, useState as I, useEffect as y, useLayoutEffect as G } from "react";
+import g from "@emotion/styled";
+import Y from "react-dom";
+import { S as c, F as J } from "./index-DCqdYYnP.js";
+import { c as Q } from "./CollapsableReportTable-xkNXkjfh.js";
+const U = (e) => /* @__PURE__ */ x.createElement("svg", { width: 12, height: 40, viewBox: "0 0 12 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ x.createElement("path", { d: "M12 40H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h8v40z" }), /* @__PURE__ */ x.createElement("path", { d: "M8 23.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM8 19a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-1-3.333a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-3 7.666a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM3 20a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm1-5.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2z", fill: "currentColor" })), X = (e) => /* @__PURE__ */ x.createElement("svg", { width: 12, height: 40, viewBox: "0 0 12 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ x.createElement("path", { d: "M0 0h8a4 4 0 0 1 4 4v32a4 4 0 0 1-4 4H0V0z" }), /* @__PURE__ */ x.createElement("path", { d: "M8 23.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM8 19a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-1-3.333a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm-3 7.666a1 1 0 1 0 0 2 1 1 0 0 0 0-2zM3 20a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm1-5.333a1 1 0 1 0 0 2 1 1 0 0 0 0-2z", fill: "currentColor" })), p = 40, d = 90, Z = g.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  min-height: ${p}px;
+  box-sizing: content-box;
+  width: 100%;
+  border-top: 1px solid ${(e) => e.theme.colors.grey3};
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+`, ee = g.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${d}px;
+  height: ${p}px;
+  max-height: ${p}px;
+  color: ${(e) => e.isEnabled && e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.isEnabled ? e.theme.colors.primary : e.theme.colors.hero};
+  }
+  cursor: ${(e) => e.isEnabled ? "pointer" : "default"};
+  background-color: ${(e) => e.isSelected ? e.theme.colors.background : "transparent"};
+`, te = g(V)`
+  display: flex;
+  position: relative;
+  scrollbar-width: none;
+`, ne = g(J)``, re = g.div`
+  top: ${c.sp0};
+  left: ${c.sp0};
+  width: calc(${(e) => d * e.numberOfTicksSelected}px);
+  position: absolute;
+  height: ${p}px;
+  border: 1px solid ${(e) => e.theme.colors.grey1};
+  .slider-icon {
+    fill: ${(e) => e.theme.colors.grey1};
+  }
+  border-radius: ${c.sp2};
+  border-left: ${c.sp0};
+  border-right: ${c.sp0};
+  &:hover {
+    border: 1px solid ${(e) => e.theme.colors.primary};
+    border-radius: ${c.sp2};
+    border-left: ${c.sp0};
+    border-right: ${c.sp0};
+    .slider-icon {
+      fill: ${(e) => e.theme.colors.primary};
+    }
+  }
+  line-height: ${c.sp0};
+  pointer-events: none;
+  box-sizing: border-box;
+`, oe = g.div`
+  float: left;
+  margin-top: -1px;
+  cursor: pointer;
+  pointer-events: all;
+  color: ${(e) => e.theme.colors.grey5};
+`, le = g.div`
+  float: right;
+  margin-top: -1px;
+  cursor: pointer;
+  pointer-events: all;
+  color: ${(e) => e.theme.colors.grey5};
+`;
+function R({ iconPosition: e }) {
+  switch (e) {
+    case "left":
+      return /* @__PURE__ */ t.jsx(U, { className: "slider-icon", fill: "currentColor" });
+    case "right":
+      return /* @__PURE__ */ t.jsx(X, { className: "slider-icon", fill: "currentColor" });
+    default:
+      throw Error("Invalid iconPosition");
+  }
+}
+function ie(e) {
+  return Y.createPortal(e.children, e.parentNode);
+}
+function se({
+  enabled: e,
+  firstMonthOfFY: s,
+  timeframe: o,
+  tick: n,
+  tickIndex: u,
+  isSelected: i,
+  onClick: h
+}) {
+  return /* @__PURE__ */ t.jsx(
+    ee,
+    {
+      isEnabled: e,
+      isSelected: i,
+      onClick: () => {
+        h(n, u, o);
+      },
+      children: /* @__PURE__ */ t.jsx(ne, { children: Q(s, n, o) })
+    }
+  );
+}
+function ce(e, s, o, n, u) {
+  const i = s - e, h = Math.floor(e / d) + Math.round(i / d), $ = h + o.length - n.length, m = h + o.length, S = u - m;
+  return {
+    selectedTicks: {
+      fromStart: {
+        startIndex: h,
+        length: o.length
+      },
+      fromEnd: {
+        offsetFromEnd: S,
+        length: o.length
+      }
+    },
+    highlightedOfSelectedTicks: {
+      startIndex: $,
+      length: n.length
+    }
+  };
+}
+function ae(e) {
+  return e.startIndex != null;
+}
+function k(e, s) {
+  let o = { startIndex: 0, length: 0 };
+  if (ae(e))
+    o = e;
+  else {
+    const n = e.length;
+    o = {
+      startIndex: s.length - e.offsetFromEnd - n + 1,
+      length: e.length
+    };
+  }
+  return o;
+}
+function de({
+  width: e,
+  firstMonthOfFY: s,
+  timeframe: o,
+  timeframeTicks: n,
+  isEnabled: u,
+  selection: i,
+  onClick: h,
+  onSelectionChanged: $
+}) {
+  const m = q(), S = T(null), [C, M] = I(!1), [l, L] = I(
+    k(i.selectedTicks, n)
+  ), v = T(l.startIndex);
+  y(() => {
+    v.current = l.startIndex;
+  });
+  const [b, O] = I(i.highlightedOfSelectedTicks), P = (l.startIndex + l.length > n.length ? Math.max(n.length - l.length, 0) : l.startIndex) * d, [w, F] = I({
+    x: P,
+    y: 0
+  });
+  y(() => {
+    M(!0);
+  }, []), y(() => {
+    const r = k(
+      i.selectedTicks,
+      n
+    );
+    if (!z(l, r)) {
+      L(r);
+      const a = r.startIndex * d;
+      F({
+        x: a,
+        y: 0
+      });
+    }
+    z(b, i.highlightedOfSelectedTicks) || O(i.highlightedOfSelectedTicks);
+  }, [l, b, i, n]), G(() => {
+    const { startIndex: r, length: a } = l;
+    m.current?.scrollToItem(
+      v.current <= r ? r + a - 1 : r
+    );
+  }, [m, l]);
+  const N = u !== !1, D = (r, a, f) => {
+    h?.(f, r);
+  }, H = (r, a) => {
+    const f = ce(
+      w.x,
+      a.x,
+      l,
+      b,
+      n.length
+    );
+    $?.(
+      f.selectedTicks,
+      f.highlightedOfSelectedTicks,
+      o,
+      n
+    );
+  }, _ = ({ index: r, style: a }) => {
+    const f = n[r], { startIndex: j, length: W } = b, B = r >= j && r < j + W;
+    return /* @__PURE__ */ t.jsx("div", { style: { ...a }, children: /* @__PURE__ */ t.jsx(
+      se,
+      {
+        enabled: N,
+        firstMonthOfFY: s,
+        timeframe: o,
+        tick: f,
+        tickIndex: r,
+        isSelected: B,
+        onClick: D
+      },
+      r
+    ) });
+  }, E = document.getElementsByClassName("date-range-list")[0];
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      te,
+      {
+        ref: m,
+        height: p,
+        width: e,
+        itemCount: n.length,
+        itemSize: d,
+        layout: "horizontal",
+        className: "date-range-list",
+        style: { overflowY: "hidden" },
+        children: _
+      }
+    ),
+    C === !0 && E != null ? /* @__PURE__ */ t.jsx(ie, { parentNode: E, children: /* @__PURE__ */ t.jsx(
+      K,
+      {
+        axis: "x",
+        defaultPosition: { x: 0, y: 0 },
+        position: w,
+        bounds: {
+          left: 0,
+          right: (n.length - l.length) * d
+        },
+        grid: [1, 0],
+        scale: 1,
+        onStop: H,
+        nodeRef: S,
+        children: /* @__PURE__ */ t.jsxs(
+          re,
+          {
+            numberOfTicksSelected: l.length,
+            ref: S,
+            children: [
+              /* @__PURE__ */ t.jsx(oe, { children: /* @__PURE__ */ t.jsx(R, { iconPosition: "left" }) }),
+              /* @__PURE__ */ t.jsx(le, { children: /* @__PURE__ */ t.jsx(R, { iconPosition: "right" }) })
+            ]
+          }
+        )
+      }
+    ) }) : null
+  ] });
+}
+function pe(e) {
+  return /* @__PURE__ */ t.jsx(Z, { children: /* @__PURE__ */ t.jsx(A, { children: ({ width: s }) => /* @__PURE__ */ t.jsx(de, { ...e, width: s }) }) });
+}
+export {
+  pe as T,
+  p as a
+};

package/dist/TimeframeSwitcher-BK-qliOX.js

@@ -0,0 +1,103 @@
+import { j as o } from "./vendor-.pnpm-UYinI_7q.js";
+import c from "@emotion/styled";
+import { S as t, F as u, a as g } from "./index-DCqdYYnP.js";
+const S = c.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.background};
+  padding: ${t.sp1};
+  border-radius: 10px;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+`, p = c.div`
+  color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.champion};
+  }
+  cursor: ${(e) => e.isSelected ? "default" : "pointer"};
+  border-radius: ${t.sp2};
+  background-color: ${(e) => e.isSelected ? e.theme.colors.grey5 : e.theme.colors.background};
+  box-shadow: ${(e) => e.isSelected ? `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}` : null};
+`, f = c(u)`
+  padding: ${t.sp2} ${t.sp3} ${t.sp2} ${t.sp3};
+`, x = c.div`
+  width: 1px;
+  height: ${t.sp3};
+  background-color: ${(e) => e.isSelected ? e.theme.colors.background : e.theme.colors.grey2};
+`, _ = c.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+function w({
+  timeframe: e,
+  isSelected: l,
+  onClick: n
+}) {
+  const i = (r) => {
+    switch (r) {
+      case "month":
+      case "quarter":
+      case "year":
+      case "this_week_to_date":
+      case "last_week":
+      case "this_month_to_date":
+      case "last_month":
+      case "last_3_months":
+      case "last_6_months":
+      case "last_12_months":
+      case "this_year_to_date":
+      case "last_year":
+        return g.getLocalizedStrings().timeframeSwitcherLabels[r];
+      default:
+        return console.warn("Unsupported timeframe"), "";
+    }
+  };
+  return /* @__PURE__ */ o.jsx(
+    p,
+    {
+      onClick: () => {
+        l === !1 && n(e);
+      },
+      isSelected: l,
+      children: /* @__PURE__ */ o.jsx(f, { children: i(e) })
+    }
+  );
+}
+function b({
+  timeframes: e,
+  selectedTimeframe: l,
+  onTimeframeSelectionChanged: n
+}) {
+  const i = (s) => {
+    n?.(s);
+  }, r = e.findIndex(
+    (s) => s === l
+  );
+  return /* @__PURE__ */ o.jsx(S, { children: e.map((s, a) => {
+    const h = e.length > 1 && a < e.length - 1, d = a === r, m = a === r - 1;
+    return /* @__PURE__ */ o.jsxs(_, { children: [
+      /* @__PURE__ */ o.jsx(
+        w,
+        {
+          timeframe: s,
+          isSelected: d,
+          onClick: i
+        },
+        a
+      ),
+      h ? /* @__PURE__ */ o.jsx(
+        x,
+        {
+          isSelected: d || m
+        }
+      ) : null
+    ] }, a);
+  }) });
+}
+export {
+  b as T
+};

package/dist/TimeframeSwitcher-DORTKqyC.cjs

@@ -0,0 +1,31 @@
+"use strict";const o=require("./vendor-.pnpm-DLVCFIC_.cjs"),a=require("@emotion/styled"),t=require("./index-CxdL3KSn.cjs"),u=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${e=>e.theme.colors.background};
+  padding: ${t.Space.sp1};
+  border-radius: 10px;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  white-space: nowrap;
+`,p=a.div`
+  color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.hero};
+  &:hover {
+    color: ${e=>e.isSelected?e.theme.colors.primary:e.theme.colors.champion};
+  }
+  cursor: ${e=>e.isSelected?"default":"pointer"};
+  border-radius: ${t.Space.sp2};
+  background-color: ${e=>e.isSelected?e.theme.colors.grey5:e.theme.colors.background};
+  box-shadow: ${e=>e.isSelected?`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`:null};
+`,S=a(t.SmallRegular)`
+  padding: ${t.Space.sp2} ${t.Space.sp3} ${t.Space.sp2} ${t.Space.sp3};
+`,x=a.div`
+  width: 1px;
+  height: ${t.Space.sp3};
+  background-color: ${e=>e.isSelected?e.theme.colors.background:e.theme.colors.grey2};
+`,g=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;function _({timeframe:e,isSelected:n,onClick:i}){const l=r=>{switch(r){case"month":case"quarter":case"year":case"this_week_to_date":case"last_week":case"this_month_to_date":case"last_month":case"last_3_months":case"last_6_months":case"last_12_months":case"this_year_to_date":case"last_year":return t.appLocale.getLocalizedStrings().timeframeSwitcherLabels[r];default:return console.warn("Unsupported timeframe"),""}};return o.jsxRuntimeExports.jsx(p,{onClick:()=>{n===!1&&i(e)},isSelected:n,children:o.jsxRuntimeExports.jsx(S,{children:l(e)})})}function w({timeframes:e,selectedTimeframe:n,onTimeframeSelectionChanged:i}){const l=s=>{i?.(s)},r=e.findIndex(s=>s===n);return o.jsxRuntimeExports.jsx(u,{children:e.map((s,c)=>{const m=e.length>1&&c<e.length-1,d=c===r,h=c===r-1;return o.jsxRuntimeExports.jsxs(g,{children:[o.jsxRuntimeExports.jsx(_,{timeframe:s,isSelected:d,onClick:l},c),m?o.jsxRuntimeExports.jsx(x,{isSelected:d||h}):null]},c)})})}exports.TimeframeSwitcher=w;

package/dist/TimeframeSwitcherWithToggle-BRtauGTF.cjs

@@ -0,0 +1,31 @@
+"use strict";const i=require("./vendor-.pnpm-DLVCFIC_.cjs"),r=require("@emotion/styled"),d=require("./TimeframeSwitcher-DORTKqyC.cjs"),n=require("./index-CxdL3KSn.cjs"),s="ZeniSwitch",t={root:`${s}-root`,switchBase:`${s}-switchBase`,track:`${s}-track`,thumb:`${s}-thumb`},h=({className:e,...o})=>i.jsxRuntimeExports.jsx(i.Switch,{...o,className:e,classes:{...t}}),g=r(h)(({theme:e})=>({[`& .${t.switchBase}`]:{color:e.colors.grey2,margin:0,padding:0,transform:"translateX(6px)"},[`& .${t.track}`]:{backgroundColor:e.colors.grey3,opacity:1},[`& .${t.switchBase}.Mui-checked`]:{color:e.colors.primary},[`& .${t.root}.${t.switchBase}.Mui-checked + .${t.track}`]:{backgroundColor:e.colors.grey1},[`&.${t.root}`]:{width:52,height:20,padding:"5px 10px"},[`& .${t.switchBase}.Mui-checked`]:{color:e.colors.grey5,transform:"translateX(28px)"},[`& .${t.switchBase}.Mui-checked .${t.thumb}`]:{backgroundColor:e.colors.primary},[`& .${t.switchBase}.Mui-checked .${t.thumb}:before`]:{backgroundImage:`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13"><path fill="${encodeURIComponent(e.colors.grey5)}" d="M10.738 2L4.5075 8.4035L1.2615 5.0685L0 6.3655L4.5075 11L12 3.297L10.738 2Z" /></svg>')`},[`& .${t.switchBase}.Mui-checked + .${t.track}`]:{opacity:1,backgroundColor:e.colors.grey1},[`& .${t.switchBase}.Mui-disabled + .${t.track}`]:{opacity:.7},[`& .${t.thumb}`]:{backgroundColor:e.colors.grey2,width:20,height:20,boxShadow:"none","&:before":{content:"''",position:"absolute",width:"100%",height:"100%",left:0,top:0,backgroundRepeat:"no-repeat",backgroundPosition:"center"}},[`& .${t.track}`]:{opacity:1,backgroundColor:e.colors.grey3,borderRadius:10}})),w=e=>i.jsxRuntimeExports.jsx(g,{...e}),a={timeframePaddingLeft:new n.ResponsiveSized(0,0,125),timeframePaddingBottom:new n.ResponsiveSized(8,8,0)},f=r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`,p=r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+`,m=r.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: center;
+  padding-left: ${e=>a.timeframePaddingLeft.valuePx(e.windowSize)};
+  padding-bottom: ${e=>a.timeframePaddingBottom.valuePx(e.windowSize)};
+`,j=r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`,S=r.div`
+  display: flex;
+  width: 125px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+`,R=r(n.SmallRegular)`
+  color: ${e=>e.isOn?e.theme.colors.primary:e.theme.colors.hero};
+  opacity: ${e=>e.isDisabled?.5:1};
+`,l=({label:e,isOn:o,isToggleDisabled:c,onValueChanged:x})=>i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(R,{isOn:o,isDisabled:c===!0,children:e}),i.jsxRuntimeExports.jsx(w,{checked:o,edge:"end",disabled:c===!0,disableRipple:c===!0,onChange:u=>{x(u.target.checked)}})]}),y=e=>{const o=n.useWindowSizeContext();return i.jsxRuntimeExports.jsxs(f,{children:[i.jsxRuntimeExports.jsx(m,{windowSize:o,children:i.jsxRuntimeExports.jsx(d.TimeframeSwitcher,{timeframes:e.timeframe.allowedTimeframes,selectedTimeframe:e.timeframe.selectedTimeframe,onTimeframeSelectionChanged:e.timeframe.onTimeframeSelectionChanged})}),i.jsxRuntimeExports.jsx(j,{children:i.jsxRuntimeExports.jsx(l,{...e.toggle})})]})},$=e=>{const o=n.useWindowSizeContext();return i.jsxRuntimeExports.jsxs(p,{children:[i.jsxRuntimeExports.jsx(m,{windowSize:o,children:i.jsxRuntimeExports.jsx(d.TimeframeSwitcher,{timeframes:e.timeframe.allowedTimeframes,selectedTimeframe:e.timeframe.selectedTimeframe,onTimeframeSelectionChanged:e.timeframe.onTimeframeSelectionChanged})}),i.jsxRuntimeExports.jsx(S,{children:i.jsxRuntimeExports.jsx(l,{...e.toggle})})]})};function b(e){const o=n.useWindowSizeContext();return o==="small"||o==="medium-compact"?i.jsxRuntimeExports.jsx(y,{...e}):i.jsxRuntimeExports.jsx($,{...e})}exports.TimeframeSwitcherWithToggle=b;

package/dist/TimeframeSwitcherWithToggle-Cl6ISBIz.js

@@ -0,0 +1,157 @@
+import { j as i, at as w } from "./vendor-.pnpm-UYinI_7q.js";
+import r from "@emotion/styled";
+import { T as l } from "./TimeframeSwitcher-BK-qliOX.js";
+import { u as n, R as s, F as u } from "./index-DCqdYYnP.js";
+const a = "ZeniSwitch", t = {
+  root: `${a}-root`,
+  switchBase: `${a}-switchBase`,
+  track: `${a}-track`,
+  thumb: `${a}-thumb`
+}, x = ({ className: e, ...o }) => /* @__PURE__ */ i.jsx(w, { ...o, className: e, classes: { ...t } }), y = r(x)(({ theme: e }) => ({
+  [`& .${t.switchBase}`]: {
+    color: e.colors.grey2,
+    margin: 0,
+    padding: 0,
+    transform: "translateX(6px)"
+  },
+  [`& .${t.track}`]: {
+    backgroundColor: e.colors.grey3,
+    opacity: 1
+  },
+  [`& .${t.switchBase}.Mui-checked`]: {
+    color: e.colors.primary
+  },
+  [`& .${t.root}.${t.switchBase}.Mui-checked + .${t.track}`]: {
+    backgroundColor: e.colors.grey1
+  },
+  [`&.${t.root}`]: {
+    width: 52,
+    height: 20,
+    padding: "5px 10px"
+  },
+  [`& .${t.switchBase}.Mui-checked`]: {
+    color: e.colors.grey5,
+    transform: "translateX(28px)"
+  },
+  [`& .${t.switchBase}.Mui-checked .${t.thumb}`]: {
+    backgroundColor: e.colors.primary
+  },
+  [`& .${t.switchBase}.Mui-checked .${t.thumb}:before`]: {
+    backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13"><path fill="${encodeURIComponent(
+      e.colors.grey5
+    )}" d="M10.738 2L4.5075 8.4035L1.2615 5.0685L0 6.3655L4.5075 11L12 3.297L10.738 2Z" /></svg>')`
+  },
+  [`& .${t.switchBase}.Mui-checked + .${t.track}`]: {
+    opacity: 1,
+    backgroundColor: e.colors.grey1
+  },
+  [`& .${t.switchBase}.Mui-disabled + .${t.track}`]: {
+    opacity: 0.7
+  },
+  [`& .${t.thumb}`]: {
+    backgroundColor: e.colors.grey2,
+    width: 20,
+    height: 20,
+    boxShadow: "none",
+    "&:before": {
+      content: "''",
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      left: 0,
+      top: 0,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center"
+    }
+  },
+  [`& .${t.track}`]: {
+    opacity: 1,
+    backgroundColor: e.colors.grey3,
+    borderRadius: 10
+  }
+})), $ = (e) => /* @__PURE__ */ i.jsx(y, { ...e }), d = {
+  timeframePaddingLeft: new s(0, 0, 125),
+  timeframePaddingBottom: new s(8, 8, 0)
+}, b = r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+`, k = r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+`, m = r.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 auto;
+  justify-content: center;
+  padding-left: ${(e) => d.timeframePaddingLeft.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => d.timeframePaddingBottom.valuePx(e.windowSize)};
+`, S = r.div`
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+`, p = r.div`
+  display: flex;
+  width: 125px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+`, T = r(u)`
+  color: ${(e) => e.isOn ? e.theme.colors.primary : e.theme.colors.hero};
+  opacity: ${(e) => e.isDisabled ? 0.5 : 1};
+`, h = ({
+  label: e,
+  isOn: o,
+  isToggleDisabled: c,
+  onValueChanged: g
+}) => /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+  /* @__PURE__ */ i.jsx(T, { isOn: o, isDisabled: c === !0, children: e }),
+  /* @__PURE__ */ i.jsx(
+    $,
+    {
+      checked: o,
+      edge: "end",
+      disabled: c === !0,
+      disableRipple: c === !0,
+      onChange: (f) => {
+        g(f.target.checked);
+      }
+    }
+  )
+] }), j = (e) => {
+  const o = n();
+  return /* @__PURE__ */ i.jsxs(b, { children: [
+    /* @__PURE__ */ i.jsx(m, { windowSize: o, children: /* @__PURE__ */ i.jsx(
+      l,
+      {
+        timeframes: e.timeframe.allowedTimeframes,
+        selectedTimeframe: e.timeframe.selectedTimeframe,
+        onTimeframeSelectionChanged: e.timeframe.onTimeframeSelectionChanged
+      }
+    ) }),
+    /* @__PURE__ */ i.jsx(S, { children: /* @__PURE__ */ i.jsx(h, { ...e.toggle }) })
+  ] });
+}, C = (e) => {
+  const o = n();
+  return /* @__PURE__ */ i.jsxs(k, { children: [
+    /* @__PURE__ */ i.jsx(m, { windowSize: o, children: /* @__PURE__ */ i.jsx(
+      l,
+      {
+        timeframes: e.timeframe.allowedTimeframes,
+        selectedTimeframe: e.timeframe.selectedTimeframe,
+        onTimeframeSelectionChanged: e.timeframe.onTimeframeSelectionChanged
+      }
+    ) }),
+    /* @__PURE__ */ i.jsx(p, { children: /* @__PURE__ */ i.jsx(h, { ...e.toggle }) })
+  ] });
+};
+function M(e) {
+  const o = n();
+  return o === "small" || o === "medium-compact" ? /* @__PURE__ */ i.jsx(j, { ...e }) : /* @__PURE__ */ i.jsx(C, { ...e });
+}
+export {
+  M as T
+};

package/dist/TopExCard-DOO87D37.cjs

@@ -0,0 +1,38 @@
+"use strict";const e=require("./vendor-.pnpm-DLVCFIC_.cjs"),j=require("react"),z=require("@zeniai/client-epic-state"),s=require("./index-CxdL3KSn.cjs"),g=require("@emotion/styled"),h=require("recharts"),R=require("./ReloadCard-C9iA7IVU.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;