@kiva/kv-components 5.3.0 → 5.3.2

package/dist/vue/KvLendCta.css

@@ -1 +1 @@
-.amountDropdownWrapper[data-v-e8a71378] select{border-radius:14px 0 0 14px}.lend-again[data-v-e8a71378] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-e8a71378] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-e8a71378] select{cursor:pointer;border-radius:.875rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-e8a71378] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-e8a71378] select{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}.preset-option[data-v-e8a71378] span.tw-w-full:first-child{border-width:2px;--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-option[data-v-e8a71378] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}
+.amountDropdownWrapper[data-v-f7e50991] select{border-radius:14px 0 0 14px}.lend-again[data-v-f7e50991] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-f7e50991] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-f7e50991] select{cursor:pointer;border-radius:.875rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-f7e50991] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-f7e50991] select{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}.preset-option[data-v-f7e50991] span.tw-w-full:first-child{border-width:2px;--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-option[data-v-f7e50991] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}

package/dist/vue/KvLendCta.js

@@ -4,7 +4,7 @@ import C from "./KvLendAmountButton.js";
 import _ from "./KvSelect.js";
 import D from "./KvButton.js";
 import P from "./KvMaterialIcon.js";
-import { resolveComponent as w, openBlock as i, createElementBlock as a, createBlock as l, normalizeClass as d, withCtx as r, createTextVNode as c, toDisplayString as m, createElementVNode as y, createVNode as S, withModifiers as A, Fragment as v, renderList as p, createCommentVNode as u } from "vue";
+import { resolveComponent as w, openBlock as i, createElementBlock as a, createBlock as l, normalizeClass as d, withCtx as r, createTextVNode as c, toDisplayString as m, createElementVNode as y, createVNode as S, withModifiers as p, Fragment as A, renderList as v, createCommentVNode as u } from "vue";
 import "./KvLendCta.css";
 import F from "../_virtual/_plugin-vue_export-helper.js";
 const I = {
@@ -102,7 +102,7 @@ const I = {
     }
   },
   data() {
-    var e, s, n;
+    var e, n, s;
     return {
       mdiChevronRight: T,
       defaultAmountOptions: [25, 50, 75],
@@ -110,8 +110,8 @@ const I = {
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (s = (e = this.route) == null ? void 0 : e.query) == null ? void 0 : s.utm_campaign,
-        (n = this.loan) == null ? void 0 : n.unreservedAmount,
+        (n = (e = this.route) == null ? void 0 : e.query) == null ? void 0 : n.utm_campaign,
+        (s = this.loan) == null ? void 0 : s.unreservedAmount,
         this.userBalance,
         this.fiveDollarsSelected
       ),
@@ -139,12 +139,12 @@ const I = {
       return ((e = this.loan) == null ? void 0 : e.unreservedAmount) ?? "";
     },
     lentPreviously() {
-      var e, s;
-      return ((s = (e = this.loan) == null ? void 0 : e.userProperties) == null ? void 0 : s.lentTo) ?? !1;
+      var e, n;
+      return ((n = (e = this.loan) == null ? void 0 : e.userProperties) == null ? void 0 : n.lentTo) ?? !1;
     },
     isInBasket() {
       var e;
-      return ((e = this.basketItems) == null ? void 0 : e.some((s) => s.__typename === "LoanReservation" && s.id === this.loanId)) ?? !1;
+      return ((e = this.basketItems) == null ? void 0 : e.some((n) => n.__typename === "LoanReservation" && n.id === this.loanId)) ?? !1;
     },
     prices() {
       const e = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25);
@@ -219,7 +219,7 @@ const I = {
       return this.isAmountLessThan25(this.unreservedAmount) || this.isAmountBetween25And500(this.unreservedAmount);
     },
     isLendAmountButton() {
-      return (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(this.unreservedAmount);
+      return (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(this.unreservedAmount) || this.showPresetAmounts && this.presetButtonsPrices.length === 1;
     },
     isFunded() {
       return this.state === "funded" || this.state === "fully-reserved";
@@ -235,16 +235,19 @@ const I = {
     },
     showFilteredDropdown() {
       return this.presetDropdownPrices.length > 1;
+    },
+    hideLendButton() {
+      return this.showPresetAmounts && (this.isAdding || this.presetButtonsPrices.length === 1);
     }
   },
   watch: {
-    unreservedAmount(e, s) {
-      var n, k;
-      e !== s && s === "" && (this.selectedOption = g(
+    unreservedAmount(e, n) {
+      var s, k;
+      e !== n && n === "" && (this.selectedOption = g(
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (k = (n = this.route) == null ? void 0 : n.query) == null ? void 0 : k.utm_campaign,
+        (k = (s = this.route) == null ? void 0 : s.query) == null ? void 0 : k.utm_campaign,
         e,
         this.userBalance,
         this.fiveDollarsSelected,
@@ -319,17 +322,17 @@ const I = {
   key: 1,
   class: "amountDropdownWrapper"
 }, R = ["value"];
-function U(e, s, n, k, f, t) {
+function U(e, n, s, k, f, t) {
   const h = w("kv-ui-button"), L = w("kv-material-icon"), B = w("kv-ui-select"), b = w("kv-lend-amount-button");
   return i(), a("div", V, [
     t.isInBasket ? (i(), l(h, {
       key: 0,
       variant: "secondary",
-      class: d(["tw-inline-flex tw-flex-1", { "tw-w-full": n.showPresetAmounts }]),
+      class: d(["tw-inline-flex tw-flex-1", { "tw-w-full": s.showPresetAmounts }]),
       "data-testid": "bp-lend-cta-checkout-button",
-      to: n.externalLinks ? void 0 : "/basket",
-      href: n.externalLinks ? "/basket" : void 0,
-      onClick: s[0] || (s[0] = (o) => t.clickSecondaryButton(o))
+      to: s.externalLinks ? void 0 : "/basket",
+      href: s.externalLinks ? "/basket" : void 0,
+      onClick: n[0] || (n[0] = (o) => t.clickSecondaryButton(o))
     }, {
       default: r(() => [
         c(m(t.loanInBasketButtonText), 1)
@@ -343,17 +346,17 @@ function U(e, s, n, k, f, t) {
         c(m(t.ctaButtonText), 1)
       ]),
       _: 1
-    })) : t.isFunded ? (i(), a("div", O, " This loan was just funded! 🎉 ")) : n.showViewLoan ? (i(), l(h, {
+    })) : t.isFunded ? (i(), a("div", O, " This loan was just funded! 🎉 ")) : s.showViewLoan ? (i(), l(h, {
       key: 3,
       state: `${t.allSharesReserved ? "disabled" : ""}`,
-      to: n.externalLinks ? void 0 : t.readMorePath,
-      href: n.externalLinks ? t.readMorePath : void 0,
+      to: s.externalLinks ? void 0 : t.readMorePath,
+      href: s.externalLinks ? t.readMorePath : void 0,
       class: "tw-mb-0",
-      onClick: s[1] || (s[1] = (o) => e.$emit("show-loan-details", o))
+      onClick: n[1] || (n[1] = (o) => e.$emit("show-loan-details", o))
     }, {
       default: r(() => [
         y("span", N, [
-          s[5] || (s[5] = c(" View loan ")),
+          n[5] || (n[5] = c(" View loan ")),
           S(L, {
             class: "tw-w-3 tw-h-3 tw-align-middle",
             icon: f.mdiChevronRight
@@ -364,18 +367,18 @@ function U(e, s, n, k, f, t) {
     }, 8, ["state", "to", "href"])) : t.useFormSubmit ? (i(), a("form", {
       key: 4,
       class: "tw-w-full tw-flex",
-      onSubmit: s[4] || (s[4] = A((...o) => t.addToBasket && t.addToBasket(...o), ["prevent"]))
+      onSubmit: n[4] || (n[4] = p((...o) => t.addToBasket && t.addToBasket(...o), ["prevent"]))
     }, [
       y("fieldset", {
-        class: d(["tw-w-full tw-flex", { "tw-flex-col tw-gap-1.5 md:tw-flex-row md:tw-justify-between": n.showPresetAmounts }]),
-        disabled: n.isAdding,
+        class: d(["tw-w-full tw-flex", { "tw-flex-col tw-gap-1.5 md:tw-flex-row md:tw-justify-between": s.showPresetAmounts }]),
+        disabled: s.isAdding,
         "data-testid": "bp-lend-cta-select-and-button"
       }, [
-        n.showPresetAmounts ? (i(), a("div", {
+        s.showPresetAmounts ? (i(), a("div", {
           key: 0,
-          class: d(["tw-flex tw-gap-1 lg:tw-gap-2", { "tw-flex-wrap md:tw-flex-nowrap": n.enableHugeAmount }])
+          class: d(["tw-flex tw-gap-1 lg:tw-gap-2", { "tw-flex-wrap md:tw-flex-nowrap": s.enableHugeAmount }])
         }, [
-          t.isLendAmountButton ? u("", !0) : (i(!0), a(v, { key: 0 }, p(t.presetButtonsPrices, (o) => (i(), l(h, {
+          t.isLendAmountButton ? u("", !0) : (i(!0), a(A, { key: 0 }, v(t.presetButtonsPrices, (o) => (i(), l(h, {
             key: o,
             variant: "secondary",
             class: d(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": f.selectedOption == o }]),
@@ -392,41 +395,41 @@ function U(e, s, n, k, f, t) {
             id: `LoanAmountDropdown_${t.loanId}`,
             modelValue: f.selectedDropdownOption,
             "onUpdate:modelValue": [
-              s[2] || (s[2] = (o) => f.selectedDropdownOption = o),
+              n[2] || (n[2] = (o) => f.selectedDropdownOption = o),
               t.trackLendAmountSelection
             ],
             class: d(["tw-min-w-12 tw-rounded filtered-dropdown", {
               "unselected-dropdown": !t.selectedDropdown,
               "selected-dropdown": t.selectedDropdown,
-              "tw-w-full": n.enableHugeAmount
+              "tw-w-full": s.enableHugeAmount
             }]),
             "aria-label": "Lend amount",
-            onClick: A(t.clickDropdown, ["stop"])
+            onClick: p(t.clickDropdown, ["stop"])
           }, {
             default: r(() => [
-              (i(!0), a(v, null, p(t.presetDropdownPrices, (o) => (i(), a("option", {
+              (i(!0), a(A, null, v(t.presetDropdownPrices, (o) => (i(), a("option", {
                 key: o,
                 value: o
               }, m(o !== "Other" ? `$${o}` : o), 9, H))), 128))
             ]),
             _: 1
           }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : u("", !0)
-        ], 2)) : n.showPresetAmounts ? u("", !0) : (i(), a("div", K, [
+        ], 2)) : s.showPresetAmounts ? u("", !0) : (i(), a("div", K, [
           t.hideShowLendDropdown && !t.isLessThan25 ? (i(), l(B, {
             key: 0,
             id: `LoanAmountDropdown_${t.loanId}`,
             modelValue: f.selectedOption,
             "onUpdate:modelValue": [
-              s[3] || (s[3] = (o) => f.selectedOption = o),
+              n[3] || (n[3] = (o) => f.selectedOption = o),
               t.trackLendAmountSelection
             ],
             class: "tw-min-w-12",
             style: { "border-radius": "14px 0 0 14px" },
             "aria-label": "Lend amount",
-            onClick: A(t.clickDropdown, ["stop"])
+            onClick: p(t.clickDropdown, ["stop"])
           }, {
             default: r(() => [
-              (i(!0), a(v, null, p(t.prices, (o) => (i(), a("option", {
+              (i(!0), a(A, null, v(t.prices, (o) => (i(), a("option", {
                 key: o,
                 value: o
               }, " $" + m(o), 9, R))), 128))
@@ -436,13 +439,13 @@ function U(e, s, n, k, f, t) {
         ])),
         y("div", {
           class: d({
-            lendButtonWrapper: t.hideShowLendDropdown && !n.showPresetAmounts,
-            "tw-hidden": n.isAdding && n.showPresetAmounts
+            lendButtonWrapper: t.hideShowLendDropdown && !s.showPresetAmounts,
+            "tw-hidden": t.hideLendButton
           })
         }, [
           t.lendButtonVisibility && !t.isLessThan25 ? (i(), l(h, {
             key: "lendButton",
-            class: d(["tw-inline-flex tw-flex-1", { "tw-w-full": n.showPresetAmounts }]),
+            class: d(["tw-inline-flex tw-flex-1", { "tw-w-full": s.showPresetAmounts }]),
             "data-testid": "bp-lend-cta-lend-button",
             type: "submit"
           }, {
@@ -452,30 +455,30 @@ function U(e, s, n, k, f, t) {
             _: 1
           }, 8, ["class"])) : t.showLendAgain ? (i(), l(h, {
             key: "lendAgainButton",
-            class: d(["lend-again", { "tw-w-full": n.showPresetAmounts }]),
+            class: d(["lend-again", { "tw-w-full": s.showPresetAmounts }]),
             "data-testid": "bp-lend-cta-lend-again-button",
             type: "submit"
           }, {
             default: r(() => [
-              c(m(n.primaryButtonText || "Lend") + " again ", 1)
+              c(m(s.primaryButtonText || "Lend") + " again ", 1)
             ]),
             _: 1
           }, 8, ["class"])) : u("", !0)
         ], 2),
-        t.isLendAmountButton && !n.enableFiveDollarsNotes ? (i(), l(b, {
+        t.isLendAmountButton && !s.enableFiveDollarsNotes ? (i(), l(b, {
           key: 2,
           class: "tw-w-full",
           "loan-id": t.loanId,
           "show-now": !1,
           "amount-left": t.unreservedAmount,
-          "is-adding": n.isAdding,
+          "is-adding": s.isAdding,
           onAddToBasket: t.addToBasket
         }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : u("", !0),
-        !n.isLoading && n.isAdding ? (i(), l(h, {
+        !s.isLoading && s.isAdding ? (i(), l(h, {
           key: 3,
           class: "tw-inline-flex tw-flex-1"
         }, {
-          default: r(() => s[6] || (s[6] = [
+          default: r(() => n[6] || (n[6] = [
             c(" Adding to basket ")
           ])),
           _: 1
@@ -484,7 +487,7 @@ function U(e, s, n, k, f, t) {
     ], 32)) : u("", !0)
   ]);
 }
-const Z = /* @__PURE__ */ F(I, [["render", U], ["__scopeId", "data-v-e8a71378"]]);
+const Z = /* @__PURE__ */ F(I, [["render", U], ["__scopeId", "data-v-f7e50991"]]);
 export {
   Z as default
 };

package/dist/vue/KvSideSheet.js

@@ -1,4 +1,4 @@
-import { toRefs as T, ref as v, watch as E, resolveComponent as B, openBlock as g, createElementBlock as S, normalizeClass as c, withModifiers as _, createElementVNode as d, normalizeStyle as z, createVNode as b, createCommentVNode as C, renderSlot as F } from "vue";
+import { toRefs as T, ref as f, watch as E, resolveComponent as B, openBlock as g, createElementBlock as S, normalizeClass as c, withModifiers as _, createElementVNode as d, normalizeStyle as z, createVNode as b, createCommentVNode as C, renderSlot as F } from "vue";
 import { mdiClose as K, mdiLaunch as N } from "@mdi/js";
 import V from "./KvMaterialIcon.js";
 import j from "../_virtual/_plugin-vue_export-helper.js";
@@ -50,15 +50,15 @@ const G = {
     const {
       visible: a,
       kvTrackFunction: t,
-      trackEventCategory: f,
+      trackEventCategory: m,
       animationSourceElement: r
-    } = T(w), n = v(!1), i = v({}), s = v({});
+    } = T(w), n = f(!1), i = f({}), s = f({});
     let u = null;
-    const m = () => {
+    const v = () => {
       const l = "tw-overflow-hidden";
       n.value ? document.body.classList.add(l) : document.body.classList.remove(l);
     }, y = () => {
-      n.value = !1, m(), t.value(f.value, "click", "side-sheet-closed"), r.value && (s.value = {
+      n.value = !1, v(), t.value(m.value, "click", "side-sheet-closed"), r.value && (s.value = {
         ...i.value,
         transition: "all 0.5s ease-in-out"
       }), setTimeout(() => {
@@ -73,7 +73,7 @@ const G = {
       var l;
       if (a.value) {
         document.addEventListener("keyup", u), setTimeout(() => {
-          n.value = !0, m();
+          n.value = !0, v();
         }, 100);
         const e = (l = r.value) == null ? void 0 : l.getBoundingClientRect(), h = (e == null ? void 0 : e.top) ?? 0, L = (e == null ? void 0 : e.left) ?? 0, p = (e == null ? void 0 : e.width) ?? 0, k = (e == null ? void 0 : e.height) ?? 0;
         h || L || p || k ? (i.value = {
@@ -87,7 +87,7 @@ const G = {
         }, setTimeout(() => {
           s.value = {
             top: "0",
-            width: "100vw",
+            width: "100%",
             height: "100%",
             transition: "all 0.5s ease-in-out"
           };
@@ -103,7 +103,7 @@ const G = {
     };
   }
 };
-function M(w, o, a, t, f, r) {
+function M(w, o, a, t, m, r) {
   const n = B("kv-material-icon");
   return a.visible ? (g(), S("div", {
     key: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -106,5 +106,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "0ae6ed1e95e7c01158eb795403c22fa2dba68c51"
+  "gitHead": "9381b6ca0a2bbcc13d63798abc55d71202a45ff1"
 }