@kiva/kv-components 10.5.0 → 10.6.0

package/dist/vue/KvLoanTag2.js

@@ -1,125 +1,46 @@
-import { differenceInDays as r, parseISO as s } from "date-fns";
-import u from "graphql-tag";
-import l from "numeral";
-import d from "./KvCountdownTimer.js";
-import m from "./KvTooltip.js";
-const h = "N/A", a = {
-  almostFunded: "almost-funded",
-  endingSoon: "ending-soon",
-  matchedLoan: "matched-loan",
-  lseLoan: "lse-loan"
-}, y = u`
-	fragment KvLoanTag on LoanBasic {
-		id
-		loanFundraisingInfo {
-			id
-			fundedAmount
-			reservedAmount
-		}
-		loanAmount
-		matchRatio
-		matchingText
-		simultaneousMatching {
-			managedAccountId
-			displayName
-			ratio
-		}
-		plannedExpirationDate
-		... on LoanPartner {
-			partnerName
-		}
-	}
-`, L = {
-  name: "KvLoanTag",
-  components: {
-    KvCountdownTimer: d,
-    KvTooltip: m
-  },
-  props: {
-    loan: {
-      type: Object,
-      required: !0
-    },
-    useExpandedStyles: {
-      type: Boolean,
-      default: !1
-    },
-    enableMultiMatching: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  computed: {
-    deadline() {
-      var t;
-      return s((t = this.loan) == null ? void 0 : t.plannedExpirationDate);
-    },
-    isLseLoan() {
-      var t, n;
-      return ((n = (t = this.loan) == null ? void 0 : t.partnerName) == null ? void 0 : n.toUpperCase().includes(h)) ?? !1;
-    },
-    amountLeft() {
-      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.simultaneousMatching) ?? [];
-    },
-    isMultipleMatch() {
-      return this.enableMultiMatching && this.multiMatchingOrgs.length > 1;
-    },
-    totalMatchRatio() {
-      return this.multiMatchingOrgs.reduce((t, n) => t + n.ratio, 1);
-    },
-    variation() {
-      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 t;
-      switch (this.variation) {
-        case a.lseLoan:
-          return `${this.useExpandedStyles ? "⚡ " : ""}High community impact`;
-        case a.almostFunded:
-          return `${this.useExpandedStyles ? "💸 " : ""}Almost funded`;
-        case a.matchedLoan: {
-          if (this.enableMultiMatching && this.multiMatchingOrgs.length === 1) {
-            const n = this.multiMatchingOrgs[0];
-            return `${this.useExpandedStyles ? "🤝 " : ""}${n.ratio + 1}x matching by ${this.orgDisplayName(n)}`;
-          }
-          return `${this.useExpandedStyles ? "🤝 " : ""}${this.matchRatio + 1}x matching by ${(t = this.loan) == null ? void 0 : t.matchingText}`;
-        }
-        default:
-          return `${this.useExpandedStyles ? "⏰ " : ""}Ending soon: `;
-      }
-    },
-    tagColor() {
-      if (this.useExpandedStyles)
-        switch (this.variation) {
-          case a.almostFunded:
-            return "#AF741C";
-          case a.endingSoon:
-            return "#CE2626";
-          default:
-            return "#2B7C5F";
-        }
-      return "#CE4A00";
-    },
-    matchRatio() {
-      var t;
-      return (t = this.loan) == null ? void 0 : t.matchRatio;
-    }
-  },
-  methods: {
-    orgDisplayName(t) {
-      return t.displayName && t.displayName !== "Anonymous" ? t.displayName : "a Kiva supporter";
-    }
-  }
-};
+import h from "./KvLoanTag.js";
+import { KV_LOAN_TAG_FRAGMENT as L } from "./KvLoanTag.js";
+import { resolveComponent as d, openBlock as e, createElementBlock as r, normalizeStyle as _, normalizeClass as w, Fragment as o, createTextVNode as m, toDisplayString as a, createElementVNode as l, createVNode as p, withCtx as y, renderList as k, createBlock as f, createCommentVNode as s } from "vue";
+import x from "../_virtual/_plugin-vue_export-helper.js";
+const v = ["id"], M = { class: "tw-whitespace-nowrap tw-pb-0.5" };
+function N(b, i, c, C, T, t) {
+  const u = d("kv-tooltip"), g = d("kv-countdown-timer");
+  return t.variation ? (e(), r("div", {
+    key: 0,
+    class: w(["tw-text-small tw-font-medium tw-pt-0.5", { "tw-line-clamp-1": !t.isMultipleMatch }]),
+    style: _({ color: t.tagColor })
+  }, [
+    t.isMultipleMatch ? (e(), r(o, { key: 0 }, [
+      m(a(t.totalMatchRatio) + "x match by ", 1),
+      l("span", {
+        id: `matching-orgs-${c.loan.id}`,
+        class: "tw-underline tw-decoration-dotted tw-cursor-pointer"
+      }, a(t.multiMatchingOrgs.length) + " organizations", 9, v),
+      p(u, {
+        controller: `matching-orgs-${c.loan.id}`,
+        "max-width": "320px"
+      }, {
+        default: y(() => [
+          l("p", M, " Your contribution is matched by " + a(t.multiMatchingOrgs.length) + " partners ", 1),
+          i[0] || (i[0] = l("hr", { class: "tw-border-caution-highlight tw-py-0.5" }, null, -1)),
+          (e(!0), r(o, null, k(t.multiMatchingOrgs, (n) => (e(), r("p", {
+            key: n.managedAccountId,
+            class: "tw-m-0"
+          }, a(n.ratio) + ":1 matching by " + a(t.orgDisplayName(n)), 1))), 128))
+        ]),
+        _: 1
+      }, 8, ["controller"])
+    ], 64)) : (e(), r(o, { key: 1 }, [
+      m(a(t.tagText) + " ", 1),
+      t.variation === "ending-soon" ? (e(), f(g, {
+        key: 0,
+        deadline: t.deadline
+      }, null, 8, ["deadline"])) : s("", !0)
+    ], 64))
+  ], 6)) : s("", !0);
+}
+const z = /* @__PURE__ */ x(h, [["render", N]]);
 export {
-  y as KV_LOAN_TAG_FRAGMENT,
-  L as default
+  L as KV_LOAN_TAG_FRAGMENT,
+  z as default
 };

package/dist/vue/KvLoanUse.js

@@ -1,16 +1,113 @@
-import o from "./KvLoanUse2.js";
-import { KV_LOAN_USE_FRAGMENT as E } from "./KvLoanUse2.js";
-import { openBlock as r, createElementBlock as n } from "vue";
-import t from "../_virtual/_plugin-vue_export-helper.js";
-const c = ["innerHTML"];
-function s(_, p, a, l, m, e) {
-  return r(), n("p", {
-    class: "tw-line-clamp-4",
-    innerHTML: e.loanUse
-  }, null, 8, c);
-}
-const u = /* @__PURE__ */ t(o, [["render", s]]);
+import u from "graphql-tag";
+import l from "numeral";
+import { truncateStringByWords as i } from "../utils/loanUtils.js";
+const r = "direct", o = (e) => e.charAt(0).toUpperCase() + e.slice(1), t = (e) => e.charAt(0).toLowerCase() + e.slice(1), m = u`
+	fragment KvLoanUse on LoanBasic {
+		id
+		anonymizationLevel
+		use
+		loanAmount
+		status
+		borrowerCount
+		name
+		distributionModel
+		whySpecial
+	}
+`, f = {
+  name: "KvLoanUse",
+  props: {
+    anonymizationLevel: {
+      type: String,
+      default: "none"
+    },
+    use: {
+      type: String,
+      default: ""
+    },
+    loanAmount: {
+      type: String,
+      default: ""
+    },
+    status: {
+      type: String,
+      default: ""
+    },
+    borrowerCount: {
+      type: Number,
+      default: 1
+    },
+    name: {
+      type: String,
+      default: ""
+    },
+    distributionModel: {
+      type: String,
+      default: r
+    },
+    whySpecial: {
+      type: String,
+      default: ""
+    },
+    hideLoanAmount: {
+      type: Boolean,
+      default: !1
+    },
+    // Unlike hideLoanAmount, this drops the name and country too and never shows a read-more link.
+    hideBorrowerDetails: {
+      type: Boolean,
+      default: !1
+    },
+    boldName: {
+      type: Boolean,
+      default: !1
+    },
+    country: {
+      type: String,
+      default: ""
+    },
+    useIndicativeHelpText: {
+      type: Boolean,
+      default: !1
+    },
+    showReadMore: {
+      type: Boolean,
+      default: !1
+    },
+    truncateWordsNumber: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    helpLanguage() {
+      return this.status === "fundraising" || this.status === "inactive" || this.status === "reviewed" ? "helps" : "helped";
+    },
+    isDirect() {
+      return this.distributionModel === r;
+    },
+    whySpecialSentence() {
+      return this.whySpecial ? ` This loan is special because ${t(this.whySpecial)}` : "";
+    },
+    nameSpan() {
+      return this.boldName ? this.country ? `<span class="data-hj-suppress tw-font-medium">${this.name} in ${this.country}</span>` : `<span class="data-hj-suppress tw-font-medium">${this.name}</span>` : `<span class="data-hj-suppress">${this.name}</span>`;
+    },
+    loanUse() {
+      if (this.anonymizationLevel === "full" || this.use.length === 0)
+        return "For the borrower's privacy, this loan has been made anonymous.";
+      if (this.hideBorrowerDetails)
+        return `${o(this.helpLanguage)} ${t(this.use)}${this.whySpecialSentence}`;
+      if (this.hideLoanAmount) {
+        const n = this.useIndicativeHelpText ? this.helpLanguage : "Help";
+        let a = `${o(n)} ${this.nameSpan} ${t(this.use)} ${this.whySpecialSentence}`;
+        return this.showReadMore && (a = `${i(a, this.truncateWordsNumber)} <span class=" tw-text-action tw-underline">read more</span>`), a;
+      }
+      const e = this.borrowerCount > 1;
+      let s = `${l(this.loanAmount).format("$0,0")} ${this.isDirect ? "to" : this.helpLanguage} ${e ? "a member of " : ""}${this.nameSpan} ${this.isDirect ? `${this.helpLanguage} ` : ""}${t(this.use)}${this.whySpecialSentence}`;
+      return this.showReadMore && (s = `${i(s, this.truncateWordsNumber)} <span class=" tw-text-action tw-underline">read more</span>`), s;
+    }
+  }
+};
 export {
-  E as KV_LOAN_USE_FRAGMENT,
-  u as default
+  m as KV_LOAN_USE_FRAGMENT,
+  f as default
 };

package/dist/vue/KvLoanUse2.js

@@ -1,113 +1,16 @@
-import u from "graphql-tag";
-import l from "numeral";
-import { truncateStringByWords as i } from "../utils/loanUtils.js";
-const r = "direct", o = (e) => e.charAt(0).toUpperCase() + e.slice(1), t = (e) => e.charAt(0).toLowerCase() + e.slice(1), m = u`
-	fragment KvLoanUse on LoanBasic {
-		id
-		anonymizationLevel
-		use
-		loanAmount
-		status
-		borrowerCount
-		name
-		distributionModel
-		whySpecial
-	}
-`, f = {
-  name: "KvLoanUse",
-  props: {
-    anonymizationLevel: {
-      type: String,
-      default: "none"
-    },
-    use: {
-      type: String,
-      default: ""
-    },
-    loanAmount: {
-      type: String,
-      default: ""
-    },
-    status: {
-      type: String,
-      default: ""
-    },
-    borrowerCount: {
-      type: Number,
-      default: 1
-    },
-    name: {
-      type: String,
-      default: ""
-    },
-    distributionModel: {
-      type: String,
-      default: r
-    },
-    whySpecial: {
-      type: String,
-      default: ""
-    },
-    hideLoanAmount: {
-      type: Boolean,
-      default: !1
-    },
-    // Unlike hideLoanAmount, this drops the name and country too and never shows a read-more link.
-    hideBorrowerDetails: {
-      type: Boolean,
-      default: !1
-    },
-    boldName: {
-      type: Boolean,
-      default: !1
-    },
-    country: {
-      type: String,
-      default: ""
-    },
-    useIndicativeHelpText: {
-      type: Boolean,
-      default: !1
-    },
-    showReadMore: {
-      type: Boolean,
-      default: !1
-    },
-    truncateWordsNumber: {
-      type: Number,
-      default: 0
-    }
-  },
-  computed: {
-    helpLanguage() {
-      return this.status === "fundraising" || this.status === "inactive" || this.status === "reviewed" ? "helps" : "helped";
-    },
-    isDirect() {
-      return this.distributionModel === r;
-    },
-    whySpecialSentence() {
-      return this.whySpecial ? ` This loan is special because ${t(this.whySpecial)}` : "";
-    },
-    nameSpan() {
-      return this.boldName ? this.country ? `<span class="data-hj-suppress tw-font-medium">${this.name} in ${this.country}</span>` : `<span class="data-hj-suppress tw-font-medium">${this.name}</span>` : `<span class="data-hj-suppress">${this.name}</span>`;
-    },
-    loanUse() {
-      if (this.anonymizationLevel === "full" || this.use.length === 0)
-        return "For the borrower's privacy, this loan has been made anonymous.";
-      if (this.hideBorrowerDetails)
-        return `${o(this.helpLanguage)} ${t(this.use)}${this.whySpecialSentence}`;
-      if (this.hideLoanAmount) {
-        const n = this.useIndicativeHelpText ? this.helpLanguage : "Help";
-        let a = `${o(n)} ${this.nameSpan} ${t(this.use)} ${this.whySpecialSentence}`;
-        return this.showReadMore && (a = `${i(a, this.truncateWordsNumber)} <span class=" tw-text-action tw-underline">read more</span>`), a;
-      }
-      const e = this.borrowerCount > 1;
-      let s = `${l(this.loanAmount).format("$0,0")} ${this.isDirect ? "to" : this.helpLanguage} ${e ? "a member of " : ""}${this.nameSpan} ${this.isDirect ? `${this.helpLanguage} ` : ""}${t(this.use)}${this.whySpecialSentence}`;
-      return this.showReadMore && (s = `${i(s, this.truncateWordsNumber)} <span class=" tw-text-action tw-underline">read more</span>`), s;
-    }
-  }
-};
+import o from "./KvLoanUse.js";
+import { KV_LOAN_USE_FRAGMENT as E } from "./KvLoanUse.js";
+import { openBlock as r, createElementBlock as n } from "vue";
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const c = ["innerHTML"];
+function s(_, p, a, l, m, e) {
+  return r(), n("p", {
+    class: "tw-line-clamp-4",
+    innerHTML: e.loanUse
+  }, null, 8, c);
+}
+const u = /* @__PURE__ */ t(o, [["render", s]]);
 export {
-  m as KV_LOAN_USE_FRAGMENT,
-  f as default
+  E as KV_LOAN_USE_FRAGMENT,
+  u as default
 };

package/dist/vue/KvPieChartV2.vue.d.ts

@@ -153,6 +153,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        preventBackgroundClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        closeButtonShowDelay: {
+            type: NumberConstructor;
+            default: number;
+        };
     }>, {
         mdiClose: string;
         role: import('vue').ComputedRef<"alertdialog" | "dialog">;
@@ -163,6 +171,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         hide: (closedBy?: string) => void;
         show: () => void;
         controlsRef: import('vue').Ref<any, any>;
+        closeButtonClasses: import('vue').ComputedRef<(string | {
+            'tw-invisible tw-opacity-0': boolean;
+        })[]>;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "lightbox-closed"[], "lightbox-closed", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         blurBackground: {
             type: BooleanConstructor;
@@ -185,6 +196,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        preventBackgroundClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        closeButtonShowDelay: {
+            type: NumberConstructor;
+            default: number;
+        };
     }>> & Readonly<{
         "onLightbox-closed"?: (...args: any[]) => any;
     }>, {
@@ -192,6 +211,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         visible: boolean;
         preventClose: boolean;
         blurBackground: boolean;
+        preventBackgroundClose: boolean;
+        closeButtonShowDelay: number;
     }, {}, {
         KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             icon: {

package/dist/vue/KvVotingCardV2.vue.d.ts

@@ -196,6 +196,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        preventBackgroundClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        closeButtonShowDelay: {
+            type: NumberConstructor;
+            default: number;
+        };
     }>, {
         mdiClose: string;
         role: import('vue').ComputedRef<"alertdialog" | "dialog">;
@@ -206,6 +214,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         hide: (closedBy?: string) => void;
         show: () => void;
         controlsRef: import('vue').Ref<any, any>;
+        closeButtonClasses: import('vue').ComputedRef<(string | {
+            'tw-invisible tw-opacity-0': boolean;
+        })[]>;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, "lightbox-closed"[], "lightbox-closed", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
         blurBackground: {
             type: BooleanConstructor;
@@ -228,6 +239,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        preventBackgroundClose: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        closeButtonShowDelay: {
+            type: NumberConstructor;
+            default: number;
+        };
     }>> & Readonly<{
         "onLightbox-closed"?: (...args: any[]) => any;
     }>, {
@@ -235,6 +254,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         visible: boolean;
         preventClose: boolean;
         blurBackground: boolean;
+        preventBackgroundClose: boolean;
+        closeButtonShowDelay: number;
     }, {}, {
         KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
             icon: {