@kiva/kv-components 10.5.0 → 10.5.1

package/dist/vue/KvIntroductionLoanCard.js

@@ -1,250 +1,223 @@
-import P from "./KvIntroductionLoanCard2.js";
-import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as ot, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as at } from "./KvIntroductionLoanCard2.js";
-import { resolveComponent as i, openBlock as e, createElementBlock as n, normalizeStyle as R, normalizeClass as _, createElementVNode as d, createBlock as o, resolveDynamicComponent as g, withCtx as w, createVNode as s, Suspense as A, toDisplayString as f, createTextVNode as p, createCommentVNode as c, Fragment as T, renderList as I } from "vue";
-import "./KvIntroductionLoanCard.css";
-import B from "../_virtual/_plugin-vue_export-helper.js";
-const D = { class: "tw-grow" }, z = { class: "loan-card-active-hover" }, V = {
-  key: 1,
-  style: { height: "11rem" },
-  class: "tw-relative tw-overflow-hidden"
-}, O = { key: 0 }, S = {
-  class: "tw-absolute tw-bottom-1 tw-left-1 tw-text-primary tw-bg-white tw-rounded tw-p-1 tw-mb-0 tw-text-label tw-flex tw-items-center tw-h-3 !tw-capitalize",
-  style: { padding: "2px 6px", "max-width": "calc(100% - 1rem)" }
-}, E = ["id"], F = {
-  key: 3,
-  class: "tw-flex tw-justify-center tw-gap-2"
-}, U = {
-  key: 0,
-  class: "tw-w-full",
-  style: { height: "5.5rem" }
-}, W = { key: 1 }, j = { class: "tw-px-2" }, K = {
-  key: 0,
-  class: "tw-w-full tw-pr-1"
-}, G = { class: "tw-flex tw-justify-between" }, H = {
-  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" }
+import a from "graphql-tag";
+import F from "numeral";
+import { LOAN_CALLOUTS_FRAGMENT as k, LOAN_GEOCODE_FRAGMENT as B, LOAN_PROGRESS_FRAGMENT as E, loanCardComputedProperties as G, loanCardMethods as b, useLocationTruncation as I } from "../utils/loanCard.js";
+import S from "./KvLoanBookmark2.js";
+import D from "./KvLoanUse2.js";
+import P from "./KvBorrowerImage.js";
+import U from "./KvLoanProgressGroup.js";
+import $ from "./KvLoanCallouts.js";
+import w from "./KvLoanTag2.js";
+import V from "./KvMaterialIcon.js";
+import W from "./KvLoadingPlaceholder.js";
+import q from "./KvFlag.js";
+import H from "./KvTooltip.js";
+import { KV_LOAN_BOOKMARK_FRAGMENT as r } from "./KvLoanBookmark.js";
+import { KV_LOAN_TAG_FRAGMENT as j } from "./KvLoanTag.js";
+import { KV_LOAN_USE_FRAGMENT as x } from "./KvLoanUse.js";
+const mo = 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
+	}
+	${r}
+	${j}
+	${x}
+	${k}
+	${B}
+	${E}
+`, fo = a`
+	fragment KvIntroductionLoanCardUser on LoanBasic {
+		id
+		...KvLoanBookmark
+	}
+	${r}
+`, co = {
+  name: "KvIntroductionLoanCard",
+  components: {
+    KvBorrowerImage: P,
+    KvLoadingPlaceholder: W,
+    KvLoanUse: D,
+    KvLoanProgressGroup: U,
+    KvMaterialIcon: V,
+    KvLoanTag: w,
+    KvLoanCallouts: $,
+    KvFlag: q,
+    KvLoanBookmark: S,
+    KvTooltip: H
+  },
+  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: ""
+    },
+    enableMultiMatching: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "toggle-bookmark"
+  ],
+  setup(o, { emit: t }) {
+    const {
+      allDataLoaded: e,
+      borrowerName: n,
+      city: i,
+      countryName: s,
+      countryCode: u,
+      distributionModel: l,
+      formattedLocation: m,
+      fundraisingPercent: d,
+      hasProgressData: f,
+      imageHash: c,
+      isLoading: p,
+      loanAmount: L,
+      loanBorrowerCount: g,
+      loanCallouts: A,
+      loanStatus: h,
+      loanUse: N,
+      mdiMapMarker: _,
+      readMorePath: v,
+      state: K,
+      tag: y,
+      unreservedAmount: C,
+      sharesAvailable: O
+    } = G(o, !0), {
+      clickReadMore: T
+    } = b(o, t), {
+      locationRef: M,
+      isLocationTruncated: R
+    } = I();
+    return {
+      allDataLoaded: e,
+      borrowerName: n,
+      city: i,
+      countryName: s,
+      countryCode: u,
+      distributionModel: l,
+      formattedLocation: m,
+      fundraisingPercent: d,
+      hasProgressData: f,
+      imageHash: c,
+      isLoading: p,
+      loanAmount: L,
+      loanBorrowerCount: g,
+      loanCallouts: A,
+      loanStatus: h,
+      loanUse: N,
+      mdiMapMarker: _,
+      readMorePath: v,
+      state: K,
+      tag: y,
+      unreservedAmount: C,
+      sharesAvailable: O,
+      clickReadMore: T,
+      locationRef: M,
+      isLocationTruncated: R
+    };
+  },
+  computed: {
+    cardWidth() {
+      return this.useFullWidth ? "100%" : "20.5rem";
+    },
+    imageAspectRatio() {
+      return 5 / 8;
+    },
+    imageDefaultWidth() {
+      return 480;
+    },
+    imageSizes() {
+      return [
+        { width: this.imageDefaultWidth, viewSize: 375 }
+      ];
+    },
+    lendersNumber() {
+      var o, t;
+      return ((t = (o = this.loan) == null ? void 0 : o.lenders) == null ? void 0 : t.totalCount) ?? 0;
+    },
+    amountLent() {
+      var t, e;
+      const o = ((e = (t = this.loan) == null ? void 0 : t.loanFundraisingInfo) == null ? void 0 : e.fundedAmount) ?? 0;
+      return F(o).format("$0,0");
+    },
+    isFunded() {
+      var o;
+      return ((o = this.loan) == null ? void 0 : o.status) === "funded" || this.hasProgressData && !this.sharesAvailable;
+    }
+  }
 };
-function q(k, a, m, t, J, h) {
-  const r = i("kv-loading-placeholder"), u = i("kv-borrower-image"), y = i("kv-flag"), b = i("kv-tooltip"), v = i("kv-loan-bookmark"), x = i("kv-loan-callouts"), C = i("kv-loan-use"), L = i("kv-loan-progress-group"), M = i("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: R([{ "box-shadow": "0px 4px 8px 0px rgba(0, 0, 0, 0.38)" }, { minWidth: "230px", maxWidth: h.cardWidth }])
-  }, [
-    d("div", D, [
-      d("div", z, [
-        t.isLoading ? (e(), o(r, {
-          key: 0,
-          class: "tw-w-full tw-rounded-t",
-          style: { height: "11rem" }
-        })) : (e(), n("div", V, [
-          (e(), o(g(t.tag), {
-            to: t.readMorePath,
-            href: t.readMorePath,
-            class: "tw-flex",
-            "aria-label": "Borrower image",
-            onClick: a[0] || (a[0] = (l) => t.clickReadMore("Photo", l))
-          }, {
-            default: w(() => [
-              s(u, {
-                class: "tw-relative tw-w-full tw-bg-black tw-rounded-t borrower-image tw-bg-clip-content",
-                alt: `Photo of ${t.borrowerName}`,
-                "aspect-ratio": h.imageAspectRatio,
-                "default-image": { width: h.imageDefaultWidth },
-                hash: t.imageHash,
-                images: h.imageSizes,
-                "photo-path": m.photoPath
-              }, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
-              t.countryName ? (e(), n("div", O, [
-                d("p", S, [
-                  (e(), o(A, null, {
-                    default: w(() => [
-                      s(y, {
-                        class: "tw-ml-0.5 tw-mr-1 tw-flex-shrink-0",
-                        country: t.countryCode,
-                        name: t.countryName,
-                        "width-override": "16px",
-                        "hide-border": ""
-                      }, null, 8, ["country", "name"])
-                    ]),
-                    _: 1
-                  })),
-                  d("span", {
-                    id: `loan-location-${m.loanId}`,
-                    ref: "locationRef",
-                    class: "tw-truncate tw-min-w-0",
-                    style: { "margin-top": "0.125rem" }
-                  }, f(t.formattedLocation), 9, E),
-                  t.isLocationTruncated ? (e(), o(b, {
-                    key: 0,
-                    controller: `loan-location-${m.loanId}`,
-                    "max-width": "250px"
-                  }, {
-                    default: w(() => [
-                      p(f(t.formattedLocation), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["controller"])) : c("", !0)
-                ])
-              ])) : c("", !0)
-            ]),
-            _: 1
-          }, 8, ["to", "href"])),
-          m.isVisitor ? c("", !0) : (e(), o(v, {
-            key: 0,
-            "loan-id": m.loanId,
-            "is-bookmarked": m.isBookmarked,
-            class: "loan-bookmark tw-absolute tw-right-1.5 tw-top-0",
-            "data-testid": "loan-card-bookmark",
-            onToggleBookmark: a[1] || (a[1] = (l) => k.$emit("toggle-bookmark"))
-          }, null, 8, ["loan-id", "is-bookmarked"]))
-        ])),
-        t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(r, {
-          key: 2,
-          class: "tw-mt-1 tw-mx-auto",
-          style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
-        })) : 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: a[2] || (a[2] = (l) => t.clickReadMore("Name", l))
-        }, {
-          default: w(() => [
-            d("h3", {
-              class: _(["loan-card-name tw-text-title", { "tw-text-center": t.borrowerName.length < 20 }]),
-              style: { "font-size": "28px" }
-            }, f(t.borrowerName), 3)
-          ]),
-          _: 1
-        }, 8, ["to", "href"])),
-        t.isLoading ? (e(), n("div", F, [
-          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(r, {
-            key: 0,
-            class: "tw-mt-0.5 tw-mb-1",
-            style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
-          })) : c("", !0),
-          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(r, {
-            key: 1,
-            class: "tw-mt-0.5 tw-mb-1",
-            style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
-          })) : c("", !0),
-          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(r, {
-            key: 2,
-            class: "tw-mt-0.5 tw-mb-1",
-            style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
-          })) : c("", !0)
-        ])) : (e(), o(g(t.tag), {
-          key: 4,
-          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: a[3] || (a[3] = (l) => t.clickReadMore("Tag", l))
-        }, {
-          default: w(() => [
-            s(x, {
-              callouts: t.loanCallouts,
-              "add-bg-color": !1,
-              class: "loan-callouts"
-            }, null, 8, ["callouts"])
-          ]),
-          _: 1
-        }, 8, ["to", "href"])),
-        (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: a[4] || (a[4] = (l) => t.clickReadMore("Use", l))
-        }, {
-          default: w(() => [
-            d("div", {
-              class: _(["tw-pt-0.5 tw-px-2", { "tw-mb-1.5": !t.isLoading }])
-            }, [
-              t.isLoading ? (e(), n("div", U, [
-                (e(!0), n(T, null, I([...Array(3)], (l, N) => (e(), n("div", {
-                  key: N,
-                  class: "tw-h-2 tw-mb-1"
-                }, [
-                  s(r)
-                ]))), 128))
-              ])) : (e(), n("div", W, [
-                s(C, {
-                  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"])
-              ]))
-            ], 2)
-          ]),
-          _: 1
-        }, 8, ["to", "href"]))
-      ])
-    ]),
-    d("div", j, [
-      t.hasProgressData ? c("", !0) : (e(), n("div", K, [
-        d("div", G, [
-          s(r, {
-            class: "tw-mb-0.5",
-            style: { width: "20%", height: "1.3rem" }
-          }),
-          s(r, {
-            class: "tw-mb-0.5",
-            style: { width: "20%", height: "1.3rem" }
-          })
-        ]),
-        s(r, {
-          class: "tw-rounded",
-          style: { width: "100%", height: "0.5rem" }
-        })
-      ])),
-      d("div", null, [
-        t.sharesAvailable ? (e(), o(g(t.tag), {
-          key: 0,
-          to: t.readMorePath,
-          href: t.readMorePath,
-          class: "loan-card-progress tw-mt-1",
-          "aria-label": "Loan progress",
-          onClick: a[5] || (a[5] = (l) => t.clickReadMore("Progress", l))
-        }, {
-          default: w(() => [
-            s(L, {
-              id: "loanProgress",
-              "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"])) : c("", !0)
-      ]),
-      t.isLoading ? (e(), o(r, {
-        key: 1,
-        class: "tw-rounded tw-mx-auto tw-mt-2",
-        style: { width: "9rem", height: "1rem" }
-      })) : h.isFunded ? (e(), n("div", H, " 🎉 Fully funded! ")) : (e(), o(M, {
-        key: 3,
-        loan: m.loan,
-        "use-expanded-styles": !0,
-        "enable-multi-matching": m.enableMultiMatching,
-        style: { "font-size": "15px" },
-        class: "tw-text-center tw-pt-2"
-      }, null, 8, ["loan", "enable-multi-matching"]))
-    ])
-  ], 6);
-}
-const $ = /* @__PURE__ */ B(P, [["render", q], ["__scopeId", "data-v-2e03cf82"]]);
 export {
-  ot as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
-  at as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
-  $ as default
+  mo as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  fo as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  co as default
 };