@kiva/kv-components 7.5.0 → 7.6.0

package/dist/vue/KvCompactLoanCard.css

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

package/dist/vue/KvCompactLoanCard.js

@@ -1,21 +1,21 @@
-import P from "graphql-tag";
+import M from "graphql-tag";
 import V from "numeral";
-import { computed as U, resolveComponent as d, openBlock as n, createElementBlock as i, createElementVNode as r, createBlock as s, resolveDynamicComponent as f, withCtx as w, createVNode as m, toDisplayString as M, withModifiers as p, createCommentVNode as u, Fragment as x, renderList as W, normalizeClass as N } from "vue";
-import { mdiMapMarker as I, mdiHome as H, mdiLink as j } from "@mdi/js";
-import { LOAN_CALLOUTS_FRAGMENT as q, LOAN_GEOCODE_FRAGMENT as Z, LOAN_PROGRESS_FRAGMENT as z, loanCardComputedProperties as J, loanCardMethods as Q } from "../utils/loanCard.js";
-import X, { KV_LOAN_USE_FRAGMENT as Y } from "./KvLoanUse.js";
+import { computed as U, resolveComponent as d, openBlock as n, createElementBlock as i, createElementVNode as l, createBlock as s, resolveDynamicComponent as f, withCtx as w, createVNode as m, toDisplayString as T, withModifiers as W, createCommentVNode as c, Fragment as C, renderList as I, normalizeClass as B } from "vue";
+import { mdiMapMarker as H, mdiHome as j, mdiLink as q } from "@mdi/js";
+import { LOAN_CALLOUTS_FRAGMENT as Z, LOAN_GEOCODE_FRAGMENT as z, LOAN_PROGRESS_FRAGMENT as J, loanCardComputedProperties as Q, loanCardMethods as X } from "../utils/loanCard.js";
+import Y, { KV_LOAN_USE_FRAGMENT as p } from "./KvLoanUse.js";
 import $ from "./KvBorrowerImage.js";
 import ee from "./KvLoanCallouts.js";
 import te, { KV_LEND_CTA_FRAGMENT as oe, KV_LEND_CTA_USER_FRAGMENT as ae } from "./KvLendCta.js";
-import ne, { KV_LOAN_BOOKMARK_FRAGMENT as le } from "./KvLoanBookmark.js";
-import re from "./KvLoanProgressGroup.js";
+import ne, { KV_LOAN_BOOKMARK_FRAGMENT as re } from "./KvLoanBookmark.js";
+import le from "./KvLoanProgressGroup.js";
 import ie, { KV_LOAN_TAG_FRAGMENT as se } from "./KvLoanTag.js";
 import de from "./KvMaterialIcon.js";
 import me from "./KvLoadingPlaceholder.js";
-import ce from "./KvLoanTeamPick.js";
+import ue from "./KvLoanTeamPick.js";
 import "./KvCompactLoanCard.css";
-import ue from "../_virtual/_plugin-vue_export-helper.js";
-const je = P`
+import ce from "../_virtual/_plugin-vue_export-helper.js";
+const qe = M`
 	fragment KvCompactLoanCard on LoanBasic {
 		id
 		image {
@@ -39,31 +39,31 @@ const je = P`
 	}
 	${oe}
 	${se}
-	${Y}
-	${q}
+	${p}
 	${Z}
 	${z}
-`, qe = P`
+	${J}
+`, Ze = M`
 	fragment KvCompactLoanCardUser on LoanBasic {
 		id
 		...KvLendCtaUser
 		...KvLoanBookmark
 	}
 	${ae}
-	${le}
+	${re}
 `, fe = {
   name: "KvCompactLoanCard",
   components: {
     KvBorrowerImage: $,
     KvLoadingPlaceholder: me,
-    KvLoanUse: X,
+    KvLoanUse: Y,
     KvMaterialIcon: de,
     KvLendCta: te,
     KvLoanTag: ie,
     KvLoanCallouts: ee,
     KvLoanBookmark: ne,
-    KvLoanTeamPick: ce,
-    KvLoanProgressGroup: re
+    KvLoanTeamPick: ue,
+    KvLoanProgressGroup: le
   },
   props: {
     loanId: {
@@ -122,6 +122,10 @@ const je = P`
       type: Boolean,
       default: !1
     },
+    externalLinksNewTab: {
+      type: Boolean,
+      default: !1
+    },
     route: {
       type: Object,
       default: void 0
@@ -183,58 +187,58 @@ const je = P`
       default: !0
     }
   },
-  setup(l, { emit: o }) {
+  setup(r, { emit: o }) {
     const {
       allDataLoaded: t,
       borrowerName: e,
-      city: A,
-      countryName: B,
-      distributionModel: k,
+      city: N,
+      countryName: A,
+      distributionModel: h,
       formattedLocation: g,
-      fundraisingPercent: v,
-      hasProgressData: c,
+      fundraisingPercent: b,
+      hasProgressData: u,
       imageHash: _,
-      isLoading: y,
-      loanAmount: b,
+      isLoading: v,
+      loanAmount: y,
       loanBorrowerCount: L,
       loanCallouts: a,
-      loanStatus: C,
-      loanUse: T,
+      loanStatus: x,
+      loanUse: P,
       readMorePath: K,
       state: R,
       tag: F,
       unreservedAmount: E,
       sharesAvailable: S
-    } = J(l), {
+    } = Q(r), {
       clickReadMore: D
-    } = Q(l, o), O = () => {
-      l.kvTrackFunction("Lending", "click-Business Website", "Website", l.loanId);
+    } = X(r, o), O = () => {
+      r.kvTrackFunction("Lending", "click-Business Website", "Website", r.loanId);
     }, G = U(() => {
-      if (!l.website)
+      if (!r.website)
         return "";
-      const h = l.website.trim();
-      return h.startsWith("http://") || h.startsWith("https://") ? h : `https://${h}`;
+      const k = r.website.trim();
+      return k.startsWith("http://") || k.startsWith("https://") ? k : `https://${k}`;
     });
     return {
       allDataLoaded: t,
       borrowerName: e,
-      city: A,
-      countryName: B,
-      distributionModel: k,
+      city: N,
+      countryName: A,
+      distributionModel: h,
       formattedLocation: g,
       formattedWebsite: G,
-      fundraisingPercent: v,
-      hasProgressData: c,
+      fundraisingPercent: b,
+      hasProgressData: u,
       imageHash: _,
-      isLoading: y,
-      loanAmount: b,
+      isLoading: v,
+      loanAmount: y,
       loanBorrowerCount: L,
       loanCallouts: a,
-      loanStatus: C,
-      loanUse: T,
-      mdiMapMarker: I,
-      mdiHome: H,
-      mdiLink: j,
+      loanStatus: x,
+      loanUse: P,
+      mdiMapMarker: H,
+      mdiHome: j,
+      mdiLink: q,
       readMorePath: K,
       state: R,
       tag: F,
@@ -246,43 +250,45 @@ const je = P`
   },
   computed: {
     lendersNumber() {
-      var l, o;
-      return ((o = (l = this.loan) == null ? void 0 : l.lenders) == null ? void 0 : o.totalCount) ?? 0;
+      var r, o;
+      return ((o = (r = this.loan) == null ? void 0 : r.lenders) == null ? void 0 : o.totalCount) ?? 0;
     },
     amountLent() {
       var o, t;
-      const l = ((t = (o = this.loan) == null ? void 0 : o.loanFundraisingInfo) == null ? void 0 : t.fundedAmount) ?? 0;
-      return V(l).format("$0,0");
+      const r = ((t = (o = this.loan) == null ? void 0 : o.loanFundraisingInfo) == null ? void 0 : t.fundedAmount) ?? 0;
+      return V(r).format("$0,0");
     }
   }
-}, we = { 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" }, he = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, ke = {
+}, we = { 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" }, ke = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, he = {
   class: "tw-flex tw-items-start tw-gap-2 tw-w-full loan-card-active-hover",
   style: { height: "6.75rem", "max-height": "6.75rem" }
-}, ge = { class: "tw-flex-shrink-0 tw-overflow-hidden" }, ve = { class: "tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0" }, _e = {
+}, ge = { class: "tw-flex-shrink-0 tw-overflow-hidden" }, be = { class: "tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0" }, _e = {
   key: 0,
   class: "tw-mb-0.5 tw-w-full"
-}, ye = { class: "tw-text-primary !tw-font-medium tw-text-base tw-leading-normal tw-truncate" }, be = ["href"], Le = { class: "tw-truncate" }, Ce = {
+}, ve = { class: "tw-text-primary !tw-font-medium tw-text-base tw-leading-normal tw-truncate" }, ye = ["href"], Le = { class: "tw-truncate" }, xe = {
   key: 0,
   class: "loan-card-use-text tw-w-full tw-overflow-hidden"
-}, xe = {
+}, Ce = {
   key: 1,
   class: "loan-card-use-text tw-w-full tw-overflow-hidden"
-}, Ae = { class: "tw-flex-1 tw-min-w-0 tw-mr-1" }, Be = { class: "tw-flex-1 tw-min-w-0" };
-function Me(l, o, t, e, A, B) {
-  const k = d("kv-borrower-image"), g = d("kv-material-icon"), v = d("kv-loan-tag"), c = d("kv-loading-placeholder"), _ = d("kv-loan-use"), y = d("kv-loan-callouts"), b = d("kv-loan-progress-group"), L = d("kv-lend-cta");
+}, Ne = { class: "tw-flex-1 tw-min-w-0 tw-mr-1" }, Ae = { class: "tw-flex-1 tw-min-w-0" };
+function Te(r, o, t, e, N, A) {
+  const h = d("kv-borrower-image"), g = d("kv-material-icon"), b = d("kv-loan-tag"), u = d("kv-loading-placeholder"), _ = d("kv-loan-use"), v = d("kv-loan-callouts"), y = d("kv-loan-progress-group"), L = d("kv-lend-cta");
   return n(), i("div", we, [
-    r("div", he, [
-      r("div", ke, [
-        r("div", ge, [
+    l("div", ke, [
+      l("div", he, [
+        l("div", ge, [
           (n(), s(f(e.tag), {
             to: e.readMorePath,
             href: e.readMorePath,
+            target: t.externalLinksNewTab ? "_blank" : void 0,
+            rel: t.externalLinksNewTab ? "noopener noreferrer" : void 0,
             class: "tw-flex",
             "aria-label": "Borrower image",
             onClick: o[0] || (o[0] = (a) => e.clickReadMore("Photo", a))
           }, {
             default: w(() => [
-              m(k, {
+              m(h, {
                 class: "tw-bg-gray-300 tw-rounded-md tw-object-cover",
                 style: { width: "100px", height: "100px" },
                 alt: `Photo of ${e.borrowerName}`,
@@ -294,68 +300,74 @@ function Me(l, o, t, e, A, B) {
               }, null, 8, ["alt", "hash", "photo-path"])
             ]),
             _: 1
-          }, 8, ["to", "href"]))
+          }, 8, ["to", "href", "target", "rel"]))
         ]),
-        r("div", ve, [
+        l("div", be, [
           t.businessName ? (n(), i("div", _e, [
             (n(), s(f(e.tag), {
               to: e.readMorePath,
               href: e.readMorePath,
+              target: t.externalLinksNewTab ? "_blank" : void 0,
+              rel: t.externalLinksNewTab ? "noopener noreferrer" : void 0,
               class: "tw-no-underline hover:tw-underline focus:tw-no-underline",
               "aria-label": "Business name",
               onClick: o[1] || (o[1] = (a) => e.clickReadMore("Business", a))
             }, {
               default: w(() => [
-                r("h3", ye, M(t.businessName), 1)
+                l("h3", ve, T(t.businessName), 1)
               ]),
               _: 1
-            }, 8, ["to", "href"])),
+            }, 8, ["to", "href", "target", "rel"])),
             t.website ? (n(), i("a", {
               key: 0,
               href: e.formattedWebsite,
               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[2] || (o[2] = p((...a) => e.trackWebsiteClick && e.trackWebsiteClick(...a), ["stop"]))
+              onClick: o[2] || (o[2] = W((...a) => e.trackWebsiteClick && e.trackWebsiteClick(...a), ["stop"]))
             }, [
               m(g, {
                 icon: e.mdiLink,
                 class: "tw-w-2 tw-h-2"
               }, null, 8, ["icon"]),
-              r("span", Le, M(t.website), 1)
-            ], 8, be)) : u("", !0)
-          ])) : u("", !0),
+              l("span", Le, T(t.website), 1)
+            ], 8, ye)) : c("", !0)
+          ])) : c("", !0),
           (n(), s(f(e.tag), {
             to: e.readMorePath,
             href: e.readMorePath,
+            target: t.externalLinksNewTab ? "_blank" : void 0,
+            rel: t.externalLinksNewTab ? "noopener noreferrer" : void 0,
             class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline -tw-mt-1",
             "aria-label": "Loan tag",
             onClick: o[3] || (o[3] = (a) => e.clickReadMore("Tag", a))
           }, {
             default: w(() => [
-              t.showTags && !e.isLoading ? (n(), s(v, {
+              t.showTags && !e.isLoading ? (n(), s(b, {
                 key: 0,
                 loan: t.loan
-              }, null, 8, ["loan"])) : u("", !0)
+              }, null, 8, ["loan"])) : c("", !0)
             ]),
             _: 1
-          }, 8, ["to", "href"])),
+          }, 8, ["to", "href", "target", "rel"])),
           t.showLoanUse ? (n(), s(f(e.tag), {
             key: 1,
             to: e.readMorePath,
             href: e.readMorePath,
+            target: t.externalLinksNewTab ? "_blank" : void 0,
+            rel: t.externalLinksNewTab ? "noopener noreferrer" : void 0,
             class: "loan-card-use tw-no-underline tw-text-primary tw-block tw-w-full",
             "aria-label": "Loan use",
             onClick: o[4] || (o[4] = (a) => e.clickReadMore("Use", a))
           }, {
             default: w(() => [
-              e.isLoading ? (n(), i("div", Ce, [
-                (n(!0), i(x, null, W([...Array(4)], (a, C) => (n(), i("div", {
-                  key: C,
+              e.isLoading ? (n(), i("div", xe, [
+                (n(!0), i(C, null, I([...Array(4)], (a, x) => (n(), i("div", {
+                  key: x,
                   class: "tw-h-2 tw-mb-1"
                 }, [
-                  m(c)
+                  m(u)
                 ]))), 128))
-              ])) : (n(), i("div", xe, [
+              ])) : (n(), i("div", Ce, [
                 m(_, {
                   use: e.loanUse,
                   "loan-amount": e.loanAmount,
@@ -370,35 +382,37 @@ function Me(l, o, t, e, A, B) {
               ]))
             ]),
             _: 1
-          }, 8, ["to", "href"])) : u("", !0)
+          }, 8, ["to", "href", "target", "rel"])) : c("", !0)
         ])
       ]),
-      e.isLoading || typeof e.loanCallouts > "u" ? (n(), s(c, {
+      e.isLoading || typeof e.loanCallouts > "u" ? (n(), s(u, {
         key: 0,
         class: "tw-mt-1.5 tw-mb-1 tw-rounded-full",
         style: { width: "60%", height: "1.5rem" }
-      })) : (n(), s(y, {
+      })) : (n(), s(v, {
         key: 1,
         callouts: e.loanCallouts,
         class: "tw-mt-1.5",
-        onClick: o[5] || (o[5] = (a) => l.$emit("jump-filter-page", a))
+        onClick: o[5] || (o[5] = (a) => r.$emit("jump-filter-page", a))
       }, null, 8, ["callouts"]))
     ]),
-    r("div", {
-      class: N(["tw-flex tw-items-end tw-w-full tw-mt-1", { "tw-gap-1": e.sharesAvailable }])
+    l("div", {
+      class: B(["tw-flex tw-items-end tw-w-full tw-mt-1", { "tw-gap-1": e.sharesAvailable }])
     }, [
-      e.hasProgressData ? (n(), i(x, { key: 1 }, [
-        r("div", Be, [
+      e.hasProgressData ? (n(), i(C, { key: 1 }, [
+        l("div", Ae, [
           e.sharesAvailable ? (n(), s(f(e.tag), {
             key: 0,
             to: e.readMorePath,
             href: e.readMorePath,
+            target: t.externalLinksNewTab ? "_blank" : void 0,
+            rel: t.externalLinksNewTab ? "noopener noreferrer" : void 0,
             class: "loan-card-progress tw-no-underline tw-block",
             "aria-label": "Loan progress",
             onClick: o[6] || (o[6] = (a) => e.clickReadMore("Progress", a))
           }, {
             default: w(() => [
-              m(b, {
+              m(y, {
                 id: "loanProgress",
                 "money-left": e.unreservedAmount,
                 "progress-percent": e.fundraisingPercent,
@@ -406,10 +420,10 @@ function Me(l, o, t, e, A, B) {
               }, null, 8, ["money-left", "progress-percent"])
             ]),
             _: 1
-          }, 8, ["to", "href"])) : u("", !0)
+          }, 8, ["to", "href", "target", "rel"])) : c("", !0)
         ]),
-        r("div", {
-          class: N(["tw-flex-shrink-0 loan-card-cta", { "tw-w-full": !e.sharesAvailable }]),
+        l("div", {
+          class: B(["tw-flex-shrink-0 loan-card-cta", { "tw-w-full": !e.sharesAvailable }]),
           style: { height: "40px" }
         }, [
           m(L, {
@@ -432,23 +446,23 @@ function Me(l, o, t, e, A, B) {
             "primary-button-text": t.primaryButtonText,
             "secondary-button-text": t.secondaryButtonText,
             "secondary-button-handler": t.secondaryButtonHandler,
-            onAddToBasket: o[7] || (o[7] = (a) => l.$emit("add-to-basket", a)),
+            onAddToBasket: o[7] || (o[7] = (a) => r.$emit("add-to-basket", a)),
             onShowLoanDetails: o[8] || (o[8] = (a) => e.clickReadMore("ViewLoan", a)),
-            onRemoveFromBasket: o[9] || (o[9] = (a) => l.$emit("remove-from-basket", a))
+            onRemoveFromBasket: o[9] || (o[9] = (a) => r.$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(), i(x, { key: 0 }, [
-        r("div", Ae, [
-          m(c, {
+      ], 64)) : (n(), i(C, { key: 0 }, [
+        l("div", Ne, [
+          m(u, {
             class: "tw-mb-0.5",
             style: { width: "100%", maxWidth: "11rem", height: "1rem" }
           }),
-          m(c, {
+          m(u, {
             class: "tw-rounded",
             style: { width: "100%", maxWidth: "11rem", height: "0.5rem" }
           })
         ]),
-        e.allDataLoaded ? u("", !0) : (n(), s(c, {
+        e.allDataLoaded ? c("", !0) : (n(), s(u, {
           key: 0,
           class: "tw-rounded tw-flex-shrink-0",
           style: { width: "8rem", height: "2.5rem" }
@@ -457,9 +471,9 @@ function Me(l, o, t, e, A, B) {
     ], 2)
   ]);
 }
-const Ze = /* @__PURE__ */ ue(fe, [["render", Me], ["__scopeId", "data-v-4274faf3"]]);
+const ze = /* @__PURE__ */ ce(fe, [["render", Te], ["__scopeId", "data-v-df6cbfd6"]]);
 export {
-  je as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  qe as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  Ze as default
+  qe as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  Ze as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  ze as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "7.5.0",
+  "version": "7.6.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -115,5 +115,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "2a5cf7ee94ea90892079d9b644d103559b5bbe21"
+  "gitHead": "76df0f5473e78a4d36bba8e19c3388cc8a055921"
 }