@kiva/kv-components 6.3.0 → 6.4.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 (5) hide show
  1. package/dist/index.js +169 -167
  2. package/dist/vue/KvCartPill.js +36 -0
  3. package/dist/vue/KvLendCta.css +1 -1
  4. package/dist/vue/KvLendCta.js +141 -95
  5. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -4,178 +4,180 @@ import { default as l } from "./vue/KvBorrowerImage.js";
4
4
  import { default as d } from "./vue/KvButton.js";
5
5
  import { default as p } from "./vue/KvCarousel.js";
6
6
  import { default as n } from "./vue/KvCartModal.js";
7
- import { default as v } from "./vue/KvCheckbox.js";
8
- import { default as i } from "./vue/KvChip.js";
9
- import { default as c } from "./vue/KvClassicLoanCard.js";
10
- import { default as L } from "./vue/KvCommentsAdd.js";
11
- import { default as P } from "./vue/KvCommentsContainer.js";
12
- import { default as T } from "./vue/KvCommentsHeartButton.js";
13
- import { default as S } from "./vue/KvCommentsList.js";
14
- import { default as b } from "./vue/KvCommentsListItem.js";
15
- import { default as M } from "./vue/KvCommentsReplyButton.js";
16
- import { default as E } from "./vue/KvContentfulImg.js";
17
- import { default as w } from "./vue/KvCountdownTimer.js";
18
- import { default as _ } from "./vue/KvExpandable.js";
19
- import { default as U } from "./vue/KvExpandableQuestion.js";
20
- import { default as V } from "./vue/KvFlag.js";
21
- import { default as F } from "./vue/KvGrid.js";
22
- import { default as j } from "./vue/KvImpactDashboardHeader.js";
23
- import { default as Q } from "./vue/KvInlineActivityCard.js";
24
- import { default as q } from "./vue/KvInlineActivityFeed.js";
25
- import { default as X } from "./vue/KvIntroductionLoanCard.js";
26
- import { default as Z } from "./vue/KvLendAmountButton.js";
27
- import { default as ee } from "./vue/KvLendCta.js";
28
- import { default as te } from "./vue/KvLightbox.js";
29
- import { default as ae } from "./vue/KvLineGraph.js";
30
- import { default as le } from "./vue/KvLoanActivities.js";
31
- import { default as de } from "./vue/KvLoanBookmark.js";
32
- import { default as pe } from "./vue/KvLoanCallouts.js";
33
- import { default as ne } from "./vue/KvLoanProgressGroup.js";
34
- import { default as ve } from "./vue/KvLoanTag.js";
35
- import { default as ie } from "./vue/KvLoanTeamPick.js";
36
- import { default as ce } from "./vue/KvLoanUse.js";
37
- import { default as Le } from "./vue/KvLoadingPlaceholder.js";
38
- import { default as Pe } from "./vue/KvLoadingSpinner.js";
39
- import { default as Te } from "./vue/KvMap.js";
40
- import { default as Se } from "./vue/KvMaterialIcon.js";
41
- import { default as be } from "./vue/KvPageContainer.js";
42
- import { default as Me } from "./vue/KvPagination.js";
43
- import { default as Ee } from "./vue/KvPieChart.js";
44
- import { default as we } from "./vue/KvPopper.js";
45
- import { default as _e } from "./vue/KvProgressBar.js";
46
- import { default as Ue } from "./vue/KvRadio.js";
47
- import { default as Ve } from "./vue/KvSelect.js";
48
- import { default as Fe } from "./vue/KvSideSheet.js";
49
- import { default as je } from "./vue/KvSwitch.js";
50
- import { default as Qe } from "./vue/KvTab.js";
51
- import { default as qe } from "./vue/KvTabPanel.js";
52
- import { default as Xe } from "./vue/KvTabs.js";
53
- import { default as Ze } from "./vue/KvTextInput.js";
54
- import { default as eo } from "./vue/KvTextLink.js";
55
- import { default as to } from "./vue/KvThemeProvider.js";
56
- import { default as ao } from "./vue/KvToast.js";
57
- import { default as lo } from "./vue/KvTooltip.js";
58
- import { default as mo } from "./vue/KvTreeMapChart.js";
59
- import { default as uo } from "./vue/KvUserAvatar.js";
60
- import { default as xo } from "./vue/KvVerticalCarousel.js";
61
- import { default as Ko } from "./vue/KvVotingCard.js";
62
- import { default as Co } from "./vue/KvVotingCardV2.js";
63
- import { default as Ao } from "./vue/KvWideLoanCard.js";
64
- import { default as go, Mash as Po } from "./utils/Alea.js";
65
- import { useAttrs as To } from "./utils/attrs.js";
66
- import { carouselUtil as So } from "./utils/carousels.js";
67
- import { collapse as bo, expand as ko } from "./utils/expander.js";
68
- import { isLegacyPlaceholderAvatar as yo, randomizedUserAvatarClass as Eo } from "./utils/imageUtils.js";
69
- import { loanCardComputedProperties as wo, loanCardMethods as Oo } from "./utils/loanCard.js";
70
- import { BALANCE_CAMPAIGN as Go, BASE_CAMPAIGN as Uo, ERL_COOKIE_NAME as Ro, NO_BALANCE_CAMPAIGN as Vo, TOP_UP_CAMPAIGN as Do, getDropdownPriceArray as Fo, getLendCtaSelectedOption as Ho, isBetween25And50 as jo, isLessThan25 as zo } from "./utils/loanUtils.js";
71
- import { animationCoordinator as Wo, generateMapMarkers as qo, getCoordinatesBetween as Jo, getCountryColor as Xo, getLoansIntervals as Yo } from "./utils/mapUtils.js";
72
- import { lockPrintSingleEl as $o, unlockPrintSingleEl as et } from "./utils/printing.js";
73
- import { lockScroll as tt, lockScrollSmallOnly as rt, unlockScroll as at, unlockScrollSmallOnly as ft } from "./utils/scrollLock.js";
74
- import { buildTailwindClassName as st, headerNumberCase as dt, kebabCase as mt, removeObjectProperty as pt } from "./utils/themeUtils.js";
75
- import { throttle as nt } from "./utils/throttle.js";
76
- import { isTargetElement as vt, offBodyTouchstart as Kt, onBodyTouchstart as it } from "./utils/touchEvents.js";
77
- import { getTreemap as ct } from "./utils/treemap.js";
7
+ import { default as v } from "./vue/KvCartPill.js";
8
+ import { default as i } from "./vue/KvCheckbox.js";
9
+ import { default as c } from "./vue/KvChip.js";
10
+ import { default as L } from "./vue/KvClassicLoanCard.js";
11
+ import { default as P } from "./vue/KvCommentsAdd.js";
12
+ import { default as T } from "./vue/KvCommentsContainer.js";
13
+ import { default as S } from "./vue/KvCommentsHeartButton.js";
14
+ import { default as b } from "./vue/KvCommentsList.js";
15
+ import { default as M } from "./vue/KvCommentsListItem.js";
16
+ import { default as E } from "./vue/KvCommentsReplyButton.js";
17
+ import { default as w } from "./vue/KvContentfulImg.js";
18
+ import { default as _ } from "./vue/KvCountdownTimer.js";
19
+ import { default as U } from "./vue/KvExpandable.js";
20
+ import { default as V } from "./vue/KvExpandableQuestion.js";
21
+ import { default as F } from "./vue/KvFlag.js";
22
+ import { default as j } from "./vue/KvGrid.js";
23
+ import { default as Q } from "./vue/KvImpactDashboardHeader.js";
24
+ import { default as q } from "./vue/KvInlineActivityCard.js";
25
+ import { default as X } from "./vue/KvInlineActivityFeed.js";
26
+ import { default as Z } from "./vue/KvIntroductionLoanCard.js";
27
+ import { default as ee } from "./vue/KvLendAmountButton.js";
28
+ import { default as te } from "./vue/KvLendCta.js";
29
+ import { default as ae } from "./vue/KvLightbox.js";
30
+ import { default as le } from "./vue/KvLineGraph.js";
31
+ import { default as de } from "./vue/KvLoanActivities.js";
32
+ import { default as pe } from "./vue/KvLoanBookmark.js";
33
+ import { default as ne } from "./vue/KvLoanCallouts.js";
34
+ import { default as ve } from "./vue/KvLoanProgressGroup.js";
35
+ import { default as ie } from "./vue/KvLoanTag.js";
36
+ import { default as ce } from "./vue/KvLoanTeamPick.js";
37
+ import { default as Le } from "./vue/KvLoanUse.js";
38
+ import { default as Pe } from "./vue/KvLoadingPlaceholder.js";
39
+ import { default as Te } from "./vue/KvLoadingSpinner.js";
40
+ import { default as Se } from "./vue/KvMap.js";
41
+ import { default as be } from "./vue/KvMaterialIcon.js";
42
+ import { default as Me } from "./vue/KvPageContainer.js";
43
+ import { default as Ee } from "./vue/KvPagination.js";
44
+ import { default as we } from "./vue/KvPieChart.js";
45
+ import { default as _e } from "./vue/KvPopper.js";
46
+ import { default as Ue } from "./vue/KvProgressBar.js";
47
+ import { default as Ve } from "./vue/KvRadio.js";
48
+ import { default as Fe } from "./vue/KvSelect.js";
49
+ import { default as je } from "./vue/KvSideSheet.js";
50
+ import { default as Qe } from "./vue/KvSwitch.js";
51
+ import { default as qe } from "./vue/KvTab.js";
52
+ import { default as Xe } from "./vue/KvTabPanel.js";
53
+ import { default as Ze } from "./vue/KvTabs.js";
54
+ import { default as eo } from "./vue/KvTextInput.js";
55
+ import { default as to } from "./vue/KvTextLink.js";
56
+ import { default as ao } from "./vue/KvThemeProvider.js";
57
+ import { default as lo } from "./vue/KvToast.js";
58
+ import { default as mo } from "./vue/KvTooltip.js";
59
+ import { default as uo } from "./vue/KvTreeMapChart.js";
60
+ import { default as xo } from "./vue/KvUserAvatar.js";
61
+ import { default as Ko } from "./vue/KvVerticalCarousel.js";
62
+ import { default as Co } from "./vue/KvVotingCard.js";
63
+ import { default as Ao } from "./vue/KvVotingCardV2.js";
64
+ import { default as go } from "./vue/KvWideLoanCard.js";
65
+ import { default as ho, Mash as To } from "./utils/Alea.js";
66
+ import { useAttrs as So } from "./utils/attrs.js";
67
+ import { carouselUtil as bo } from "./utils/carousels.js";
68
+ import { collapse as Mo, expand as yo } from "./utils/expander.js";
69
+ import { isLegacyPlaceholderAvatar as No, randomizedUserAvatarClass as wo } from "./utils/imageUtils.js";
70
+ import { loanCardComputedProperties as _o, loanCardMethods as Go } from "./utils/loanCard.js";
71
+ import { BALANCE_CAMPAIGN as Ro, BASE_CAMPAIGN as Vo, ERL_COOKIE_NAME as Do, NO_BALANCE_CAMPAIGN as Fo, TOP_UP_CAMPAIGN as Ho, getDropdownPriceArray as jo, getLendCtaSelectedOption as zo, isBetween25And50 as Qo, isLessThan25 as Wo } from "./utils/loanUtils.js";
72
+ import { animationCoordinator as Jo, generateMapMarkers as Xo, getCoordinatesBetween as Yo, getCountryColor as Zo, getLoansIntervals as $o } from "./utils/mapUtils.js";
73
+ import { lockPrintSingleEl as ot, unlockPrintSingleEl as tt } from "./utils/printing.js";
74
+ import { lockScroll as at, lockScrollSmallOnly as ft, unlockScroll as lt, unlockScrollSmallOnly as st } from "./utils/scrollLock.js";
75
+ import { buildTailwindClassName as mt, headerNumberCase as pt, kebabCase as ut, removeObjectProperty as nt } from "./utils/themeUtils.js";
76
+ import { throttle as vt } from "./utils/throttle.js";
77
+ import { isTargetElement as it, offBodyTouchstart as Ct, onBodyTouchstart as ct } from "./utils/touchEvents.js";
78
+ import { getTreemap as Lt } from "./utils/treemap.js";
78
79
  export {
79
- go as Alea,
80
- Go as BALANCE_CAMPAIGN,
81
- Uo as BASE_CAMPAIGN,
82
- Ro as ERL_COOKIE_NAME,
80
+ ho as Alea,
81
+ Ro as BALANCE_CAMPAIGN,
82
+ Vo as BASE_CAMPAIGN,
83
+ Do as ERL_COOKIE_NAME,
83
84
  t as KvAccordionItem,
84
85
  a as KvActivityRow,
85
86
  l as KvBorrowerImage,
86
87
  d as KvButton,
87
88
  p as KvCarousel,
88
89
  n as KvCartModal,
89
- v as KvCheckbox,
90
- i as KvChip,
91
- c as KvClassicLoanCard,
92
- L as KvCommentsAdd,
93
- P as KvCommentsContainer,
94
- T as KvCommentsHeartButton,
95
- S as KvCommentsList,
96
- b as KvCommentsListItem,
97
- M as KvCommentsReplyButton,
98
- E as KvContentfulImg,
99
- w as KvCountdownTimer,
100
- _ as KvExpandable,
101
- U as KvExpandableQuestion,
102
- V as KvFlag,
103
- F as KvGrid,
104
- j as KvImpactDashboardHeader,
105
- Q as KvInlineActivityCard,
106
- q as KvInlineActivityFeed,
107
- X as KvIntroductionLoanCard,
108
- Z as KvLendAmountButton,
109
- ee as KvLendCta,
110
- te as KvLightbox,
111
- ae as KvLineGraph,
112
- Le as KvLoadingPlaceholder,
113
- Pe as KvLoadingSpinner,
114
- le as KvLoanActivities,
115
- de as KvLoanBookmark,
116
- pe as KvLoanCallouts,
117
- ne as KvLoanProgressGroup,
118
- ve as KvLoanTag,
119
- ie as KvLoanTeamPick,
120
- ce as KvLoanUse,
121
- Te as KvMap,
122
- Se as KvMaterialIcon,
123
- be as KvPageContainer,
124
- Me as KvPagination,
125
- Ee as KvPieChart,
126
- we as KvPopper,
127
- _e as KvProgressBar,
128
- Ue as KvRadio,
129
- Ve as KvSelect,
130
- Fe as KvSideSheet,
131
- je as KvSwitch,
132
- Qe as KvTab,
133
- qe as KvTabPanel,
134
- Xe as KvTabs,
135
- Ze as KvTextInput,
136
- eo as KvTextLink,
137
- to as KvThemeProvider,
138
- ao as KvToast,
139
- lo as KvTooltip,
140
- mo as KvTreeMapChart,
141
- uo as KvUserAvatar,
142
- xo as KvVerticalCarousel,
143
- Ko as KvVotingCard,
144
- Co as KvVotingCardV2,
145
- Ao as KvWideLoanCard,
146
- Po as Mash,
147
- Vo as NO_BALANCE_CAMPAIGN,
148
- Do as TOP_UP_CAMPAIGN,
149
- Wo as animationCoordinator,
150
- st as buildTailwindClassName,
151
- So as carouselUtil,
152
- bo as collapse,
153
- ko as expand,
154
- qo as generateMapMarkers,
155
- Jo as getCoordinatesBetween,
156
- Xo as getCountryColor,
157
- Fo as getDropdownPriceArray,
158
- Ho as getLendCtaSelectedOption,
159
- Yo as getLoansIntervals,
160
- ct as getTreemap,
161
- dt as headerNumberCase,
162
- jo as isBetween25And50,
163
- yo as isLegacyPlaceholderAvatar,
164
- zo as isLessThan25,
165
- vt as isTargetElement,
166
- mt as kebabCase,
167
- wo as loanCardComputedProperties,
168
- Oo as loanCardMethods,
169
- $o as lockPrintSingleEl,
170
- tt as lockScroll,
171
- rt as lockScrollSmallOnly,
172
- Kt as offBodyTouchstart,
173
- it as onBodyTouchstart,
174
- Eo as randomizedUserAvatarClass,
175
- pt as removeObjectProperty,
176
- nt as throttle,
177
- et as unlockPrintSingleEl,
178
- at as unlockScroll,
179
- ft as unlockScrollSmallOnly,
180
- To as useAttrs
90
+ v as KvCartPill,
91
+ i as KvCheckbox,
92
+ c as KvChip,
93
+ L as KvClassicLoanCard,
94
+ P as KvCommentsAdd,
95
+ T as KvCommentsContainer,
96
+ S as KvCommentsHeartButton,
97
+ b as KvCommentsList,
98
+ M as KvCommentsListItem,
99
+ E as KvCommentsReplyButton,
100
+ w as KvContentfulImg,
101
+ _ as KvCountdownTimer,
102
+ U as KvExpandable,
103
+ V as KvExpandableQuestion,
104
+ F as KvFlag,
105
+ j as KvGrid,
106
+ Q as KvImpactDashboardHeader,
107
+ q as KvInlineActivityCard,
108
+ X as KvInlineActivityFeed,
109
+ Z as KvIntroductionLoanCard,
110
+ ee as KvLendAmountButton,
111
+ te as KvLendCta,
112
+ ae as KvLightbox,
113
+ le as KvLineGraph,
114
+ Pe as KvLoadingPlaceholder,
115
+ Te as KvLoadingSpinner,
116
+ de as KvLoanActivities,
117
+ pe as KvLoanBookmark,
118
+ ne as KvLoanCallouts,
119
+ ve as KvLoanProgressGroup,
120
+ ie as KvLoanTag,
121
+ ce as KvLoanTeamPick,
122
+ Le as KvLoanUse,
123
+ Se as KvMap,
124
+ be as KvMaterialIcon,
125
+ Me as KvPageContainer,
126
+ Ee as KvPagination,
127
+ we as KvPieChart,
128
+ _e as KvPopper,
129
+ Ue as KvProgressBar,
130
+ Ve as KvRadio,
131
+ Fe as KvSelect,
132
+ je as KvSideSheet,
133
+ Qe as KvSwitch,
134
+ qe as KvTab,
135
+ Xe as KvTabPanel,
136
+ Ze as KvTabs,
137
+ eo as KvTextInput,
138
+ to as KvTextLink,
139
+ ao as KvThemeProvider,
140
+ lo as KvToast,
141
+ mo as KvTooltip,
142
+ uo as KvTreeMapChart,
143
+ xo as KvUserAvatar,
144
+ Ko as KvVerticalCarousel,
145
+ Co as KvVotingCard,
146
+ Ao as KvVotingCardV2,
147
+ go as KvWideLoanCard,
148
+ To as Mash,
149
+ Fo as NO_BALANCE_CAMPAIGN,
150
+ Ho as TOP_UP_CAMPAIGN,
151
+ Jo as animationCoordinator,
152
+ mt as buildTailwindClassName,
153
+ bo as carouselUtil,
154
+ Mo as collapse,
155
+ yo as expand,
156
+ Xo as generateMapMarkers,
157
+ Yo as getCoordinatesBetween,
158
+ Zo as getCountryColor,
159
+ jo as getDropdownPriceArray,
160
+ zo as getLendCtaSelectedOption,
161
+ $o as getLoansIntervals,
162
+ Lt as getTreemap,
163
+ pt as headerNumberCase,
164
+ Qo as isBetween25And50,
165
+ No as isLegacyPlaceholderAvatar,
166
+ Wo as isLessThan25,
167
+ it as isTargetElement,
168
+ ut as kebabCase,
169
+ _o as loanCardComputedProperties,
170
+ Go as loanCardMethods,
171
+ ot as lockPrintSingleEl,
172
+ at as lockScroll,
173
+ ft as lockScrollSmallOnly,
174
+ Ct as offBodyTouchstart,
175
+ ct as onBodyTouchstart,
176
+ wo as randomizedUserAvatarClass,
177
+ nt as removeObjectProperty,
178
+ vt as throttle,
179
+ tt as unlockPrintSingleEl,
180
+ lt as unlockScroll,
181
+ st as unlockScrollSmallOnly,
182
+ So as useAttrs
181
183
  };
package/dist/vue/KvCartPill.js ADDED
@@ -0,0 +1,36 @@
1
+ import { toRefs as l, computed as s, openBlock as n, createElementBlock as a, normalizeClass as p, renderSlot as i, createElementVNode as c, toDisplayString as w } from "vue";
2
+ import m from "../_virtual/_plugin-vue_export-helper.js";
3
+ const u = {
4
+ props: {
5
+ borrowerName: {
6
+ type: String,
7
+ default: ""
8
+ },
9
+ showBg: {
10
+ type: Boolean,
11
+ default: !1
12
+ }
13
+ },
14
+ setup(t) {
15
+ const {
16
+ borrowerName: e
17
+ } = l(t);
18
+ return {
19
+ pillCopy: s(() => e.value ? `Supporting ${e.value} will hit your next milestone!` : "Supporting this loan achieves a milestone!")
20
+ };
21
+ }
22
+ }, d = { class: "tw-text-wrap" };
23
+ function f(t, e, o, r, y, _) {
24
+ return n(), a("div", {
25
+ class: p(["tw-w-max tw-flex tw-items-center tw-gap-1 tw-px-1 tw-py-0.5 tw-rounded", {
26
+ "tw-text-small tw-bg-secondary": o.showBg
27
+ }])
28
+ }, [
29
+ i(t.$slots, "icon"),
30
+ c("p", d, w(r.pillCopy), 1)
31
+ ], 2);
32
+ }
33
+ const h = /* @__PURE__ */ m(u, [["render", f]]);
34
+ export {
35
+ h as default
36
+ };
package/dist/vue/KvLendCta.css CHANGED
@@ -1 +1 @@
1
- .amountDropdownWrapper[data-v-ca361825] select{border-radius:14px 0 0 14px}.lend-again[data-v-ca361825] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-ca361825] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-ca361825] select{cursor:pointer;border-radius:.875rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-ca361825] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-ca361825] select{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}.preset-option[data-v-ca361825] 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-ca361825] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgba(var(--border-action),var(--tw-border-opacity, 1))}
1
+ .amountDropdownWrapper[data-v-86580946] select{border-radius:14px 0 0 14px}.lend-again[data-v-86580946] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-86580946] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-86580946] select{cursor:pointer;border-radius:.875rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-86580946] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-86580946] select{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}.preset-option[data-v-86580946] 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-86580946] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgba(var(--border-action),var(--tw-border-opacity, 1))}
package/dist/vue/KvLendCta.js CHANGED
@@ -1,19 +1,21 @@
1
1
  import { mdiChevronRight as x } from "@mdi/js";
2
- import { getLendCtaSelectedOption as L, getDropdownPriceArray as _ } from "../utils/loanUtils.js";
3
- import C from "./KvLendAmountButton.js";
4
- import D from "./KvSelect.js";
5
- import P from "./KvButton.js";
6
- import S from "./KvMaterialIcon.js";
7
- import { resolveComponent as k, openBlock as i, createElementBlock as a, createBlock as l, normalizeClass as r, withCtx as d, createTextVNode as m, toDisplayString as f, createElementVNode as A, createVNode as I, withModifiers as B, Fragment as v, renderList as p, createCommentVNode as u } from "vue";
2
+ import { getLendCtaSelectedOption as B, getDropdownPriceArray as _ } from "../utils/loanUtils.js";
3
+ import D from "./KvLendAmountButton.js";
4
+ import P from "./KvSelect.js";
5
+ import S from "./KvButton.js";
6
+ import I from "./KvMaterialIcon.js";
7
+ import F from "./KvCartPill.js";
8
+ import { resolveComponent as y, openBlock as i, createElementBlock as l, createBlock as a, withCtx as r, createElementVNode as u, createCommentVNode as d, normalizeClass as h, createTextVNode as w, toDisplayString as f, createVNode as O, withModifiers as v, Fragment as p, renderList as L } from "vue";
8
9
  import "./KvLendCta.css";
9
- import F from "../_virtual/_plugin-vue_export-helper.js";
10
- const w = "Other", O = {
10
+ import V from "../_virtual/_plugin-vue_export-helper.js";
11
+ const k = "Other", N = {
11
12
  name: "KvLendCta",
12
13
  components: {
13
- KvLendAmountButton: C,
14
- KvUiButton: P,
15
- KvUiSelect: D,
16
- KvMaterialIcon: S
14
+ KvLendAmountButton: D,
15
+ KvUiButton: S,
16
+ KvUiSelect: P,
17
+ KvMaterialIcon: I,
18
+ KvCartPill: F
17
19
  },
18
20
  props: {
19
21
  loan: {
@@ -99,6 +101,10 @@ const w = "Other", O = {
99
101
  kvTrackCategory: {
100
102
  type: String,
101
103
  default: "Lending"
104
+ },
105
+ showPill: {
106
+ type: Boolean,
107
+ default: !1
102
108
  }
103
109
  },
104
110
  data() {
@@ -106,7 +112,7 @@ const w = "Other", O = {
106
112
  return {
107
113
  mdiChevronRight: x,
108
114
  defaultAmountOptions: [25, 50, 75],
109
- selectedOption: L(
115
+ selectedOption: B(
110
116
  this.getCookie,
111
117
  this.setCookie,
112
118
  this.enableFiveDollarsNotes,
@@ -115,8 +121,8 @@ const w = "Other", O = {
115
121
  this.userBalance,
116
122
  this.fiveDollarsSelected
117
123
  ),
118
- selectedDropdownOption: w,
119
- OTHER_OPTION: w
124
+ selectedDropdownOption: k,
125
+ OTHER_OPTION: k
120
126
  };
121
127
  },
122
128
  computed: {
@@ -166,7 +172,7 @@ const w = "Other", O = {
166
172
  if (this.prices.length === 4)
167
173
  return [];
168
174
  const e = this.prices.slice(this.defaultAmountOptions.length);
169
- return e.unshift(w), e;
175
+ return e.unshift(k), e;
170
176
  },
171
177
  loanName() {
172
178
  var e;
@@ -232,7 +238,7 @@ const w = "Other", O = {
232
238
  return this.isLentTo && !this.isLessThan25;
233
239
  },
234
240
  selectedDropdown() {
235
- return this.selectedDropdownOption !== w;
241
+ return this.selectedDropdownOption !== k;
236
242
  },
237
243
  showFilteredDropdown() {
238
244
  return this.presetDropdownPrices.length > 1;
@@ -243,17 +249,17 @@ const w = "Other", O = {
243
249
  },
244
250
  watch: {
245
251
  unreservedAmount(e, s) {
246
- var n, y;
247
- e !== s && s === "" && (this.selectedOption = L(
252
+ var n, A;
253
+ e !== s && s === "" && (this.selectedOption = B(
248
254
  this.getCookie,
249
255
  this.setCookie,
250
256
  this.enableFiveDollarsNotes,
251
- (y = (n = this.route) == null ? void 0 : n.query) == null ? void 0 : y.utm_campaign,
257
+ (A = (n = this.route) == null ? void 0 : n.query) == null ? void 0 : A.utm_campaign,
252
258
  e,
253
259
  this.userBalance,
254
260
  this.fiveDollarsSelected,
255
261
  this.showPresetAmounts
256
- )), this.showPresetAmounts && (this.selectedOption = w);
262
+ )), this.showPresetAmounts && (this.selectedOption = k);
257
263
  }
258
264
  },
259
265
  methods: {
@@ -303,7 +309,7 @@ const w = "Other", O = {
303
309
  e,
304
310
  this.loanId,
305
311
  this.loanId
306
- ), this.selectedOption = e, this.selectedDropdownOption = w;
312
+ ), this.selectedOption = e, this.selectedDropdownOption = k;
307
313
  },
308
314
  handleCheckout() {
309
315
  this.kvTrackFunction(
@@ -315,161 +321,201 @@ const w = "Other", O = {
315
321
  );
316
322
  }
317
323
  }
318
- }, N = { class: "tw-whitespace-nowrap" }, V = {
319
- key: 2,
324
+ }, H = { class: "tw-whitespace-nowrap" }, M = {
325
+ key: 3,
320
326
  class: "tw-w-full tw-text-center tw-rounded tw-p-2",
321
327
  style: { background: "#f1f1f1" }
322
- }, H = { class: "tw-flex" }, M = ["disabled"], R = ["value"], K = {
328
+ }, K = { class: "tw-flex" }, R = ["disabled"], U = ["value"], j = {
323
329
  key: 1,
324
330
  class: "amountDropdownWrapper"
325
- }, U = ["value"];
326
- function j(e, s, n, y, h, t) {
327
- const c = k("kv-ui-button"), b = k("kv-material-icon"), g = k("kv-ui-select"), T = k("kv-lend-amount-button");
328
- return i(), a("div", N, [
329
- t.isInBasket ? (i(), l(c, {
331
+ }, z = ["value"];
332
+ function E(e, s, n, A, c, t) {
333
+ const C = y("kv-cart-pill"), m = y("kv-ui-button"), b = y("kv-material-icon"), g = y("kv-ui-select"), T = y("kv-lend-amount-button");
334
+ return i(), l("div", H, [
335
+ n.showPill && n.showPresetAmounts ? (i(), a(C, {
330
336
  key: 0,
337
+ "borrower-name": t.loanName,
338
+ class: "!tw-w-full tw-justify-center tw-pb-2"
339
+ }, {
340
+ icon: r(() => s[5] || (s[5] = [
341
+ u("svg", {
342
+ xmlns: "http://www.w3.org/2000/svg",
343
+ width: "25",
344
+ height: "24",
345
+ viewBox: "0 0 25 24",
346
+ fill: "none",
347
+ class: "tw-min-w-3"
348
+ }, [
349
+ u("mask", {
350
+ id: "mask0_5025_974",
351
+ style: { "mask-type": "alpha" },
352
+ maskUnits: "userSpaceOnUse",
353
+ x: "0",
354
+ y: "0",
355
+ width: "25",
356
+ height: "24"
357
+ }, [
358
+ u("rect", {
359
+ x: "0.5",
360
+ width: "24",
361
+ height: "24",
362
+ fill: "#D9D9D9"
363
+ })
364
+ ]),
365
+ u("g", { mask: "url(#mask0_5025_974)" }, [
366
+ u("path", {
367
+ d: "M12.5001 21L9.1251 22.125C9.00843 22.1583 8.9001 22.1833 8.8001 22.2C8.7001 22.2167 8.6001 22.225 8.5001 22.225C7.96676 22.225 7.5001 22.0375 7.1001 21.6625C6.7001 21.2875 6.5001 20.8083 6.5001 20.225V14.775L3.9001 10.55C3.8001 10.3833 3.7251 10.2125 3.6751 10.0375C3.6251 9.8625 3.6001 9.68333 3.6001 9.5C3.6001 9.31667 3.6251 9.1375 3.6751 8.9625C3.7251 8.7875 3.8001 8.61667 3.9001 8.45L7.3001 2.95C7.48343 2.65 7.7251 2.41667 8.0251 2.25C8.3251 2.08333 8.6501 2 9.0001 2H16.0001C16.3501 2 16.6751 2.08333 16.9751 2.25C17.2751 2.41667 17.5168 2.65 17.7001 2.95L21.1001 8.45C21.2001 8.61667 21.2751 8.7875 21.3251 8.9625C21.3751 9.1375 21.4001 9.31667 21.4001 9.5C21.4001 9.68333 21.3751 9.8625 21.3251 10.0375C21.2751 10.2125 21.2001 10.3833 21.1001 10.55L18.5001 14.775V20.225C18.5001 20.8083 18.3001 21.2875 17.9001 21.6625C17.5001 22.0375 17.0334 22.225 16.5001 22.225C16.4001 22.225 16.3001 22.2167 16.2001 22.2C16.1001 22.1833 15.9918 22.1583 15.8751 22.125L12.5001 21ZM9.0001 15H16.0001L19.4001 9.5L16.0001 4H9.0001L5.6001 9.5L9.0001 15ZM11.4501 10.75L14.9751 7.2C15.1584 7 15.3876 6.90417 15.6626 6.9125C15.9376 6.92083 16.1751 7.01667 16.3751 7.2C16.5751 7.4 16.6793 7.6375 16.6876 7.9125C16.6959 8.1875 16.6001 8.425 16.4001 8.625L12.1501 12.875C11.9501 13.075 11.7168 13.175 11.4501 13.175C11.1834 13.175 10.9501 13.075 10.7501 12.875L8.6251 10.75C8.4251 10.55 8.3251 10.3125 8.3251 10.0375C8.3251 9.7625 8.4251 9.525 8.6251 9.325C8.8251 9.125 9.0626 9.025 9.3376 9.025C9.6126 9.025 9.8501 9.125 10.0501 9.325L11.4501 10.75Z",
368
+ fill: "#757575"
369
+ })
370
+ ])
371
+ ], -1)
372
+ ])),
373
+ _: 1
374
+ }, 8, ["borrower-name"])) : d("", !0),
375
+ t.isInBasket ? (i(), a(m, {
376
+ key: 1,
331
377
  variant: "secondary",
332
- class: r(["tw-inline-flex tw-flex-1", { "tw-w-full": n.showPresetAmounts }]),
378
+ class: h(["tw-inline-flex tw-flex-1", { "tw-w-full": n.showPresetAmounts }]),
333
379
  "data-testid": "bp-lend-cta-checkout-button",
334
380
  to: n.externalLinks ? void 0 : "/basket",
335
381
  href: n.externalLinks ? "/basket" : void 0,
336
382
  onClick: s[0] || (s[0] = (o) => t.clickSecondaryButton(o))
337
383
  }, {
338
- default: d(() => [
339
- m(f(t.loanInBasketButtonText), 1)
384
+ default: r(() => [
385
+ w(f(t.loanInBasketButtonText), 1)
340
386
  ]),
341
387
  _: 1
342
- }, 8, ["class", "to", "href"])) : t.showNonActionableLoanButton ? (i(), l(c, {
343
- key: 1,
388
+ }, 8, ["class", "to", "href"])) : t.showNonActionableLoanButton ? (i(), a(m, {
389
+ key: 2,
344
390
  class: "tw-inline-flex tw-flex-1"
345
391
  }, {
346
- default: d(() => [
347
- m(f(t.ctaButtonText), 1)
392
+ default: r(() => [
393
+ w(f(t.ctaButtonText), 1)
348
394
  ]),
349
395
  _: 1
350
- })) : t.isFunded ? (i(), a("div", V, " This loan was just funded! 🎉 ")) : n.showViewLoan ? (i(), l(c, {
351
- key: 3,
396
+ })) : t.isFunded ? (i(), l("div", M, " This loan was just funded! 🎉 ")) : n.showViewLoan ? (i(), a(m, {
397
+ key: 4,
352
398
  state: `${t.allSharesReserved ? "disabled" : ""}`,
353
399
  to: n.externalLinks ? void 0 : t.readMorePath,
354
400
  href: n.externalLinks ? t.readMorePath : void 0,
355
401
  class: "tw-mb-0",
356
402
  onClick: s[1] || (s[1] = (o) => e.$emit("show-loan-details", o))
357
403
  }, {
358
- default: d(() => [
359
- A("span", H, [
360
- s[5] || (s[5] = m(" View loan ")),
361
- I(b, {
404
+ default: r(() => [
405
+ u("span", K, [
406
+ s[6] || (s[6] = w(" View loan ")),
407
+ O(b, {
362
408
  class: "tw-w-3 tw-h-3 tw-align-middle",
363
- icon: h.mdiChevronRight
409
+ icon: c.mdiChevronRight
364
410
  }, null, 8, ["icon"])
365
411
  ])
366
412
  ]),
367
413
  _: 1
368
- }, 8, ["state", "to", "href"])) : t.useFormSubmit ? (i(), a("form", {
369
- key: 4,
414
+ }, 8, ["state", "to", "href"])) : t.useFormSubmit ? (i(), l("form", {
415
+ key: 5,
370
416
  class: "tw-w-full tw-flex",
371
- onSubmit: s[4] || (s[4] = B((...o) => t.addToBasket && t.addToBasket(...o), ["prevent"]))
417
+ onSubmit: s[4] || (s[4] = v((...o) => t.addToBasket && t.addToBasket(...o), ["prevent"]))
372
418
  }, [
373
- A("fieldset", {
374
- class: r(["tw-w-full tw-flex", {
419
+ u("fieldset", {
420
+ class: h(["tw-w-full tw-flex", {
375
421
  "tw-flex-col md:tw-flex-row md:tw-justify-between": n.showPresetAmounts,
376
422
  "tw-gap-1.5": n.showPresetAmounts && !t.isLendAmountButton
377
423
  }]),
378
424
  disabled: n.isAdding,
379
425
  "data-testid": "bp-lend-cta-select-and-button"
380
426
  }, [
381
- n.showPresetAmounts && !n.isAdding ? (i(), a("div", {
427
+ n.showPresetAmounts && !n.isAdding ? (i(), l("div", {
382
428
  key: 0,
383
- class: r(["tw-flex tw-gap-1 lg:tw-gap-2", { "tw-flex-wrap md:tw-flex-nowrap": n.enableHugeAmount }])
429
+ class: h(["tw-flex tw-gap-1 lg:tw-gap-2", { "tw-flex-wrap md:tw-flex-nowrap": n.enableHugeAmount }])
384
430
  }, [
385
- t.isLendAmountButton ? u("", !0) : (i(!0), a(v, { key: 0 }, p(t.presetButtonsPrices, (o) => (i(), l(c, {
431
+ t.isLendAmountButton ? d("", !0) : (i(!0), l(p, { key: 0 }, L(t.presetButtonsPrices, (o) => (i(), a(m, {
386
432
  key: o,
387
433
  variant: "secondary",
388
- class: r(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": h.selectedOption == o }]),
434
+ class: h(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": c.selectedOption == o }]),
389
435
  "data-testid": "bp-lend-cta-lend-button",
390
- onClick: (z) => t.clickPresetButton(o)
436
+ onClick: (q) => t.clickPresetButton(o)
391
437
  }, {
392
- default: d(() => [
393
- m(" $" + f(o), 1)
438
+ default: r(() => [
439
+ w(" $" + f(o), 1)
394
440
  ]),
395
441
  _: 2
396
442
  }, 1032, ["class", "onClick"]))), 128)),
397
- t.showFilteredDropdown ? (i(), l(g, {
443
+ t.showFilteredDropdown ? (i(), a(g, {
398
444
  key: 1,
399
445
  id: `LoanAmountDropdown_${t.loanId}`,
400
- modelValue: h.selectedDropdownOption,
446
+ modelValue: c.selectedDropdownOption,
401
447
  "onUpdate:modelValue": [
402
- s[2] || (s[2] = (o) => h.selectedDropdownOption = o),
448
+ s[2] || (s[2] = (o) => c.selectedDropdownOption = o),
403
449
  t.trackLendAmountSelection
404
450
  ],
405
- class: r(["tw-min-w-12 tw-rounded filtered-dropdown", {
451
+ class: h(["tw-min-w-12 tw-rounded filtered-dropdown", {
406
452
  "unselected-dropdown": !t.selectedDropdown,
407
453
  "selected-dropdown": t.selectedDropdown,
408
454
  "tw-w-full": n.enableHugeAmount
409
455
  }]),
410
456
  "aria-label": "Lend amount",
411
- onClick: B(t.clickDropdown, ["stop"])
457
+ onClick: v(t.clickDropdown, ["stop"])
412
458
  }, {
413
- default: d(() => [
414
- (i(!0), a(v, null, p(t.presetDropdownPrices, (o) => (i(), a("option", {
459
+ default: r(() => [
460
+ (i(!0), l(p, null, L(t.presetDropdownPrices, (o) => (i(), l("option", {
415
461
  key: o,
416
462
  value: o
417
- }, f(o !== h.OTHER_OPTION ? `$${o}` : o), 9, R))), 128))
463
+ }, f(o !== c.OTHER_OPTION ? `$${o}` : o), 9, U))), 128))
418
464
  ]),
419
465
  _: 1
420
- }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : u("", !0)
421
- ], 2)) : n.showPresetAmounts ? u("", !0) : (i(), a("div", K, [
422
- t.hideShowLendDropdown && !t.isLessThan25 ? (i(), l(g, {
466
+ }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : d("", !0)
467
+ ], 2)) : n.showPresetAmounts ? d("", !0) : (i(), l("div", j, [
468
+ t.hideShowLendDropdown && !t.isLessThan25 ? (i(), a(g, {
423
469
  key: 0,
424
470
  id: `LoanAmountDropdown_${t.loanId}`,
425
- modelValue: h.selectedOption,
471
+ modelValue: c.selectedOption,
426
472
  "onUpdate:modelValue": [
427
- s[3] || (s[3] = (o) => h.selectedOption = o),
473
+ s[3] || (s[3] = (o) => c.selectedOption = o),
428
474
  t.trackLendAmountSelection
429
475
  ],
430
476
  class: "tw-min-w-12",
431
477
  style: { "border-radius": "14px 0 0 14px" },
432
478
  "aria-label": "Lend amount",
433
- onClick: B(t.clickDropdown, ["stop"])
479
+ onClick: v(t.clickDropdown, ["stop"])
434
480
  }, {
435
- default: d(() => [
436
- (i(!0), a(v, null, p(t.prices, (o) => (i(), a("option", {
481
+ default: r(() => [
482
+ (i(!0), l(p, null, L(t.prices, (o) => (i(), l("option", {
437
483
  key: o,
438
484
  value: o
439
- }, " $" + f(o), 9, U))), 128))
485
+ }, " $" + f(o), 9, z))), 128))
440
486
  ]),
441
487
  _: 1
442
- }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : u("", !0)
488
+ }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : d("", !0)
443
489
  ])),
444
- A("div", {
445
- class: r({
490
+ u("div", {
491
+ class: h({
446
492
  lendButtonWrapper: t.hideShowLendDropdown && !n.showPresetAmounts,
447
493
  "tw-hidden": t.hideLendButton
448
494
  })
449
495
  }, [
450
- t.lendButtonVisibility && !t.isLessThan25 ? (i(), l(c, {
496
+ t.lendButtonVisibility && !t.isLessThan25 ? (i(), a(m, {
451
497
  key: "lendButton",
452
- class: r(["tw-inline-flex tw-flex-1", { "tw-w-full": n.showPresetAmounts }]),
498
+ class: h(["tw-inline-flex tw-flex-1", { "tw-w-full": n.showPresetAmounts }]),
453
499
  "data-testid": "bp-lend-cta-lend-button",
454
500
  type: "submit"
455
501
  }, {
456
- default: d(() => [
457
- m(f(t.ctaButtonText), 1)
502
+ default: r(() => [
503
+ w(f(t.ctaButtonText), 1)
458
504
  ]),
459
505
  _: 1
460
- }, 8, ["class"])) : t.showLendAgain ? (i(), l(c, {
506
+ }, 8, ["class"])) : t.showLendAgain ? (i(), a(m, {
461
507
  key: "lendAgainButton",
462
- class: r(["lend-again", { "tw-w-full": n.showPresetAmounts }]),
508
+ class: h(["lend-again", { "tw-w-full": n.showPresetAmounts }]),
463
509
  "data-testid": "bp-lend-cta-lend-again-button",
464
510
  type: "submit"
465
511
  }, {
466
- default: d(() => [
467
- m(f(n.primaryButtonText || "Lend") + " again ", 1)
512
+ default: r(() => [
513
+ w(f(n.primaryButtonText || "Lend") + " again ", 1)
468
514
  ]),
469
515
  _: 1
470
- }, 8, ["class"])) : u("", !0)
516
+ }, 8, ["class"])) : d("", !0)
471
517
  ], 2),
472
- t.isLendAmountButton && !n.enableFiveDollarsNotes ? (i(), l(T, {
518
+ t.isLendAmountButton && !n.enableFiveDollarsNotes ? (i(), a(T, {
473
519
  key: 2,
474
520
  class: "tw-w-full",
475
521
  "loan-id": t.loanId,
@@ -477,21 +523,21 @@ function j(e, s, n, y, h, t) {
477
523
  "amount-left": t.unreservedAmount,
478
524
  "is-adding": n.isAdding,
479
525
  onAddToBasket: t.addToBasket
480
- }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : u("", !0),
481
- !n.isLoading && n.isAdding ? (i(), l(c, {
526
+ }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : d("", !0),
527
+ !n.isLoading && n.isAdding ? (i(), a(m, {
482
528
  key: 3,
483
529
  class: "tw-inline-flex tw-flex-1"
484
530
  }, {
485
- default: d(() => s[6] || (s[6] = [
486
- m(" Adding to basket ")
531
+ default: r(() => s[7] || (s[7] = [
532
+ w(" Adding to basket ")
487
533
  ])),
488
534
  _: 1
489
- })) : u("", !0)
490
- ], 10, M)
491
- ], 32)) : u("", !0)
535
+ })) : d("", !0)
536
+ ], 10, R)
537
+ ], 32)) : d("", !0)
492
538
  ]);
493
539
  }
494
- const $ = /* @__PURE__ */ F(O, [["render", j], ["__scopeId", "data-v-ca361825"]]);
540
+ const ne = /* @__PURE__ */ V(N, [["render", E], ["__scopeId", "data-v-86580946"]]);
495
541
  export {
496
- $ as default
542
+ ne as default
497
543
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "6.3.0",
3
+ "version": "6.4.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -107,5 +107,5 @@
107
107
  "embla-carousel-fade",
108
108
  "popper.js"
109
109
  ],
110
- "gitHead": "4eee1c8b42fcefd8a20b7d222397e9bd1ec17593"
110
+ "gitHead": "ea292b1f86088ab2087a728a334693bd0dbf1add"
111
111
  }