@zeniai/web-components 3.17.21 → 3.17.23

package/dist/BillPayApprovalRulesPage-Cj55NkSk.js

@@ -1,431 +0,0 @@
-import { j as t } from "./vendor-.pnpm-UYinI_7q.js";
-import r from "@emotion/styled";
-import { u as W, a as S, a2 as T, e as b, aP as M, aQ as H, aR as U, R as i, S as o, w as E, aw as z, ah as _, C as j, x as G, a9 as q, t as O, D as s, aE as F, A as Q, o as P, y as J } from "./index-mRSIAtAd.js";
-import { useState as K } from "react";
-const n = {
-  sectionWidth: new i(343, 580, 726),
-  ruleWrapperPadding: new i(s[3], s[4]),
-  wrapperGap: new i(s[4], s[3]),
-  wrapperMarginBottom: new i(s[6], s[8]),
-  lastWrapperMarginBottom: new i(s[5], s[9]),
-  stepperWidthHeight: new i(20, s[5]),
-  stepperItemLeft: new i(-29, -23),
-  stepperItemTop: new i(2, s[0]),
-  stepperItemPaddingLeft: new i(s[0], 10),
-  stepperItemMinHeight: new i(22, 28),
-  stepperLeft: new i(11, 17),
-  stepperTop: new i(2, s[0]),
-  stepperContentTop: new i(-1, -s[1])
-}, B = {
-  stepper: new z("smallRegular", "standardRegular"),
-  amount: new z("standardRegular", "largeMedium")
-}, X = ({
-  showDeleteBtn: e = !1,
-  isLastSection: f = !1,
-  approvalRule: c,
-  onEditRuleClick: v,
-  onDeleteRuleClick: m
-}) => {
-  const [x, g] = K(!1), l = W(), { range: h } = c.criteria[0], { steps: w, approvalRuleId: u } = c, a = S.getLocalizedStrings().commonSetUp.approval, y = () => {
-    g(!0);
-  }, L = {
-    onOkClick: () => {
-      g(!1), m?.(u);
-    },
-    onCancelClick: () => {
-      g(!1);
-    }
-  };
-  return /* @__PURE__ */ t.jsxs(
-    Y,
-    {
-      windowSize: l,
-      isLastSection: f,
-      children: [
-        /* @__PURE__ */ t.jsxs(Z, { windowSize: l, children: [
-          /* @__PURE__ */ t.jsxs(ne, { children: [
-            /* @__PURE__ */ t.jsxs(k, { windowSize: l, children: [
-              a.from,
-              " ",
-              T("0,0", h.min)
-            ] }),
-            /* @__PURE__ */ t.jsxs(V, { children: [
-              /* @__PURE__ */ t.jsx(A, {}),
-              /* @__PURE__ */ t.jsx(ee, {}),
-              /* @__PURE__ */ t.jsx(A, {})
-            ] }),
-            h.max == null ? /* @__PURE__ */ t.jsx(de, {}) : /* @__PURE__ */ t.jsx(k, { windowSize: l, children: T("0,0", { ...h.min, amount: h.max.amount }) })
-          ] }),
-          /* @__PURE__ */ t.jsxs(le, { className: "icons", children: [
-            e && /* @__PURE__ */ t.jsx(
-              ae,
-              {
-                onClick: y,
-                "data-testid": b(
-                  "delete-approval-rule-bill-pay",
-                  c.approvalRuleId
-                )
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              pe,
-              {
-                onClick: () => {
-                  v(u);
-                },
-                "data-testid": b(
-                  "edit-approval-rule-bill-pay",
-                  c.approvalRuleId
-                )
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ t.jsx(te, { windowSize: l, children: /* @__PURE__ */ t.jsx(oe, { isSingleStep: w.length === 1, windowSize: l, children: w.map((d, D) => /* @__PURE__ */ t.jsxs(
-          re,
-          {
-            isSingleStep: w.length === 1,
-            className: "stepperItem",
-            windowSize: l,
-            children: [
-              d.action === "require_approval" ? /* @__PURE__ */ t.jsx(ie, { children: a.requireText }) : /* @__PURE__ */ t.jsx(se, { children: a.notifyText }),
-              d.nonUserActors != null && d.nonUserActors.filter((p) => p.subType != null).map((p, N) => /* @__PURE__ */ t.jsxs(C, { children: [
-                /* @__PURE__ */ t.jsx(I, { children: p.subType != null ? a.nonUsers[p.subType].label : null }),
-                d.operator != "is" ? /* @__PURE__ */ t.jsx(R, { className: "operator", children: d.operator }) : null
-              ] }, `${p.subType}_${N}`)),
-              d.actors.map((p) => /* @__PURE__ */ t.jsxs(C, { children: [
-                /* @__PURE__ */ t.jsxs(I, { children: [
-                  p.firstName,
-                  " ",
-                  p.lastName
-                ] }),
-                d.operator != "is" ? /* @__PURE__ */ t.jsx(R, { className: "operator", children: d.operator }) : null
-              ] }, p.userId))
-            ]
-          },
-          D
-        )) }) }),
-        x ? /* @__PURE__ */ t.jsx(
-          M,
-          {
-            titleComponent: /* @__PURE__ */ t.jsx(U, { children: a.deleteApprovalRuleTitle }),
-            descriptionComponent: /* @__PURE__ */ t.jsx(H, { children: a.deleteApprovalRuleDesc }),
-            primaryButtonText: a.deleteTxt,
-            proceedButtonVariant: "danger",
-            secondaryButtonText: a.cancelBtnText,
-            action: L
-          }
-        ) : null
-      ]
-    }
-  );
-}, Y = r.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${(e) => n.wrapperGap.valuePx(e.windowSize)};
-  margin-bottom: ${(e) => e.isLastSection ? n.lastWrapperMarginBottom.valuePx(e.windowSize) : n.wrapperMarginBottom.valuePx(e.windowSize)};
-  .icons {
-    display: none;
-  }
-  &:hover {
-    .icons {
-      display: flex;
-    }
-    > div:last-of-type {
-      border-color: ${(e) => e.theme.colors.primary};
-    }
-  }
-`, Z = r(E)`
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  text-align: center;
-  width: ${(e) => n.sectionWidth.valuePx(e.windowSize)};
-  gap: ${o.sp2};
-`, V = r.div`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-`, ee = r.div`
-  width: ${o.sp8};
-  height: 2px;
-  background-color: ${(e) => e.theme.colors.primary};
-`, A = r.div`
-  width: 6px;
-  height: 6px;
-  border-radius: 3px;
-  background-color: ${(e) => e.theme.colors.primary};
-`, te = r.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: ${(e) => n.ruleWrapperPadding.valuePx(e.windowSize)};
-  gap: 10px;
-
-  width: ${(e) => n.sectionWidth.valuePx(e.windowSize)};
-  background-color: ${(e) => e.theme.colors.grey5};
-
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-
-  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${o.sp2};
-
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-  justify-content: center;
-  box-sizing: border-box;
-  position: relative;
-`, oe = r.ul`
-  ${(e) => `${B.stepper.style(e.windowSize)}`};
-  position: relative;
-  padding-left: ${o.sp6};
-  list-style: none;
-  box-sizing: initial;
-  margin: 0;
-  &::before {
-    display: inline-block;
-    content: "";
-    position: absolute;
-    top: ${(e) => n.stepperTop.valuePx(e.windowSize)};
-    left: ${(e) => n.stepperLeft.valuePx(e.windowSize)};
-    width: 10px;
-    height: ${(e) => e.isSingleStep ? "0%" : "100%"};
-    border-left: 2px solid ${(e) => e.theme.colors.grey1};
-  }
-`, re = r.li`
-  position: relative;
-  counter-increment: list;
-  min-height: ${(e) => n.stepperItemMinHeight.valuePx(e.windowSize)};
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding-left: ${(e) => n.stepperItemPaddingLeft.valuePx(e.windowSize)};
-  gap: ${o.sp1};
-
-  > div:last-of-type > span.operator:last-of-type {
-    visibility: hidden;
-  }
-
-  &:not(:last-child) {
-    padding-bottom: 20px;
-  }
-
-  &::before {
-    display: inline-block;
-    content: "";
-    position: absolute;
-    top: ${(e) => n.stepperItemTop.valuePx(e.windowSize)};
-    left: ${(e) => n.stepperItemLeft.valuePx(e.windowSize)};
-    height: ${(e) => e.isSingleStep ? "0%" : "100%"};
-    width: 10px;
-  }
-
-  &.stepperItem {
-    flex-wrap: wrap;
-    &::before {
-      border-left: 2px solid ${(e) => e.theme.colors.grey1};
-    }
-    &:last-child::before {
-      border-left: 2px solid ${(e) => e.theme.colors.grey5};
-    }
-
-    &::after {
-      content: counter(list);
-      position: absolute;
-      width: ${(e) => n.stepperWidthHeight.valuePx(e.windowSize)};
-      height: ${(e) => n.stepperWidthHeight.valuePx(e.windowSize)};
-      top: ${(e) => n.stepperContentTop.valuePx(e.windowSize)};
-      left: -${o.sp6};
-      ${O.standardMedium.css};
-      text-align: center;
-      color: ${(e) => e.theme.colors.grey1};
-      border: 2px solid ${(e) => e.theme.colors.grey1};
-      background-color: ${(e) => e.theme.colors.grey5};
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 50%;
-    }
-  }
-`, ie = r.span`
-  color: ${j.alertDark};
-`, se = r.span`
-  color: ${j.successDark};
-`, I = r.span`
-  color: ${(e) => e.theme.colors.primary};
-`, ne = r.div`
-  display: flex;
-  align-items: center;
-  gap: ${o.sp2};
-`, le = r.div`
-  display: flex;
-  gap: ${o.sp5};
-`, ae = r(G)`
-  width: ${o.sp3};
-  height: ${o.sp3};
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${j.important};
-  }
-`, pe = r(q)`
-  width: ${o.sp3};
-  height: ${o.sp3};
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, de = r(_)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  color: ${(e) => e.theme.colors.hero};
-`, R = r.span`
-  color: ${(e) => e.theme.colors.hero};
-`, C = r.div`
-  display: inherit;
-  gap: inherit;
-`, k = r.span`
-  ${(e) => `${B.amount.style(e.windowSize)}`};
-  color: ${(e) => e.theme.colors.primary};
-  word-break: break-word;
-`, $ = {
-  width: new i(343, 580, 726),
-  titleWidth: new i(343, 580, 780),
-  addApprovalGap: new i(6, s[2]),
-  subTitlePaddingTop: new i(12, s[3]),
-  subTitlePaddingBottom: new i(28, s[7]),
-  updatingApprovalRulesPaddingTop: new i(12, s[5])
-}, be = ({
-  approvalView: e,
-  onBackClick: f,
-  onEditRuleClick: c,
-  onDeleteRuleClick: v
-}) => {
-  const m = W(), { fetchState: x, deleteStatus: g } = e, l = S.getLocalizedStrings().commonSetUp.approval, h = S.getLocalizedStrings().spendManagement.billPay.billPayApproval, w = g.fetchState, u = e.listeningToPusherEvent;
-  return /* @__PURE__ */ t.jsxs(ce, { children: [
-    /* @__PURE__ */ t.jsx(
-      F,
-      {
-        title: l.approvalPageHeader,
-        style: { zIndex: 4 },
-        onBackClick: () => {
-          f();
-        },
-        source: "BillPayApprovalRulesPage"
-      }
-    ),
-    /* @__PURE__ */ t.jsxs(he, { children: [
-      /* @__PURE__ */ t.jsx(me, { windowSize: m, children: h.approvalPageSubTitle }),
-      x === "In-Progress" || x === "Not-Started" || w === "In-Progress" || u === !0 ? /* @__PURE__ */ t.jsxs(ue, { children: [
-        /* @__PURE__ */ t.jsx(
-          Q,
-          {
-            size: u === !0 ? "Large" : "ExtraLarge",
-            start: !0
-          }
-        ),
-        u === !0 && /* @__PURE__ */ t.jsx(xe, { windowSize: m, children: l.updatingApprovalRules.replace("__entity__", "bills") })
-      ] }) : x === "Completed" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-        e.allApprovalRules.map((a, y) => /* @__PURE__ */ t.jsx(
-          X,
-          {
-            showDeleteBtn: y !== 0,
-            approvalRule: a,
-            isLastSection: y === e.allApprovalRules.length - 1,
-            onEditRuleClick: c,
-            onDeleteRuleClick: v
-          },
-          a.approvalRuleId
-        )),
-        /* @__PURE__ */ t.jsxs(
-          ge,
-          {
-            windowSize: m,
-            onClick: () => {
-              c();
-            },
-            "data-testid": b("add-approval-rule-bill-pay"),
-            children: [
-              /* @__PURE__ */ t.jsx(we, {}),
-              /* @__PURE__ */ t.jsx($e, { children: l.addApprovalText })
-            ]
-          }
-        )
-      ] }) : null
-    ] })
-  ] });
-}, ce = r.div`
-  display: flex;
-  min-height: 100%;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey4};
-`, he = r.div`
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
-  align-items: center;
-`, ue = r.div`
-  display: flex;
-  width: 100%;
-  min-height: calc(100vh - 150px);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: ${o.sp3};
-  background-color: ${(e) => e.theme.colors.grey4};
-`, me = r(P)`
-  color: ${(e) => e.theme.colors.hero};
-  display: flex;
-  justify-content: center;
-  width: ${(e) => $.titleWidth.valuePx(e.windowSize)};
-  padding-top: ${(e) => $.subTitlePaddingTop.valuePx(e.windowSize)};
-  padding-bottom: ${(e) => $.subTitlePaddingBottom.valuePx(e.windowSize)};
-`, xe = r(P)`
-  color: ${(e) => e.theme.colors.hero};
-  display: flex;
-  justify-content: center;
-  margin-top: ${o.sp3};
-`, ge = r(P)`
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: ${o.sp3} ${o.sp4};
-  gap: ${(e) => $.addApprovalGap.valuePx(e.windowSize)};
-
-  width: ${(e) => $.width.valuePx(e.windowSize)};
-  height: ${o.sp8};
-
-  background: ${(e) => e.theme.colors.grey5};
-
-  border: 1px solid ${(e) => e.theme.colors.grey3};
-
-  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1}
-    ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${o.sp2};
-  box-sizing: border-box;
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-    div {
-      color: ${(e) => e.theme.colors.primary};
-    }
-    border-color: ${(e) => e.theme.colors.primary};
-  }
-  margin-bottom: ${o.sp6};
-`, we = r(J)`
-  width: ${o.sp3};
-  height: ${o.sp3};
-`, $e = r.div`
-  color: ${(e) => e.theme.colors.hero};
-`;
-export {
-  be as default
-};

package/dist/BillPayApprovalRulesPage-CorELL0d.cjs

@@ -1,241 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-DLVCFIC_.cjs"),s=require("@emotion/styled"),t=require("./index-OMYmSL-3.cjs"),T=require("react"),i={sectionWidth:new t.ResponsiveSized(343,580,726),ruleWrapperPadding:new t.ResponsiveSized(t.sp[3],t.sp[4]),wrapperGap:new t.ResponsiveSized(t.sp[4],t.sp[3]),wrapperMarginBottom:new t.ResponsiveSized(t.sp[6],t.sp[8]),lastWrapperMarginBottom:new t.ResponsiveSized(t.sp[5],t.sp[9]),stepperWidthHeight:new t.ResponsiveSized(20,t.sp[5]),stepperItemLeft:new t.ResponsiveSized(-29,-23),stepperItemTop:new t.ResponsiveSized(2,t.sp[0]),stepperItemPaddingLeft:new t.ResponsiveSized(t.sp[0],10),stepperItemMinHeight:new t.ResponsiveSized(22,28),stepperLeft:new t.ResponsiveSized(11,17),stepperTop:new t.ResponsiveSized(2,t.sp[0]),stepperContentTop:new t.ResponsiveSized(-1,-t.sp[1])},b={stepper:new t.ResponsiveSizedStyle("smallRegular","standardRegular"),amount:new t.ResponsiveSizedStyle("standardRegular","largeMedium")},I=({showDeleteBtn:e=!1,isLastSection:w=!1,approvalRule:a,onEditRuleClick:v,onDeleteRuleClick:x})=>{const[u,m]=T.useState(!1),r=t.useWindowSizeContext(),{range:d}=a.criteria[0],{steps:h,approvalRuleId:c}=a,n=t.appLocale.getLocalizedStrings().commonSetUp.approval,S=()=>{m(!0)},z={onOkClick:()=>{m(!1),x?.(c)},onCancelClick:()=>{m(!1)}};return o.jsxRuntimeExports.jsxs(A,{windowSize:r,isLastSection:w,children:[o.jsxRuntimeExports.jsxs(C,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(H,{children:[o.jsxRuntimeExports.jsxs(f,{windowSize:r,children:[n.from," ",t.amountToString("0,0",d.min)]}),o.jsxRuntimeExports.jsxs(k,{children:[o.jsxRuntimeExports.jsx($,{}),o.jsxRuntimeExports.jsx(W,{}),o.jsxRuntimeExports.jsx($,{})]}),d.max==null?o.jsxRuntimeExports.jsx(G,{}):o.jsxRuntimeExports.jsx(f,{windowSize:r,children:t.amountToString("0,0",{...d.min,amount:d.max.amount})})]}),o.jsxRuntimeExports.jsxs(U,{className:"icons",children:[e&&o.jsxRuntimeExports.jsx(_,{onClick:S,"data-testid":t.generateDataTestId("delete-approval-rule-bill-pay",a.approvalRuleId)}),o.jsxRuntimeExports.jsx(q,{onClick:()=>{v(c)},"data-testid":t.generateDataTestId("edit-approval-rule-bill-pay",a.approvalRuleId)})]})]}),o.jsxRuntimeExports.jsx(B,{windowSize:r,children:o.jsxRuntimeExports.jsx(L,{isSingleStep:h.length===1,windowSize:r,children:h.map((l,P)=>o.jsxRuntimeExports.jsxs(D,{isSingleStep:h.length===1,className:"stepperItem",windowSize:r,children:[l.action==="require_approval"?o.jsxRuntimeExports.jsx(M,{children:n.requireText}):o.jsxRuntimeExports.jsx(N,{children:n.notifyText}),l.nonUserActors!=null&&l.nonUserActors.filter(p=>p.subType!=null).map((p,E)=>o.jsxRuntimeExports.jsxs(R,{children:[o.jsxRuntimeExports.jsx(y,{children:p.subType!=null?n.nonUsers[p.subType].label:null}),l.operator!="is"?o.jsxRuntimeExports.jsx(j,{className:"operator",children:l.operator}):null]},`${p.subType}_${E}`)),l.actors.map(p=>o.jsxRuntimeExports.jsxs(R,{children:[o.jsxRuntimeExports.jsxs(y,{children:[p.firstName," ",p.lastName]}),l.operator!="is"?o.jsxRuntimeExports.jsx(j,{className:"operator",children:l.operator}):null]},p.userId))]},P))})}),u?o.jsxRuntimeExports.jsx(t.ConfirmationPopup,{titleComponent:o.jsxRuntimeExports.jsx(t.ConfirmationPopUpTitle,{children:n.deleteApprovalRuleTitle}),descriptionComponent:o.jsxRuntimeExports.jsx(t.ConfirmationPopUpDescription,{children:n.deleteApprovalRuleDesc}),primaryButtonText:n.deleteTxt,proceedButtonVariant:"danger",secondaryButtonText:n.cancelBtnText,action:z}):null]})},A=s.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${e=>i.wrapperGap.valuePx(e.windowSize)};
-  margin-bottom: ${e=>e.isLastSection?i.lastWrapperMarginBottom.valuePx(e.windowSize):i.wrapperMarginBottom.valuePx(e.windowSize)};
-  .icons {
-    display: none;
-  }
-  &:hover {
-    .icons {
-      display: flex;
-    }
-    > div:last-of-type {
-      border-color: ${e=>e.theme.colors.primary};
-    }
-  }
-`,C=s(t.LargeMedium)`
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  text-align: center;
-  width: ${e=>i.sectionWidth.valuePx(e.windowSize)};
-  gap: ${t.Space.sp2};
-`,k=s.div`
-  align-items: center;
-  display: flex;
-  justify-content: center;
-`,W=s.div`
-  width: ${t.Space.sp8};
-  height: 2px;
-  background-color: ${e=>e.theme.colors.primary};
-`,$=s.div`
-  width: 6px;
-  height: 6px;
-  border-radius: 3px;
-  background-color: ${e=>e.theme.colors.primary};
-`,B=s.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: ${e=>i.ruleWrapperPadding.valuePx(e.windowSize)};
-  gap: 10px;
-
-  width: ${e=>i.sectionWidth.valuePx(e.windowSize)};
-  background-color: ${e=>e.theme.colors.grey5};
-
-  border: 1px solid ${e=>e.theme.colors.grey3};
-
-  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${t.Space.sp2};
-
-  flex: none;
-  order: 1;
-  flex-grow: 0;
-  justify-content: center;
-  box-sizing: border-box;
-  position: relative;
-`,L=s.ul`
-  ${e=>`${b.stepper.style(e.windowSize)}`};
-  position: relative;
-  padding-left: ${t.Space.sp6};
-  list-style: none;
-  box-sizing: initial;
-  margin: 0;
-  &::before {
-    display: inline-block;
-    content: "";
-    position: absolute;
-    top: ${e=>i.stepperTop.valuePx(e.windowSize)};
-    left: ${e=>i.stepperLeft.valuePx(e.windowSize)};
-    width: 10px;
-    height: ${e=>e.isSingleStep?"0%":"100%"};
-    border-left: 2px solid ${e=>e.theme.colors.grey1};
-  }
-`,D=s.li`
-  position: relative;
-  counter-increment: list;
-  min-height: ${e=>i.stepperItemMinHeight.valuePx(e.windowSize)};
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding-left: ${e=>i.stepperItemPaddingLeft.valuePx(e.windowSize)};
-  gap: ${t.Space.sp1};
-
-  > div:last-of-type > span.operator:last-of-type {
-    visibility: hidden;
-  }
-
-  &:not(:last-child) {
-    padding-bottom: 20px;
-  }
-
-  &::before {
-    display: inline-block;
-    content: "";
-    position: absolute;
-    top: ${e=>i.stepperItemTop.valuePx(e.windowSize)};
-    left: ${e=>i.stepperItemLeft.valuePx(e.windowSize)};
-    height: ${e=>e.isSingleStep?"0%":"100%"};
-    width: 10px;
-  }
-
-  &.stepperItem {
-    flex-wrap: wrap;
-    &::before {
-      border-left: 2px solid ${e=>e.theme.colors.grey1};
-    }
-    &:last-child::before {
-      border-left: 2px solid ${e=>e.theme.colors.grey5};
-    }
-
-    &::after {
-      content: counter(list);
-      position: absolute;
-      width: ${e=>i.stepperWidthHeight.valuePx(e.windowSize)};
-      height: ${e=>i.stepperWidthHeight.valuePx(e.windowSize)};
-      top: ${e=>i.stepperContentTop.valuePx(e.windowSize)};
-      left: -${t.Space.sp6};
-      ${t.textStyles.standardMedium.css};
-      text-align: center;
-      color: ${e=>e.theme.colors.grey1};
-      border: 2px solid ${e=>e.theme.colors.grey1};
-      background-color: ${e=>e.theme.colors.grey5};
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 50%;
-    }
-  }
-`,M=s.span`
-  color: ${t.Colors.alertDark};
-`,N=s.span`
-  color: ${t.Colors.successDark};
-`,y=s.span`
-  color: ${e=>e.theme.colors.primary};
-`,H=s.div`
-  display: flex;
-  align-items: center;
-  gap: ${t.Space.sp2};
-`,U=s.div`
-  display: flex;
-  gap: ${t.Space.sp5};
-`,_=s(t.SvgDelete)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  cursor: pointer;
-  color: ${e=>e.theme.colors.hero};
-  &:hover {
-    color: ${t.Colors.important};
-  }
-`,q=s(t.SvgEdit)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-  cursor: pointer;
-  color: ${e=>e.theme.colors.hero};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-  }
-`,G=s(t.SvgInfinite)`
-  width: ${t.Space.sp4};
-  height: ${t.Space.sp4};
-  color: ${e=>e.theme.colors.hero};
-`,j=s.span`
-  color: ${e=>e.theme.colors.hero};
-`,R=s.div`
-  display: inherit;
-  gap: inherit;
-`,f=s.span`
-  ${e=>`${b.amount.style(e.windowSize)}`};
-  color: ${e=>e.theme.colors.primary};
-  word-break: break-word;
-`,g={width:new t.ResponsiveSized(343,580,726),titleWidth:new t.ResponsiveSized(343,580,780),addApprovalGap:new t.ResponsiveSized(6,t.sp[2]),subTitlePaddingTop:new t.ResponsiveSized(12,t.sp[3]),subTitlePaddingBottom:new t.ResponsiveSized(28,t.sp[7]),updatingApprovalRulesPaddingTop:new t.ResponsiveSized(12,t.sp[5])},O=({approvalView:e,onBackClick:w,onEditRuleClick:a,onDeleteRuleClick:v})=>{const x=t.useWindowSizeContext(),{fetchState:u,deleteStatus:m}=e,r=t.appLocale.getLocalizedStrings().commonSetUp.approval,d=t.appLocale.getLocalizedStrings().spendManagement.billPay.billPayApproval,h=m.fetchState,c=e.listeningToPusherEvent;return o.jsxRuntimeExports.jsxs(F,{children:[o.jsxRuntimeExports.jsx(t.NavBar,{title:r.approvalPageHeader,style:{zIndex:4},onBackClick:()=>{w()},source:"BillPayApprovalRulesPage"}),o.jsxRuntimeExports.jsxs(J,{children:[o.jsxRuntimeExports.jsx(Q,{windowSize:x,children:d.approvalPageSubTitle}),u==="In-Progress"||u==="Not-Started"||h==="In-Progress"||c===!0?o.jsxRuntimeExports.jsxs(K,{children:[o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:c===!0?"Large":"ExtraLarge",start:!0}),c===!0&&o.jsxRuntimeExports.jsx(X,{windowSize:x,children:r.updatingApprovalRules.replace("__entity__","bills")})]}):u==="Completed"?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[e.allApprovalRules.map((n,S)=>o.jsxRuntimeExports.jsx(I,{showDeleteBtn:S!==0,approvalRule:n,isLastSection:S===e.allApprovalRules.length-1,onEditRuleClick:a,onDeleteRuleClick:v},n.approvalRuleId)),o.jsxRuntimeExports.jsxs(Y,{windowSize:x,onClick:()=>{a()},"data-testid":t.generateDataTestId("add-approval-rule-bill-pay"),children:[o.jsxRuntimeExports.jsx(Z,{}),o.jsxRuntimeExports.jsx(V,{children:r.addApprovalText})]})]}):null]})]})},F=s.div`
-  display: flex;
-  min-height: 100%;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${e=>e.theme.colors.grey4};
-`,J=s.div`
-  display: flex;
-  justify-content: flex-start;
-  height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
-  align-items: center;
-`,K=s.div`
-  display: flex;
-  width: 100%;
-  min-height: calc(100vh - 150px);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: ${t.Space.sp3};
-  background-color: ${e=>e.theme.colors.grey4};
-`,Q=s(t.StandardRegular)`
-  color: ${e=>e.theme.colors.hero};
-  display: flex;
-  justify-content: center;
-  width: ${e=>g.titleWidth.valuePx(e.windowSize)};
-  padding-top: ${e=>g.subTitlePaddingTop.valuePx(e.windowSize)};
-  padding-bottom: ${e=>g.subTitlePaddingBottom.valuePx(e.windowSize)};
-`,X=s(t.StandardRegular)`
-  color: ${e=>e.theme.colors.hero};
-  display: flex;
-  justify-content: center;
-  margin-top: ${t.Space.sp3};
-`,Y=s(t.StandardRegular)`
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: ${t.Space.sp3} ${t.Space.sp4};
-  gap: ${e=>g.addApprovalGap.valuePx(e.windowSize)};
-
-  width: ${e=>g.width.valuePx(e.windowSize)};
-  height: ${t.Space.sp8};
-
-  background: ${e=>e.theme.colors.grey5};
-
-  border: 1px solid ${e=>e.theme.colors.grey3};
-
-  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1}
-    ${e.theme.colors.dropShadowNormal}`};
-  border-radius: ${t.Space.sp2};
-  box-sizing: border-box;
-  color: ${e=>e.theme.colors.hero};
-  &:hover {
-    color: ${e=>e.theme.colors.primary};
-    div {
-      color: ${e=>e.theme.colors.primary};
-    }
-    border-color: ${e=>e.theme.colors.primary};
-  }
-  margin-bottom: ${t.Space.sp6};
-`,Z=s(t.SvgAddRound)`
-  width: ${t.Space.sp3};
-  height: ${t.Space.sp3};
-`,V=s.div`
-  color: ${e=>e.theme.colors.hero};
-`;exports.default=O;