@zeniai/web-components 3.16.99 → 3.17.1

package/dist/TimeRangeSwitcher-DDdojJ8a.js

@@ -1,265 +0,0 @@
-import { j as t, A, k as z, aF as K, as as V } from "./vendor-.pnpm-B2klaOGU.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-CD9fwr4J.js";
-import { c as Q } from "./CollapsableReportTable-MdGfxigd.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-7oTyKvOH.js

@@ -1,103 +0,0 @@
-import { j as o } from "./vendor-.pnpm-B2klaOGU.js";
-import c from "@emotion/styled";
-import { S as t, F as u, a as g } from "./index-CD9fwr4J.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-DrEFYFYs.cjs

@@ -1,31 +0,0 @@
-"use strict";const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),a=require("@emotion/styled"),t=require("./index-CZKgJQb3.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-D7dC2Vvb.js

@@ -1,157 +0,0 @@
-import { j as i, at as w } from "./vendor-.pnpm-B2klaOGU.js";
-import r from "@emotion/styled";
-import { T as l } from "./TimeframeSwitcher-7oTyKvOH.js";
-import { u as n, R as s, F as u } from "./index-CD9fwr4J.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/TimeframeSwitcherWithToggle-kY4zlp_c.cjs

@@ -1,31 +0,0 @@
-"use strict";const i=require("./vendor-.pnpm-D0ILHvHB.cjs"),r=require("@emotion/styled"),d=require("./TimeframeSwitcher-DrEFYFYs.cjs"),n=require("./index-CZKgJQb3.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/TopExCard-CwJROPuF.cjs

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