@kiva/kv-components 6.29.1 → 6.30.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.
@@ -1 +1 @@
1
- .amountDropdownWrapper[data-v-cc6815c8] select{border-radius:14px 0 0 14px}.lend-again[data-v-cc6815c8] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-cc6815c8] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-cc6815c8] select{cursor:pointer;border-radius:.875rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-cc6815c8] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.preset-option[data-v-cc6815c8] 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-dropdown[data-v-cc6815c8] select,.selected-option[data-v-cc6815c8] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgba(var(--border-action),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity, 1))}.button-ellipsis[data-v-cc6815c8] span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
1
+ .amountDropdownWrapper[data-v-898962c3] select{border-radius:14px 0 0 14px}.lend-again[data-v-898962c3] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-898962c3] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-898962c3] select{cursor:pointer;border-radius:.875rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-898962c3] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.preset-option[data-v-898962c3] 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-dropdown[data-v-898962c3] select,.selected-option[data-v-898962c3] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgba(var(--border-action),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity, 1))}.button-ellipsis[data-v-898962c3] span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -1,36 +1,34 @@
1
- import C from "graphql-tag";
2
- import { mdiChevronRight as b } from "@mdi/js";
3
- import { getLendCtaSelectedOption as g, getDropdownPriceArray as D } from "../utils/loanUtils.js";
4
- import P from "./KvLendAmountButton.js";
5
- import S from "./KvSelect.js";
1
+ import T from "graphql-tag";
2
+ import { mdiChevronRight as _ } from "@mdi/js";
3
+ import { getLendCtaSelectedOption as g, getDropdownPriceArray as C } from "../utils/loanUtils.js";
4
+ import D from "./KvLendAmountButton.js";
5
+ import P from "./KvSelect.js";
6
6
  import F from "./KvButton.js";
7
- import I from "./KvMaterialIcon.js";
8
- import N from "./KvCartPill.js";
9
- import { resolveComponent as A, openBlock as i, createElementBlock as r, createBlock as a, withCtx as l, createElementVNode as u, createCommentVNode as d, normalizeClass as m, createTextVNode as w, toDisplayString as f, createVNode as V, withModifiers as y, Fragment as L, renderList as v } from "vue";
7
+ import S from "./KvMaterialIcon.js";
8
+ import { resolveComponent as k, openBlock as i, createElementBlock as a, createBlock as r, normalizeClass as c, withCtx as d, createTextVNode as m, toDisplayString as f, createElementVNode as p, createVNode as I, withModifiers as y, Fragment as B, renderList as v, createCommentVNode as l } from "vue";
10
9
  import "./KvLendCta.css";
11
- import O from "../_virtual/_plugin-vue_export-helper.js";
12
- const k = "Other", it = C`
10
+ import N from "../_virtual/_plugin-vue_export-helper.js";
11
+ const w = "Other", nt = T`
13
12
  fragment KvLendCta on LoanBasic {
14
13
  id
15
14
  name
16
15
  status
17
16
  minNoteSize
18
17
  }
19
- `, at = C`
18
+ `, st = T`
20
19
  fragment KvLendCtaUser on LoanBasic {
21
20
  id
22
21
  userProperties {
23
22
  lentTo
24
23
  }
25
24
  }
26
- `, M = {
25
+ `, O = {
27
26
  name: "KvLendCta",
28
27
  components: {
29
- KvLendAmountButton: P,
28
+ KvLendAmountButton: D,
30
29
  KvUiButton: F,
31
- KvUiSelect: S,
32
- KvMaterialIcon: I,
33
- KvCartPill: N
30
+ KvUiSelect: P,
31
+ KvMaterialIcon: S
34
32
  },
35
33
  props: {
36
34
  loan: {
@@ -124,16 +122,12 @@ const k = "Other", it = C`
124
122
  kvTrackCategory: {
125
123
  type: String,
126
124
  default: "Lending"
127
- },
128
- showPill: {
129
- type: Boolean,
130
- default: !1
131
125
  }
132
126
  },
133
127
  data() {
134
128
  var t, n;
135
129
  return {
136
- mdiChevronRight: b,
130
+ mdiChevronRight: _,
137
131
  defaultAmountOptions: [25, 50, 75],
138
132
  selectedOption: g(
139
133
  this.getCookie,
@@ -144,8 +138,8 @@ const k = "Other", it = C`
144
138
  this.userBalance,
145
139
  this.fiveDollarsSelected
146
140
  ),
147
- selectedDropdownOption: k,
148
- OTHER_OPTION: k
141
+ selectedDropdownOption: w,
142
+ OTHER_OPTION: w
149
143
  };
150
144
  },
151
145
  computed: {
@@ -173,7 +167,7 @@ const k = "Other", it = C`
173
167
  return ((t = this.basketItems) == null ? void 0 : t.some((n) => n.__typename === "LoanReservation" && n.id === this.loanId)) ?? !1;
174
168
  },
175
169
  prices() {
176
- const t = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), n = D(
170
+ const t = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), n = C(
177
171
  this.unreservedAmount,
178
172
  this.isCompleteLoanActive,
179
173
  t,
@@ -190,7 +184,7 @@ const k = "Other", it = C`
190
184
  if (this.prices.length === 4)
191
185
  return [];
192
186
  const t = this.prices.slice(this.defaultAmountOptions.length);
193
- return t.unshift(k), t;
187
+ return t.unshift(w), t;
194
188
  },
195
189
  loanName() {
196
190
  var t;
@@ -260,7 +254,7 @@ const k = "Other", it = C`
260
254
  return this.isLentTo && !this.isLessThan25;
261
255
  },
262
256
  selectedDropdown() {
263
- return this.selectedDropdownOption !== k;
257
+ return this.selectedDropdownOption !== w;
264
258
  },
265
259
  showFilteredDropdown() {
266
260
  return this.presetDropdownPrices.length > 1;
@@ -271,17 +265,17 @@ const k = "Other", it = C`
271
265
  },
272
266
  watch: {
273
267
  unreservedAmount(t, n) {
274
- var s, p;
268
+ var s, A;
275
269
  t !== n && n === "" && (this.selectedOption = g(
276
270
  this.getCookie,
277
271
  this.setCookie,
278
272
  this.enableFiveDollarsNotes,
279
- (p = (s = this.route) == null ? void 0 : s.query) == null ? void 0 : p.utm_campaign,
273
+ (A = (s = this.route) == null ? void 0 : s.query) == null ? void 0 : A.utm_campaign,
280
274
  t,
281
275
  this.userBalance,
282
276
  this.fiveDollarsSelected,
283
277
  this.showPresetAmounts
284
- )), this.showPresetAmounts && (this.selectedOption = k);
278
+ )), this.showPresetAmounts && (this.selectedOption = w);
285
279
  }
286
280
  },
287
281
  methods: {
@@ -331,7 +325,7 @@ const k = "Other", it = C`
331
325
  t,
332
326
  this.loanId,
333
327
  this.loanId
334
- ), this.selectedOption = t, this.selectedDropdownOption = k;
328
+ ), this.selectedOption = t, this.selectedDropdownOption = w;
335
329
  },
336
330
  handleCheckout() {
337
331
  this.kvTrackFunction(
@@ -343,155 +337,115 @@ const k = "Other", it = C`
343
337
  );
344
338
  }
345
339
  }
346
- }, K = { class: "tw-whitespace-nowrap" }, R = {
347
- key: 3,
340
+ }, V = { class: "tw-whitespace-nowrap" }, K = {
341
+ key: 2,
348
342
  class: "tw-w-full tw-text-center tw-rounded tw-p-2",
349
343
  style: { background: "#f1f1f1" }
350
- }, U = { class: "tw-flex" }, E = ["disabled"], H = {
344
+ }, M = { class: "tw-flex" }, R = ["disabled"], E = {
351
345
  key: 0,
352
346
  class: "tw-flex tw-gap-1 lg:tw-gap-2 tw-flex-wrap md:tw-flex-nowrap"
353
- }, j = ["value"], z = {
347
+ }, U = ["value"], z = {
354
348
  key: 1,
355
349
  class: "amountDropdownWrapper"
356
- }, q = ["value"];
357
- function Z(t, n, s, p, h, e) {
358
- const x = A("kv-cart-pill"), c = A("kv-ui-button"), T = A("kv-material-icon"), B = A("kv-ui-select"), _ = A("kv-lend-amount-button");
359
- return i(), r("div", K, [
360
- s.showPill && s.showPresetAmounts ? (i(), a(x, {
350
+ }, H = ["value"];
351
+ function j(t, n, s, A, u, e) {
352
+ const h = k("kv-ui-button"), x = k("kv-material-icon"), L = k("kv-ui-select"), b = k("kv-lend-amount-button");
353
+ return i(), a("div", V, [
354
+ e.isInBasket ? (i(), r(h, {
361
355
  key: 0,
362
- "borrower-name": e.loanName,
363
- class: "!tw-w-full tw-justify-center tw-pb-2"
364
- }, {
365
- icon: l(() => n[5] || (n[5] = [
366
- u("svg", {
367
- xmlns: "http://www.w3.org/2000/svg",
368
- width: "25",
369
- height: "24",
370
- viewBox: "0 0 25 24",
371
- fill: "none",
372
- class: "tw-min-w-3"
373
- }, [
374
- u("mask", {
375
- id: "mask0_5025_974",
376
- style: { "mask-type": "alpha" },
377
- maskUnits: "userSpaceOnUse",
378
- x: "0",
379
- y: "0",
380
- width: "25",
381
- height: "24"
382
- }, [
383
- u("rect", {
384
- x: "0.5",
385
- width: "24",
386
- height: "24",
387
- fill: "#D9D9D9"
388
- })
389
- ]),
390
- u("g", { mask: "url(#mask0_5025_974)" }, [
391
- u("path", {
392
- 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",
393
- fill: "#757575"
394
- })
395
- ])
396
- ], -1)
397
- ])),
398
- _: 1
399
- }, 8, ["borrower-name"])) : d("", !0),
400
- e.isInBasket ? (i(), a(c, {
401
- key: 1,
402
356
  variant: "secondary",
403
- class: m(["tw-inline-flex tw-flex-1", { "tw-w-full": s.showPresetAmounts }]),
357
+ class: c(["tw-inline-flex tw-flex-1", { "tw-w-full": s.showPresetAmounts }]),
404
358
  "data-testid": "bp-lend-cta-checkout-button",
405
359
  to: s.externalLinks ? void 0 : "/basket",
406
360
  href: s.externalLinks ? "/basket" : void 0,
407
361
  onClick: n[0] || (n[0] = (o) => e.clickSecondaryButton(o))
408
362
  }, {
409
- default: l(() => [
410
- w(f(e.loanInBasketButtonText), 1)
363
+ default: d(() => [
364
+ m(f(e.loanInBasketButtonText), 1)
411
365
  ]),
412
366
  _: 1
413
- }, 8, ["class", "to", "href"])) : e.showNonActionableLoanButton ? (i(), a(c, {
414
- key: 2,
367
+ }, 8, ["class", "to", "href"])) : e.showNonActionableLoanButton ? (i(), r(h, {
368
+ key: 1,
415
369
  class: "tw-inline-flex tw-flex-1"
416
370
  }, {
417
- default: l(() => [
418
- w(f(e.ctaButtonText), 1)
371
+ default: d(() => [
372
+ m(f(e.ctaButtonText), 1)
419
373
  ]),
420
374
  _: 1
421
- })) : e.isFunded ? (i(), r("div", R, " This loan was just funded! 🎉 ")) : s.showViewLoan ? (i(), a(c, {
422
- key: 4,
375
+ })) : e.isFunded ? (i(), a("div", K, " This loan was just funded! 🎉 ")) : s.showViewLoan ? (i(), r(h, {
376
+ key: 3,
423
377
  state: `${e.allSharesReserved ? "disabled" : ""}`,
424
378
  to: s.externalLinks ? void 0 : e.readMorePath,
425
379
  href: s.externalLinks ? e.readMorePath : void 0,
426
380
  class: "tw-mb-0",
427
381
  onClick: n[1] || (n[1] = (o) => t.$emit("show-loan-details", o))
428
382
  }, {
429
- default: l(() => [
430
- u("span", U, [
431
- n[6] || (n[6] = w(" View loan ")),
432
- V(T, {
383
+ default: d(() => [
384
+ p("span", M, [
385
+ n[5] || (n[5] = m(" View loan ")),
386
+ I(x, {
433
387
  class: "tw-w-3 tw-h-3 tw-align-middle",
434
- icon: h.mdiChevronRight
388
+ icon: u.mdiChevronRight
435
389
  }, null, 8, ["icon"])
436
390
  ])
437
391
  ]),
438
392
  _: 1
439
- }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (i(), r("form", {
440
- key: 5,
393
+ }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (i(), a("form", {
394
+ key: 4,
441
395
  class: "tw-w-full tw-flex",
442
396
  onSubmit: n[4] || (n[4] = y((...o) => e.addToBasket && e.addToBasket(...o), ["prevent"]))
443
397
  }, [
444
- u("fieldset", {
445
- class: m(["tw-w-full tw-flex", {
398
+ p("fieldset", {
399
+ class: c(["tw-w-full tw-flex", {
446
400
  "tw-flex-col md:tw-flex-row md:tw-justify-between tw-min-w-0": s.showPresetAmounts,
447
401
  "tw-gap-1.5": s.showPresetAmounts && !e.isLendAmountButton
448
402
  }]),
449
403
  disabled: s.isAdding,
450
404
  "data-testid": "bp-lend-cta-select-and-button"
451
405
  }, [
452
- s.showPresetAmounts && !s.isAdding ? (i(), r("div", H, [
453
- e.isLendAmountButton ? d("", !0) : (i(!0), r(L, { key: 0 }, v(e.presetButtonsPrices, (o) => (i(), a(c, {
406
+ s.showPresetAmounts && !s.isAdding ? (i(), a("div", E, [
407
+ e.isLendAmountButton ? l("", !0) : (i(!0), a(B, { key: 0 }, v(e.presetButtonsPrices, (o) => (i(), r(h, {
454
408
  key: o,
455
409
  variant: "secondary",
456
- class: m(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": h.selectedOption == o }]),
410
+ class: c(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": u.selectedOption == o }]),
457
411
  "data-testid": "bp-lend-cta-lend-button",
458
- onClick: (G) => e.clickPresetButton(o)
412
+ onClick: (q) => e.clickPresetButton(o)
459
413
  }, {
460
- default: l(() => [
461
- w(" $" + f(o), 1)
414
+ default: d(() => [
415
+ m(" $" + f(o), 1)
462
416
  ]),
463
417
  _: 2
464
418
  }, 1032, ["class", "onClick"]))), 128)),
465
- e.showFilteredDropdown ? (i(), a(B, {
419
+ e.showFilteredDropdown ? (i(), r(L, {
466
420
  key: 1,
467
421
  id: `LoanAmountDropdown_${e.loanId}`,
468
- modelValue: h.selectedDropdownOption,
422
+ modelValue: u.selectedDropdownOption,
469
423
  "onUpdate:modelValue": [
470
- n[2] || (n[2] = (o) => h.selectedDropdownOption = o),
424
+ n[2] || (n[2] = (o) => u.selectedDropdownOption = o),
471
425
  e.trackLendAmountSelection
472
426
  ],
473
- class: m(["tw-min-w-12 tw-rounded filtered-dropdown tw-w-full", {
427
+ class: c(["tw-min-w-12 tw-rounded filtered-dropdown tw-w-full", {
474
428
  "unselected-dropdown": !e.selectedDropdown,
475
429
  "selected-dropdown": e.selectedDropdown
476
430
  }]),
477
431
  "aria-label": "Lend amount",
478
432
  onClick: y(e.clickDropdown, ["stop"])
479
433
  }, {
480
- default: l(() => [
481
- (i(!0), r(L, null, v(e.presetDropdownPrices, (o) => (i(), r("option", {
434
+ default: d(() => [
435
+ (i(!0), a(B, null, v(e.presetDropdownPrices, (o) => (i(), a("option", {
482
436
  key: o,
483
437
  value: o
484
- }, f(o !== h.OTHER_OPTION ? `$${o}` : o), 9, j))), 128))
438
+ }, f(o !== u.OTHER_OPTION ? `$${o}` : o), 9, U))), 128))
485
439
  ]),
486
440
  _: 1
487
- }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : d("", !0)
488
- ])) : s.showPresetAmounts ? d("", !0) : (i(), r("div", z, [
489
- e.hideShowLendDropdown && !e.isLessThan25 ? (i(), a(B, {
441
+ }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : l("", !0)
442
+ ])) : s.showPresetAmounts ? l("", !0) : (i(), a("div", z, [
443
+ e.hideShowLendDropdown && !e.isLessThan25 ? (i(), r(L, {
490
444
  key: 0,
491
445
  id: `LoanAmountDropdown_${e.loanId}`,
492
- modelValue: h.selectedOption,
446
+ modelValue: u.selectedOption,
493
447
  "onUpdate:modelValue": [
494
- n[3] || (n[3] = (o) => h.selectedOption = o),
448
+ n[3] || (n[3] = (o) => u.selectedOption = o),
495
449
  e.trackLendAmountSelection
496
450
  ],
497
451
  class: "tw-min-w-12",
@@ -499,45 +453,45 @@ function Z(t, n, s, p, h, e) {
499
453
  "aria-label": "Lend amount",
500
454
  onClick: y(e.clickDropdown, ["stop"])
501
455
  }, {
502
- default: l(() => [
503
- (i(!0), r(L, null, v(e.prices, (o) => (i(), r("option", {
456
+ default: d(() => [
457
+ (i(!0), a(B, null, v(e.prices, (o) => (i(), a("option", {
504
458
  key: o,
505
459
  value: o
506
- }, " $" + f(o), 9, q))), 128))
460
+ }, " $" + f(o), 9, H))), 128))
507
461
  ]),
508
462
  _: 1
509
- }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : d("", !0)
463
+ }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : l("", !0)
510
464
  ])),
511
- u("div", {
512
- class: m({
465
+ p("div", {
466
+ class: c({
513
467
  "tw-min-w-0": s.showPresetAmounts,
514
468
  lendButtonWrapper: e.hideShowLendDropdown && !s.showPresetAmounts,
515
469
  "tw-hidden": e.hideLendButton
516
470
  })
517
471
  }, [
518
- e.lendButtonVisibility && !e.isLessThan25 ? (i(), a(c, {
472
+ e.lendButtonVisibility && !e.isLessThan25 ? (i(), r(h, {
519
473
  key: "lendButton",
520
- class: m(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": s.showPresetAmounts }]),
474
+ class: c(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": s.showPresetAmounts }]),
521
475
  "data-testid": "bp-lend-cta-lend-button",
522
476
  type: "submit"
523
477
  }, {
524
- default: l(() => [
525
- w(f(e.ctaButtonText), 1)
478
+ default: d(() => [
479
+ m(f(e.ctaButtonText), 1)
526
480
  ]),
527
481
  _: 1
528
- }, 8, ["class"])) : e.showLendAgain ? (i(), a(c, {
482
+ }, 8, ["class"])) : e.showLendAgain ? (i(), r(h, {
529
483
  key: "lendAgainButton",
530
- class: m(["lend-again", { "tw-w-full": s.showPresetAmounts }]),
484
+ class: c(["lend-again", { "tw-w-full": s.showPresetAmounts }]),
531
485
  "data-testid": "bp-lend-cta-lend-again-button",
532
486
  type: "submit"
533
487
  }, {
534
- default: l(() => [
535
- w(f(s.primaryButtonText || "Lend") + " again ", 1)
488
+ default: d(() => [
489
+ m(f(s.primaryButtonText || "Lend") + " again ", 1)
536
490
  ]),
537
491
  _: 1
538
- }, 8, ["class"])) : d("", !0)
492
+ }, 8, ["class"])) : l("", !0)
539
493
  ], 2),
540
- e.isLendAmountButton && !s.enableFiveDollarsNotes ? (i(), a(_, {
494
+ e.isLendAmountButton && !s.enableFiveDollarsNotes ? (i(), r(b, {
541
495
  key: 2,
542
496
  class: "tw-w-full",
543
497
  "loan-id": e.loanId,
@@ -545,23 +499,23 @@ function Z(t, n, s, p, h, e) {
545
499
  "amount-left": e.amountForLendAmountButton,
546
500
  "is-adding": s.isAdding,
547
501
  onAddToBasket: e.addToBasket
548
- }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : d("", !0),
549
- !s.isLoading && s.isAdding ? (i(), a(c, {
502
+ }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : l("", !0),
503
+ !s.isLoading && s.isAdding ? (i(), r(h, {
550
504
  key: 3,
551
505
  class: "tw-inline-flex tw-flex-1"
552
506
  }, {
553
- default: l(() => n[7] || (n[7] = [
554
- w(" Adding to basket ")
507
+ default: d(() => n[6] || (n[6] = [
508
+ m(" Adding to basket ")
555
509
  ])),
556
510
  _: 1
557
- })) : d("", !0)
558
- ], 10, E)
559
- ], 32)) : d("", !0)
511
+ })) : l("", !0)
512
+ ], 10, R)
513
+ ], 32)) : l("", !0)
560
514
  ]);
561
515
  }
562
- const rt = /* @__PURE__ */ O(M, [["render", Z], ["__scopeId", "data-v-cc6815c8"]]);
516
+ const ot = /* @__PURE__ */ N(O, [["render", j], ["__scopeId", "data-v-898962c3"]]);
563
517
  export {
564
- it as KV_LEND_CTA_FRAGMENT,
565
- at as KV_LEND_CTA_USER_FRAGMENT,
566
- rt as default
518
+ nt as KV_LEND_CTA_FRAGMENT,
519
+ st as KV_LEND_CTA_USER_FRAGMENT,
520
+ ot as default
567
521
  };
@@ -1,11 +1,11 @@
1
- import { toRefs as J, ref as f, reactive as P, computed as O, onMounted as Q, onUnmounted as C, watch as g, resolveComponent as X, openBlock as p, createElementBlock as k, normalizeClass as b, withModifiers as Y, createElementVNode as u, normalizeStyle as j, createVNode as H, createCommentVNode as x, toDisplayString as Z, renderSlot as I, nextTick as $ } from "vue";
2
- import { mdiArrowLeft as ee, mdiClose as te, mdiExportVariant as oe } from "@mdi/js";
3
- import ne from "./KvMaterialIcon.js";
4
- import ie from "../_virtual/_plugin-vue_export-helper.js";
5
- const le = {
1
+ import { toRefs as P, ref as r, reactive as Q, computed as j, onMounted as X, onUnmounted as Y, watch as g, resolveComponent as Z, openBlock as p, createElementBlock as k, normalizeClass as b, withModifiers as $, createElementVNode as w, normalizeStyle as H, createVNode as z, createCommentVNode as x, toDisplayString as ee, renderSlot as N, nextTick as te } from "vue";
2
+ import { mdiArrowLeft as oe, mdiClose as ne, mdiExportVariant as ie } from "@mdi/js";
3
+ import le from "./KvMaterialIcon.js";
4
+ import se from "../_virtual/_plugin-vue_export-helper.js";
5
+ const ae = {
6
6
  name: "KvSideSheet",
7
7
  components: {
8
- KvMaterialIcon: ne
8
+ KvMaterialIcon: le
9
9
  },
10
10
  props: {
11
11
  /**
@@ -65,7 +65,7 @@ const le = {
65
65
  widthDimensions: {
66
66
  type: [String, Object],
67
67
  default: () => ({ default: "100%", md: "50%" }),
68
- validator: (n) => typeof n == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n) : typeof n == "object" ? Object.keys(n).every((i) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(i) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(n[i])) : !1
68
+ validator: (o) => typeof o == "string" ? /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(o) : typeof o == "object" ? Object.keys(o).every((n) => ["default", "sm", "md", "lg", "xl", "2xl"].includes(n) && /^(\d+px|[\d.]+%|auto|inherit|initial)$/.test(o[n])) : !1
69
69
  },
70
70
  /**
71
71
  * Whether to hide the background of the headline section on mobile (e.g., in Borrower Profile Sidesheet)
@@ -76,92 +76,88 @@ const le = {
76
76
  }
77
77
  },
78
78
  emits: ["side-sheet-closed", "go-to-link"],
79
- setup(n, { emit: i, slots: l }) {
79
+ setup(o, { emit: n, slots: i }) {
80
80
  const {
81
81
  visible: t,
82
- kvTrackFunction: z,
83
- trackEventCategory: M,
84
- widthDimensions: s,
85
- hideHeadlineBgOnMobile: r
86
- } = J(n), d = f(!1), a = f({}), E = f(null), m = f(null), y = f(null), _ = f(null), V = f(null), h = P({
82
+ kvTrackFunction: M,
83
+ trackEventCategory: _,
84
+ widthDimensions: l,
85
+ hideHeadlineBgOnMobile: d
86
+ } = P(o), c = r(!1), a = r({}), T = r(null), m = r(null), y = r(null), V = r(null), W = r(null), S = r(null), B = r(null), v = Q({
87
87
  headline: 0,
88
88
  controls: 0
89
- }), N = O(() => {
90
- const e = _.value - (r.value ? 0 : h.headline) - h.controls;
89
+ }), U = j(() => {
90
+ const e = V.value - (d.value ? 0 : v.headline) - v.controls;
91
91
  return Math.max(e, 0);
92
- }), W = O(() => {
93
- if (typeof s.value == "string")
94
- return s.value;
92
+ }), I = j(() => {
93
+ if (typeof l.value == "string")
94
+ return l.value;
95
95
  const e = {
96
96
  sm: 640,
97
97
  md: 768,
98
98
  lg: 1024,
99
99
  xl: 1280,
100
100
  "2xl": 1536
101
- }, o = V.value || window.innerWidth, w = Object.keys(s.value).filter((c) => c !== "default").sort((c, L) => e[L] - e[c]).find((c) => o >= e[c]);
102
- return w ? s.value[w] : s.value.default || "100%";
103
- }), U = (e, o) => {
104
- let w;
105
- return (...c) => {
106
- clearTimeout(w), w = setTimeout(() => e(...c), o);
101
+ }, s = W.value || window.innerWidth, f = Object.keys(l.value).filter((u) => u !== "default").sort((u, O) => e[O] - e[u]).find((u) => s >= e[u]);
102
+ return f ? l.value[f] : l.value.default || "100%";
103
+ }), A = (e, s) => {
104
+ let f;
105
+ return (...u) => {
106
+ clearTimeout(f), f = setTimeout(() => e(...u), s);
107
107
  };
108
- }, S = () => {
109
- _.value = window.innerHeight, V.value = window.innerWidth, setTimeout(() => {
110
- $(() => {
108
+ }, E = () => {
109
+ V.value = window.innerHeight, W.value = window.innerWidth, setTimeout(() => {
110
+ te(() => {
111
111
  var e;
112
112
  if (y.value) {
113
- const o = y.value.getBoundingClientRect();
114
- h.headline = o.height;
113
+ const s = y.value.getBoundingClientRect();
114
+ v.headline = s.height;
115
115
  } else
116
- h.headline = 0;
117
- if ((e = l.controls) != null && e.call(l) && m.value) {
118
- const o = m.value.getBoundingClientRect();
119
- h.controls = o.height;
116
+ v.headline = 0;
117
+ if ((e = i.controls) != null && e.call(i) && m.value) {
118
+ const s = m.value.getBoundingClientRect();
119
+ v.controls = s.height;
120
120
  } else
121
- h.controls = 0;
121
+ v.controls = 0;
122
122
  });
123
123
  }, 300);
124
- }, B = U(S, 100), T = () => {
124
+ }, C = A(E, 100), R = () => {
125
125
  const e = "tw-overflow-hidden";
126
- d.value ? document.body.classList.add(e) : document.body.classList.remove(e);
126
+ c.value ? document.body.classList.add(e) : document.body.classList.remove(e);
127
127
  }, K = () => {
128
- d.value = !1, T(), z.value(M.value, "click", "side-sheet-closed"), setTimeout(() => {
129
- i("side-sheet-closed");
130
- }, 300), document.removeEventListener("keyup", R);
131
- }, A = () => {
132
- i("go-to-link");
133
- }, R = (e) => {
128
+ c.value = !1, R(), M.value(_.value, "click", "side-sheet-closed"), setTimeout(() => {
129
+ n("side-sheet-closed");
130
+ }, 300), document.removeEventListener("keyup", L);
131
+ }, G = () => {
132
+ n("go-to-link");
133
+ }, L = (e) => {
134
134
  (e == null ? void 0 : e.key) === "Escape" && K();
135
135
  };
136
- Q(() => {
137
- if (setTimeout(() => {
138
- S();
139
- }, 100), m.value) {
140
- const e = new ResizeObserver(B);
141
- e.observe(m.value), C(() => e.disconnect());
142
- }
143
- if (y.value) {
144
- const e = new ResizeObserver(B);
145
- e.observe(y.value), C(() => e.disconnect());
146
- }
147
- window.addEventListener("resize", B), C(() => window.removeEventListener("resize", B));
136
+ X(() => {
137
+ setTimeout(() => {
138
+ E();
139
+ }, 100), m.value && (S.value = new ResizeObserver(C), S.value.observe(m.value)), y.value && (B.value = new ResizeObserver(C), B.value.observe(y.value)), window.addEventListener("resize", C);
140
+ }), Y(() => {
141
+ S.value && S.value.disconnect(), B.value && B.value.disconnect(), window.removeEventListener("resize", C);
142
+ const e = document.getElementById("side-sheet-styles");
143
+ e && e.remove();
148
144
  }), g(() => {
149
145
  var e;
150
- return (e = l.controls) == null ? void 0 : e.call(l);
146
+ return (e = i.controls) == null ? void 0 : e.call(i);
151
147
  }, () => {
152
148
  setTimeout(() => {
153
- S();
149
+ E();
154
150
  }, 100);
155
151
  }, { deep: !0 });
156
- const G = O(() => ({
157
- width: W.value
152
+ const q = j(() => ({
153
+ width: I.value
158
154
  }));
159
155
  g(t, (e) => {
160
- typeof window < "u" && (e ? (document.addEventListener("keyup", R), a.value = {}, setTimeout(() => {
161
- d.value = !0, T(), S();
162
- }, 10)) : (d.value = !1, T(), document.removeEventListener("keyup", R), a.value = {}));
163
- }, { immediate: !0 }), g(W, (e) => {
164
- d.value && t.value && a.value && Object.keys(a.value).length > 0 && (a.value = {
156
+ typeof window < "u" && (e ? (document.addEventListener("keyup", L), a.value = {}, setTimeout(() => {
157
+ c.value = !0, R(), E();
158
+ }, 10)) : (c.value = !1, R(), document.removeEventListener("keyup", L), a.value = {}));
159
+ }, { immediate: !0 }), g(I, (e) => {
160
+ c.value && t.value && a.value && Object.keys(a.value).length > 0 && (a.value = {
165
161
  ...a.value,
166
162
  width: e,
167
163
  transition: "none"
@@ -174,132 +170,130 @@ const le = {
174
170
  }, 50));
175
171
  });
176
172
  const D = () => {
177
- if (typeof s.value == "object" && E.value) {
173
+ if (typeof l.value == "object" && T.value) {
178
174
  const e = "side-sheet-styles";
179
- let o = document.getElementById(e);
180
- o || (o = document.createElement("style"), o.id = e, document.head.appendChild(o));
181
- const w = {
175
+ let s = document.getElementById(e);
176
+ s || (s = document.createElement("style"), s.id = e, document.head.appendChild(s));
177
+ const f = {
182
178
  sm: "640px",
183
179
  md: "768px",
184
180
  lg: "1024px",
185
181
  xl: "1280px",
186
182
  "2xl": "1536px"
187
- }, L = Object.keys(s.value).filter((v) => v !== "default").sort((v, q) => {
183
+ }, O = Object.keys(l.value).filter((h) => h !== "default").sort((h, J) => {
188
184
  const F = ["sm", "md", "lg", "xl", "2xl"];
189
- return F.indexOf(v) - F.indexOf(q);
190
- }).map((v) => `
191
- @media (min-width: ${w[v]}) {
192
- #side-sheet-${n.trackEventCategory || "default"} {
193
- width: ${s.value[v]} !important;
185
+ return F.indexOf(h) - F.indexOf(J);
186
+ }).map((h) => `
187
+ @media (min-width: ${f[h]}) {
188
+ #side-sheet-${o.trackEventCategory || "default"} {
189
+ width: ${l.value[h]} !important;
194
190
  }
195
191
  }
196
192
  `).join("");
197
- o.textContent = L, E.value.id = `side-sheet-${n.trackEventCategory || "default"}`, C(() => {
198
- o && o.remove();
199
- });
193
+ s.textContent = O, T.value.id = `side-sheet-${o.trackEventCategory || "default"}`;
200
194
  }
201
195
  };
202
- return g(s, () => {
203
- d.value && D();
204
- }, { immediate: !0 }), g(d, (e) => {
196
+ return g(l, () => {
197
+ c.value && D();
198
+ }, { immediate: !0 }), g(c, (e) => {
205
199
  e && D();
206
200
  }), {
207
201
  closeSideSheet: K,
208
- contentHeight: N,
202
+ contentHeight: U,
209
203
  controlsRef: m,
210
204
  headlineRef: y,
211
- sideSheetRef: E,
212
- sideSheetStyles: G,
213
- goToLink: A,
214
- mdiArrowLeft: ee,
215
- mdiClose: te,
216
- mdiExportVariant: oe,
205
+ sideSheetRef: T,
206
+ sideSheetStyles: q,
207
+ goToLink: G,
208
+ mdiArrowLeft: oe,
209
+ mdiClose: ne,
210
+ mdiExportVariant: ie,
217
211
  modalStyles: a,
218
- open: d
212
+ open: c
219
213
  };
220
214
  }
221
- }, se = { class: "tw-flex tw-gap-1.5" }, ae = { key: 1 }, re = { class: "tw-flex tw-gap-1.5" };
222
- function de(n, i, l, t, z, M) {
223
- const s = X("kv-material-icon");
224
- return l.visible ? (p(), k("div", {
215
+ }, de = { class: "tw-flex tw-gap-1.5" }, re = { key: 1 }, ce = { class: "tw-flex tw-gap-1.5" };
216
+ function ue(o, n, i, t, M, _) {
217
+ const l = Z("kv-material-icon");
218
+ return i.visible ? (p(), k("div", {
225
219
  key: 0,
226
220
  class: b(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
227
221
  "tw-bg-opacity-0 tw-delay-300": !t.open,
228
222
  "tw-bg-opacity-low": t.open
229
223
  }]),
230
- onClick: i[3] || (i[3] = Y((...r) => t.closeSideSheet && t.closeSideSheet(...r), ["self"]))
224
+ onClick: n[3] || (n[3] = $((...d) => t.closeSideSheet && t.closeSideSheet(...d), ["self"]))
231
225
  }, [
232
- u("div", {
226
+ w("div", {
233
227
  ref: "sideSheetRef",
234
228
  class: b(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white", {
235
229
  "tw-translate-x-full": !t.open,
236
230
  "tw-translate-x-0": t.open,
237
- "tw-h-full": n.$slots.controls
231
+ "tw-h-full": o.$slots.controls
238
232
  }]),
239
- style: j(t.sideSheetStyles)
233
+ style: H(t.sideSheetStyles)
240
234
  }, [
241
- u("div", {
235
+ w("div", {
242
236
  class: "tw-flex tw-flex-col tw-h-full",
243
- style: j(t.modalStyles)
237
+ style: H(t.modalStyles)
244
238
  }, [
245
- u("div", {
239
+ w("div", {
246
240
  ref: "headlineRef",
247
241
  class: b(["tw-flex tw-justify-between tw-transition-opacity tw-duration-200 tw-px-3 tw-py-2 tw-border-tertiary tw-gap-1.5", {
248
242
  "tw-opacity-0": !t.open,
249
243
  "tw-opacity-full": t.open,
250
- "tw-border-b": l.showHeadlineBorder
244
+ "tw-border-b": i.showHeadlineBorder
251
245
  }])
252
246
  }, [
253
- u("div", se, [
254
- l.showBackButton ? (p(), k("button", {
247
+ w("div", de, [
248
+ i.showBackButton ? (p(), k("button", {
255
249
  key: 0,
256
250
  class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
257
- onClick: i[0] || (i[0] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
251
+ onClick: n[0] || (n[0] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
258
252
  }, [
259
- H(s, {
253
+ z(l, {
260
254
  class: "tw-w-3 tw-h-3",
261
255
  icon: t.mdiArrowLeft
262
256
  }, null, 8, ["icon"])
263
257
  ])) : x("", !0),
264
- l.headline ? (p(), k("h3", ae, Z(l.headline), 1)) : x("", !0)
258
+ i.headline ? (p(), k("h3", re, ee(i.headline), 1)) : x("", !0)
265
259
  ]),
266
- u("div", re, [
267
- l.showGoToLink ? (p(), k("button", {
260
+ w("div", ce, [
261
+ i.showGoToLink ? (p(), k("button", {
268
262
  key: 0,
269
263
  class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
270
- onClick: i[1] || (i[1] = (...r) => t.goToLink && t.goToLink(...r))
264
+ onClick: n[1] || (n[1] = (...d) => t.goToLink && t.goToLink(...d))
271
265
  }, [
272
- H(s, {
266
+ z(l, {
273
267
  class: "tw-w-3 tw-h-3",
274
268
  icon: t.mdiExportVariant
275
269
  }, null, 8, ["icon"])
276
270
  ])) : x("", !0),
277
- u("button", {
271
+ w("button", {
278
272
  class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
279
- onClick: i[2] || (i[2] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
273
+ onClick: n[2] || (n[2] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
280
274
  }, [
281
- H(s, {
275
+ z(l, {
282
276
  class: "tw-w-3 tw-h-3",
283
277
  icon: t.mdiClose
284
278
  }, null, 8, ["icon"])
285
279
  ])
286
280
  ])
287
281
  ], 2),
288
- u("div", {
282
+ w("div", {
289
283
  id: "sidesheet-content",
290
284
  class: "tw-overflow-y-auto tw-overscroll-y-contain",
291
- style: j({ height: t.contentHeight + "px" })
285
+ style: H({ height: t.contentHeight + "px" })
292
286
  }, [
293
- u("div", {
287
+ w("div", {
294
288
  class: b(["tw-px-2 tw-transition-opacity tw-duration-200", {
295
289
  "tw-opacity-0": !t.open,
296
290
  "tw-opacity-full": t.open
297
291
  }])
298
292
  }, [
299
- I(n.$slots, "default")
293
+ N(o.$slots, "default")
300
294
  ], 2)
301
295
  ], 4),
302
- n.$slots.controls ? (p(), k("div", {
296
+ o.$slots.controls ? (p(), k("div", {
303
297
  key: 0,
304
298
  ref: "controlsRef",
305
299
  class: b(["tw-absolute tw-bottom-0 tw-w-full tw-border-t tw-border-tertiary tw-bg-white tw-transition-opacity tw-duration-200", {
@@ -308,13 +302,13 @@ function de(n, i, l, t, z, M) {
308
302
  }]),
309
303
  style: { "z-index": "999" }
310
304
  }, [
311
- I(n.$slots, "controls")
305
+ N(o.$slots, "controls")
312
306
  ], 2)) : x("", !0)
313
307
  ], 4)
314
308
  ], 6)
315
309
  ], 2)) : x("", !0);
316
310
  }
317
- const he = /* @__PURE__ */ ie(le, [["render", de]]);
311
+ const me = /* @__PURE__ */ se(ae, [["render", ue]]);
318
312
  export {
319
- he as default
313
+ me as default
320
314
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "6.29.1",
3
+ "version": "6.30.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -111,5 +111,5 @@
111
111
  "embla-carousel-fade",
112
112
  "popper.js"
113
113
  ],
114
- "gitHead": "e2d96427d1426167e21837090886639a6de203e8"
114
+ "gitHead": "dcc1dba54ce0fe677ce67bc8ad5abe0c398df219"
115
115
  }