npm - @kiva/kv-components - Versions diffs - 8.12.0 → 8.13.0 - Mend

@kiva/kv-components 8.12.0 → 8.13.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 (10) hide show

package/dist/utils/pieChartColors.js +1 -1
package/dist/utils/postGoalStatement.d.ts +20 -0
package/dist/utils/postGoalStatement.js +39 -0
package/dist/vue/KvCompactLoanCard.css +1 -1
package/dist/vue/KvCompactLoanCard.js +163 -87
package/dist/vue/KvCompactLoanCard.vue.d.ts +87 -1
package/dist/vue/KvCompactLoanCard2.js +191 -105
package/dist/vue/KvPieChartV2.css +1 -1
package/dist/vue/KvPieChartV2.js +25 -25
package/package.json +2 -2

package/dist/utils/pieChartColors.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import n from "@kiva/kv-tokens";
-const { colors: e } = n, i = e.gray[100], g = e.gray[300], o = [
+const { colors: e } = n, i = e.gray[200], g = e.gray[300], o = [
   // Tier 1 — Bold primaries
   e["eco-green"][3],
   // #276A43

package/dist/utils/postGoalStatement.d.ts ADDED Viewed

@@ -0,0 +1,20 @@
+export declare const POST_GOAL_STATEMENT_MAX_LENGTH = 200;
+export interface ComputePostGoalStatementArgs {
+    borrowerName: string;
+    distributionModel: string;
+    formattedLocation: string;
+    loanAmount: string;
+    loanBorrowerCount: number;
+    loanStatus: string;
+    loanUse: string;
+    anonymizationLevel?: string;
+    whySpecial?: string;
+}
+export interface PostGoalStatementResult {
+    borrowerNameWithCountry: string;
+    loanUsePrefixStart: string;
+    loanUsePrefixEnd: string;
+    statementTitle: string | undefined;
+    visibleUseStatement: string;
+}
+export declare function computePostGoalLoanCardStatement(args: ComputePostGoalStatementArgs): PostGoalStatementResult;

package/dist/utils/postGoalStatement.js ADDED Viewed

@@ -0,0 +1,39 @@
+import L from "numeral";
+const S = 200, o = "...";
+function p(e) {
+  return e.length ? e.charAt(0).toLowerCase() + e.slice(1) : "";
+}
+function g(e, t) {
+  return t <= 0 ? "" : e.length <= t ? e : t <= o.length ? o.slice(0, t) : `${e.slice(0, t - o.length).trimEnd()}${o}`;
+}
+function U(e) {
+  const {
+    anonymizationLevel: t,
+    borrowerName: a,
+    distributionModel: l,
+    formattedLocation: s,
+    loanAmount: w,
+    loanBorrowerCount: b,
+    loanStatus: T,
+    loanUse: c,
+    whySpecial: f
+  } = e, u = s ? `${a} in ${s}` : a, n = t !== "full" && !!c.length, m = ["fundraising", "inactive", "reviewed"].includes(T) ? "helps" : "helped", r = n ? [
+    L(w).format("$0,0"),
+    l === "direct" ? "to" : m,
+    b > 1 ? "a member of" : ""
+  ].filter(Boolean).join(" ") : "";
+  let i = "";
+  n && (i = l === "direct" ? ` ${m} ` : " ");
+  const E = f ? ` This loan is special because ${p(f)}` : "", d = n ? `${p(c)}${E}` : "For the borrower's privacy, this loan has been made anonymous.", h = n ? `${r} ${u}${i}` : "", $ = `${h}${d}`;
+  return {
+    borrowerNameWithCountry: u,
+    loanUsePrefixStart: r ? `${r} ` : "",
+    loanUsePrefixEnd: i,
+    statementTitle: $.length > S ? $ : void 0,
+    visibleUseStatement: g(d, S - h.length)
+  };
+}
+export {
+  S as POST_GOAL_STATEMENT_MAX_LENGTH,
+  U as computePostGoalLoanCardStatement
+};

package/dist/vue/KvCompactLoanCard.css CHANGED Viewed

	@@ -1 +1 @@
1	- .loan-card-use[data-v-~~b1272f83~~]:hover,.loan-card-use[data-v-~~b1272f83~~]: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-~~b1272f83~~]{text-decoration-line:underline}.loan-card-progress[data-v-~~b1272f83~~]:hover,.loan-card-progress[data-v-~~b1272f83~~]:focus{text-decoration-line:none}.loan-card-use-text[data-v-~~b1272f83~~] 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-~~b1272f83~~] form,.loan-card-cta[data-v-~~b1272f83~~] fieldset,.loan-card-cta[data-v-~~b1272f83~~] .tw-w-full,.loan-card-cta[data-v-~~b1272f83~~] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-~~b1272f83~~] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}
1	+ .loan-card-use[data-v-7b59a69b]:hover,.loan-card-use[data-v-7b59a69b]: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-7b59a69b]{text-decoration-line:underline}.loan-card-progress[data-v-7b59a69b]:hover,.loan-card-progress[data-v-7b59a69b]:focus{text-decoration-line:none}.loan-card-use-text[data-v-7b59a69b] 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-7b59a69b] form,.loan-card-cta[data-v-7b59a69b] fieldset,.loan-card-cta[data-v-7b59a69b] .tw-w-full,.loan-card-cta[data-v-7b59a69b] button{height:40px!important;max-height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important}.loan-card-cta[data-v-7b59a69b] .tw-inline-flex{height:40px!important;max-height:40px!important;min-height:40px!important}[data-v-7b59a69b] .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-7b59a69b] .goal-variant-callouts span{font-weight:500}.goal-variant-progress-group[data-v-7b59a69b] div[role=progressbar]{background-color:#d9d9d9}

package/dist/vue/KvCompactLoanCard.js CHANGED Viewed

@@ -1,130 +1,177 @@
-import N from "./KvCompactLoanCard2.js";
-import { KV_COMPACT_LOAN_CARD_FRAGMENT as p, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as $ } from "./KvCompactLoanCard2.js";
-import { resolveComponent as w, openBlock as a, createElementBlock as l, normalizeClass as c, createVNode as i, createCommentVNode as d, createElementVNode as r, normalizeStyle as T, createBlock as s, resolveDynamicComponent as u, withCtx as f, toDisplayString as k, withModifiers as P, Fragment as g, renderList as A } from "vue";
+import T from "./KvCompactLoanCard2.js";
+import { KV_COMPACT_LOAN_CARD_FRAGMENT as le, KV_COMPACT_LOAN_CARD_USER_FRAGMENT as re } from "./KvCompactLoanCard2.js";
+import { resolveComponent as w, openBlock as o, createElementBlock as l, normalizeClass as s, createVNode as i, createCommentVNode as m, createElementVNode as r, normalizeStyle as b, createBlock as d, resolveDynamicComponent as g, withCtx as f, toDisplayString as c, withModifiers as R, Fragment as u, renderList as v } from "vue";
 import "./KvCompactLoanCard.css";
-import R from "../_virtual/_plugin-vue_export-helper.js";
-const B = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, V = { class: "tw-flex-shrink-0 tw-overflow-hidden" }, D = { class: "tw-flex tw-flex-col tw-items-start tw-gap-1 tw-flex-1 tw-min-w-0" }, S = {
+import B from "../_virtual/_plugin-vue_export-helper.js";
+const G = ["aria-busy"], S = { class: "tw-flex tw-flex-col tw-items-start tw-w-full" }, D = {
+  key: 1,
+  class: "tw-flex-shrink-0 tw-overflow-hidden"
+}, U = {
   key: 0,
   class: "tw-mb-0.5 tw-w-full"
-}, F = { class: "tw-text-primary !tw-font-medium tw-text-base tw-leading-normal tw-truncate" }, W = ["href"], j = { class: "tw-truncate" }, E = {
+}, 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" }, I = {
   key: 0,
   class: "loan-card-use-text tw-w-full tw-overflow-hidden"
-}, U = { class: "tw-flex-1 tw-min-w-0 tw-mr-1" }, O = { class: "tw-flex-1 tw-min-w-0" }, K = { class: "tw-p-1 tw-rounded-l-sm tw-border tw-border-gray-100 tw-border-r-0" };
-function z(h, o, t, e, G, H) {
-  const b = w("kv-material-icon"), v = w("kv-borrower-image"), x = w("kv-loan-tag"), m = w("kv-loading-placeholder"), _ = w("kv-loan-use"), y = w("kv-loan-callouts"), L = w("kv-loan-progress-group"), C = w("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-rounded-md tw-shadow-lg tw-w-full", { "tw-relative": t.showRefreshButton, "!tw-p-1.5": t.showLightView }])
+}, K = { class: "tw-flex-1 tw-min-w-0 tw-mr-1" }, z = {
+  class: "tw-flex-1 tw-min-w-0",
+  style: { "max-width": "6.5rem" }
+}, H = { class: "tw-min-w-12" }, 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(k, n, t, e, X, Y) {
+  var x;
+  const y = w("kv-material-icon"), h = w("kv-loading-placeholder"), L = w("kv-borrower-image"), P = w("kv-loan-tag"), C = w("kv-loan-use"), V = w("kv-loan-callouts"), _ = w("kv-loan-progress-group"), N = w("kv-select"), A = w("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": t.showRefreshButton,
+      "!tw-p-1.5": t.showLightView || e.isPostGoalVariant
+    }]),
+    "aria-busy": e.isLoading ? "true" : "false"
   }, [
-    t.showRefreshButton ? (a(), l("button", {
+    t.showRefreshButton ? (o(), 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: o[0] || (o[0] = (...n) => e.handleRefreshButton && e.handleRefreshButton(...n))
+      onClick: n[0] || (n[0] = (...a) => e.handleRefreshButton && e.handleRefreshButton(...a))
     }, [
-      i(b, {
+      i(y, {
         icon: e.mdiCached,
         class: "tw-w-2.5 tw-h-2.5 tw--scale-x-100 tw-text-gray-500"
       }, null, 8, ["icon"])
-    ])) : d("", !0),
-    r("div", B, [
+    ])) : m("", !0),
+    r("div", S, [
       r("div", {
-        class: c(["tw-flex tw-items-start tw-gap-2 tw-w-full loan-card-active-hover", { "!tw-gap-1": t.showLightView }]),
-        style: T(e.customStyle)
+        class: s(["tw-flex tw-items-start tw-gap-2 tw-w-full loan-card-active-hover", {
+          "!tw-gap-1": t.showLightView,
+          "!tw-gap-1.5 md:!tw-gap-2.5": e.isPostGoalVariant
+        }]),
+        style: b(e.customStyle)
       }, [
-        r("div", V, [
-          (a(), s(u(e.tag), {
+        e.isLoading ? (o(), d(h, {
+          key: 0,
+          "aria-hidden": "true",
+          class: s({
+            "!tw-w-7.5 !tw-h-7.5": t.showLightView,
+            "!tw-w-7.5 !tw-h-7.5 md:!tw-w-12.5 md:!tw-h-12.5": e.isPostGoalVariant
+          }),
+          style: b(e.borrowerImageStyle)
+        }, null, 8, ["class", "style"])) : (o(), l("div", D, [
+          (o(), d(g(e.tag), {
             to: e.readMorePath,
             href: e.readMorePath,
             target: t.externalLinksNewTab ? "_blank" : void 0,
             rel: t.externalLinksNewTab ? "noopener noreferrer" : void 0,
             class: "tw-flex",
             "aria-label": "Borrower image",
-            onClick: o[1] || (o[1] = (n) => e.clickReadMore("Photo", n))
+            onClick: n[1] || (n[1] = (a) => e.clickReadMore("Photo", a))
           }, {
             default: f(() => [
-              i(v, {
-                class: c(["tw-bg-gray-300 tw-rounded-sm tw-object-cover tw-bg-clip-content", { "!tw-w-7.5 !tw-h-7.5": t.showLightView }]),
-                style: { width: "100px", height: "100px" },
+              i(L, {
+                class: s(["tw-bg-gray-300 tw-rounded-sm tw-object-cover tw-bg-clip-content", {
+                  "!tw-w-7.5 !tw-h-7.5": t.showLightView,
+                  "!tw-w-7.5 !tw-h-7.5 md:!tw-w-12.5 md:!tw-h-12.5": e.isPostGoalVariant
+                }]),
+                style: b(e.borrowerImageStyle),
                 alt: `Photo of ${e.borrowerName}`,
                 "aspect-ratio": 1,
                 "default-image": { width: 200, faceZoom: 50 },
                 hash: e.imageHash,
                 images: [{ width: 200, faceZoom: 50 }],
                 "photo-path": t.photoPath
-              }, null, 8, ["class", "alt", "hash", "photo-path"])
+              }, null, 8, ["class", "style", "alt", "hash", "photo-path"])
             ]),
             _: 1
           }, 8, ["to", "href", "target", "rel"]))
-        ]),
-        r("div", D, [
-          t.businessName ? (a(), l("div", S, [
-            (a(), s(u(e.tag), {
+        ])),
+        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": e.isPostGoalVariant }])
+        }, [
+          t.businessName ? (o(), l("div", U, [
+            (o(), d(g(e.tag), {
               to: e.readMorePath,
               href: e.readMorePath,
               target: t.externalLinksNewTab ? "_blank" : void 0,
               rel: t.externalLinksNewTab ? "noopener noreferrer" : void 0,
               class: "tw-no-underline hover:tw-underline focus:tw-no-underline",
               "aria-label": "Business name",
-              onClick: o[2] || (o[2] = (n) => e.clickReadMore("Business", n))
+              onClick: n[2] || (n[2] = (a) => e.clickReadMore("Business", a))
             }, {
               default: f(() => [
-                r("h3", F, k(t.businessName), 1)
+                r("h3", W, c(t.businessName), 1)
               ]),
               _: 1
             }, 8, ["to", "href", "target", "rel"])),
-            t.website ? (a(), l("a", {
+            t.website ? (o(), l("a", {
               key: 0,
               href: e.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: o[3] || (o[3] = P((...n) => e.trackWebsiteClick && e.trackWebsiteClick(...n), ["stop"]))
+              onClick: n[3] || (n[3] = R((...a) => e.trackWebsiteClick && e.trackWebsiteClick(...a), ["stop"]))
             }, [
-              i(b, {
+              i(y, {
                 icon: e.mdiLink,
                 class: "tw-w-2 tw-h-2"
               }, null, 8, ["icon"]),
-              r("span", j, k(t.website), 1)
-            ], 8, W)) : d("", !0)
-          ])) : d("", !0),
-          (a(), s(u(e.tag), {
+              r("span", F, c(t.website), 1)
+            ], 8, E)) : m("", !0)
+          ])) : m("", !0),
+          e.isLoading ? m("", !0) : (o(), d(g(e.tag), {
+            key: 1,
             to: e.readMorePath,
             href: e.readMorePath,
             target: t.externalLinksNewTab ? "_blank" : void 0,
             rel: t.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: o[4] || (o[4] = (n) => e.clickReadMore("Tag", n))
+            onClick: n[4] || (n[4] = (a) => e.clickReadMore("Tag", a))
           }, {
             default: f(() => [
-              t.showTags && !e.isLoading ? (a(), s(x, {
+              t.showTags ? (o(), d(P, {
                 key: 0,
+                class: s({
+                  "tw-mb-1 !tw-font-medium": e.isPostGoalVariant
+                }),
                 loan: t.loan
-              }, null, 8, ["loan"])) : d("", !0)
+              }, null, 8, ["class", "loan"])) : m("", !0)
             ]),
             _: 1
           }, 8, ["to", "href", "target", "rel"])),
-          t.showLoanUse ? (a(), s(u(e.tag), {
-            key: 1,
+          e.isPostGoalVariant ? (o(), l(u, { key: 2 }, [
+            e.isLoading ? (o(), l(u, { key: 0 }, v(4, (a) => i(h, {
+              key: a,
+              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", {
+              key: 1,
+              class: "tw-text-small tw-mb-0 tw-leading-normal",
+              style: { "line-height": "150%" },
+              title: e.statementTitle,
+              "data-testid": "loan-use-statement"
+            }, [
+              r("span", null, c(e.loanUsePrefixStart), 1),
+              r("span", j, c(e.borrowerNameWithCountry), 1),
+              r("span", null, c(e.loanUsePrefixEnd), 1),
+              r("span", null, c(e.visibleUseStatement), 1)
+            ], 8, O))
+          ], 64)) : t.showLoanUse ? (o(), d(g(e.tag), {
+            key: 3,
             to: e.readMorePath,
             href: e.readMorePath,
             target: t.externalLinksNewTab ? "_blank" : void 0,
             rel: t.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: o[5] || (o[5] = (n) => e.clickReadMore("Use", n))
+            onClick: n[5] || (n[5] = (a) => e.clickReadMore("Use", a))
           }, {
             default: f(() => [
-              e.isLoading ? (a(), l("div", E, [
-                (a(!0), l(g, null, A([...Array(e.loanUseLoadingRows)], (n, M) => (a(), l("div", {
+              e.isLoading ? (o(), l("div", I, [
+                (o(!0), l(u, null, v([...Array(e.loanUseLoadingRows)], (a, M) => (o(), l("div", {
                   key: M,
                   class: "tw-h-2 tw-mb-1"
                 }, [
-                  i(m)
+                  i(h)
                 ]))), 128))
-              ])) : (a(), l("div", {
+              ])) : (o(), l("div", {
                 key: 1,
-                class: c(["loan-card-use-text tw-w-full tw-overflow-hidden", { "!tw--mt-1": t.showTags && t.loan.matchingText && t.showLightView }])
+                class: s(["loan-card-use-text tw-w-full tw-overflow-hidden", { "!tw--mt-1": t.showTags && t.loan.matchingText && t.showLightView }])
               }, [
-                i(_, {
+                i(C, {
                   use: e.loanUse,
                   "loan-amount": e.loanAmount,
                   status: e.loanStatus,
@@ -140,29 +187,58 @@ function z(h, o, t, e, G, H) {
               ], 2))
             ]),
             _: 1
-          }, 8, ["to", "href", "target", "rel"])) : d("", !0)
-        ])
+          }, 8, ["to", "href", "target", "rel"])) : m("", !0)
+        ], 2)
       ], 6),
-      e.isLoading || typeof e.loanCallouts > "u" ? (a(), s(m, {
+      e.isLoading || typeof e.loanCallouts > "u" ? (o(), d(h, {
         key: 0,
         class: "tw-mt-1.5 tw-mb-1 tw-rounded-full",
         style: { width: "60%", height: "1.5rem" }
-      })) : (a(), s(y, {
+      })) : (o(), d(V, {
         key: 1,
         callouts: e.loanCallouts,
-        class: "tw-mt-1.5",
-        onClick: o[6] || (o[6] = (n) => h.$emit("jump-filter-page", n))
-      }, null, 8, ["callouts"]))
+        class: s(["tw-mt-1.5", { "goal-variant-callouts": e.isPostGoalVariant }]),
+        onClick: n[6] || (n[6] = (a) => k.$emit("jump-filter-page", a))
+      }, null, 8, ["callouts", "class"]))
     ]),
     r("div", {
-      class: c([
-        "tw-flex tw-items-center tw-justify-between tw-w-full tw-mt-1",
-        { "tw-gap-1": e.sharesAvailable }
-      ])
+      class: s(["tw-flex tw-items-center tw-justify-between tw-w-full tw-mt-1", {
+        "tw-gap-1": e.sharesAvailable,
+        "!tw-items-end !tw-gap-2": e.isPostGoalVariant
+      }])
     }, [
-      e.hasProgressData ? (a(), l(g, { key: 1 }, [
-        r("div", O, [
-          e.sharesAvailable ? (a(), s(u(e.tag), {
+      e.hasProgressData ? e.isPostGoalVariant ? (o(), l(u, { key: 1 }, [
+        r("div", z, [
+          i(_, {
+            "money-left": e.unreservedAmount,
+            "progress-percent": e.fundraisingPercent,
+            class: "tw-text-black goal-variant-progress-group"
+          }, null, 8, ["money-left", "progress-percent"])
+        ]),
+        r("div", H, [
+          i(N, {
+            id: `PostGoalAmountDropdown_${((x = t.loan) == null ? void 0 : x.id) ?? t.loanId}`,
+            modelValue: e.selectedAmount,
+            "onUpdate:modelValue": [
+              n[7] || (n[7] = (a) => e.selectedAmount = a),
+              e.handleSelectedAmount
+            ],
+            "aria-label": "Lend amount",
+            disabled: !e.amountOptions.length,
+            class: "amount-dropdown"
+          }, {
+            default: f(() => [
+              (o(!0), l(u, null, v(e.amountOptions, (a) => (o(), l("option", {
+                key: a,
+                value: a
+              }, " $" + c(a), 9, Z))), 128))
+            ]),
+            _: 1
+          }, 8, ["id", "modelValue", "disabled", "onUpdate:modelValue"])
+        ])
+      ], 64)) : (o(), l(u, { key: 2 }, [
+        r("div", q, [
+          e.sharesAvailable ? (o(), d(g(e.tag), {
             key: 0,
             to: e.readMorePath,
             href: e.readMorePath,
@@ -170,10 +246,10 @@ function z(h, o, t, e, G, H) {
             rel: t.externalLinksNewTab ? "noopener noreferrer" : void 0,
             class: "loan-card-progress tw-no-underline tw-block",
             "aria-label": "Loan progress",
-            onClick: o[7] || (o[7] = (n) => e.clickReadMore("Progress", n))
+            onClick: n[8] || (n[8] = (a) => e.clickReadMore("Progress", a))
           }, {
             default: f(() => [
-              i(L, {
+              i(_, {
                 id: "loanProgress",
                 "money-left": e.unreservedAmount,
                 "progress-percent": e.fundraisingPercent,
@@ -181,21 +257,21 @@ function z(h, o, t, e, G, H) {
               }, null, 8, ["money-left", "progress-percent"])
             ]),
             _: 1
-          }, 8, ["to", "href", "target", "rel"])) : d("", !0)
+          }, 8, ["to", "href", "target", "rel"])) : m("", !0)
         ]),
-        t.showLightView ? (a(), l("button", {
+        t.showLightView ? (o(), l("button", {
           key: 0,
           class: "tw-ml-2",
-          onClick: o[8] || (o[8] = (n) => e.clickReadMore("View", n))
+          onClick: n[9] || (n[9] = (a) => e.clickReadMore("View", a))
         }, [
-          r("span", K, " $" + k(t.customAmountLent), 1),
-          o[12] || (o[12] = 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", {
+          r("span", J, " $" + c(t.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", {
           key: 1,
-          class: c(["tw-flex-shrink-0 loan-card-cta", { "tw-w-full": !e.sharesAvailable }]),
+          class: s(["tw-flex-shrink-0 loan-card-cta", { "tw-w-full": !e.sharesAvailable }]),
           style: { height: "40px" }
         }, [
-          i(C, {
+          i(A, {
             loan: t.loan,
             "unreserved-amount": e.unreservedAmount,
             "basket-items": t.basketItems,
@@ -215,34 +291,34 @@ function z(h, o, t, e, G, H) {
             "primary-button-text": t.primaryButtonText,
             "secondary-button-text": t.secondaryButtonText,
             "secondary-button-handler": t.secondaryButtonHandler,
-            onAddToBasket: o[9] || (o[9] = (n) => h.$emit("add-to-basket", n)),
-            onShowLoanDetails: o[10] || (o[10] = (n) => e.clickReadMore("ViewLoan", n)),
-            onRemoveFromBasket: o[11] || (o[11] = (n) => h.$emit("remove-from-basket", n))
+            onAddToBasket: n[10] || (n[10] = (a) => k.$emit("add-to-basket", a)),
+            onShowLoanDetails: n[11] || (n[11] = (a) => e.clickReadMore("ViewLoan", a)),
+            onRemoveFromBasket: n[12] || (n[12] = (a) => k.$emit("remove-from-basket", a))
           }, 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)) : (a(), l(g, { key: 0 }, [
-        r("div", U, [
-          i(m, {
+      ], 64)) : (o(), l(u, { key: 0 }, [
+        r("div", K, [
+          i(h, {
             class: "tw-mb-0.5",
             style: { width: "100%", maxWidth: "11rem", height: "1rem" }
           }),
-          i(m, {
+          i(h, {
             class: "tw-rounded",
             style: { width: "100%", maxWidth: "11rem", height: "0.5rem" }
           })
         ]),
-        e.allDataLoaded ? d("", !0) : (a(), s(m, {
+        e.allDataLoaded ? m("", !0) : (o(), d(h, {
           key: 0,
           class: "tw-rounded tw-flex-shrink-0",
           style: { width: "8rem", height: "2.5rem" }
         }))
       ], 64))
     ], 2)
-  ], 2);
+  ], 10, G);
 }
-const Q = /* @__PURE__ */ R(N, [["render", z], ["__scopeId", "data-v-b1272f83"]]);
+const ae = /* @__PURE__ */ B(T, [["render", Q], ["__scopeId", "data-v-7b59a69b"]]);
 export {
-  p as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  $ as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  Q as default
+  le as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  re as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  ae as default
 };

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

@@ -3,6 +3,11 @@ import { GetCookieFn, SetCookieFn } from '../utils/loanUtils';
 export declare const KV_COMPACT_LOAN_CARD_FRAGMENT: import('graphql').DocumentNode;
 export declare const KV_COMPACT_LOAN_CARD_USER_FRAGMENT: import('graphql').DocumentNode;
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    variant: {
+        type: StringConstructor;
+        default: "default";
+        validator: (value: string) => boolean;
+    };
     loanId: {
         type: NumberConstructor;
         default: any;
@@ -137,7 +142,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>, {
     allDataLoaded: import('vue').ComputedRef<boolean>;
+    amountOptions: import('vue').ComputedRef<string[]>;
+    borrowerImageStyle: import('vue').ComputedRef<{
+        width: string;
+        height: string;
+    }>;
     borrowerName: import('vue').ComputedRef<any>;
+    borrowerNameWithCountry: import('vue').ComputedRef<string>;
     city: import('vue').ComputedRef<any>;
     countryName: import('vue').ComputedRef<any>;
     distributionModel: import('vue').ComputedRef<any>;
@@ -147,11 +158,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     hasProgressData: import('vue').ComputedRef<boolean>;
     imageHash: import('vue').ComputedRef<any>;
     isLoading: import('vue').ComputedRef<boolean>;
+    isPostGoalVariant: import('vue').ComputedRef<boolean>;
     loanAmount: import('vue').ComputedRef<any>;
     loanBorrowerCount: import('vue').ComputedRef<any>;
     loanCallouts: import('vue').ComputedRef<import('..').Callout[]>;
     loanStatus: import('vue').ComputedRef<any>;
     loanUse: import('vue').ComputedRef<any>;
+    loanUsePrefixEnd: import('vue').ComputedRef<string>;
+    loanUsePrefixStart: import('vue').ComputedRef<string>;
     mdiMapMarker: string;
     mdiHome: string;
     mdiLink: string;
@@ -161,18 +175,30 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     tag: import('vue').ComputedRef<"router-link" | "a">;
     unreservedAmount: import('vue').ComputedRef<any>;
     sharesAvailable: import('vue').ComputedRef<boolean>;
+    selectedAmount: import('vue').Ref<string, string>;
+    statementTitle: import('vue').ComputedRef<string>;
     customStyle: import('vue').ComputedRef<{
+        height?: undefined;
+        maxHeight?: undefined;
+    } | {
         height: string;
         maxHeight: string;
     }>;
     loanUseLoadingRows: import('vue').ComputedRef<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;
-}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("add-to-basket" | "remove-from-basket" | "jump-filter-page" | "refresh-button")[], "add-to-basket" | "remove-from-basket" | "jump-filter-page" | "refresh-button", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("show-loan-details" | "add-to-basket" | "remove-from-basket" | "jump-filter-page" | "refresh-button" | "update:selected-amount")[], "show-loan-details" | "add-to-basket" | "remove-from-basket" | "jump-filter-page" | "refresh-button" | "update:selected-amount", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    variant: {
+        type: StringConstructor;
+        default: "default";
+        validator: (value: string) => boolean;
+    };
     loanId: {
         type: NumberConstructor;
         default: any;
@@ -307,10 +333,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{
     "onAdd-to-basket"?: (...args: any[]) => any;
+    "onShow-loan-details"?: (...args: any[]) => any;
     "onRemove-from-basket"?: (...args: any[]) => any;
     "onJump-filter-page"?: (...args: any[]) => any;
     "onRefresh-button"?: (...args: any[]) => any;
+    "onUpdate:selected-amount"?: (...args: any[]) => any;
 }>, {
+    variant: string;
     loan: Record<string, any>;
     externalLinks: boolean;
     customLoanDetails: boolean;
@@ -1295,5 +1324,62 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             bgVariant: string;
         }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
     }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    KvSelect: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        id: {
+            type: StringConstructor;
+            required: true;
+            default: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        modelValue: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+    }>, {
+        mdiChevronDown: string;
+        onChange: (event: any) => void;
+        classes: any[];
+        styles: any[];
+        inputAttrs: any;
+        inputListeners: any;
+        inputValue: import('vue').Ref<string | number, string | number>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, string[], string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        id: {
+            type: StringConstructor;
+            required: true;
+            default: string;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        modelValue: {
+            type: (StringConstructor | NumberConstructor)[];
+            default: number;
+        };
+    }>> & Readonly<{
+        [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
+    }>, {
+        id: string;
+        disabled: boolean;
+        modelValue: string | number;
+    }, {}, {
+        KvMaterialIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            icon: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            icon: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & Readonly<{}>, {
+            icon: string;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/vue/KvCompactLoanCard2.js CHANGED Viewed

@@ -1,21 +1,27 @@
-import r from "graphql-tag";
-import R from "numeral";
-import { computed as n } from "vue";
-import { mdiMapMarker as F, mdiHome as M, mdiLink as S, mdiCached as E } from "@mdi/js";
-import { LOAN_CALLOUTS_FRAGMENT as O, LOAN_GEOCODE_FRAGMENT as G, LOAN_PROGRESS_FRAGMENT as P, loanCardComputedProperties as V, loanCardMethods as U } from "../utils/loanCard.js";
-import D from "./KvLoanUse.js";
-import $ from "./KvBorrowerImage.js";
-import W from "./KvLoanCallouts.js";
-import I from "./KvLendCta.js";
-import x from "./KvLoanProgressGroup.js";
-import H from "./KvLoanTag.js";
-import j from "./KvMaterialIcon.js";
-import q from "./KvLoadingPlaceholder.js";
-import z from "./KvLoanTeamPick.js";
-import { KV_LEND_CTA_FRAGMENT as J, KV_LEND_CTA_USER_FRAGMENT as Q } from "./KvLendCta2.js";
-import { KV_LOAN_TAG_FRAGMENT as X } from "./KvLoanTag2.js";
-import { KV_LOAN_USE_FRAGMENT as Y } from "./KvLoanUse2.js";
-const ge = r`
+import C from "graphql-tag";
+import W from "numeral";
+import { ref as $, computed as o, watch as H } from "vue";
+import { mdiMapMarker as j, mdiHome as q, mdiLink as z, mdiCached 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 re from "./KvLoanUse.js";
+import le from "./KvBorrowerImage.js";
+import ie from "./KvLoanCallouts.js";
+import ue from "./KvLendCta.js";
+import se 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 Le, KV_LEND_CTA_USER_FRAGMENT as he } from "./KvLendCta2.js";
+import { KV_LOAN_TAG_FRAGMENT as ye } from "./KvLoanTag2.js";
+import { KV_LOAN_USE_FRAGMENT as ge } from "./KvLoanUse2.js";
+const d = {
+  default: "default",
+  postGoal: "post-goal"
+}, Ae = (e) => e < 500 && e >= 25, Ce = (e) => oe(e) || Ae(e), $e = C`
 	fragment KvCompactLoanCard on LoanBasic {
 		id
 		image {
@@ -37,32 +43,38 @@ const ge = r`
 		...LoanGeocode
 		...LoanProgress
 	}
-	${J}
+	${Le}
+	${ye}
+	${ge}
+	${Q}
 	${X}
 	${Y}
-	${O}
-	${G}
-	${P}
-`, Ce = r`
+`, He = C`
 	fragment KvCompactLoanCardUser on LoanBasic {
 		id
 		...KvLendCtaUser
 	}
-	${Q}
-`, Ae = {
+	${he}
+`, je = {
   name: "KvCompactLoanCard",
   components: {
-    KvBorrowerImage: $,
-    KvLoadingPlaceholder: q,
-    KvLoanUse: D,
-    KvMaterialIcon: j,
-    KvLendCta: I,
-    KvLoanTag: H,
-    KvLoanCallouts: W,
-    KvLoanTeamPick: z,
-    KvLoanProgressGroup: x
+    KvBorrowerImage: le,
+    KvLoadingPlaceholder: fe,
+    KvLoanUse: re,
+    KvMaterialIcon: me,
+    KvLendCta: ue,
+    KvLoanTag: de,
+    KvLoanCallouts: ie,
+    KvLoanTeamPick: ce,
+    KvLoanProgressGroup: se,
+    KvSelect: ve
   },
   props: {
+    variant: {
+      type: String,
+      default: d.default,
+      validator: (e) => Object.values(d).includes(e)
+    },
     loanId: {
       type: Number,
       default: void 0
@@ -200,92 +212,166 @@ const ge = r`
     "refresh-button",
     "jump-filter-page",
     "add-to-basket",
-    "remove-from-basket"
+    "remove-from-basket",
+    "show-loan-details",
+    "update:selected-amount"
   ],
-  setup(e, { emit: t }) {
-    const {
-      allDataLoaded: a,
-      borrowerName: i,
-      city: s,
-      countryName: l,
-      distributionModel: u,
-      formattedLocation: d,
-      fundraisingPercent: m,
-      hasProgressData: f,
-      imageHash: c,
-      isLoading: p,
-      loanAmount: L,
-      loanBorrowerCount: h,
-      loanCallouts: y,
-      loanStatus: g,
-      loanUse: C,
-      readMorePath: A,
-      state: _,
-      tag: N,
-      unreservedAmount: b,
-      sharesAvailable: B
-    } = V(e), {
-      clickReadMore: T
-    } = U(e, t), v = n(() => {
+  setup(e, { emit: n }) {
+    const r = $(""), u = o(
+      () => e.variant === d.postGoal
+    ), {
+      allDataLoaded: p,
+      borrowerName: m,
+      city: b,
+      countryName: S,
+      distributionModel: f,
+      formattedLocation: c,
+      fundraisingPercent: w,
+      hasProgressData: N,
+      imageHash: _,
+      isLoading: B,
+      loanAmount: v,
+      loanBorrowerCount: L,
+      loanCallouts: T,
+      loanStatus: h,
+      loanUse: y,
+      readMorePath: k,
+      state: F,
+      tag: K,
+      unreservedAmount: s,
+      sharesAvailable: R
+    } = Z(e), { clickReadMore: P } = ee(e, n), M = o(() => u.value ? void 0 : { width: "100px", height: "100px" }), E = o(() => {
       if (!e.website)
         return "";
-      const o = e.website.trim();
-      return o.startsWith("http://") || o.startsWith("https://") ? o : `https://${o}`;
-    }), w = n(() => {
-      const o = e.showLightView ? "auto" : "6.75rem", K = e.showLightView ? "none" : "6.75rem";
-      return { height: o, maxHeight: K };
-    }), k = n(() => e.showLightView ? 3 : 4);
+      const t = e.website.trim();
+      return t.startsWith("http://") || t.startsWith("https://") ? t : `https://${t}`;
+    }), G = o(() => {
+      if (u.value) return {};
+      const t = e.showLightView ? "auto" : "6.75rem", a = e.showLightView ? "none" : "6.75rem";
+      return { height: t, maxHeight: a };
+    }), l = o(() => {
+      var t, a;
+      return ne({
+        anonymizationLevel: (t = e.loan) == null ? void 0 : t.anonymizationLevel,
+        borrowerName: m.value,
+        distributionModel: f.value,
+        formattedLocation: c.value,
+        loanAmount: v.value,
+        loanBorrowerCount: L.value,
+        loanStatus: h.value,
+        loanUse: y.value,
+        whySpecial: (a = e.loan) == null ? void 0 : a.whySpecial
+      });
+    }), O = o(() => l.value.borrowerNameWithCountry), U = o(() => l.value.loanUsePrefixStart), D = o(() => l.value.loanUsePrefixEnd), V = o(() => l.value.statementTitle), x = o(() => l.value.visibleUseStatement), g = o(() => {
+      var i;
+      const t = parseFloat(s.value);
+      if (!t) return [];
+      const a = t < 25 ? parseFloat(`${((i = e.loan) == null ? void 0 : i.minNoteSize) ?? 25}`) : 25;
+      return te(
+        s.value,
+        Ce(t),
+        a,
+        e.enableFiveDollarsNotes,
+        e.isVisitor
+      );
+    });
+    H(
+      g,
+      (t) => {
+        var i, A;
+        if (!u.value) return;
+        if (!t.length) {
+          r.value = "";
+          return;
+        }
+        const a = ae(
+          e.getCookie,
+          e.setCookie,
+          e.enableFiveDollarsNotes,
+          (A = (i = e.route) == null ? void 0 : i.query) == null ? void 0 : A.utm_campaign,
+          s.value,
+          e.userBalance ? parseFloat(e.userBalance) : void 0,
+          e.fiveDollarsSelected
+        );
+        r.value = t.includes(a) ? a : t[0];
+      },
+      { immediate: !0 }
+    );
+    const I = o(() => e.showLightView ? 3 : 4);
     return {
-      allDataLoaded: a,
-      borrowerName: i,
-      city: s,
-      countryName: l,
-      distributionModel: u,
-      formattedLocation: d,
-      formattedWebsite: v,
-      fundraisingPercent: m,
-      hasProgressData: f,
-      imageHash: c,
-      isLoading: p,
-      loanAmount: L,
-      loanBorrowerCount: h,
-      loanCallouts: y,
-      loanStatus: g,
-      loanUse: C,
-      mdiMapMarker: F,
-      mdiHome: M,
-      mdiLink: S,
-      mdiCached: E,
-      readMorePath: A,
-      state: _,
-      tag: N,
-      unreservedAmount: b,
-      sharesAvailable: B,
-      customStyle: w,
-      loanUseLoadingRows: k,
-      clickReadMore: T,
+      allDataLoaded: p,
+      amountOptions: g,
+      borrowerImageStyle: M,
+      borrowerName: m,
+      borrowerNameWithCountry: O,
+      city: b,
+      countryName: S,
+      distributionModel: f,
+      formattedLocation: c,
+      formattedWebsite: E,
+      fundraisingPercent: w,
+      hasProgressData: N,
+      imageHash: _,
+      isLoading: B,
+      isPostGoalVariant: u,
+      loanAmount: v,
+      loanBorrowerCount: L,
+      loanCallouts: T,
+      loanStatus: h,
+      loanUse: y,
+      loanUsePrefixEnd: D,
+      loanUsePrefixStart: U,
+      mdiMapMarker: j,
+      mdiHome: q,
+      mdiLink: z,
+      mdiCached: J,
+      readMorePath: k,
+      state: F,
+      tag: K,
+      unreservedAmount: s,
+      sharesAvailable: R,
+      selectedAmount: r,
+      statementTitle: V,
+      customStyle: G,
+      loanUseLoadingRows: I,
+      visibleUseStatement: x,
+      clickReadMore: P,
       trackWebsiteClick: () => {
-        e.kvTrackFunction("Lending", "click-Business Website", "Website", e.loanId);
+        e.kvTrackFunction(
+          "Lending",
+          "click-Business Website",
+          "Website",
+          e.loanId
+        );
       },
-      handleRefreshButton: (o) => {
-        t("refresh-button", o);
+      handleRefreshButton: (t) => {
+        n("refresh-button", t);
+      },
+      handleSelectedAmount: (t) => {
+        var a;
+        r.value = t, n("update:selected-amount", t), e.kvTrackFunction(
+          "Lending",
+          "Modify lend amount",
+          t,
+          e.loanId ?? ((a = e.loan) == null ? void 0 : a.id)
+        );
       }
     };
   },
   computed: {
     lendersNumber() {
-      var e, t;
-      return ((t = (e = this.loan) == null ? void 0 : e.lenders) == null ? void 0 : t.totalCount) ?? 0;
+      var e, n;
+      return ((n = (e = this.loan) == null ? void 0 : e.lenders) == null ? void 0 : n.totalCount) ?? 0;
     },
     amountLent() {
-      var t, a;
-      const e = ((a = (t = this.loan) == null ? void 0 : t.loanFundraisingInfo) == null ? void 0 : a.fundedAmount) ?? 0;
-      return R(e).format("$0,0");
+      var n, r;
+      const e = ((r = (n = this.loan) == null ? void 0 : n.loanFundraisingInfo) == null ? void 0 : r.fundedAmount) ?? 0;
+      return W(e).format("$0,0");
     }
   }
 };
 export {
-  ge as KV_COMPACT_LOAN_CARD_FRAGMENT,
-  Ce as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
-  Ae as default
+  $e as KV_COMPACT_LOAN_CARD_FRAGMENT,
+  He as KV_COMPACT_LOAN_CARD_USER_FRAGMENT,
+  je as default
 };

package/dist/vue/KvPieChartV2.css CHANGED Viewed

	@@ -1 +1 @@
1	- .segment-circle[data-v-~~3e2d3156~~]{transition:stroke-dashoffset .5s ease-in-out}.skeleton-ring[data-v-~~3e2d3156~~]{transition:opacity .5s ease-in-out}.legend-dot[data-v-~~3e2d3156~~]{transition:background-color .5s ease-in-out}
1	+ .segment-circle[data-v-73c9f5f9]{transition:stroke-dashoffset .5s ease-in-out}.skeleton-ring[data-v-73c9f5f9]{opacity:1;transition:opacity .5s ease-in-out}.skeleton-ring--loading[data-v-73c9f5f9]{animation:skeleton-ring-pulse-73c9f5f9 1.4s ease-in-out infinite;transform-origin:center}.legend-dot[data-v-73c9f5f9]{transition:background-color .5s ease-in-out}@keyframes skeleton-ring-pulse-73c9f5f9{0%,to{opacity:.45}50%{opacity:1}}@media (prefers-reduced-motion: reduce){.skeleton-ring--loading[data-v-73c9f5f9]{animation:none}}

package/dist/vue/KvPieChartV2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import y from "./KvPieChartV22.js";
-import { resolveComponent as x, openBlock as l, createElementBlock as o, createElementVNode as r, normalizeClass as k, createCommentVNode as n, Fragment as d, renderList as c, normalizeStyle as a, toDisplayString as w, createBlock as _, withCtx as b } from "vue";
+import { resolveComponent as x, openBlock as l, createElementBlock as o, createElementVNode as r, normalizeClass as k, createCommentVNode as n, Fragment as d, renderList as c, normalizeStyle as s, toDisplayString as w, createBlock as _, withCtx as b } from "vue";
 import "./KvPieChartV2.css";
 import u from "../_virtual/_plugin-vue_export-helper.js";
 const v = {
@@ -14,25 +14,25 @@ const v = {
 }, S = ["cx", "cy", "r", "stroke", "stroke-width"], L = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], O = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray", "transform"], V = {
   key: 0,
   class: "tw-flex tw-flex-wrap tw-justify-center tw-gap-0.5 tw-w-full tw-pt-0.5"
-}, W = { class: "tw-flex tw-gap-0.5 tw-items-center tw-min-w-0 tw-overflow-hidden" }, p = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, B = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0" }, I = { class: "tw-grid tw-grid-cols-2 tw-grid-flow-row tw-gap-0.5" }, E = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0 tw-overflow-hidden" }, X = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, Y = {
+}, W = { class: "tw-flex tw-gap-0.5 tw-items-center tw-min-w-0 tw-overflow-hidden" }, B = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, p = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0" }, E = { class: "tw-grid tw-grid-cols-2 tw-grid-flow-row tw-gap-0.5" }, I = { class: "tw-flex tw-gap-0.5 tw-items-center tw-shrink-0 tw-overflow-hidden" }, X = { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap tw-truncate" }, Y = {
   class: "tw-font-light tw-text-small tw-text-primary tw-text-right tw-shrink-0 tw-tabular-nums",
   style: { "min-width": "2.8ch" }
 };
-function G(N, s, i, t, M, R) {
+function G(N, i, a, t, M, R) {
   var h, m;
   const f = x("kv-lightbox");
   return l(), o("figure", v, [
     r("div", C, [
       (l(), o("svg", D, [
-        i.loading || !t.hasData ? (l(), o("circle", {
+        a.loading || !t.hasData ? (l(), o("circle", {
           key: 0,
           cx: t.CX,
           cy: t.CY,
           r: t.radius,
           stroke: t.LOADING_BG_COLOR,
-          "stroke-width": i.strokeWidth,
+          "stroke-width": a.strokeWidth,
           fill: "none",
-          class: k(["skeleton-ring tw-opacity-0", { "skeleton-ring--hidden": t.animatedIn }])
+          class: k(["skeleton-ring", { "skeleton-ring--loading": a.loading }])
         }, null, 10, S)) : n("", !0),
         (l(!0), o(d, null, c(t.visibleSegments, (e) => (l(), o("circle", {
           key: e.label,
@@ -40,12 +40,12 @@ function G(N, s, i, t, M, R) {
           cy: t.CY,
           r: t.radius,
           stroke: e.color,
-          "stroke-width": i.strokeWidth,
+          "stroke-width": a.strokeWidth,
           fill: "none",
           "stroke-dasharray": `${e.dashLength} ${t.circumference * 2}`,
           transform: `rotate(${e.startDeg}, ${t.CX}, ${t.CY})`,
           class: "segment-circle",
-          style: a({
+          style: s({
             strokeDashoffset: e.isVisible ? 0 : e.dashLength,
             transitionDelay: `${e.delay}ms`
           })
@@ -56,19 +56,19 @@ function G(N, s, i, t, M, R) {
           cy: t.CY,
           r: t.radius,
           stroke: t.OTHER_SEGMENT_BG_COLOR,
-          "stroke-width": i.strokeWidth,
+          "stroke-width": a.strokeWidth,
           fill: "none",
           "stroke-dasharray": `${t.otherSegment.dashLength} ${t.circumference * 2}`,
           transform: `rotate(${t.otherSegment.startDeg}, ${t.CX}, ${t.CY})`,
           class: "segment-circle",
-          style: a({
+          style: s({
             strokeDashoffset: t.otherSegment.isVisible ? 0 : t.otherSegment.dashLength,
             transitionDelay: `${t.otherSegment.delay}ms`
           })
         }, null, 12, O)) : n("", !0)
       ]))
     ]),
-    t.hasData && !i.loading ? (l(), o("div", V, [
+    t.hasData && !a.loading ? (l(), o("div", V, [
       (l(!0), o(d, null, c(t.visibleSegments, (e, g) => (l(), o("div", {
         key: e.label,
         class: "tw-bg-gray-100 tw-flex tw-gap-0.5 tw-items-center tw-px-1 tw-py-0.5 tw-rounded-xs"
@@ -76,56 +76,56 @@ function G(N, s, i, t, M, R) {
         r("div", W, [
           r("span", {
             class: "tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full legend-dot",
-            style: a({
+            style: s({
               backgroundColor: e.isVisible ? e.color : "#d1d5db",
               transitionDelay: `${e.delay}ms`
             })
           }, null, 4),
-          r("span", p, w(e.label), 1)
+          r("span", B, w(e.label), 1)
         ]),
         r("span", {
           class: "tw-font-light tw-text-small tw-text-primary tw-text-right tw-shrink-0 tw-tabular-nums",
-          style: a({ minWidth: t.valueMinWidth })
+          style: s({ minWidth: t.valueMinWidth })
         }, w(t.formatDisplayValue(g)), 5)
       ]))), 128)),
       t.otherItems.length > 0 ? (l(), o("button", {
         key: 0,
         class: "tw-bg-gray-100 tw-flex tw-gap-0.5 tw-items-center tw-px-1 tw-py-0.5 tw-rounded-xs tw-cursor-pointer tw-border-0 tw-text-left",
         type: "button",
-        onClick: s[0] || (s[0] = (e) => t.showOtherLightbox = !0)
+        onClick: i[0] || (i[0] = (e) => t.showOtherLightbox = !0)
       }, [
-        r("div", B, [
+        r("div", p, [
           r("span", {
             class: "tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full legend-dot",
-            style: a({
+            style: s({
               backgroundColor: (h = t.otherSegment) != null && h.isVisible ? "#C4C4C4" : "#d1d5db",
               transitionDelay: `${((m = t.otherSegment) == null ? void 0 : m.delay) ?? 0}ms`
             })
           }, null, 4),
-          s[2] || (s[2] = r("span", { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap" }, " Other ", -1))
+          i[2] || (i[2] = r("span", { class: "tw-font-medium tw-text-small tw-text-primary tw-whitespace-nowrap" }, " Other ", -1))
         ]),
         r("span", {
           class: "tw-font-light tw-text-small tw-text-primary tw-text-right tw-shrink-0 tw-tabular-nums",
-          style: a({ minWidth: t.valueMinWidth })
+          style: s({ minWidth: t.valueMinWidth })
         }, w(t.formatOtherDisplayValue()), 5)
       ])) : n("", !0)
     ])) : n("", !0),
-    t.hasData && !i.loading ? (l(), _(f, {
+    t.hasData && !a.loading ? (l(), _(f, {
       key: 1,
       visible: t.showOtherLightbox,
       title: "Other",
-      onLightboxClosed: s[1] || (s[1] = (e) => t.showOtherLightbox = !1)
+      onLightboxClosed: i[1] || (i[1] = (e) => t.showOtherLightbox = !1)
     }, {
       default: b(() => [
-        r("div", I, [
+        r("div", E, [
           (l(!0), o(d, null, c(t.allItemsWithColors, (e) => (l(), o("div", {
             key: e.label,
             class: "tw-bg-gray-100 tw-flex tw-gap-0.5 tw-items-center tw-px-1 tw-py-0.5 tw-rounded-xs tw-justify-between tw-w-full"
           }, [
-            r("div", E, [
+            r("div", I, [
               r("span", {
                 class: "tw-shrink-0 tw-w-1 tw-h-1 tw-rounded-full",
-                style: a({ backgroundColor: e.color })
+                style: s({ backgroundColor: e.color })
               }, null, 4),
               r("span", X, w(e.label), 1)
             ]),
@@ -137,7 +137,7 @@ function G(N, s, i, t, M, R) {
     }, 8, ["visible"])) : n("", !0)
   ]);
 }
-const A = /* @__PURE__ */ u(y, [["render", G], ["__scopeId", "data-v-3e2d3156"]]);
+const A = /* @__PURE__ */ u(y, [["render", G], ["__scopeId", "data-v-73c9f5f9"]]);
 export {
   A as default
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "8.12.0",
+  "version": "8.13.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -125,5 +125,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "395f5add0d2149a52dd1e07d7df2da2a321ab11a"
+  "gitHead": "6d0e8c2b071887742cecc20e460e29d55f181360"
 }