@kiva/kv-components 7.3.3 → 7.4.0

package/dist/vue/KvCompactLoanCard.css

@@ -1 +1 @@
-.loan-card-use[data-v-ab7b4585]:hover,.loan-card-use[data-v-ab7b4585]: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-ab7b4585]{text-decoration-line:underline}.loan-card-progress[data-v-ab7b4585]:hover,.loan-card-progress[data-v-ab7b4585]:focus{text-decoration-line:none}.loan-card-use-text[data-v-ab7b4585] 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-ab7b4585] form,.loan-card-cta[data-v-ab7b4585] fieldset,.loan-card-cta[data-v-ab7b4585] .tw-w-full,.loan-card-cta[data-v-ab7b4585] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-ab7b4585] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}
+.loan-card-use[data-v-8ea6bf26]:hover,.loan-card-use[data-v-8ea6bf26]: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-8ea6bf26]{text-decoration-line:underline}.loan-card-progress[data-v-8ea6bf26]:hover,.loan-card-progress[data-v-8ea6bf26]:focus{text-decoration-line:none}.loan-card-use-text[data-v-8ea6bf26] 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-8ea6bf26] form,.loan-card-cta[data-v-8ea6bf26] fieldset,.loan-card-cta[data-v-8ea6bf26] .tw-w-full,.loan-card-cta[data-v-8ea6bf26] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-8ea6bf26] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}

package/dist/vue/KvCompactLoanCard.js

@@ -1,21 +1,21 @@
-import B from "graphql-tag";
-import E from "numeral";
-import { mdiMapMarker as O, mdiHome as D } from "@mdi/js";
-import { LOAN_CALLOUTS_FRAGMENT as S, LOAN_GEOCODE_FRAGMENT as G, LOAN_PROGRESS_FRAGMENT as V, loanCardComputedProperties as U, loanCardMethods as I } from "../utils/loanCard.js";
-import H, { KV_LOAN_USE_FRAGMENT as j } from "./KvLoanUse.js";
-import q from "./KvBorrowerImage.js";
-import W from "./KvLoanCallouts.js";
-import Z, { KV_LEND_CTA_FRAGMENT as z, KV_LEND_CTA_USER_FRAGMENT as J } from "./KvLendCta.js";
-import Q, { KV_LOAN_BOOKMARK_FRAGMENT as X } from "./KvLoanBookmark.js";
-import Y from "./KvLoanProgressGroup.js";
-import $, { KV_LOAN_TAG_FRAGMENT as ee } from "./KvLoanTag.js";
-import te from "./KvMaterialIcon.js";
-import oe from "./KvLoadingPlaceholder.js";
-import ae from "./KvLoanTeamPick.js";
-import { resolveComponent as d, openBlock as n, createElementBlock as m, createElementVNode as r, createBlock as i, resolveDynamicComponent as c, withCtx as f, createVNode as u, createCommentVNode as L, Fragment as b, renderList as ne, normalizeClass as x } from "vue";
+import N from "graphql-tag";
+import D from "numeral";
+import { mdiMapMarker as O, mdiHome as p, mdiLink as G } from "@mdi/js";
+import { LOAN_CALLOUTS_FRAGMENT as V, LOAN_GEOCODE_FRAGMENT as U, LOAN_PROGRESS_FRAGMENT as I, loanCardComputedProperties as W, loanCardMethods as H } from "../utils/loanCard.js";
+import j, { KV_LOAN_USE_FRAGMENT as q } from "./KvLoanUse.js";
+import Z from "./KvBorrowerImage.js";
+import z 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 $ } from "./KvLoanBookmark.js";
+import ee from "./KvLoanProgressGroup.js";
+import te, { KV_LOAN_TAG_FRAGMENT as oe } from "./KvLoanTag.js";
+import ae from "./KvMaterialIcon.js";
+import ne from "./KvLoadingPlaceholder.js";
+import le from "./KvLoanTeamPick.js";
+import { resolveComponent as s, openBlock as n, createElementBlock as i, createElementVNode as r, createBlock as d, resolveDynamicComponent as w, withCtx as f, createVNode as m, toDisplayString as B, withModifiers as re, createCommentVNode as u, Fragment as C, renderList as ie, normalizeClass as M } from "vue";
 import "./KvCompactLoanCard.css";
-import le from "../_virtual/_plugin-vue_export-helper.js";
-const Fe = B`
+import se from "../_virtual/_plugin-vue_export-helper.js";
+const Ie = N`
 	fragment KvCompactLoanCard on LoanBasic {
 		id
 		image {
@@ -37,33 +37,33 @@ const Fe = B`
 		...LoanGeocode
 		...LoanProgress
 	}
-	${z}
-	${ee}
-	${j}
-	${S}
-	${G}
+	${Q}
+	${oe}
+	${q}
 	${V}
-`, Ee = B`
+	${U}
+	${I}
+`, We = N`
 	fragment KvCompactLoanCardUser on LoanBasic {
 		id
 		...KvLendCtaUser
 		...KvLoanBookmark
 	}
-	${J}
 	${X}
-`, re = {
+	${$}
+`, de = {
   name: "KvCompactLoanCard",
   components: {
-    KvBorrowerImage: q,
-    KvLoadingPlaceholder: oe,
-    KvLoanUse: H,
-    KvMaterialIcon: te,
-    KvLendCta: Z,
-    KvLoanTag: $,
-    KvLoanCallouts: W,
-    KvLoanBookmark: Q,
-    KvLoanTeamPick: ae,
-    KvLoanProgressGroup: Y
+    KvBorrowerImage: Z,
+    KvLoadingPlaceholder: ne,
+    KvLoanUse: j,
+    KvMaterialIcon: ae,
+    KvLendCta: J,
+    KvLoanTag: te,
+    KvLoanCallouts: z,
+    KvLoanBookmark: Y,
+    KvLoanTeamPick: le,
+    KvLoanProgressGroup: ee
   },
   props: {
     loanId: {
@@ -169,57 +169,73 @@ const Fe = B`
     customHref: {
       type: String,
       default: ""
+    },
+    businessName: {
+      type: String,
+      default: ""
+    },
+    website: {
+      type: String,
+      default: ""
+    },
+    showLoanUse: {
+      type: Boolean,
+      default: !0
     }
   },
   setup(l, { emit: o }) {
     const {
       allDataLoaded: t,
       borrowerName: e,
-      city: C,
+      city: x,
       countryName: A,
-      distributionModel: w,
+      distributionModel: k,
       formattedLocation: h,
-      fundraisingPercent: s,
-      hasProgressData: g,
-      imageHash: k,
-      isLoading: v,
-      loanAmount: _,
-      loanBorrowerCount: a,
-      loanCallouts: y,
-      loanStatus: M,
-      loanUse: N,
-      readMorePath: T,
-      state: P,
-      tag: K,
-      unreservedAmount: p,
-      sharesAvailable: R
-    } = U(l), {
-      clickReadMore: F
-    } = I(l, o);
+      fundraisingPercent: g,
+      hasProgressData: c,
+      imageHash: v,
+      isLoading: _,
+      loanAmount: y,
+      loanBorrowerCount: b,
+      loanCallouts: a,
+      loanStatus: L,
+      loanUse: T,
+      readMorePath: P,
+      state: K,
+      tag: R,
+      unreservedAmount: F,
+      sharesAvailable: E
+    } = W(l), {
+      clickReadMore: S
+    } = H(l, o);
     return {
       allDataLoaded: t,
       borrowerName: e,
-      city: C,
+      city: x,
       countryName: A,
-      distributionModel: w,
+      distributionModel: k,
       formattedLocation: h,
-      fundraisingPercent: s,
-      hasProgressData: g,
-      imageHash: k,
-      isLoading: v,
-      loanAmount: _,
-      loanBorrowerCount: a,
-      loanCallouts: y,
-      loanStatus: M,
-      loanUse: N,
+      fundraisingPercent: g,
+      hasProgressData: c,
+      imageHash: v,
+      isLoading: _,
+      loanAmount: y,
+      loanBorrowerCount: b,
+      loanCallouts: a,
+      loanStatus: L,
+      loanUse: T,
       mdiMapMarker: O,
-      mdiHome: D,
-      readMorePath: T,
-      state: P,
-      tag: K,
-      unreservedAmount: p,
-      sharesAvailable: R,
-      clickReadMore: F
+      mdiHome: p,
+      mdiLink: G,
+      readMorePath: P,
+      state: K,
+      tag: R,
+      unreservedAmount: F,
+      sharesAvailable: E,
+      clickReadMore: S,
+      trackWebsiteClick: () => {
+        l.kvTrackFunction("Lending", "click-Business Website", "Website", l.loanId);
+      }
     };
   },
   computed: {
@@ -230,26 +246,29 @@ const Fe = B`
     amountLent() {
       var o, t;
       const l = ((t = (o = this.loan) == null ? void 0 : o.loanFundraisingInfo) == null ? void 0 : t.fundedAmount) ?? 0;
-      return E(l).format("$0,0");
+      return D(l).format("$0,0");
     }
   }
-}, ie = { class: "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" }, se = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, de = {
+}, me = { class: "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" }, ce = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, ue = {
   class: "tw-flex tw-items-start tw-gap-2 tw-w-full loan-card-active-hover",
   style: { height: "6.75rem", "max-height": "6.75rem" }
-}, me = { class: "tw-flex-shrink-0 tw-overflow-hidden" }, ue = { class: "tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0" }, ce = {
+}, we = { class: "tw-flex-shrink-0 tw-overflow-hidden" }, fe = { class: "tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0" }, ke = {
+  key: 0,
+  class: "tw-mb-0.5 tw-w-full"
+}, he = { class: "tw-text-primary !tw-font-medium tw-text-base tw-leading-normal tw-truncate" }, ge = ["href"], ve = { class: "tw-truncate" }, _e = {
   key: 0,
   class: "loan-card-use-text tw-w-full tw-overflow-hidden"
-}, fe = {
+}, ye = {
   key: 1,
   class: "loan-card-use-text tw-w-full tw-overflow-hidden"
-}, we = { class: "tw-flex-1 tw-min-w-0" }, he = { class: "tw-flex-1 tw-min-w-0" };
-function ge(l, o, t, e, C, A) {
-  const w = d("kv-borrower-image"), h = d("kv-loan-tag"), s = d("kv-loading-placeholder"), g = d("kv-loan-use"), k = d("kv-loan-callouts"), v = d("kv-loan-progress-group"), _ = d("kv-lend-cta");
-  return n(), m("div", ie, [
-    r("div", se, [
-      r("div", de, [
-        r("div", me, [
-          (n(), i(c(e.tag), {
+}, be = { class: "tw-flex-1 tw-min-w-0 tw-mr-1" }, Le = { class: "tw-flex-1 tw-min-w-0" };
+function Ce(l, o, t, e, x, A) {
+  const k = s("kv-borrower-image"), h = s("kv-material-icon"), g = s("kv-loan-tag"), c = s("kv-loading-placeholder"), v = s("kv-loan-use"), _ = s("kv-loan-callouts"), y = s("kv-loan-progress-group"), b = s("kv-lend-cta");
+  return n(), i("div", me, [
+    r("div", ce, [
+      r("div", ue, [
+        r("div", we, [
+          (n(), d(w(e.tag), {
             to: e.readMorePath,
             href: e.readMorePath,
             class: "tw-flex",
@@ -257,7 +276,7 @@ function ge(l, o, t, e, C, A) {
             onClick: o[0] || (o[0] = (a) => e.clickReadMore("Photo", a))
           }, {
             default: f(() => [
-              u(w, {
+              m(k, {
                 class: "tw-bg-gray-300 tw-rounded-md tw-object-cover",
                 style: { width: "100px", height: "100px" },
                 alt: `Photo of ${e.borrowerName}`,
@@ -271,39 +290,56 @@ function ge(l, o, t, e, C, A) {
             _: 1
           }, 8, ["to", "href"]))
         ]),
-        r("div", ue, [
-          (n(), i(c(e.tag), {
+        r("div", fe, [
+          t.businessName ? (n(), i("div", ke, [
+            r("h3", he, B(t.businessName), 1),
+            t.website ? (n(), i("a", {
+              key: 0,
+              href: t.website,
+              target: "_blank",
+              class: "tw-flex tw-items-center tw-gap-0.5 tw-text-secondary tw-text-small tw-font-light tw-leading-normal tw-no-underline hover:tw-underline",
+              onClick: o[1] || (o[1] = re((...a) => e.trackWebsiteClick && e.trackWebsiteClick(...a), ["stop"]))
+            }, [
+              m(h, {
+                icon: e.mdiLink,
+                class: "tw-w-2 tw-h-2"
+              }, null, 8, ["icon"]),
+              r("span", ve, B(t.website), 1)
+            ], 8, ge)) : u("", !0)
+          ])) : u("", !0),
+          (n(), d(w(e.tag), {
             to: e.readMorePath,
             href: e.readMorePath,
             class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline -tw-mt-1",
             "aria-label": "Loan tag",
-            onClick: o[1] || (o[1] = (a) => e.clickReadMore("Tag", a))
+            onClick: o[2] || (o[2] = (a) => e.clickReadMore("Tag", a))
           }, {
             default: f(() => [
-              t.showTags && !e.isLoading ? (n(), i(h, {
+              t.showTags && !e.isLoading ? (n(), d(g, {
                 key: 0,
                 loan: t.loan
-              }, null, 8, ["loan"])) : L("", !0)
+              }, null, 8, ["loan"])) : u("", !0)
             ]),
             _: 1
           }, 8, ["to", "href"])),
-          (n(), i(c(e.tag), {
+          t.showLoanUse ? (n(), d(w(e.tag), {
+            key: 1,
             to: e.readMorePath,
             href: e.readMorePath,
             class: "loan-card-use tw-no-underline tw-text-primary tw-block tw-w-full",
             "aria-label": "Loan use",
-            onClick: o[2] || (o[2] = (a) => e.clickReadMore("Use", a))
+            onClick: o[3] || (o[3] = (a) => e.clickReadMore("Use", a))
           }, {
             default: f(() => [
-              e.isLoading ? (n(), m("div", ce, [
-                (n(!0), m(b, null, ne([...Array(4)], (a, y) => (n(), m("div", {
-                  key: y,
+              e.isLoading ? (n(), i("div", _e, [
+                (n(!0), i(C, null, ie([...Array(4)], (a, L) => (n(), i("div", {
+                  key: L,
                   class: "tw-h-2 tw-mb-1"
                 }, [
-                  u(s)
+                  m(c)
                 ]))), 128))
-              ])) : (n(), m("div", fe, [
-                u(g, {
+              ])) : (n(), i("div", ye, [
+                m(v, {
                   use: e.loanUse,
                   "loan-amount": e.loanAmount,
                   status: e.loanStatus,
@@ -317,35 +353,35 @@ function ge(l, o, t, e, C, A) {
               ]))
             ]),
             _: 1
-          }, 8, ["to", "href"]))
+          }, 8, ["to", "href"])) : u("", !0)
         ])
       ]),
-      e.isLoading || typeof e.loanCallouts > "u" ? (n(), i(s, {
+      e.isLoading || typeof e.loanCallouts > "u" ? (n(), d(c, {
         key: 0,
         class: "tw-mt-1.5 tw-mb-1 tw-rounded-full",
         style: { width: "60%", height: "1.5rem" }
-      })) : (n(), i(k, {
+      })) : (n(), d(_, {
         key: 1,
         callouts: e.loanCallouts,
         class: "tw-mt-1.5",
-        onClick: o[3] || (o[3] = (a) => l.$emit("jump-filter-page", a))
+        onClick: o[4] || (o[4] = (a) => l.$emit("jump-filter-page", a))
       }, null, 8, ["callouts"]))
     ]),
     r("div", {
-      class: x(["tw-flex tw-items-end tw-w-full tw-mt-1", { "tw-gap-1": e.sharesAvailable }])
+      class: M(["tw-flex tw-items-end tw-w-full tw-mt-1", { "tw-gap-1": e.sharesAvailable }])
     }, [
-      e.hasProgressData ? (n(), m(b, { key: 1 }, [
-        r("div", he, [
-          e.sharesAvailable ? (n(), i(c(e.tag), {
+      e.hasProgressData ? (n(), i(C, { key: 1 }, [
+        r("div", Le, [
+          e.sharesAvailable ? (n(), d(w(e.tag), {
             key: 0,
             to: e.readMorePath,
             href: e.readMorePath,
             class: "loan-card-progress tw-no-underline tw-block",
             "aria-label": "Loan progress",
-            onClick: o[4] || (o[4] = (a) => e.clickReadMore("Progress", a))
+            onClick: o[5] || (o[5] = (a) => e.clickReadMore("Progress", a))
           }, {
             default: f(() => [
-              u(v, {
+              m(y, {
                 id: "loanProgress",
                 "money-left": e.unreservedAmount,
                 "progress-percent": e.fundraisingPercent,
@@ -353,13 +389,13 @@ function ge(l, o, t, e, C, A) {
               }, null, 8, ["money-left", "progress-percent"])
             ]),
             _: 1
-          }, 8, ["to", "href"])) : L("", !0)
+          }, 8, ["to", "href"])) : u("", !0)
         ]),
         r("div", {
-          class: x(["tw-flex-shrink-0 loan-card-cta", { "tw-w-full": !e.sharesAvailable }]),
+          class: M(["tw-flex-shrink-0 loan-card-cta", { "tw-w-full": !e.sharesAvailable }]),
           style: { height: "40px" }
         }, [
-          u(_, {
+          m(b, {
             loan: t.loan,
             "unreserved-amount": e.unreservedAmount,
             "basket-items": t.basketItems,
@@ -379,23 +415,23 @@ function ge(l, o, t, e, C, A) {
             "primary-button-text": t.primaryButtonText,
             "secondary-button-text": t.secondaryButtonText,
             "secondary-button-handler": t.secondaryButtonHandler,
-            onAddToBasket: o[5] || (o[5] = (a) => l.$emit("add-to-basket", a)),
-            onShowLoanDetails: o[6] || (o[6] = (a) => e.clickReadMore("ViewLoan", a)),
-            onRemoveFromBasket: o[7] || (o[7] = (a) => l.$emit("remove-from-basket", a))
+            onAddToBasket: o[6] || (o[6] = (a) => l.$emit("add-to-basket", a)),
+            onShowLoanDetails: o[7] || (o[7] = (a) => e.clickReadMore("ViewLoan", a)),
+            onRemoveFromBasket: o[8] || (o[8] = (a) => l.$emit("remove-from-basket", a))
           }, null, 8, ["loan", "unreserved-amount", "basket-items", "is-loading", "is-adding", "enable-five-dollars-notes", "five-dollars-selected", "kv-track-function", "show-view-loan", "custom-loan-details", "external-links", "route", "user-balance", "get-cookie", "set-cookie", "is-visitor", "primary-button-text", "secondary-button-text", "secondary-button-handler"])
         ], 2)
-      ], 64)) : (n(), m(b, { key: 0 }, [
-        r("div", we, [
-          u(s, {
+      ], 64)) : (n(), i(C, { key: 0 }, [
+        r("div", be, [
+          m(c, {
             class: "tw-mb-0.5",
             style: { width: "100%", maxWidth: "11rem", height: "1rem" }
           }),
-          u(s, {
+          m(c, {
             class: "tw-rounded",
             style: { width: "100%", maxWidth: "11rem", height: "0.5rem" }
           })
         ]),
-        e.allDataLoaded ? L("", !0) : (n(), i(s, {
+        e.allDataLoaded ? u("", !0) : (n(), d(c, {
           key: 0,
           class: "tw-rounded tw-flex-shrink-0",
           style: { width: "8rem", height: "2.5rem" }
@@ -404,9 +440,9 @@ function ge(l, o, t, e, C, A) {
     ], 2)
   ]);
 }
-const Oe = /* @__PURE__ */ le(re, [["render", ge], ["__scopeId", "data-v-ab7b4585"]]);
+const He = /* @__PURE__ */ se(de, [["render", Ce], ["__scopeId", "data-v-8ea6bf26"]]);
 export {
-  Fe as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  Ee as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  Oe as default
+  Ie as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  We as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  He as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "7.3.3",
+  "version": "7.4.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -114,5 +114,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "c94e6715e92f2d8f64ad6c0b80d8a42e414db550"
+  "gitHead": "b2a65b776abbfa7d3da15cbf35ef6e7e6ff67571"
 }