@kiva/kv-components 10.5.0 → 10.6.0

package/dist/vue/KvLightbox.js

@@ -1,5 +1,5 @@
 import v from "./KvLightbox2.js";
-import { resolveComponent as f, openBlock as n, createBlock as x, Transition as b, withCtx as u, withDirectives as h, createElementVNode as o, withModifiers as w, createElementBlock as r, createCommentVNode as s, normalizeClass as c, renderSlot as d, toDisplayString as k, createVNode as y, vShow as g } from "vue";
+import { resolveComponent as f, openBlock as n, createBlock as x, Transition as b, withCtx as u, withDirectives as h, createElementVNode as o, withModifiers as s, createElementBlock as w, createCommentVNode as r, normalizeClass as d, renderSlot as c, toDisplayString as k, createVNode as y, vShow as g } from "vue";
 import C from "../_virtual/_plugin-vue_export-helper.js";
 const _ = ["aria-label", "aria-describedby", "role"], p = { class: "tw-flex tw-p-2.5 md:tw-px-4 md:tw-pt-4 md:tw-pb-3.5" }, B = { class: "tw-flex-grow" }, S = { class: "tw-flex-1" }, L = {
   id: "kvLightboxBody",
@@ -23,16 +23,16 @@ function V(i, e, t, l, j, z) {
     default: u(() => [
       h(o("div", {
         class: "tw-z-modal tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-[75%]",
-        onClick: e[3] || (e[3] = w((...a) => l.onScreenClick && l.onScreenClick(...a), ["stop", "prevent"]))
+        onClick: e[3] || (e[3] = s((...a) => l.onScreenClick && l.onScreenClick(...a), ["stop", "prevent"]))
       }, [
         o("div", null, [
-          t.blurBackground ? (n(), r("div", {
+          t.blurBackground ? (n(), w("div", {
             key: 0,
             class: "tw-fixed tw-inset-0 tw-w-full tw-h-full tw-backdrop-blur-sm",
-            onClick: e[0] || (e[0] = w((...a) => l.onScreenClick && l.onScreenClick(...a), ["stop", "prevent"]))
-          })) : s("", !0),
+            onClick: e[0] || (e[0] = s((...a) => l.onScreenClick && l.onScreenClick(...a), ["stop", "prevent"]))
+          })) : r("", !0),
           o("div", {
-            class: c(["tw-flex tw-absolute tw-inset-0", {
+            class: d(["tw-flex tw-absolute tw-inset-0", {
               "md:tw-px-2": t.variant === "lightbox",
               "tw-px-2": t.variant === "alert"
             }])
@@ -41,7 +41,7 @@ function V(i, e, t, l, j, z) {
               ref: "kvLightbox",
               tabindex: "-1",
               "data-test": "kv-lightbox",
-              class: c(["tw-bg-primary tw-flex tw-flex-col tw-mx-auto md:tw-my-auto", {
+              class: d(["tw-bg-primary tw-flex tw-flex-col tw-mx-auto md:tw-my-auto", {
                 "tw-w-full md:tw-w-auto": t.variant === "lightbox",
                 "tw-mt-auto md:tw-my-auto": t.variant === "lightbox",
                 "tw-min-h-half-screen md:tw-min-h-0": t.variant === "lightbox",
@@ -53,33 +53,33 @@ function V(i, e, t, l, j, z) {
               "aria-label": t.title ? t.title : null,
               "aria-describedby": t.variant === "alert" ? "kvLightboxBody" : null,
               role: l.role,
-              onClick: e[2] || (e[2] = w(() => {
+              onClick: e[2] || (e[2] = s(() => {
               }, ["stop"]))
             }, [
               o("div", p, [
                 o("div", B, [
-                  d(i.$slots, "header", {}, () => [
+                  c(i.$slots, "header", {}, () => [
                     o("h2", S, k(t.title), 1)
                   ])
                 ]),
-                t.preventClose ? s("", !0) : (n(), r("button", {
+                t.preventClose ? r("", !0) : (n(), w("button", {
                   key: 0,
-                  class: "tw-grid tw-content-center tw-justify-center tw-ml-auto tw-w-6 tw-h-6 tw--m-2 hover:tw-text-action-highlight",
-                  onClick: e[1] || (e[1] = w((a) => l.hide("close-x"), ["stop"]))
+                  class: d(["tw-grid tw-content-center tw-justify-center tw-ml-auto tw-w-6 tw-h-6 tw--m-2 hover:tw-text-action-highlight", l.closeButtonClasses]),
+                  onClick: e[1] || (e[1] = s((a) => l.hide("close-x"), ["stop"]))
                 }, [
                   y(m, {
                     class: "tw-w-3 tw-h-3",
                     icon: l.mdiClose
                   }, null, 8, ["icon"]),
                   e[4] || (e[4] = o("span", { class: "tw-sr-only" }, "Close", -1))
-                ]))
+                ], 2))
               ]),
               o("div", L, [
-                d(i.$slots, "default")
+                c(i.$slots, "default")
               ], 512),
-              i.$slots.controls ? (n(), r("div", N, [
-                d(i.$slots, "controls")
-              ], 512)) : s("", !0)
+              i.$slots.controls ? (n(), w("div", N, [
+                c(i.$slots, "controls")
+              ], 512)) : r("", !0)
             ], 10, _)
           ], 2)
         ])

package/dist/vue/KvLightbox.vue.d.ts

@@ -20,6 +20,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    preventBackgroundClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeButtonShowDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>, {
     mdiClose: string;
     role: import('vue').ComputedRef<"alertdialog" | "dialog">;
@@ -30,6 +38,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     hide: (closedBy?: string) => void;
     show: () => void;
     controlsRef: import('vue').Ref<any, any>;
+    closeButtonClasses: import('vue').ComputedRef<(string | {
+        'tw-invisible tw-opacity-0': boolean;
+    })[]>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "lightbox-closed"[], "lightbox-closed", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     blurBackground: {
         type: BooleanConstructor;
@@ -52,6 +63,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    preventBackgroundClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closeButtonShowDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
 }>> & Readonly<{
     "onLightbox-closed"?: (...args: any[]) => any;
 }>, {
@@ -59,6 +78,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     visible: boolean;
     preventClose: boolean;
     blurBackground: boolean;
+    preventBackgroundClose: boolean;
+    closeButtonShowDelay: number;
 }, {}, {
     KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         icon: {

package/dist/vue/KvLightbox2.js

@@ -1,13 +1,13 @@
-import { toRefs as h, ref as u, nextTick as k, computed as x, watch as S, onMounted as C, onBeforeUnmount as B } from "vue";
-import { mdiClose as E } from "@mdi/js";
-import { useFocusTrap as L } from "@vueuse/integrations/useFocusTrap";
-import { hideOthers as w } from "../vendor/aria-hidden/dist/es2015/index.js";
-import { lockScroll as P, unlockScroll as q } from "../utils/scrollLock.js";
-import { lockPrintSingleEl as I, unlockPrintSingleEl as K } from "../utils/printing.js";
-import M from "./KvMaterialIcon.js";
-const A = {
+import { toRefs as L, ref as o, nextTick as b, computed as p, watch as T, onMounted as P, onBeforeUnmount as q } from "vue";
+import { mdiClose as I } from "@mdi/js";
+import { useFocusTrap as K } from "@vueuse/integrations/useFocusTrap";
+import { hideOthers as M } from "../vendor/aria-hidden/dist/es2015/index.js";
+import { lockScroll as O, unlockScroll as R } from "../utils/scrollLock.js";
+import { lockPrintSingleEl as U, unlockPrintSingleEl as _ } from "../utils/printing.js";
+import N from "./KvMaterialIcon.js";
+const Q = {
   components: {
-    KvMaterialIcon: M
+    KvMaterialIcon: N
   },
   props: {
     /**
@@ -31,8 +31,8 @@ const A = {
     variant: {
       type: String,
       default: "lightbox",
-      validator(v) {
-        return ["lightbox", "alert"].includes(v);
+      validator(f) {
+        return ["lightbox", "alert"].includes(f);
       }
     },
     /**
@@ -50,23 +50,41 @@ const A = {
     preventClose: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Clicking the screen behind the dialog does not close it. The close X button and
+     * pressing ESC still close it.
+     * */
+    preventBackgroundClose: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Milliseconds to keep the close X button hidden each time the dialog opens, after
+     * which it fades in. Pressing ESC still closes the dialog during the delay.
+     * */
+    closeButtonShowDelay: {
+      type: Number,
+      default: 0
     }
   },
   emits: [
     "lightbox-closed"
   ],
-  setup(v, { emit: g }) {
+  setup(f, { emit: C }) {
     const {
-      visible: o,
-      variant: d,
-      preventClose: p
-    } = h(v), n = u(null), t = u(null), m = u(null), a = u(null), i = u(null);
-    k(() => {
+      visible: n,
+      variant: m,
+      preventClose: y,
+      preventBackgroundClose: w,
+      closeButtonShowDelay: k
+    } = L(f), u = o(null), t = o(null), g = o(null), r = o(null), i = o(null);
+    b(() => {
       const {
         activate: e,
         deactivate: l
-      } = L([
-        n.value,
+      } = K([
+        u.value,
         // This lightbox
         '[role="alert"]'
         // Any open toasts/alerts on the page
@@ -74,44 +92,56 @@ const A = {
         allowOutsideClick: !0
         // allow clicking outside the lightbox to close it
       });
-      a.value = e, i.value = l;
+      r.value = e, i.value = l;
     });
-    let c = null, s = null;
-    const b = x(() => d.value === "alert" ? "alertdialog" : "dialog"), r = (e = "") => {
+    let s = null, c = null, h = null;
+    const v = o(!1), B = p(() => k.value > 0), S = p(() => B.value ? [
+      "tw-transition-opacity tw-duration-500 motion-reduce:tw-transition-none",
+      { "tw-invisible tw-opacity-0": !v.value }
+    ] : null), x = () => {
+      if (!B.value) {
+        v.value = !0;
+        return;
+      }
+      v.value = !1, h = setTimeout(() => {
+        v.value = !0;
+      }, k.value);
+    }, E = p(() => m.value === "alert" ? "alertdialog" : "dialog"), a = (e = "") => {
       var l;
-      n.value && t.value && ((l = i.value) == null || l.call(i), t.value.scrollTop = 0, K(t.value)), q(), c && (c(), c = null), document.removeEventListener("keyup", s), o.value && g("lightbox-closed", { type: e });
+      clearTimeout(h), u.value && t.value && ((l = i.value) == null || l.call(i), t.value.scrollTop = 0, _(t.value)), R(), s && (s(), s = null), document.removeEventListener("keyup", c), n.value && C("lightbox-closed", { type: e });
     };
-    s = (e) => {
-      e && e.key === "Escape" && !p.value && r();
+    c = (e) => {
+      e && e.key === "Escape" && !y.value && a();
     };
-    const y = () => {
-      p.value || r("background-click");
-    }, f = () => {
-      o.value && (document.addEventListener("keyup", s), k(() => {
+    const D = () => {
+      y.value || w.value || a("background-click");
+    }, d = () => {
+      n.value && (x(), document.addEventListener("keyup", c), b(() => {
         var e;
-        if (n.value && t.value && ((e = a.value) == null || e.call(a), c = w(n.value), I(t.value)), P(), d.value === "alert") {
-          const l = m.value.querySelector("button");
+        if (u.value && t.value && ((e = r.value) == null || e.call(r), s = M(u.value), U(t.value)), O(), m.value === "alert") {
+          const l = g.value.querySelector("button");
           l && l.focus();
         }
       }));
     };
-    return S(o, () => {
-      o.value ? f() : r();
-    }), C(() => {
-      o.value && f();
-    }), B(() => r()), {
-      mdiClose: E,
-      role: b,
-      kvLightbox: n,
+    return T(n, () => {
+      n.value ? d() : a();
+    }), P(() => {
+      n.value && d();
+    }), q(() => a()), {
+      mdiClose: I,
+      role: E,
+      kvLightbox: u,
       kvLightboxBody: t,
-      onKeyUp: s,
-      onScreenClick: y,
-      hide: r,
-      show: f,
-      controlsRef: m
+      onKeyUp: c,
+      onScreenClick: D,
+      hide: a,
+      show: d,
+      controlsRef: g,
+      closeButtonClasses: S
     };
   }
 };
 export {
-  A as default
+  Q as default
 };

package/dist/vue/KvLoanActivities.js

@@ -1,77 +1,151 @@
-import g from "./KvLoanActivities2.js";
-import { KV_LOAN_ACTIVITIES_FRAGMENT as H } from "./KvLoanActivities2.js";
-import { resolveComponent as c, openBlock as n, createElementBlock as s, createElementVNode as i, createVNode as d, toDisplayString as l, createCommentVNode as r, withCtx as m, Fragment as w, renderList as _, createBlock as h } from "vue";
-import "./KvLoanActivities.css";
-import y from "../_virtual/_plugin-vue_export-helper.js";
-const A = {
-  key: 0,
-  class: "loan-activity"
-}, L = { class: "tw-flex tw-justify-center lg:tw-px-0" }, C = { class: "tw-flex tw-justify-center tw-mt-1 tw-text-small" }, K = { key: 0 }, N = { class: "tw-text-title tw-flex-1 data-hj-suppress" }, M = { class: "tw-overflow-x-hidden tw-px-2 tw-pb-1" }, T = { class: "tw-text-center tw-text-upper" }, V = { class: "tw-flex tw-flex-col tw-gap-y-1" }, B = {
-  key: 0,
-  class: "tw-mt-1 tw-text-small tw-text-danger"
-}, F = { class: "tw-flex tw-justify-end tw-mt-4 tw-pb-2.5 md:tw-pb-4" };
-function I(k, a, t, e, j, E) {
-  const v = c("KvActivityRow"), x = c("KvLendCta"), u = c("KvLightbox");
-  return t.combinedActivities.length > 0 ? (n(), s("div", A, [
-    i("div", L, [
-      d(v, { activity: e.singleActivity }, null, 8, ["activity"])
-    ]),
-    i("div", C, [
-      e.lendersNumber && e.amountLent ? (n(), s("span", K, l(e.lendersNumber) + " lenders lent " + l(e.amountLent) + ".   ", 1)) : r("", !0),
-      i("button", {
-        class: "tw-text-action hover:tw-underline",
-        onClick: a[0] || (a[0] = (...o) => e.showActivityModal && e.showActivityModal(...o))
-      }, " See all activity ")
-    ]),
-    d(u, {
-      title: "Activity Feed Modal",
-      visible: e.lightboxOpen,
-      onLightboxClosed: e.closeLightbox
-    }, {
-      header: m(() => [
-        i("h2", N, l(e.modalTitle), 1)
-      ]),
-      default: m(() => [
-        i("div", M, [
-          (n(!0), s(w, null, _(t.combinedActivities, (o) => (n(), s("div", {
-            key: o.key,
-            class: "md:tw-px-8 lg:tw-px-14 tw-mt-4"
-          }, [
-            i("p", T, l(e.formattedDate(o.key)), 1),
-            i("div", V, [
-              (n(!0), s(w, null, _(o.data, (b, f) => (n(), h(v, {
-                key: f,
-                activity: b
-              }, null, 8, ["activity"]))), 128))
-            ])
-          ]))), 128))
-        ]),
-        i("div", null, [
-          t.errorMsg ? (n(), s("p", B, l(t.errorMsg), 1)) : r("", !0),
-          i("div", F, [
-            d(x, {
-              loan: t.loan,
-              "is-loading": !1,
-              "kv-track-function": t.kvTrackFunction,
-              "get-cookie": t.getCookie,
-              "set-cookie": t.setCookie,
-              "user-balance": t.userBalance,
-              "basket-items": t.basketItems,
-              route: t.route,
-              "is-adding": t.isAdding,
-              "is-visitor": t.isVisitor,
-              "enable-five-dollars-notes": t.enableFiveDollarsNotes,
-              onAddToBasket: a[1] || (a[1] = (o) => k.$emit("add-to-basket", o))
-            }, null, 8, ["loan", "kv-track-function", "get-cookie", "set-cookie", "user-balance", "basket-items", "route", "is-adding", "is-visitor", "enable-five-dollars-notes"])
-          ])
-        ])
-      ]),
-      _: 1
-    }, 8, ["visible", "onLightboxClosed"])
-  ])) : r("", !0);
-}
-const G = /* @__PURE__ */ y(g, [["render", I], ["__scopeId", "data-v-c2b4aeda"]]);
+import { toRefs as f, ref as v, computed as n } from "vue";
+import { gql as p } from "@apollo/client/core";
+import { format as y } from "date-fns";
+import A from "numeral";
+import g from "./KvActivityRow.js";
+import b from "./KvLightbox.js";
+import F from "./KvLendCta2.js";
+const O = p`
+	fragment KvLoanActivities on LoanBasic {
+		id
+		name
+		lenders(limit: 0) {
+			totalCount
+		}
+		loanFundraisingInfo {
+			id
+			fundedAmount
+		}
+	}
+`, _ = {
+  name: "KvLoanActivities",
+  components: {
+    KvActivityRow: g,
+    KvLightbox: b,
+    KvLendCta: F
+  },
+  props: {
+    /**
+     * loan object coming from parent component
+     */
+    loan: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * loan combined activities coming from parent component
+     */
+    combinedActivities: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * isAdding flag coming from parent add to basket method
+     */
+    isAdding: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * basketItems array coming from parent component
+     */
+    basketItems: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * userBalance string coming from parent component
+     */
+    userBalance: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * errorMsg string coming from parent add to basket method
+     */
+    errorMsg: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * kvTrackFunction function to track events from LendCta component
+     */
+    kvTrackFunction: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * getCookie function for LendCta component
+     */
+    getCookie: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * setCookie function for LendCta component
+     */
+    setCookie: {
+      type: Function,
+      default: void 0
+    },
+    /**
+     * route object for LendCta component
+     */
+    route: {
+      type: Object,
+      default: void 0
+    },
+    enableFiveDollarsNotes: {
+      type: Boolean,
+      default: !1
+    },
+    isVisitor: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: [
+    "add-to-basket"
+  ],
+  setup(r) {
+    const {
+      loan: a,
+      combinedActivities: l,
+      kvTrackFunction: s
+    } = f(r), i = v(!1), u = n(() => {
+      var t;
+      return `Activity for ${((t = a.value) == null ? void 0 : t.name) || ""}`;
+    }), d = n(() => {
+      var t, e;
+      return ((e = (t = a.value) == null ? void 0 : t.lenders) == null ? void 0 : e.totalCount) ?? 0;
+    }), c = n(() => {
+      var e, o;
+      const t = ((o = (e = a.value) == null ? void 0 : e.loanFundraisingInfo) == null ? void 0 : o.fundedAmount) ?? 0;
+      return A(parseFloat(t)).format("$0,0");
+    }), m = n(() => {
+      const t = l.value.find((e) => e.data.some((o) => o.type === "LendingAction"));
+      return (t == null ? void 0 : t.data[0]) ?? {};
+    });
+    return {
+      lightboxOpen: i,
+      modalTitle: u,
+      formattedDate: (t) => {
+        const e = new Date(t);
+        return y(e, "MMM d, yyyy");
+      },
+      showActivityModal: () => {
+        s.value("loan-card", "click", "see-all-activity"), i.value = !0;
+      },
+      closeLightbox: () => {
+        i.value = !1;
+      },
+      singleActivity: m,
+      lendersNumber: d,
+      amountLent: c
+    };
+  }
+};
 export {
-  H as KV_LOAN_ACTIVITIES_FRAGMENT,
-  G as default
+  O as KV_LOAN_ACTIVITIES_FRAGMENT,
+  _ as default
 };

package/dist/vue/KvLoanActivities.vue.d.ts

@@ -252,6 +252,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        preventBackgroundClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        closeButtonShowDelay: {
+            type: NumberConstructor;
+            default: number;
+        };
     }>, {
         mdiClose: string;
         role: import('vue').ComputedRef<"alertdialog" | "dialog">;
@@ -262,6 +270,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         hide: (closedBy?: string) => void;
         show: () => void;
         controlsRef: import('vue').Ref<any, any>;
+        closeButtonClasses: import('vue').ComputedRef<(string | {
+            'tw-invisible tw-opacity-0': boolean;
+        })[]>;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "lightbox-closed"[], "lightbox-closed", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         blurBackground: {
             type: BooleanConstructor;
@@ -284,6 +295,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        preventBackgroundClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        closeButtonShowDelay: {
+            type: NumberConstructor;
+            default: number;
+        };
     }>> & Readonly<{
         "onLightbox-closed"?: (...args: any[]) => any;
     }>, {
@@ -291,6 +310,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         visible: boolean;
         preventClose: boolean;
         blurBackground: boolean;
+        preventBackgroundClose: boolean;
+        closeButtonShowDelay: number;
     }, {}, {
         KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             icon: {