@kiva/kv-components 6.13.2 → 6.14.0

package/dist/vue/KvClassicLoanCard.js

@@ -1,33 +1,72 @@
-import K from "numeral";
-import { loanCardComputedProperties as V, loanCardMethods as z } from "../utils/loanCard.js";
-import W from "./KvLoanUse.js";
-import I from "./KvBorrowerImage.js";
-import R from "./KvLoanProgressGroup.js";
-import H from "./KvLoanCallouts.js";
-import j from "./KvLendCta.js";
-import U from "./KvLoanBookmark.js";
-import q from "./KvLoanTag.js";
-import E from "./KvMaterialIcon.js";
-import O from "./KvLoadingPlaceholder.js";
-import G from "./KvLoanTeamPick.js";
-import J from "./KvLoanActivities.js";
-import { resolveComponent as r, openBlock as o, createElementBlock as u, normalizeClass as s, normalizeStyle as Q, createElementVNode as c, createBlock as i, resolveDynamicComponent as k, withCtx as g, createVNode as w, createTextVNode as X, toDisplayString as M, createCommentVNode as f, Fragment as Y, renderList as Z } from "vue";
+import K from "graphql-tag";
+import V from "numeral";
+import { LOAN_CALLOUTS_FRAGMENT as E, LOAN_GEOCODE_FRAGMENT as O, LOAN_PROGRESS_FRAGMENT as G, loanCardComputedProperties as I, loanCardMethods as U } from "../utils/loanCard.js";
+import z, { KV_LOAN_USE_FRAGMENT as W } from "./KvLoanUse.js";
+import H from "./KvBorrowerImage.js";
+import j from "./KvLoanProgressGroup.js";
+import q from "./KvLoanCallouts.js";
+import J, { KV_LEND_CTA_FRAGMENT as Q, KV_LEND_CTA_USER_FRAGMENT as X } from "./KvLendCta.js";
+import Y, { KV_LOAN_BOOKMARK_FRAGMENT as Z } from "./KvLoanBookmark.js";
+import p, { KV_LOAN_TAG_FRAGMENT as $ } from "./KvLoanTag.js";
+import ee from "./KvMaterialIcon.js";
+import te from "./KvLoadingPlaceholder.js";
+import ae from "./KvLoanTeamPick.js";
+import oe, { KV_LOAN_ACTIVITIES_FRAGMENT as ne } from "./KvLoanActivities.js";
+import { resolveComponent as r, openBlock as o, createElementBlock as m, normalizeClass as s, normalizeStyle as le, createElementVNode as c, createBlock as i, resolveDynamicComponent as g, withCtx as k, createVNode as w, createTextVNode as ie, toDisplayString as M, createCommentVNode as f, Fragment as re, renderList as se } from "vue";
 import "./KvClassicLoanCard.css";
-import p from "../_virtual/_plugin-vue_export-helper.js";
-const $ = {
+import de from "../_virtual/_plugin-vue_export-helper.js";
+const Ge = K`
+	fragment KvClassicLoanCard on LoanBasic {
+		id
+		image {
+			id
+			hash # for imageHash
+		}
+		lenders(limit: 0) {
+			totalCount # for lendersNumber
+		}
+		loanFundraisingInfo {
+			id
+			fundedAmount # for amountLent
+		}
+		name # for borrowerName
+		...KvLendCta
+		...KvLoanActivities
+		...KvLoanTag
+		...KvLoanUse
+		...LoanCallouts
+		...LoanGeocode
+		...LoanProgress
+	}
+	${Q}
+	${ne}
+	${$}
+	${W}
+	${E}
+	${O}
+	${G}
+`, Ie = K`
+	fragment KvClassicLoanCardUser on LoanBasic {
+		id
+		...KvLendCtaUser
+		...KvLoanBookmark
+	}
+	${X}
+	${Z}
+`, me = {
   name: "KvClassicLoanCard",
   components: {
-    KvBorrowerImage: I,
-    KvLoadingPlaceholder: O,
-    KvLoanUse: W,
-    KvLoanProgressGroup: R,
-    KvMaterialIcon: E,
-    KvLendCta: j,
-    KvLoanTag: q,
-    KvLoanCallouts: H,
-    KvLoanBookmark: U,
-    KvLoanTeamPick: G,
-    KvLoanActivities: J
+    KvBorrowerImage: H,
+    KvLoadingPlaceholder: te,
+    KvLoanUse: z,
+    KvLoanProgressGroup: j,
+    KvMaterialIcon: ee,
+    KvLendCta: J,
+    KvLoanTag: p,
+    KvLoanCallouts: q,
+    KvLoanBookmark: Y,
+    KvLoanTeamPick: ae,
+    KvLoanActivities: oe
   },
   props: {
     loanId: {
@@ -155,49 +194,51 @@ const $ = {
     const {
       allDataLoaded: e,
       borrowerName: t,
-      city: S,
+      city: T,
       countryName: d,
-      distributionModel: m,
+      distributionModel: u,
       formattedLocation: v,
       fundraisingPercent: h,
       hasProgressData: b,
       imageHash: y,
       isLoading: _,
-      loanAmount: C,
-      loanBorrowerCount: x,
-      loanCallouts: L,
-      loanStatus: B,
-      loanUse: A,
+      loanAmount: L,
+      loanBorrowerCount: C,
+      loanCallouts: A,
+      loanStatus: x,
+      loanUse: B,
       mdiMapMarker: n,
-      readMorePath: P,
-      state: D,
-      tag: T,
-      unreservedAmount: N
-    } = V(l), {
-      clickReadMore: F
-    } = z(l, a);
+      readMorePath: N,
+      state: S,
+      tag: P,
+      unreservedAmount: F,
+      sharesAvailable: R
+    } = I(l), {
+      clickReadMore: D
+    } = U(l, a);
     return {
       allDataLoaded: e,
       borrowerName: t,
-      city: S,
+      city: T,
       countryName: d,
-      distributionModel: m,
+      distributionModel: u,
       formattedLocation: v,
       fundraisingPercent: h,
       hasProgressData: b,
       imageHash: y,
       isLoading: _,
-      loanAmount: C,
-      loanBorrowerCount: x,
-      loanCallouts: L,
-      loanStatus: B,
-      loanUse: A,
+      loanAmount: L,
+      loanBorrowerCount: C,
+      loanCallouts: A,
+      loanStatus: x,
+      loanUse: B,
       mdiMapMarker: n,
-      readMorePath: P,
-      state: D,
-      tag: T,
-      unreservedAmount: N,
-      clickReadMore: F
+      readMorePath: N,
+      state: S,
+      tag: P,
+      unreservedAmount: F,
+      sharesAvailable: R,
+      clickReadMore: D
     };
   },
   computed: {
@@ -226,47 +267,47 @@ const $ = {
     amountLent() {
       var a, e;
       const l = ((e = (a = this.loan) == null ? void 0 : a.loanFundraisingInfo) == null ? void 0 : e.fundedAmount) ?? 0;
-      return K(parseFloat(l)).format("$0,0");
+      return V(l).format("$0,0");
     }
   }
-}, ee = { class: "tw-grow" }, te = { class: "loan-card-active-hover" }, ae = {
+}, ue = { class: "tw-grow" }, ce = { class: "loan-card-active-hover" }, we = {
   key: 1,
   class: "tw-relative"
-}, oe = { key: 0 }, ne = {
+}, fe = { key: 0 }, ge = {
   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" }
-}, le = { class: "tw-mb-1.5 tw-pt-1" }, ie = { key: 1 }, re = {
+}, ke = { class: "tw-mb-1.5 tw-pt-1" }, ve = { key: 1 }, he = {
   key: 0,
   class: "tw-w-full tw-pt-1 tw-pr-1"
-}, se = {
+}, be = {
   key: 0,
   class: "tw-text-center tw-w-full tw-mt-1 tw-font-medium"
-}, de = {
+}, ye = {
   key: 1,
   class: "tw-pt-1.5"
 };
-function ue(l, a, e, t, S, d) {
-  const m = r("kv-loading-placeholder"), v = r("kv-borrower-image"), h = r("kv-material-icon"), b = r("kv-loan-team-pick"), y = r("kv-loan-bookmark"), _ = r("kv-loan-tag"), C = r("kv-loan-use"), x = r("kv-loan-callouts"), L = r("kv-loan-progress-group"), B = r("kv-lend-cta"), A = r("KvLoanActivities");
-  return o(), u("div", {
+function _e(l, a, e, t, T, d) {
+  const u = r("kv-loading-placeholder"), v = r("kv-borrower-image"), h = r("kv-material-icon"), b = r("kv-loan-team-pick"), y = r("kv-loan-bookmark"), _ = r("kv-loan-tag"), L = r("kv-loan-use"), C = r("kv-loan-callouts"), A = r("kv-loan-progress-group"), x = r("kv-lend-cta"), B = r("KvLoanActivities");
+  return o(), m("div", {
     class: s(["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: Q([{ "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }, { minWidth: "230px", maxWidth: d.cardWidth }])
+    style: le([{ "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }, { minWidth: "230px", maxWidth: d.cardWidth }])
   }, [
-    c("div", ee, [
-      c("div", te, [
-        t.isLoading ? (o(), i(m, {
+    c("div", ue, [
+      c("div", ce, [
+        t.isLoading ? (o(), i(u, {
           key: 0,
           class: s(["tw-mb-1 tw-w-full", { "tw-rounded-t tw-rounded-b-none": e.largeCard, "tw-rounded": !e.largeCard }]),
           style: { height: "15rem" }
-        }, null, 8, ["class"])) : (o(), u("div", ae, [
-          (o(), i(k(t.tag), {
+        }, null, 8, ["class"])) : (o(), m("div", we, [
+          (o(), i(g(t.tag), {
             to: t.readMorePath,
             href: t.readMorePath,
             class: "tw-flex",
             "aria-label": "Borrower image",
             onClick: a[0] || (a[0] = (n) => t.clickReadMore("Photo", n))
           }, {
-            default: g(() => [
+            default: k(() => [
               w(v, {
                 class: s(["tw-relative tw-w-full tw-bg-black", { "tw-rounded-t": e.largeCard, "tw-rounded": !e.largeCard }]),
                 alt: `Photo of ${t.borrowerName}`,
@@ -276,13 +317,13 @@ function ue(l, a, e, t, S, d) {
                 images: d.imageSizes,
                 "photo-path": e.photoPath
               }, null, 8, ["class", "alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
-              t.countryName ? (o(), u("div", oe, [
-                c("p", ne, [
+              t.countryName ? (o(), m("div", fe, [
+                c("p", ge, [
                   w(h, {
                     class: "tw-h-2 tw-w-2",
                     icon: t.mdiMapMarker
                   }, null, 8, ["icon"]),
-                  X(" " + M(t.formattedLocation), 1)
+                  ie(" " + M(t.formattedLocation), 1)
                 ])
               ])) : f("", !0)
             ]),
@@ -304,14 +345,14 @@ function ue(l, a, e, t, S, d) {
             onToggleBookmark: a[1] || (a[1] = (n) => l.$emit("toggle-bookmark"))
           }, null, 8, ["loan-id", "is-bookmarked"]))
         ])),
-        (o(), i(k(t.tag), {
+        (o(), i(g(t.tag), {
           to: t.readMorePath,
           href: t.readMorePath,
           class: s(["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] = (n) => t.clickReadMore("Tag", n))
         }, {
-          default: g(() => [
+          default: k(() => [
             e.showTags && !t.isLoading ? (o(), i(_, {
               key: 0,
               loan: e.loan
@@ -319,28 +360,28 @@ function ue(l, a, e, t, S, d) {
           ]),
           _: 1
         }, 8, ["to", "href", "class"])),
-        (o(), i(k(t.tag), {
+        (o(), i(g(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] = (n) => t.clickReadMore("Use", n))
         }, {
-          default: g(() => [
-            c("div", le, [
-              t.isLoading ? (o(), u("div", {
+          default: k(() => [
+            c("div", ke, [
+              t.isLoading ? (o(), m("div", {
                 key: 0,
                 class: s(["tw-w-full", { "tw-px-1": e.largeCard }]),
                 style: { height: "5.5rem" }
               }, [
-                (o(!0), u(Y, null, Z([...Array(4)], (n, P) => (o(), u("div", {
-                  key: P,
+                (o(!0), m(re, null, se([...Array(4)], (n, N) => (o(), m("div", {
+                  key: N,
                   class: "tw-h-2 tw-mb-1"
                 }, [
-                  w(m)
+                  w(u)
                 ]))), 128))
-              ], 2)) : (o(), u("div", ie, [
-                w(C, {
+              ], 2)) : (o(), m("div", ve, [
+                w(L, {
                   use: t.loanUse,
                   "loan-amount": t.loanAmount,
                   status: t.loanStatus,
@@ -355,11 +396,11 @@ function ue(l, a, e, t, S, d) {
           _: 1
         }, 8, ["to", "href"]))
       ]),
-      t.isLoading || typeof t.loanCallouts > "u" ? (o(), i(m, {
+      t.isLoading || typeof t.loanCallouts > "u" ? (o(), i(u, {
         key: 0,
         class: s(["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(), i(x, {
+      }, null, 8, ["class"])) : (o(), i(C, {
         key: 1,
         callouts: t.loanCallouts,
         class: s(["tw-mt-1.5", { "tw-px-1": e.largeCard }]),
@@ -369,18 +410,18 @@ function ue(l, a, e, t, S, d) {
     c("div", {
       class: s(["tw-flex tw-justify-between tw-mt-2", { "tw-px-1": e.largeCard }])
     }, [
-      t.hasProgressData ? f("", !0) : (o(), u("div", re, [
-        w(m, {
+      t.hasProgressData ? f("", !0) : (o(), m("div", he, [
+        w(u, {
           class: "tw-mb-0.5",
           style: { width: "70%", height: "1.3rem" }
         }),
-        w(m, {
+        w(u, {
           class: "tw-rounded",
           style: { width: "70%", height: "0.5rem" }
         })
       ])),
       c("div", null, [
-        t.unreservedAmount > 0 ? (o(), i(k(t.tag), {
+        t.sharesAvailable ? (o(), i(g(t.tag), {
           key: 0,
           to: t.readMorePath,
           href: t.readMorePath,
@@ -388,10 +429,10 @@ function ue(l, a, e, t, S, d) {
           "aria-label": "Loan progress",
           onClick: a[5] || (a[5] = (n) => t.clickReadMore("Progress", n))
         }, {
-          default: g(() => [
-            w(L, {
+          default: k(() => [
+            w(A, {
               id: "loanProgress",
-              "money-left": `${t.unreservedAmount}`,
+              "money-left": t.unreservedAmount,
               "progress-percent": t.fundraisingPercent,
               class: "tw-text-black"
             }, null, 8, ["money-left", "progress-percent"])
@@ -399,9 +440,10 @@ function ue(l, a, e, t, S, d) {
           _: 1
         }, 8, ["to", "href"])) : f("", !0)
       ]),
-      t.allDataLoaded ? (o(), i(B, {
+      t.allDataLoaded ? (o(), i(x, {
         key: 2,
         loan: e.loan,
+        "unreserved-amount": t.unreservedAmount,
         "basket-items": e.basketItems,
         "is-loading": t.isLoading,
         "is-adding": e.isAdding,
@@ -420,22 +462,22 @@ function ue(l, a, e, t, S, d) {
         "primary-button-text": e.primaryButtonText,
         "secondary-button-text": e.secondaryButtonText,
         "secondary-button-handler": e.secondaryButtonHandler,
-        class: s(["tw-mt-auto", { "tw-w-full": t.unreservedAmount <= 0 }]),
+        class: s(["tw-mt-auto", { "tw-w-full": !t.sharesAvailable }]),
         onAddToBasket: a[6] || (a[6] = (n) => l.$emit("add-to-basket", n)),
         onShowLoanDetails: a[7] || (a[7] = (n) => t.clickReadMore("ViewLoan", n)),
         onRemoveFromBasket: a[8] || (a[8] = (n) => l.$emit("remove-from-basket", n))
-      }, 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", "primary-button-text", "secondary-button-text", "secondary-button-handler", "class"])) : (o(), i(m, {
+      }, 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", "primary-button-text", "secondary-button-text", "secondary-button-handler", "class"])) : (o(), i(u, {
         key: 1,
         class: "tw-rounded tw-self-start",
         style: { width: "9rem", height: "3rem" }
       }))
     ], 2),
-    e.showContributors && d.lendersNumber && d.amountLent ? (o(), u("div", se, [
+    e.showContributors && d.lendersNumber && d.amountLent ? (o(), m("div", be, [
       c("p", null, M(d.lendersNumber) + " people contributed " + M(d.amountLent), 1)
     ])) : f("", !0),
-    e.combinedActivities.length > 0 ? (o(), u("div", de, [
+    e.combinedActivities.length > 0 ? (o(), m("div", ye, [
       a[10] || (a[10] = c("hr", { class: "tw-border-tertiary tw-mb-1 tw-w-5/6 tw-mx-auto" }, null, -1)),
-      w(A, {
+      w(B, {
         loan: e.loan,
         "combined-activities": e.combinedActivities,
         "kv-track-function": e.kvTrackFunction,
@@ -458,7 +500,9 @@ function ue(l, a, e, t, S, d) {
     ])) : f("", !0)
   ], 6);
 }
-const Pe = /* @__PURE__ */ p($, [["render", ue], ["__scopeId", "data-v-d014fd7b"]]);
+const Ue = /* @__PURE__ */ de(me, [["render", _e], ["__scopeId", "data-v-fcb027fa"]]);
 export {
-  Pe as default
+  Ge as KV_CLASSIC_LOAN_CARD_FRAGMENT,
+  Ie as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
+  Ue as default
 };

package/dist/vue/KvIntroductionLoanCard.css

@@ -1 +1 @@
-.loan-callouts[data-v-a9f870f5] span{background-color:transparent!important;--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1))}.loan-card-use[data-v-a9f870f5]:hover,.loan-card-use[data-v-a9f870f5]: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-a9f870f5],.loan-card-active-hover:hover .loan-card-name[data-v-a9f870f5]{text-decoration-line:underline}.loan-card-progress[data-v-a9f870f5],.loan-card-progress[data-v-a9f870f5]:hover,.loan-card-progress[data-v-a9f870f5]:focus{text-decoration-line:none}.loan-card-name[data-v-a9f870f5]{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-a9f870f5] button{border-top-left-radius:0!important;border-top-right-radius:0!important}
+.loan-callouts[data-v-4b1d705c] span{background-color:transparent!important;--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1))}.loan-card-use[data-v-4b1d705c]:hover,.loan-card-use[data-v-4b1d705c]: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-4b1d705c],.loan-card-active-hover:hover .loan-card-name[data-v-4b1d705c]{text-decoration-line:underline}.loan-card-progress[data-v-4b1d705c],.loan-card-progress[data-v-4b1d705c]:hover,.loan-card-progress[data-v-4b1d705c]:focus{text-decoration-line:none}.loan-card-name[data-v-4b1d705c]{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-4b1d705c] button{border-top-left-radius:0!important;border-top-right-radius:0!important}