@kiva/kv-components 8.25.0 → 8.26.1

package/dist/utils/loanCard.js

@@ -1,9 +1,9 @@
-import R from "graphql-tag";
-import oe from "numeral";
-import { toRefs as re, computed as n } from "vue";
-import { mdiMapMarker as Le } from "@mdi/js";
-import Ue from "./Alea.js";
-const Ne = "N/A", ne = "ECO-FRIENDLY", le = "SUSTAINABLE AG", se = "SINGLE PARENT", be = "REFUGEES/DISPLACED", P = (c, f) => (c == null ? void 0 : c.find((p) => p.name.replace("#", "").toUpperCase() === f.toUpperCase())) ?? {}, Se = R`
+import P from "graphql-tag";
+import ne from "numeral";
+import { toRefs as ue, computed as a, ref as ae, onMounted as Ue, nextTick as Ne, onBeforeUnmount as be } from "vue";
+import { mdiMapMarker as Ie } from "@mdi/js";
+import Re from "./Alea.js";
+const Pe = "N/A", le = "ECO-FRIENDLY", se = "SUSTAINABLE AG", re = "SINGLE PARENT", Te = "REFUGEES/DISPLACED", R = (i, d) => (i == null ? void 0 : i.find((s) => s.name.replace("#", "").toUpperCase() === d.toUpperCase())) ?? {}, De = P`
 	fragment LoanCallouts on LoanBasic {
 		id
 		activity {
@@ -20,7 +20,7 @@ const Ne = "N/A", ne = "ECO-FRIENDLY", le = "SUSTAINABLE AG", se = "SINGLE PAREN
 			themes
 		}
 	}
-`, Me = R`
+`, Oe = P`
 	fragment LoanGeocode on LoanBasic {
 		id
 		geocode {
@@ -32,7 +32,7 @@ const Ne = "N/A", ne = "ECO-FRIENDLY", le = "SUSTAINABLE AG", se = "SINGLE PAREN
 			}
 		}
 	}
-`, Te = R`
+`, ke = P`
 	fragment LoanProgress on LoanBasic {
 		id
 		loanAmount
@@ -43,125 +43,141 @@ const Ne = "N/A", ne = "ECO-FRIENDLY", le = "SUSTAINABLE AG", se = "SINGLE PAREN
 		}
 	}
 `;
-function Ge(c, f = !1) {
+function we(i, d = !1) {
   const {
-    externalLinks: p,
-    customLoanDetails: m,
+    externalLinks: s,
+    customLoanDetails: c,
     loanId: g,
     loan: t,
-    categoryPageName: v,
+    categoryPageName: m,
     customCallouts: E,
-    customHref: F
-  } = re(c), ue = n(() => p.value ? "a" : "router-link"), ie = n(() => p.value && F.value ? F.value : m != null && m.value ? "" : `/lend/${g.value}`), _ = n(() => !g.value || !t.value), ce = n(() => {
+    customHref: T
+  } = ue(i), ie = a(() => s.value ? "a" : "router-link"), ce = a(() => s.value && T.value ? T.value : c != null && c.value ? "" : `/lend/${g.value}`), F = a(() => !g.value || !t.value), de = a(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.name) || "";
-  }), h = n(() => {
-    var e, a, l;
-    return ((l = (a = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : a.country) == null ? void 0 : l.name) || "";
-  }), de = n(() => {
-    var e, a, l;
-    return ((l = (a = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : a.country) == null ? void 0 : l.isoCode) || "";
-  }), L = n(() => {
-    var e, a;
-    return ((a = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : a.city) || "";
-  }), S = n(() => {
-    var e, a;
-    return ((a = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : a.state) || "";
-  }), M = n(() => {
+  }), h = a(() => {
+    var e, o, l;
+    return ((l = (o = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : o.country) == null ? void 0 : l.name) || "";
+  }), pe = a(() => {
+    var e, o, l;
+    return ((l = (o = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : o.country) == null ? void 0 : l.isoCode) || "";
+  }), y = a(() => {
+    var e, o;
+    return ((o = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : o.city) || "";
+  }), _ = a(() => {
+    var e, o;
+    return ((o = (e = t.value) == null ? void 0 : e.geocode) == null ? void 0 : o.state) || "";
+  }), M = a(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.distributionModel) || "";
-  }), pe = n(() => {
-    var e, a;
-    return ((a = (e = t.value) == null ? void 0 : e.image) == null ? void 0 : a.hash) ?? "";
-  }), U = n(() => {
-    var e, a, l, u, d;
-    return typeof ((e = t.value) == null ? void 0 : e.loanAmount) < "u" && typeof ((l = (a = t.value) == null ? void 0 : a.loanFundraisingInfo) == null ? void 0 : l.fundedAmount) < "u" && typeof ((d = (u = t.value) == null ? void 0 : u.loanFundraisingInfo) == null ? void 0 : d.reservedAmount) < "u";
-  }), ve = n(() => !_.value && U.value), fe = n(() => {
+  }), ve = a(() => {
+    var e, o;
+    return ((o = (e = t.value) == null ? void 0 : e.image) == null ? void 0 : o.hash) ?? "";
+  }), U = a(() => {
+    var e, o, l, p, f;
+    return typeof ((e = t.value) == null ? void 0 : e.loanAmount) < "u" && typeof ((l = (o = t.value) == null ? void 0 : o.loanFundraisingInfo) == null ? void 0 : l.fundedAmount) < "u" && typeof ((f = (p = t.value) == null ? void 0 : p.loanFundraisingInfo) == null ? void 0 : f.reservedAmount) < "u";
+  }), fe = a(() => !F.value && U.value), me = a(() => {
     if (M.value === "direct") {
-      const e = f && h.value.toLowerCase() === "united states" ? "" : `, ${h.value}`;
-      return `${L.value}, ${S.value}${e}`;
+      const e = d && h.value.toLowerCase() === "united states" ? "" : `, ${h.value}`;
+      return `${y.value}, ${_.value}${e}`;
     }
-    return h.value === "Puerto Rico" ? `${L.value}, PR` : h.value;
-  }), me = n(() => {
+    return h.value === "Puerto Rico" ? `${y.value}, PR` : h.value;
+  }), ge = a(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.use) ?? "";
-  }), ge = n(() => {
+  }), he = a(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.status) ?? "";
-  }), A = n(() => {
+  }), L = a(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.loanAmount) ?? "0";
-  }), N = n(() => {
-    var e, a, l, u;
-    return oe(((a = (e = t.value) == null ? void 0 : e.loanFundraisingInfo) == null ? void 0 : a.reservedAmount) ?? "0").add(((u = (l = t.value) == null ? void 0 : l.loanFundraisingInfo) == null ? void 0 : u.fundedAmount) ?? "0");
-  }), T = n(() => N.value.clone().divide(A.value).value()), G = n(() => U.value && A.value - N.value.value() > 0), he = n(() => G.value ? oe(A.value).subtract(N.value.value()).format("0.00") : "0"), Ce = n(() => {
+  }), N = a(() => {
+    var e, o, l, p;
+    return ne(((o = (e = t.value) == null ? void 0 : e.loanFundraisingInfo) == null ? void 0 : o.reservedAmount) ?? "0").add(((p = (l = t.value) == null ? void 0 : l.loanFundraisingInfo) == null ? void 0 : p.fundedAmount) ?? "0");
+  }), S = a(() => N.value.clone().divide(L.value).value()), G = a(() => U.value && L.value - N.value.value() > 0), Ce = a(() => G.value ? ne(L.value).subtract(N.value.value()).format("0.00") : "0"), Le = a(() => {
     var e;
     return ((e = t.value) == null ? void 0 : e.borrowerCount) ?? 0;
-  }), Ae = n(() => {
-    var Y, B, $, w, K, x, H, q, j, z, J, Q, V, W, X, Z, ee, te, ae;
-    const e = [], a = Ue(g.value, T.value), l = ((B = (Y = t.value) == null ? void 0 : Y.activity) == null ? void 0 : B.name) ?? "", u = ((w = ($ = t.value) == null ? void 0 : $.activity) == null ? void 0 : w.id) ?? null, d = ((x = (K = t.value) == null ? void 0 : K.sector) == null ? void 0 : x.name) ?? "", D = ((q = (H = t.value) == null ? void 0 : H.sector) == null ? void 0 : q.id) ?? null, i = ((z = (j = t.value) == null ? void 0 : j.tags) == null ? void 0 : z.filter((o) => o.charAt(0) === "#").map((o) => o.substring(1))) ?? [], y = ((J = t.value) == null ? void 0 : J.themes) ?? [], b = {
-      ecoFriendly: !!i.filter((o) => o.toUpperCase() === ne || o.toUpperCase() === le).length,
-      refugeesIdps: !!y.filter((o) => o.toUpperCase() === be).length,
-      singleParents: !!i.filter((o) => o.toUpperCase() === se).length
-    }, O = (V = (Q = t.value) == null ? void 0 : Q.partnerName) == null ? void 0 : V.toUpperCase().includes(Ne), k = ((W = t.value) == null ? void 0 : W.tagsData) ?? [], ye = ((X = t.value) == null ? void 0 : X.themesData) ?? [];
-    if (O && i.length) {
-      const o = Math.floor(a() * i.length), s = i[o], r = P(k, s), C = (r == null ? void 0 : r.id) ?? null;
-      e.push({ label: s, type: "tag", id: C });
+  }), Ae = a(() => {
+    var w, B, Y, $, K, x, z, H, W, q, j, J, Q, V, X, Z, ee, te, oe;
+    const e = [], o = Re(g.value, S.value), l = ((B = (w = t.value) == null ? void 0 : w.activity) == null ? void 0 : B.name) ?? "", p = (($ = (Y = t.value) == null ? void 0 : Y.activity) == null ? void 0 : $.id) ?? null, f = ((x = (K = t.value) == null ? void 0 : K.sector) == null ? void 0 : x.name) ?? "", D = ((H = (z = t.value) == null ? void 0 : z.sector) == null ? void 0 : H.id) ?? null, v = ((q = (W = t.value) == null ? void 0 : W.tags) == null ? void 0 : q.filter((n) => n.charAt(0) === "#").map((n) => n.substring(1))) ?? [], A = ((j = t.value) == null ? void 0 : j.themes) ?? [], b = {
+      ecoFriendly: !!v.filter((n) => n.toUpperCase() === le || n.toUpperCase() === se).length,
+      refugeesIdps: !!A.filter((n) => n.toUpperCase() === Te).length,
+      singleParents: !!v.filter((n) => n.toUpperCase() === re).length
+    }, O = (Q = (J = t.value) == null ? void 0 : J.partnerName) == null ? void 0 : Q.toUpperCase().includes(Pe), k = ((V = t.value) == null ? void 0 : V.tagsData) ?? [], Ee = ((X = t.value) == null ? void 0 : X.themesData) ?? [];
+    if (O && v.length) {
+      const n = Math.floor(o() * v.length), r = v[n], u = R(k, r), C = (u == null ? void 0 : u.id) ?? null;
+      e.push({ label: r, type: "tag", id: C });
     }
-    if (v.value || (b.ecoFriendly && !e.find((o) => o.label.toUpperCase() === ne || o.label.toUpperCase() === le) ? e.push({ label: "Eco-friendly", type: "tag", id: 9 }) : b.refugeesIdps ? e.push({ label: "Refugees and IDPs", type: "attribute", id: 28 }) : b.singleParents && !e.find((o) => o.label.toUpperCase() === se) && e.push({ label: "Single Parent", type: "tag", id: 17 })), l && u && ((Z = v.value) == null ? void 0 : Z.toUpperCase()) !== l.toUpperCase() && e.push({ id: u, label: l, type: "activity" }), d && D && l.toUpperCase() !== d.toUpperCase() && d.toUpperCase() !== ((ee = v.value) == null ? void 0 : ee.toUpperCase()) && e.length < 2 && e.push({ id: D, label: d, type: "sector" }), i.length && e.length < 2) {
-      const o = Math.floor(a() * i.length), s = i[o], r = P(k, s), C = (r == null ? void 0 : r.id) ?? null;
-      e.filter((I) => I.label.toUpperCase() === s.toUpperCase()).length || e.push({ label: s, type: "tag", id: C });
+    if (m.value || (b.ecoFriendly && !e.find((n) => n.label.toUpperCase() === le || n.label.toUpperCase() === se) ? e.push({ label: "Eco-friendly", type: "tag", id: 9 }) : b.refugeesIdps ? e.push({ label: "Refugees and IDPs", type: "attribute", id: 28 }) : b.singleParents && !e.find((n) => n.label.toUpperCase() === re) && e.push({ label: "Single Parent", type: "tag", id: 17 })), l && p && ((Z = m.value) == null ? void 0 : Z.toUpperCase()) !== l.toUpperCase() && e.push({ id: p, label: l, type: "activity" }), f && D && l.toUpperCase() !== f.toUpperCase() && f.toUpperCase() !== ((ee = m.value) == null ? void 0 : ee.toUpperCase()) && e.length < 2 && e.push({ id: D, label: f, type: "sector" }), v.length && e.length < 2) {
+      const n = Math.floor(o() * v.length), r = v[n], u = R(k, r), C = (u == null ? void 0 : u.id) ?? null;
+      e.filter((I) => I.label.toUpperCase() === r.toUpperCase()).length || e.push({ label: r, type: "tag", id: C });
     }
-    if (y.length && e.length < 2) {
-      const o = Math.floor(a() * y.length), s = y[o], r = P(ye, s), C = (r == null ? void 0 : r.id) ?? null;
-      !e.filter((I) => I.label.toUpperCase() === s.toUpperCase()).length && s.toUpperCase() !== ((te = v.value) == null ? void 0 : te.toUpperCase()) && e.push({ label: s, type: "attribute", id: C });
+    if (A.length && e.length < 2) {
+      const n = Math.floor(o() * A.length), r = A[n], u = R(Ee, r), C = (u == null ? void 0 : u.id) ?? null;
+      !e.filter((I) => I.label.toUpperCase() === r.toUpperCase()).length && r.toUpperCase() !== ((te = m.value) == null ? void 0 : te.toUpperCase()) && e.push({ label: r, type: "attribute", id: C });
     }
     if (O && e.length > 1) return [e.shift()];
-    const Ee = ((ae = E.value) == null ? void 0 : ae.map((o) => ({ label: o }))) ?? [];
-    return e.push(...Ee), e;
+    const ye = ((oe = E.value) == null ? void 0 : oe.map((n) => ({ label: n }))) ?? [];
+    return e.push(...ye), e;
   });
   return {
-    tag: ue,
-    readMorePath: ie,
-    isLoading: _,
-    borrowerName: ce,
+    tag: ie,
+    readMorePath: ce,
+    isLoading: F,
+    borrowerName: de,
     countryName: h,
-    countryCode: de,
-    city: L,
-    state: S,
+    countryCode: pe,
+    city: y,
+    state: _,
     distributionModel: M,
-    imageHash: pe,
+    imageHash: ve,
     hasProgressData: U,
-    allDataLoaded: ve,
-    fundraisingPercent: T,
-    unreservedAmount: he,
+    allDataLoaded: fe,
+    fundraisingPercent: S,
+    unreservedAmount: Ce,
     sharesAvailable: G,
-    formattedLocation: fe,
-    loanUse: me,
-    loanStatus: ge,
-    loanAmount: A,
-    loanBorrowerCount: Ce,
-    mdiMapMarker: Le,
+    formattedLocation: me,
+    loanUse: ge,
+    loanStatus: he,
+    loanAmount: L,
+    loanBorrowerCount: Le,
+    mdiMapMarker: Ie,
     loanCallouts: Ae
   };
 }
-function De(c, f) {
+function Be() {
+  const i = ae(null), d = ae(!1), s = () => {
+    const c = i.value;
+    d.value = !!c && c.scrollWidth > c.clientWidth;
+  };
+  return Ue(() => {
+    Ne(s), window.addEventListener("resize", s);
+  }), be(() => {
+    window.removeEventListener("resize", s);
+  }), {
+    locationRef: i,
+    isLocationTruncated: d,
+    checkLocationTruncation: s
+  };
+}
+function Ye(i, d) {
   const {
-    loanId: p,
-    customLoanDetails: m,
+    loanId: s,
+    customLoanDetails: c,
     kvTrackFunction: g
-  } = re(c);
-  function t(v, E) {
-    g.value("Lending", "click-Read more", v, p.value), m.value && (E.preventDefault(), f("show-loan-details"));
+  } = ue(i);
+  function t(m, E) {
+    g.value("Lending", "click-Read more", m, s.value), c.value && (E.preventDefault(), d("show-loan-details"));
   }
   return {
     clickReadMore: t
   };
 }
 export {
-  Se as LOAN_CALLOUTS_FRAGMENT,
-  Me as LOAN_GEOCODE_FRAGMENT,
-  Te as LOAN_PROGRESS_FRAGMENT,
-  Ge as loanCardComputedProperties,
-  De as loanCardMethods
+  De as LOAN_CALLOUTS_FRAGMENT,
+  Oe as LOAN_GEOCODE_FRAGMENT,
+  ke as LOAN_PROGRESS_FRAGMENT,
+  we as loanCardComputedProperties,
+  Ye as loanCardMethods,
+  Be as useLocationTruncation
 };

package/dist/vue/KvClassicLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-907918f9]:hover,.loan-card-use[data-v-907918f9]: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-907918f9]{text-decoration-line:underline}.loan-card-progress[data-v-907918f9]:hover,.loan-card-progress[data-v-907918f9]:focus{text-decoration-line:none}
+.loan-card-use[data-v-44561e04]:hover,.loan-card-use[data-v-44561e04]: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-44561e04]{text-decoration-line:underline}.loan-card-progress[data-v-44561e04]:hover,.loan-card-progress[data-v-44561e04]:focus{text-decoration-line:none}

package/dist/vue/KvClassicLoanCard.js

@@ -1,121 +1,136 @@
-import D from "./KvClassicLoanCard2.js";
-import { KV_CLASSIC_LOAN_CARD_FRAGMENT as ee, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as te } from "./KvClassicLoanCard2.js";
-import { resolveComponent as i, openBlock as o, createElementBlock as s, normalizeStyle as N, normalizeClass as r, createElementVNode as d, createBlock as n, resolveDynamicComponent as g, withCtx as v, createVNode as m, toDisplayString as b, createCommentVNode as w, Fragment as V, renderList as R } from "vue";
+import N from "./KvClassicLoanCard2.js";
+import { KV_CLASSIC_LOAN_CARD_FRAGMENT as ae, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as oe } from "./KvClassicLoanCard2.js";
+import { resolveComponent as i, openBlock as a, createElementBlock as s, normalizeStyle as T, normalizeClass as r, createElementVNode as d, createBlock as n, resolveDynamicComponent as v, withCtx as g, createVNode as w, toDisplayString as b, createTextVNode as V, createCommentVNode as c, Fragment as R, renderList as S } from "vue";
 import "./KvClassicLoanCard.css";
-import S from "../_virtual/_plugin-vue_export-helper.js";
-const T = { class: "tw-grow" }, F = { class: "loan-card-active-hover" }, I = {
+import F from "../_virtual/_plugin-vue_export-helper.js";
+const I = { class: "tw-grow" }, E = { class: "loan-card-active-hover" }, K = {
   key: 1,
   class: "tw-relative"
-}, E = { key: 0 }, K = {
-  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" } }, W = { class: "tw-mb-1.5 tw-pt-1" }, U = { key: 1 }, j = {
+}, z = { key: 0 }, W = {
+  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)" }
+}, U = ["id"], j = { class: "tw-mb-1.5 tw-pt-1" }, G = { key: 1 }, H = {
   key: 0,
   class: "tw-w-full tw-pt-1 tw-pr-1"
-}, G = {
+}, O = {
   key: 0,
   class: "tw-text-center tw-w-full tw-mt-1 tw-font-medium"
-}, H = {
+}, q = {
   key: 1,
   class: "tw-pt-1.5"
 };
-function O(u, a, e, t, q, c) {
-  const k = i("kv-loading-placeholder"), h = i("kv-borrower-image"), f = i("kv-material-icon"), _ = i("kv-loan-team-pick"), y = i("kv-loan-bookmark"), x = i("kv-loan-tag"), C = i("kv-loan-use"), L = i("kv-loan-callouts"), A = i("kv-loan-progress-group"), M = i("kv-lend-cta"), P = i("KvLoanActivities");
-  return o(), s("div", {
+function J(u, o, e, t, Q, m) {
+  const k = i("kv-loading-placeholder"), h = i("kv-borrower-image"), f = i("kv-material-icon"), _ = i("kv-tooltip"), y = i("kv-loan-team-pick"), x = i("kv-loan-bookmark"), C = i("kv-loan-tag"), L = i("kv-loan-use"), A = i("kv-loan-callouts"), M = i("kv-loan-progress-group"), P = i("kv-lend-cta"), B = i("KvLoanActivities");
+  return a(), s("div", {
     class: r(["tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-1", { "tw-p-1": !e.largeCard, "tw-pointer-events-none": t.isLoading }]),
     "data-testid": "loan-card",
-    style: N([{ "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }, { minWidth: "230px", maxWidth: c.cardWidth }])
+    style: T([{ "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }, { minWidth: "230px", maxWidth: m.cardWidth }])
   }, [
-    d("div", T, [
-      d("div", F, [
-        t.isLoading ? (o(), n(k, {
+    d("div", I, [
+      d("div", E, [
+        t.isLoading ? (a(), n(k, {
           key: 0,
           class: r(["tw-mb-1 tw-w-full", { "tw-rounded-t tw-rounded-b-none": e.largeCard, "!tw-rounded-sm": !e.largeCard }]),
           style: { height: "15rem" }
-        }, null, 8, ["class"])) : (o(), s("div", I, [
-          (o(), n(g(t.tag), {
+        }, null, 8, ["class"])) : (a(), s("div", K, [
+          (a(), n(v(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))
+            onClick: o[0] || (o[0] = (l) => t.clickReadMore("Photo", l))
           }, {
-            default: v(() => [
-              m(h, {
+            default: g(() => [
+              w(h, {
                 class: r(["tw-relative tw-w-full tw-bg-black tw-bg-clip-content", { "tw-rounded-t": e.largeCard, "tw-rounded-sm": !e.largeCard }]),
                 alt: `Photo of ${t.borrowerName}`,
-                "aspect-ratio": c.imageAspectRatio,
-                "default-image": { width: c.imageDefaultWidth },
+                "aspect-ratio": m.imageAspectRatio,
+                "default-image": { width: m.imageDefaultWidth },
                 hash: t.imageHash,
-                images: c.imageSizes,
+                images: m.imageSizes,
                 "photo-path": e.photoPath
               }, null, 8, ["class", "alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
-              t.countryName ? (o(), s("div", E, [
-                d("p", K, [
-                  m(f, {
-                    class: "tw-h-2 tw-w-2",
+              t.countryName ? (a(), s("div", z, [
+                d("p", W, [
+                  w(f, {
+                    class: "tw-h-2 tw-w-2 tw-flex-shrink-0",
                     icon: t.mdiMapMarker
                   }, null, 8, ["icon"]),
-                  d("span", z, b(t.formattedLocation), 1)
+                  d("span", {
+                    id: `loan-location-${e.loanId}`,
+                    ref: "locationRef",
+                    class: "tw-truncate tw-min-w-0",
+                    style: { "margin-top": "0.125rem" }
+                  }, b(t.formattedLocation), 9, U),
+                  t.isLocationTruncated ? (a(), n(_, {
+                    key: 0,
+                    controller: `loan-location-${e.loanId}`,
+                    "max-width": "250px"
+                  }, {
+                    default: g(() => [
+                      V(b(t.formattedLocation), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["controller"])) : c("", !0)
                 ])
-              ])) : w("", !0)
+              ])) : c("", !0)
             ]),
             _: 1
           }, 8, ["to", "href"])),
-          e.isTeamPick ? (o(), n(_, {
+          e.isTeamPick ? (a(), n(y, {
             key: 0,
             class: r(["tw-absolute", { "tw-right-6": !e.isVisitor, "tw-right-0": e.isVisitor }]),
             style: { top: "-6px" },
             "data-testid": "loan-card-teampick"
-          }, null, 8, ["class"])) : w("", !0),
-          e.isVisitor ? w("", !0) : (o(), n(y, {
+          }, null, 8, ["class"])) : c("", !0),
+          e.isVisitor ? c("", !0) : (a(), n(x, {
             key: 1,
             "loan-id": e.loanId,
             "is-bookmarked": e.isBookmarked,
             class: "tw-absolute tw-right-1",
             style: { top: "-6px" },
             "data-testid": "loan-card-bookmark",
-            onToggleBookmark: a[1] || (a[1] = (l) => u.$emit("toggle-bookmark"))
+            onToggleBookmark: o[1] || (o[1] = (l) => u.$emit("toggle-bookmark"))
           }, null, 8, ["loan-id", "is-bookmarked"]))
         ])),
-        (o(), n(g(t.tag), {
+        (a(), n(v(t.tag), {
           to: t.readMorePath,
           href: t.readMorePath,
           class: r(["tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline", { "tw-px-1": e.largeCard }]),
           "aria-label": "Loan tag",
-          onClick: a[2] || (a[2] = (l) => t.clickReadMore("Tag", l))
+          onClick: o[2] || (o[2] = (l) => t.clickReadMore("Tag", l))
         }, {
-          default: v(() => [
-            e.showTags && !t.isLoading ? (o(), n(x, {
+          default: g(() => [
+            e.showTags && !t.isLoading ? (a(), n(C, {
               key: 0,
               loan: e.loan,
               "enable-multi-matching": e.enableMultiMatching
-            }, null, 8, ["loan", "enable-multi-matching"])) : w("", !0)
+            }, null, 8, ["loan", "enable-multi-matching"])) : c("", !0)
           ]),
           _: 1
         }, 8, ["to", "href", "class"])),
-        (o(), n(g(t.tag), {
+        (a(), n(v(t.tag), {
           to: t.readMorePath,
           href: t.readMorePath,
           class: "loan-card-use tw-no-underline tw-text-primary",
           "aria-label": "Loan use",
-          onClick: a[3] || (a[3] = (l) => t.clickReadMore("Use", l))
+          onClick: o[3] || (o[3] = (l) => t.clickReadMore("Use", l))
         }, {
-          default: v(() => [
-            d("div", W, [
-              t.isLoading ? (o(), s("div", {
+          default: g(() => [
+            d("div", j, [
+              t.isLoading ? (a(), s("div", {
                 key: 0,
                 class: r(["tw-w-full", { "tw-px-1": e.largeCard }]),
                 style: { height: "5.5rem" }
               }, [
-                (o(!0), s(V, null, R([...Array(4)], (l, B) => (o(), s("div", {
-                  key: B,
+                (a(!0), s(R, null, S([...Array(4)], (l, D) => (a(), s("div", {
+                  key: D,
                   class: "tw-h-2 tw-mb-1"
                 }, [
-                  m(k)
+                  w(k)
                 ]))), 128))
-              ], 2)) : (o(), s("div", U, [
-                m(C, {
+              ], 2)) : (a(), s("div", G, [
+                w(L, {
                   use: t.loanUse,
                   "loan-amount": t.loanAmount,
                   status: t.loanStatus,
@@ -130,41 +145,41 @@ function O(u, a, e, t, q, c) {
           _: 1
         }, 8, ["to", "href"]))
       ]),
-      t.isLoading || typeof t.loanCallouts > "u" ? (o(), n(k, {
+      t.isLoading || typeof t.loanCallouts > "u" ? (a(), n(k, {
         key: 0,
         class: r(["tw-mt-1.5 tw-mb-1", { "tw-mx-1": e.largeCard }]),
         style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
-      }, null, 8, ["class"])) : (o(), n(L, {
+      }, null, 8, ["class"])) : (a(), n(A, {
         key: 1,
         callouts: t.loanCallouts,
         class: r(["tw-mt-1.5", { "tw-px-1": e.largeCard }]),
-        onClick: a[4] || (a[4] = (l) => u.$emit("jump-filter-page", l))
+        onClick: o[4] || (o[4] = (l) => u.$emit("jump-filter-page", l))
       }, null, 8, ["callouts", "class"]))
     ]),
     d("div", {
       class: r(["tw-flex tw-justify-between tw-mt-2", { "tw-px-1": e.largeCard }])
     }, [
-      t.hasProgressData ? w("", !0) : (o(), s("div", j, [
-        m(k, {
+      t.hasProgressData ? c("", !0) : (a(), s("div", H, [
+        w(k, {
           class: "tw-mb-0.5",
           style: { width: "70%", height: "1.3rem" }
         }),
-        m(k, {
+        w(k, {
           class: "tw-rounded",
           style: { width: "70%", height: "0.5rem" }
         })
       ])),
       d("div", null, [
-        t.sharesAvailable ? (o(), n(g(t.tag), {
+        t.sharesAvailable ? (a(), n(v(t.tag), {
           key: 0,
           to: t.readMorePath,
           href: t.readMorePath,
           class: "loan-card-progress tw-no-underline tw-mt-1",
           "aria-label": "Loan progress",
-          onClick: a[5] || (a[5] = (l) => t.clickReadMore("Progress", l))
+          onClick: o[5] || (o[5] = (l) => t.clickReadMore("Progress", l))
         }, {
-          default: v(() => [
-            m(A, {
+          default: g(() => [
+            w(M, {
               id: "loanProgress",
               "money-left": t.unreservedAmount,
               "progress-percent": t.fundraisingPercent,
@@ -172,9 +187,9 @@ function O(u, a, e, t, q, c) {
             }, null, 8, ["money-left", "progress-percent"])
           ]),
           _: 1
-        }, 8, ["to", "href"])) : w("", !0)
+        }, 8, ["to", "href"])) : c("", !0)
       ]),
-      t.allDataLoaded ? (o(), n(M, {
+      t.allDataLoaded ? (a(), n(P, {
         key: 2,
         loan: e.loan,
         "unreserved-amount": t.unreservedAmount,
@@ -196,21 +211,21 @@ function O(u, a, e, t, q, c) {
         "secondary-button-text": e.secondaryButtonText,
         "secondary-button-handler": e.secondaryButtonHandler,
         class: r(["tw-mt-auto", { "tw-w-full": !t.sharesAvailable }]),
-        onAddToBasket: a[6] || (a[6] = (l) => u.$emit("add-to-basket", l)),
-        onShowLoanDetails: a[7] || (a[7] = (l) => t.clickReadMore("ViewLoan", l)),
-        onRemoveFromBasket: a[8] || (a[8] = (l) => u.$emit("remove-from-basket", 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", "primary-button-text", "secondary-button-text", "secondary-button-handler", "class"])) : (o(), n(k, {
+        onAddToBasket: o[6] || (o[6] = (l) => u.$emit("add-to-basket", l)),
+        onShowLoanDetails: o[7] || (o[7] = (l) => t.clickReadMore("ViewLoan", l)),
+        onRemoveFromBasket: o[8] || (o[8] = (l) => u.$emit("remove-from-basket", 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", "primary-button-text", "secondary-button-text", "secondary-button-handler", "class"])) : (a(), n(k, {
         key: 1,
         class: "tw-rounded tw-self-start",
         style: { width: "9rem", height: "3rem" }
       }))
     ], 2),
-    e.showContributors && c.lendersNumber && c.amountLent ? (o(), s("div", G, [
-      d("p", null, b(c.lendersNumber) + " people contributed " + b(c.amountLent), 1)
-    ])) : w("", !0),
-    e.combinedActivities.length > 0 ? (o(), s("div", H, [
-      a[10] || (a[10] = d("hr", { class: "tw-border-tertiary tw-mb-1 tw-w-5/6 tw-mx-auto" }, null, -1)),
-      m(P, {
+    e.showContributors && m.lendersNumber && m.amountLent ? (a(), s("div", O, [
+      d("p", null, b(m.lendersNumber) + " people contributed " + b(m.amountLent), 1)
+    ])) : c("", !0),
+    e.combinedActivities.length > 0 ? (a(), s("div", q, [
+      o[10] || (o[10] = d("hr", { class: "tw-border-tertiary tw-mb-1 tw-w-5/6 tw-mx-auto" }, null, -1)),
+      w(B, {
         loan: e.loan,
         "combined-activities": e.combinedActivities,
         "kv-track-function": e.kvTrackFunction,
@@ -227,14 +242,14 @@ function O(u, a, e, t, q, c) {
         "set-cookie": e.setCookie,
         "error-msg": e.errorMsg,
         "is-visitor": e.isVisitor,
-        onAddToBasket: a[9] || (a[9] = (l) => u.$emit("add-to-basket", l))
+        onAddToBasket: o[9] || (o[9] = (l) => u.$emit("add-to-basket", l))
       }, null, 8, ["loan", "combined-activities", "kv-track-function", "basket-items", "is-adding", "enable-five-dollars-notes", "five-dollars-selected", "show-view-loan", "custom-loan-details", "external-links", "route", "user-balance", "get-cookie", "set-cookie", "error-msg", "is-visitor"])
-    ])) : w("", !0)
+    ])) : c("", !0)
   ], 6);
 }
-const Z = /* @__PURE__ */ S(D, [["render", O], ["__scopeId", "data-v-907918f9"]]);
+const $ = /* @__PURE__ */ F(N, [["render", J], ["__scopeId", "data-v-44561e04"]]);
 export {
-  ee as KV_CLASSIC_LOAN_CARD_FRAGMENT,
-  te as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
-  Z as default
+  ae as KV_CLASSIC_LOAN_CARD_FRAGMENT,
+  oe as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
+  $ as default
 };