@kiva/kv-components 10.4.1 → 10.5.1

package/dist/vue/KvWideLoanCard.js

@@ -1,209 +1,235 @@
-import D from "./KvWideLoanCard2.js";
-import { KV_WIDE_LOAN_CARD_FRAGMENT as ee, KV_WIDE_LOAN_CARD_USER_FRAGMENT as te } from "./KvWideLoanCard2.js";
-import { resolveComponent as i, openBlock as o, createElementBlock as r, normalizeClass as f, createElementVNode as s, createBlock as n, resolveDynamicComponent as k, withCtx as m, createVNode as d, toDisplayString as h, createTextVNode as N, createCommentVNode as w, Fragment as R, renderList as V } from "vue";
-import "./KvWideLoanCard.css";
-import B from "../_virtual/_plugin-vue_export-helper.js";
-const T = { class: "loan-card-active-hover tw-flex-1 tw-min-w-[275px] md:tw-min-w-[320px] md:tw-max-w-[320px]" }, E = {
-  key: 1,
-  class: "tw-relative tw-w-full"
-}, I = { 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",
-  style: { padding: "2px 6px", "text-transform": "capitalize", "max-width": "calc(100% - 1rem)" }
-}, F = ["id"], W = { class: "tw-flex tw-flex-col tw-flex-1 tw-px-1" }, z = { class: "tw-hidden md:tw-inline-block tw-text-title" }, K = { class: "tw-pt-1" }, U = {
-  key: 0,
-  class: "tw-w-full",
-  style: { height: "5.5rem" }
-}, G = { key: 1 }, O = { class: "tw-flex tw-flex-row tw-justify-between tw-gap-1 md:tw-gap-3" }, j = {
-  key: 0,
-  class: "tw-w-full tw-pt-1 tw-pr-1"
+import o from "graphql-tag";
+import { LOAN_CALLOUTS_FRAGMENT as M, LOAN_GEOCODE_FRAGMENT as R, LOAN_PROGRESS_FRAGMENT as B, loanCardComputedProperties as S, loanCardMethods as k, useLocationTruncation as w } from "../utils/loanCard.js";
+import O from "./KvLoanUse2.js";
+import D from "./KvBorrowerImage.js";
+import F from "./KvLoanProgressGroup.js";
+import G from "./KvLoanCallouts.js";
+import b from "./KvLendCta2.js";
+import P from "./KvLoanBookmark2.js";
+import U from "./KvLoanTag2.js";
+import V from "./KvMaterialIcon.js";
+import W from "./KvLoadingPlaceholder.js";
+import $ from "./KvTooltip.js";
+import { KV_LEND_CTA_FRAGMENT as z, KV_LEND_CTA_USER_FRAGMENT as I } from "./KvLendCta.js";
+import { KV_LOAN_TAG_FRAGMENT as q } from "./KvLoanTag.js";
+import { KV_LOAN_USE_FRAGMENT as x } from "./KvLoanUse.js";
+import { KV_LOAN_BOOKMARK_FRAGMENT as H } from "./KvLoanBookmark.js";
+const me = o`
+	fragment KvWideLoanCard on LoanBasic {
+		id
+		image {
+			id
+			hash # for imageHash
+		}
+		name # for borrowerName
+		...KvLendCta
+		...KvLoanTag
+		...KvLoanUse
+		...LoanCallouts
+		...LoanGeocode
+		...LoanProgress
+	}
+	${z}
+	${q}
+	${x}
+	${M}
+	${R}
+	${B}
+`, ue = o`
+	fragment KvWideLoanCardUser on LoanBasic {
+		id
+		...KvLendCtaUser
+		...KvLoanBookmark
+	}
+	${I}
+	${H}
+`, fe = {
+  name: "KvWideLoanCard",
+  components: {
+    KvBorrowerImage: D,
+    KvLoadingPlaceholder: W,
+    KvLoanUse: O,
+    KvLoanProgressGroup: F,
+    KvMaterialIcon: V,
+    KvLendCta: b,
+    KvLoanTag: U,
+    KvLoanCallouts: G,
+    KvLoanBookmark: P,
+    KvTooltip: $
+  },
+  props: {
+    loanId: {
+      type: Number,
+      default: void 0
+    },
+    loan: {
+      type: Object,
+      default: null
+    },
+    customLoanDetails: {
+      type: Boolean,
+      default: !1
+    },
+    showTags: {
+      type: Boolean,
+      default: !1
+    },
+    categoryPageName: {
+      type: String,
+      default: ""
+    },
+    enableFiveDollarsNotes: {
+      type: Boolean,
+      default: !1
+    },
+    isAdding: {
+      type: Boolean,
+      default: !1
+    },
+    isVisitor: {
+      type: Boolean,
+      default: !0
+    },
+    basketItems: {
+      type: Array,
+      default: () => []
+    },
+    isBookmarked: {
+      type: Boolean,
+      default: !1
+    },
+    kvTrackFunction: {
+      type: Function,
+      required: !0
+    },
+    photoPath: {
+      type: String,
+      required: !0
+    },
+    showViewLoan: {
+      type: Boolean,
+      default: !1
+    },
+    externalLinks: {
+      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: () => []
+    },
+    customHref: {
+      type: String,
+      default: ""
+    },
+    enableMultiMatching: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "toggle-bookmark",
+    "add-to-basket"
+  ],
+  setup(e, { emit: a }) {
+    const {
+      allDataLoaded: t,
+      borrowerName: r,
+      city: i,
+      countryName: n,
+      distributionModel: l,
+      formattedLocation: d,
+      fundraisingPercent: s,
+      hasProgressData: m,
+      imageHash: u,
+      isLoading: f,
+      loanAmount: p,
+      loanBorrowerCount: c,
+      loanCallouts: L,
+      loanStatus: g,
+      loanUse: v,
+      mdiMapMarker: _,
+      readMorePath: A,
+      state: y,
+      tag: K,
+      unreservedAmount: N,
+      sharesAvailable: h
+    } = S(e), {
+      clickReadMore: C
+    } = k(e, a), {
+      locationRef: T,
+      isLocationTruncated: E
+    } = w();
+    return {
+      allDataLoaded: t,
+      borrowerName: r,
+      city: i,
+      countryName: n,
+      distributionModel: l,
+      formattedLocation: d,
+      fundraisingPercent: s,
+      hasProgressData: m,
+      imageHash: u,
+      isLoading: f,
+      loanAmount: p,
+      loanBorrowerCount: c,
+      loanCallouts: L,
+      loanStatus: g,
+      loanUse: v,
+      mdiMapMarker: _,
+      readMorePath: A,
+      state: y,
+      tag: K,
+      unreservedAmount: N,
+      sharesAvailable: h,
+      clickReadMore: C,
+      locationRef: T,
+      isLocationTruncated: E
+    };
+  },
+  computed: {
+    cardWidth() {
+      return "374px";
+    },
+    imageAspectRatio() {
+      return 1;
+    },
+    imageDefaultWidth() {
+      return 320;
+    },
+    imageSizes() {
+      return [
+        { width: this.imageDefaultWidth, viewSize: 1024 },
+        { width: this.imageDefaultWidth, viewSize: 768 },
+        { width: 416, viewSize: 480 },
+        { width: 374, viewSize: 414 },
+        { width: 335, viewSize: 375 }
+      ];
+    }
+  }
 };
-function H(_, a, t, e, q, g) {
-  const c = i("kv-loading-placeholder"), v = i("kv-borrower-image"), u = i("kv-material-icon"), b = i("kv-tooltip"), x = i("kv-loan-bookmark"), y = i("kv-loan-tag"), L = i("kv-loan-use"), M = i("kv-loan-callouts"), C = i("kv-loan-progress-group"), A = i("kv-lend-cta");
-  return o(), r("div", {
-    class: f(["tw-flex tw-flex-row tw-flex-wrap tw-bg-white tw-rounded tw-w-full tw-pb-1 tw-p-1 tw-gap-1 tw-items-center", { "tw-pointer-events-none": e.isLoading }]),
-    "data-testid": "loan-card",
-    style: { "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }
-  }, [
-    s("div", T, [
-      e.isLoading ? (o(), n(c, {
-        key: 0,
-        class: "tw-mb-1 tw-w-full tw-rounded",
-        style: { height: "15rem" }
-      })) : (o(), r("div", E, [
-        (o(), n(k(e.tag), {
-          to: e.readMorePath,
-          href: e.readMorePath,
-          class: "tw-flex",
-          "aria-label": "Borrower image",
-          onClick: a[0] || (a[0] = (l) => e.clickReadMore("Photo", l))
-        }, {
-          default: m(() => [
-            d(v, {
-              class: "tw-relative tw-w-full tw-bg-black tw-rounded-sm tw-bg-clip-content",
-              alt: `Photo of ${e.borrowerName}`,
-              "aspect-ratio": g.imageAspectRatio,
-              "default-image": { width: g.imageDefaultWidth },
-              hash: e.imageHash,
-              images: g.imageSizes,
-              "photo-path": t.photoPath
-            }, null, 8, ["alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
-            e.countryName ? (o(), r("div", I, [
-              s("p", S, [
-                d(u, {
-                  class: "tw-h-2 tw-w-2 tw-flex-shrink-0",
-                  icon: e.mdiMapMarker
-                }, null, 8, ["icon"]),
-                s("span", {
-                  id: `loan-location-${t.loanId}`,
-                  ref: "locationRef",
-                  class: "tw-truncate tw-min-w-0",
-                  style: { "margin-top": "0.125rem" }
-                }, h(e.formattedLocation), 9, F),
-                e.isLocationTruncated ? (o(), n(b, {
-                  key: 0,
-                  controller: `loan-location-${t.loanId}`,
-                  "max-width": "250px"
-                }, {
-                  default: m(() => [
-                    N(h(e.formattedLocation), 1)
-                  ]),
-                  _: 1
-                }, 8, ["controller"])) : w("", !0)
-              ])
-            ])) : w("", !0)
-          ]),
-          _: 1
-        }, 8, ["to", "href"])),
-        t.isVisitor ? w("", !0) : (o(), n(x, {
-          key: 0,
-          "loan-id": t.loanId,
-          "is-bookmarked": t.isBookmarked,
-          class: "tw-absolute tw-right-1",
-          style: { top: "-6px" },
-          "data-testid": "loan-card-bookmark",
-          onToggleBookmark: a[1] || (a[1] = (l) => _.$emit("toggle-bookmark"))
-        }, null, 8, ["loan-id", "is-bookmarked"]))
-      ]))
-    ]),
-    s("div", W, [
-      s("h3", z, h(e.borrowerName), 1),
-      (o(), n(k(e.tag), {
-        to: e.readMorePath,
-        href: e.readMorePath,
-        class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline",
-        "aria-label": "Loan tag",
-        onClick: a[2] || (a[2] = (l) => e.clickReadMore("Tag", l))
-      }, {
-        default: m(() => [
-          t.showTags && !e.isLoading ? (o(), n(y, {
-            key: 0,
-            loan: t.loan,
-            "enable-multi-matching": t.enableMultiMatching
-          }, null, 8, ["loan", "enable-multi-matching"])) : w("", !0)
-        ]),
-        _: 1
-      }, 8, ["to", "href"])),
-      (o(), n(k(e.tag), {
-        to: e.readMorePath,
-        href: e.readMorePath,
-        class: "loan-card-use tw-no-underline tw-text-primary",
-        "aria-label": "Loan use",
-        onClick: a[3] || (a[3] = (l) => e.clickReadMore("Use", l))
-      }, {
-        default: m(() => [
-          s("div", K, [
-            e.isLoading ? (o(), r("div", U, [
-              (o(!0), r(R, null, V([...Array(4)], (l, P) => (o(), r("div", {
-                key: P,
-                class: "tw-h-2 tw-mb-1"
-              }, [
-                d(c)
-              ]))), 128))
-            ])) : (o(), r("div", G, [
-              d(L, {
-                use: e.loanUse,
-                "loan-amount": e.loanAmount,
-                status: e.loanStatus,
-                "borrower-count": e.loanBorrowerCount,
-                name: e.borrowerName,
-                "distribution-model": e.distributionModel
-              }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model"])
-            ]))
-          ])
-        ]),
-        _: 1
-      }, 8, ["to", "href"])),
-      e.isLoading || typeof e.loanCallouts > "u" ? (o(), n(c, {
-        key: 0,
-        class: "tw-mt-1.5 tw-mb-1",
-        style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
-      })) : (o(), n(M, {
-        key: 1,
-        callouts: e.loanCallouts,
-        class: "loan-callouts tw-my-1.5"
-      }, null, 8, ["callouts"])),
-      s("div", O, [
-        e.hasProgressData ? w("", !0) : (o(), r("div", j, [
-          d(c, {
-            class: "tw-mb-0.5",
-            style: { width: "70%", height: "1.3rem" }
-          }),
-          d(c, {
-            class: "tw-rounded",
-            style: { width: "70%", height: "0.5rem" }
-          })
-        ])),
-        e.sharesAvailable ? (o(), n(k(e.tag), {
-          key: 1,
-          to: e.readMorePath,
-          href: e.readMorePath,
-          class: "loan-card-progress tw-mt-1 tw-flex-grow",
-          "aria-label": "Loan progress",
-          onClick: a[4] || (a[4] = (l) => e.clickReadMore("Progress", l))
-        }, {
-          default: m(() => [
-            d(C, {
-              id: "loanProgress",
-              "money-left": e.unreservedAmount,
-              "progress-percent": e.fundraisingPercent,
-              class: "tw-text-black"
-            }, null, 8, ["money-left", "progress-percent"])
-          ]),
-          _: 1
-        }, 8, ["to", "href"])) : w("", !0),
-        e.allDataLoaded ? (o(), n(A, {
-          key: 3,
-          loan: t.loan,
-          "unreserved-amount": e.unreservedAmount,
-          "basket-items": t.basketItems,
-          "is-loading": e.isLoading,
-          "is-adding": t.isAdding,
-          "enable-five-dollars-notes": t.enableFiveDollarsNotes,
-          "five-dollars-selected": t.fiveDollarsSelected,
-          "kv-track-function": t.kvTrackFunction,
-          "show-view-loan": t.showViewLoan,
-          "custom-loan-details": t.customLoanDetails,
-          "external-links": t.externalLinks,
-          route: t.route,
-          "user-balance": t.userBalance,
-          "get-cookie": t.getCookie,
-          "set-cookie": t.setCookie,
-          "is-visitor": t.isVisitor,
-          class: f(["tw-mt-auto tw-self-end", { "tw-flex-grow": !e.sharesAvailable, "tw-flex-shrink-0": e.sharesAvailable }]),
-          onAddToBasket: a[5] || (a[5] = (l) => _.$emit("add-to-basket", l)),
-          onShowLoanDetails: a[6] || (a[6] = (l) => e.clickReadMore("ViewLoan", l))
-        }, 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", "class"])) : (o(), n(c, {
-          key: 2,
-          class: "tw-rounded tw-self-start",
-          style: { width: "9rem", height: "3rem" }
-        }))
-      ])
-    ])
-  ], 2);
-}
-const Z = /* @__PURE__ */ B(D, [["render", H], ["__scopeId", "data-v-de4628d8"]]);
 export {
-  ee as KV_WIDE_LOAN_CARD_FRAGMENT,
-  te as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
-  Z as default
+  me as KV_WIDE_LOAN_CARD_FRAGMENT,
+  ue as KV_WIDE_LOAN_CARD_USER_FRAGMENT,
+  fe as default
 };