@kiva/kv-components 8.15.1 → 8.16.0

package/dist/vue/KvLoanTag2.js

@@ -1,13 +1,14 @@
-import { parseISO as s, differenceInDays as i } from "date-fns";
-import d from "graphql-tag";
-import u from "numeral";
-import l from "./KvCountdownTimer.js";
-const m = "N/A", t = {
+import { parseISO as s, differenceInDays as r } from "date-fns";
+import u from "graphql-tag";
+import l from "numeral";
+import h from "./KvCountdownTimer.js";
+import d from "./KvTooltip.js";
+const m = "N/A", a = {
   almostFunded: "almost-funded",
   endingSoon: "ending-soon",
   matchedLoan: "matched-loan",
   lseLoan: "lse-loan"
-}, L = d`
+}, L = u`
 	fragment KvLoanTag on LoanBasic {
 		id
 		loanFundraisingInfo {
@@ -18,15 +19,20 @@ const m = "N/A", t = {
 		loanAmount
 		matchRatio
 		matchingText
+		multiMatching {
+			matchRatio
+			matchingText
+		}
 		plannedExpirationDate
 		... on LoanPartner {
 			partnerName
 		}
 	}
-`, g = {
+`, x = {
   name: "KvLoanTag",
   components: {
-    KvCountdownTimer: l
+    KvCountdownTimer: h,
+    KvTooltip: d
   },
   props: {
     loan: {
@@ -36,36 +42,55 @@ const m = "N/A", t = {
     useExpandedStyles: {
       type: Boolean,
       default: !1
+    },
+    enableMultiMatching: {
+      type: Boolean,
+      default: !1
     }
   },
   computed: {
     deadline() {
-      var n;
-      return s((n = this.loan) == null ? void 0 : n.plannedExpirationDate);
+      var t;
+      return s((t = this.loan) == null ? void 0 : t.plannedExpirationDate);
     },
     isLseLoan() {
-      var n, e;
-      return ((e = (n = this.loan) == null ? void 0 : n.partnerName) == null ? void 0 : e.toUpperCase().includes(m)) ?? !1;
+      var t, n;
+      return ((n = (t = this.loan) == null ? void 0 : t.partnerName) == null ? void 0 : n.toUpperCase().includes(m)) ?? !1;
     },
     amountLeft() {
-      var a, o;
-      const n = ((a = this.loan) == null ? void 0 : a.loanFundraisingInfo) ?? { fundedAmount: 0, reservedAmount: 0 }, { fundedAmount: e, reservedAmount: r } = n;
-      return u((o = this.loan) == null ? void 0 : o.loanAmount).subtract(e).subtract(r).value();
+      var e, o;
+      const t = ((e = this.loan) == null ? void 0 : e.loanFundraisingInfo) ?? { fundedAmount: 0, reservedAmount: 0 }, { fundedAmount: n, reservedAmount: i } = t;
+      return l((o = this.loan) == null ? void 0 : o.loanAmount).subtract(n).subtract(i).value();
+    },
+    multiMatchingOrgs() {
+      var t;
+      return ((t = this.loan) == null ? void 0 : t.multiMatching) ?? [];
+    },
+    isMultipleMatch() {
+      return this.enableMultiMatching && this.multiMatchingOrgs.length > 1;
+    },
+    totalMatchRatio() {
+      return this.multiMatchingOrgs.reduce((t, n) => t + n.matchRatio + 1, 0);
     },
     variation() {
-      var n, e;
-      return (n = this.loan) != null && n.matchingText ? t.matchedLoan : this.isLseLoan ? t.lseLoan : i(s((e = this.loan) == null ? void 0 : e.plannedExpirationDate), Date.now()) <= 3 ? t.endingSoon : this.amountLeft < 100 && this.amountLeft >= 0 ? t.almostFunded : null;
+      var i, e;
+      const t = !!((i = this.loan) != null && i.matchingText), n = this.enableMultiMatching && this.multiMatchingOrgs.length > 0;
+      return t || n ? a.matchedLoan : this.isLseLoan ? a.lseLoan : r(s((e = this.loan) == null ? void 0 : e.plannedExpirationDate), Date.now()) <= 3 ? a.endingSoon : this.amountLeft < 100 && this.amountLeft >= 0 ? a.almostFunded : null;
     },
     tagText() {
-      var n;
+      var t;
       switch (this.variation) {
-        case t.lseLoan:
+        case a.lseLoan:
           return `${this.useExpandedStyles ? "⚡ " : ""}High community impact`;
-        case t.almostFunded:
+        case a.almostFunded:
           return `${this.useExpandedStyles ? "💸 " : ""}Almost funded`;
-        // eslint-disable-next-line max-len
-        case t.matchedLoan:
-          return `${this.useExpandedStyles ? "🤝 " : ""}${this.matchRatio + 1}x matching by ${(n = this.loan) == null ? void 0 : n.matchingText}`;
+        case a.matchedLoan: {
+          if (this.enableMultiMatching && this.multiMatchingOrgs.length === 1) {
+            const n = this.multiMatchingOrgs[0];
+            return `${this.useExpandedStyles ? "🤝 " : ""}${n.matchRatio + 1}x matching by ${n.matchingText}`;
+          }
+          return `${this.useExpandedStyles ? "🤝 " : ""}${this.matchRatio + 1}x matching by ${(t = this.loan) == null ? void 0 : t.matchingText}`;
+        }
         default:
           return `${this.useExpandedStyles ? "⏰ " : ""}Ending soon: `;
       }
@@ -73,9 +98,9 @@ const m = "N/A", t = {
     tagColor() {
       if (this.useExpandedStyles)
         switch (this.variation) {
-          case t.almostFunded:
+          case a.almostFunded:
             return "#AF741C";
-          case t.endingSoon:
+          case a.endingSoon:
             return "#CE2626";
           default:
             return "#2B7C5F";
@@ -83,12 +108,12 @@ const m = "N/A", t = {
       return "#CE4A00";
     },
     matchRatio() {
-      var n;
-      return (n = this.loan) == null ? void 0 : n.matchRatio;
+      var t;
+      return (t = this.loan) == null ? void 0 : t.matchRatio;
     }
   }
 };
 export {
   L as KV_LOAN_TAG_FRAGMENT,
-  g as default
+  x as default
 };

package/dist/vue/KvWideLoanCard.css

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

package/dist/vue/KvWideLoanCard.js

@@ -82,8 +82,9 @@ function O(h, a, t, e, j, g) {
         default: k(() => [
           t.showTags && !e.isLoading ? (o(), n(x, {
             key: 0,
-            loan: t.loan
-          }, null, 8, ["loan"])) : c("", !0)
+            loan: t.loan,
+            "enable-multi-matching": t.enableMultiMatching
+          }, null, 8, ["loan", "enable-multi-matching"])) : c("", !0)
         ]),
         _: 1
       }, 8, ["to", "href"])),
@@ -185,7 +186,7 @@ function O(h, a, t, e, j, g) {
     ])
   ], 2);
 }
-const X = /* @__PURE__ */ R(P, [["render", O], ["__scopeId", "data-v-addb15e1"]]);
+const X = /* @__PURE__ */ R(P, [["render", O], ["__scopeId", "data-v-6b9da1b7"]]);
 export {
   p as KV_WIDE_LOAN_CARD_FRAGMENT,
   $ as KV_WIDE_LOAN_CARD_USER_FRAGMENT,

package/dist/vue/KvWideLoanCard.vue.d.ts

@@ -87,6 +87,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    enableMultiMatching: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     allDataLoaded: import('vue').ComputedRef<boolean>;
     borrowerName: import('vue').ComputedRef<any>;
@@ -203,6 +207,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         default: string;
     };
+    enableMultiMatching: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     loan: Record<string, any>;
     externalLinks: boolean;
@@ -222,6 +230,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     fiveDollarsSelected: boolean;
     isVisitor: boolean;
     isBookmarked: boolean;
+    enableMultiMatching: boolean;
     showTags: boolean;
 }, {}, {
     KvBorrowerImage: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
@@ -1129,10 +1138,17 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        enableMultiMatching: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>, {}, {}, {
         deadline(): Date;
         isLseLoan(): any;
         amountLeft(): any;
+        multiMatchingOrgs(): any;
+        isMultipleMatch(): boolean;
+        totalMatchRatio(): any;
         variation(): string;
         tagText(): string;
         tagColor(): "#AF741C" | "#CE2626" | "#2B7C5F" | "#CE4A00";
@@ -1146,8 +1162,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        enableMultiMatching: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & Readonly<{}>, {
         useExpandedStyles: boolean;
+        enableMultiMatching: boolean;
     }, {}, {
         KvCountdownTimer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             deadline: {
@@ -1163,6 +1184,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
                 required: true;
             };
         }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        KvTooltip: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
     }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     KvLoanCallouts: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
         callouts: {

package/dist/vue/KvWideLoanCard2.js

@@ -1,5 +1,5 @@
-import o from "graphql-tag";
-import { LOAN_CALLOUTS_FRAGMENT as E, LOAN_GEOCODE_FRAGMENT as R, LOAN_PROGRESS_FRAGMENT as B, loanCardComputedProperties as M, loanCardMethods as S } from "../utils/loanCard.js";
+import a from "graphql-tag";
+import { LOAN_CALLOUTS_FRAGMENT as E, LOAN_GEOCODE_FRAGMENT as M, LOAN_PROGRESS_FRAGMENT as B, loanCardComputedProperties as R, loanCardMethods as S } from "../utils/loanCard.js";
 import T from "./KvLoanUse.js";
 import w from "./KvBorrowerImage.js";
 import O from "./KvLoanProgressGroup.js";
@@ -7,13 +7,13 @@ import D from "./KvLoanCallouts.js";
 import F from "./KvLendCta.js";
 import G from "./KvLoanBookmark.js";
 import k from "./KvLoanTag.js";
-import P from "./KvMaterialIcon.js";
-import b from "./KvLoadingPlaceholder.js";
+import b from "./KvMaterialIcon.js";
+import P from "./KvLoadingPlaceholder.js";
 import { KV_LEND_CTA_FRAGMENT as U, KV_LEND_CTA_USER_FRAGMENT as V } from "./KvLendCta2.js";
 import { KV_LOAN_TAG_FRAGMENT as W } from "./KvLoanTag2.js";
 import { KV_LOAN_USE_FRAGMENT as $ } from "./KvLoanUse2.js";
 import { KV_LOAN_BOOKMARK_FRAGMENT as z } from "./KvLoanBookmark2.js";
-const ne = o`
+const ne = a`
 	fragment KvWideLoanCard on LoanBasic {
 		id
 		image {
@@ -32,9 +32,9 @@ const ne = o`
 	${W}
 	${$}
 	${E}
-	${R}
+	${M}
 	${B}
-`, ie = o`
+`, ie = a`
 	fragment KvWideLoanCardUser on LoanBasic {
 		id
 		...KvLendCtaUser
@@ -42,14 +42,14 @@ const ne = o`
 	}
 	${V}
 	${z}
-`, de = {
+`, le = {
   name: "KvWideLoanCard",
   components: {
     KvBorrowerImage: w,
-    KvLoadingPlaceholder: b,
+    KvLoadingPlaceholder: P,
     KvLoanUse: T,
     KvLoanProgressGroup: O,
-    KvMaterialIcon: P,
+    KvMaterialIcon: b,
     KvLendCta: F,
     KvLoanTag: k,
     KvLoanCallouts: D,
@@ -139,16 +139,20 @@ const ne = o`
     customHref: {
       type: String,
       default: ""
+    },
+    enableMultiMatching: {
+      type: Boolean,
+      default: !1
     }
   },
-  setup(e, { emit: a }) {
+  setup(e, { emit: o }) {
     const {
       allDataLoaded: t,
       borrowerName: r,
       city: n,
       countryName: i,
-      distributionModel: d,
-      formattedLocation: l,
+      distributionModel: l,
+      formattedLocation: d,
       fundraisingPercent: s,
       hasProgressData: u,
       imageHash: m,
@@ -164,16 +168,16 @@ const ne = o`
       tag: K,
       unreservedAmount: N,
       sharesAvailable: h
-    } = M(e), {
+    } = R(e), {
       clickReadMore: C
-    } = S(e, a);
+    } = S(e, o);
     return {
       allDataLoaded: t,
       borrowerName: r,
       city: n,
       countryName: i,
-      distributionModel: d,
-      formattedLocation: l,
+      distributionModel: l,
+      formattedLocation: d,
       fundraisingPercent: s,
       hasProgressData: u,
       imageHash: m,
@@ -216,5 +220,5 @@ const ne = o`
 export {
   ne as KV_WIDE_LOAN_CARD_FRAGMENT,
   ie as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
-  de as default
+  le as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.15.1",
+  "version": "8.16.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -128,5 +128,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "623696227ceb7e922c7e4c813d0afa71a4eab20b"
+  "gitHead": "23b0928e2e0d6fc6899df814e04cf53989a39a65"
 }