npm - @kiva/kv-components - Versions diffs - 10.4.0 → 10.5.0 - Mend

@kiva/kv-components 10.4.0 → 10.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/vue/KvCompactLoanCard.css +1 -1
package/dist/vue/KvCompactLoanCard.js +210 -117
package/dist/vue/KvCompactLoanCard.vue.d.ts +14 -8
package/dist/vue/KvCompactLoanCard2.js +107 -113
package/dist/vue/KvLoanUse.vue.d.ts +9 -0
package/dist/vue/KvLoanUse2.js +23 -16
package/dist/vue/KvSwitch.js +1 -1
package/package.json +2 -2

package/dist/vue/KvCompactLoanCard.css CHANGED Viewed

	@@ -1 +1 @@
1	- .loan-card-use[data-v-~~02aa45c6~~]:hover,.loan-card-use[data-v-~~02aa45c6~~]: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-~~02aa45c6~~]{text-decoration-line:underline}.loan-card-progress[data-v-~~02aa45c6~~]:hover,.loan-card-progress[data-v-~~02aa45c6~~]:focus{text-decoration-line:none}.loan-card-use-text[data-v-~~02aa45c6~~] p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:~~4;line-clamp:4;overflow:hidden;text-overflow:ellipsis~~}.loan-card-cta[data-v-~~02aa45c6~~] form,.loan-card-cta[data-v-~~02aa45c6~~] fieldset,.loan-card-cta[data-v-~~02aa45c6~~] .tw-w-full,.loan-card-cta[data-v-~~02aa45c6~~] button{~~height~~:~~40px~~!important;~~max-~~height:~~40px~~!important;~~display~~:~~flex~~!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-~~02aa45c6~~] .tw-inline-flex{height:~~40px~~!important;max-height:~~40px~~!important;min-height:~~40px~~!important}[data-v-~~02aa45c6~~] .amount-dropdown select{height:2.25rem;--tw-border-opacity: 1;border-color:rgb(245 245 245 / var(--tw-border-opacity, 1));padding-left:.5rem}[data-v-~~02aa45c6~~] .goal-variant-callouts span{font-weight:500}.goal-variant-progress-group[data-v-~~02aa45c6~~] div[role=progressbar]{background-color:#d9d9d9}
1	+ .loan-card-use[data-v-330ff302]:hover,.loan-card-use[data-v-330ff302]: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-330ff302]{text-decoration-line:underline}.loan-card-progress[data-v-330ff302]:hover,.loan-card-progress[data-v-330ff302]:focus{text-decoration-line:none}.loan-card-use-text-light-detailed[data-v-330ff302] p{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.loan-card-cta[data-v-330ff302] form,.loan-card-cta[data-v-330ff302] fieldset,.loan-card-cta[data-v-330ff302] .tw-w-full,.loan-card-cta[data-v-330ff302] button{display:flex!important;height:2.5rem!important;max-height:2.5rem!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-330ff302] .tw-inline-flex{height:2.5rem!important;max-height:2.5rem!important;min-height:2.5rem!important}[data-v-330ff302] .amount-dropdown select{height:2.25rem;--tw-border-opacity: 1;border-color:rgb(245 245 245 / var(--tw-border-opacity, 1));padding-left:.5rem}[data-v-330ff302] .goal-variant-callouts span{font-weight:500}.goal-variant-progress-group[data-v-330ff302] div[role=progressbar]{background-color:#d9d9d9}.light-detailed-progress-group[data-v-330ff302] p:first-of-type{margin-bottom:.5rem}

package/dist/vue/KvCompactLoanCard.js CHANGED Viewed

@@ -1,74 +1,94 @@
-import B from "./KvCompactLoanCard2.js";
-import { KV_COMPACT_LOAN_CARD_FRAGMENT as nt, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as lt } from "./KvCompactLoanCard2.js";
-import { resolveComponent as d, openBlock as o, createElementBlock as l, normalizeClass as s, createVNode as i, createCommentVNode as m, createElementVNode as r, normalizeStyle as b, createBlock as w, resolveDynamicComponent as u, withCtx as k, toDisplayString as c, withModifiers as R, Fragment as g, renderList as v } from "vue";
+import D from "./KvCompactLoanCard2.js";
+import { KV_COMPACT_LOAN_CARD_FRAGMENT as gt, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as ft } from "./KvCompactLoanCard2.js";
+import { resolveComponent as h, openBlock as a, createElementBlock as l, normalizeClass as c, createVNode as i, createCommentVNode as g, createElementVNode as r, normalizeStyle as _, createBlock as d, resolveDynamicComponent as k, withCtx as f, Fragment as s, toDisplayString as w, withModifiers as R, renderList as u } from "vue";
 import "./KvCompactLoanCard.css";
-import G from "../_virtual/_plugin-vue_export-helper.js";
-const S = ["aria-busy"], D = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, U = {
+import B from "../_virtual/_plugin-vue_export-helper.js";
+const S = ["aria-busy"], G = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, U = {
   key: 1,
   class: "tw-flex-shrink-0 tw-overflow-hidden"
 }, I = {
   key: 0,
+  class: "tw-w-full"
+}, W = ["title"], j = { class: "tw-flex tw-items-center tw-gap-0.5 tw-w-full tw-min-w-0" }, E = { class: "tw-text-gray-600 !tw-font-medium tw-text-small tw-leading-normal tw-flex-shrink-0" }, F = ["title"], O = {
+  key: 1,
   class: "tw-mb-0.5 tw-w-full"
-}, W = { class: "tw-text-primary !tw-font-medium tw-text-base tw-leading-normal tw-truncate" }, E = ["href"], F = { class: "tw-truncate" }, O = ["title"], j = { class: "tw-font-medium" }, K = {
+}, K = { class: "tw-text-primary !tw-font-medium tw-text-base tw-leading-normal tw-truncate" }, z = ["href"], H = { class: "tw-truncate" }, Z = ["title"], q = { class: "tw-font-medium" }, J = {
+  key: 0,
+  "data-testid": "loan-use-loading",
+  class: "tw-w-full tw-overflow-hidden"
+}, Q = {
+  key: 1,
+  class: "loan-card-use-text-light-detailed tw-w-full tw-overflow-hidden"
+}, X = {
   key: 0,
-  class: "loan-card-use-text tw-w-full tw-overflow-hidden"
-}, z = { class: "tw-flex-1 tw-min-w-0 tw-mr-1" }, H = {
+  class: "tw-w-full tw-overflow-hidden"
+}, Y = { class: "tw-flex-1 tw-min-w-0 tw-mr-1" }, p = {
+  class: "tw-flex-1 tw-min-w-0 tw-px-0.5",
+  style: { "max-width": "9.75rem" }
+}, $ = { class: "tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0" }, tt = {
+  "data-testid": "light-detailed-amount-pill",
+  class: "tw-border tw-border-gray-100 tw-rounded-sm tw-px-1 tw-py-0.5 tw-text-label tw-text-primary"
+}, et = {
   class: "tw-flex-1 tw-min-w-0",
   style: { "max-width": "6.5rem" }
-}, Z = ["value"], q = { class: "tw-flex-1 tw-min-w-0" }, J = { class: "tw-p-1 tw-rounded-l-sm tw-border tw-border-gray-100 tw-border-r-0" };
-function Q(f, n, e, t, X, y) {
-  var L;
-  const _ = d("kv-material-icon"), h = d("kv-loading-placeholder"), P = d("kv-borrower-image"), C = d("kv-loan-tag"), V = d("kv-loan-use"), M = d("kv-loan-callouts"), x = d("kv-loan-progress-group"), N = d("kv-select"), A = d("kv-lend-cta");
-  return o(), l("div", {
-    class: s(["tw-flex tw-flex-col tw-items-start tw-justify-between tw-p-1 tw-bg-white tw-rounded-md tw-shadow-lg tw-w-full", {
-      "tw-relative": e.showRefreshButton,
-      "!tw-p-1.5": e.showLightView || t.isPostGoalVariant
+}, at = ["value"], ot = { class: "tw-flex-1 tw-min-w-0" }, nt = { class: "tw-p-1 tw-rounded-l-sm tw-border tw-border-gray-100 tw-border-r-0" };
+function lt(b, n, e, t, rt, x) {
+  var V;
+  const v = h("kv-material-icon"), m = h("kv-loading-placeholder"), P = h("kv-borrower-image"), C = h("kv-loan-tag"), L = h("kv-loan-use"), M = h("kv-loan-callouts"), y = h("kv-loan-progress-group"), N = h("kv-select"), A = h("kv-lend-cta");
+  return a(), l("div", {
+    class: c(["tw-flex tw-flex-col tw-items-start tw-justify-between tw-p-1 tw-bg-white tw-shadow-lg tw-w-full", {
+      "tw-relative": t.shouldShowRefreshButton,
+      "!tw-p-1.5": e.showLightView || t.isPostGoalVariant,
+      "tw-rounded-md": !t.isLightDetailedVariant,
+      "tw-rounded": t.isLightDetailedVariant
     }]),
     "aria-busy": t.isLoading ? "true" : "false"
   }, [
-    e.showRefreshButton ? (o(), l("button", {
+    t.shouldShowRefreshButton ? (a(), l("button", {
       key: 0,
       class: "tw-absolute tw--top-1 tw--right-1 tw-bg-white tw-rounded-full tw-w-2.5 tw-h-2.5 tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-drop-shadow-sm",
-      onClick: n[0] || (n[0] = (...a) => t.handleRefreshButton && t.handleRefreshButton(...a))
+      onClick: n[0] || (n[0] = (...o) => t.handleRefreshButton && t.handleRefreshButton(...o))
     }, [
-      i(_, {
+      i(v, {
         icon: t.mdiCached,
         class: "tw-w-2.5 tw-h-2.5 tw--scale-x-100 tw-text-gray-500"
       }, null, 8, ["icon"])
-    ])) : m("", !0),
-    r("div", D, [
+    ])) : g("", !0),
+    r("div", G, [
       r("div", {
-        class: s(["tw-flex tw-items-start tw-gap-2 tw-w-full loan-card-active-hover", {
-          "!tw-gap-1": e.showLightView,
+        class: c(["tw-flex tw-items-start tw-gap-2 tw-w-full loan-card-active-hover", {
+          "!tw-gap-1": e.showLightView || t.isLightDetailedVariant,
           "!tw-gap-1.5 md:!tw-gap-2.5": t.isPostGoalVariant
         }]),
-        style: b(t.customStyle)
+        style: _(t.customStyle)
       }, [
-        t.isLoading ? (o(), w(h, {
+        t.isLoading ? (a(), d(m, {
           key: 0,
           "aria-hidden": "true",
-          class: s({
+          class: c({
             "!tw-w-7.5 !tw-h-7.5": e.showLightView,
-            "!tw-w-7.5 !tw-h-7.5 md:!tw-w-12.5 md:!tw-h-12.5": t.isPostGoalVariant
+            "!tw-w-7.5 !tw-h-7.5 md:!tw-w-12.5 md:!tw-h-12.5": t.isPostGoalVariant,
+            "!tw-w-9.5 !tw-h-9.5": t.isLightDetailedVariant
           }),
-          style: b(t.borrowerImageStyle)
-        }, null, 8, ["class", "style"])) : (o(), l("div", U, [
-          (o(), w(u(t.tag), {
+          style: _(t.borrowerImageStyle)
+        }, null, 8, ["class", "style"])) : (a(), l("div", U, [
+          (a(), d(k(t.tag), {
             to: t.readMorePath,
             href: t.readMorePath,
             target: e.externalLinksNewTab ? "_blank" : void 0,
             rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
             class: "tw-flex",
             "aria-label": "Borrower image",
-            onClick: n[1] || (n[1] = (a) => t.clickReadMore("Photo", a))
+            onClick: n[1] || (n[1] = (o) => t.clickReadMore("Photo", o))
           }, {
-            default: k(() => [
+            default: f(() => [
               i(P, {
-                class: s(["tw-bg-gray-300 tw-rounded-sm tw-object-cover tw-bg-clip-content", {
+                class: c(["tw-bg-gray-300 tw-rounded-sm tw-object-cover tw-bg-clip-content", {
                   "!tw-w-7.5 !tw-h-7.5": e.showLightView,
-                  "!tw-w-7.5 !tw-h-7.5 md:!tw-w-12.5 md:!tw-h-12.5": t.isPostGoalVariant
+                  "!tw-w-7.5 !tw-h-7.5 md:!tw-w-12.5 md:!tw-h-12.5": t.isPostGoalVariant,
+                  "!tw-w-9.5 !tw-h-9.5": t.isLightDetailedVariant
                 }]),
-                style: b(t.borrowerImageStyle),
+                style: _(t.borrowerImageStyle),
                 alt: `Photo of ${t.borrowerName}`,
                 "aspect-ratio": 1,
                 "default-image": { width: 200, faceZoom: 50 },
@@ -81,98 +101,142 @@ function Q(f, n, e, t, X, y) {
           }, 8, ["to", "href", "target", "rel"]))
         ])),
         r("div", {
-          class: s(["tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0", { "!tw-gap-0": t.isPostGoalVariant }])
+          class: c(["tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0", { "!tw-gap-0": t.isPostGoalVariant }])
         }, [
-          e.businessName ? (o(), l("div", I, [
-            (o(), w(u(t.tag), {
+          t.isLightDetailedVariant ? (a(), l("div", I, [
+            t.isLoading ? (a(), l(s, { key: 0 }, [
+              i(m, { class: "tw-mb-0.5 !tw-w-full !tw-h-2" }),
+              i(m, { class: "!tw-w-9 !tw-h-2" })
+            ], 64)) : (a(), l(s, { key: 1 }, [
+              r("p", {
+                title: t.borrowerName,
+                class: "tw-text-primary !tw-font-medium tw-text-small tw-leading-normal tw-truncate tw-w-full"
+              }, w(t.borrowerName), 9, W),
+              r("div", j, [
+                r("span", E, w(t.lightDetailedAmount), 1),
+                t.formattedLocation ? (a(), l(s, { key: 0 }, [
+                  n[14] || (n[14] = r("span", {
+                    "aria-hidden": "true",
+                    class: "tw-w-0.5 tw-h-0.5 tw-rounded-full tw-bg-gray-600 tw-flex-shrink-0"
+                  }, null, -1)),
+                  r("span", {
+                    title: t.formattedLocation,
+                    class: "tw-text-gray-600 !tw-font-medium tw-text-small tw-leading-normal tw-truncate tw-min-w-0"
+                  }, w(t.formattedLocation), 9, F)
+                ], 64)) : g("", !0)
+              ])
+            ], 64))
+          ])) : e.businessName ? (a(), l("div", O, [
+            (a(), d(k(t.tag), {
               to: t.readMorePath,
               href: t.readMorePath,
               target: e.externalLinksNewTab ? "_blank" : void 0,
               rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
               class: "tw-no-underline hover:tw-underline focus:tw-no-underline",
               "aria-label": "Business name",
-              onClick: n[2] || (n[2] = (a) => t.clickReadMore("Business", a))
+              onClick: n[2] || (n[2] = (o) => t.clickReadMore("Business", o))
             }, {
-              default: k(() => [
-                r("h3", W, c(e.businessName), 1)
+              default: f(() => [
+                r("h3", K, w(e.businessName), 1)
               ]),
               _: 1
             }, 8, ["to", "href", "target", "rel"])),
-            e.website ? (o(), l("a", {
+            e.website ? (a(), l("a", {
               key: 0,
               href: t.formattedWebsite,
               target: "_blank",
               class: "tw-flex tw-items-center tw-gap-0.5 tw-text-secondary tw-text-small tw-font-light tw-leading-normal tw-no-underline hover:tw-underline",
-              onClick: n[3] || (n[3] = R((...a) => t.trackWebsiteClick && t.trackWebsiteClick(...a), ["stop"]))
+              onClick: n[3] || (n[3] = R((...o) => t.trackWebsiteClick && t.trackWebsiteClick(...o), ["stop"]))
             }, [
-              i(_, {
+              i(v, {
                 icon: t.mdiLink,
                 class: "tw-w-2 tw-h-2"
               }, null, 8, ["icon"]),
-              r("span", F, c(e.website), 1)
-            ], 8, E)) : m("", !0)
-          ])) : m("", !0),
-          t.isLoading ? m("", !0) : (o(), w(u(t.tag), {
-            key: 1,
+              r("span", H, w(e.website), 1)
+            ], 8, z)) : g("", !0)
+          ])) : g("", !0),
+          !t.isLoading && !t.isLightDetailedVariant ? (a(), d(k(t.tag), {
+            key: 2,
             to: t.readMorePath,
             href: t.readMorePath,
             target: e.externalLinksNewTab ? "_blank" : void 0,
             rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
             class: "tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline -tw-mt-1",
             "aria-label": "Loan tag",
-            onClick: n[4] || (n[4] = (a) => t.clickReadMore("Tag", a))
+            onClick: n[4] || (n[4] = (o) => t.clickReadMore("Tag", o))
           }, {
-            default: k(() => [
-              e.showTags ? (o(), w(C, {
+            default: f(() => [
+              e.showTags ? (a(), d(C, {
                 key: 0,
-                class: s({
+                class: c({
                   "tw-mb-1 !tw-font-medium": t.isPostGoalVariant
                 }),
                 loan: e.loan,
                 "enable-multi-matching": e.enableMultiMatching
-              }, null, 8, ["class", "loan", "enable-multi-matching"])) : m("", !0)
+              }, null, 8, ["class", "loan", "enable-multi-matching"])) : g("", !0)
             ]),
             _: 1
-          }, 8, ["to", "href", "target", "rel"])),
-          t.isPostGoalVariant ? (o(), l(g, { key: 2 }, [
-            t.isLoading ? (o(), l(g, { key: 0 }, v(4, (a) => i(h, {
-              key: a,
+          }, 8, ["to", "href", "target", "rel"])) : g("", !0),
+          t.isPostGoalVariant ? (a(), l(s, { key: 3 }, [
+            t.isLoading ? (a(), l(s, { key: 0 }, u(4, (o) => i(m, {
+              key: o,
               class: "tw-mb-0.5 md:!tw-mb-1.5 !tw-w-full !tw-h-1.5 md:!tw-h-2"
-            })), 64)) : (o(), l("p", {
+            })), 64)) : (a(), l("p", {
               key: 1,
               class: "tw-text-small tw-mb-0 tw-leading-normal",
               style: { "line-height": "150%" },
               title: t.statementTitle,
               "data-testid": "loan-use-statement"
             }, [
-              r("span", null, c(t.loanUsePrefixStart), 1),
-              r("span", j, c(t.borrowerNameWithCountry), 1),
-              r("span", null, c(t.loanUsePrefixEnd), 1),
-              r("span", null, c(t.visibleUseStatement), 1)
-            ], 8, O))
-          ], 64)) : e.showLoanUse ? (o(), w(u(t.tag), {
-            key: 3,
+              r("span", null, w(t.loanUsePrefixStart), 1),
+              r("span", q, w(t.borrowerNameWithCountry), 1),
+              r("span", null, w(t.loanUsePrefixEnd), 1),
+              r("span", null, w(t.visibleUseStatement), 1)
+            ], 8, Z))
+          ], 64)) : t.isLightDetailedVariant ? (a(), l(s, { key: 4 }, [
+            t.isLoading ? (a(), l("div", J, [
+              (a(!0), l(s, null, u(t.loanUseLoadingRows, (o) => (a(), l("div", {
+                key: o,
+                class: "tw-h-2 tw-mb-1"
+              }, [
+                i(m)
+              ]))), 128))
+            ])) : (a(), l("div", Q, [
+              i(L, {
+                use: t.loanUse,
+                "loan-amount": t.loanAmount,
+                status: t.loanStatus,
+                "borrower-count": t.loanBorrowerCount,
+                name: t.borrowerName,
+                "distribution-model": t.distributionModel,
+                "hide-borrower-details": !0,
+                "data-testid": "loan-use-statement",
+                class: "tw-text-small tw-leading-normal tw-text-primary"
+              }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model"])
+            ]))
+          ], 64)) : e.showLoanUse ? (a(), d(k(t.tag), {
+            key: 5,
             to: t.readMorePath,
             href: t.readMorePath,
             target: e.externalLinksNewTab ? "_blank" : void 0,
             rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
             class: "loan-card-use tw-no-underline tw-text-primary tw-block tw-w-full",
             "aria-label": "Loan use",
-            onClick: n[5] || (n[5] = (a) => t.clickReadMore("Use", a))
+            onClick: n[5] || (n[5] = (o) => t.clickReadMore("Use", o))
           }, {
-            default: k(() => [
-              t.isLoading ? (o(), l("div", K, [
-                (o(!0), l(g, null, v([...Array(t.loanUseLoadingRows)], (a, T) => (o(), l("div", {
+            default: f(() => [
+              t.isLoading ? (a(), l("div", X, [
+                (a(!0), l(s, null, u([...Array(t.loanUseLoadingRows)], (o, T) => (a(), l("div", {
                   key: T,
                   class: "tw-h-2 tw-mb-1"
                 }, [
-                  i(h)
+                  i(m)
                 ]))), 128))
-              ])) : (o(), l("div", {
+              ])) : (a(), l("div", {
                 key: 1,
-                class: s(["loan-card-use-text tw-w-full tw-overflow-hidden", { "!tw--mt-1": e.showTags && y.hasMatchingInfo && e.showLightView }])
+                class: c(["tw-w-full tw-overflow-hidden", { "!tw--mt-1": e.showTags && x.hasMatchingInfo && e.showLightView }])
               }, [
-                i(V, {
+                i(L, {
                   use: t.loanUse,
                   "loan-amount": t.loanAmount,
                   status: t.loanStatus,
@@ -188,29 +252,58 @@ function Q(f, n, e, t, X, y) {
               ], 2))
             ]),
             _: 1
-          }, 8, ["to", "href", "target", "rel"])) : m("", !0)
+          }, 8, ["to", "href", "target", "rel"])) : g("", !0)
         ], 2)
       ], 6),
-      t.isLoading || typeof t.loanCallouts > "u" ? (o(), w(h, {
+      t.isLoading || typeof t.loanCallouts > "u" ? (a(), d(m, {
         key: 0,
         class: "tw-mt-1.5 tw-mb-1 tw-rounded-full",
         style: { width: "60%", height: "1.5rem" }
-      })) : (o(), w(M, {
+      })) : (a(), d(M, {
         key: 1,
         callouts: t.loanCallouts,
-        class: s(["tw-mt-1.5", { "goal-variant-callouts": t.isPostGoalVariant }]),
-        onClick: n[6] || (n[6] = (a) => f.$emit("jump-filter-page", a))
+        class: c(["tw-mt-1.5", { "goal-variant-callouts": t.isPostGoalVariant }]),
+        onClick: n[6] || (n[6] = (o) => b.$emit("jump-filter-page", o))
       }, null, 8, ["callouts", "class"]))
     ]),
     r("div", {
-      class: s(["tw-flex tw-items-center tw-justify-between tw-w-full tw-mt-1", {
+      class: c(["tw-flex tw-items-center tw-justify-between tw-w-full tw-mt-1", {
         "tw-gap-1": t.sharesAvailable,
-        "!tw-items-end !tw-gap-2": t.isPostGoalVariant
+        "!tw-items-end !tw-gap-2": t.isPostGoalVariant,
+        "!tw-mt-1.5": t.isLightDetailedVariant
       }])
     }, [
-      t.hasProgressData ? t.isPostGoalVariant ? (o(), l(g, { key: 1 }, [
-        r("div", H, [
-          i(x, {
+      t.hasProgressData ? t.isLightDetailedVariant ? (a(), l(s, { key: 1 }, [
+        r("div", p, [
+          i(y, {
+            "money-left": t.unreservedAmount,
+            "progress-percent": t.fundraisingPercent,
+            class: "tw-text-black light-detailed-progress-group"
+          }, null, 8, ["money-left", "progress-percent"])
+        ]),
+        r("div", $, [
+          r("span", tt, " $" + w(e.customAmountLent), 1),
+          (a(), d(k(t.tag), {
+            to: t.readMorePath,
+            href: t.readMorePath,
+            target: e.externalLinksNewTab ? "_blank" : void 0,
+            rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
+            class: "tw-flex tw-items-center tw-justify-center",
+            "aria-label": `View ${t.borrowerName || "this borrower"}'s loan details`,
+            onClick: n[7] || (n[7] = (o) => t.clickReadMore("Arrow", o))
+          }, {
+            default: f(() => [
+              i(v, {
+                icon: t.mdiArrowRight,
+                class: "tw-w-2.5 tw-h-2.5 tw-text-action"
+              }, null, 8, ["icon"])
+            ]),
+            _: 1
+          }, 8, ["to", "href", "target", "rel", "aria-label"]))
+        ])
+      ], 64)) : t.isPostGoalVariant ? (a(), l(s, { key: 2 }, [
+        r("div", et, [
+          i(y, {
             "money-left": t.unreservedAmount,
             "progress-percent": t.fundraisingPercent,
             class: "tw-text-black goal-variant-progress-group"
@@ -218,28 +311,28 @@ function Q(f, n, e, t, X, y) {
         ]),
         r("div", null, [
           i(N, {
-            id: `PostGoalAmountDropdown_${((L = e.loan) == null ? void 0 : L.id) ?? e.loanId}`,
+            id: `PostGoalAmountDropdown_${((V = e.loan) == null ? void 0 : V.id) ?? e.loanId}`,
             modelValue: t.selectedAmount,
             "onUpdate:modelValue": [
-              n[7] || (n[7] = (a) => t.selectedAmount = a),
+              n[8] || (n[8] = (o) => t.selectedAmount = o),
               t.handleSelectedAmount
             ],
             "aria-label": "Lend amount",
-            disabled: !t.amountOptions.length || y.isInBasket,
+            disabled: !t.amountOptions.length || x.isInBasket,
             class: "amount-dropdown"
           }, {
-            default: k(() => [
-              (o(!0), l(g, null, v(t.amountOptions, (a) => (o(), l("option", {
-                key: a,
-                value: a
-              }, " $" + c(a), 9, Z))), 128))
+            default: f(() => [
+              (a(!0), l(s, null, u(t.amountOptions, (o) => (a(), l("option", {
+                key: o,
+                value: o
+              }, " $" + w(o), 9, at))), 128))
             ]),
             _: 1
           }, 8, ["id", "modelValue", "disabled", "onUpdate:modelValue"])
         ])
-      ], 64)) : (o(), l(g, { key: 2 }, [
-        r("div", q, [
-          t.sharesAvailable ? (o(), w(u(t.tag), {
+      ], 64)) : (a(), l(s, { key: 3 }, [
+        r("div", ot, [
+          t.sharesAvailable ? (a(), d(k(t.tag), {
             key: 0,
             to: t.readMorePath,
             href: t.readMorePath,
@@ -247,10 +340,10 @@ function Q(f, n, e, t, X, y) {
             rel: e.externalLinksNewTab ? "noopener noreferrer" : void 0,
             class: "loan-card-progress tw-no-underline tw-block",
             "aria-label": "Loan progress",
-            onClick: n[8] || (n[8] = (a) => t.clickReadMore("Progress", a))
+            onClick: n[9] || (n[9] = (o) => t.clickReadMore("Progress", o))
           }, {
-            default: k(() => [
-              i(x, {
+            default: f(() => [
+              i(y, {
                 id: "loanProgress",
                 "money-left": t.unreservedAmount,
                 "progress-percent": t.fundraisingPercent,
@@ -258,18 +351,18 @@ function Q(f, n, e, t, X, y) {
               }, null, 8, ["money-left", "progress-percent"])
             ]),
             _: 1
-          }, 8, ["to", "href", "target", "rel"])) : m("", !0)
+          }, 8, ["to", "href", "target", "rel"])) : g("", !0)
         ]),
-        e.showLightView ? (o(), l("button", {
+        e.showLightView ? (a(), l("button", {
           key: 0,
           class: "tw-ml-2",
-          onClick: n[9] || (n[9] = (a) => t.clickReadMore("View", a))
+          onClick: n[10] || (n[10] = (o) => t.clickReadMore("View", o))
         }, [
-          r("span", J, " $" + c(e.customAmountLent), 1),
-          n[13] || (n[13] = r("span", { class: "tw-bg-gray-100 tw-px-1.5 tw-py-1 tw-rounded-r-sm tw-border tw-border-gray-100 tw-text-action tw-font-medium hover:tw-underline tw-text-center tw-cursor-pointer" }, " View ", -1))
-        ])) : (o(), l("div", {
+          r("span", nt, " $" + w(e.customAmountLent), 1),
+          n[15] || (n[15] = r("span", { class: "tw-bg-gray-100 tw-px-1.5 tw-py-1 tw-rounded-r-sm tw-border tw-border-gray-100 tw-text-action tw-font-medium hover:tw-underline tw-text-center tw-cursor-pointer" }, " View ", -1))
+        ])) : (a(), l("div", {
           key: 1,
-          class: s(["tw-flex-shrink-0 loan-card-cta", { "tw-w-full": !t.sharesAvailable }]),
+          class: c(["tw-flex-shrink-0 loan-card-cta", { "tw-w-full": !t.sharesAvailable }]),
           style: { height: "40px" }
         }, [
           i(A, {
@@ -292,23 +385,23 @@ function Q(f, n, e, t, X, y) {
             "primary-button-text": e.primaryButtonText,
             "secondary-button-text": e.secondaryButtonText,
             "secondary-button-handler": e.secondaryButtonHandler,
-            onAddToBasket: n[10] || (n[10] = (a) => f.$emit("add-to-basket", a)),
-            onShowLoanDetails: n[11] || (n[11] = (a) => t.clickReadMore("ViewLoan", a)),
-            onRemoveFromBasket: n[12] || (n[12] = (a) => f.$emit("remove-from-basket", a))
+            onAddToBasket: n[11] || (n[11] = (o) => b.$emit("add-to-basket", o)),
+            onShowLoanDetails: n[12] || (n[12] = (o) => t.clickReadMore("ViewLoan", o)),
+            onRemoveFromBasket: n[13] || (n[13] = (o) => b.$emit("remove-from-basket", o))
           }, 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", "primary-button-text", "secondary-button-text", "secondary-button-handler"])
         ], 2))
-      ], 64)) : (o(), l(g, { key: 0 }, [
-        r("div", z, [
-          i(h, {
+      ], 64)) : (a(), l(s, { key: 0 }, [
+        r("div", Y, [
+          i(m, {
             class: "tw-mb-0.5",
             style: { width: "100%", maxWidth: "11rem", height: "1rem" }
           }),
-          i(h, {
+          i(m, {
             class: "tw-rounded",
             style: { width: "100%", maxWidth: "11rem", height: "0.5rem" }
           })
         ]),
-        t.allDataLoaded ? m("", !0) : (o(), w(h, {
+        t.allDataLoaded ? g("", !0) : (a(), d(m, {
           key: 0,
           class: "tw-rounded tw-flex-shrink-0",
           style: { width: "8rem", height: "2.5rem" }
@@ -317,9 +410,9 @@ function Q(f, n, e, t, X, y) {
     ], 2)
   ], 10, S);
 }
-const et = /* @__PURE__ */ G(B, [["render", Q], ["__scopeId", "data-v-02aa45c6"]]);
+const mt = /* @__PURE__ */ B(D, [["render", lt], ["__scopeId", "data-v-330ff302"]]);
 export {
-  nt as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  lt as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  et as default
+  gt as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  ft as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  mt as default
 };

package/dist/vue/KvCompactLoanCard.vue.d.ts CHANGED Viewed

@@ -153,14 +153,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     }>;
     borrowerName: import('vue').ComputedRef<any>;
     borrowerNameWithCountry: import('vue').ComputedRef<string>;
-    city: import('vue').ComputedRef<any>;
-    countryName: import('vue').ComputedRef<any>;
+    lightDetailedAmount: import('vue').ComputedRef<any>;
     distributionModel: import('vue').ComputedRef<any>;
     formattedLocation: import('vue').ComputedRef<any>;
     formattedWebsite: import('vue').ComputedRef<string>;
     fundraisingPercent: import('vue').ComputedRef<any>;
     hasProgressData: import('vue').ComputedRef<boolean>;
     imageHash: import('vue').ComputedRef<any>;
+    isLightDetailedVariant: import('vue').ComputedRef<boolean>;
     isLoading: import('vue').ComputedRef<boolean>;
     isPostGoalVariant: import('vue').ComputedRef<boolean>;
     loanAmount: import('vue').ComputedRef<any>;
@@ -170,12 +170,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     loanUse: import('vue').ComputedRef<any>;
     loanUsePrefixEnd: import('vue').ComputedRef<string>;
     loanUsePrefixStart: import('vue').ComputedRef<string>;
-    mdiMapMarker: string;
-    mdiHome: string;
     mdiLink: string;
     mdiCached: string;
+    mdiArrowRight: string;
     readMorePath: import('vue').ComputedRef<any>;
-    state: import('vue').ComputedRef<any>;
+    shouldShowRefreshButton: import('vue').ComputedRef<boolean>;
     tag: import('vue').ComputedRef<"router-link" | "a">;
     unreservedAmount: import('vue').ComputedRef<any>;
     sharesAvailable: import('vue').ComputedRef<boolean>;
@@ -188,15 +187,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         height: string;
         maxHeight: string;
     }>;
-    loanUseLoadingRows: import('vue').ComputedRef<3 | 4>;
+    loanUseLoadingRows: import('vue').ComputedRef<2 | 3 | 4>;
     visibleUseStatement: import('vue').ComputedRef<string>;
     clickReadMore: (target: string, event: Event) => void;
     trackWebsiteClick: () => void;
     handleRefreshButton: (event: any) => void;
     handleSelectedAmount: (amount: string) => void;
 }, {}, {
-    lendersNumber(): any;
-    amountLent(): any;
     isInBasket(): any;
     hasMatchingInfo(): boolean;
 }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("show-loan-details" | "add-to-basket" | "jump-filter-page" | "remove-from-basket" | "refresh-button" | "update:selected-amount")[], "show-loan-details" | "add-to-basket" | "jump-filter-page" | "remove-from-basket" | "refresh-button" | "update:selected-amount", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -482,6 +479,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        hideBorrowerDetails: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         boldName: {
             type: BooleanConstructor;
             default: boolean;
@@ -545,6 +546,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             type: BooleanConstructor;
             default: boolean;
         };
+        hideBorrowerDetails: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         boldName: {
             type: BooleanConstructor;
             default: boolean;
@@ -575,6 +580,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         distributionModel: string;
         whySpecial: string;
         hideLoanAmount: boolean;
+        hideBorrowerDetails: boolean;
         boldName: boolean;
         country: string;
         useIndicativeHelpText: boolean;

package/dist/vue/KvCompactLoanCard2.js CHANGED Viewed

@@ -1,27 +1,28 @@
-import A from "graphql-tag";
-import W from "numeral";
-import { ref as $, computed as o, watch as H } from "vue";
-import { mdiCached as j, mdiLink as q, mdiHome as z, mdiMapMarker as J } from "@mdi/js";
+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 re from "./KvBorrowerImage.js";
-import ie from "./KvLoanCallouts.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 ve from "./KvSelect.js";
-import { KV_LEND_CTA_FRAGMENT as he, KV_LEND_CTA_USER_FRAGMENT as Le } from "./KvLendCta2.js";
-import { KV_LOAN_TAG_FRAGMENT as ge } from "./KvLoanTag2.js";
+import he from "./KvSelect.js";
+import { KV_LEND_CTA_FRAGMENT as ve, KV_LEND_CTA_USER_FRAGMENT as ge } from "./KvLendCta2.js";
+import { KV_LOAN_TAG_FRAGMENT as Le } from "./KvLoanTag2.js";
 import { KV_LOAN_USE_FRAGMENT as ye } from "./KvLoanUse2.js";
 const d = {
   default: "default",
-  postGoal: "post-goal"
-}, pe = (e) => e < 500 && e >= 25, Ae = (e) => oe(e) || pe(e), $e = A`
+  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 {
@@ -43,31 +44,31 @@ const d = {
 		...LoanGeocode
 		...LoanProgress
 	}
-	${he}
-	${ge}
+	${ve}
+	${Le}
 	${ye}
 	${Q}
 	${X}
 	${Y}
-`, He = A`
+`, je = b`
 	fragment KvCompactLoanCardUser on LoanBasic {
 		id
 		...KvLendCtaUser
 	}
-	${Le}
-`, je = {
+	${ge}
+`, qe = {
   name: "KvCompactLoanCard",
   components: {
-    KvBorrowerImage: re,
+    KvBorrowerImage: ie,
     KvLoadingPlaceholder: fe,
     KvLoanUse: le,
     KvMaterialIcon: me,
     KvLendCta: se,
     KvLoanTag: de,
-    KvLoanCallouts: ie,
+    KvLoanCallouts: re,
     KvLoanTeamPick: ce,
     KvLoanProgressGroup: ue,
-    KvSelect: ve
+    KvSelect: he
   },
   props: {
     variant: {
@@ -220,125 +221,127 @@ const d = {
     "show-loan-details",
     "update:selected-amount"
   ],
-  setup(e, { emit: a }) {
-    const n = $(""), s = o(
+  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: C,
-      borrowerName: m,
-      city: b,
-      countryName: N,
-      distributionModel: f,
-      formattedLocation: c,
-      fundraisingPercent: S,
+      allDataLoaded: S,
+      borrowerName: h,
+      distributionModel: v,
+      formattedLocation: g,
+      fundraisingPercent: B,
       hasProgressData: _,
-      imageHash: w,
-      isLoading: B,
-      loanAmount: v,
-      loanBorrowerCount: h,
-      loanCallouts: T,
-      loanStatus: L,
-      loanUse: g,
-      readMorePath: k,
-      state: M,
+      imageHash: N,
+      isLoading: T,
+      loanAmount: f,
+      loanBorrowerCount: L,
+      loanCallouts: k,
+      loanStatus: y,
+      loanUse: A,
+      readMorePath: R,
       tag: F,
       unreservedAmount: u,
-      sharesAvailable: K
-    } = Z(e), { clickReadMore: R } = ee(e, a), P = o(() => s.value ? void 0 : { width: "100px", height: "100px" }), E = o(() => {
+      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}`;
-    }), G = o(() => {
-      if (s.value) return {};
-      const t = e.showLightView ? "auto" : "6.75rem", l = e.showLightView ? "none" : "6.75rem";
-      return { height: t, maxHeight: l };
-    }), r = o(() => {
+    }), 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: m.value,
-        distributionModel: f.value,
-        formattedLocation: c.value,
-        loanAmount: v.value,
-        loanBorrowerCount: h.value,
-        loanStatus: L.value,
-        loanUse: g.value
+        borrowerName: h.value,
+        distributionModel: v.value,
+        formattedLocation: g.value,
+        loanAmount: f.value,
+        loanBorrowerCount: L.value,
+        loanStatus: y.value,
+        loanUse: A.value
       });
-    }), O = o(() => r.value.borrowerNameWithCountry), U = o(() => r.value.loanUsePrefixStart), D = o(() => r.value.loanUsePrefixEnd), V = o(() => r.value.statementTitle), I = o(() => r.value.visibleUseStatement), y = o(() => {
-      var i;
+    }), 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 l = t < 25 ? parseFloat(`${((i = e.loan) == null ? void 0 : i.minNoteSize) ?? 25}`) : 25;
+      const n = t < 25 ? parseFloat(`${((r = e.loan) == null ? void 0 : r.minNoteSize) ?? 25}`) : 25;
       return te(
         u.value,
-        Ae(t),
-        l,
+        Ce(t),
+        n,
         e.enableFiveDollarsNotes,
         e.isVisitor
       );
     });
-    H(
-      y,
+    q(
+      C,
       (t) => {
-        var i, p;
-        if (!s.value) return;
+        var r, p;
+        if (!m.value) return;
         if (!t.length) {
-          n.value = "";
+          l.value = "";
           return;
         }
-        const l = ae(
+        const n = ae(
           e.getCookie,
           e.setCookie,
           e.enableFiveDollarsNotes,
-          (p = (i = e.route) == null ? void 0 : i.query) == null ? void 0 : p.utm_campaign,
+          (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
         );
-        n.value = t.includes(l) ? l : t[0];
+        l.value = t.includes(n) ? n : t[0];
       },
       { immediate: !0 }
     );
-    const x = o(() => e.showLightView ? 3 : 4);
+    const W = a(() => s.value ? 2 : e.showLightView ? 3 : 4);
     return {
-      allDataLoaded: C,
-      amountOptions: y,
+      allDataLoaded: S,
+      amountOptions: C,
       borrowerImageStyle: P,
-      borrowerName: m,
+      borrowerName: h,
       borrowerNameWithCountry: O,
-      city: b,
-      countryName: N,
-      distributionModel: f,
-      formattedLocation: c,
-      formattedWebsite: E,
-      fundraisingPercent: S,
+      lightDetailedAmount: G,
+      distributionModel: v,
+      formattedLocation: g,
+      formattedWebsite: D,
+      fundraisingPercent: B,
       hasProgressData: _,
-      imageHash: w,
-      isLoading: B,
-      isPostGoalVariant: s,
-      loanAmount: v,
-      loanBorrowerCount: h,
-      loanCallouts: T,
-      loanStatus: L,
-      loanUse: g,
-      loanUsePrefixEnd: D,
+      imageHash: N,
+      isLightDetailedVariant: s,
+      isLoading: T,
+      isPostGoalVariant: m,
+      loanAmount: f,
+      loanBorrowerCount: L,
+      loanCallouts: k,
+      loanStatus: y,
+      loanUse: A,
+      loanUsePrefixEnd: V,
       loanUsePrefixStart: U,
-      mdiMapMarker: J,
-      mdiHome: z,
-      mdiLink: q,
-      mdiCached: j,
-      readMorePath: k,
-      state: M,
+      mdiLink: J,
+      mdiCached: z,
+      mdiArrowRight: H,
+      readMorePath: R,
+      shouldShowRefreshButton: w,
       tag: F,
       unreservedAmount: u,
-      sharesAvailable: K,
-      selectedAmount: n,
-      statementTitle: V,
-      customStyle: G,
-      loanUseLoadingRows: x,
+      sharesAvailable: M,
+      selectedAmount: l,
+      statementTitle: x,
+      customStyle: E,
+      loanUseLoadingRows: W,
       visibleUseStatement: I,
-      clickReadMore: R,
+      clickReadMore: K,
       trackWebsiteClick: () => {
         e.kvTrackFunction(
           "Lending",
@@ -348,41 +351,32 @@ const d = {
         );
       },
       handleRefreshButton: (t) => {
-        a("refresh-button", t);
+        o("refresh-button", t);
       },
       handleSelectedAmount: (t) => {
-        var l;
-        n.value = t, a("update:selected-amount", t), e.kvTrackFunction(
+        var n;
+        l.value = t, o("update:selected-amount", t), e.kvTrackFunction(
           "Lending",
           "Modify lend amount",
           t,
-          e.loanId ?? ((l = e.loan) == null ? void 0 : l.id)
+          e.loanId ?? ((n = e.loan) == null ? void 0 : n.id)
         );
       }
     };
   },
   computed: {
-    lendersNumber() {
-      var e, a;
-      return ((a = (e = this.loan) == null ? void 0 : e.lenders) == null ? void 0 : a.totalCount) ?? 0;
-    },
-    amountLent() {
-      var a, n;
-      const e = ((n = (a = this.loan) == null ? void 0 : a.loanFundraisingInfo) == null ? void 0 : n.fundedAmount) ?? 0;
-      return W(e).format("$0,0");
-    },
     isInBasket() {
       var e;
-      return ((e = this.basketItems) == null ? void 0 : e.some((a) => a.__typename === "LoanReservation" && a.id === this.loanId)) ?? !1;
+      return ((e = this.basketItems) == null ? void 0 : e.some((o) => o.__typename === "LoanReservation" && o.id === this.loanId)) ?? !1;
     },
     hasMatchingInfo() {
-      var e, a, n;
-      return !!((e = this.loan) != null && e.matchingText) || this.enableMultiMatching && (((n = (a = this.loan) == null ? void 0 : a.simultaneousMatching) == null ? void 0 : n.length) ?? 0) > 0;
+      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,
-  He as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  je as default
+  je as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  qe as default
 };

package/dist/vue/KvLoanUse.vue.d.ts CHANGED Viewed

@@ -36,6 +36,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    hideBorrowerDetails: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     boldName: {
         type: BooleanConstructor;
         default: boolean;
@@ -99,6 +103,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    hideBorrowerDetails: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     boldName: {
         type: BooleanConstructor;
         default: boolean;
@@ -129,6 +137,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     distributionModel: string;
     whySpecial: string;
     hideLoanAmount: boolean;
+    hideBorrowerDetails: boolean;
     boldName: boolean;
     country: string;
     useIndicativeHelpText: boolean;

package/dist/vue/KvLoanUse2.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import r from "graphql-tag";
-import o from "numeral";
-import { truncateStringByWords as a } from "../utils/loanUtils.js";
-const n = "direct", d = r`
+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
@@ -13,7 +13,7 @@ const n = "direct", d = r`
 		distributionModel
 		whySpecial
 	}
-`, m = {
+`, f = {
   name: "KvLoanUse",
   props: {
     anonymizationLevel: {
@@ -42,7 +42,7 @@ const n = "direct", d = r`
     },
     distributionModel: {
       type: String,
-      default: n
+      default: r
     },
     whySpecial: {
       type: String,
@@ -52,6 +52,11 @@ const n = "direct", d = r`
       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
@@ -78,10 +83,10 @@ const n = "direct", d = r`
       return this.status === "fundraising" || this.status === "inactive" || this.status === "reviewed" ? "helps" : "helped";
     },
     isDirect() {
-      return this.distributionModel === n;
+      return this.distributionModel === r;
     },
     whySpecialSentence() {
-      return this.whySpecial ? ` This loan is special because ${this.whySpecial.charAt(0).toLowerCase() + this.whySpecial.slice(1)}` : "";
+      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>`;
@@ -89,18 +94,20 @@ const n = "direct", d = r`
     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 t = this.useIndicativeHelpText ? this.helpLanguage : "Help";
-        let s = `${t.charAt(0).toUpperCase() + t.slice(1)} ${this.nameSpan} ${this.use.charAt(0).toLowerCase() + this.use.slice(1)} ${this.whySpecialSentence}`;
-        return this.showReadMore && (s = `${a(s, this.truncateWordsNumber)} <span class=" tw-text-action tw-underline">read more</span>`), s;
+        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 i = this.borrowerCount > 1;
-      let e = `${o(this.loanAmount).format("$0,0")} ${this.isDirect ? "to" : this.helpLanguage} ${i ? "a member of " : ""}${this.nameSpan} ${this.isDirect ? `${this.helpLanguage} ` : ""}${this.use.charAt(0).toLowerCase() + this.use.slice(1)}${this.whySpecialSentence}`;
-      return this.showReadMore && (e = `${a(e, this.truncateWordsNumber)} <span class=" tw-text-action tw-underline">read more</span>`), e;
+      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 {
-  d as KV_LOAN_USE_FRAGMENT,
-  m as default
+  m as KV_LOAN_USE_FRAGMENT,
+  f as default
 };

package/dist/vue/KvSwitch.js CHANGED Viewed

@@ -25,7 +25,7 @@ function _(r, o, l, e, p, k) {
         class: i(["tw-rounded-full tw-relative tw-overflow-hidden peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action tw-bg-tertiary peer-checked:tw-bg-action tw-transition-all tw-ease-in-out", e.trackSizeClasses])
       }, null, 2),
       t("div", {
-        class: i(["tw-flex-shrink-0 tw-absolute tw-m-0.5 tw-top-0 tw-rounded-full tw-bg-white tw-transform tw-transition-all tw-ease-in-out", e.knobSizeClasses])
+        class: i(["tw-flex-shrink-0 tw-absolute tw-mx-0.5 tw-top-1/2 -tw-translate-y-1/2 tw-rounded-full tw-bg-white tw-transform tw-transition-all tw-ease-in-out", e.knobSizeClasses])
       }, null, 2),
       t("div", g, [
         h(r.$slots, "default")

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "10.4.0",
+  "version": "10.5.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -112,5 +112,5 @@
   "dependencies": {
     "fuse.js": "^7.1.0"
   },
-  "gitHead": "85f612013133d5c2488e0ea23e81c576d1d1663f"
+  "gitHead": "007bb466335bd646f36fb385eec7bd0dea54988c"
 }