@kiva/kv-components 7.6.2 → 8.0.0

package/dist/vue/KvIntroductionLoanCard.js

@@ -1,367 +1,169 @@
-import A from "graphql-tag";
-import E from "numeral";
-import { LOAN_CALLOUTS_FRAGMENT as I, LOAN_GEOCODE_FRAGMENT as G, LOAN_PROGRESS_FRAGMENT as U, loanCardComputedProperties as V, loanCardMethods as z } from "../utils/loanCard.js";
-import W, { KV_LOAN_BOOKMARK_FRAGMENT as M } from "./KvLoanBookmark.js";
-import j, { KV_LOAN_USE_FRAGMENT as H } from "./KvLoanUse.js";
-import q from "./KvBorrowerImage.js";
-import J from "./KvLoanProgressGroup.js";
-import Q from "./KvLoanCallouts.js";
-import X, { KV_LOAN_TAG_FRAGMENT as Y } from "./KvLoanTag.js";
-import Z from "./KvMaterialIcon.js";
-import $ from "./KvLoadingPlaceholder.js";
-import ee from "./KvFlag.js";
-import { resolveComponent as m, openBlock as t, createElementBlock as s, normalizeClass as x, normalizeStyle as te, createElementVNode as c, createBlock as a, resolveDynamicComponent as f, withCtx as h, createVNode as d, Suspense as oe, createTextVNode as ae, toDisplayString as N, createCommentVNode as u, Fragment as re, renderList as ne } from "vue";
+import M from "./KvIntroductionLoanCard2.js";
+import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as tt, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as et } from "./KvIntroductionLoanCard2.js";
+import { resolveComponent as d, openBlock as e, createElementBlock as n, normalizeClass as _, normalizeStyle as P, createElementVNode as s, createBlock as o, resolveDynamicComponent as g, withCtx as m, createVNode as i, Suspense as R, createTextVNode as A, toDisplayString as f, createCommentVNode as c, Fragment as p, renderList as T } from "vue";
 import "./KvIntroductionLoanCard.css";
-import le from "../_virtual/_plugin-vue_export-helper.js";
-const Se = A`
-	fragment KvIntroductionLoanCard on LoanBasic {
-		id
-		image {
-			id
-			hash # for imageHash
-		}
-		lenders(limit: 0) {
-			totalCount # for lendersNumber
-		}
-		loanFundraisingInfo {
-			id
-			fundedAmount # for amountLent
-		}
-		name # for borrowerName
-		status # for isFunded
-		...KvLoanBookmark
-		...KvLoanTag
-		...KvLoanUse
-		...LoanCallouts
-		...LoanGeocode
-		...LoanProgress
-	}
-	${M}
-	${Y}
-	${H}
-	${I}
-	${G}
-	${U}
-`, De = A`
-	fragment KvIntroductionLoanCardUser on LoanBasic {
-		id
-		...KvLoanBookmark
-	}
-	${M}
-`, ie = {
-  name: "KvIntroductionLoanCard",
-  components: {
-    KvBorrowerImage: q,
-    KvLoadingPlaceholder: $,
-    KvLoanUse: j,
-    KvLoanProgressGroup: J,
-    KvMaterialIcon: Z,
-    KvLoanTag: X,
-    KvLoanCallouts: Q,
-    KvFlag: ee,
-    KvLoanBookmark: W
-  },
-  props: {
-    loanId: {
-      type: Number,
-      default: void 0
-    },
-    loan: {
-      type: Object,
-      default: null
-    },
-    customLoanDetails: {
-      type: Boolean,
-      default: !1
-    },
-    categoryPageName: {
-      type: String,
-      default: ""
-    },
-    customCallouts: {
-      type: Array,
-      default: () => []
-    },
-    kvTrackFunction: {
-      type: Function,
-      required: !0
-    },
-    photoPath: {
-      type: String,
-      required: !0
-    },
-    errorMsg: {
-      type: String,
-      default: ""
-    },
-    externalLinks: {
-      type: Boolean,
-      default: !1
-    },
-    route: {
-      type: Object,
-      default: void 0
-    },
-    useFullWidth: {
-      type: Boolean,
-      default: !1
-    },
-    isVisitor: {
-      type: Boolean,
-      default: !0
-    },
-    isBookmarked: {
-      type: Boolean,
-      default: !1
-    },
-    customHref: {
-      type: String,
-      default: ""
-    }
-  },
-  setup(n, { emit: o }) {
-    const {
-      allDataLoaded: i,
-      borrowerName: e,
-      city: C,
-      countryName: w,
-      countryCode: l,
-      distributionModel: g,
-      formattedLocation: _,
-      fundraisingPercent: k,
-      hasProgressData: y,
-      imageHash: v,
-      isLoading: b,
-      loanAmount: L,
-      loanBorrowerCount: r,
-      loanCallouts: p,
-      loanStatus: P,
-      loanUse: K,
-      mdiMapMarker: R,
-      readMorePath: B,
-      state: F,
-      tag: O,
-      unreservedAmount: T,
-      sharesAvailable: S
-    } = V(n, !0), {
-      clickReadMore: D
-    } = z(n, o);
-    return {
-      allDataLoaded: i,
-      borrowerName: e,
-      city: C,
-      countryName: w,
-      countryCode: l,
-      distributionModel: g,
-      formattedLocation: _,
-      fundraisingPercent: k,
-      hasProgressData: y,
-      imageHash: v,
-      isLoading: b,
-      loanAmount: L,
-      loanBorrowerCount: r,
-      loanCallouts: p,
-      loanStatus: P,
-      loanUse: K,
-      mdiMapMarker: R,
-      readMorePath: B,
-      state: F,
-      tag: O,
-      unreservedAmount: T,
-      sharesAvailable: S,
-      clickReadMore: D
-    };
-  },
-  computed: {
-    cardWidth() {
-      return this.useFullWidth ? "100%" : "20.5rem";
-    },
-    imageAspectRatio() {
-      return 5 / 8;
-    },
-    imageDefaultWidth() {
-      return 480;
-    },
-    imageSizes() {
-      return [
-        { width: this.imageDefaultWidth, viewSize: 375 }
-      ];
-    },
-    lendersNumber() {
-      var n, o;
-      return ((o = (n = this.loan) == null ? void 0 : n.lenders) == null ? void 0 : o.totalCount) ?? 0;
-    },
-    amountLent() {
-      var o, i;
-      const n = ((i = (o = this.loan) == null ? void 0 : o.loanFundraisingInfo) == null ? void 0 : i.fundedAmount) ?? 0;
-      return E(n).format("$0,0");
-    },
-    isFunded() {
-      var n;
-      return ((n = this.loan) == null ? void 0 : n.status) === "funded" || this.hasProgressData && !this.sharesAvailable;
-    }
-  }
-}, se = { class: "tw-grow" }, de = { class: "loan-card-active-hover" }, me = {
+import B from "../_virtual/_plugin-vue_export-helper.js";
+const D = { class: "tw-grow" }, z = { class: "loan-card-active-hover" }, I = {
   key: 1,
   style: { height: "11rem" },
   class: "tw-relative tw-overflow-hidden"
-}, ce = { key: 0 }, ue = {
+}, V = { key: 0 }, F = {
   class: "tw-absolute tw-bottom-1 tw-left-1 tw-text-primary tw-bg-white tw-rounded tw-p-1 tw-mb-0 tw-mr-2 tw-text-h4 tw-inline-flex tw-items-center !tw-capitalize",
   style: { padding: "2px 6px" }
-}, we = {
+}, O = {
   key: 3,
   class: "tw-flex tw-justify-center tw-gap-2"
-}, he = {
+}, S = {
   key: 0,
   class: "tw-w-full",
   style: { height: "5.5rem" }
-}, fe = { key: 1 }, ge = { class: "tw-px-2" }, _e = {
+}, E = { key: 1 }, U = { class: "tw-px-2" }, W = {
   key: 0,
   class: "tw-w-full tw-pr-1"
-}, ke = { class: "tw-flex tw-justify-between" }, ye = {
+}, j = { class: "tw-flex tw-justify-between" }, K = {
   key: 2,
   class: "tw-bg-eco-green-1 tw-text-action tw-text-center tw-py-1.5",
   style: { "font-weight": "bold", "font-size": "13px", "border-radius": "8px" }
 };
-function ve(n, o, i, e, C, w) {
-  const l = m("kv-loading-placeholder"), g = m("kv-borrower-image"), _ = m("kv-flag"), k = m("kv-loan-bookmark"), y = m("kv-loan-callouts"), v = m("kv-loan-use"), b = m("kv-loan-progress-group"), L = m("kv-loan-tag");
-  return t(), s("div", {
-    class: x(["tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-2", { "tw-pointer-events-none": e.isLoading }]),
+function G(k, a, w, t, H, h) {
+  const l = d("kv-loading-placeholder"), u = d("kv-borrower-image"), y = d("kv-flag"), b = d("kv-loan-bookmark"), v = d("kv-loan-callouts"), x = d("kv-loan-use"), C = d("kv-loan-progress-group"), N = d("kv-loan-tag");
+  return e(), n("div", {
+    class: _(["tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-2", { "tw-pointer-events-none": t.isLoading }]),
     "data-testid": "loan-card",
-    style: te([{ "box-shadow": "0px 4px 8px 0px rgba(0, 0, 0, 0.38)" }, { minWidth: "230px", maxWidth: w.cardWidth }])
+    style: P([{ "box-shadow": "0px 4px 8px 0px rgba(0, 0, 0, 0.38)" }, { minWidth: "230px", maxWidth: h.cardWidth }])
   }, [
-    c("div", se, [
-      c("div", de, [
-        e.isLoading ? (t(), a(l, {
+    s("div", D, [
+      s("div", z, [
+        t.isLoading ? (e(), o(l, {
           key: 0,
           class: "tw-w-full tw-rounded-t",
           style: { height: "11rem" }
-        })) : (t(), s("div", me, [
-          (t(), a(f(e.tag), {
-            to: e.readMorePath,
-            href: e.readMorePath,
+        })) : (e(), n("div", I, [
+          (e(), o(g(t.tag), {
+            to: t.readMorePath,
+            href: t.readMorePath,
             class: "tw-flex",
             "aria-label": "Borrower image",
-            onClick: o[0] || (o[0] = (r) => e.clickReadMore("Photo", r))
+            onClick: a[0] || (a[0] = (r) => t.clickReadMore("Photo", r))
           }, {
-            default: h(() => [
-              d(g, {
+            default: m(() => [
+              i(u, {
                 class: "tw-relative tw-w-full tw-bg-black tw-rounded-t borrower-image",
-                alt: `Photo of ${e.borrowerName}`,
-                "aspect-ratio": w.imageAspectRatio,
-                "default-image": { width: w.imageDefaultWidth },
-                hash: e.imageHash,
-                images: w.imageSizes,
-                "photo-path": i.photoPath
+                alt: `Photo of ${t.borrowerName}`,
+                "aspect-ratio": h.imageAspectRatio,
+                "default-image": { width: h.imageDefaultWidth },
+                hash: t.imageHash,
+                images: h.imageSizes,
+                "photo-path": w.photoPath
               }, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
-              e.countryName ? (t(), s("div", ce, [
-                c("p", ue, [
-                  (t(), a(oe, null, {
-                    default: h(() => [
-                      d(_, {
+              t.countryName ? (e(), n("div", V, [
+                s("p", F, [
+                  (e(), o(R, null, {
+                    default: m(() => [
+                      i(y, {
                         class: "tw-ml-0.5 tw-mr-1",
-                        country: e.countryCode,
-                        name: e.countryName,
+                        country: t.countryCode,
+                        name: t.countryName,
                         "width-override": "16px",
                         "hide-border": ""
                       }, null, 8, ["country", "name"])
                     ]),
                     _: 1
                   })),
-                  ae(" " + N(e.formattedLocation), 1)
+                  A(" " + f(t.formattedLocation), 1)
                 ])
-              ])) : u("", !0)
+              ])) : c("", !0)
             ]),
             _: 1
           }, 8, ["to", "href"])),
-          i.isVisitor ? u("", !0) : (t(), a(k, {
+          w.isVisitor ? c("", !0) : (e(), o(b, {
             key: 0,
-            "loan-id": i.loanId,
-            "is-bookmarked": i.isBookmarked,
+            "loan-id": w.loanId,
+            "is-bookmarked": w.isBookmarked,
             class: "loan-bookmark tw-absolute tw-right-1.5 tw-top-0",
             "data-testid": "loan-card-bookmark",
-            onToggleBookmark: o[1] || (o[1] = (r) => n.$emit("toggle-bookmark"))
+            onToggleBookmark: a[1] || (a[1] = (r) => k.$emit("toggle-bookmark"))
           }, null, 8, ["loan-id", "is-bookmarked"]))
         ])),
-        e.isLoading || typeof e.loanCallouts > "u" ? (t(), a(l, {
+        t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(l, {
           key: 2,
           class: "tw-mt-1 tw-mx-auto",
           style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
-        })) : u("", !0),
-        (t(), a(f(e.tag), {
-          to: e.readMorePath,
-          href: e.readMorePath,
+        })) : c("", !0),
+        (e(), o(g(t.tag), {
+          to: t.readMorePath,
+          href: t.readMorePath,
           "aria-label": "Borrower name",
           class: "!tw-text-primary tw-no-underline",
-          onClick: o[2] || (o[2] = (r) => e.clickReadMore("Name", r))
+          onClick: a[2] || (a[2] = (r) => t.clickReadMore("Name", r))
         }, {
-          default: h(() => [
-            c("h3", {
-              class: x(["loan-card-name", { "tw-text-center": e.borrowerName.length < 20 }]),
+          default: m(() => [
+            s("h3", {
+              class: _(["loan-card-name", { "tw-text-center": t.borrowerName.length < 20 }]),
               style: { "font-size": "28px" }
-            }, N(e.borrowerName), 3)
+            }, f(t.borrowerName), 3)
           ]),
           _: 1
         }, 8, ["to", "href"])),
-        e.isLoading ? (t(), s("div", we, [
-          e.isLoading || typeof e.loanCallouts > "u" ? (t(), a(l, {
+        t.isLoading ? (e(), n("div", O, [
+          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(l, {
             key: 0,
             class: "tw-mt-0.5 tw-mb-1",
             style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
-          })) : u("", !0),
-          e.isLoading || typeof e.loanCallouts > "u" ? (t(), a(l, {
+          })) : c("", !0),
+          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(l, {
             key: 1,
             class: "tw-mt-0.5 tw-mb-1",
             style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
-          })) : u("", !0),
-          e.isLoading || typeof e.loanCallouts > "u" ? (t(), a(l, {
+          })) : c("", !0),
+          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(l, {
             key: 2,
             class: "tw-mt-0.5 tw-mb-1",
             style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
-          })) : u("", !0)
-        ])) : (t(), a(f(e.tag), {
+          })) : c("", !0)
+        ])) : (e(), o(g(t.tag), {
           key: 4,
-          to: e.readMorePath,
-          href: e.readMorePath,
+          to: t.readMorePath,
+          href: t.readMorePath,
           class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline tw-justify-center",
           "aria-label": "Loan tag",
-          onClick: o[3] || (o[3] = (r) => e.clickReadMore("Tag", r))
+          onClick: a[3] || (a[3] = (r) => t.clickReadMore("Tag", r))
         }, {
-          default: h(() => [
-            d(y, {
-              callouts: e.loanCallouts,
+          default: m(() => [
+            i(v, {
+              callouts: t.loanCallouts,
               "add-bg-color": !1,
               class: "loan-callouts"
             }, null, 8, ["callouts"])
           ]),
           _: 1
         }, 8, ["to", "href"])),
-        (t(), a(f(e.tag), {
-          to: e.readMorePath,
-          href: e.readMorePath,
+        (e(), o(g(t.tag), {
+          to: t.readMorePath,
+          href: t.readMorePath,
           class: "loan-card-use tw-text-primary tw-no-underline",
           "aria-label": "Loan use",
-          onClick: o[4] || (o[4] = (r) => e.clickReadMore("Use", r))
+          onClick: a[4] || (a[4] = (r) => t.clickReadMore("Use", r))
         }, {
-          default: h(() => [
-            c("div", {
-              class: x(["tw-pt-0.5 tw-px-2", { "tw-mb-1.5": !e.isLoading }])
+          default: m(() => [
+            s("div", {
+              class: _(["tw-pt-0.5 tw-px-2", { "tw-mb-1.5": !t.isLoading }])
             }, [
-              e.isLoading ? (t(), s("div", he, [
-                (t(!0), s(re, null, ne([...Array(3)], (r, p) => (t(), s("div", {
-                  key: p,
+              t.isLoading ? (e(), n("div", S, [
+                (e(!0), n(p, null, T([...Array(3)], (r, L) => (e(), n("div", {
+                  key: L,
                   class: "tw-h-2 tw-mb-1"
                 }, [
-                  d(l)
+                  i(l)
                 ]))), 128))
-              ])) : (t(), s("div", fe, [
-                d(v, {
-                  use: e.loanUse,
-                  "loan-amount": e.loanAmount,
-                  status: e.loanStatus,
-                  "borrower-count": e.loanBorrowerCount,
-                  name: e.borrowerName,
-                  "distribution-model": e.distributionModel,
+              ])) : (e(), n("div", E, [
+                i(x, {
+                  use: t.loanUse,
+                  "loan-amount": t.loanAmount,
+                  status: t.loanStatus,
+                  "borrower-count": t.loanBorrowerCount,
+                  name: t.borrowerName,
+                  "distribution-model": t.distributionModel,
                   "hide-loan-amount": "",
                   class: "!tw-line-clamp-3"
                 }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model"])
@@ -372,51 +174,51 @@ function ve(n, o, i, e, C, w) {
         }, 8, ["to", "href"]))
       ])
     ]),
-    c("div", ge, [
-      e.hasProgressData ? u("", !0) : (t(), s("div", _e, [
-        c("div", ke, [
-          d(l, {
+    s("div", U, [
+      t.hasProgressData ? c("", !0) : (e(), n("div", W, [
+        s("div", j, [
+          i(l, {
             class: "tw-mb-0.5",
             style: { width: "20%", height: "1.3rem" }
           }),
-          d(l, {
+          i(l, {
             class: "tw-mb-0.5",
             style: { width: "20%", height: "1.3rem" }
           })
         ]),
-        d(l, {
+        i(l, {
           class: "tw-rounded",
           style: { width: "100%", height: "0.5rem" }
         })
       ])),
-      c("div", null, [
-        e.sharesAvailable ? (t(), a(f(e.tag), {
+      s("div", null, [
+        t.sharesAvailable ? (e(), o(g(t.tag), {
           key: 0,
-          to: e.readMorePath,
-          href: e.readMorePath,
+          to: t.readMorePath,
+          href: t.readMorePath,
           class: "loan-card-progress tw-mt-1",
           "aria-label": "Loan progress",
-          onClick: o[5] || (o[5] = (r) => e.clickReadMore("Progress", r))
+          onClick: a[5] || (a[5] = (r) => t.clickReadMore("Progress", r))
         }, {
-          default: h(() => [
-            d(b, {
+          default: m(() => [
+            i(C, {
               id: "loanProgress",
-              "money-left": e.unreservedAmount,
-              "amount-goal": e.loanAmount,
-              "progress-percent": e.fundraisingPercent,
+              "money-left": t.unreservedAmount,
+              "amount-goal": t.loanAmount,
+              "progress-percent": t.fundraisingPercent,
               class: "tw-text-secondary"
             }, null, 8, ["money-left", "amount-goal", "progress-percent"])
           ]),
           _: 1
-        }, 8, ["to", "href"])) : u("", !0)
+        }, 8, ["to", "href"])) : c("", !0)
       ]),
-      e.isLoading ? (t(), a(l, {
+      t.isLoading ? (e(), o(l, {
         key: 1,
         class: "tw-rounded tw-mx-auto tw-mt-2",
         style: { width: "9rem", height: "1rem" }
-      })) : w.isFunded ? (t(), s("div", ye, " 🎉 Fully funded! ")) : (t(), a(L, {
+      })) : h.isFunded ? (e(), n("div", K, " 🎉 Fully funded! ")) : (e(), o(N, {
         key: 3,
-        loan: i.loan,
+        loan: w.loan,
         "use-expanded-styles": !0,
         style: { "font-size": "15px" },
         class: "tw-text-center tw-pt-2"
@@ -424,9 +226,9 @@ function ve(n, o, i, e, C, w) {
     ])
   ], 6);
 }
-const Ee = /* @__PURE__ */ le(ie, [["render", ve], ["__scopeId", "data-v-49b21d16"]]);
+const Y = /* @__PURE__ */ B(M, [["render", G], ["__scopeId", "data-v-5220c6a3"]]);
 export {
-  Se as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
-  De as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
-  Ee as default
+  tt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  et as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  Y as default
 };