@kiva/kv-components 10.5.1 → 10.6.1

package/dist/vue/KvIntroductionLoanCard.js

@@ -1,223 +1,250 @@
-import a from "graphql-tag";
-import F from "numeral";
-import { LOAN_CALLOUTS_FRAGMENT as k, LOAN_GEOCODE_FRAGMENT as B, LOAN_PROGRESS_FRAGMENT as E, loanCardComputedProperties as G, loanCardMethods as b, useLocationTruncation as I } from "../utils/loanCard.js";
-import S from "./KvLoanBookmark2.js";
-import D from "./KvLoanUse2.js";
-import P from "./KvBorrowerImage.js";
-import U from "./KvLoanProgressGroup.js";
-import $ from "./KvLoanCallouts.js";
-import w from "./KvLoanTag2.js";
-import V from "./KvMaterialIcon.js";
-import W from "./KvLoadingPlaceholder.js";
-import q from "./KvFlag.js";
-import H from "./KvTooltip.js";
-import { KV_LOAN_BOOKMARK_FRAGMENT as r } from "./KvLoanBookmark.js";
-import { KV_LOAN_TAG_FRAGMENT as j } from "./KvLoanTag.js";
-import { KV_LOAN_USE_FRAGMENT as x } from "./KvLoanUse.js";
-const mo = a`
-	fragment KvIntroductionLoanCard on LoanBasic {
-		id
-		image {
-			id
-			hash # for imageHash
-		}
-		lenders(limit: 0) {
-			totalCount # for lendersNumber
-		}
-		loanFundraisingInfo {
-			id
-			fundedAmount # for amountLent
-		}
-		name # for borrowerName
-		status # for isFunded
-		...KvLoanBookmark
-		...KvLoanTag
-		...KvLoanUse
-		...LoanCallouts
-		...LoanGeocode
-		...LoanProgress
-	}
-	${r}
-	${j}
-	${x}
-	${k}
-	${B}
-	${E}
-`, fo = a`
-	fragment KvIntroductionLoanCardUser on LoanBasic {
-		id
-		...KvLoanBookmark
-	}
-	${r}
-`, co = {
-  name: "KvIntroductionLoanCard",
-  components: {
-    KvBorrowerImage: P,
-    KvLoadingPlaceholder: W,
-    KvLoanUse: D,
-    KvLoanProgressGroup: U,
-    KvMaterialIcon: V,
-    KvLoanTag: w,
-    KvLoanCallouts: $,
-    KvFlag: q,
-    KvLoanBookmark: S,
-    KvTooltip: H
-  },
-  props: {
-    loanId: {
-      type: Number,
-      default: void 0
-    },
-    loan: {
-      type: Object,
-      default: null
-    },
-    customLoanDetails: {
-      type: Boolean,
-      default: !1
-    },
-    categoryPageName: {
-      type: String,
-      default: ""
-    },
-    customCallouts: {
-      type: Array,
-      default: () => []
-    },
-    kvTrackFunction: {
-      type: Function,
-      required: !0
-    },
-    photoPath: {
-      type: String,
-      required: !0
-    },
-    errorMsg: {
-      type: String,
-      default: ""
-    },
-    externalLinks: {
-      type: Boolean,
-      default: !1
-    },
-    route: {
-      type: Object,
-      default: void 0
-    },
-    useFullWidth: {
-      type: Boolean,
-      default: !1
-    },
-    isVisitor: {
-      type: Boolean,
-      default: !0
-    },
-    isBookmarked: {
-      type: Boolean,
-      default: !1
-    },
-    customHref: {
-      type: String,
-      default: ""
-    },
-    enableMultiMatching: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "toggle-bookmark"
-  ],
-  setup(o, { emit: t }) {
-    const {
-      allDataLoaded: e,
-      borrowerName: n,
-      city: i,
-      countryName: s,
-      countryCode: u,
-      distributionModel: l,
-      formattedLocation: m,
-      fundraisingPercent: d,
-      hasProgressData: f,
-      imageHash: c,
-      isLoading: p,
-      loanAmount: L,
-      loanBorrowerCount: g,
-      loanCallouts: A,
-      loanStatus: h,
-      loanUse: N,
-      mdiMapMarker: _,
-      readMorePath: v,
-      state: K,
-      tag: y,
-      unreservedAmount: C,
-      sharesAvailable: O
-    } = G(o, !0), {
-      clickReadMore: T
-    } = b(o, t), {
-      locationRef: M,
-      isLocationTruncated: R
-    } = I();
-    return {
-      allDataLoaded: e,
-      borrowerName: n,
-      city: i,
-      countryName: s,
-      countryCode: u,
-      distributionModel: l,
-      formattedLocation: m,
-      fundraisingPercent: d,
-      hasProgressData: f,
-      imageHash: c,
-      isLoading: p,
-      loanAmount: L,
-      loanBorrowerCount: g,
-      loanCallouts: A,
-      loanStatus: h,
-      loanUse: N,
-      mdiMapMarker: _,
-      readMorePath: v,
-      state: K,
-      tag: y,
-      unreservedAmount: C,
-      sharesAvailable: O,
-      clickReadMore: T,
-      locationRef: M,
-      isLocationTruncated: R
-    };
-  },
-  computed: {
-    cardWidth() {
-      return this.useFullWidth ? "100%" : "20.5rem";
-    },
-    imageAspectRatio() {
-      return 5 / 8;
-    },
-    imageDefaultWidth() {
-      return 480;
-    },
-    imageSizes() {
-      return [
-        { width: this.imageDefaultWidth, viewSize: 375 }
-      ];
-    },
-    lendersNumber() {
-      var o, t;
-      return ((t = (o = this.loan) == null ? void 0 : o.lenders) == null ? void 0 : t.totalCount) ?? 0;
-    },
-    amountLent() {
-      var t, e;
-      const o = ((e = (t = this.loan) == null ? void 0 : t.loanFundraisingInfo) == null ? void 0 : e.fundedAmount) ?? 0;
-      return F(o).format("$0,0");
-    },
-    isFunded() {
-      var o;
-      return ((o = this.loan) == null ? void 0 : o.status) === "funded" || this.hasProgressData && !this.sharesAvailable;
-    }
-  }
+import P from "./KvIntroductionLoanCard.script.js";
+import { KV_INTRODUCTION_LOAN_CARD_FRAGMENT as ot, KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT as at } from "./KvIntroductionLoanCard.script.js";
+import { resolveComponent as i, openBlock as e, createElementBlock as n, normalizeStyle as R, normalizeClass as _, createElementVNode as d, createBlock as o, resolveDynamicComponent as g, withCtx as w, createVNode as s, Suspense as A, toDisplayString as f, createTextVNode as p, createCommentVNode as c, Fragment as T, renderList as I } from "vue";
+import "./KvIntroductionLoanCard.css";
+import B from "../_virtual/_plugin-vue_export-helper.js";
+const D = { class: "tw-grow" }, z = { class: "loan-card-active-hover" }, V = {
+  key: 1,
+  style: { height: "11rem" },
+  class: "tw-relative tw-overflow-hidden"
+}, O = { key: 0 }, S = {
+  class: "tw-absolute tw-bottom-1 tw-left-1 tw-text-primary tw-bg-white tw-rounded tw-p-1 tw-mb-0 tw-text-label tw-flex tw-items-center tw-h-3 !tw-capitalize",
+  style: { padding: "2px 6px", "max-width": "calc(100% - 1rem)" }
+}, E = ["id"], F = {
+  key: 3,
+  class: "tw-flex tw-justify-center tw-gap-2"
+}, U = {
+  key: 0,
+  class: "tw-w-full",
+  style: { height: "5.5rem" }
+}, W = { key: 1 }, j = { class: "tw-px-2" }, K = {
+  key: 0,
+  class: "tw-w-full tw-pr-1"
+}, G = { class: "tw-flex tw-justify-between" }, H = {
+  key: 2,
+  class: "tw-bg-eco-green-1 tw-text-action tw-text-center tw-py-1.5",
+  style: { "font-weight": "bold", "font-size": "13px", "border-radius": "8px" }
 };
+function q(k, a, m, t, J, h) {
+  const r = i("kv-loading-placeholder"), u = i("kv-borrower-image"), y = i("kv-flag"), b = i("kv-tooltip"), v = i("kv-loan-bookmark"), x = i("kv-loan-callouts"), C = i("kv-loan-use"), L = i("kv-loan-progress-group"), M = i("kv-loan-tag");
+  return e(), n("div", {
+    class: _(["tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-2", { "tw-pointer-events-none": t.isLoading }]),
+    "data-testid": "loan-card",
+    style: R([{ "box-shadow": "0px 4px 8px 0px rgba(0, 0, 0, 0.38)" }, { minWidth: "230px", maxWidth: h.cardWidth }])
+  }, [
+    d("div", D, [
+      d("div", z, [
+        t.isLoading ? (e(), o(r, {
+          key: 0,
+          class: "tw-w-full tw-rounded-t",
+          style: { height: "11rem" }
+        })) : (e(), n("div", V, [
+          (e(), o(g(t.tag), {
+            to: t.readMorePath,
+            href: t.readMorePath,
+            class: "tw-flex",
+            "aria-label": "Borrower image",
+            onClick: a[0] || (a[0] = (l) => t.clickReadMore("Photo", l))
+          }, {
+            default: w(() => [
+              s(u, {
+                class: "tw-relative tw-w-full tw-bg-black tw-rounded-t borrower-image tw-bg-clip-content",
+                alt: `Photo of ${t.borrowerName}`,
+                "aspect-ratio": h.imageAspectRatio,
+                "default-image": { width: h.imageDefaultWidth },
+                hash: t.imageHash,
+                images: h.imageSizes,
+                "photo-path": m.photoPath
+              }, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
+              t.countryName ? (e(), n("div", O, [
+                d("p", S, [
+                  (e(), o(A, null, {
+                    default: w(() => [
+                      s(y, {
+                        class: "tw-ml-0.5 tw-mr-1 tw-flex-shrink-0",
+                        country: t.countryCode,
+                        name: t.countryName,
+                        "width-override": "16px",
+                        "hide-border": ""
+                      }, null, 8, ["country", "name"])
+                    ]),
+                    _: 1
+                  })),
+                  d("span", {
+                    id: `loan-location-${m.loanId}`,
+                    ref: "locationRef",
+                    class: "tw-truncate tw-min-w-0",
+                    style: { "margin-top": "0.125rem" }
+                  }, f(t.formattedLocation), 9, E),
+                  t.isLocationTruncated ? (e(), o(b, {
+                    key: 0,
+                    controller: `loan-location-${m.loanId}`,
+                    "max-width": "250px"
+                  }, {
+                    default: w(() => [
+                      p(f(t.formattedLocation), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["controller"])) : c("", !0)
+                ])
+              ])) : c("", !0)
+            ]),
+            _: 1
+          }, 8, ["to", "href"])),
+          m.isVisitor ? c("", !0) : (e(), o(v, {
+            key: 0,
+            "loan-id": m.loanId,
+            "is-bookmarked": m.isBookmarked,
+            class: "loan-bookmark tw-absolute tw-right-1.5 tw-top-0",
+            "data-testid": "loan-card-bookmark",
+            onToggleBookmark: a[1] || (a[1] = (l) => k.$emit("toggle-bookmark"))
+          }, null, 8, ["loan-id", "is-bookmarked"]))
+        ])),
+        t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(r, {
+          key: 2,
+          class: "tw-mt-1 tw-mx-auto",
+          style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
+        })) : c("", !0),
+        (e(), o(g(t.tag), {
+          to: t.readMorePath,
+          href: t.readMorePath,
+          "aria-label": "Borrower name",
+          class: "!tw-text-primary tw-no-underline",
+          onClick: a[2] || (a[2] = (l) => t.clickReadMore("Name", l))
+        }, {
+          default: w(() => [
+            d("h3", {
+              class: _(["loan-card-name tw-text-title", { "tw-text-center": t.borrowerName.length < 20 }]),
+              style: { "font-size": "28px" }
+            }, f(t.borrowerName), 3)
+          ]),
+          _: 1
+        }, 8, ["to", "href"])),
+        t.isLoading ? (e(), n("div", F, [
+          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(r, {
+            key: 0,
+            class: "tw-mt-0.5 tw-mb-1",
+            style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
+          })) : c("", !0),
+          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(r, {
+            key: 1,
+            class: "tw-mt-0.5 tw-mb-1",
+            style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
+          })) : c("", !0),
+          t.isLoading || typeof t.loanCallouts > "u" ? (e(), o(r, {
+            key: 2,
+            class: "tw-mt-0.5 tw-mb-1",
+            style: { width: "20%", height: "1.65rem", "border-radius": "500rem" }
+          })) : c("", !0)
+        ])) : (e(), o(g(t.tag), {
+          key: 4,
+          to: t.readMorePath,
+          href: t.readMorePath,
+          class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline tw-justify-center",
+          "aria-label": "Loan tag",
+          onClick: a[3] || (a[3] = (l) => t.clickReadMore("Tag", l))
+        }, {
+          default: w(() => [
+            s(x, {
+              callouts: t.loanCallouts,
+              "add-bg-color": !1,
+              class: "loan-callouts"
+            }, null, 8, ["callouts"])
+          ]),
+          _: 1
+        }, 8, ["to", "href"])),
+        (e(), o(g(t.tag), {
+          to: t.readMorePath,
+          href: t.readMorePath,
+          class: "loan-card-use tw-text-primary tw-no-underline",
+          "aria-label": "Loan use",
+          onClick: a[4] || (a[4] = (l) => t.clickReadMore("Use", l))
+        }, {
+          default: w(() => [
+            d("div", {
+              class: _(["tw-pt-0.5 tw-px-2", { "tw-mb-1.5": !t.isLoading }])
+            }, [
+              t.isLoading ? (e(), n("div", U, [
+                (e(!0), n(T, null, I([...Array(3)], (l, N) => (e(), n("div", {
+                  key: N,
+                  class: "tw-h-2 tw-mb-1"
+                }, [
+                  s(r)
+                ]))), 128))
+              ])) : (e(), n("div", W, [
+                s(C, {
+                  use: t.loanUse,
+                  "loan-amount": t.loanAmount,
+                  status: t.loanStatus,
+                  "borrower-count": t.loanBorrowerCount,
+                  name: t.borrowerName,
+                  "distribution-model": t.distributionModel,
+                  "hide-loan-amount": "",
+                  class: "!tw-line-clamp-3"
+                }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model"])
+              ]))
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["to", "href"]))
+      ])
+    ]),
+    d("div", j, [
+      t.hasProgressData ? c("", !0) : (e(), n("div", K, [
+        d("div", G, [
+          s(r, {
+            class: "tw-mb-0.5",
+            style: { width: "20%", height: "1.3rem" }
+          }),
+          s(r, {
+            class: "tw-mb-0.5",
+            style: { width: "20%", height: "1.3rem" }
+          })
+        ]),
+        s(r, {
+          class: "tw-rounded",
+          style: { width: "100%", height: "0.5rem" }
+        })
+      ])),
+      d("div", null, [
+        t.sharesAvailable ? (e(), o(g(t.tag), {
+          key: 0,
+          to: t.readMorePath,
+          href: t.readMorePath,
+          class: "loan-card-progress tw-mt-1",
+          "aria-label": "Loan progress",
+          onClick: a[5] || (a[5] = (l) => t.clickReadMore("Progress", l))
+        }, {
+          default: w(() => [
+            s(L, {
+              id: "loanProgress",
+              "money-left": t.unreservedAmount,
+              "amount-goal": t.loanAmount,
+              "progress-percent": t.fundraisingPercent,
+              class: "tw-text-secondary"
+            }, null, 8, ["money-left", "amount-goal", "progress-percent"])
+          ]),
+          _: 1
+        }, 8, ["to", "href"])) : c("", !0)
+      ]),
+      t.isLoading ? (e(), o(r, {
+        key: 1,
+        class: "tw-rounded tw-mx-auto tw-mt-2",
+        style: { width: "9rem", height: "1rem" }
+      })) : h.isFunded ? (e(), n("div", H, " 🎉 Fully funded! ")) : (e(), o(M, {
+        key: 3,
+        loan: m.loan,
+        "use-expanded-styles": !0,
+        "enable-multi-matching": m.enableMultiMatching,
+        style: { "font-size": "15px" },
+        class: "tw-text-center tw-pt-2"
+      }, null, 8, ["loan", "enable-multi-matching"]))
+    ])
+  ], 6);
+}
+const $ = /* @__PURE__ */ B(P, [["render", q], ["__scopeId", "data-v-2e03cf82"]]);
 export {
-  mo as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
-  fo as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
-  co as default
+  ot as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  at as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  $ as default
 };

package/dist/vue/KvIntroductionLoanCard.script.js

@@ -0,0 +1,223 @@
+import a from "graphql-tag";
+import F from "numeral";
+import { LOAN_CALLOUTS_FRAGMENT as k, LOAN_GEOCODE_FRAGMENT as B, LOAN_PROGRESS_FRAGMENT as E, loanCardComputedProperties as G, loanCardMethods as b, useLocationTruncation as I } from "../utils/loanCard.js";
+import S from "./KvLoanBookmark.js";
+import D from "./KvLoanUse.js";
+import P from "./KvBorrowerImage.js";
+import U from "./KvLoanProgressGroup.js";
+import $ from "./KvLoanCallouts.js";
+import w from "./KvLoanTag.js";
+import V from "./KvMaterialIcon.js";
+import W from "./KvLoadingPlaceholder.js";
+import q from "./KvFlag.js";
+import H from "./KvTooltip.js";
+import { KV_LOAN_BOOKMARK_FRAGMENT as r } from "./KvLoanBookmark.script.js";
+import { KV_LOAN_TAG_FRAGMENT as j } from "./KvLoanTag.script.js";
+import { KV_LOAN_USE_FRAGMENT as x } from "./KvLoanUse.script.js";
+const mo = a`
+	fragment KvIntroductionLoanCard on LoanBasic {
+		id
+		image {
+			id
+			hash # for imageHash
+		}
+		lenders(limit: 0) {
+			totalCount # for lendersNumber
+		}
+		loanFundraisingInfo {
+			id
+			fundedAmount # for amountLent
+		}
+		name # for borrowerName
+		status # for isFunded
+		...KvLoanBookmark
+		...KvLoanTag
+		...KvLoanUse
+		...LoanCallouts
+		...LoanGeocode
+		...LoanProgress
+	}
+	${r}
+	${j}
+	${x}
+	${k}
+	${B}
+	${E}
+`, fo = a`
+	fragment KvIntroductionLoanCardUser on LoanBasic {
+		id
+		...KvLoanBookmark
+	}
+	${r}
+`, co = {
+  name: "KvIntroductionLoanCard",
+  components: {
+    KvBorrowerImage: P,
+    KvLoadingPlaceholder: W,
+    KvLoanUse: D,
+    KvLoanProgressGroup: U,
+    KvMaterialIcon: V,
+    KvLoanTag: w,
+    KvLoanCallouts: $,
+    KvFlag: q,
+    KvLoanBookmark: S,
+    KvTooltip: H
+  },
+  props: {
+    loanId: {
+      type: Number,
+      default: void 0
+    },
+    loan: {
+      type: Object,
+      default: null
+    },
+    customLoanDetails: {
+      type: Boolean,
+      default: !1
+    },
+    categoryPageName: {
+      type: String,
+      default: ""
+    },
+    customCallouts: {
+      type: Array,
+      default: () => []
+    },
+    kvTrackFunction: {
+      type: Function,
+      required: !0
+    },
+    photoPath: {
+      type: String,
+      required: !0
+    },
+    errorMsg: {
+      type: String,
+      default: ""
+    },
+    externalLinks: {
+      type: Boolean,
+      default: !1
+    },
+    route: {
+      type: Object,
+      default: void 0
+    },
+    useFullWidth: {
+      type: Boolean,
+      default: !1
+    },
+    isVisitor: {
+      type: Boolean,
+      default: !0
+    },
+    isBookmarked: {
+      type: Boolean,
+      default: !1
+    },
+    customHref: {
+      type: String,
+      default: ""
+    },
+    enableMultiMatching: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "toggle-bookmark"
+  ],
+  setup(o, { emit: t }) {
+    const {
+      allDataLoaded: e,
+      borrowerName: n,
+      city: i,
+      countryName: s,
+      countryCode: u,
+      distributionModel: l,
+      formattedLocation: m,
+      fundraisingPercent: d,
+      hasProgressData: f,
+      imageHash: c,
+      isLoading: p,
+      loanAmount: L,
+      loanBorrowerCount: g,
+      loanCallouts: A,
+      loanStatus: h,
+      loanUse: N,
+      mdiMapMarker: _,
+      readMorePath: v,
+      state: K,
+      tag: y,
+      unreservedAmount: C,
+      sharesAvailable: O
+    } = G(o, !0), {
+      clickReadMore: T
+    } = b(o, t), {
+      locationRef: M,
+      isLocationTruncated: R
+    } = I();
+    return {
+      allDataLoaded: e,
+      borrowerName: n,
+      city: i,
+      countryName: s,
+      countryCode: u,
+      distributionModel: l,
+      formattedLocation: m,
+      fundraisingPercent: d,
+      hasProgressData: f,
+      imageHash: c,
+      isLoading: p,
+      loanAmount: L,
+      loanBorrowerCount: g,
+      loanCallouts: A,
+      loanStatus: h,
+      loanUse: N,
+      mdiMapMarker: _,
+      readMorePath: v,
+      state: K,
+      tag: y,
+      unreservedAmount: C,
+      sharesAvailable: O,
+      clickReadMore: T,
+      locationRef: M,
+      isLocationTruncated: R
+    };
+  },
+  computed: {
+    cardWidth() {
+      return this.useFullWidth ? "100%" : "20.5rem";
+    },
+    imageAspectRatio() {
+      return 5 / 8;
+    },
+    imageDefaultWidth() {
+      return 480;
+    },
+    imageSizes() {
+      return [
+        { width: this.imageDefaultWidth, viewSize: 375 }
+      ];
+    },
+    lendersNumber() {
+      var o, t;
+      return ((t = (o = this.loan) == null ? void 0 : o.lenders) == null ? void 0 : t.totalCount) ?? 0;
+    },
+    amountLent() {
+      var t, e;
+      const o = ((e = (t = this.loan) == null ? void 0 : t.loanFundraisingInfo) == null ? void 0 : e.fundedAmount) ?? 0;
+      return F(o).format("$0,0");
+    },
+    isFunded() {
+      var o;
+      return ((o = this.loan) == null ? void 0 : o.status) === "funded" || this.hasProgressData && !this.sharesAvailable;
+    }
+  }
+};
+export {
+  mo as KV_INTRODUCTION_LOAN_CARD_FRAGMENT,
+  fo as KV_INTRODUCTION_LOAN_CARD_USER_FRAGMENT,
+  co as default
+};

package/dist/vue/KvLendAmountButton.js

@@ -1,4 +1,4 @@
-import e from "./KvLendAmountButton2.js";
+import e from "./KvLendAmountButton.script.js";
 import { resolveComponent as n, openBlock as r, createBlock as c, withCtx as a, createTextVNode as _, toDisplayString as p } from "vue";
 import m from "../_virtual/_plugin-vue_export-helper.js";
 function s(u, d, f, i, l, t) {