@zeniai/web-components 3.16.62 → 3.16.64

package/dist/StatusSwitcher-Bmhq5yB_.js

@@ -0,0 +1,319 @@
+import { j as u } from "./vendor-.pnpm-DtFedGku.js";
+import { css as w } from "@emotion/react";
+import d from "@emotion/styled";
+import { a as $, u as S, fa as T, R as h, S as n, D as l, G as z } from "./index-lPBSSV1q.js";
+function b(e) {
+  return e.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim().split(" ").filter(Boolean).map((a) => a.charAt(0).toUpperCase() + a.slice(1)).join(" ");
+}
+const L = (e) => {
+  switch (e) {
+    case "bill_pay":
+      return "bills";
+    case "reimbursement":
+      return "reimbursements";
+    case "charge_cards":
+      return "cards";
+    default:
+      return e;
+  }
+};
+function B(e, r) {
+  if (typeof e == "string")
+    return e;
+  if (e != null && typeof e == "object") {
+    const a = Object.values(e)[0];
+    return typeof a == "string" ? a : b(r);
+  }
+  return b(r);
+}
+function c(e, r, a) {
+  const s = e[r];
+  return s != null ? B(s, a) : null;
+}
+const _ = (e, r) => {
+  const {
+    spendManagement: {
+      billPay: {
+        billsByTabs: { tabsById: a }
+      },
+      reimbursement: {
+        reimbursementByTabs: { tabsById: s }
+      },
+      zeniAccounts: {
+        zeniAccountList: { tabsById: o }
+      }
+    }
+  } = $.getLocalizedStrings(), t = String(e);
+  if (r)
+    switch (r) {
+      case "bill_pay": {
+        const i = c(a, t, t);
+        if (i != null)
+          return i.replace(/\s+/g, "_").toLowerCase();
+        break;
+      }
+      case "reimbursement": {
+        const i = c(
+          s,
+          t,
+          t
+        );
+        if (i != null)
+          return i.replace(/\s+/g, "_").toLowerCase();
+        break;
+      }
+      case "zeni_accounts": {
+        const i = c(
+          o,
+          t,
+          t
+        );
+        if (i != null)
+          return i.replace(/\s+/g, "_").toLowerCase();
+        break;
+      }
+    }
+  return (c(a, t, t) ?? c(s, t, t) ?? c(o, t, t) ?? b(t)).replace(/\s+/g, "_").toLowerCase();
+}, {
+  spendManagement: {
+    billPay: {
+      billsByTabs: { tabsById: x }
+    },
+    reimbursement: {
+      reimbursementByTabs: { tabsById: y }
+    },
+    zeniAccounts: {
+      zeniAccountList: { tabsById: A }
+    }
+  }
+} = $.getLocalizedStrings(), g = {
+  containerMarginLeft: new h(l[4], l[8]),
+  containerMarginRight: new h(l[4], l[8]),
+  segmentContainerMarginLeft: new h(l[4], l[8])
+}, M = d.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  border-bottom: ${(e) => e.hasSubTabs === !0 ? "none" : `1px solid  ${e.theme.colors.grey3}`};
+  justify-content: ${(e) => e.isSwitcherLeftAlign === !0 ? "left" : "center"};
+  margin-right: ${(e) => e.hasSubTabs === !0 ? "auto" : g.containerMarginRight.valuePx(e.windowSize)};
+  margin-left: ${(e) => e.hasSubTabs === !0 ? "auto" : g.containerMarginLeft.valuePx(e.windowSize)};
+`, j = d.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 53px;
+  overflow-x: ${(e) => e.hasSubTabs === !0 ? "auto" : "hidden"};
+  margin-left: ${(e) => e.hasSubTabs === !0 ? "initial" : "auto"};
+  column-gap: ${(e) => e.hasSubTabs !== !0 ? e.windowSize === "small" ? n.sp3 : n.sp6 : n.sp4};
+
+  margin-left: ${(e) => e.hasSubTabs === !0 ? g.segmentContainerMarginLeft.valuePx(e.windowSize) : "0"};
+`, D = d(z)`
+  display: flex;
+  padding: ${(e) => e.isMainTab ? "12px" : "6px 12px"};
+  white-space: nowrap;
+  color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
+  cursor: ${(e) => e.isClickDisabled ? "not-allowed" : e.isSelected ? "default" : "pointer"};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    background-color: ${(e) => e.isMainTab ? "" : e.theme.colors.grey3};
+    border-radius: ${(e) => e.isMainTab ? n.sp0 : n.sp1};
+    div {
+      color: ${(e) => e.theme.colors.primary};
+      border-color: ${(e) => e.theme.colors.primary};
+    }
+  }
+  background-color: ${(e) => e.isSelected && !e.isMainTab ? e.theme.colors.grey3 : ""};
+  border-radius: ${(e) => e.isSelected && !e.isMainTab ? n.sp1 : n.sp0};
+`, k = d.div`
+  display: flex;
+  color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
+  border: ${(e) => `1px solid ${e.isSelected ? e.theme.colors.primary : e.theme.colors.grey1}`};
+  border-radius: ${n.sp12};
+  margin-left: 6px;
+  align-items: center;
+  padding: 0 6px;
+  justify-content: center;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, P = d.div`
+  height: 2px;
+  background-color: ${(e) => e.theme.colors.primary};
+  border-radius: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transition: left 0.25s;
+  top: 51px;
+  &.draft {
+    width: 62px;
+    left: 0;
+  }
+  ${(e) => e.windowSize === "small" ? w`
+          &.pending_approval {
+            width: ${e.approvalCount !== 0 ? "120px" : "75px"};
+            left: ${e.approvalCount !== 0 ? "20%" : "25%"};
+          }
+          &.scheduled {
+            width: ${e.approvalCount !== 0 ? n.sp11 : "78px"};
+            left: ${e.approvalCount !== 0 ? "58.5%" : "55.5%"};
+          }
+          &.paid {
+            width: ${e.approvalCount !== 0 ? "45px" : n.sp6};
+            left: 87%;
+          }
+          &.zeniAccounts {
+            width: ${n.sp12};
+            left: 3%;
+          }
+          &.externalAccounts {
+            width: 120px;
+            left: 56%;
+          }
+          &.achDetails {
+            width: 99px;
+            left: 0%;
+          }
+          &.wireDetails {
+            width: 99px;
+            left: 54%;
+          }
+        ` : w`
+          &.pending_approval {
+            width: ${e.approvalCount !== 0 ? "112px" : "86px"};
+            left: ${e.approvalCount !== 0 ? "24.5%" : "25%"};
+          }
+          &.scheduled {
+            width: ${e.approvalCount !== 0 ? "78px" : "90px"};
+            left: ${e.approvalCount !== 0 ? "61.5%" : "55.5%"};
+          }
+          &.paid {
+            width: ${e.approvalCount !== 0 ? "54px" : "45px"};
+            left: ${e.approvalCount !== 0 ? "89%" : "88%"};
+          }
+          &.zeniAccounts {
+            width: ${n.sp12};
+            left: 3%;
+          }
+          &.externalAccounts {
+            width: 120px;
+            left: 56%;
+          }
+          &.achDetails {
+            width: 102px;
+            left: 0%;
+          }
+          &.wireDetails {
+            width: 99px;
+            left: 60%;
+          }
+        `}
+`;
+function R({
+  tabId: e,
+  isSelected: r,
+  approvalCount: a,
+  entity: s,
+  onClick: o
+}) {
+  const t = (i) => {
+    switch (i) {
+      case "draft":
+      case "pending_approval":
+      case "scheduled":
+      case "paid":
+      case "all":
+      case "failed":
+      case "overdue":
+      case "cancelled":
+      case "rejected":
+      case "awaitingAllApproval":
+      case "ach":
+      case "wire":
+      case "deleted":
+        return s === "bill_pay" ? x[i] : y[i];
+      case "offline":
+      case "awaiting_approval":
+      case "awaiting_my_approval":
+        return x[i];
+      case "awaitingApproval":
+      case "awaitingMyApproval":
+      case "myDrafts":
+        return y[i];
+      case "wireDetails":
+      case "achDetails":
+        return A[i];
+      default:
+        return "";
+    }
+  }, p = S();
+  return /* @__PURE__ */ u.jsxs(
+    D,
+    {
+      onClick: () => {
+        r === !1 && o(e);
+      },
+      isClickDisabled: !1,
+      isSelected: r,
+      isMainTab: I(e) === !0,
+      windowSize: p,
+      children: [
+        t(e),
+        e === "pending_approval" && a !== 0 ? /* @__PURE__ */ u.jsx(k, { isSelected: r, children: a }) : null
+      ]
+    }
+  );
+}
+function G({
+  tabIds: e,
+  selectedTab: r,
+  entity: a,
+  isSwitcherLeftAlign: s = !1,
+  approvalCount: o,
+  hasSubTabs: t = !1,
+  enablePerformanceTracking: p = !0,
+  onTabSelectedChange: i
+}) {
+  const f = S(), v = (m) => {
+    i(m);
+  };
+  return T({
+    componentName: `${L(a).toLowerCase()}.${_(r, a).toLowerCase()}`,
+    enabled: p
+  }), /* @__PURE__ */ u.jsx(
+    M,
+    {
+      windowSize: f,
+      hasSubTabs: t,
+      isSwitcherLeftAlign: s,
+      children: /* @__PURE__ */ u.jsxs(j, { windowSize: f, hasSubTabs: t, children: [
+        e.map((m, C) => /* @__PURE__ */ u.jsx(
+          R,
+          {
+            tabId: m,
+            approvalCount: o,
+            isSelected: r === m,
+            entity: a,
+            onClick: v
+          },
+          C
+        )),
+        /* @__PURE__ */ u.jsx(
+          P,
+          {
+            className: `Slider ${r}`,
+            windowSize: f,
+            approvalCount: o
+          }
+        )
+      ] })
+    }
+  );
+}
+const I = (e) => e === "draft" || e === "pending_approval" || e === "scheduled" || e === "paid" || e === "achDetails" || e === "wireDetails";
+export {
+  G as T,
+  L as e,
+  _ as t
+};

package/dist/SubTabSwitcher-Dy9NWX-V.cjs

@@ -0,0 +1,58 @@
+"use strict";const i=require("./vendor-.pnpm-CT-Z_-kn.cjs"),a=require("@emotion/react"),r=require("@emotion/styled"),t=require("./index-BmvWQcNz.cjs");function x({allTabs:e,selectedTab:o,containerStyle:d,rightComponent:n,onTabChange:u}){const p=n!=null;return i.jsxRuntimeExports.jsxs(h,{style:d,hasRightComponent:p,children:[i.jsxRuntimeExports.jsx(m,{children:e.map(s=>{const c=s.id===o,l=s.isDisabled!=null;return i.jsxRuntimeExports.jsxs(S,{onClick:()=>{c===!1&&!l&&u(s)},isSelected:c,isDisabled:l,children:[i.jsxRuntimeExports.jsx(g,{children:s.label}),s.countDetails?.count!=null?i.jsxRuntimeExports.jsx(b,{children:i.jsxRuntimeExports.jsx($,{isCircular:s.countDetails.count==null||s.countDetails.count<10,children:i.jsxRuntimeExports.jsx(y,{children:s.countDetails.isFetching?i.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small-Compact",style:{color:"inherit",display:"flex",alignItems:"center",justifyContent:"center"},start:!0}):s.countDetails.count})})}):null]},s.id)})}),n]})}const h=r.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: ${e=>e.hasRightComponent?"space-between":"flex-start"};
+  align-items: center;
+  padding: ${t.Space.sp3} ${t.Space.sp0};
+  gap: ${t.Space.sp3};
+`,m=r.div`
+  display: flex;
+  position: relative;
+  gap: ${t.Space.sp3};
+  overflow: auto;
+`,g=r.div``,S=r(t.SmallRegular)`
+  height: ${t.Space.sp5};
+  padding: ${t.Space.sp0} 12px;
+  color: ${e=>e.isDisabled?e.theme.colors.grey2:e.isSelected?e.theme.colors.primary:e.theme.colors.grey1};
+  background-color: ${e=>e.isSelected?e.theme.colors.grey3:"transparent"};
+  border-radius: ${t.Space.sp1};
+
+  cursor: ${e=>e.isSelected||e.isDisabled?"default":"pointer"};
+
+  margin: ${t.Space.sp0};
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 6px;
+
+  &:hover {
+    color: ${e=>e.isDisabled?e.theme.colors.grey2:e.theme.colors.primary};
+    background-color: ${e=>e.isDisabled?e.isSelected?e.theme.colors.grey3:"transparent":e.theme.colors.grey3};
+  }
+`,$=r.div`
+  ${e=>e.isCircular?a.css`
+          height: ${t.Space.sp3};
+          width: ${t.Space.sp3};
+          padding: ${t.Space.sp0};
+        `:a.css`
+          height: 18px;
+          min-width: ${t.Space.sp3};
+          padding: ${t.Space.sp0} ${t.Space.sp1};
+        `}
+  background-color: transparent;
+  border-radius: inherit;
+`,b=r.div`
+  border: 1px solid;
+  border-color: inherit;
+  border-radius: ${t.Space.sp12};
+  padding: 2px;
+`,y=r(t.ExtraSmallMediumSp)`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+`;exports.SubTabSwitcher=x;

package/dist/SubTabSwitcher-sxf0WhGe.js

@@ -0,0 +1,113 @@
+import { j as s } from "./vendor-.pnpm-DtFedGku.js";
+import { css as c } from "@emotion/react";
+import r from "@emotion/styled";
+import { A as m, S as t, G as g, eH as x } from "./index-lPBSSV1q.js";
+function k({
+  allTabs: e,
+  selectedTab: o,
+  containerStyle: d,
+  rightComponent: l,
+  onTabChange: u
+}) {
+  const h = l != null;
+  return /* @__PURE__ */ s.jsxs(p, { style: d, hasRightComponent: h, children: [
+    /* @__PURE__ */ s.jsx($, { children: e.map((i) => {
+      const n = i.id === o, a = i.isDisabled != null;
+      return /* @__PURE__ */ s.jsxs(
+        y,
+        {
+          onClick: () => {
+            n === !1 && !a && u(i);
+          },
+          isSelected: n,
+          isDisabled: a,
+          children: [
+            /* @__PURE__ */ s.jsx(f, { children: i.label }),
+            i.countDetails?.count != null ? /* @__PURE__ */ s.jsx(S, { children: /* @__PURE__ */ s.jsx(
+              b,
+              {
+                isCircular: i.countDetails.count == null || i.countDetails.count < 10,
+                children: /* @__PURE__ */ s.jsx(j, { children: i.countDetails.isFetching ? /* @__PURE__ */ s.jsx(
+                  m,
+                  {
+                    size: "Small-Compact",
+                    style: {
+                      color: "inherit",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    start: !0
+                  }
+                ) : i.countDetails.count })
+              }
+            ) }) : null
+          ]
+        },
+        i.id
+      );
+    }) }),
+    l
+  ] });
+}
+const p = r.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: ${(e) => e.hasRightComponent ? "space-between" : "flex-start"};
+  align-items: center;
+  padding: ${t.sp3} ${t.sp0};
+  gap: ${t.sp3};
+`, $ = r.div`
+  display: flex;
+  position: relative;
+  gap: ${t.sp3};
+  overflow: auto;
+`, f = r.div``, y = r(g)`
+  height: ${t.sp5};
+  padding: ${t.sp0} 12px;
+  color: ${(e) => e.isDisabled ? e.theme.colors.grey2 : e.isSelected ? e.theme.colors.primary : e.theme.colors.grey1};
+  background-color: ${(e) => e.isSelected ? e.theme.colors.grey3 : "transparent"};
+  border-radius: ${t.sp1};
+
+  cursor: ${(e) => e.isSelected || e.isDisabled ? "default" : "pointer"};
+
+  margin: ${t.sp0};
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  gap: 6px;
+
+  &:hover {
+    color: ${(e) => e.isDisabled ? e.theme.colors.grey2 : e.theme.colors.primary};
+    background-color: ${(e) => e.isDisabled ? e.isSelected ? e.theme.colors.grey3 : "transparent" : e.theme.colors.grey3};
+  }
+`, b = r.div`
+  ${(e) => e.isCircular ? c`
+          height: ${t.sp3};
+          width: ${t.sp3};
+          padding: ${t.sp0};
+        ` : c`
+          height: 18px;
+          min-width: ${t.sp3};
+          padding: ${t.sp0} ${t.sp1};
+        `}
+  background-color: transparent;
+  border-radius: inherit;
+`, S = r.div`
+  border: 1px solid;
+  border-color: inherit;
+  border-radius: ${t.sp12};
+  padding: 2px;
+`, j = r(x)`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+`;
+export {
+  k as S
+};

package/dist/SuccessAnimation-CH5j3v64.cjs

@@ -0,0 +1,13 @@
+"use strict";const s=require("./vendor-.pnpm-CT-Z_-kn.cjs"),a=require("react"),c=require("@emotion/react"),S=require("@emotion/styled"),n=require("./index-BmvWQcNz.cjs"),x=c.keyframes`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+`,j=S.div`
+  ${({fade:e})=>e&&c.css`
+      animation: ${x} 1s forwards;
+    `}
+`,q=({width:e=30,height:u=30,shouldDisplay:t,animationInLoop:f=!1,shouldFade:m=!0,onAnimationComplete:i})=>{const[,r]=n.useMusic(n.SUCCESS_SOUND_SOURCE),[d,l]=a.useState(!1),[o]=n.useAnimation("Success"),p=()=>{l(!0),setTimeout(()=>{i&&i()},1e3)};return a.useEffect(()=>{t&&r(!0)},[t,r]),t&&o!=null?s.jsxRuntimeExports.jsx(j,{fade:m?d:!1,children:s.jsxRuntimeExports.jsx(s.Lottie,{style:{width:e,height:u},play:!0,animationData:o,loop:f,rendererSettings:{preserveAspectRatio:"xMidYMid slice"},onComplete:p})}):null};exports.SuccessAnimation=q;

package/dist/SuccessAnimation-kwleiRlf.js

@@ -0,0 +1,52 @@
+import { j as r, L as p } from "./vendor-.pnpm-DtFedGku.js";
+import l, { useState as d } from "react";
+import { css as S, keyframes as x } from "@emotion/react";
+import j from "@emotion/styled";
+import { fH as y, fI as A, r as C } from "./index-lPBSSV1q.js";
+const E = x`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+`, R = j.div`
+  ${({ fade: t }) => t && S`
+      animation: ${E} 1s forwards;
+    `}
+`, L = ({
+  width: t = 30,
+  height: i = 30,
+  shouldDisplay: e,
+  animationInLoop: n = !1,
+  shouldFade: f = !0,
+  onAnimationComplete: s
+}) => {
+  const [, a] = y(A), [c, m] = d(!1), [o] = C("Success"), u = () => {
+    m(!0), setTimeout(() => {
+      s && s();
+    }, 1e3);
+  };
+  return l.useEffect(() => {
+    e && a(!0);
+  }, [e, a]), e && o != null ? /* @__PURE__ */ r.jsx(R, { fade: f ? c : !1, children: /* @__PURE__ */ r.jsx(
+    p,
+    {
+      style: {
+        width: t,
+        height: i
+      },
+      play: !0,
+      animationData: o,
+      loop: n,
+      rendererSettings: {
+        preserveAspectRatio: "xMidYMid slice"
+      },
+      onComplete: u
+    }
+  ) }) : null;
+};
+export {
+  L as S
+};

package/dist/SummaryCard-Bno9Ov_m.js

@@ -0,0 +1,25 @@
+import { j as e } from "./vendor-.pnpm-DtFedGku.js";
+import { S as r, R as n } from "./ReloadCard-BXZRiGnF.js";
+const c = (a) => {
+  function d() {
+    return a.card.fetchState === "In-Progress" || a.card.fetchState === "Not-Started" ? /* @__PURE__ */ e.jsx(
+      r,
+      {
+        dimension: a.card.dimension,
+        animated: !a.card.disableAnimations
+      }
+    ) : a.card.fetchState === "Error" ? /* @__PURE__ */ e.jsx(
+      n,
+      {
+        dimension: a.card.dimension,
+        cardType: a.card.cardType,
+        cardIndex: a.card.cardIndex,
+        onReloadData: a.actions.onReloadData
+      }
+    ) : /* @__PURE__ */ e.jsx("div", { children: a.children });
+  }
+  return /* @__PURE__ */ e.jsx("div", { children: d() });
+};
+export {
+  c as S
+};

package/dist/SummaryCard-CnZqlnrW.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("./vendor-.pnpm-CT-Z_-kn.cjs"),n=require("./ReloadCard-CCfS4w5b.cjs"),d=e=>{function a(){return e.card.fetchState==="In-Progress"||e.card.fetchState==="Not-Started"?r.jsxRuntimeExports.jsx(n.SummaryCardLoading,{dimension:e.card.dimension,animated:!e.card.disableAnimations}):e.card.fetchState==="Error"?r.jsxRuntimeExports.jsx(n.ReloadCard,{dimension:e.card.dimension,cardType:e.card.cardType,cardIndex:e.card.cardIndex,onReloadData:e.actions.onReloadData}):r.jsxRuntimeExports.jsx("div",{children:e.children})}return r.jsxRuntimeExports.jsx("div",{children:a()})};exports.SummaryCard=d;