@kiva/kv-components 10.6.0 → 10.6.1

package/dist/vue/KvCompactLoanCard.script.js

@@ -0,0 +1,382 @@
+import b from "graphql-tag";
+import $ from "numeral";
+import { ref as j, computed as a, watch as q } from "vue";
+import { mdiArrowRight as H, mdiCached as z, mdiLink as J } from "@mdi/js";
+import { LOAN_CALLOUTS_FRAGMENT as Q, LOAN_GEOCODE_FRAGMENT as X, LOAN_PROGRESS_FRAGMENT as Y, loanCardComputedProperties as Z, loanCardMethods as ee } from "../utils/loanCard.js";
+import { getDropdownPriceArray as te, getLendCtaSelectedOption as ae, isLessThan25 as oe } from "../utils/loanUtils.js";
+import { computePostGoalLoanCardStatement as ne } from "../utils/postGoalStatement.js";
+import le from "./KvLoanUse.js";
+import ie from "./KvBorrowerImage.js";
+import re from "./KvLoanCallouts.js";
+import se from "./KvLendCta.js";
+import ue from "./KvLoanProgressGroup.js";
+import de from "./KvLoanTag.js";
+import me from "./KvMaterialIcon.js";
+import fe from "./KvLoadingPlaceholder.js";
+import ce from "./KvLoanTeamPick.js";
+import he from "./KvSelect.js";
+import { KV_LEND_CTA_FRAGMENT as ve, KV_LEND_CTA_USER_FRAGMENT as ge } from "./KvLendCta.script.js";
+import { KV_LOAN_TAG_FRAGMENT as Le } from "./KvLoanTag.script.js";
+import { KV_LOAN_USE_FRAGMENT as ye } from "./KvLoanUse.script.js";
+const d = {
+  default: "default",
+  postGoal: "post-goal",
+  lightDetailed: "light-detailed"
+}, Ae = (e) => e < 500 && e >= 25, Ce = (e) => oe(e) || Ae(e), $e = b`
+	fragment KvCompactLoanCard on LoanBasic {
+		id
+		image {
+			id
+			hash
+		}
+		lenders(limit: 0) {
+			totalCount
+		}
+		loanFundraisingInfo {
+			id
+			fundedAmount
+		}
+		name
+		...KvLendCta
+		...KvLoanTag
+		...KvLoanUse
+		...LoanCallouts
+		...LoanGeocode
+		...LoanProgress
+	}
+	${ve}
+	${Le}
+	${ye}
+	${Q}
+	${X}
+	${Y}
+`, je = b`
+	fragment KvCompactLoanCardUser on LoanBasic {
+		id
+		...KvLendCtaUser
+	}
+	${ge}
+`, qe = {
+  name: "KvCompactLoanCard",
+  components: {
+    KvBorrowerImage: ie,
+    KvLoadingPlaceholder: fe,
+    KvLoanUse: le,
+    KvMaterialIcon: me,
+    KvLendCta: se,
+    KvLoanTag: de,
+    KvLoanCallouts: re,
+    KvLoanTeamPick: ce,
+    KvLoanProgressGroup: ue,
+    KvSelect: he
+  },
+  props: {
+    variant: {
+      type: String,
+      default: d.default,
+      validator: (e) => Object.values(d).includes(e)
+    },
+    loanId: {
+      type: Number,
+      default: void 0
+    },
+    loan: {
+      type: Object,
+      default: null
+    },
+    customLoanDetails: {
+      type: Boolean,
+      default: !1
+    },
+    showTags: {
+      type: Boolean,
+      default: !0
+    },
+    categoryPageName: {
+      type: String,
+      default: ""
+    },
+    enableFiveDollarsNotes: {
+      type: Boolean,
+      default: !1
+    },
+    isAdding: {
+      type: Boolean,
+      default: !1
+    },
+    isVisitor: {
+      type: Boolean,
+      default: !0
+    },
+    basketItems: {
+      type: Array,
+      default: () => []
+    },
+    kvTrackFunction: {
+      type: Function,
+      required: !0
+    },
+    photoPath: {
+      type: String,
+      required: !0
+    },
+    showViewLoan: {
+      type: Boolean,
+      default: !1
+    },
+    externalLinks: {
+      type: Boolean,
+      default: !1
+    },
+    externalLinksNewTab: {
+      type: Boolean,
+      default: !1
+    },
+    route: {
+      type: Object,
+      default: void 0
+    },
+    userBalance: {
+      type: String,
+      default: void 0
+    },
+    getCookie: {
+      type: Function,
+      default: void 0
+    },
+    setCookie: {
+      type: Function,
+      default: void 0
+    },
+    fiveDollarsSelected: {
+      type: Boolean,
+      default: !1
+    },
+    customCallouts: {
+      type: Array,
+      default: () => []
+    },
+    isTeamPick: {
+      type: Boolean,
+      default: !1
+    },
+    primaryButtonText: {
+      type: String,
+      default: "Lend"
+    },
+    secondaryButtonHandler: {
+      type: Function,
+      default: void 0
+    },
+    secondaryButtonText: {
+      type: String,
+      default: "Checkout now"
+    },
+    showContributors: {
+      type: Boolean,
+      default: !1
+    },
+    customHref: {
+      type: String,
+      default: ""
+    },
+    businessName: {
+      type: String,
+      default: ""
+    },
+    website: {
+      type: String,
+      default: ""
+    },
+    showLoanUse: {
+      type: Boolean,
+      default: !0
+    },
+    showLightView: {
+      type: Boolean,
+      default: !1
+    },
+    truncateWordsNumber: {
+      type: Number,
+      default: 0
+    },
+    showRefreshButton: {
+      type: Boolean,
+      default: !1
+    },
+    customAmountLent: {
+      type: String,
+      default: "25"
+    },
+    enableMultiMatching: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "refresh-button",
+    "jump-filter-page",
+    "add-to-basket",
+    "remove-from-basket",
+    "show-loan-details",
+    "update:selected-amount"
+  ],
+  setup(e, { emit: o }) {
+    const l = j(""), m = a(
+      () => e.variant === d.postGoal
+    ), s = a(
+      () => e.variant === d.lightDetailed
+    ), c = a(
+      () => m.value || s.value
+    ), w = a(
+      () => e.showRefreshButton && !s.value
+    ), {
+      allDataLoaded: S,
+      borrowerName: h,
+      distributionModel: v,
+      formattedLocation: g,
+      fundraisingPercent: B,
+      hasProgressData: _,
+      imageHash: N,
+      isLoading: T,
+      loanAmount: f,
+      loanBorrowerCount: L,
+      loanCallouts: k,
+      loanStatus: y,
+      loanUse: A,
+      readMorePath: R,
+      tag: F,
+      unreservedAmount: u,
+      sharesAvailable: M
+    } = Z(e), { clickReadMore: K } = ee(e, o), P = a(() => c.value ? void 0 : { width: "100px", height: "100px" }), D = a(() => {
+      if (!e.website)
+        return "";
+      const t = e.website.trim();
+      return t.startsWith("http://") || t.startsWith("https://") ? t : `https://${t}`;
+    }), E = a(() => {
+      if (c.value) return {};
+      const t = e.showLightView ? "auto" : "6.75rem", n = e.showLightView ? "none" : "6.75rem";
+      return { height: t, maxHeight: n };
+    }), G = a(() => $(f.value).format("$0,0")), i = a(() => {
+      var t;
+      return ne({
+        anonymizationLevel: (t = e.loan) == null ? void 0 : t.anonymizationLevel,
+        borrowerName: h.value,
+        distributionModel: v.value,
+        formattedLocation: g.value,
+        loanAmount: f.value,
+        loanBorrowerCount: L.value,
+        loanStatus: y.value,
+        loanUse: A.value
+      });
+    }), O = a(() => i.value.borrowerNameWithCountry), U = a(() => i.value.loanUsePrefixStart), V = a(() => i.value.loanUsePrefixEnd), x = a(() => i.value.statementTitle), I = a(() => i.value.visibleUseStatement), C = a(() => {
+      var r;
+      const t = parseFloat(u.value);
+      if (!t) return [];
+      const n = t < 25 ? parseFloat(`${((r = e.loan) == null ? void 0 : r.minNoteSize) ?? 25}`) : 25;
+      return te(
+        u.value,
+        Ce(t),
+        n,
+        e.enableFiveDollarsNotes,
+        e.isVisitor
+      );
+    });
+    q(
+      C,
+      (t) => {
+        var r, p;
+        if (!m.value) return;
+        if (!t.length) {
+          l.value = "";
+          return;
+        }
+        const n = ae(
+          e.getCookie,
+          e.setCookie,
+          e.enableFiveDollarsNotes,
+          (p = (r = e.route) == null ? void 0 : r.query) == null ? void 0 : p.utm_campaign,
+          u.value,
+          e.userBalance ? parseFloat(e.userBalance) : void 0,
+          e.fiveDollarsSelected
+        );
+        l.value = t.includes(n) ? n : t[0];
+      },
+      { immediate: !0 }
+    );
+    const W = a(() => s.value ? 2 : e.showLightView ? 3 : 4);
+    return {
+      allDataLoaded: S,
+      amountOptions: C,
+      borrowerImageStyle: P,
+      borrowerName: h,
+      borrowerNameWithCountry: O,
+      lightDetailedAmount: G,
+      distributionModel: v,
+      formattedLocation: g,
+      formattedWebsite: D,
+      fundraisingPercent: B,
+      hasProgressData: _,
+      imageHash: N,
+      isLightDetailedVariant: s,
+      isLoading: T,
+      isPostGoalVariant: m,
+      loanAmount: f,
+      loanBorrowerCount: L,
+      loanCallouts: k,
+      loanStatus: y,
+      loanUse: A,
+      loanUsePrefixEnd: V,
+      loanUsePrefixStart: U,
+      mdiLink: J,
+      mdiCached: z,
+      mdiArrowRight: H,
+      readMorePath: R,
+      shouldShowRefreshButton: w,
+      tag: F,
+      unreservedAmount: u,
+      sharesAvailable: M,
+      selectedAmount: l,
+      statementTitle: x,
+      customStyle: E,
+      loanUseLoadingRows: W,
+      visibleUseStatement: I,
+      clickReadMore: K,
+      trackWebsiteClick: () => {
+        e.kvTrackFunction(
+          "Lending",
+          "click-Business Website",
+          "Website",
+          e.loanId
+        );
+      },
+      handleRefreshButton: (t) => {
+        o("refresh-button", t);
+      },
+      handleSelectedAmount: (t) => {
+        var n;
+        l.value = t, o("update:selected-amount", t), e.kvTrackFunction(
+          "Lending",
+          "Modify lend amount",
+          t,
+          e.loanId ?? ((n = e.loan) == null ? void 0 : n.id)
+        );
+      }
+    };
+  },
+  computed: {
+    isInBasket() {
+      var e;
+      return ((e = this.basketItems) == null ? void 0 : e.some((o) => o.__typename === "LoanReservation" && o.id === this.loanId)) ?? !1;
+    },
+    hasMatchingInfo() {
+      var e, o, l;
+      return !!((e = this.loan) != null && e.matchingText) || this.enableMultiMatching && (((l = (o = this.loan) == null ? void 0 : o.simultaneousMatching) == null ? void 0 : l.length) ?? 0) > 0;
+    }
+  }
+};
+export {
+  $e as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  je as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  qe as default
+};

package/dist/vue/KvContentfulImg.js

@@ -1,4 +1,4 @@
-import w from "./KvContentfulImg2.js";
+import w from "./KvContentfulImg.script.js";
 import { openBlock as e, createElementBlock as a, createElementVNode as h, Fragment as c, renderList as o, createCommentVNode as r, normalizeStyle as m, createTextVNode as f, toDisplayString as s } from "vue";
 import u from "../_virtual/_plugin-vue_export-helper.js";
 const b = {

package/dist/vue/KvCountdownTimer.js

@@ -1,4 +1,4 @@
-import o from "./KvCountdownTimer2.js";
+import o from "./KvCountdownTimer.script.js";
 import { openBlock as r, createElementBlock as n, toDisplayString as t, createCommentVNode as m } from "vue";
 import i from "../_virtual/_plugin-vue_export-helper.js";
 const c = { key: 0 };

package/dist/vue/KvDatePicker.js

@@ -1,4 +1,4 @@
-import h from "./KvDatePicker2.js";
+import h from "./KvDatePicker.script.js";
 import { resolveComponent as r, openBlock as l, createBlock as u, withCtx as c, createElementVNode as e, normalizeClass as v, createVNode as _, mergeProps as k, renderSlot as f, createElementBlock as x } from "vue";
 import "./KvDatePicker.css";
 import z from "../_virtual/_plugin-vue_export-helper.js";

package/dist/vue/KvExpandable.js

@@ -1,4 +1,4 @@
-import r from "./KvExpandable2.js";
+import r from "./KvExpandable.script.js";
 import { openBlock as t, createBlock as n, Transition as a, withCtx as c, renderSlot as f } from "vue";
 import i from "../_virtual/_plugin-vue_export-helper.js";
 function l(o, p, s, e, d, _) {

package/dist/vue/KvExpandableQuestion.js

@@ -1,4 +1,4 @@
-import _ from "./KvExpandableQuestion2.js";
+import _ from "./KvExpandableQuestion.script.js";
 import { resolveComponent as i, openBlock as l, createElementBlock as c, createElementVNode as e, toDisplayString as m, createVNode as s, withModifiers as f, withCtx as p, withDirectives as v, renderSlot as h, createCommentVNode as k, vShow as u } from "vue";
 import x from "../_virtual/_plugin-vue_export-helper.js";
 const g = { class: "tw-whitespace-normal" }, C = { class: "tw-text-subhead tw-text-left" }, b = { class: "tw-prose tw-pb-4 tw-pt-2" }, y = ["innerHTML"];

package/dist/vue/KvFlag.js

@@ -1,4 +1,4 @@
-import d from "./KvFlag2.js";
+import d from "./KvFlag.script.js";
 import { openBlock as a, createElementBlock as r, normalizeStyle as l, normalizeClass as s, createElementVNode as c, toDisplayString as o, createCommentVNode as n } from "vue";
 import "./KvFlag.css";
 import i from "../_virtual/_plugin-vue_export-helper.js";

package/dist/vue/KvFormAssemblyForm.js

@@ -1,97 +1,4 @@
-import { defineComponent as N, ref as a, computed as H, watchEffect as P, onMounted as Q, onUnmounted as B, openBlock as d, createElementBlock as s, createVNode as D, createCommentVNode as I } from "vue";
-import K from "./KvLoadingSpinner.js";
-const M = ["data-testid", "aria-busy"], T = {
-  key: 0,
-  class: "tw-w-full tw-flex tw-content-center tw-justify-center",
-  style: { "min-height": "200px" }
-}, U = ["src", "height", "title"], S = "https://kiva.tfaforms.net", z = /* @__PURE__ */ N({
-  __name: "KvFormAssemblyForm",
-  props: {
-    /**
-     * The numeric FormAssembly form id. The iframe is not rendered until this is set.
-     */
-    formAssemblyId: {
-      type: Number,
-      default: null
-    },
-    /**
-     * Additional query params to add to the form url, should include leading ?
-     * FormAssembly uses these to prefill fields. Callers that need tracking ids in the
-     * form are responsible for resolving them and merging them in here.
-     */
-    additionalQueryParams: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Accessible name for the embedded form iframe. Describe the form's purpose,
-     * e.g. "Newsletter signup form".
-     */
-    title: {
-      type: String,
-      default: "FormAssembly form"
-    }
-  },
-  emits: ["fa-form-loaded", "fa-form-submitted", "fa-form-closed"],
-  setup(c, { emit: L }) {
-    const V = (t) => Array.isArray(t) && typeof t[0] == "string" && typeof t[1] == "string", e = c, f = L, n = a(!0), m = a(null), u = a(null), R = H(() => e.formAssemblyId ? `kv-form-assembly-form-${e.formAssemblyId}` : "kv-form-assembly-form"), l = a(""), y = a(500), x = () => {
-      const r = new URLSearchParams((e.additionalQueryParams || "").replace(/^\?/, "")).toString();
-      return r ? `?${r}` : "";
-    }, $ = () => {
-      typeof window > "u" || !(e != null && e.formAssemblyId) || (l.value = `${S}/${e.formAssemblyId}${x()}`);
-    };
-    P(() => {
-      m.value && $();
-    });
-    const _ = () => {
-      n.value && (n.value = !1, f("fa-form-loaded"));
-    }, v = (t) => {
-      var p, w, b, h, A, k;
-      if (t.origin !== S) return;
-      const r = (p = u.value) == null ? void 0 : p.contentWindow;
-      if (r && t.source !== r) return;
-      const o = (w = t == null ? void 0 : t.data) == null ? void 0 : w.type;
-      if (o === "fa_frame_loaded" && _(), o === "fa_frame_data" || o === "fa_form_page_change" || o === "fa_form_submitted") {
-        const i = ((b = t == null ? void 0 : t.data) == null ? void 0 : b.frameHeight) ?? 300;
-        y.value = i + 30;
-      }
-      if (o === "fa_form_closed" && f("fa-form-closed"), o === "fa_form_submitted") {
-        const i = ((h = t == null ? void 0 : t.data) == null ? void 0 : h.analytics) ?? null, F = (A = t == null ? void 0 : t.data) == null ? void 0 : A.isValid, C = ((k = t == null ? void 0 : t.data) == null ? void 0 : k.selectedValues) ?? null, E = typeof F == "boolean" ? F : V(i);
-        f("fa-form-submitted", {
-          analytics: i,
-          selectedValues: C,
-          valid: E
-        });
-      }
-    };
-    return Q(() => {
-      window.addEventListener("message", v);
-    }), B(() => {
-      window.removeEventListener("message", v);
-    }), (t, r) => (d(), s("div", {
-      ref_key: "formContainerRef",
-      ref: m,
-      class: "kv-form-assembly-form tw-w-full",
-      "data-testid": R.value,
-      "aria-busy": n.value
-    }, [
-      n.value ? (d(), s("div", T, [
-        D(K, { class: "tw-self-center" })
-      ])) : I("", !0),
-      l.value ? (d(), s("iframe", {
-        key: 1,
-        ref_key: "iFrameRef",
-        ref: u,
-        class: "tw-mx-auto tw-w-full",
-        src: l.value,
-        height: y.value,
-        title: c.title,
-        frameborder: "0",
-        onLoad: _
-      }, null, 40, U)) : I("", !0)
-    ], 8, M));
-  }
-});
+import f from "./KvFormAssemblyForm.script.js";
 export {
-  z as default
+  f as default
 };

package/dist/vue/KvFormAssemblyForm.script.js

@@ -0,0 +1,97 @@
+import { defineComponent as N, ref as a, computed as H, watchEffect as P, onMounted as Q, onUnmounted as B, openBlock as d, createElementBlock as s, createVNode as D, createCommentVNode as I } from "vue";
+import K from "./KvLoadingSpinner.js";
+const M = ["data-testid", "aria-busy"], T = {
+  key: 0,
+  class: "tw-w-full tw-flex tw-content-center tw-justify-center",
+  style: { "min-height": "200px" }
+}, U = ["src", "height", "title"], S = "https://kiva.tfaforms.net", z = /* @__PURE__ */ N({
+  __name: "KvFormAssemblyForm",
+  props: {
+    /**
+     * The numeric FormAssembly form id. The iframe is not rendered until this is set.
+     */
+    formAssemblyId: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Additional query params to add to the form url, should include leading ?
+     * FormAssembly uses these to prefill fields. Callers that need tracking ids in the
+     * form are responsible for resolving them and merging them in here.
+     */
+    additionalQueryParams: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Accessible name for the embedded form iframe. Describe the form's purpose,
+     * e.g. "Newsletter signup form".
+     */
+    title: {
+      type: String,
+      default: "FormAssembly form"
+    }
+  },
+  emits: ["fa-form-loaded", "fa-form-submitted", "fa-form-closed"],
+  setup(c, { emit: L }) {
+    const V = (t) => Array.isArray(t) && typeof t[0] == "string" && typeof t[1] == "string", e = c, f = L, n = a(!0), m = a(null), u = a(null), R = H(() => e.formAssemblyId ? `kv-form-assembly-form-${e.formAssemblyId}` : "kv-form-assembly-form"), l = a(""), y = a(500), x = () => {
+      const r = new URLSearchParams((e.additionalQueryParams || "").replace(/^\?/, "")).toString();
+      return r ? `?${r}` : "";
+    }, $ = () => {
+      typeof window > "u" || !(e != null && e.formAssemblyId) || (l.value = `${S}/${e.formAssemblyId}${x()}`);
+    };
+    P(() => {
+      m.value && $();
+    });
+    const _ = () => {
+      n.value && (n.value = !1, f("fa-form-loaded"));
+    }, v = (t) => {
+      var p, w, b, h, A, k;
+      if (t.origin !== S) return;
+      const r = (p = u.value) == null ? void 0 : p.contentWindow;
+      if (r && t.source !== r) return;
+      const o = (w = t == null ? void 0 : t.data) == null ? void 0 : w.type;
+      if (o === "fa_frame_loaded" && _(), o === "fa_frame_data" || o === "fa_form_page_change" || o === "fa_form_submitted") {
+        const i = ((b = t == null ? void 0 : t.data) == null ? void 0 : b.frameHeight) ?? 300;
+        y.value = i + 30;
+      }
+      if (o === "fa_form_closed" && f("fa-form-closed"), o === "fa_form_submitted") {
+        const i = ((h = t == null ? void 0 : t.data) == null ? void 0 : h.analytics) ?? null, F = (A = t == null ? void 0 : t.data) == null ? void 0 : A.isValid, C = ((k = t == null ? void 0 : t.data) == null ? void 0 : k.selectedValues) ?? null, E = typeof F == "boolean" ? F : V(i);
+        f("fa-form-submitted", {
+          analytics: i,
+          selectedValues: C,
+          valid: E
+        });
+      }
+    };
+    return Q(() => {
+      window.addEventListener("message", v);
+    }), B(() => {
+      window.removeEventListener("message", v);
+    }), (t, r) => (d(), s("div", {
+      ref_key: "formContainerRef",
+      ref: m,
+      class: "kv-form-assembly-form tw-w-full",
+      "data-testid": R.value,
+      "aria-busy": n.value
+    }, [
+      n.value ? (d(), s("div", T, [
+        D(K, { class: "tw-self-center" })
+      ])) : I("", !0),
+      l.value ? (d(), s("iframe", {
+        key: 1,
+        ref_key: "iFrameRef",
+        ref: u,
+        class: "tw-mx-auto tw-w-full",
+        src: l.value,
+        height: y.value,
+        title: c.title,
+        frameborder: "0",
+        onLoad: _
+      }, null, 40, U)) : I("", !0)
+    ], 8, M));
+  }
+});
+export {
+  z as default
+};

package/dist/vue/KvGrid.js

@@ -1,4 +1,4 @@
-import o from "./KvGrid2.js";
+import o from "./KvGrid.script.js";
 import { openBlock as r, createBlock as a, resolveDynamicComponent as n, withCtx as s, renderSlot as c } from "vue";
 import p from "../_virtual/_plugin-vue_export-helper.js";
 function d(t, f, e, i, l, m) {

package/dist/vue/KvIconBag.js

@@ -1,4 +1,4 @@
-import c from "./KvIconBag2.js";
+import c from "./KvIconBag.script.js";
 import { openBlock as n, createElementBlock as s, createElementVNode as e, toDisplayString as i, createCommentVNode as l } from "vue";
 import r from "../_virtual/_plugin-vue_export-helper.js";
 const d = {