@kiva/kv-components 6.13.2 → 6.14.0

package/dist/vue/KvLoanTag.js

@@ -1,12 +1,34 @@
-import { parseISO as s, differenceInDays as d } from "date-fns";
-import m from "numeral";
-import c from "./KvCountdownTimer.js";
-import { resolveComponent as f, openBlock as i, createElementBlock as p, normalizeStyle as h, createTextVNode as x, toDisplayString as g, createBlock as y, createCommentVNode as l } from "vue";
-import v from "../_virtual/_plugin-vue_export-helper.js";
-const E = "N/A", _ = {
+import { parseISO as s, differenceInDays as m } from "date-fns";
+import c from "graphql-tag";
+import p from "numeral";
+import f from "./KvCountdownTimer.js";
+import { resolveComponent as h, openBlock as d, createElementBlock as g, normalizeStyle as L, createTextVNode as x, toDisplayString as A, createBlock as v, createCommentVNode as l } from "vue";
+import _ from "../_virtual/_plugin-vue_export-helper.js";
+const y = "N/A", t = {
+  almostFunded: "almost-funded",
+  endingSoon: "ending-soon",
+  matchedLoan: "matched-loan",
+  lseLoan: "lse-loan"
+}, I = c`
+	fragment KvLoanTag on LoanBasic {
+		id
+		loanFundraisingInfo {
+			id
+			fundedAmount
+			reservedAmount
+		}
+		loanAmount
+		matchRatio
+		matchingText
+		plannedExpirationDate
+		... on LoanPartner {
+			partnerName
+		}
+	}
+`, E = {
   name: "KvLoanTag",
   components: {
-    KvCountdownTimer: c
+    KvCountdownTimer: f
   },
   props: {
     loan: {
@@ -24,27 +46,27 @@ const E = "N/A", _ = {
       return s((e = this.loan) == null ? void 0 : e.plannedExpirationDate);
     },
     isLseLoan() {
-      var e, t;
-      return ((t = (e = this.loan) == null ? void 0 : e.partnerName) == null ? void 0 : t.toUpperCase().includes(E)) ?? !1;
+      var e, n;
+      return ((n = (e = this.loan) == null ? void 0 : e.partnerName) == null ? void 0 : n.toUpperCase().includes(y)) ?? !1;
     },
     amountLeft() {
-      var a, o;
-      const e = ((a = this.loan) == null ? void 0 : a.loanFundraisingInfo) ?? { fundedAmount: 0, reservedAmount: 0 }, { fundedAmount: t, reservedAmount: r } = e;
-      return m((o = this.loan) == null ? void 0 : o.loanAmount).subtract(t).subtract(r).value();
+      var o, r;
+      const e = ((o = this.loan) == null ? void 0 : o.loanFundraisingInfo) ?? { fundedAmount: 0, reservedAmount: 0 }, { fundedAmount: n, reservedAmount: i } = e;
+      return p((r = this.loan) == null ? void 0 : r.loanAmount).subtract(n).subtract(i).value();
     },
     variation() {
-      var e, t;
-      return (e = this.loan) != null && e.matchingText ? "matched-loan" : this.isLseLoan ? "lse-loan" : d(s((t = this.loan) == null ? void 0 : t.plannedExpirationDate), Date.now()) <= 3 ? "ending-soon" : this.amountLeft < 100 && this.amountLeft >= 0 ? "almost-funded" : null;
+      var e, n;
+      return (e = this.loan) != null && e.matchingText ? t.matchedLoan : this.isLseLoan ? t.lseLoan : m(s((n = this.loan) == null ? void 0 : n.plannedExpirationDate), Date.now()) <= 3 ? t.endingSoon : this.amountLeft < 100 && this.amountLeft >= 0 ? t.almostFunded : null;
     },
     tagText() {
       var e;
       switch (this.variation) {
-        case "lse-loan":
+        case t.lseLoan:
           return `${this.useExpandedStyles ? "⚡ " : ""}High community impact`;
-        case "almost-funded":
+        case t.almostFunded:
           return `${this.useExpandedStyles ? "💸 " : ""}Almost funded`;
         // eslint-disable-next-line max-len
-        case "matched-loan":
+        case t.matchedLoan:
           return `${this.useExpandedStyles ? "🤝 " : ""}${this.matchRatio + 1}x matching by ${(e = this.loan) == null ? void 0 : e.matchingText}`;
         default:
           return `${this.useExpandedStyles ? "⏰ " : ""}Ending soon: `;
@@ -53,9 +75,9 @@ const E = "N/A", _ = {
     tagColor() {
       if (this.useExpandedStyles)
         switch (this.variation) {
-          case "almost-funded":
+          case t.almostFunded:
             return "#AF741C";
-          case "ending-soon":
+          case t.endingSoon:
             return "#CE2626";
           default:
             return "#2B7C5F";
@@ -68,21 +90,22 @@ const E = "N/A", _ = {
     }
   }
 };
-function L(e, t, r, a, o, n) {
-  const u = f("kv-countdown-timer");
-  return n.variation ? (i(), p("div", {
+function S(e, n, i, o, r, a) {
+  const u = h("kv-countdown-timer");
+  return a.variation ? (d(), g("div", {
     key: 0,
     class: "tw-text-small tw-font-medium tw-pt-0.5 tw-line-clamp-1",
-    style: h({ color: n.tagColor })
+    style: L({ color: a.tagColor })
   }, [
-    x(g(n.tagText) + " ", 1),
-    n.variation === "ending-soon" ? (i(), y(u, {
+    x(A(a.tagText) + " ", 1),
+    a.variation === "ending-soon" ? (d(), v(u, {
       key: 0,
-      deadline: n.deadline
+      deadline: a.deadline
     }, null, 8, ["deadline"])) : l("", !0)
   ], 4)) : l("", !0);
 }
-const k = /* @__PURE__ */ v(_, [["render", L]]);
+const B = /* @__PURE__ */ _(E, [["render", S]]);
 export {
-  k as default
+  I as KV_LOAN_TAG_FRAGMENT,
+  B as default
 };

package/dist/vue/KvLoanUse.js

@@ -1,7 +1,20 @@
-import n from "numeral";
-import { openBlock as i, createElementBlock as a } from "vue";
+import n from "graphql-tag";
+import a from "numeral";
+import { openBlock as i, createElementBlock as o } from "vue";
 import r from "../_virtual/_plugin-vue_export-helper.js";
-const t = "direct", o = {
+const t = "direct", g = n`
+	fragment KvLoanUse on LoanBasic {
+		id
+		anonymizationLevel
+		use
+		loanAmount
+		status
+		borrowerCount
+		name
+		distributionModel
+		whySpecial
+	}
+`, l = {
   name: "KvLoanUse",
   props: {
     anonymizationLevel: {
@@ -57,17 +70,18 @@ const t = "direct", o = {
       if (this.hideLoanAmount)
         return `Help <span class="data-hj-suppress">${this.name}</span> ${this.use.charAt(0).toLowerCase() + this.use.slice(1)} ${this.whySpecialSentence}`;
       const e = this.borrowerCount > 1;
-      return `${n(this.loanAmount).format("$0,0")} ${this.isDirect ? "to" : this.helpLanguage} ${e ? "a member of " : ""}<span class="data-hj-suppress">${this.name}</span> ${this.isDirect ? `${this.helpLanguage} ` : ""}${this.use.charAt(0).toLowerCase() + this.use.slice(1)}${this.whySpecialSentence}`;
+      return `${a(this.loanAmount).format("$0,0")} ${this.isDirect ? "to" : this.helpLanguage} ${e ? "a member of " : ""}<span class="data-hj-suppress">${this.name}</span> ${this.isDirect ? `${this.helpLanguage} ` : ""}${this.use.charAt(0).toLowerCase() + this.use.slice(1)}${this.whySpecialSentence}`;
     }
   }
-}, l = ["innerHTML"];
-function u(e, h, p, c, d, s) {
-  return i(), a("p", {
+}, u = ["innerHTML"];
+function h(e, p, c, m, d, s) {
+  return i(), o("p", {
     class: "tw-line-clamp-4",
     innerHTML: s.loanUse
-  }, null, 8, l);
+  }, null, 8, u);
 }
-const S = /* @__PURE__ */ r(o, [["render", u]]);
+const w = /* @__PURE__ */ r(l, [["render", h]]);
 export {
-  S as default
+  g as KV_LOAN_USE_FRAGMENT,
+  w as default
 };

package/dist/vue/KvWideLoanCard.css

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

package/dist/vue/KvWideLoanCard.js

@@ -1,28 +1,58 @@
-import { loanCardComputedProperties as V, loanCardMethods as z } from "../utils/loanCard.js";
-import T from "./KvLoanUse.js";
-import F from "./KvBorrowerImage.js";
-import R from "./KvLoanProgressGroup.js";
-import I from "./KvLoanCallouts.js";
-import W from "./KvLendCta.js";
-import H from "./KvLoanBookmark.js";
-import U from "./KvLoanTag.js";
-import j from "./KvMaterialIcon.js";
-import q from "./KvLoadingPlaceholder.js";
-import { resolveComponent as r, openBlock as o, createElementBlock as s, normalizeClass as p, createElementVNode as m, createBlock as n, resolveDynamicComponent as f, withCtx as g, createVNode as d, createTextVNode as E, toDisplayString as M, createCommentVNode as u, Fragment as O, renderList as G } from "vue";
+import B from "graphql-tag";
+import { LOAN_CALLOUTS_FRAGMENT as S, LOAN_GEOCODE_FRAGMENT as F, LOAN_PROGRESS_FRAGMENT as V, loanCardComputedProperties as O, loanCardMethods as G } from "../utils/loanCard.js";
+import U, { KV_LOAN_USE_FRAGMENT as W } from "./KvLoanUse.js";
+import z from "./KvBorrowerImage.js";
+import I from "./KvLoanProgressGroup.js";
+import H from "./KvLoanCallouts.js";
+import j, { KV_LEND_CTA_FRAGMENT as q, KV_LEND_CTA_USER_FRAGMENT as J } from "./KvLendCta.js";
+import Q, { KV_LOAN_BOOKMARK_FRAGMENT as X } from "./KvLoanBookmark.js";
+import Y, { KV_LOAN_TAG_FRAGMENT as Z } from "./KvLoanTag.js";
+import $ from "./KvMaterialIcon.js";
+import ee from "./KvLoadingPlaceholder.js";
+import { resolveComponent as r, openBlock as o, createElementBlock as s, normalizeClass as N, createElementVNode as m, createBlock as l, resolveDynamicComponent as f, withCtx as g, createVNode as d, createTextVNode as te, toDisplayString as M, createCommentVNode as u, Fragment as oe, renderList as ae } from "vue";
 import "./KvWideLoanCard.css";
-import J from "../_virtual/_plugin-vue_export-helper.js";
-const Q = {
+import ne from "../_virtual/_plugin-vue_export-helper.js";
+const De = B`
+	fragment KvWideLoanCard on LoanBasic {
+		id
+		image {
+			id
+			hash # for imageHash
+		}
+		name # for borrowerName
+		...KvLendCta
+		...KvLoanTag
+		...KvLoanUse
+		...LoanCallouts
+		...LoanGeocode
+		...LoanProgress
+	}
+	${q}
+	${Z}
+	${W}
+	${S}
+	${F}
+	${V}
+`, Te = B`
+	fragment KvWideLoanCardUser on LoanBasic {
+		id
+		...KvLendCtaUser
+		...KvLoanBookmark
+	}
+	${J}
+	${X}
+`, le = {
   name: "KvWideLoanCard",
   components: {
-    KvBorrowerImage: F,
-    KvLoadingPlaceholder: q,
-    KvLoanUse: T,
-    KvLoanProgressGroup: R,
-    KvMaterialIcon: j,
-    KvLendCta: W,
-    KvLoanTag: U,
-    KvLoanCallouts: I,
-    KvLoanBookmark: H
+    KvBorrowerImage: z,
+    KvLoadingPlaceholder: ee,
+    KvLoanUse: U,
+    KvLoanProgressGroup: I,
+    KvMaterialIcon: $,
+    KvLendCta: j,
+    KvLoanTag: Y,
+    KvLoanCallouts: H,
+    KvLoanBookmark: Q
   },
   props: {
     loanId: {
@@ -114,49 +144,51 @@ const Q = {
     const {
       allDataLoaded: t,
       borrowerName: e,
-      city: B,
+      city: C,
       countryName: w,
       distributionModel: i,
       formattedLocation: k,
       fundraisingPercent: h,
-      hasProgressData: v,
-      imageHash: b,
-      isLoading: y,
-      loanAmount: _,
-      loanBorrowerCount: x,
-      loanCallouts: L,
-      loanStatus: l,
-      loanUse: C,
-      mdiMapMarker: P,
-      readMorePath: A,
-      state: D,
-      tag: S,
-      unreservedAmount: N
-    } = V(c), {
-      clickReadMore: K
-    } = z(c, a);
+      hasProgressData: _,
+      imageHash: v,
+      isLoading: b,
+      loanAmount: y,
+      loanBorrowerCount: L,
+      loanCallouts: A,
+      loanStatus: n,
+      loanUse: x,
+      mdiMapMarker: K,
+      readMorePath: P,
+      state: R,
+      tag: D,
+      unreservedAmount: T,
+      sharesAvailable: p
+    } = O(c), {
+      clickReadMore: E
+    } = G(c, a);
     return {
       allDataLoaded: t,
       borrowerName: e,
-      city: B,
+      city: C,
       countryName: w,
       distributionModel: i,
       formattedLocation: k,
       fundraisingPercent: h,
-      hasProgressData: v,
-      imageHash: b,
-      isLoading: y,
-      loanAmount: _,
-      loanBorrowerCount: x,
-      loanCallouts: L,
-      loanStatus: l,
-      loanUse: C,
-      mdiMapMarker: P,
-      readMorePath: A,
-      state: D,
-      tag: S,
-      unreservedAmount: N,
-      clickReadMore: K
+      hasProgressData: _,
+      imageHash: v,
+      isLoading: b,
+      loanAmount: y,
+      loanBorrowerCount: L,
+      loanCallouts: A,
+      loanStatus: n,
+      loanUse: x,
+      mdiMapMarker: K,
+      readMorePath: P,
+      state: R,
+      tag: D,
+      unreservedAmount: T,
+      sharesAvailable: p,
+      clickReadMore: E
     };
   },
   computed: {
@@ -179,39 +211,39 @@ const Q = {
       ];
     }
   }
-}, X = { class: "loan-card-active-hover tw-flex-1 tw-min-w-[275px] md:tw-min-w-[320px] md:tw-max-w-[320px]" }, Y = {
+}, re = { class: "loan-card-active-hover tw-flex-1 tw-min-w-[275px] md:tw-min-w-[320px] md:tw-max-w-[320px]" }, ie = {
   key: 1,
   class: "tw-relative tw-w-full"
-}, Z = { key: 0 }, $ = {
+}, se = { key: 0 }, de = {
   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" }
-}, ee = { class: "tw-flex tw-flex-col tw-flex-1 tw-px-1" }, te = { class: "tw-hidden md:tw-inline-block" }, oe = { class: "tw-pt-1" }, ae = {
+}, me = { class: "tw-flex tw-flex-col tw-flex-1 tw-px-1" }, ce = { class: "tw-hidden md:tw-inline-block" }, we = { class: "tw-pt-1" }, ue = {
   key: 0,
   class: "tw-w-full",
   style: { height: "5.5rem" }
-}, le = { key: 1 }, ne = { class: "tw-flex tw-flex-row tw-justify-between tw-gap-1 md:tw-gap-3" }, re = {
+}, fe = { key: 1 }, ge = { class: "tw-flex tw-flex-row tw-justify-between tw-gap-1 md:tw-gap-3" }, ke = {
   key: 0,
   class: "tw-w-full tw-pt-1 tw-pr-1"
 };
-function ie(c, a, t, e, B, w) {
-  const i = r("kv-loading-placeholder"), k = r("kv-borrower-image"), h = r("kv-material-icon"), v = r("kv-loan-bookmark"), b = r("kv-loan-tag"), y = r("kv-loan-use"), _ = r("kv-loan-callouts"), x = r("kv-loan-progress-group"), L = r("kv-lend-cta");
+function he(c, a, t, e, C, w) {
+  const i = r("kv-loading-placeholder"), k = r("kv-borrower-image"), h = r("kv-material-icon"), _ = r("kv-loan-bookmark"), v = r("kv-loan-tag"), b = r("kv-loan-use"), y = r("kv-loan-callouts"), L = r("kv-loan-progress-group"), A = r("kv-lend-cta");
   return o(), s("div", {
-    class: p(["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 }]),
+    class: N(["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)" }
   }, [
-    m("div", X, [
-      e.isLoading ? (o(), n(i, {
+    m("div", re, [
+      e.isLoading ? (o(), l(i, {
         key: 0,
         class: "tw-mb-1 tw-w-full tw-rounded",
         style: { height: "15rem" }
-      })) : (o(), s("div", Y, [
-        (o(), n(f(e.tag), {
+      })) : (o(), s("div", ie, [
+        (o(), l(f(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))
+          onClick: a[0] || (a[0] = (n) => e.clickReadMore("Photo", n))
         }, {
           default: g(() => [
             d(k, {
@@ -223,64 +255,64 @@ function ie(c, a, t, e, B, w) {
               images: w.imageSizes,
               "photo-path": t.photoPath
             }, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
-            e.countryName ? (o(), s("div", Z, [
-              m("p", $, [
+            e.countryName ? (o(), s("div", se, [
+              m("p", de, [
                 d(h, {
                   class: "tw-h-2 tw-w-2",
                   icon: e.mdiMapMarker
                 }, null, 8, ["icon"]),
-                E(" " + M(e.formattedLocation), 1)
+                te(" " + M(e.formattedLocation), 1)
               ])
             ])) : u("", !0)
           ]),
           _: 1
         }, 8, ["to", "href"])),
-        t.isVisitor ? u("", !0) : (o(), n(v, {
+        t.isVisitor ? u("", !0) : (o(), l(_, {
           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) => c.$emit("toggle-bookmark"))
+          onToggleBookmark: a[1] || (a[1] = (n) => c.$emit("toggle-bookmark"))
         }, null, 8, ["loan-id", "is-bookmarked"]))
       ]))
     ]),
-    m("div", ee, [
-      m("h3", te, M(e.borrowerName), 1),
-      (o(), n(f(e.tag), {
+    m("div", me, [
+      m("h3", ce, M(e.borrowerName), 1),
+      (o(), l(f(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))
+        onClick: a[2] || (a[2] = (n) => e.clickReadMore("Tag", n))
       }, {
         default: g(() => [
-          t.showTags && !e.isLoading ? (o(), n(b, {
+          t.showTags && !e.isLoading ? (o(), l(v, {
             key: 0,
             loan: t.loan
           }, null, 8, ["loan"])) : u("", !0)
         ]),
         _: 1
       }, 8, ["to", "href"])),
-      (o(), n(f(e.tag), {
+      (o(), l(f(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"))
+        onClick: a[3] || (a[3] = (n) => e.clickReadMore("Use"))
       }, {
         default: g(() => [
-          m("div", oe, [
-            e.isLoading ? (o(), s("div", ae, [
-              (o(!0), s(O, null, G([...Array(4)], (l, C) => (o(), s("div", {
-                key: C,
+          m("div", we, [
+            e.isLoading ? (o(), s("div", ue, [
+              (o(!0), s(oe, null, ae([...Array(4)], (n, x) => (o(), s("div", {
+                key: x,
                 class: "tw-h-2 tw-mb-1"
               }, [
                 d(i)
               ]))), 128))
-            ])) : (o(), s("div", le, [
-              d(y, {
+            ])) : (o(), s("div", fe, [
+              d(b, {
                 use: e.loanUse,
                 "loan-amount": e.loanAmount,
                 status: e.loanStatus,
@@ -293,17 +325,17 @@ function ie(c, a, t, e, B, w) {
         ]),
         _: 1
       }, 8, ["to", "href"])),
-      e.isLoading || typeof e.loanCallouts > "u" ? (o(), n(i, {
+      e.isLoading || typeof e.loanCallouts > "u" ? (o(), l(i, {
         key: 0,
         class: "tw-mt-1.5 tw-mb-1",
         style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
-      })) : (o(), n(_, {
+      })) : (o(), l(y, {
         key: 1,
         callouts: e.loanCallouts,
         class: "loan-callouts tw-my-1.5"
       }, null, 8, ["callouts"])),
-      m("div", ne, [
-        e.hasProgressData ? u("", !0) : (o(), s("div", re, [
+      m("div", ge, [
+        e.hasProgressData ? u("", !0) : (o(), s("div", ke, [
           d(i, {
             class: "tw-mb-0.5",
             style: { width: "70%", height: "1.3rem" }
@@ -313,27 +345,28 @@ function ie(c, a, t, e, B, w) {
             style: { width: "70%", height: "0.5rem" }
           })
         ])),
-        e.unreservedAmount > 0 ? (o(), n(f(e.tag), {
+        e.sharesAvailable ? (o(), l(f(e.tag), {
           key: 1,
           to: e.readMorePath,
           href: e.readMorePath,
           class: "loan-card-progress tw-mt-1 tw-flex-grow",
           "aria-label": "Loan progress",
-          onClick: a[4] || (a[4] = (l) => e.clickReadMore("Progress", l))
+          onClick: a[4] || (a[4] = (n) => e.clickReadMore("Progress", n))
         }, {
           default: g(() => [
-            d(x, {
+            d(L, {
               id: "loanProgress",
-              "money-left": `${e.unreservedAmount}`,
+              "money-left": e.unreservedAmount,
               "progress-percent": e.fundraisingPercent,
               class: "tw-text-black"
             }, null, 8, ["money-left", "progress-percent"])
           ]),
           _: 1
         }, 8, ["to", "href"])) : u("", !0),
-        e.allDataLoaded ? (o(), n(L, {
+        e.allDataLoaded ? (o(), l(A, {
           key: 3,
           loan: t.loan,
+          "unreserved-amount": e.unreservedAmount,
           "basket-items": t.basketItems,
           "is-loading": e.isLoading,
           "is-adding": t.isAdding,
@@ -349,10 +382,10 @@ function ie(c, a, t, e, B, w) {
           "set-cookie": t.setCookie,
           "enable-huge-amount": t.enableHugeAmount,
           "is-visitor": t.isVisitor,
-          class: p(["tw-mt-auto tw-self-end", { "tw-flex-grow": e.unreservedAmount === 0, "tw-flex-shrink-0": e.unreservedAmount > 0 }]),
-          onAddToBasket: a[5] || (a[5] = (l) => c.$emit("add-to-basket", l)),
-          onShowLoanDetails: a[6] || (a[6] = (l) => e.clickReadMore("ViewLoan", l))
-        }, null, 8, ["loan", "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", "enable-huge-amount", "is-visitor", "class"])) : (o(), n(i, {
+          class: N(["tw-mt-auto tw-self-end", { "tw-flex-grow": !e.sharesAvailable, "tw-flex-shrink-0": e.sharesAvailable }]),
+          onAddToBasket: a[5] || (a[5] = (n) => c.$emit("add-to-basket", n)),
+          onShowLoanDetails: a[6] || (a[6] = (n) => e.clickReadMore("ViewLoan", n))
+        }, 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", "enable-huge-amount", "is-visitor", "class"])) : (o(), l(i, {
           key: 2,
           class: "tw-rounded tw-self-start",
           style: { width: "9rem", height: "3rem" }
@@ -361,7 +394,9 @@ function ie(c, a, t, e, B, w) {
     ])
   ], 2);
 }
-const _e = /* @__PURE__ */ J(Q, [["render", ie], ["__scopeId", "data-v-b544291f"]]);
+const pe = /* @__PURE__ */ ne(le, [["render", he], ["__scopeId", "data-v-060ff1b9"]]);
 export {
-  _e as default
+  De as KV_WIDE_LOAN_CARD_FRAGMENT,
+  Te as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
+  pe as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.13.2",
+  "version": "6.14.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -62,6 +62,7 @@
     "eslint-plugin-vue": "^7.9.0",
     "flag-icons": "^7.3.0",
     "focus-trap": "^6.9.4",
+    "graphql-tag": "^2.12.6",
     "import-meta-loader": "^1.1.0",
     "jest": "^27.4.3",
     "jest-axe": "^5.0.1",
@@ -98,6 +99,7 @@
     "change-case": "^5.4.4",
     "date-fns": "2.x",
     "focus-trap": "6.x",
+    "graphql-tag": "2.x",
     "nanoid": "3.x",
     "numeral": "2.x",
     "vue": "3.x"
@@ -109,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "1ab667d2555ca1cb60b1b37508878563857a6bd1"
+  "gitHead": "247947ae36f1ad2aab67f2e6bac62805ebbe7129"
 }