@kiva/kv-components 8.7.4 → 8.8.0

package/dist/vue/KvClassicLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-7154d01f]:hover,.loan-card-use[data-v-7154d01f]: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-7154d01f]{text-decoration-line:underline}.loan-card-progress[data-v-7154d01f]:hover,.loan-card-progress[data-v-7154d01f]:focus{text-decoration-line:none}
+.loan-card-use[data-v-36c426a5]:hover,.loan-card-use[data-v-36c426a5]: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-36c426a5]{text-decoration-line:underline}.loan-card-progress[data-v-36c426a5]:hover,.loan-card-progress[data-v-36c426a5]:focus{text-decoration-line:none}

package/dist/vue/KvClassicLoanCard.js

@@ -30,7 +30,7 @@ function O(u, a, e, t, q, d) {
       c("div", I, [
         t.isLoading ? (o(), 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 }]),
+          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", E, [
           (o(), n(g(t.tag), {
@@ -231,7 +231,7 @@ function O(u, a, e, t, q, d) {
     ])) : w("", !0)
   ], 6);
 }
-const Z = /* @__PURE__ */ S(D, [["render", O], ["__scopeId", "data-v-7154d01f"]]);
+const Z = /* @__PURE__ */ S(D, [["render", O], ["__scopeId", "data-v-36c426a5"]]);
 export {
   ee as KV_CLASSIC_LOAN_CARD_FRAGMENT,
   te as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,

package/dist/vue/KvCompactLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-1e5999ce]:hover,.loan-card-use[data-v-1e5999ce]: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-1e5999ce]{text-decoration-line:underline}.loan-card-progress[data-v-1e5999ce]:hover,.loan-card-progress[data-v-1e5999ce]:focus{text-decoration-line:none}.loan-card-use-text[data-v-1e5999ce] p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;text-overflow:ellipsis}.loan-card-cta[data-v-1e5999ce] form,.loan-card-cta[data-v-1e5999ce] fieldset,.loan-card-cta[data-v-1e5999ce] .tw-w-full,.loan-card-cta[data-v-1e5999ce] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-1e5999ce] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}
+.loan-card-use[data-v-b1272f83]:hover,.loan-card-use[data-v-b1272f83]: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-b1272f83]{text-decoration-line:underline}.loan-card-progress[data-v-b1272f83]:hover,.loan-card-progress[data-v-b1272f83]:focus{text-decoration-line:none}.loan-card-use-text[data-v-b1272f83] p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;text-overflow:ellipsis}.loan-card-cta[data-v-b1272f83] form,.loan-card-cta[data-v-b1272f83] fieldset,.loan-card-cta[data-v-b1272f83] .tw-w-full,.loan-card-cta[data-v-b1272f83] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-b1272f83] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}

package/dist/vue/KvCompactLoanCard.js

@@ -2,8 +2,8 @@ import N from "./KvCompactLoanCard2.js";
 import { KV_COMPACT_LOAN_CARD_FRAGMENT as p, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as $ } from "./KvCompactLoanCard2.js";
 import { resolveComponent as w, openBlock as a, createElementBlock as l, normalizeClass as c, createVNode as i, createCommentVNode as d, createElementVNode as r, normalizeStyle as T, createBlock as s, resolveDynamicComponent as u, withCtx as f, toDisplayString as k, withModifiers as P, Fragment as g, renderList as A } from "vue";
 import "./KvCompactLoanCard.css";
-import B from "../_virtual/_plugin-vue_export-helper.js";
-const V = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, R = { class: "tw-flex-shrink-0 tw-overflow-hidden" }, D = { class: "tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0" }, S = {
+import R from "../_virtual/_plugin-vue_export-helper.js";
+const B = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, V = { class: "tw-flex-shrink-0 tw-overflow-hidden" }, D = { class: "tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0" }, S = {
   key: 0,
   class: "tw-mb-0.5 tw-w-full"
 }, F = { class: "tw-text-primary !tw-font-medium tw-text-base tw-leading-normal tw-truncate" }, W = ["href"], j = { class: "tw-truncate" }, E = {
@@ -13,24 +13,24 @@ const V = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, R = { class
 function z(h, o, t, e, G, H) {
   const b = w("kv-material-icon"), v = w("kv-borrower-image"), x = w("kv-loan-tag"), m = w("kv-loading-placeholder"), _ = w("kv-loan-use"), y = w("kv-loan-callouts"), L = w("kv-loan-progress-group"), C = w("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-rounded-md tw-shadow-lg tw-w-full", { "tw-relative": t.showCloseButton, "!tw-p-1.5": t.showLightView }])
+    class: c(["tw-flex tw-flex-col tw-items-start tw-justify-between tw-p-1 tw-bg-white tw-rounded-md tw-shadow-lg tw-w-full", { "tw-relative": t.showRefreshButton, "!tw-p-1.5": t.showLightView }])
   }, [
-    t.showCloseButton ? (a(), l("button", {
+    t.showRefreshButton ? (a(), l("button", {
       key: 0,
-      class: "tw-absolute tw--top-1 tw--right-1 tw-p-0.5 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: o[0] || (o[0] = (...n) => e.handleCloseButton && e.handleCloseButton(...n))
+      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: o[0] || (o[0] = (...n) => e.handleRefreshButton && e.handleRefreshButton(...n))
     }, [
       i(b, {
-        icon: e.mdiClose,
-        class: "tw-w-1.5 tw-h-1.5"
+        icon: e.mdiCached,
+        class: "tw-w-2.5 tw-h-2.5 tw--scale-x-100 tw-text-gray-500"
       }, null, 8, ["icon"])
     ])) : d("", !0),
-    r("div", V, [
+    r("div", B, [
       r("div", {
         class: c(["tw-flex tw-items-start tw-gap-2 tw-w-full loan-card-active-hover", { "!tw-gap-1": t.showLightView }]),
         style: T(e.customStyle)
       }, [
-        r("div", R, [
+        r("div", V, [
           (a(), s(u(e.tag), {
             to: e.readMorePath,
             href: e.readMorePath,
@@ -42,7 +42,7 @@ function z(h, o, t, e, G, H) {
           }, {
             default: f(() => [
               i(v, {
-                class: c(["tw-bg-gray-300 tw-rounded-md tw-object-cover", { "!tw-w-7.5 !tw-h-7.5": t.showLightView }]),
+                class: c(["tw-bg-gray-300 tw-rounded-sm tw-object-cover tw-bg-clip-content", { "!tw-w-7.5 !tw-h-7.5": t.showLightView }]),
                 style: { width: "100px", height: "100px" },
                 alt: `Photo of ${e.borrowerName}`,
                 "aspect-ratio": 1,
@@ -240,7 +240,7 @@ function z(h, o, t, e, G, H) {
     ], 2)
   ], 2);
 }
-const Q = /* @__PURE__ */ B(N, [["render", z], ["__scopeId", "data-v-1e5999ce"]]);
+const Q = /* @__PURE__ */ R(N, [["render", z], ["__scopeId", "data-v-b1272f83"]]);
 export {
   p as KV_COMPACT_LOAN_CARD_FRAGMENT,
   $ as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,

package/dist/vue/KvCompactLoanCard.vue.d.ts

@@ -127,7 +127,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
-    showCloseButton: {
+    showRefreshButton: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -155,7 +155,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     mdiMapMarker: string;
     mdiHome: string;
     mdiLink: string;
-    mdiClose: string;
+    mdiCached: string;
     readMorePath: import('vue').ComputedRef<any>;
     state: import('vue').ComputedRef<any>;
     tag: import('vue').ComputedRef<"router-link" | "a">;
@@ -168,11 +168,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     loanUseLoadingRows: import('vue').ComputedRef<3 | 4>;
     clickReadMore: (target: string, event: Event) => void;
     trackWebsiteClick: () => void;
-    handleCloseButton: (event: any) => void;
+    handleRefreshButton: (event: any) => void;
 }, {}, {
     lendersNumber(): any;
     amountLent(): any;
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("add-to-basket" | "remove-from-basket" | "jump-filter-page" | "close-button")[], "add-to-basket" | "remove-from-basket" | "jump-filter-page" | "close-button", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("add-to-basket" | "remove-from-basket" | "jump-filter-page" | "refresh-button")[], "add-to-basket" | "remove-from-basket" | "jump-filter-page" | "refresh-button", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     loanId: {
         type: NumberConstructor;
         default: any;
@@ -297,7 +297,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
-    showCloseButton: {
+    showRefreshButton: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -309,7 +309,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     "onAdd-to-basket"?: (...args: any[]) => any;
     "onRemove-from-basket"?: (...args: any[]) => any;
     "onJump-filter-page"?: (...args: any[]) => any;
-    "onClose-button"?: (...args: any[]) => any;
+    "onRefresh-button"?: (...args: any[]) => any;
 }>, {
     loan: Record<string, any>;
     externalLinks: boolean;
@@ -340,7 +340,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     website: string;
     showLoanUse: boolean;
     showLightView: boolean;
-    showCloseButton: boolean;
+    showRefreshButton: boolean;
     customAmountLent: string;
 }, {}, {
     KvBorrowerImage: import('vue').DefineComponent<import('vue').ExtractPropTypes<{

package/dist/vue/KvCompactLoanCard2.js

@@ -1,7 +1,7 @@
 import r from "graphql-tag";
-import F from "numeral";
+import R from "numeral";
 import { computed as n } from "vue";
-import { mdiMapMarker as M, mdiHome as S, mdiLink as E, mdiClose as R } from "@mdi/js";
+import { mdiMapMarker as F, mdiHome as M, mdiLink as S, mdiCached as E } from "@mdi/js";
 import { LOAN_CALLOUTS_FRAGMENT as O, LOAN_GEOCODE_FRAGMENT as G, LOAN_PROGRESS_FRAGMENT as P, loanCardComputedProperties as V, loanCardMethods as U } from "../utils/loanCard.js";
 import D from "./KvLoanUse.js";
 import $ from "./KvBorrowerImage.js";
@@ -15,7 +15,7 @@ import z from "./KvLoanTeamPick.js";
 import { KV_LEND_CTA_FRAGMENT as J, KV_LEND_CTA_USER_FRAGMENT as Q } from "./KvLendCta2.js";
 import { KV_LOAN_TAG_FRAGMENT as X } from "./KvLoanTag2.js";
 import { KV_LOAN_USE_FRAGMENT as Y } from "./KvLoanUse2.js";
-const Ce = r`
+const ge = r`
 	fragment KvCompactLoanCard on LoanBasic {
 		id
 		image {
@@ -43,7 +43,7 @@ const Ce = r`
 	${O}
 	${G}
 	${P}
-`, he = r`
+`, Ce = r`
 	fragment KvCompactLoanCardUser on LoanBasic {
 		id
 		...KvLendCtaUser
@@ -187,7 +187,7 @@ const Ce = r`
       type: Number,
       default: 0
     },
-    showCloseButton: {
+    showRefreshButton: {
       type: Boolean,
       default: !1
     },
@@ -197,7 +197,7 @@ const Ce = r`
     }
   },
   emits: [
-    "close-button",
+    "refresh-button",
     "jump-filter-page",
     "add-to-basket",
     "remove-from-basket"
@@ -206,8 +206,8 @@ const Ce = r`
     const {
       allDataLoaded: a,
       borrowerName: i,
-      city: l,
-      countryName: s,
+      city: s,
+      countryName: l,
       distributionModel: u,
       formattedLocation: d,
       fundraisingPercent: m,
@@ -215,10 +215,10 @@ const Ce = r`
       imageHash: c,
       isLoading: p,
       loanAmount: L,
-      loanBorrowerCount: y,
-      loanCallouts: g,
-      loanStatus: C,
-      loanUse: h,
+      loanBorrowerCount: h,
+      loanCallouts: y,
+      loanStatus: g,
+      loanUse: C,
       readMorePath: A,
       state: _,
       tag: N,
@@ -238,8 +238,8 @@ const Ce = r`
     return {
       allDataLoaded: a,
       borrowerName: i,
-      city: l,
-      countryName: s,
+      city: s,
+      countryName: l,
       distributionModel: u,
       formattedLocation: d,
       formattedWebsite: v,
@@ -248,14 +248,14 @@ const Ce = r`
       imageHash: c,
       isLoading: p,
       loanAmount: L,
-      loanBorrowerCount: y,
-      loanCallouts: g,
-      loanStatus: C,
-      loanUse: h,
-      mdiMapMarker: M,
-      mdiHome: S,
-      mdiLink: E,
-      mdiClose: R,
+      loanBorrowerCount: h,
+      loanCallouts: y,
+      loanStatus: g,
+      loanUse: C,
+      mdiMapMarker: F,
+      mdiHome: M,
+      mdiLink: S,
+      mdiCached: E,
       readMorePath: A,
       state: _,
       tag: N,
@@ -267,8 +267,8 @@ const Ce = r`
       trackWebsiteClick: () => {
         e.kvTrackFunction("Lending", "click-Business Website", "Website", e.loanId);
       },
-      handleCloseButton: (o) => {
-        t("close-button", o);
+      handleRefreshButton: (o) => {
+        t("refresh-button", o);
       }
     };
   },
@@ -280,12 +280,12 @@ const Ce = r`
     amountLent() {
       var t, a;
       const e = ((a = (t = this.loan) == null ? void 0 : t.loanFundraisingInfo) == null ? void 0 : a.fundedAmount) ?? 0;
-      return F(e).format("$0,0");
+      return R(e).format("$0,0");
     }
   }
 };
 export {
-  Ce as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  he as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  ge as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  Ce as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
   Ae as default
 };

package/dist/vue/KvIntroductionLoanCard.css

@@ -1 +1 @@
-.loan-callouts[data-v-5220c6a3] span{background-color:transparent!important;--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1))}.loan-card-use[data-v-5220c6a3]:hover,.loan-card-use[data-v-5220c6a3]: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-5220c6a3],.loan-card-active-hover:hover .loan-card-name[data-v-5220c6a3]{text-decoration-line:underline}.loan-card-progress[data-v-5220c6a3],.loan-card-progress[data-v-5220c6a3]:hover,.loan-card-progress[data-v-5220c6a3]:focus{text-decoration-line:none}.loan-card-name[data-v-5220c6a3]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;padding-left:1.5rem;padding-right:1.5rem;padding-top:.5rem}.loan-bookmark[data-v-5220c6a3] button{border-top-left-radius:0!important;border-top-right-radius:0!important}
+.loan-callouts[data-v-035d3df9] span{background-color:transparent!important;--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1))}.loan-card-use[data-v-035d3df9]:hover,.loan-card-use[data-v-035d3df9]: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-035d3df9],.loan-card-active-hover:hover .loan-card-name[data-v-035d3df9]{text-decoration-line:underline}.loan-card-progress[data-v-035d3df9],.loan-card-progress[data-v-035d3df9]:hover,.loan-card-progress[data-v-035d3df9]:focus{text-decoration-line:none}.loan-card-name[data-v-035d3df9]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;cursor:pointer;overflow:hidden;text-overflow:ellipsis;padding-left:1.5rem;padding-right:1.5rem;padding-top:.5rem}.loan-bookmark[data-v-035d3df9] button{border-top-left-radius:0!important;border-top-right-radius:0!important}

package/dist/vue/KvIntroductionLoanCard.js

@@ -1,6 +1,6 @@
 import M 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 d, openBlock as e, createElementBlock as n, normalizeClass as _, normalizeStyle as P, createElementVNode as s, createBlock as o, resolveDynamicComponent as g, withCtx as m, createVNode as i, Suspense as R, createTextVNode as A, toDisplayString as f, createCommentVNode as c, Fragment as p, renderList as T } from "vue";
+import { resolveComponent as d, openBlock as e, createElementBlock as n, normalizeClass as _, normalizeStyle as P, createElementVNode as s, createBlock as o, resolveDynamicComponent as g, withCtx as m, createVNode as i, Suspense as R, createTextVNode as p, toDisplayString as f, createCommentVNode as c, Fragment as A, renderList as T } from "vue";
 import "./KvIntroductionLoanCard.css";
 import B from "../_virtual/_plugin-vue_export-helper.js";
 const D = { class: "tw-grow" }, z = { class: "loan-card-active-hover" }, I = {
@@ -48,7 +48,7 @@ function G(k, a, w, t, H, h) {
           }, {
             default: m(() => [
               i(u, {
-                class: "tw-relative tw-w-full tw-bg-black tw-rounded-t borrower-image",
+                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 },
@@ -70,7 +70,7 @@ function G(k, a, w, t, H, h) {
                     ]),
                     _: 1
                   })),
-                  A(" " + f(t.formattedLocation), 1)
+                  p(" " + f(t.formattedLocation), 1)
                 ])
               ])) : c("", !0)
             ]),
@@ -150,7 +150,7 @@ function G(k, a, w, t, H, h) {
               class: _(["tw-pt-0.5 tw-px-2", { "tw-mb-1.5": !t.isLoading }])
             }, [
               t.isLoading ? (e(), n("div", S, [
-                (e(!0), n(p, null, T([...Array(3)], (r, L) => (e(), n("div", {
+                (e(!0), n(A, null, T([...Array(3)], (r, L) => (e(), n("div", {
                   key: L,
                   class: "tw-h-2 tw-mb-1"
                 }, [
@@ -226,7 +226,7 @@ function G(k, a, w, t, H, h) {
     ])
   ], 6);
 }
-const Y = /* @__PURE__ */ B(M, [["render", G], ["__scopeId", "data-v-5220c6a3"]]);
+const Y = /* @__PURE__ */ B(M, [["render", G], ["__scopeId", "data-v-035d3df9"]]);
 export {
   tt as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
   et as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,

package/dist/vue/KvLoanInfoCard.css

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

package/dist/vue/KvLoanInfoCard.js

@@ -1,14 +1,14 @@
-import P from "graphql-tag";
-import { LOAN_GEOCODE_FRAGMENT as B, loanCardComputedProperties as R, loanCardMethods as z } from "../utils/loanCard.js";
-import D from "./KvLoanUse.js";
-import K from "./KvBorrowerImage.js";
-import W from "./KvMaterialIcon.js";
-import F from "./KvLoadingPlaceholder.js";
-import { resolveComponent as c, openBlock as t, createElementBlock as i, normalizeClass as _, normalizeStyle as T, createElementVNode as d, createBlock as w, resolveDynamicComponent as v, withCtx as k, createVNode as s, createTextVNode as E, toDisplayString as b, createCommentVNode as I, Fragment as O, renderList as V, withModifiers as U } from "vue";
+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 T from "./KvLoadingPlaceholder.js";
+import { resolveComponent as m, openBlock as t, createElementBlock as i, normalizeClass as _, normalizeStyle as E, createElementVNode as d, createBlock as c, resolveDynamicComponent as v, withCtx as k, createVNode as s, createTextVNode as I, toDisplayString as b, createCommentVNode as O, Fragment as V, renderList as U, withModifiers as G } 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 ue = P`
+import H from "../_virtual/_plugin-vue_export-helper.js";
+import { KV_LOAN_USE_FRAGMENT as q } from "./KvLoanUse2.js";
+const fe = B`
 	fragment KvLoanInfoCard on LoanBasic {
 		id
 		gender
@@ -20,15 +20,15 @@ const ue = P`
 		...KvLoanUse
 		...LoanGeocode
 	}
-	${H}
-	${B}
-`, q = {
+	${q}
+	${R}
+`, j = {
   name: "KvLoanInfoCard",
   components: {
-    KvBorrowerImage: K,
-    KvLoadingPlaceholder: F,
-    KvLoanUse: D,
-    KvMaterialIcon: W
+    KvBorrowerImage: W,
+    KvLoadingPlaceholder: T,
+    KvLoanUse: K,
+    KvMaterialIcon: F
   },
   props: {
     loanId: {
@@ -76,7 +76,7 @@ const ue = P`
       default: ""
     }
   },
-  setup(m, { emit: a }) {
+  setup(w, { emit: a }) {
     const {
       allDataLoaded: o,
       borrowerName: e,
@@ -87,17 +87,18 @@ const ue = P`
       imageHash: u,
       isLoading: f,
       loanAmount: r,
-      loanStatus: g,
+      loanBorrowerCount: g,
+      loanStatus: x,
       loanUse: p,
-      mdiMapMarker: x,
-      readMorePath: L,
-      state: C,
-      tag: M,
-      unreservedAmount: N,
-      sharesAvailable: S
-    } = R(m), {
-      clickReadMore: A
-    } = z(m, a);
+      mdiMapMarker: L,
+      readMorePath: C,
+      state: M,
+      tag: N,
+      unreservedAmount: S,
+      sharesAvailable: A
+    } = z(w), {
+      clickReadMore: P
+    } = D(w, a);
     return {
       allDataLoaded: o,
       borrowerName: e,
@@ -108,15 +109,16 @@ const ue = P`
       imageHash: u,
       isLoading: f,
       loanAmount: r,
-      loanStatus: g,
+      loanBorrowerCount: g,
+      loanStatus: x,
       loanUse: p,
-      mdiMapMarker: x,
-      readMorePath: L,
-      state: C,
-      tag: M,
-      unreservedAmount: N,
-      sharesAvailable: S,
-      clickReadMore: A
+      mdiMapMarker: L,
+      readMorePath: C,
+      state: M,
+      tag: N,
+      unreservedAmount: S,
+      sharesAvailable: A,
+      clickReadMore: P
     };
   },
   computed: {
@@ -139,36 +141,36 @@ const ue = P`
       ];
     }
   }
-}, j = { class: "tw-grow" }, J = { class: "loan-card-active-hover tw-h-full tw-flex tw-flex-col" }, Q = {
+}, J = { class: "tw-grow" }, Q = { class: "loan-card-active-hover tw-h-full tw-flex tw-flex-col" }, X = {
   key: 1,
   class: "tw-relative"
-}, X = { key: 0 }, Y = {
+}, Y = { key: 0 }, Z = {
   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-h4 tw-inline-flex tw-items-center",
   style: { padding: "2px 6px", "text-transform": "capitalize" }
-}, Z = { class: "tw-mb-1.5 tw-pt-1" }, $ = {
+}, $ = { class: "tw-mb-1.5 tw-pt-1" }, ee = {
   key: 0,
   class: "tw-w-full",
   style: { height: "5.5rem" }
-}, ee = { key: 1 }, te = { class: "tw-mt-1" }, ae = {
+}, te = { key: 1 }, ae = { class: "tw-mt-1" }, oe = {
   key: 0,
   class: "tw-w-full",
   style: { height: "1rem" }
 };
-function oe(m, a, o, e, y, n) {
-  const l = c("kv-loading-placeholder"), h = c("kv-borrower-image"), u = c("kv-material-icon"), f = c("kv-loan-use");
+function re(w, a, o, e, y, n) {
+  const l = 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 }]),
     "data-testid": "loan-card",
-    style: T([{ "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }, { minWidth: "230px", maxWidth: n.cardWidth }])
+    style: E([{ "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }, { minWidth: "230px", maxWidth: n.cardWidth }])
   }, [
-    d("div", j, [
-      d("div", J, [
-        e.isLoading ? (t(), w(l, {
+    d("div", J, [
+      d("div", Q, [
+        e.isLoading ? (t(), c(l, {
           key: 0,
-          class: _(["tw-mb-1 tw-w-full", { "tw-rounded-t tw-rounded-b-none": o.largeCard, "tw-rounded": !o.largeCard }]),
+          class: _(["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(), w(v(e.tag), {
+        }, null, 8, ["class"])) : (t(), i("div", X, [
+          (t(), c(v(e.tag), {
             to: e.readMorePath,
             href: e.readMorePath,
             class: "tw-flex",
@@ -177,7 +179,7 @@ function oe(m, a, o, e, y, n) {
           }, {
             default: k(() => [
               s(h, {
-                class: _(["tw-relative tw-w-full tw-bg-black", { "tw-rounded-t": o.largeCard, "tw-rounded": !o.largeCard }]),
+                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}`,
                 "aspect-ratio": n.imageAspectRatio,
                 "default-image": { width: n.imageDefaultWidth },
@@ -185,20 +187,20 @@ function oe(m, a, o, e, y, n) {
                 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, [
-                d("p", Y, [
+              e.countryName ? (t(), i("div", Y, [
+                d("p", Z, [
                   s(u, {
                     class: "tw-h-2 tw-w-2",
                     icon: e.mdiMapMarker
                   }, null, 8, ["icon"]),
-                  E(" " + b(e.formattedLocation), 1)
+                  I(" " + b(e.formattedLocation), 1)
                 ])
-              ])) : I("", !0)
+              ])) : O("", !0)
             ]),
             _: 1
           }, 8, ["to", "href"]))
         ])),
-        (t(), w(v(e.tag), {
+        (t(), c(v(e.tag), {
           to: e.readMorePath,
           href: e.readMorePath,
           class: "loan-card-use tw-no-underline tw-text-primary",
@@ -206,21 +208,21 @@ function oe(m, a, o, e, y, n) {
           onClick: a[1] || (a[1] = (r) => e.clickReadMore("Use", r))
         }, {
           default: k(() => [
-            d("div", Z, [
-              e.isLoading ? (t(), i("div", $, [
-                (t(!0), i(O, null, V([...Array(4)], (r, g) => (t(), i("div", {
+            d("div", $, [
+              e.isLoading ? (t(), i("div", ee, [
+                (t(!0), i(V, null, U([...Array(4)], (r, g) => (t(), i("div", {
                   key: g,
                   class: "tw-h-2 tw-mb-1"
                 }, [
                   s(l)
                 ]))), 128))
-              ])) : (t(), i("div", ee, [
+              ])) : (t(), i("div", te, [
                 s(f, {
                   use: e.loanUse,
                   "hide-loan-amount": !0,
                   "loan-amount": e.loanAmount,
                   status: e.loanStatus,
-                  "borrower-count": m.loanBorrowerCount,
+                  "borrower-count": e.loanBorrowerCount,
                   name: e.borrowerName,
                   "distribution-model": e.distributionModel,
                   "use-indicative-help-text": !0
@@ -230,7 +232,7 @@ function oe(m, a, o, e, y, n) {
           ]),
           _: 1
         }, 8, ["to", "href"])),
-        (t(), w(v(e.tag), {
+        (t(), c(v(e.tag), {
           to: e.readMorePath,
           href: e.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",
@@ -238,12 +240,12 @@ function oe(m, a, o, e, y, n) {
           onClick: a[3] || (a[3] = (r) => e.clickReadMore(o.primaryLinkText, r))
         }, {
           default: k(() => [
-            d("div", te, [
-              e.isLoading ? (t(), i("div", ae, [
+            d("div", ae, [
+              e.isLoading ? (t(), i("div", oe, [
                 s(l)
               ])) : (t(), i("div", {
                 key: 1,
-                onClick: a[2] || (a[2] = U((r) => e.clickReadMore("ViewLoan", r), ["prevent"]))
+                onClick: a[2] || (a[2] = G((r) => e.clickReadMore("ViewLoan", r), ["prevent"]))
               }, b(o.primaryLinkText), 1))
             ])
           ]),
@@ -253,8 +255,8 @@ function oe(m, a, o, e, y, n) {
     ])
   ], 6);
 }
-const fe = /* @__PURE__ */ G(q, [["render", oe], ["__scopeId", "data-v-56d96df4"]]);
+const ge = /* @__PURE__ */ H(j, [["render", re], ["__scopeId", "data-v-5370a5d5"]]);
 export {
-  ue as KV_LOAN_INFO_CARD_FRAGMENT,
-  fe as default
+  fe as KV_LOAN_INFO_CARD_FRAGMENT,
+  ge as default
 };

package/dist/vue/KvWideLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-e7463419]:hover,.loan-card-use[data-v-e7463419]: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-e7463419]{text-decoration-line:underline}.loan-card-progress[data-v-e7463419],.loan-card-progress[data-v-e7463419]:hover,.loan-card-progress[data-v-e7463419]:focus{text-decoration-line:none}.loan-callouts[data-v-e7463419] div{height:auto;flex-wrap:wrap}
+.loan-card-use[data-v-6435536c]:hover,.loan-card-use[data-v-6435536c]: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-6435536c]{text-decoration-line:underline}.loan-card-progress[data-v-6435536c],.loan-card-progress[data-v-6435536c]:hover,.loan-card-progress[data-v-6435536c]:focus{text-decoration-line:none}.loan-callouts[data-v-6435536c] div{height:auto;flex-wrap:wrap}

package/dist/vue/KvWideLoanCard.js

@@ -39,7 +39,7 @@ function O(h, a, t, e, j, g) {
         }, {
           default: k(() => [
             s(v, {
-              class: "tw-relative tw-w-full tw-bg-black tw-rounded",
+              class: "tw-relative tw-w-full tw-bg-black tw-rounded-sm tw-bg-clip-content",
               alt: `Photo of ${e.borrowerName}`,
               "aspect-ratio": g.imageAspectRatio,
               "default-image": { width: g.imageDefaultWidth },
@@ -185,7 +185,7 @@ function O(h, a, t, e, j, g) {
     ])
   ], 2);
 }
-const X = /* @__PURE__ */ V(P, [["render", O], ["__scopeId", "data-v-e7463419"]]);
+const X = /* @__PURE__ */ V(P, [["render", O], ["__scopeId", "data-v-6435536c"]]);
 export {
   p as KV_WIDE_LOAN_CARD_FRAGMENT,
   $ as KV_WIDE_LOAN_CARD_USER_FRAGMENT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.7.4",
+  "version": "8.8.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "94317606c1fbe6d9d75ebb36504bace5312a09e1"
+  "gitHead": "ad3a7e8530e8f47ad2a93e41c3307173755dbcde"
 }