@kiva/kv-components 10.6.0 → 10.6.1

package/dist/vue/KvCompactLoanCard.js

@@ -1,382 +1,418 @@
-import b from "graphql-tag";
-import $ from "numeral";
-import { ref as j, computed as a, watch as q } from "vue";
-import { mdiArrowRight as H, mdiCached as z, mdiLink as J } from "@mdi/js";
-import { LOAN_CALLOUTS_FRAGMENT as Q, LOAN_GEOCODE_FRAGMENT as X, LOAN_PROGRESS_FRAGMENT as Y, loanCardComputedProperties as Z, loanCardMethods as ee } from "../utils/loanCard.js";
-import { getDropdownPriceArray as te, getLendCtaSelectedOption as ae, isLessThan25 as oe } from "../utils/loanUtils.js";
-import { computePostGoalLoanCardStatement as ne } from "../utils/postGoalStatement.js";
-import le from "./KvLoanUse2.js";
-import ie from "./KvBorrowerImage.js";
-import re from "./KvLoanCallouts.js";
-import se from "./KvLendCta2.js";
-import ue from "./KvLoanProgressGroup.js";
-import de from "./KvLoanTag2.js";
-import me from "./KvMaterialIcon.js";
-import fe from "./KvLoadingPlaceholder.js";
-import ce from "./KvLoanTeamPick.js";
-import he from "./KvSelect.js";
-import { KV_LEND_CTA_FRAGMENT as ve, KV_LEND_CTA_USER_FRAGMENT as ge } from "./KvLendCta.js";
-import { KV_LOAN_TAG_FRAGMENT as Le } from "./KvLoanTag.js";
-import { KV_LOAN_USE_FRAGMENT as ye } from "./KvLoanUse.js";
-const d = {
-  default: "default",
-  postGoal: "post-goal",
-  lightDetailed: "light-detailed"
-}, Ae = (e) => e < 500 && e >= 25, Ce = (e) => oe(e) || Ae(e), $e = b`
-	fragment KvCompactLoanCard on LoanBasic {
-		id
-		image {
-			id
-			hash
-		}
-		lenders(limit: 0) {
-			totalCount
-		}
-		loanFundraisingInfo {
-			id
-			fundedAmount
-		}
-		name
-		...KvLendCta
-		...KvLoanTag
-		...KvLoanUse
-		...LoanCallouts
-		...LoanGeocode
-		...LoanProgress
-	}
-	${ve}
-	${Le}
-	${ye}
-	${Q}
-	${X}
-	${Y}
-`, je = b`
-	fragment KvCompactLoanCardUser on LoanBasic {
-		id
-		...KvLendCtaUser
-	}
-	${ge}
-`, qe = {
-  name: "KvCompactLoanCard",
-  components: {
-    KvBorrowerImage: ie,
-    KvLoadingPlaceholder: fe,
-    KvLoanUse: le,
-    KvMaterialIcon: me,
-    KvLendCta: se,
-    KvLoanTag: de,
-    KvLoanCallouts: re,
-    KvLoanTeamPick: ce,
-    KvLoanProgressGroup: ue,
-    KvSelect: he
-  },
-  props: {
-    variant: {
-      type: String,
-      default: d.default,
-      validator: (e) => Object.values(d).includes(e)
-    },
-    loanId: {
-      type: Number,
-      default: void 0
-    },
-    loan: {
-      type: Object,
-      default: null
-    },
-    customLoanDetails: {
-      type: Boolean,
-      default: !1
-    },
-    showTags: {
-      type: Boolean,
-      default: !0
-    },
-    categoryPageName: {
-      type: String,
-      default: ""
-    },
-    enableFiveDollarsNotes: {
-      type: Boolean,
-      default: !1
-    },
-    isAdding: {
-      type: Boolean,
-      default: !1
-    },
-    isVisitor: {
-      type: Boolean,
-      default: !0
-    },
-    basketItems: {
-      type: Array,
-      default: () => []
-    },
-    kvTrackFunction: {
-      type: Function,
-      required: !0
-    },
-    photoPath: {
-      type: String,
-      required: !0
-    },
-    showViewLoan: {
-      type: Boolean,
-      default: !1
-    },
-    externalLinks: {
-      type: Boolean,
-      default: !1
-    },
-    externalLinksNewTab: {
-      type: Boolean,
-      default: !1
-    },
-    route: {
-      type: Object,
-      default: void 0
-    },
-    userBalance: {
-      type: String,
-      default: void 0
-    },
-    getCookie: {
-      type: Function,
-      default: void 0
-    },
-    setCookie: {
-      type: Function,
-      default: void 0
-    },
-    fiveDollarsSelected: {
-      type: Boolean,
-      default: !1
-    },
-    customCallouts: {
-      type: Array,
-      default: () => []
-    },
-    isTeamPick: {
-      type: Boolean,
-      default: !1
-    },
-    primaryButtonText: {
-      type: String,
-      default: "Lend"
-    },
-    secondaryButtonHandler: {
-      type: Function,
-      default: void 0
-    },
-    secondaryButtonText: {
-      type: String,
-      default: "Checkout now"
-    },
-    showContributors: {
-      type: Boolean,
-      default: !1
-    },
-    customHref: {
-      type: String,
-      default: ""
-    },
-    businessName: {
-      type: String,
-      default: ""
-    },
-    website: {
-      type: String,
-      default: ""
-    },
-    showLoanUse: {
-      type: Boolean,
-      default: !0
-    },
-    showLightView: {
-      type: Boolean,
-      default: !1
-    },
-    truncateWordsNumber: {
-      type: Number,
-      default: 0
-    },
-    showRefreshButton: {
-      type: Boolean,
-      default: !1
-    },
-    customAmountLent: {
-      type: String,
-      default: "25"
-    },
-    enableMultiMatching: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "refresh-button",
-    "jump-filter-page",
-    "add-to-basket",
-    "remove-from-basket",
-    "show-loan-details",
-    "update:selected-amount"
-  ],
-  setup(e, { emit: o }) {
-    const l = j(""), m = a(
-      () => e.variant === d.postGoal
-    ), s = a(
-      () => e.variant === d.lightDetailed
-    ), c = a(
-      () => m.value || s.value
-    ), w = a(
-      () => e.showRefreshButton && !s.value
-    ), {
-      allDataLoaded: S,
-      borrowerName: h,
-      distributionModel: v,
-      formattedLocation: g,
-      fundraisingPercent: B,
-      hasProgressData: _,
-      imageHash: N,
-      isLoading: T,
-      loanAmount: f,
-      loanBorrowerCount: L,
-      loanCallouts: k,
-      loanStatus: y,
-      loanUse: A,
-      readMorePath: R,
-      tag: F,
-      unreservedAmount: u,
-      sharesAvailable: M
-    } = Z(e), { clickReadMore: K } = ee(e, o), P = a(() => c.value ? void 0 : { width: "100px", height: "100px" }), D = a(() => {
-      if (!e.website)
-        return "";
-      const t = e.website.trim();
-      return t.startsWith("http://") || t.startsWith("https://") ? t : `https://${t}`;
-    }), E = a(() => {
-      if (c.value) return {};
-      const t = e.showLightView ? "auto" : "6.75rem", n = e.showLightView ? "none" : "6.75rem";
-      return { height: t, maxHeight: n };
-    }), G = a(() => $(f.value).format("$0,0")), i = a(() => {
-      var t;
-      return ne({
-        anonymizationLevel: (t = e.loan) == null ? void 0 : t.anonymizationLevel,
-        borrowerName: h.value,
-        distributionModel: v.value,
-        formattedLocation: g.value,
-        loanAmount: f.value,
-        loanBorrowerCount: L.value,
-        loanStatus: y.value,
-        loanUse: A.value
-      });
-    }), O = a(() => i.value.borrowerNameWithCountry), U = a(() => i.value.loanUsePrefixStart), V = a(() => i.value.loanUsePrefixEnd), x = a(() => i.value.statementTitle), I = a(() => i.value.visibleUseStatement), C = a(() => {
-      var r;
-      const t = parseFloat(u.value);
-      if (!t) return [];
-      const n = t < 25 ? parseFloat(`${((r = e.loan) == null ? void 0 : r.minNoteSize) ?? 25}`) : 25;
-      return te(
-        u.value,
-        Ce(t),
-        n,
-        e.enableFiveDollarsNotes,
-        e.isVisitor
-      );
-    });
-    q(
-      C,
-      (t) => {
-        var r, p;
-        if (!m.value) return;
-        if (!t.length) {
-          l.value = "";
-          return;
-        }
-        const n = ae(
-          e.getCookie,
-          e.setCookie,
-          e.enableFiveDollarsNotes,
-          (p = (r = e.route) == null ? void 0 : r.query) == null ? void 0 : p.utm_campaign,
-          u.value,
-          e.userBalance ? parseFloat(e.userBalance) : void 0,
-          e.fiveDollarsSelected
-        );
-        l.value = t.includes(n) ? n : t[0];
-      },
-      { immediate: !0 }
-    );
-    const W = a(() => s.value ? 2 : e.showLightView ? 3 : 4);
-    return {
-      allDataLoaded: S,
-      amountOptions: C,
-      borrowerImageStyle: P,
-      borrowerName: h,
-      borrowerNameWithCountry: O,
-      lightDetailedAmount: G,
-      distributionModel: v,
-      formattedLocation: g,
-      formattedWebsite: D,
-      fundraisingPercent: B,
-      hasProgressData: _,
-      imageHash: N,
-      isLightDetailedVariant: s,
-      isLoading: T,
-      isPostGoalVariant: m,
-      loanAmount: f,
-      loanBorrowerCount: L,
-      loanCallouts: k,
-      loanStatus: y,
-      loanUse: A,
-      loanUsePrefixEnd: V,
-      loanUsePrefixStart: U,
-      mdiLink: J,
-      mdiCached: z,
-      mdiArrowRight: H,
-      readMorePath: R,
-      shouldShowRefreshButton: w,
-      tag: F,
-      unreservedAmount: u,
-      sharesAvailable: M,
-      selectedAmount: l,
-      statementTitle: x,
-      customStyle: E,
-      loanUseLoadingRows: W,
-      visibleUseStatement: I,
-      clickReadMore: K,
-      trackWebsiteClick: () => {
-        e.kvTrackFunction(
-          "Lending",
-          "click-Business Website",
-          "Website",
-          e.loanId
-        );
-      },
-      handleRefreshButton: (t) => {
-        o("refresh-button", t);
-      },
-      handleSelectedAmount: (t) => {
-        var n;
-        l.value = t, o("update:selected-amount", t), e.kvTrackFunction(
-          "Lending",
-          "Modify lend amount",
-          t,
-          e.loanId ?? ((n = e.loan) == null ? void 0 : n.id)
-        );
-      }
-    };
-  },
-  computed: {
-    isInBasket() {
-      var e;
-      return ((e = this.basketItems) == null ? void 0 : e.some((o) => o.__typename === "LoanReservation" && o.id === this.loanId)) ?? !1;
-    },
-    hasMatchingInfo() {
-      var e, o, l;
-      return !!((e = this.loan) != null && e.matchingText) || this.enableMultiMatching && (((l = (o = this.loan) == null ? void 0 : o.simultaneousMatching) == null ? void 0 : l.length) ?? 0) > 0;
-    }
-  }
-};
+import D from "./KvCompactLoanCard.script.js";
+import { KV_COMPACT_LOAN_CARD_FRAGMENT as gt, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as ft } from "./KvCompactLoanCard.script.js";
+import { resolveComponent as h, openBlock as a, createElementBlock as l, normalizeClass as c, createVNode as i, createCommentVNode as g, createElementVNode as r, normalizeStyle as _, createBlock as d, resolveDynamicComponent as k, withCtx as f, Fragment as s, toDisplayString as w, withModifiers as R, renderList as u } from "vue";
+import "./KvCompactLoanCard.css";
+import B from "../_virtual/_plugin-vue_export-helper.js";
+const S = ["aria-busy"], G = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, U = {
+  key: 1,
+  class: "tw-flex-shrink-0 tw-overflow-hidden"
+}, I = {
+  key: 0,
+  class: "tw-w-full"
+}, W = ["title"], j = { class: "tw-flex tw-items-center tw-gap-0.5 tw-w-full tw-min-w-0" }, E = { class: "tw-text-gray-600 !tw-font-medium tw-text-small tw-leading-normal tw-flex-shrink-0" }, F = ["title"], O = {
+  key: 1,
+  class: "tw-mb-0.5 tw-w-full"
+}, K = { class: "tw-text-primary !tw-font-medium tw-text-base tw-leading-normal tw-truncate" }, z = ["href"], H = { class: "tw-truncate" }, Z = ["title"], q = { class: "tw-font-medium" }, J = {
+  key: 0,
+  "data-testid": "loan-use-loading",
+  class: "tw-w-full tw-overflow-hidden"
+}, Q = {
+  key: 1,
+  class: "loan-card-use-text-light-detailed tw-w-full tw-overflow-hidden"
+}, X = {
+  key: 0,
+  class: "tw-w-full tw-overflow-hidden"
+}, Y = { class: "tw-flex-1 tw-min-w-0 tw-mr-1" }, p = {
+  class: "tw-flex-1 tw-min-w-0 tw-px-0.5",
+  style: { "max-width": "9.75rem" }
+}, $ = { class: "tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0" }, tt = {
+  "data-testid": "light-detailed-amount-pill",
+  class: "tw-border tw-border-gray-100 tw-rounded-sm tw-px-1 tw-py-0.5 tw-text-label tw-text-primary"
+}, et = {
+  class: "tw-flex-1 tw-min-w-0",
+  style: { "max-width": "6.5rem" }
+}, at = ["value"], ot = { class: "tw-flex-1 tw-min-w-0" }, nt = { class: "tw-p-1 tw-rounded-l-sm tw-border tw-border-gray-100 tw-border-r-0" };
+function lt(b, n, e, t, rt, x) {
+  var V;
+  const v = h("kv-material-icon"), m = h("kv-loading-placeholder"), P = h("kv-borrower-image"), C = h("kv-loan-tag"), L = h("kv-loan-use"), M = h("kv-loan-callouts"), y = h("kv-loan-progress-group"), N = h("kv-select"), A = h("kv-lend-cta");
+  return a(), l("div", {
+    class: c(["tw-flex tw-flex-col tw-items-start tw-justify-between tw-p-1 tw-bg-white tw-shadow-lg tw-w-full", {
+      "tw-relative": t.shouldShowRefreshButton,
+      "!tw-p-1.5": e.showLightView || t.isPostGoalVariant,
+      "tw-rounded-md": !t.isLightDetailedVariant,
+      "tw-rounded": t.isLightDetailedVariant
+    }]),
+    "aria-busy": t.isLoading ? "true" : "false"
+  }, [
+    t.shouldShowRefreshButton ? (a(), l("button", {
+      key: 0,
+      class: "tw-absolute tw--top-1 tw--right-1 tw-bg-white tw-rounded-full tw-w-2.5 tw-h-2.5 tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-drop-shadow-sm",
+      onClick: n[0] || (n[0] = (...o) => t.handleRefreshButton && t.handleRefreshButton(...o))
+    }, [
+      i(v, {
+        icon: t.mdiCached,
+        class: "tw-w-2.5 tw-h-2.5 tw--scale-x-100 tw-text-gray-500"
+      }, null, 8, ["icon"])
+    ])) : g("", !0),
+    r("div", G, [
+      r("div", {
+        class: c(["tw-flex tw-items-start tw-gap-2 tw-w-full loan-card-active-hover", {
+          "!tw-gap-1": e.showLightView || t.isLightDetailedVariant,
+          "!tw-gap-1.5 md:!tw-gap-2.5": t.isPostGoalVariant
+        }]),
+        style: _(t.customStyle)
+      }, [
+        t.isLoading ? (a(), d(m, {
+          key: 0,
+          "aria-hidden": "true",
+          class: c({
+            "!tw-w-7.5 !tw-h-7.5": e.showLightView,
+            "!tw-w-7.5 !tw-h-7.5 md:!tw-w-12.5 md:!tw-h-12.5": t.isPostGoalVariant,
+            "!tw-w-9.5 !tw-h-9.5": t.isLightDetailedVariant
+          }),
+          style: _(t.borrowerImageStyle)
+        }, null, 8, ["class", "style"])) : (a(), l("div", U, [
+          (a(), d(k(t.tag), {
+            to: t.readMorePath,
+            href: t.readMorePath,
+            target: e.externalLinksNewTab ? "_blank" : void 0,
+            rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
+            class: "tw-flex",
+            "aria-label": "Borrower image",
+            onClick: n[1] || (n[1] = (o) => t.clickReadMore("Photo", o))
+          }, {
+            default: f(() => [
+              i(P, {
+                class: c(["tw-bg-gray-300 tw-rounded-sm tw-object-cover tw-bg-clip-content", {
+                  "!tw-w-7.5 !tw-h-7.5": e.showLightView,
+                  "!tw-w-7.5 !tw-h-7.5 md:!tw-w-12.5 md:!tw-h-12.5": t.isPostGoalVariant,
+                  "!tw-w-9.5 !tw-h-9.5": t.isLightDetailedVariant
+                }]),
+                style: _(t.borrowerImageStyle),
+                alt: `Photo of ${t.borrowerName}`,
+                "aspect-ratio": 1,
+                "default-image": { width: 200, faceZoom: 50 },
+                hash: t.imageHash,
+                images: [{ width: 200, faceZoom: 50 }],
+                "photo-path": e.photoPath
+              }, null, 8, ["class", "style", "alt", "hash", "photo-path"])
+            ]),
+            _: 1
+          }, 8, ["to", "href", "target", "rel"]))
+        ])),
+        r("div", {
+          class: c(["tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0", { "!tw-gap-0": t.isPostGoalVariant }])
+        }, [
+          t.isLightDetailedVariant ? (a(), l("div", I, [
+            t.isLoading ? (a(), l(s, { key: 0 }, [
+              i(m, { class: "tw-mb-0.5 !tw-w-full !tw-h-2" }),
+              i(m, { class: "!tw-w-9 !tw-h-2" })
+            ], 64)) : (a(), l(s, { key: 1 }, [
+              r("p", {
+                title: t.borrowerName,
+                class: "tw-text-primary !tw-font-medium tw-text-small tw-leading-normal tw-truncate tw-w-full"
+              }, w(t.borrowerName), 9, W),
+              r("div", j, [
+                r("span", E, w(t.lightDetailedAmount), 1),
+                t.formattedLocation ? (a(), l(s, { key: 0 }, [
+                  n[14] || (n[14] = r("span", {
+                    "aria-hidden": "true",
+                    class: "tw-w-0.5 tw-h-0.5 tw-rounded-full tw-bg-gray-600 tw-flex-shrink-0"
+                  }, null, -1)),
+                  r("span", {
+                    title: t.formattedLocation,
+                    class: "tw-text-gray-600 !tw-font-medium tw-text-small tw-leading-normal tw-truncate tw-min-w-0"
+                  }, w(t.formattedLocation), 9, F)
+                ], 64)) : g("", !0)
+              ])
+            ], 64))
+          ])) : e.businessName ? (a(), l("div", O, [
+            (a(), d(k(t.tag), {
+              to: t.readMorePath,
+              href: t.readMorePath,
+              target: e.externalLinksNewTab ? "_blank" : void 0,
+              rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
+              class: "tw-no-underline hover:tw-underline focus:tw-no-underline",
+              "aria-label": "Business name",
+              onClick: n[2] || (n[2] = (o) => t.clickReadMore("Business", o))
+            }, {
+              default: f(() => [
+                r("h3", K, w(e.businessName), 1)
+              ]),
+              _: 1
+            }, 8, ["to", "href", "target", "rel"])),
+            e.website ? (a(), l("a", {
+              key: 0,
+              href: t.formattedWebsite,
+              target: "_blank",
+              class: "tw-flex tw-items-center tw-gap-0.5 tw-text-secondary tw-text-small tw-font-light tw-leading-normal tw-no-underline hover:tw-underline",
+              onClick: n[3] || (n[3] = R((...o) => t.trackWebsiteClick && t.trackWebsiteClick(...o), ["stop"]))
+            }, [
+              i(v, {
+                icon: t.mdiLink,
+                class: "tw-w-2 tw-h-2"
+              }, null, 8, ["icon"]),
+              r("span", H, w(e.website), 1)
+            ], 8, z)) : g("", !0)
+          ])) : g("", !0),
+          !t.isLoading && !t.isLightDetailedVariant ? (a(), d(k(t.tag), {
+            key: 2,
+            to: t.readMorePath,
+            href: t.readMorePath,
+            target: e.externalLinksNewTab ? "_blank" : void 0,
+            rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
+            class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline -tw-mt-1",
+            "aria-label": "Loan tag",
+            onClick: n[4] || (n[4] = (o) => t.clickReadMore("Tag", o))
+          }, {
+            default: f(() => [
+              e.showTags ? (a(), d(C, {
+                key: 0,
+                class: c({
+                  "tw-mb-1 !tw-font-medium": t.isPostGoalVariant
+                }),
+                loan: e.loan,
+                "enable-multi-matching": e.enableMultiMatching
+              }, null, 8, ["class", "loan", "enable-multi-matching"])) : g("", !0)
+            ]),
+            _: 1
+          }, 8, ["to", "href", "target", "rel"])) : g("", !0),
+          t.isPostGoalVariant ? (a(), l(s, { key: 3 }, [
+            t.isLoading ? (a(), l(s, { key: 0 }, u(4, (o) => i(m, {
+              key: o,
+              class: "tw-mb-0.5 md:!tw-mb-1.5 !tw-w-full !tw-h-1.5 md:!tw-h-2"
+            })), 64)) : (a(), l("p", {
+              key: 1,
+              class: "tw-text-small tw-mb-0 tw-leading-normal",
+              style: { "line-height": "150%" },
+              title: t.statementTitle,
+              "data-testid": "loan-use-statement"
+            }, [
+              r("span", null, w(t.loanUsePrefixStart), 1),
+              r("span", q, w(t.borrowerNameWithCountry), 1),
+              r("span", null, w(t.loanUsePrefixEnd), 1),
+              r("span", null, w(t.visibleUseStatement), 1)
+            ], 8, Z))
+          ], 64)) : t.isLightDetailedVariant ? (a(), l(s, { key: 4 }, [
+            t.isLoading ? (a(), l("div", J, [
+              (a(!0), l(s, null, u(t.loanUseLoadingRows, (o) => (a(), l("div", {
+                key: o,
+                class: "tw-h-2 tw-mb-1"
+              }, [
+                i(m)
+              ]))), 128))
+            ])) : (a(), l("div", Q, [
+              i(L, {
+                use: t.loanUse,
+                "loan-amount": t.loanAmount,
+                status: t.loanStatus,
+                "borrower-count": t.loanBorrowerCount,
+                name: t.borrowerName,
+                "distribution-model": t.distributionModel,
+                "hide-borrower-details": !0,
+                "data-testid": "loan-use-statement",
+                class: "tw-text-small tw-leading-normal tw-text-primary"
+              }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model"])
+            ]))
+          ], 64)) : e.showLoanUse ? (a(), d(k(t.tag), {
+            key: 5,
+            to: t.readMorePath,
+            href: t.readMorePath,
+            target: e.externalLinksNewTab ? "_blank" : void 0,
+            rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
+            class: "loan-card-use tw-no-underline tw-text-primary tw-block tw-w-full",
+            "aria-label": "Loan use",
+            onClick: n[5] || (n[5] = (o) => t.clickReadMore("Use", o))
+          }, {
+            default: f(() => [
+              t.isLoading ? (a(), l("div", X, [
+                (a(!0), l(s, null, u([...Array(t.loanUseLoadingRows)], (o, T) => (a(), l("div", {
+                  key: T,
+                  class: "tw-h-2 tw-mb-1"
+                }, [
+                  i(m)
+                ]))), 128))
+              ])) : (a(), l("div", {
+                key: 1,
+                class: c(["tw-w-full tw-overflow-hidden", { "!tw--mt-1": e.showTags && x.hasMatchingInfo && e.showLightView }])
+              }, [
+                i(L, {
+                  use: t.loanUse,
+                  "loan-amount": t.loanAmount,
+                  status: t.loanStatus,
+                  "borrower-count": t.loanBorrowerCount,
+                  name: t.borrowerName,
+                  "distribution-model": t.distributionModel,
+                  "bold-name": !0,
+                  country: t.formattedLocation,
+                  "show-read-more": e.showLightView,
+                  "truncate-words-number": e.truncateWordsNumber,
+                  class: "tw-text-small tw-leading-tight"
+                }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model", "country", "show-read-more", "truncate-words-number"])
+              ], 2))
+            ]),
+            _: 1
+          }, 8, ["to", "href", "target", "rel"])) : g("", !0)
+        ], 2)
+      ], 6),
+      t.isLoading || typeof t.loanCallouts > "u" ? (a(), d(m, {
+        key: 0,
+        class: "tw-mt-1.5 tw-mb-1 tw-rounded-full",
+        style: { width: "60%", height: "1.5rem" }
+      })) : (a(), d(M, {
+        key: 1,
+        callouts: t.loanCallouts,
+        class: c(["tw-mt-1.5", { "goal-variant-callouts": t.isPostGoalVariant }]),
+        onClick: n[6] || (n[6] = (o) => b.$emit("jump-filter-page", o))
+      }, null, 8, ["callouts", "class"]))
+    ]),
+    r("div", {
+      class: c(["tw-flex tw-items-center tw-justify-between tw-w-full tw-mt-1", {
+        "tw-gap-1": t.sharesAvailable,
+        "!tw-items-end !tw-gap-2": t.isPostGoalVariant,
+        "!tw-mt-1.5": t.isLightDetailedVariant
+      }])
+    }, [
+      t.hasProgressData ? t.isLightDetailedVariant ? (a(), l(s, { key: 1 }, [
+        r("div", p, [
+          i(y, {
+            "money-left": t.unreservedAmount,
+            "progress-percent": t.fundraisingPercent,
+            class: "tw-text-black light-detailed-progress-group"
+          }, null, 8, ["money-left", "progress-percent"])
+        ]),
+        r("div", $, [
+          r("span", tt, " $" + w(e.customAmountLent), 1),
+          (a(), d(k(t.tag), {
+            to: t.readMorePath,
+            href: t.readMorePath,
+            target: e.externalLinksNewTab ? "_blank" : void 0,
+            rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
+            class: "tw-flex tw-items-center tw-justify-center",
+            "aria-label": `View ${t.borrowerName || "this borrower"}'s loan details`,
+            onClick: n[7] || (n[7] = (o) => t.clickReadMore("Arrow", o))
+          }, {
+            default: f(() => [
+              i(v, {
+                icon: t.mdiArrowRight,
+                class: "tw-w-2.5 tw-h-2.5 tw-text-action"
+              }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["to", "href", "target", "rel", "aria-label"]))
+        ])
+      ], 64)) : t.isPostGoalVariant ? (a(), l(s, { key: 2 }, [
+        r("div", et, [
+          i(y, {
+            "money-left": t.unreservedAmount,
+            "progress-percent": t.fundraisingPercent,
+            class: "tw-text-black goal-variant-progress-group"
+          }, null, 8, ["money-left", "progress-percent"])
+        ]),
+        r("div", null, [
+          i(N, {
+            id: `PostGoalAmountDropdown_${((V = e.loan) == null ? void 0 : V.id) ?? e.loanId}`,
+            modelValue: t.selectedAmount,
+            "onUpdate:modelValue": [
+              n[8] || (n[8] = (o) => t.selectedAmount = o),
+              t.handleSelectedAmount
+            ],
+            "aria-label": "Lend amount",
+            disabled: !t.amountOptions.length || x.isInBasket,
+            class: "amount-dropdown"
+          }, {
+            default: f(() => [
+              (a(!0), l(s, null, u(t.amountOptions, (o) => (a(), l("option", {
+                key: o,
+                value: o
+              }, " $" + w(o), 9, at))), 128))
+            ]),
+            _: 1
+          }, 8, ["id", "modelValue", "disabled", "onUpdate:modelValue"])
+        ])
+      ], 64)) : (a(), l(s, { key: 3 }, [
+        r("div", ot, [
+          t.sharesAvailable ? (a(), d(k(t.tag), {
+            key: 0,
+            to: t.readMorePath,
+            href: t.readMorePath,
+            target: e.externalLinksNewTab ? "_blank" : void 0,
+            rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
+            class: "loan-card-progress tw-no-underline tw-block",
+            "aria-label": "Loan progress",
+            onClick: n[9] || (n[9] = (o) => t.clickReadMore("Progress", o))
+          }, {
+            default: f(() => [
+              i(y, {
+                id: "loanProgress",
+                "money-left": t.unreservedAmount,
+                "progress-percent": t.fundraisingPercent,
+                class: "tw-text-black"
+              }, null, 8, ["money-left", "progress-percent"])
+            ]),
+            _: 1
+          }, 8, ["to", "href", "target", "rel"])) : g("", !0)
+        ]),
+        e.showLightView ? (a(), l("button", {
+          key: 0,
+          class: "tw-ml-2",
+          onClick: n[10] || (n[10] = (o) => t.clickReadMore("View", o))
+        }, [
+          r("span", nt, " $" + w(e.customAmountLent), 1),
+          n[15] || (n[15] = r("span", { class: "tw-bg-gray-100 tw-px-1.5 tw-py-1 tw-rounded-r-sm tw-border tw-border-gray-100 tw-text-action tw-font-medium hover:tw-underline tw-text-center tw-cursor-pointer" }, " View ", -1))
+        ])) : (a(), l("div", {
+          key: 1,
+          class: c(["tw-flex-shrink-0 loan-card-cta", { "tw-w-full": !t.sharesAvailable }]),
+          style: { height: "40px" }
+        }, [
+          i(A, {
+            loan: e.loan,
+            "unreserved-amount": t.unreservedAmount,
+            "basket-items": e.basketItems,
+            "is-loading": t.isLoading,
+            "is-adding": e.isAdding,
+            "enable-five-dollars-notes": e.enableFiveDollarsNotes,
+            "five-dollars-selected": e.fiveDollarsSelected,
+            "kv-track-function": e.kvTrackFunction,
+            "show-view-loan": e.showViewLoan,
+            "custom-loan-details": e.customLoanDetails,
+            "external-links": e.externalLinks,
+            route: e.route,
+            "user-balance": e.userBalance,
+            "get-cookie": e.getCookie,
+            "set-cookie": e.setCookie,
+            "is-visitor": e.isVisitor,
+            "primary-button-text": e.primaryButtonText,
+            "secondary-button-text": e.secondaryButtonText,
+            "secondary-button-handler": e.secondaryButtonHandler,
+            onAddToBasket: n[11] || (n[11] = (o) => b.$emit("add-to-basket", o)),
+            onShowLoanDetails: n[12] || (n[12] = (o) => t.clickReadMore("ViewLoan", o)),
+            onRemoveFromBasket: n[13] || (n[13] = (o) => b.$emit("remove-from-basket", o))
+          }, null, 8, ["loan", "unreserved-amount", "basket-items", "is-loading", "is-adding", "enable-five-dollars-notes", "five-dollars-selected", "kv-track-function", "show-view-loan", "custom-loan-details", "external-links", "route", "user-balance", "get-cookie", "set-cookie", "is-visitor", "primary-button-text", "secondary-button-text", "secondary-button-handler"])
+        ], 2))
+      ], 64)) : (a(), l(s, { key: 0 }, [
+        r("div", Y, [
+          i(m, {
+            class: "tw-mb-0.5",
+            style: { width: "100%", maxWidth: "11rem", height: "1rem" }
+          }),
+          i(m, {
+            class: "tw-rounded",
+            style: { width: "100%", maxWidth: "11rem", height: "0.5rem" }
+          })
+        ]),
+        t.allDataLoaded ? g("", !0) : (a(), d(m, {
+          key: 0,
+          class: "tw-rounded tw-flex-shrink-0",
+          style: { width: "8rem", height: "2.5rem" }
+        }))
+      ], 64))
+    ], 2)
+  ], 10, S);
+}
+const mt = /* @__PURE__ */ B(D, [["render", lt], ["__scopeId", "data-v-330ff302"]]);
 export {
-  $e as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  je as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  qe as default
+  gt as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  ft as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  mt as default
 };