@zeniai/web-components 3.16.66 → 3.16.67

package/dist/ScheduleSequenceTable-mhoICWXH.js

@@ -0,0 +1,1261 @@
+import { d as Q, m as X, u as ee, j as t, C as pe, e as xe, b as J, A as fe, V as ye } from "./vendor-.pnpm-DtFedGku.js";
+import i from "@emotion/styled";
+import { u as I, at as oe, C as S, S as o, t as z, a as W, fL as we, ap as $e, p as D, aB as be, R as $, D as u, aL as ne, b9 as Se, aN as je, aP as ve, y as Ce, aO as ke, jW as ie, jX as re, av as se, jY as Te, gM as Me, hu as De, aj as Oe, jZ as E, fQ as Le, a5 as ze, j_ as Re, j$ as U, w as Ie, eF as Ee, k0 as Be, jO as He, k1 as Ae, k2 as Fe, k3 as Pe } from "./index-BKbfwHLi.js";
+import { useState as R, useCallback as We, useRef as Ne, useEffect as qe } from "react";
+import { css as F } from "@emotion/react";
+import { toScheduleDaysOfMonth as Ye, dateNow as G } from "@zeniai/client-epic-state";
+const N = (e, n) => `${e}.${n}`, {
+  formElements: { dayOfMonthSelector: T },
+  common: le
+} = W.getLocalizedStrings();
+function _e({
+  defaultValue: e,
+  name: n,
+  placeholder: l,
+  alignLeft: r = !1,
+  style: p,
+  isDisabled: s,
+  registerOptions: c,
+  onSaveClick: d,
+  onCancelClick: w
+}) {
+  const [f, h] = R(!1), {
+    control: m,
+    formState: { errors: x },
+    setValue: j
+  } = Q(), C = () => {
+    v || (d(), h(!1));
+  }, y = () => {
+    w(), h(!1);
+  }, v = X(x, n), g = I(), a = ee();
+  return /* @__PURE__ */ t.jsx(
+    pe,
+    {
+      onClickAway: () => {
+        h(!1);
+      },
+      children: /* @__PURE__ */ t.jsx(
+        et,
+        {
+          style: p,
+          isDisabled: s != null,
+          windowSize: g,
+          onClick: () => {
+            !f && s == null && h(!0);
+          },
+          children: /* @__PURE__ */ t.jsx(
+            xe,
+            {
+              name: N(n, "dayOfMonth"),
+              control: m,
+              rules: {
+                ...c
+              },
+              render: () => /* @__PURE__ */ t.jsxs(Ue, { children: [
+                /* @__PURE__ */ t.jsx(
+                  Ve,
+                  {
+                    placeholder: l,
+                    defaultValue: e,
+                    isDisabled: s
+                  }
+                ),
+                f ? /* @__PURE__ */ t.jsxs(Ke, { alignLeft: r === !0, children: [
+                  /* @__PURE__ */ t.jsx(nt, {}),
+                  /* @__PURE__ */ t.jsxs(ae, { isSelected: e.type === "day", children: [
+                    /* @__PURE__ */ t.jsxs(
+                      ot,
+                      {
+                        isError: e.type === "day" && v,
+                        children: [
+                          /* @__PURE__ */ t.jsx(
+                            oe,
+                            {
+                              label: {
+                                label: T.pickDate
+                              },
+                              radioField: {
+                                id: "day",
+                                name: N(n, "type"),
+                                value: "day",
+                                radioSize: "small",
+                                checked: e.type === "day"
+                              },
+                              style: {
+                                ...z.smallRegular.cssObject,
+                                padding: `${o.sp3} ${o.sp0}`,
+                                width: "fit-content",
+                                marginLeft: o.sp3,
+                                minWidth: "35%"
+                              },
+                              labelStyle: {
+                                color: e.type === "day" && v ? S.important : "inherit"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ t.jsx(
+                            we,
+                            {
+                              name: N(n, "dayOfMonth"),
+                              type: "number",
+                              placeholder: T.placeholder,
+                              disableCopyPaste: !0,
+                              autoTrim: "trim",
+                              onKeyDown: (b) => {
+                                b.key !== "Backspace" && isNaN(parseInt(b.key)) && b.preventDefault();
+                              },
+                              defaultValue: e.dayOfMonth != null && !isNaN(e.dayOfMonth) ? e.dayOfMonth : 0,
+                              registerOptions: {
+                                min: 1,
+                                max: 28
+                              },
+                              outerDivStyle: {
+                                width: "fit-content",
+                                marginLeft: o.sp1,
+                                marginRight: o.sp1
+                              },
+                              style: {
+                                border: `1px solid ${e.type === "day" && v ? S.important : a.colors.grey2}`,
+                                borderRadius: o.sp1,
+                                ...z.smallRegular.cssObject,
+                                padding: o.sp2,
+                                maxWidth: "35px",
+                                boxSizing: "border-box"
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ t.jsx(Xe, { isSelected: e.type === "day", children: T.ofEveryMonth })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ t.jsx(
+                      Je,
+                      {
+                        defaultValue: e.dayOfMonth,
+                        onClick: (b) => {
+                          j(`${n}.dayOfMonth`, b), j(`${n}.type`, "day");
+                        }
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ t.jsx(it, {}),
+                  /* @__PURE__ */ t.jsx(
+                    ae,
+                    {
+                      isSelected: e.type === "lastDayOfMonth",
+                      children: /* @__PURE__ */ t.jsx(
+                        oe,
+                        {
+                          label: {
+                            label: T.lastDayOfMonth
+                          },
+                          radioField: {
+                            id: "lastDayOfMonth",
+                            name: N(n, "type"),
+                            value: "lastDayOfMonth",
+                            radioSize: "small",
+                            checked: e.type === "lastDayOfMonth"
+                          },
+                          style: {
+                            ...z.smallRegular.cssObject,
+                            padding: `${o.sp3} ${o.sp0}`,
+                            width: "fit-content",
+                            marginLeft: o.sp3
+                          },
+                          labelStyle: {
+                            color: e.type === "lastDayOfMonth" && v ? S.important : "inherit"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(
+                    $e,
+                    {
+                      primaryBtn: {
+                        label: le.footer.save,
+                        onClick: C,
+                        isDisabled: Ge(e),
+                        type: "button",
+                        style: { minWidth: "83px" }
+                      },
+                      cancelBtn: {
+                        label: le.footer.cancel,
+                        onClick: y,
+                        style: { minWidth: "83px" }
+                      },
+                      style: { position: "unset", backgroundColor: "transparent" }
+                    }
+                  )
+                ] }) : null
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Ve({
+  placeholder: e,
+  defaultValue: n,
+  isDisabled: l
+}) {
+  return /* @__PURE__ */ t.jsxs(Ze, { isDisabled: l != null, children: [
+    n?.type == null ? /* @__PURE__ */ t.jsx(Qe, { children: e }) : null,
+    n?.type == "day" && n.dayOfMonth != null ? /* @__PURE__ */ t.jsxs(ce, { children: [
+      /* @__PURE__ */ t.jsx(q, { children: T.daysOfMonth[`${n.dayOfMonth}`] }),
+      /* @__PURE__ */ t.jsx(q, { children: T.ofEveryMonth })
+    ] }) : null,
+    n?.type === "lastDayOfMonth" ? /* @__PURE__ */ t.jsxs(ce, { children: [
+      /* @__PURE__ */ t.jsx(q, { children: T.daysOfMonth.lastDayOfMonth }),
+      /* @__PURE__ */ t.jsx(q, { children: T.ofEveryMonth })
+    ] }) : null
+  ] });
+}
+function Je({
+  defaultValue: e,
+  onClick: n
+}) {
+  return /* @__PURE__ */ t.jsxs(tt, { children: [
+    /* @__PURE__ */ t.jsx(Y, { children: [...Array(7).keys()].map((l) => {
+      const r = l + 1;
+      return /* @__PURE__ */ t.jsx(
+        _,
+        {
+          isSelected: r === e,
+          onClick: () => n(Ye(r)),
+          children: r
+        },
+        r
+      );
+    }) }),
+    /* @__PURE__ */ t.jsx(Y, { children: [...Array(7).keys()].map((l) => {
+      const r = l + 8;
+      return /* @__PURE__ */ t.jsx(
+        _,
+        {
+          isSelected: r === e,
+          onClick: () => n(r),
+          children: r
+        },
+        r
+      );
+    }) }),
+    /* @__PURE__ */ t.jsx(Y, { children: [...Array(7).keys()].map((l) => {
+      const r = l + 15;
+      return /* @__PURE__ */ t.jsx(
+        _,
+        {
+          isSelected: r === e,
+          onClick: () => n(r),
+          children: r
+        },
+        r
+      );
+    }) }),
+    /* @__PURE__ */ t.jsx(Y, { children: [...Array(7).keys()].map((l) => {
+      const r = l + 22;
+      return /* @__PURE__ */ t.jsx(
+        _,
+        {
+          isSelected: r === e,
+          onClick: () => n(r),
+          children: r
+        },
+        r
+      );
+    }) })
+  ] });
+}
+const Ge = (e) => {
+  switch (e.type) {
+    case "day":
+      return e.dayOfMonth == null;
+    case "lastDayOfMonth":
+      return !1;
+    default:
+      return !0;
+  }
+}, Ue = i.div`
+  position: relative;
+`, Ze = i.div`
+  display: flex;
+  padding-right: ${o.sp3};
+`, ae = i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.isSelected === !0 ? e.theme.colors.background : e.theme.colors.grey5};
+  color: ${(e) => e.isSelected === !0 ? e.theme.colors.primary : e.theme.colors.hero};
+`, Ke = i.div`
+  position: absolute;
+  z-index: 9;
+  cursor: pointer;
+  top: ${o.sp5};
+  ${(e) => e.alignLeft ? F`
+          left: 0;
+        ` : F`
+          right: 0;
+        `};
+  color: ${(e) => e.theme.colors.primary};
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${o.sp2};
+  display: flex;
+  flex-direction: column;
+  width: 270px;
+`, Qe = i(D)`
+  color: ${(e) => e.theme.colors.grey1};
+  margin-right: ${o.sp1};
+`, q = i(D)`
+  color: ${(e) => e.theme.colors.primary};
+`, Xe = i(D)`
+  color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
+`, ce = i.div`
+  display: flex;
+  gap: ${o.sp1};
+`, et = i.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  position: relative;
+  cursor: ${(e) => e.isDisabled ? "default" : "pointer"};
+  border-radius: ${o.sp1};
+  background-color: ${(e) => e.theme.colors.grey5};
+  color: ${(e) => e.theme.colors.primary};
+  &:hover {
+    background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+  }
+`, tt = i.div`
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  margin: ${o.sp0} ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, Y = i.div`
+  display: flex;
+`, _ = i(D)`
+  padding: ${o.sp1} ${o.sp2};
+  max-width: ${o.sp5};
+  min-width: 18px;
+  flex-grow: 1;
+  text-align: end;
+  border-radius: ${o.sp1};
+  ${(e) => e.isSelected ? F`
+          color: ${e.theme.colors.background};
+          background-color: ${e.theme.colors.primary};
+        ` : null}
+`, ot = i.div`
+  display: flex;
+  align-items: center;
+  background-color: ${(e) => e.isError ? S.importantLight : "transparent"};
+  &:hover {
+    div {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+  input {
+    :checked {
+      background-color: ${(e) => e.isError ? S.important : e.theme.colors.primary};
+      border-color: ${(e) => e.isError ? S.important : e.theme.colors.primary};
+    }
+  }
+`, nt = i.div`
+  width: 100%;
+  margin-top: ${o.sp1};
+  height: 1px;
+`, it = i.div`
+  width: 100%;
+  height: 1px;
+  background-color: ${(e) => e.theme.colors.grey3};
+`, M = {
+  height: new $(u[6], u[6]),
+  controlHeight: new $(u[6], u[6]),
+  paddingTopBottom: new $(u[2], u[2]),
+  marginRight: new $(u[2], u[2]),
+  labelMarginLeft: new $(u[3], u[4]),
+  labelMarginRight: new $(u[3], u[4]),
+  labelMarginTop: new $(u[2], u[2])
+};
+function oo({
+  label: e,
+  dayOfMonthField: n,
+  isDisabled: l,
+  style: r
+}) {
+  const p = I(), {
+    formState: { errors: s }
+  } = Q(), c = X(s, n.name);
+  return /* @__PURE__ */ t.jsxs(
+    rt,
+    {
+      size: p,
+      style: r,
+      isDisabled: l != null,
+      isError: c,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          be,
+          {
+            isDisabled: l,
+            label: e.label,
+            htmlFor: n.name,
+            style: {
+              marginLeft: M.labelMarginLeft.value(p),
+              marginRight: M.labelMarginRight.value(p),
+              marginTop: M.labelMarginTop.value(p),
+              width: e.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ t.jsx(st, { labelWidth: e.width, children: /* @__PURE__ */ t.jsx(
+          _e,
+          {
+            ...n,
+            isDisabled: l,
+            style: {
+              display: "flex",
+              flexGrow: 1,
+              width: "100%",
+              height: M.controlHeight.value(p)
+            }
+          }
+        ) })
+      ]
+    }
+  );
+}
+const rt = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-height: ${(e) => M.height.valuePx(e.size)};
+  padding-right: ${(e) => M.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => M.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => M.paddingTopBottom.valuePx(e.size)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .react-datepicker-wrapper {
+      background-color: ${(e) => e.isError ? S.importantLight : e.theme.colors.background};
+    }
+  }
+
+  .react-datepicker-wrapper {
+    background-color: ${(e) => e.isError ? S.importantLight : e.theme.colors.grey5};
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+    .react-datepicker-wrapper {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? S.importantLight : e.theme.colors.background};
+    }
+  }
+`, st = i.div`
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
+  align-items: flex-end;
+  flex-grow: 1;
+`, lt = i.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`, at = i(Ce)`
+  color: ${(e) => e.theme.colors.primary};
+  margin: ${o.sp3} ${o.sp1};
+`, de = i.div`
+  margin-bottom: ${o.sp2};
+`, {
+  common: B,
+  jeSchedules: { scheduleDetails: k }
+} = W.getLocalizedStrings();
+function no({
+  isUpdating: e,
+  status: n,
+  jeScheduleId: l,
+  allowCreateSchedule: r,
+  onDelete: p,
+  onMarkAsComplete: s,
+  onCreateSchedule: c
+}) {
+  const [d, w] = R(!1), f = {
+    onOkClick: () => {
+      p();
+    },
+    onCancelClick: () => {
+      w(!1);
+    }
+  }, h = () => null, m = [];
+  return (n === "new" || n == "draft") && m.push({
+    label: k.scheduleDetailsSection.markAsCompleted,
+    value: k.scheduleDetailsSection.markAsCompleted
+  }), l != null && n !== "draft" && (n === "marked_as_completed" ? r === !1 && m.push({
+    label: k.scheduleDetailsSection.createSchedule,
+    value: k.scheduleDetailsSection.createSchedule
+  }) : m.push({
+    label: B.delete,
+    value: B.delete
+  })), /* @__PURE__ */ t.jsxs(lt, { children: [
+    /* @__PURE__ */ t.jsx(at, { children: k.scheduleDetailsSection.header }),
+    /* @__PURE__ */ t.jsx(ne, { controller: m.length > 0, children: /* @__PURE__ */ t.jsx(
+      Se,
+      {
+        moreIconType: "plain",
+        options: m,
+        customStyleConfig: {
+          valueContainer: () => ({
+            ".more-icon": {
+              width: o.sp3,
+              height: o.sp3
+            }
+          })
+        },
+        menuPlacement: "top",
+        onOptionSelection: (x) => {
+          x === B.delete && w(!0), x === k.scheduleDetailsSection.markAsCompleted && s(), x === k.scheduleDetailsSection.createSchedule && c();
+        },
+        valueToIcon: h
+      }
+    ) }),
+    /* @__PURE__ */ t.jsx(ne, { controller: d === !0, children: /* @__PURE__ */ t.jsx(
+      je,
+      {
+        titleComponent: /* @__PURE__ */ t.jsx(ve, { children: k.scheduleDetailsSection.confirmDeletionTitle }),
+        descriptionComponent: /* @__PURE__ */ t.jsx(ct, {}),
+        action: f,
+        primaryButtonText: B.yes,
+        proceedButtonVariant: "danger",
+        secondaryButtonText: B.no,
+        isLoading: e
+      }
+    ) })
+  ] });
+}
+function ct() {
+  return /* @__PURE__ */ t.jsxs(ke, { children: [
+    /* @__PURE__ */ t.jsx(de, { children: k.scheduleDetailsSection.confirmDeletionDescription }),
+    /* @__PURE__ */ t.jsx(de, { children: k.scheduleDetailsSection.confirmDeletionDescriptionNote })
+  ] });
+}
+const P = {
+  containerPadding: new $(u[3], u[8]),
+  containerMarginTop: new $(u[3], u[4]),
+  containerMarginBottom: new $(u[4], u[5]),
+  transactionLabelMarginTop: new $(u[2], u[0]),
+  transactionTitleContainerWidth: new $(187, 480)
+}, Z = {
+  transactionLabel: new se("standardMedium", "largeMedium"),
+  transactionTitle: new se("h6SemiBold", "h5SemiBold")
+}, dt = i.div``, he = i.div`
+  margin: ${o.sp0} ${o.sp3} ${o.sp0} ${o.sp0};
+  max-width: ${(e) => P.transactionTitleContainerWidth.valuePx(e.windowSize)};
+`, ht = i(Oe)`
+  color: ${S.neutralGrey5Light};
+  margin-top: ${(e) => P.transactionLabelMarginTop.valuePx(e.windowSize)};
+  ${(e) => `${Z.transactionLabel.style(e.windowSize)}`};
+  background-color: ${(e) => e.labelColor.toString()};
+  border-radius: ${o.sp1};
+  padding: ${o.sp0} ${o.sp2} ${o.sp0} ${o.sp2};
+`, ut = i.div`
+  display: flex;
+  flex-direction: column;
+`, pt = i.div`
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  gap: ${o.sp3};
+`, mt = i.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  box-shadow: ${(e) => `${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  padding: ${(e) => `${o.sp0} ${P.containerPadding.valuePx(e.windowSize)}`};
+`, gt = i.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-top: ${(e) => P.containerMarginTop.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => P.containerMarginBottom.valuePx(e.windowSize)};
+`, xt = i(D)`
+  color: ${(e) => e.theme.colors.hero};
+  height: ${o.sp4};
+`, ft = i(D)`
+  color: ${(e) => e.theme.colors.primary};
+  word-break: break-all;
+  text-align: right;
+`, yt = i.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: ${o.sp3};
+`, wt = i.div`
+  margin-top: ${o.sp3};
+  width: 100%;
+`, $t = i.div`
+  display: flex;
+  flex-direction: column;
+  margin: ${o.sp3} ${o.sp0} ${o.sp6} ${o.sp0};
+`, bt = i.div`
+  display: flex;
+  width: 100%;
+  height: 1px;
+  background-color: ${(e) => e.theme.colors.grey3};
+`, St = ({ title: e, value: n }) => /* @__PURE__ */ t.jsxs(yt, { children: [
+  /* @__PURE__ */ t.jsx(xt, { children: e }),
+  /* @__PURE__ */ t.jsx(ft, { children: n || me })
+] }), {
+  jeSchedules: {
+    scheduleDetails: { scheduleTransactionsHeader: L },
+    scheduleAccruedDetails: {
+      placeholders: { selectVendor: jt }
+    }
+  },
+  dateFormat: {
+    visual: { MMMDCommaYYYYformat: vt }
+  },
+  common: {
+    strings: { hyphen: me }
+  }
+} = W.getLocalizedStrings();
+function io({
+  transaction: e,
+  vendorField: n,
+  vendorLoadOptions: l,
+  errors: r,
+  vendorFieldName: p,
+  vendor: s
+}) {
+  const c = I(), d = ee(), [w, f] = R(!1), h = Ct(e), m = r?.includes("vendor_deleted"), [x, j] = R(
+    r?.includes("vendor_deleted")
+  ), C = n?.defaultOptions.find(
+    (y) => y.value === n?.selectedOption
+  );
+  return /* @__PURE__ */ t.jsxs(mt, { windowSize: c, children: [
+    /* @__PURE__ */ t.jsxs(gt, { windowSize: c, children: [
+      /* @__PURE__ */ t.jsxs(pt, { windowSize: c, children: [
+        /* @__PURE__ */ t.jsx(t.Fragment, { children: m === !0 ? /* @__PURE__ */ t.jsx(t.Fragment, { children: x === !0 ? /* @__PURE__ */ t.jsx(
+          ie,
+          {
+            text: L.addVendor,
+            handleClick: () => {
+              j(!1), f(!0);
+            }
+          }
+        ) : /* @__PURE__ */ t.jsx(t.Fragment, { children: w === !1 ? /* @__PURE__ */ t.jsx(
+          dt,
+          {
+            onClick: () => f(!0),
+            children: C != null ? /* @__PURE__ */ t.jsx(
+              he,
+              {
+                windowSize: c,
+                children: /* @__PURE__ */ t.jsx(
+                  re,
+                  {
+                    itemTextStyle: {
+                      ...Z.transactionTitle.styleObject(
+                        c
+                      ),
+                      lineHeight: "unset",
+                      color: d.colors.primary,
+                      cursor: "default"
+                    },
+                    text: C.label
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ t.jsx(
+              ie,
+              {
+                text: L.addVendor,
+                handleClick: () => {
+                  j(!1), f(!0);
+                }
+              }
+            )
+          }
+        ) : /* @__PURE__ */ t.jsx(
+          Te,
+          {
+            autoFocus: !0,
+            menuIsOpen: w,
+            name: p ?? "",
+            placeholder: jt,
+            valueToId: (y) => y,
+            defaultValue: {
+              selectedOption: n?.selectedOption,
+              defaultOptions: n?.defaultOptions ?? []
+            },
+            onMenuClose: () => f(!1),
+            customStyleConfig: {
+              valueContainer: () => ({
+                justifyContent: "flex-start"
+              })
+            },
+            style: { width: 250 },
+            registerOptions: {
+              required: !0,
+              validate: (y) => !!y.selectedOption
+            },
+            loadOptions: l
+          }
+        ) }) }) : /* @__PURE__ */ t.jsx(he, { windowSize: c, children: /* @__PURE__ */ t.jsx(
+          re,
+          {
+            itemTextStyle: {
+              ...Z.transactionTitle.styleObject(c),
+              lineHeight: "unset",
+              color: d.colors.primary
+            },
+            text: s.name
+          }
+        ) }) }),
+        /* @__PURE__ */ t.jsx(
+          ht,
+          {
+            windowSize: c,
+            labelColor: Me(
+              e.type,
+              d
+            ),
+            children: e.typeName ?? e.type
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t.jsx(ut, { children: /* @__PURE__ */ t.jsx(
+        De,
+        {
+          amount: e.amount,
+          integerStyles: z.h6SemiBold.cssObject,
+          decimalStyles: z.standardMedium.cssObject
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ t.jsx(bt, {}),
+    /* @__PURE__ */ t.jsx($t, { children: h.map((y, v) => /* @__PURE__ */ t.jsx(wt, { children: /* @__PURE__ */ t.jsx(St, { title: y.title, value: y.value }) }, v)) })
+  ] });
+}
+function Ct(e) {
+  const n = [];
+  return n.push({
+    title: L.transactionDate,
+    value: e.date.format(vt)
+  }), n.push({
+    title: L.category,
+    value: e.account.accountName
+  }), n.push({
+    title: L.class,
+    value: e.classBase?.className ?? me
+  }), n.push({
+    title: L.memo,
+    value: e.memo
+  }), n;
+}
+const ue = (e, n) => `${e}.${n}`, kt = {
+  webkitLineClamp: new $(2, 2, 1, 1, 1)
+}, Tt = W.getLocalizedStrings(), {
+  dateFormat: Mt,
+  jeSchedules: { scheduleDetails: K }
+} = Tt, Dt = ({
+  sectionId: e,
+  rowId: n,
+  isDisabled: l,
+  hideMemoField: r,
+  minMaxValuesForAmount: p,
+  isAmountEditable: s,
+  scheduleJournalEntry: c,
+  localData: d,
+  onJELinkClick: w,
+  onViewLinkedJE: f
+}) => {
+  const h = I(), m = ee(), [x, j] = R(!1), {
+    formState: { errors: C }
+  } = Q(), y = We(() => {
+    w(n);
+  }, [w, n]), v = c?.jeScheduleId != null && c.status.code === "unknown", g = s === !1 ? "disabled" : l, a = c?.jeScheduleId != null && c.status.code === "posted" && d.jeLink.transactionDetailID != null, b = () => {
+    a && d.jeLink.transactionDetailID != null && f(d.jeLink.transactionDetailID, n);
+  }, V = ue(e, "amount"), O = X(C, V);
+  return /* @__PURE__ */ t.jsxs(
+    zt,
+    {
+      windowSize: h,
+      isRowEditable: s,
+      isClickable: a || s,
+      onClick: b,
+      children: [
+        r ? null : /* @__PURE__ */ t.jsx(
+          H,
+          {
+            windowSize: h,
+            widthSize: E[0].width,
+            children: /* @__PURE__ */ t.jsx(
+              A,
+              {
+                windowSize: h,
+                isClickable: a || s,
+                title: d.memo,
+                children: d.memo
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          H,
+          {
+            windowSize: h,
+            widthSize: E[1].width,
+            children: /* @__PURE__ */ t.jsx(
+              A,
+              {
+                windowSize: h,
+                isClickable: a || s,
+                children: d.postingDate.format(Mt.visual.MMMDCommaYYYYformat)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          H,
+          {
+            windowSize: h,
+            widthSize: E[2].width,
+            children: /* @__PURE__ */ t.jsx(pe, { onClickAway: () => j(!1), children: /* @__PURE__ */ t.jsx(
+              A,
+              {
+                windowSize: h,
+                onClick: () => {
+                  (a || s) && j(!0);
+                },
+                isClickable: a || s,
+                children: /* @__PURE__ */ t.jsx(
+                  Le,
+                  {
+                    style: {
+                      height: o.sp6,
+                      textAlign: "left"
+                    },
+                    inputStyle: {
+                      textAlign: "left",
+                      paddingRight: o.sp3,
+                      color: O === !0 ? S.important : x === !1 ? m.colors.hero : m.colors.primary
+                    },
+                    type: "number",
+                    autoFocus: !1,
+                    focus: x,
+                    name: ue(e, "amount"),
+                    placeholder: K.sequenceSchedule.sequenceData.amountPlaceholder,
+                    autoComplete: "new-password",
+                    defaultValue: d.amount.amount,
+                    returnValueType: "floatValue",
+                    allowEmptyFormatting: !0,
+                    hoverBgColor: l == null ? m.colors.background : m.colors.grey5,
+                    bgColor: O === !0 ? S.importantLight : x === !1 ? m.colors.grey5 : m.colors.background,
+                    prefix: d.amount.currencySymbol,
+                    decimalScale: 2,
+                    allowNegative: !0,
+                    isNumericString: !1,
+                    isFieldError: O,
+                    registerOptions: {
+                      required: g == null,
+                      min: p.min,
+                      max: p.max
+                    },
+                    isDisabled: g,
+                    thousandsGroupStyle: "thousand",
+                    thousandSeparator: !0
+                  }
+                )
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          H,
+          {
+            windowSize: h,
+            widthSize: E[3].width,
+            children: /* @__PURE__ */ t.jsx(
+              A,
+              {
+                windowSize: h,
+                isClickable: a || s,
+                children: ze("0,0.00", d.runningBalance)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          H,
+          {
+            windowSize: h,
+            widthSize: E[4].width,
+            children: /* @__PURE__ */ t.jsx(
+              A,
+              {
+                windowSize: h,
+                isLastItem: !0,
+                isClickable: a || s,
+                children: /* @__PURE__ */ t.jsxs(Ht, { children: [
+                  /* @__PURE__ */ t.jsx(
+                    Re,
+                    {
+                      textColor: Lt(
+                        d.postingStatus,
+                        m
+                      ),
+                      onClick: a || s ? b : void 0,
+                      text: K.sequenceSchedule.postingStatus[d.postingStatus]
+                    }
+                  ),
+                  v ? /* @__PURE__ */ t.jsx(Bt, { onClick: a ? b : y, children: /* @__PURE__ */ t.jsx(
+                    Ot,
+                    {
+                      jeLink: d.jeLink,
+                      isJElinkAllowed: v
+                    }
+                  ) }) : null
+                ] })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+function Ot({
+  jeLink: e,
+  isJElinkAllowed: n
+}) {
+  const [l, r] = R(!1);
+  return e.type === "linked" && n ? /* @__PURE__ */ t.jsx(t.Fragment, {}) : n && (e.type === "unknown" || e.type === "recommended") ? /* @__PURE__ */ t.jsxs(
+    Rt,
+    {
+      onMouseOver: () => r(!0),
+      onMouseLeave: () => r(!1),
+      children: [
+        /* @__PURE__ */ t.jsx(At, {}),
+        l ? /* @__PURE__ */ t.jsxs(It, { children: [
+          e.type === "recommended" ? /* @__PURE__ */ t.jsx(Ft, {}) : null,
+          /* @__PURE__ */ t.jsx(Et, { children: K.linkJE.linkJE })
+        ] }) : null
+      ]
+    }
+  ) : null;
+}
+const Lt = (e, n) => {
+  switch (e) {
+    case "pending":
+    case "canceled":
+    case "recorded":
+      return new J(n.colors.grey1);
+    case "posted":
+      return new J(S.success);
+    case "unknown":
+      return new J(S.alert);
+  }
+}, zt = i.div`
+  display: flex;
+  height: ${U}px;
+  justify-content: space-between;
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+  color: ${(e) => e.theme.colors.hero};
+  ${(e) => e.isRowEditable ? F`
+          &:hover {
+            border-bottom: 1px solid ${e.theme.colors.primary};
+            div {
+              color: ${e.theme.colors.primary};
+            }
+          input{
+            background-color: ${e.theme.colors.background}
+        }` : null};
+
+  ${(e) => e.isClickable ? F`
+          &:hover {
+            border-bottom: 1px solid ${e.theme.colors.primary};
+            div {
+              color: ${e.theme.colors.primary};
+            }` : null};
+
+  box-sizing: border-box;
+  align-items: center;
+
+  cursor: ${(e) => e.isClickable === !0 ? "pointer" : "default"};
+`, H = i.div`
+  display: flex;
+  align-items: center;
+  width: ${(e) => e.widthSize.valuePx(e.windowSize)};
+  max-width: ${(e) => e.widthSize.valuePx(e.windowSize)};
+  :last-of-type {
+    padding-right: 0;
+  }
+`, Rt = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${o.sp1};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, It = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${o.sp1};
+`, Et = i(D)``, Bt = i.div``, Ht = i.div`
+  display: flex;
+  gap: ${o.sp3};
+  align-items: center;
+`, At = i(Ie)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, Ft = i(Ee)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, A = i(D)`
+  flex-grow: 1;
+  word-break: break-word;
+  white-space: nowrap;
+  cursor: ${(e) => e.isClickable === !0 ? "pointer" : "default"};
+  -webkit-line-clamp: ${(e) => kt.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-align: "left";
+  text-overflow: ellipsis;
+  width: ${(e) => e.windowSize === "small" ? "200px" : "initial"};
+  min-width: ${(e) => e.windowSize === "small" ? "200px" : "initial"};
+  justify-content: unset;
+  display: ${(e) => e.isLastItem === !0 ? "flex" : "inline-block"};
+  margin-right: ${(e) => e.isLastItem === !0 ? 0 : o.sp4};
+  padding-right: ${o.sp0};
+`, ge = {
+  scheduleDetailsWrapperContainerMarginTop: new $(u[3], u[3]),
+  paddingRight: new $(u[4], 0)
+}, ro = ({
+  sectionId: e,
+  totalAmount: n,
+  isDisabled: l,
+  hideMemoField: r,
+  listFetchState: p,
+  scheduleJournalEntries: s,
+  localData: c,
+  uiState: d,
+  onEditAmount: w,
+  onJELinkClick: f,
+  onViewLinkedJE: h,
+  jeScheduleId: m
+}) => {
+  const x = I(), j = p === "Not-Started" || p === "In-Progress" && s.length === 0, C = p === "Completed" && c.length === 0, y = W.getLocalizedStrings().jeSchedules.scheduleDetails.sequenceSchedule;
+  return /* @__PURE__ */ t.jsxs(Jt, { windowSize: x, children: [
+    /* @__PURE__ */ t.jsx(Ut, { windowSize: x, children: y.header }),
+    j ? /* @__PURE__ */ t.jsx(Be, {}) : C ? /* @__PURE__ */ t.jsx(Gt, { windowSize: x, children: /* @__PURE__ */ t.jsx(He, { text: y.notCreated }) }) : /* @__PURE__ */ t.jsx(Yt, { children: /* @__PURE__ */ t.jsx(
+      Pt,
+      {
+        isDisabled: l,
+        sectionId: e,
+        hideMemoField: r,
+        totalAmount: n,
+        uiState: d,
+        scheduleJournalEntries: s,
+        localData: c,
+        onEditAmount: w,
+        onJELinkClick: f,
+        onViewLinkedJE: h,
+        jeScheduleId: m
+      }
+    ) })
+  ] });
+}, Pt = ({
+  sectionId: e,
+  totalAmount: n,
+  isDisabled: l,
+  hideMemoField: r,
+  scheduleJournalEntries: p,
+  localData: s,
+  uiState: c,
+  jeScheduleId: d,
+  onEditAmount: w,
+  onJELinkClick: f,
+  onViewLinkedJE: h
+}) => {
+  const m = Ne(null), x = I(), j = (g) => U, C = s.length * U + Ae;
+  qe(() => {
+    m.current?.resetAfterIndex(0);
+  }, [p]);
+  const y = (g, a, b) => {
+    if (g === a.length - 1)
+      return !1;
+    if (b?.jeScheduleId == null)
+      return !0;
+    const V = G(), O = G().startOf("month"), te = G().endOf("month");
+    if (a[g].postingDate != null) {
+      if (a[g].postingDate.month() === V.month() && a[g].postingDate.isBetween(
+        O,
+        te
+      ) === !0)
+        return (a[g].postingStatus === "pending" || a[g].postingStatus === "canceled") && s[g].runningBalance.amount !== 0;
+      if (a[g].postingDate.isBefore(O) === !0)
+        return !1;
+      if (a[g].postingDate.isAfter(te) === !0 && g !== 0 && s[g - 1].postingStatus === "posted" && s[g - 1].runningBalance.amount !== 0)
+        return !0;
+    }
+    return !1;
+  }, v = (g) => {
+    const a = n < 0;
+    if (g === 0)
+      return {
+        min: a ? n : 0,
+        max: a ? 0 : n
+      };
+    {
+      const b = s[g - 1].runningBalance.amount;
+      return {
+        min: a ? b : 0,
+        max: a ? 0 : b
+      };
+    }
+  };
+  return /* @__PURE__ */ t.jsx(
+    Nt,
+    {
+      windowSize: x,
+      containerHeight: C,
+      children: /* @__PURE__ */ t.jsx(fe, { children: ({ height: g, width: a }) => /* @__PURE__ */ t.jsxs(Vt, { style: { height: g, width: a }, children: [
+        /* @__PURE__ */ t.jsx(qt, { children: /* @__PURE__ */ t.jsx(Fe, { hideMemo: r }) }),
+        /* @__PURE__ */ t.jsx(
+          ye,
+          {
+            height: g,
+            itemCount: s.length,
+            itemSize: j,
+            itemData: {
+              sectionId: e,
+              scheduleJournalEntries: p,
+              localData: s,
+              onEditAmount: w,
+              onJELinkClick: f,
+              uiState: c,
+              windowSize: x,
+              isDisabled: l,
+              isAmountEditable: y,
+              hideMemoField: r,
+              getMinMaxValuesForAmount: v,
+              onViewLinkedJE: h,
+              jeScheduleId: d
+            },
+            width: a,
+            ref: m,
+            overscanCount: Pe,
+            initialScrollOffset: 0,
+            children: Wt
+          }
+        )
+      ] }) })
+    }
+  );
+}, Wt = ({ index: e, data: n }) => {
+  const {
+    sectionId: l,
+    scheduleJournalEntries: r,
+    localData: p,
+    onJELinkClick: s,
+    windowSize: c,
+    isDisabled: d,
+    hideMemoField: w,
+    isAmountEditable: f,
+    getMinMaxValuesForAmount: h,
+    onViewLinkedJE: m,
+    jeScheduleId: x
+  } = n;
+  return /* @__PURE__ */ t.jsx(_t, { windowSize: c, children: /* @__PURE__ */ t.jsx(
+    Dt,
+    {
+      rowId: e,
+      isDisabled: d,
+      isAmountEditable: f(
+        e,
+        p,
+        r[e]
+      ),
+      hideMemoField: w,
+      minMaxValuesForAmount: h(e),
+      sectionId: `${l}.${e}`,
+      scheduleJournalEntry: r[e],
+      localData: p[e],
+      onJELinkClick: s,
+      onViewLinkedJE: m
+    }
+  ) }, x + e);
+}, Nt = i.div`
+  height: ${(e) => e.containerHeight}px;
+  width: 100%;
+  margin-right: ${o.sp8};
+`, qt = i.div`
+  width: auto;
+`, Yt = i.div`
+  display: flex;
+  flex-direction: column;
+`, _t = i.div`
+  top: ${o.sp0};
+  left: ${o.sp0};
+  padding-bottom: ${o.sp3};
+  box-sizing: border-box;
+  width: 100%;
+  padding: ${(e) => `${o.sp0} ${ge.paddingRight.valuePx(e.windowSize)} ${o.sp0} ${o.sp0}`};
+`, Vt = i.div``, Jt = i.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  border-left: 1px solid ${(e) => e.theme.colors.grey3};
+  border-right: 1px solid ${(e) => e.theme.colors.grey3};
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+
+  border-top-left-radius: ${o.sp0};
+  border-top-right-radius: ${o.sp0};
+  border-bottom-left-radius: ${o.sp2};
+  border-bottom-right-radius: ${o.sp2};
+
+  margin-left: ${o.sp8};
+  margin-right: ${o.sp8};
+  margin-bottom: ${o.sp8};
+  padding: ${o.sp0} ${o.sp4} ${o.sp4} ${o.sp4};
+  background-color: ${(e) => e.theme.colors.grey5};
+`, Gt = i.div`
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  width: 100%;
+  margin-top: ${(e) => ge.scheduleDetailsWrapperContainerMarginTop.valuePx(
+  e.windowSize
+)};
+`, Ut = i.div`
+  color: ${(e) => e.theme.colors.hero};
+  margin: ${o.sp3} ${o.sp0};
+  ${z.standardRegular.css};
+`;
+export {
+  oo as L,
+  no as S,
+  io as a,
+  ro as b
+};