@kiva/kv-components 8.26.0 → 8.26.1

package/dist/vue/KvLoanInfoCard.js

@@ -1,14 +1,15 @@
-import B from "graphql-tag";
-import { LOAN_GEOCODE_FRAGMENT as R, loanCardComputedProperties as z, loanCardMethods as D } from "../utils/loanCard.js";
-import K from "./KvLoanUse.js";
-import W from "./KvBorrowerImage.js";
-import F from "./KvMaterialIcon.js";
-import E from "./KvLoadingPlaceholder.js";
-import { resolveComponent as m, openBlock as t, createElementBlock as i, normalizeStyle as I, normalizeClass as _, createElementVNode as l, createBlock as c, resolveDynamicComponent as v, withCtx as k, createVNode as s, toDisplayString as b, createCommentVNode as T, Fragment as O, renderList as U, withModifiers as V } from "vue";
+import K from "graphql-tag";
+import { LOAN_GEOCODE_FRAGMENT as z, loanCardComputedProperties as D, loanCardMethods as I, useLocationTruncation as W } from "../utils/loanCard.js";
+import F from "./KvLoanUse.js";
+import E from "./KvBorrowerImage.js";
+import O from "./KvMaterialIcon.js";
+import V from "./KvLoadingPlaceholder.js";
+import U from "./KvTooltip.js";
+import { resolveComponent as s, openBlock as e, createElementBlock as i, normalizeStyle as G, normalizeClass as k, createElementVNode as l, createBlock as c, resolveDynamicComponent as y, withCtx as w, createVNode as m, toDisplayString as b, createTextVNode as H, createCommentVNode as L, Fragment as q, renderList as j, withModifiers as J } from "vue";
 import "./KvLoanInfoCard.css";
-import G from "../_virtual/_plugin-vue_export-helper.js";
-import { KV_LOAN_USE_FRAGMENT as H } from "./KvLoanUse2.js";
-const fe = B`
+import Q from "../_virtual/_plugin-vue_export-helper.js";
+import { KV_LOAN_USE_FRAGMENT as X } from "./KvLoanUse2.js";
+const bt = K`
 	fragment KvLoanInfoCard on LoanBasic {
 		id
 		gender
@@ -20,15 +21,16 @@ const fe = B`
 		...KvLoanUse
 		...LoanGeocode
 	}
-	${H}
-	${R}
-`, q = {
+	${X}
+	${z}
+`, Y = {
   name: "KvLoanInfoCard",
   components: {
-    KvBorrowerImage: W,
-    KvLoadingPlaceholder: E,
-    KvLoanUse: K,
-    KvMaterialIcon: F
+    KvBorrowerImage: E,
+    KvLoadingPlaceholder: V,
+    KvLoanUse: F,
+    KvMaterialIcon: O,
+    KvTooltip: U
   },
   props: {
     loanId: {
@@ -76,49 +78,54 @@ const fe = B`
       default: ""
     }
   },
-  setup(w, { emit: a }) {
+  setup(h, { emit: a }) {
     const {
       allDataLoaded: o,
-      borrowerName: e,
-      city: y,
+      borrowerName: t,
+      city: x,
       countryName: n,
       distributionModel: d,
-      formattedLocation: h,
-      imageHash: u,
-      isLoading: f,
-      loanAmount: r,
-      loanBorrowerCount: g,
-      loanStatus: p,
-      loanUse: x,
-      mdiMapMarker: L,
-      readMorePath: C,
-      state: M,
-      tag: N,
-      unreservedAmount: S,
-      sharesAvailable: A
-    } = z(w), {
-      clickReadMore: P
-    } = D(w, a);
+      formattedLocation: u,
+      imageHash: f,
+      isLoading: g,
+      loanAmount: _,
+      loanBorrowerCount: r,
+      loanStatus: v,
+      loanUse: p,
+      mdiMapMarker: C,
+      readMorePath: M,
+      state: N,
+      tag: S,
+      unreservedAmount: A,
+      sharesAvailable: P
+    } = D(h), {
+      clickReadMore: R
+    } = I(h, a), {
+      locationRef: T,
+      isLocationTruncated: B
+    } = W();
     return {
       allDataLoaded: o,
-      borrowerName: e,
-      city: y,
+      borrowerName: t,
+      city: x,
       countryName: n,
       distributionModel: d,
-      formattedLocation: h,
-      imageHash: u,
-      isLoading: f,
-      loanAmount: r,
-      loanBorrowerCount: g,
-      loanStatus: p,
-      loanUse: x,
-      mdiMapMarker: L,
-      readMorePath: C,
-      state: M,
-      tag: N,
-      unreservedAmount: S,
-      sharesAvailable: A,
-      clickReadMore: P
+      formattedLocation: u,
+      imageHash: f,
+      isLoading: g,
+      loanAmount: _,
+      loanBorrowerCount: r,
+      loanStatus: v,
+      loanUse: p,
+      mdiMapMarker: C,
+      readMorePath: M,
+      state: N,
+      tag: S,
+      unreservedAmount: A,
+      sharesAvailable: P,
+      clickReadMore: R,
+      locationRef: T,
+      isLocationTruncated: B
     };
   },
   computed: {
@@ -141,90 +148,105 @@ const fe = B`
       ];
     }
   }
-}, j = { class: "tw-grow" }, J = { class: "loan-card-active-hover tw-h-full tw-flex tw-flex-col" }, Q = {
+}, Z = { class: "tw-grow" }, $ = { class: "loan-card-active-hover tw-h-full tw-flex tw-flex-col" }, tt = {
   key: 1,
   class: "tw-relative"
-}, X = { key: 0 }, Y = {
-  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-label tw-flex tw-items-center tw-h-3",
-  style: { padding: "2px 6px", "text-transform": "capitalize" }
-}, Z = { style: { "margin-top": "0.125rem" } }, $ = { class: "tw-mb-1.5 tw-pt-1" }, ee = {
+}, et = { key: 0 }, ot = {
+  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",
+  style: { padding: "2px 6px", "text-transform": "capitalize", "max-width": "calc(100% - 1rem)" }
+}, at = ["id"], rt = { class: "tw-mb-1.5 tw-pt-1" }, it = {
   key: 0,
   class: "tw-w-full",
   style: { height: "5.5rem" }
-}, te = { key: 1 }, ae = { class: "tw-mt-1" }, oe = {
+}, nt = { key: 1 }, lt = { class: "tw-mt-1" }, dt = {
   key: 0,
   class: "tw-w-full",
   style: { height: "1rem" }
 };
-function re(w, a, o, e, y, n) {
-  const d = m("kv-loading-placeholder"), h = m("kv-borrower-image"), u = m("kv-material-icon"), f = m("kv-loan-use");
-  return t(), i("div", {
-    class: _(["tw-flex tw-flex-col tw-bg-white tw-rounded tw-h-full tw-w-full tw-pb-1 tw-p-1", { "tw-pointer-events-none": e.isLoading }]),
+function st(h, a, o, t, x, n) {
+  const d = s("kv-loading-placeholder"), u = s("kv-borrower-image"), f = s("kv-material-icon"), g = s("kv-tooltip"), _ = s("kv-loan-use");
+  return e(), i("div", {
+    class: k(["tw-flex tw-flex-col tw-bg-white tw-rounded tw-h-full tw-w-full tw-pb-1 tw-p-1", { "tw-pointer-events-none": t.isLoading }]),
     "data-testid": "loan-card",
-    style: I([{ "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }, { minWidth: "230px", maxWidth: n.cardWidth }])
+    style: G([{ "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }, { minWidth: "230px", maxWidth: n.cardWidth }])
   }, [
-    l("div", j, [
-      l("div", J, [
-        e.isLoading ? (t(), c(d, {
+    l("div", Z, [
+      l("div", $, [
+        t.isLoading ? (e(), c(d, {
           key: 0,
-          class: _(["tw-mb-1 tw-w-full", { "tw-rounded-t-sm tw-rounded-b-none": o.largeCard, "!tw-rounded-sm": !o.largeCard }]),
+          class: k(["tw-mb-1 tw-w-full", { "tw-rounded-t-sm tw-rounded-b-none": o.largeCard, "!tw-rounded-sm": !o.largeCard }]),
           style: { height: "15rem" }
-        }, null, 8, ["class"])) : (t(), i("div", Q, [
-          (t(), c(v(e.tag), {
-            to: e.readMorePath,
-            href: e.readMorePath,
+        }, null, 8, ["class"])) : (e(), i("div", tt, [
+          (e(), c(y(t.tag), {
+            to: t.readMorePath,
+            href: t.readMorePath,
             class: "tw-flex",
             "aria-label": "Borrower image",
-            onClick: a[0] || (a[0] = (r) => e.clickReadMore("Photo", r))
+            onClick: a[0] || (a[0] = (r) => t.clickReadMore("Photo", r))
           }, {
-            default: k(() => [
-              s(h, {
-                class: _(["tw-relative tw-w-full tw-bg-black tw-bg-clip-content", { "tw-rounded-t-sm": o.largeCard, "tw-rounded-sm": !o.largeCard }]),
-                alt: `Photo of ${e.borrowerName}`,
+            default: w(() => [
+              m(u, {
+                class: k(["tw-relative tw-w-full tw-bg-black tw-bg-clip-content", { "tw-rounded-t-sm": o.largeCard, "tw-rounded-sm": !o.largeCard }]),
+                alt: `Photo of ${t.borrowerName}`,
                 "aspect-ratio": n.imageAspectRatio,
                 "default-image": { width: n.imageDefaultWidth },
-                hash: e.imageHash,
+                hash: t.imageHash,
                 images: n.imageSizes,
                 "photo-path": o.photoPath
               }, null, 8, ["class", "alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
-              e.countryName ? (t(), i("div", X, [
-                l("p", Y, [
-                  s(u, {
-                    class: "tw-h-2 tw-w-2",
-                    icon: e.mdiMapMarker
+              t.countryName ? (e(), i("div", et, [
+                l("p", ot, [
+                  m(f, {
+                    class: "tw-h-2 tw-w-2 tw-flex-shrink-0",
+                    icon: t.mdiMapMarker
                   }, null, 8, ["icon"]),
-                  l("span", Z, b(e.formattedLocation), 1)
+                  l("span", {
+                    id: `loan-location-${o.loanId}`,
+                    ref: "locationRef",
+                    class: "tw-truncate tw-min-w-0",
+                    style: { "margin-top": "0.125rem" }
+                  }, b(t.formattedLocation), 9, at),
+                  t.isLocationTruncated ? (e(), c(g, {
+                    key: 0,
+                    controller: `loan-location-${o.loanId}`,
+                    "max-width": "250px"
+                  }, {
+                    default: w(() => [
+                      H(b(t.formattedLocation), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["controller"])) : L("", !0)
                 ])
-              ])) : T("", !0)
+              ])) : L("", !0)
             ]),
             _: 1
           }, 8, ["to", "href"]))
         ])),
-        (t(), c(v(e.tag), {
-          to: e.readMorePath,
-          href: e.readMorePath,
+        (e(), c(y(t.tag), {
+          to: t.readMorePath,
+          href: t.readMorePath,
           class: "loan-card-use tw-no-underline tw-text-primary",
           "aria-label": "Loan use",
-          onClick: a[1] || (a[1] = (r) => e.clickReadMore("Use", r))
+          onClick: a[1] || (a[1] = (r) => t.clickReadMore("Use", r))
         }, {
-          default: k(() => [
-            l("div", $, [
-              e.isLoading ? (t(), i("div", ee, [
-                (t(!0), i(O, null, U([...Array(4)], (r, g) => (t(), i("div", {
-                  key: g,
+          default: w(() => [
+            l("div", rt, [
+              t.isLoading ? (e(), i("div", it, [
+                (e(!0), i(q, null, j([...Array(4)], (r, v) => (e(), i("div", {
+                  key: v,
                   class: "tw-h-2 tw-mb-1"
                 }, [
-                  s(d)
+                  m(d)
                 ]))), 128))
-              ])) : (t(), i("div", te, [
-                s(f, {
-                  use: e.loanUse,
+              ])) : (e(), i("div", nt, [
+                m(_, {
+                  use: t.loanUse,
                   "hide-loan-amount": !0,
-                  "loan-amount": e.loanAmount,
-                  status: e.loanStatus,
-                  "borrower-count": e.loanBorrowerCount,
-                  name: e.borrowerName,
-                  "distribution-model": e.distributionModel,
+                  "loan-amount": t.loanAmount,
+                  status: t.loanStatus,
+                  "borrower-count": t.loanBorrowerCount,
+                  name: t.borrowerName,
+                  "distribution-model": t.distributionModel,
                   "use-indicative-help-text": !0
                 }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model"])
               ]))
@@ -232,20 +254,20 @@ function re(w, a, o, e, y, n) {
           ]),
           _: 1
         }, 8, ["to", "href"])),
-        (t(), c(v(e.tag), {
-          to: e.readMorePath,
-          href: e.readMorePath,
+        (e(), c(y(t.tag), {
+          to: t.readMorePath,
+          href: t.readMorePath,
           class: "loan-card-learn-more tw-no-underline hover:tw-no-underline tw-font-medium tw-text-action hover:tw-text-action-highlight tw-mt-auto",
           "aria-label": o.primaryLinkText,
-          onClick: a[3] || (a[3] = (r) => e.clickReadMore(o.primaryLinkText, r))
+          onClick: a[3] || (a[3] = (r) => t.clickReadMore(o.primaryLinkText, r))
         }, {
-          default: k(() => [
-            l("div", ae, [
-              e.isLoading ? (t(), i("div", oe, [
-                s(d)
-              ])) : (t(), i("div", {
+          default: w(() => [
+            l("div", lt, [
+              t.isLoading ? (e(), i("div", dt, [
+                m(d)
+              ])) : (e(), i("div", {
                 key: 1,
-                onClick: a[2] || (a[2] = V((r) => e.clickReadMore("ViewLoan", r), ["prevent"]))
+                onClick: a[2] || (a[2] = J((r) => t.clickReadMore("ViewLoan", r), ["prevent"]))
               }, b(o.primaryLinkText), 1))
             ])
           ]),
@@ -255,8 +277,8 @@ function re(w, a, o, e, y, n) {
     ])
   ], 6);
 }
-const ge = /* @__PURE__ */ G(q, [["render", re], ["__scopeId", "data-v-13281840"]]);
+const xt = /* @__PURE__ */ Q(Y, [["render", st], ["__scopeId", "data-v-9cc15ed7"]]);
 export {
-  fe as KV_LOAN_INFO_CARD_FRAGMENT,
-  ge as default
+  bt as KV_LOAN_INFO_CARD_FRAGMENT,
+  xt as default
 };

package/dist/vue/KvWideLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-7478412d]:hover,.loan-card-use[data-v-7478412d]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-7478412d]{text-decoration-line:underline}.loan-card-progress[data-v-7478412d],.loan-card-progress[data-v-7478412d]:hover,.loan-card-progress[data-v-7478412d]:focus{text-decoration-line:none}.loan-callouts[data-v-7478412d] div{height:auto;flex-wrap:wrap}
+.loan-card-use[data-v-de4628d8]:hover,.loan-card-use[data-v-de4628d8]:focus{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1))}.loan-card-active-hover:hover .loan-card-use[data-v-de4628d8]{text-decoration-line:underline}.loan-card-progress[data-v-de4628d8],.loan-card-progress[data-v-de4628d8]:hover,.loan-card-progress[data-v-de4628d8]:focus{text-decoration-line:none}.loan-callouts[data-v-de4628d8] div{height:auto;flex-wrap:wrap}

package/dist/vue/KvWideLoanCard.js

@@ -1,43 +1,43 @@
-import P from "./KvWideLoanCard2.js";
-import { KV_WIDE_LOAN_CARD_FRAGMENT as p, KV_WIDE_LOAN_CARD_USER_FRAGMENT as $ } from "./KvWideLoanCard2.js";
-import { resolveComponent as r, openBlock as o, createElementBlock as i, normalizeClass as _, createElementVNode as s, createBlock as n, resolveDynamicComponent as m, withCtx as k, createVNode as d, toDisplayString as f, createCommentVNode as c, Fragment as D, renderList as N } from "vue";
+import D from "./KvWideLoanCard2.js";
+import { KV_WIDE_LOAN_CARD_FRAGMENT as ee, KV_WIDE_LOAN_CARD_USER_FRAGMENT as te } from "./KvWideLoanCard2.js";
+import { resolveComponent as i, openBlock as o, createElementBlock as r, normalizeClass as f, createElementVNode as s, createBlock as n, resolveDynamicComponent as k, withCtx as m, createVNode as d, toDisplayString as h, createTextVNode as N, createCommentVNode as w, Fragment as R, renderList as V } from "vue";
 import "./KvWideLoanCard.css";
-import R from "../_virtual/_plugin-vue_export-helper.js";
-const B = { class: "loan-card-active-hover tw-flex-1 tw-min-w-[275px] md:tw-min-w-[320px] md:tw-max-w-[320px]" }, V = {
+import B from "../_virtual/_plugin-vue_export-helper.js";
+const T = { class: "loan-card-active-hover tw-flex-1 tw-min-w-[275px] md:tw-min-w-[320px] md:tw-max-w-[320px]" }, E = {
   key: 1,
   class: "tw-relative tw-w-full"
-}, E = { key: 0 }, T = {
-  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-label tw-flex tw-items-center tw-h-3",
-  style: { padding: "2px 6px", "text-transform": "capitalize" }
-}, S = { style: { "margin-top": "0.125rem" } }, F = { class: "tw-flex tw-flex-col tw-flex-1 tw-px-1" }, I = { class: "tw-hidden md:tw-inline-block tw-text-title" }, W = { class: "tw-pt-1" }, z = {
+}, I = { 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",
+  style: { padding: "2px 6px", "text-transform": "capitalize", "max-width": "calc(100% - 1rem)" }
+}, F = ["id"], W = { class: "tw-flex tw-flex-col tw-flex-1 tw-px-1" }, z = { class: "tw-hidden md:tw-inline-block tw-text-title" }, K = { class: "tw-pt-1" }, U = {
   key: 0,
   class: "tw-w-full",
   style: { height: "5.5rem" }
-}, K = { key: 1 }, U = { class: "tw-flex tw-flex-row tw-justify-between tw-gap-1 md:tw-gap-3" }, G = {
+}, G = { key: 1 }, O = { class: "tw-flex tw-flex-row tw-justify-between tw-gap-1 md:tw-gap-3" }, j = {
   key: 0,
   class: "tw-w-full tw-pt-1 tw-pr-1"
 };
-function O(h, a, t, e, j, g) {
-  const w = r("kv-loading-placeholder"), v = r("kv-borrower-image"), u = r("kv-material-icon"), b = r("kv-loan-bookmark"), x = r("kv-loan-tag"), y = r("kv-loan-use"), L = r("kv-loan-callouts"), M = r("kv-loan-progress-group"), C = r("kv-lend-cta");
-  return o(), i("div", {
-    class: _(["tw-flex tw-flex-row tw-flex-wrap tw-bg-white tw-rounded tw-w-full tw-pb-1 tw-p-1 tw-gap-1 tw-items-center", { "tw-pointer-events-none": e.isLoading }]),
+function H(_, a, t, e, q, g) {
+  const c = i("kv-loading-placeholder"), v = i("kv-borrower-image"), u = i("kv-material-icon"), b = i("kv-tooltip"), x = i("kv-loan-bookmark"), y = i("kv-loan-tag"), L = i("kv-loan-use"), M = i("kv-loan-callouts"), C = i("kv-loan-progress-group"), A = i("kv-lend-cta");
+  return o(), r("div", {
+    class: f(["tw-flex tw-flex-row tw-flex-wrap tw-bg-white tw-rounded tw-w-full tw-pb-1 tw-p-1 tw-gap-1 tw-items-center", { "tw-pointer-events-none": e.isLoading }]),
     "data-testid": "loan-card",
     style: { "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }
   }, [
-    s("div", B, [
-      e.isLoading ? (o(), n(w, {
+    s("div", T, [
+      e.isLoading ? (o(), n(c, {
         key: 0,
         class: "tw-mb-1 tw-w-full tw-rounded",
         style: { height: "15rem" }
-      })) : (o(), i("div", V, [
-        (o(), n(m(e.tag), {
+      })) : (o(), r("div", E, [
+        (o(), n(k(e.tag), {
           to: e.readMorePath,
           href: e.readMorePath,
           class: "tw-flex",
           "aria-label": "Borrower image",
           onClick: a[0] || (a[0] = (l) => e.clickReadMore("Photo", l))
         }, {
-          default: k(() => [
+          default: m(() => [
             d(v, {
               class: "tw-relative tw-w-full tw-bg-black tw-rounded-sm tw-bg-clip-content",
               alt: `Photo of ${e.borrowerName}`,
@@ -47,65 +47,80 @@ function O(h, a, t, e, j, g) {
               images: g.imageSizes,
               "photo-path": t.photoPath
             }, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
-            e.countryName ? (o(), i("div", E, [
-              s("p", T, [
+            e.countryName ? (o(), r("div", I, [
+              s("p", S, [
                 d(u, {
-                  class: "tw-h-2 tw-w-2",
+                  class: "tw-h-2 tw-w-2 tw-flex-shrink-0",
                   icon: e.mdiMapMarker
                 }, null, 8, ["icon"]),
-                s("span", S, f(e.formattedLocation), 1)
+                s("span", {
+                  id: `loan-location-${t.loanId}`,
+                  ref: "locationRef",
+                  class: "tw-truncate tw-min-w-0",
+                  style: { "margin-top": "0.125rem" }
+                }, h(e.formattedLocation), 9, F),
+                e.isLocationTruncated ? (o(), n(b, {
+                  key: 0,
+                  controller: `loan-location-${t.loanId}`,
+                  "max-width": "250px"
+                }, {
+                  default: m(() => [
+                    N(h(e.formattedLocation), 1)
+                  ]),
+                  _: 1
+                }, 8, ["controller"])) : w("", !0)
               ])
-            ])) : c("", !0)
+            ])) : w("", !0)
           ]),
           _: 1
         }, 8, ["to", "href"])),
-        t.isVisitor ? c("", !0) : (o(), n(b, {
+        t.isVisitor ? w("", !0) : (o(), n(x, {
           key: 0,
           "loan-id": t.loanId,
           "is-bookmarked": t.isBookmarked,
           class: "tw-absolute tw-right-1",
           style: { top: "-6px" },
           "data-testid": "loan-card-bookmark",
-          onToggleBookmark: a[1] || (a[1] = (l) => h.$emit("toggle-bookmark"))
+          onToggleBookmark: a[1] || (a[1] = (l) => _.$emit("toggle-bookmark"))
         }, null, 8, ["loan-id", "is-bookmarked"]))
       ]))
     ]),
-    s("div", F, [
-      s("h3", I, f(e.borrowerName), 1),
-      (o(), n(m(e.tag), {
+    s("div", W, [
+      s("h3", z, h(e.borrowerName), 1),
+      (o(), n(k(e.tag), {
         to: e.readMorePath,
         href: e.readMorePath,
         class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline",
         "aria-label": "Loan tag",
         onClick: a[2] || (a[2] = (l) => e.clickReadMore("Tag", l))
       }, {
-        default: k(() => [
-          t.showTags && !e.isLoading ? (o(), n(x, {
+        default: m(() => [
+          t.showTags && !e.isLoading ? (o(), n(y, {
             key: 0,
             loan: t.loan,
             "enable-multi-matching": t.enableMultiMatching
-          }, null, 8, ["loan", "enable-multi-matching"])) : c("", !0)
+          }, null, 8, ["loan", "enable-multi-matching"])) : w("", !0)
         ]),
         _: 1
       }, 8, ["to", "href"])),
-      (o(), n(m(e.tag), {
+      (o(), n(k(e.tag), {
         to: e.readMorePath,
         href: e.readMorePath,
         class: "loan-card-use tw-no-underline tw-text-primary",
         "aria-label": "Loan use",
         onClick: a[3] || (a[3] = (l) => e.clickReadMore("Use", l))
       }, {
-        default: k(() => [
-          s("div", W, [
-            e.isLoading ? (o(), i("div", z, [
-              (o(!0), i(D, null, N([...Array(4)], (l, A) => (o(), i("div", {
-                key: A,
+        default: m(() => [
+          s("div", K, [
+            e.isLoading ? (o(), r("div", U, [
+              (o(!0), r(R, null, V([...Array(4)], (l, P) => (o(), r("div", {
+                key: P,
                 class: "tw-h-2 tw-mb-1"
               }, [
-                d(w)
+                d(c)
               ]))), 128))
-            ])) : (o(), i("div", K, [
-              d(y, {
+            ])) : (o(), r("div", G, [
+              d(L, {
                 use: e.loanUse,
                 "loan-amount": e.loanAmount,
                 status: e.loanStatus,
@@ -118,27 +133,27 @@ function O(h, a, t, e, j, g) {
         ]),
         _: 1
       }, 8, ["to", "href"])),
-      e.isLoading || typeof e.loanCallouts > "u" ? (o(), n(w, {
+      e.isLoading || typeof e.loanCallouts > "u" ? (o(), n(c, {
         key: 0,
         class: "tw-mt-1.5 tw-mb-1",
         style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
-      })) : (o(), n(L, {
+      })) : (o(), n(M, {
         key: 1,
         callouts: e.loanCallouts,
         class: "loan-callouts tw-my-1.5"
       }, null, 8, ["callouts"])),
-      s("div", U, [
-        e.hasProgressData ? c("", !0) : (o(), i("div", G, [
-          d(w, {
+      s("div", O, [
+        e.hasProgressData ? w("", !0) : (o(), r("div", j, [
+          d(c, {
             class: "tw-mb-0.5",
             style: { width: "70%", height: "1.3rem" }
           }),
-          d(w, {
+          d(c, {
             class: "tw-rounded",
             style: { width: "70%", height: "0.5rem" }
           })
         ])),
-        e.sharesAvailable ? (o(), n(m(e.tag), {
+        e.sharesAvailable ? (o(), n(k(e.tag), {
           key: 1,
           to: e.readMorePath,
           href: e.readMorePath,
@@ -146,8 +161,8 @@ function O(h, a, t, e, j, g) {
           "aria-label": "Loan progress",
           onClick: a[4] || (a[4] = (l) => e.clickReadMore("Progress", l))
         }, {
-          default: k(() => [
-            d(M, {
+          default: m(() => [
+            d(C, {
               id: "loanProgress",
               "money-left": e.unreservedAmount,
               "progress-percent": e.fundraisingPercent,
@@ -155,8 +170,8 @@ function O(h, a, t, e, j, g) {
             }, null, 8, ["money-left", "progress-percent"])
           ]),
           _: 1
-        }, 8, ["to", "href"])) : c("", !0),
-        e.allDataLoaded ? (o(), n(C, {
+        }, 8, ["to", "href"])) : w("", !0),
+        e.allDataLoaded ? (o(), n(A, {
           key: 3,
           loan: t.loan,
           "unreserved-amount": e.unreservedAmount,
@@ -174,10 +189,10 @@ function O(h, a, t, e, j, g) {
           "get-cookie": t.getCookie,
           "set-cookie": t.setCookie,
           "is-visitor": t.isVisitor,
-          class: _(["tw-mt-auto tw-self-end", { "tw-flex-grow": !e.sharesAvailable, "tw-flex-shrink-0": e.sharesAvailable }]),
-          onAddToBasket: a[5] || (a[5] = (l) => h.$emit("add-to-basket", l)),
+          class: f(["tw-mt-auto tw-self-end", { "tw-flex-grow": !e.sharesAvailable, "tw-flex-shrink-0": e.sharesAvailable }]),
+          onAddToBasket: a[5] || (a[5] = (l) => _.$emit("add-to-basket", l)),
           onShowLoanDetails: a[6] || (a[6] = (l) => e.clickReadMore("ViewLoan", l))
-        }, 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", "class"])) : (o(), n(w, {
+        }, 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", "class"])) : (o(), n(c, {
           key: 2,
           class: "tw-rounded tw-self-start",
           style: { width: "9rem", height: "3rem" }
@@ -186,9 +201,9 @@ function O(h, a, t, e, j, g) {
     ])
   ], 2);
 }
-const X = /* @__PURE__ */ R(P, [["render", O], ["__scopeId", "data-v-7478412d"]]);
+const Z = /* @__PURE__ */ B(D, [["render", H], ["__scopeId", "data-v-de4628d8"]]);
 export {
-  p as KV_WIDE_LOAN_CARD_FRAGMENT,
-  $ as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
-  X as default
+  ee as KV_WIDE_LOAN_CARD_FRAGMENT,
+  te as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
+  Z as default
 };