@kiva/kv-components 8.26.0 → 8.26.1

package/dist/vue/KvIntroductionLoanCard.js

@@ -1,67 +1,67 @@
-import N from "./KvIntroductionLoanCard2.js";
-import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as tt, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as et } from "./KvIntroductionLoanCard2.js";
-import { resolveComponent as s, openBlock as e, createElementBlock as n, normalizeStyle as P, normalizeClass as _, createElementVNode as i, createBlock as o, resolveDynamicComponent as g, withCtx as w, createVNode as d, Suspense as R, toDisplayString as f, createCommentVNode as m, Fragment as p, renderList as A } from "vue";
+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" }, T = { class: "loan-card-active-hover" }, z = {
+const D = { class: "tw-grow" }, z = { class: "loan-card-active-hover" }, V = {
   key: 1,
   style: { height: "11rem" },
   class: "tw-relative tw-overflow-hidden"
-}, I = { key: 0 }, O = {
-  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 !tw-capitalize",
-  style: { padding: "2px 6px" }
-}, S = { style: { "margin-top": "0.125rem" } }, V = {
+}, 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"
-}, E = {
+}, U = {
   key: 0,
   class: "tw-w-full",
   style: { height: "5.5rem" }
-}, F = { key: 1 }, U = { class: "tw-px-2" }, W = {
+}, W = { key: 1 }, j = { class: "tw-px-2" }, K = {
   key: 0,
   class: "tw-w-full tw-pr-1"
-}, j = { class: "tw-flex tw-justify-between" }, K = {
+}, 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" }
 };
-function G(k, a, c, t, H, h) {
-  const l = s("kv-loading-placeholder"), u = s("kv-borrower-image"), y = s("kv-flag"), b = s("kv-loan-bookmark"), v = s("kv-loan-callouts"), x = s("kv-loan-use"), C = s("kv-loan-progress-group"), M = s("kv-loan-tag");
+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: P([{ "box-shadow": "0px 4px 8px 0px rgba(0, 0, 0, 0.38)" }, { minWidth: "230px", maxWidth: h.cardWidth }])
+    style: R([{ "box-shadow": "0px 4px 8px 0px rgba(0, 0, 0, 0.38)" }, { minWidth: "230px", maxWidth: h.cardWidth }])
   }, [
-    i("div", D, [
-      i("div", T, [
-        t.isLoading ? (e(), o(l, {
+    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", z, [
+        })) : (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] = (r) => t.clickReadMore("Photo", r))
+            onClick: a[0] || (a[0] = (l) => t.clickReadMore("Photo", l))
           }, {
             default: w(() => [
-              d(u, {
+              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": c.photoPath
+                "photo-path": m.photoPath
               }, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
-              t.countryName ? (e(), n("div", I, [
-                i("p", O, [
-                  (e(), o(R, null, {
+              t.countryName ? (e(), n("div", O, [
+                d("p", S, [
+                  (e(), o(A, null, {
                     default: w(() => [
-                      d(y, {
-                        class: "tw-ml-0.5 tw-mr-1",
+                      s(y, {
+                        class: "tw-ml-0.5 tw-mr-1 tw-flex-shrink-0",
                         country: t.countryCode,
                         name: t.countryName,
                         "width-override": "16px",
@@ -70,67 +70,82 @@ function G(k, a, c, t, H, h) {
                     ]),
                     _: 1
                   })),
-                  i("span", S, f(t.formattedLocation), 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)
                 ])
-              ])) : m("", !0)
+              ])) : c("", !0)
             ]),
             _: 1
           }, 8, ["to", "href"])),
-          c.isVisitor ? m("", !0) : (e(), o(b, {
+          m.isVisitor ? c("", !0) : (e(), o(v, {
             key: 0,
-            "loan-id": c.loanId,
-            "is-bookmarked": c.isBookmarked,
+            "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] = (r) => k.$emit("toggle-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(l, {
+        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" }
-        })) : m("", !0),
+        })) : 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] = (r) => t.clickReadMore("Name", r))
+          onClick: a[2] || (a[2] = (l) => t.clickReadMore("Name", l))
         }, {
           default: w(() => [
-            i("h3", {
+            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", V, [
-          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(l, {
+        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" }
-          })) : m("", !0),
-          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(l, {
+          })) : 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" }
-          })) : m("", !0),
-          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(l, {
+          })) : 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" }
-          })) : m("", !0)
+          })) : 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] = (r) => t.clickReadMore("Tag", r))
+          onClick: a[3] || (a[3] = (l) => t.clickReadMore("Tag", l))
         }, {
           default: w(() => [
-            d(v, {
+            s(x, {
               callouts: t.loanCallouts,
               "add-bg-color": !1,
               class: "loan-callouts"
@@ -143,21 +158,21 @@ function G(k, a, c, t, H, h) {
           href: t.readMorePath,
           class: "loan-card-use tw-text-primary tw-no-underline",
           "aria-label": "Loan use",
-          onClick: a[4] || (a[4] = (r) => t.clickReadMore("Use", r))
+          onClick: a[4] || (a[4] = (l) => t.clickReadMore("Use", l))
         }, {
           default: w(() => [
-            i("div", {
+            d("div", {
               class: _(["tw-pt-0.5 tw-px-2", { "tw-mb-1.5": !t.isLoading }])
             }, [
-              t.isLoading ? (e(), n("div", E, [
-                (e(!0), n(p, null, A([...Array(3)], (r, L) => (e(), n("div", {
-                  key: L,
+              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"
                 }, [
-                  d(l)
+                  s(r)
                 ]))), 128))
-              ])) : (e(), n("div", F, [
-                d(x, {
+              ])) : (e(), n("div", W, [
+                s(C, {
                   use: t.loanUse,
                   "loan-amount": t.loanAmount,
                   status: t.loanStatus,
@@ -174,34 +189,34 @@ function G(k, a, c, t, H, h) {
         }, 8, ["to", "href"]))
       ])
     ]),
-    i("div", U, [
-      t.hasProgressData ? m("", !0) : (e(), n("div", W, [
-        i("div", j, [
-          d(l, {
+    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" }
           }),
-          d(l, {
+          s(r, {
             class: "tw-mb-0.5",
             style: { width: "20%", height: "1.3rem" }
           })
         ]),
-        d(l, {
+        s(r, {
           class: "tw-rounded",
           style: { width: "100%", height: "0.5rem" }
         })
       ])),
-      i("div", null, [
+      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] = (r) => t.clickReadMore("Progress", r))
+          onClick: a[5] || (a[5] = (l) => t.clickReadMore("Progress", l))
         }, {
           default: w(() => [
-            d(C, {
+            s(L, {
               id: "loanProgress",
               "money-left": t.unreservedAmount,
               "amount-goal": t.loanAmount,
@@ -210,26 +225,26 @@ function G(k, a, c, t, H, h) {
             }, null, 8, ["money-left", "amount-goal", "progress-percent"])
           ]),
           _: 1
-        }, 8, ["to", "href"])) : m("", !0)
+        }, 8, ["to", "href"])) : c("", !0)
       ]),
-      t.isLoading ? (e(), o(l, {
+      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", K, " 🎉 Fully funded! ")) : (e(), o(M, {
+      })) : h.isFunded ? (e(), n("div", H, " 🎉 Fully funded! ")) : (e(), o(M, {
         key: 3,
-        loan: c.loan,
+        loan: m.loan,
         "use-expanded-styles": !0,
-        "enable-multi-matching": c.enableMultiMatching,
+        "enable-multi-matching": m.enableMultiMatching,
         style: { "font-size": "15px" },
         class: "tw-text-center tw-pt-2"
       }, null, 8, ["loan", "enable-multi-matching"]))
     ])
   ], 6);
 }
-const Y = /* @__PURE__ */ B(N, [["render", G], ["__scopeId", "data-v-4e9edc0f"]]);
+const $ = /* @__PURE__ */ B(P, [["render", q], ["__scopeId", "data-v-2e03cf82"]]);
 export {
-  tt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
-  et as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
-  Y as default
+  ot as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  at as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  $ as default
 };

package/dist/vue/KvIntroductionLoanCard2.js

@@ -1,19 +1,20 @@
 import a from "graphql-tag";
-import R from "numeral";
-import { LOAN_CALLOUTS_FRAGMENT as F, LOAN_GEOCODE_FRAGMENT as T, LOAN_PROGRESS_FRAGMENT as k, loanCardComputedProperties as B, loanCardMethods as E } from "../utils/loanCard.js";
-import G from "./KvLoanBookmark.js";
-import b from "./KvLoanUse.js";
-import I from "./KvBorrowerImage.js";
-import S from "./KvLoanProgressGroup.js";
-import D from "./KvLoanCallouts.js";
-import P from "./KvLoanTag.js";
-import U from "./KvMaterialIcon.js";
-import $ from "./KvLoadingPlaceholder.js";
-import w from "./KvFlag.js";
+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 "./KvLoanBookmark.js";
+import D from "./KvLoanUse.js";
+import P from "./KvBorrowerImage.js";
+import U from "./KvLoanProgressGroup.js";
+import $ from "./KvLoanCallouts.js";
+import w from "./KvLoanTag.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 "./KvLoanBookmark2.js";
-import { KV_LOAN_TAG_FRAGMENT as V } from "./KvLoanTag2.js";
-import { KV_LOAN_USE_FRAGMENT as W } from "./KvLoanUse2.js";
-const no = a`
+import { KV_LOAN_TAG_FRAGMENT as j } from "./KvLoanTag2.js";
+import { KV_LOAN_USE_FRAGMENT as x } from "./KvLoanUse2.js";
+const mo = a`
 	fragment KvIntroductionLoanCard on LoanBasic {
 		id
 		image {
@@ -37,29 +38,30 @@ const no = a`
 		...LoanProgress
 	}
 	${r}
-	${V}
-	${W}
-	${F}
-	${T}
+	${j}
+	${x}
 	${k}
-`, io = a`
+	${B}
+	${E}
+`, fo = a`
 	fragment KvIntroductionLoanCardUser on LoanBasic {
 		id
 		...KvLoanBookmark
 	}
 	${r}
-`, so = {
+`, co = {
   name: "KvIntroductionLoanCard",
   components: {
-    KvBorrowerImage: I,
-    KvLoadingPlaceholder: $,
-    KvLoanUse: b,
-    KvLoanProgressGroup: S,
-    KvMaterialIcon: U,
-    KvLoanTag: P,
-    KvLoanCallouts: D,
-    KvFlag: w,
-    KvLoanBookmark: G
+    KvBorrowerImage: P,
+    KvLoadingPlaceholder: W,
+    KvLoanUse: D,
+    KvLoanProgressGroup: U,
+    KvMaterialIcon: V,
+    KvLoanTag: w,
+    KvLoanCallouts: $,
+    KvFlag: q,
+    KvLoanBookmark: S,
+    KvTooltip: H
   },
   props: {
     loanId: {
@@ -137,8 +139,8 @@ const no = a`
       formattedLocation: m,
       fundraisingPercent: d,
       hasProgressData: f,
-      imageHash: p,
-      isLoading: c,
+      imageHash: c,
+      isLoading: p,
       loanAmount: L,
       loanBorrowerCount: g,
       loanCallouts: A,
@@ -150,9 +152,12 @@ const no = a`
       tag: y,
       unreservedAmount: C,
       sharesAvailable: O
-    } = B(o, !0), {
-      clickReadMore: M
-    } = E(o, t);
+    } = G(o, !0), {
+      clickReadMore: T
+    } = b(o, t), {
+      locationRef: M,
+      isLocationTruncated: R
+    } = I();
     return {
       allDataLoaded: e,
       borrowerName: n,
@@ -163,8 +168,8 @@ const no = a`
       formattedLocation: m,
       fundraisingPercent: d,
       hasProgressData: f,
-      imageHash: p,
-      isLoading: c,
+      imageHash: c,
+      isLoading: p,
       loanAmount: L,
       loanBorrowerCount: g,
       loanCallouts: A,
@@ -176,7 +181,9 @@ const no = a`
       tag: y,
       unreservedAmount: C,
       sharesAvailable: O,
-      clickReadMore: M
+      clickReadMore: T,
+      locationRef: M,
+      isLocationTruncated: R
     };
   },
   computed: {
@@ -201,7 +208,7 @@ const no = a`
     amountLent() {
       var t, e;
       const o = ((e = (t = this.loan) == null ? void 0 : t.loanFundraisingInfo) == null ? void 0 : e.fundedAmount) ?? 0;
-      return R(o).format("$0,0");
+      return F(o).format("$0,0");
     },
     isFunded() {
       var o;
@@ -210,7 +217,7 @@ const no = a`
   }
 };
 export {
-  no as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
-  io as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
-  so as default
+  mo as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  fo as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  co as default
 };

package/dist/vue/KvLoanInfoCard.css

@@ -1 +1 @@
-.loan-card-active-hover[data-v-13281840]:hover{cursor:pointer}.loan-card-use[data-v-13281840]:hover,.loan-card-use[data-v-13281840]: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-13281840]{text-decoration-line:underline}.loan-card-progress[data-v-13281840]:hover,.loan-card-progress[data-v-13281840]:focus{text-decoration-line:none}
+.loan-card-active-hover[data-v-9cc15ed7]:hover{cursor:pointer}.loan-card-use[data-v-9cc15ed7]:hover,.loan-card-use[data-v-9cc15ed7]: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-9cc15ed7]{text-decoration-line:underline}.loan-card-progress[data-v-9cc15ed7]:hover,.loan-card-progress[data-v-9cc15ed7]:focus{text-decoration-line:none}