@kiva/kv-components 6.16.0 → 6.17.0

package/dist/vue/KvLendCta.css

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

@@ -6,17 +6,17 @@ import S from "./KvSelect.js";
 import F from "./KvButton.js";
 import I from "./KvMaterialIcon.js";
 import N from "./KvCartPill.js";
-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 f, toDisplayString as w, createVNode as V, withModifiers as p, Fragment as L, renderList as g } from "vue";
+import { resolveComponent as A, openBlock as i, createElementBlock as r, createBlock as a, withCtx as l, createElementVNode as u, createCommentVNode as d, normalizeClass as h, createTextVNode as f, toDisplayString as w, createVNode as V, withModifiers as p, Fragment as L, renderList as g } from "vue";
 import "./KvLendCta.css";
 import O from "../_virtual/_plugin-vue_export-helper.js";
-const k = "Other", oe = C`
+const k = "Other", ot = C`
 	fragment KvLendCta on LoanBasic {
 		id
 		name
 		status
 		minNoteSize
 	}
-`, ie = C`
+`, it = C`
 	fragment KvLendCtaUser on LoanBasic {
 		id
 		userProperties {
@@ -135,7 +135,7 @@ const k = "Other", oe = C`
     }
   },
   data() {
-    var e, n;
+    var t, n;
     return {
       mdiChevronRight: _,
       defaultAmountOptions: [25, 50, 75],
@@ -143,7 +143,7 @@ const k = "Other", oe = C`
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (n = (e = this.route) == null ? void 0 : e.query) == null ? void 0 : n.utm_campaign,
+        (n = (t = this.route) == null ? void 0 : t.query) == null ? void 0 : n.utm_campaign,
         this.unreservedAmount,
         this.userBalance,
         this.fiveDollarsSelected
@@ -157,30 +157,30 @@ const k = "Other", oe = C`
       return this.customLoanDetails ? "" : `/lend/${this.loanId}`;
     },
     loanId() {
-      var e;
-      return (e = this.loan) == null ? void 0 : e.id;
+      var t;
+      return (t = this.loan) == null ? void 0 : t.id;
     },
     status() {
-      var e;
-      return ((e = this.loan) == null ? void 0 : e.status) ?? "";
+      var t;
+      return ((t = this.loan) == null ? void 0 : t.status) ?? "";
     },
     minNoteSize() {
-      var e;
-      return ((e = this.loan) == null ? void 0 : e.minNoteSize) ?? "";
+      var t;
+      return ((t = this.loan) == null ? void 0 : t.minNoteSize) ?? "";
     },
     lentPreviously() {
-      var e, n;
-      return ((n = (e = this.loan) == null ? void 0 : e.userProperties) == null ? void 0 : n.lentTo) ?? !1;
+      var t, n;
+      return ((n = (t = this.loan) == null ? void 0 : t.userProperties) == null ? void 0 : n.lentTo) ?? !1;
     },
     isInBasket() {
-      var e;
-      return ((e = this.basketItems) == null ? void 0 : e.some((n) => n.__typename === "LoanReservation" && n.id === this.loanId)) ?? !1;
+      var t;
+      return ((t = this.basketItems) == null ? void 0 : t.some((n) => n.__typename === "LoanReservation" && n.id === this.loanId)) ?? !1;
     },
     prices() {
-      const e = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), n = D(
+      const t = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), n = D(
         this.unreservedAmount,
         this.isCompleteLoanActive,
-        e,
+        t,
         this.enableFiveDollarsNotes,
         this.enableHugeAmount,
         this.isVisitor
@@ -188,22 +188,22 @@ const k = "Other", oe = C`
       return this.maxAmount ? n.filter((s) => parseFloat(s) <= parseFloat(this.maxAmount)) : n;
     },
     presetButtonsPrices() {
-      const e = this.prices.slice(0, 3);
-      return this.prices.length === 4 && e.push(this.prices[3]), e;
+      const t = this.prices.slice(0, 3);
+      return this.prices.length === 4 && t.push(this.prices[3]), t;
     },
     presetDropdownPrices() {
       if (this.prices.length === 4)
         return [];
-      const e = this.prices.slice(this.defaultAmountOptions.length);
-      return e.unshift(k), e;
+      const t = this.prices.slice(this.defaultAmountOptions.length);
+      return t.unshift(k), t;
     },
     loanName() {
-      var e;
-      return ((e = this.loan) == null ? void 0 : e.name) ?? "";
+      var t;
+      return ((t = this.loan) == null ? void 0 : t.name) ?? "";
     },
     presetAmountCtaButtonText() {
-      var e;
-      return ((e = this.loan) == null ? void 0 : e.borrowerCount) > 1 ? "Support" : `Support ${this.loanName}`;
+      var t;
+      return ((t = this.loan) == null ? void 0 : t.borrowerCount) > 1 ? "Support" : `Support ${this.loanName}`;
     },
     defaultCtaButtonText() {
       return this.showPresetAmounts ? this.presetAmountCtaButtonText : this.primaryButtonText || "Lend";
@@ -249,7 +249,8 @@ const k = "Other", oe = C`
       return this.isAmountLessThan25(this.unreservedAmount) || this.isAmountBetween25And500(this.unreservedAmount);
     },
     isLendAmountButton() {
-      return this.maxAmount ? !1 : (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(this.unreservedAmount) || this.showPresetAmounts && this.presetButtonsPrices.length === 1 && !this.isAdding;
+      const t = this.maxAmount ? this.maxAmount : this.unreservedAmount;
+      return (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(t) || this.showPresetAmounts && this.presetButtonsPrices.length === 1 && !this.isAdding;
     },
     isFunded() {
       return this.state === "funded" || this.state === "fully-reserved";
@@ -257,6 +258,9 @@ const k = "Other", oe = C`
     amountToLend() {
       return this.selectedDropdown ? this.selectedDropdownOption : this.isLessThan25 ? this.unreservedAmount : this.selectedOption;
     },
+    amountForLendAmountButton() {
+      return this.maxAmount && parseFloat(this.maxAmount) === 25 ? Math.min(parseFloat(this.maxAmount), parseFloat(this.unreservedAmount)) : this.unreservedAmount;
+    },
     showLendAgain() {
       return this.isLentTo && !this.isLessThan25;
     },
@@ -267,18 +271,18 @@ const k = "Other", oe = C`
       return this.presetDropdownPrices.length > 1;
     },
     hideLendButton() {
-      return this.maxAmount ? !1 : this.showPresetAmounts && (this.isAdding || this.presetButtonsPrices.length === 1);
+      return this.showPresetAmounts && (this.isAdding || this.presetButtonsPrices.length === 1);
     }
   },
   watch: {
-    unreservedAmount(e, n) {
-      var s, A;
-      e !== n && n === "" && (this.selectedOption = B(
+    unreservedAmount(t, n) {
+      var s, y;
+      t !== n && n === "" && (this.selectedOption = B(
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (A = (s = this.route) == null ? void 0 : s.query) == null ? void 0 : A.utm_campaign,
-        e,
+        (y = (s = this.route) == null ? void 0 : s.query) == null ? void 0 : y.utm_campaign,
+        t,
         this.userBalance,
         this.fiveDollarsSelected,
         this.showPresetAmounts
@@ -295,20 +299,20 @@ const k = "Other", oe = C`
         this.amountToLend
       ), this.$emit("add-to-basket", this.amountToLend);
     },
-    isAmountLessThan25(e) {
-      return e < 25 && e > 0;
+    isAmountLessThan25(t) {
+      return t < 25 && t > 0;
     },
-    isAmountBetween25And50(e) {
-      return e <= 50 && e > 25;
+    isAmountBetween25And50(t) {
+      return t <= 50 && t > 25;
     },
-    isAmountBetween25And500(e) {
-      return e < 500 && e >= 25;
+    isAmountBetween25And500(t) {
+      return t < 500 && t >= 25;
     },
-    trackLendAmountSelection(e) {
+    trackLendAmountSelection(t) {
       this.showPresetAmounts && (this.selectedOption = null), this.kvTrackFunction(
         this.kvTrackCategory,
         "Modify lend amount",
-        e,
+        t,
         this.loanId,
         this.loanId
       );
@@ -322,17 +326,17 @@ const k = "Other", oe = C`
         this.loanId
       );
     },
-    clickSecondaryButton(e) {
-      this.secondaryButtonHandler ? (e.preventDefault(), e.stopPropagation(), this.secondaryButtonHandler()) : this.handleCheckout();
+    clickSecondaryButton(t) {
+      this.secondaryButtonHandler ? (t.preventDefault(), t.stopPropagation(), this.secondaryButtonHandler()) : this.handleCheckout();
     },
-    clickPresetButton(e) {
+    clickPresetButton(t) {
       this.kvTrackFunction(
         this.kvTrackCategory,
         "Modify lend amount",
-        e,
+        t,
         this.loanId,
         this.loanId
-      ), this.selectedOption = e, this.selectedDropdownOption = k;
+      ), this.selectedOption = t, this.selectedDropdownOption = k;
     },
     handleCheckout() {
       this.kvTrackFunction(
@@ -352,15 +356,15 @@ const k = "Other", oe = C`
   key: 1,
   class: "amountDropdownWrapper"
 }, z = ["value"];
-function q(e, n, s, A, c, t) {
-  const b = y("kv-cart-pill"), m = y("kv-ui-button"), T = y("kv-material-icon"), v = y("kv-ui-select"), x = y("kv-lend-amount-button");
-  return i(), l("div", H, [
+function q(t, n, s, y, c, e) {
+  const b = A("kv-cart-pill"), m = A("kv-ui-button"), x = A("kv-material-icon"), v = A("kv-ui-select"), T = A("kv-lend-amount-button");
+  return i(), r("div", H, [
     s.showPill && s.showPresetAmounts ? (i(), a(b, {
       key: 0,
-      "borrower-name": t.loanName,
+      "borrower-name": e.loanName,
       class: "!tw-w-full tw-justify-center tw-pb-2"
     }, {
-      icon: r(() => n[5] || (n[5] = [
+      icon: l(() => n[5] || (n[5] = [
         u("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "25",
@@ -395,114 +399,114 @@ function q(e, n, s, A, c, t) {
       ])),
       _: 1
     }, 8, ["borrower-name"])) : d("", !0),
-    t.isInBasket ? (i(), a(m, {
+    e.isInBasket ? (i(), a(m, {
       key: 1,
       variant: "secondary",
       class: h(["tw-inline-flex tw-flex-1", { "tw-w-full": s.showPresetAmounts }]),
       "data-testid": "bp-lend-cta-checkout-button",
       to: s.externalLinks ? void 0 : "/basket",
       href: s.externalLinks ? "/basket" : void 0,
-      onClick: n[0] || (n[0] = (o) => t.clickSecondaryButton(o))
+      onClick: n[0] || (n[0] = (o) => e.clickSecondaryButton(o))
     }, {
-      default: r(() => [
-        f(w(t.loanInBasketButtonText), 1)
+      default: l(() => [
+        f(w(e.loanInBasketButtonText), 1)
       ]),
       _: 1
-    }, 8, ["class", "to", "href"])) : t.showNonActionableLoanButton ? (i(), a(m, {
+    }, 8, ["class", "to", "href"])) : e.showNonActionableLoanButton ? (i(), a(m, {
       key: 2,
       class: "tw-inline-flex tw-flex-1"
     }, {
-      default: r(() => [
-        f(w(t.ctaButtonText), 1)
+      default: l(() => [
+        f(w(e.ctaButtonText), 1)
       ]),
       _: 1
-    })) : t.isFunded ? (i(), l("div", K, " This loan was just funded! 🎉 ")) : s.showViewLoan ? (i(), a(m, {
+    })) : e.isFunded ? (i(), r("div", K, " This loan was just funded! 🎉 ")) : s.showViewLoan ? (i(), a(m, {
       key: 4,
-      state: `${t.allSharesReserved ? "disabled" : ""}`,
-      to: s.externalLinks ? void 0 : t.readMorePath,
-      href: s.externalLinks ? t.readMorePath : void 0,
+      state: `${e.allSharesReserved ? "disabled" : ""}`,
+      to: s.externalLinks ? void 0 : e.readMorePath,
+      href: s.externalLinks ? e.readMorePath : void 0,
       class: "tw-mb-0",
-      onClick: n[1] || (n[1] = (o) => e.$emit("show-loan-details", o))
+      onClick: n[1] || (n[1] = (o) => t.$emit("show-loan-details", o))
     }, {
-      default: r(() => [
+      default: l(() => [
         u("span", R, [
           n[6] || (n[6] = f(" View loan ")),
-          V(T, {
+          V(x, {
             class: "tw-w-3 tw-h-3 tw-align-middle",
             icon: c.mdiChevronRight
           }, null, 8, ["icon"])
         ])
       ]),
       _: 1
-    }, 8, ["state", "to", "href"])) : t.useFormSubmit ? (i(), l("form", {
+    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (i(), r("form", {
       key: 5,
       class: "tw-w-full tw-flex",
-      onSubmit: n[4] || (n[4] = p((...o) => t.addToBasket && t.addToBasket(...o), ["prevent"]))
+      onSubmit: n[4] || (n[4] = p((...o) => e.addToBasket && e.addToBasket(...o), ["prevent"]))
     }, [
       u("fieldset", {
         class: h(["tw-w-full tw-flex", {
           "tw-flex-col md:tw-flex-row md:tw-justify-between": s.showPresetAmounts,
-          "tw-gap-1.5": s.showPresetAmounts && !t.isLendAmountButton
+          "tw-gap-1.5": s.showPresetAmounts && !e.isLendAmountButton
         }]),
         disabled: s.isAdding,
         "data-testid": "bp-lend-cta-select-and-button"
       }, [
-        s.showPresetAmounts && !s.isAdding ? (i(), l("div", {
+        s.showPresetAmounts && !s.isAdding ? (i(), r("div", {
           key: 0,
           class: h(["tw-flex tw-gap-1 lg:tw-gap-2", { "tw-flex-wrap md:tw-flex-nowrap": s.enableHugeAmount }])
         }, [
-          t.isLendAmountButton ? d("", !0) : (i(!0), l(L, { key: 0 }, g(t.presetButtonsPrices, (o) => (i(), a(m, {
+          e.isLendAmountButton ? d("", !0) : (i(!0), r(L, { key: 0 }, g(e.presetButtonsPrices, (o) => (i(), a(m, {
             key: o,
             variant: "secondary",
             class: h(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": c.selectedOption == o }]),
             "data-testid": "bp-lend-cta-lend-button",
-            onClick: (Z) => t.clickPresetButton(o)
+            onClick: (Z) => e.clickPresetButton(o)
           }, {
-            default: r(() => [
+            default: l(() => [
               f(" $" + w(o), 1)
             ]),
             _: 2
           }, 1032, ["class", "onClick"]))), 128)),
-          t.showFilteredDropdown ? (i(), a(v, {
+          e.showFilteredDropdown ? (i(), a(v, {
             key: 1,
-            id: `LoanAmountDropdown_${t.loanId}`,
+            id: `LoanAmountDropdown_${e.loanId}`,
             modelValue: c.selectedDropdownOption,
             "onUpdate:modelValue": [
               n[2] || (n[2] = (o) => c.selectedDropdownOption = o),
-              t.trackLendAmountSelection
+              e.trackLendAmountSelection
             ],
             class: h(["tw-min-w-12 tw-rounded filtered-dropdown", {
-              "unselected-dropdown": !t.selectedDropdown,
-              "selected-dropdown": t.selectedDropdown,
+              "unselected-dropdown": !e.selectedDropdown,
+              "selected-dropdown": e.selectedDropdown,
               "tw-w-full": s.enableHugeAmount
             }]),
             "aria-label": "Lend amount",
-            onClick: p(t.clickDropdown, ["stop"])
+            onClick: p(e.clickDropdown, ["stop"])
           }, {
-            default: r(() => [
-              (i(!0), l(L, null, g(t.presetDropdownPrices, (o) => (i(), l("option", {
+            default: l(() => [
+              (i(!0), r(L, null, g(e.presetDropdownPrices, (o) => (i(), r("option", {
                 key: o,
                 value: o
               }, w(o !== c.OTHER_OPTION ? `$${o}` : o), 9, E))), 128))
             ]),
             _: 1
           }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : d("", !0)
-        ], 2)) : s.showPresetAmounts ? d("", !0) : (i(), l("div", j, [
-          t.hideShowLendDropdown && !t.isLessThan25 ? (i(), a(v, {
+        ], 2)) : s.showPresetAmounts ? d("", !0) : (i(), r("div", j, [
+          e.hideShowLendDropdown && !e.isLessThan25 ? (i(), a(v, {
             key: 0,
-            id: `LoanAmountDropdown_${t.loanId}`,
+            id: `LoanAmountDropdown_${e.loanId}`,
             modelValue: c.selectedOption,
             "onUpdate:modelValue": [
               n[3] || (n[3] = (o) => c.selectedOption = o),
-              t.trackLendAmountSelection
+              e.trackLendAmountSelection
             ],
             class: "tw-min-w-12",
             style: { "border-radius": "14px 0 0 14px" },
             "aria-label": "Lend amount",
-            onClick: p(t.clickDropdown, ["stop"])
+            onClick: p(e.clickDropdown, ["stop"])
           }, {
-            default: r(() => [
-              (i(!0), l(L, null, g(t.prices, (o) => (i(), l("option", {
+            default: l(() => [
+              (i(!0), r(L, null, g(e.prices, (o) => (i(), r("option", {
                 key: o,
                 value: o
               }, " $" + w(o), 9, z))), 128))
@@ -512,46 +516,46 @@ function q(e, n, s, A, c, t) {
         ])),
         u("div", {
           class: h({
-            lendButtonWrapper: t.hideShowLendDropdown && !s.showPresetAmounts,
-            "tw-hidden": t.hideLendButton
+            lendButtonWrapper: e.hideShowLendDropdown && !s.showPresetAmounts,
+            "tw-hidden": e.hideLendButton
           })
         }, [
-          t.lendButtonVisibility && !t.isLessThan25 ? (i(), a(m, {
+          e.lendButtonVisibility && !e.isLessThan25 ? (i(), a(m, {
             key: "lendButton",
             class: h(["tw-inline-flex tw-flex-1", { "tw-w-full": s.showPresetAmounts }]),
             "data-testid": "bp-lend-cta-lend-button",
             type: "submit"
           }, {
-            default: r(() => [
-              f(w(t.ctaButtonText), 1)
+            default: l(() => [
+              f(w(e.ctaButtonText), 1)
             ]),
             _: 1
-          }, 8, ["class"])) : t.showLendAgain ? (i(), a(m, {
+          }, 8, ["class"])) : e.showLendAgain ? (i(), a(m, {
             key: "lendAgainButton",
             class: h(["lend-again", { "tw-w-full": s.showPresetAmounts }]),
             "data-testid": "bp-lend-cta-lend-again-button",
             type: "submit"
           }, {
-            default: r(() => [
+            default: l(() => [
               f(w(s.primaryButtonText || "Lend") + " again ", 1)
             ]),
             _: 1
           }, 8, ["class"])) : d("", !0)
         ], 2),
-        t.isLendAmountButton && !s.enableFiveDollarsNotes ? (i(), a(x, {
+        e.isLendAmountButton && !s.enableFiveDollarsNotes ? (i(), a(T, {
           key: 2,
           class: "tw-w-full",
-          "loan-id": t.loanId,
+          "loan-id": e.loanId,
           "show-now": !1,
-          "amount-left": s.unreservedAmount,
+          "amount-left": e.amountForLendAmountButton,
           "is-adding": s.isAdding,
-          onAddToBasket: t.addToBasket
+          onAddToBasket: e.addToBasket
         }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : d("", !0),
         !s.isLoading && s.isAdding ? (i(), a(m, {
           key: 3,
           class: "tw-inline-flex tw-flex-1"
         }, {
-          default: r(() => n[7] || (n[7] = [
+          default: l(() => n[7] || (n[7] = [
             f(" Adding to basket ")
           ])),
           _: 1
@@ -560,9 +564,9 @@ function q(e, n, s, A, c, t) {
     ], 32)) : d("", !0)
   ]);
 }
-const ae = /* @__PURE__ */ O(M, [["render", q], ["__scopeId", "data-v-e06394ac"]]);
+const at = /* @__PURE__ */ O(M, [["render", q], ["__scopeId", "data-v-8b9dbed8"]]);
 export {
-  oe as KV_LEND_CTA_FRAGMENT,
-  ie as KV_LEND_CTA_USER_FRAGMENT,
-  ae as default
+  ot as KV_LEND_CTA_FRAGMENT,
+  it as KV_LEND_CTA_USER_FRAGMENT,
+  at as default
 };

package/dist/vue/KvSideSheet.js

@@ -1,10 +1,10 @@
-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";
+import { toRefs as T, ref as h, watch as B, resolveComponent as _, openBlock as d, createElementBlock as f, normalizeClass as r, withModifiers as j, createElementVNode as a, normalizeStyle as V, createVNode as v, toDisplayString as z, createCommentVNode as u, renderSlot as C } from "vue";
+import { mdiClose as F, mdiArrowLeft as K, mdiExportVariant as N } from "@mdi/js";
+import R from "./KvMaterialIcon.js";
+import A from "../_virtual/_plugin-vue_export-helper.js";
 const G = {
   components: {
-    KvMaterialIcon: V
+    KvMaterialIcon: R
   },
   props: {
     /**
@@ -41,6 +41,13 @@ const G = {
     animationSourceElement: {
       type: Object,
       default: () => ({})
+    },
+    /**
+     * The headline of the side sheet
+     */
+    headline: {
+      type: String,
+      default: ""
     }
   },
   emits: [
@@ -48,116 +55,146 @@ const G = {
   ],
   setup(w, { emit: o }) {
     const {
-      visible: a,
+      visible: s,
       kvTrackFunction: t,
-      trackEventCategory: m,
-      animationSourceElement: r
-    } = T(w), n = f(!1), i = f({}), s = f({});
-    let u = null;
-    const v = () => {
-      const l = "tw-overflow-hidden";
-      n.value ? document.body.classList.add(l) : document.body.classList.remove(l);
-    }, y = () => {
-      n.value = !1, v(), t.value(m.value, "click", "side-sheet-closed"), r.value && (s.value = {
+      trackEventCategory: p,
+      animationSourceElement: y
+    } = T(w), l = h(!1), i = h({}), c = h({});
+    let m = null;
+    const g = () => {
+      const n = "tw-overflow-hidden";
+      l.value ? document.body.classList.add(n) : document.body.classList.remove(n);
+    }, k = () => {
+      l.value = !1, g(), t.value(p.value, "click", "side-sheet-closed"), y.value && (c.value = {
         ...i.value,
         transition: "all 0.5s ease-in-out"
       }), setTimeout(() => {
         o("side-sheet-closed");
-      }, "700"), document.removeEventListener("keyup", u);
-    }, x = () => {
+      }, "700"), document.removeEventListener("keyup", m);
+    }, E = () => {
       o("go-to-link");
     };
-    return u = (l) => {
-      l && l.key === "Escape" && y();
-    }, E(a, () => {
-      var l;
-      if (a.value) {
-        document.addEventListener("keyup", u), setTimeout(() => {
-          n.value = !0, v();
+    return m = (n) => {
+      n && n.key === "Escape" && k();
+    }, B(s, () => {
+      var n;
+      if (s.value) {
+        document.addEventListener("keyup", m), setTimeout(() => {
+          l.value = !0, g();
         }, 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 = {
+        const e = (n = y.value) == null ? void 0 : n.getBoundingClientRect(), S = (e == null ? void 0 : e.top) ?? 0, L = (e == null ? void 0 : e.left) ?? 0, b = (e == null ? void 0 : e.width) ?? 0, x = (e == null ? void 0 : e.height) ?? 0;
+        S || L || b || x ? (i.value = {
           position: "fixed",
-          top: `${h}px`,
-          width: `${p}px`,
-          height: `${k}px`
-        }, s.value = {
+          top: `${S}px`,
+          width: `${b}px`,
+          height: `${x}px`
+        }, c.value = {
           ...i.value,
           transition: "none"
         }, setTimeout(() => {
-          s.value = {
+          c.value = {
             top: "0",
             width: "100%",
             height: "100%",
             transition: "all 0.5s ease-in-out"
           };
-        }, 10)) : s.value = {};
+        }, 10)) : c.value = {};
       }
     }), {
-      mdiClose: K,
-      mdiLaunch: N,
-      open: n,
-      closeSideSheet: y,
-      goToLink: x,
-      modalStyles: s
+      mdiClose: F,
+      mdiArrowLeft: K,
+      mdiExportVariant: N,
+      open: l,
+      closeSideSheet: k,
+      goToLink: E,
+      modalStyles: c
     };
   }
-};
-function M(w, o, a, t, m, r) {
-  const n = B("kv-material-icon");
-  return a.visible ? (g(), S("div", {
+}, M = { class: "tw-flex tw-items-cente tw-gap-1.5" }, D = { key: 0 }, I = { class: "tw-flex tw-items-cente tw-gap-1.5" };
+function O(w, o, s, t, p, y) {
+  const l = _("kv-material-icon");
+  return s.visible ? (d(), f("div", {
     key: 0,
-    class: c(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
+    class: r(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
       "tw-bg-opacity-0 tw-delay-300": !t.open,
       "tw-bg-opacity-low": t.open
     }]),
-    onClick: o[2] || (o[2] = _((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+    onClick: o[3] || (o[3] = j((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
   }, [
-    d("div", {
-      class: c(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto tw-p-2", {
+    a("div", {
+      class: r(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto", {
         "tw-w-0 tw-delay-200 tw-opacity-0": !t.open,
-        "lg:tw-w-1/2 tw-w-full tw-opacity-full": t.open
-      }]),
-      style: z(t.modalStyles)
+        "lg:tw-w-1/2 tw-w-full tw-opacity-full": t.open,
+        "tw-h-full": w.$slots.controls
+      }])
     }, [
-      d("div", {
-        class: c(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200", {
-          "tw-opacity-0": !t.open,
-          "tw-opacity-full": t.open
-        }])
+      a("div", {
+        class: "tw-relative tw-h-full",
+        style: V(t.modalStyles)
       }, [
-        d("button", {
-          class: "hover:tw-text-action-highlight",
-          onClick: o[0] || (o[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+        a("div", {
+          class: r(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200 tw-px-3 tw-py-2 tw-border-b tw-border-tertiary", {
+            "tw-opacity-0": !t.open,
+            "tw-opacity-full": t.open
+          }])
         }, [
-          b(n, {
-            class: "tw-w-3 tw-h-3",
-            icon: t.mdiClose
-          }, null, 8, ["icon"])
-        ]),
-        a.showGoToLink ? (g(), S("button", {
+          a("div", M, [
+            a("button", {
+              class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
+              onClick: o[0] || (o[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+            }, [
+              v(l, {
+                class: "tw-w-3 tw-h-3",
+                icon: t.mdiArrowLeft
+              }, null, 8, ["icon"])
+            ]),
+            s.headline ? (d(), f("h2", D, z(s.headline), 1)) : u("", !0)
+          ]),
+          a("div", I, [
+            s.showGoToLink ? (d(), f("button", {
+              key: 0,
+              class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
+              onClick: o[1] || (o[1] = (...i) => t.goToLink && t.goToLink(...i))
+            }, [
+              v(l, {
+                class: "tw-w-3 tw-h-3",
+                icon: t.mdiExportVariant
+              }, null, 8, ["icon"])
+            ])) : u("", !0),
+            a("button", {
+              class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
+              onClick: o[2] || (o[2] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+            }, [
+              v(l, {
+                class: "tw-w-3 tw-h-3",
+                icon: t.mdiClose
+              }, null, 8, ["icon"])
+            ])
+          ])
+        ], 2),
+        a("div", {
+          class: r(["tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200 tw-overscroll-y-contain", {
+            "tw-opacity-0": !t.open,
+            "tw-opacity-full": t.open
+          }])
+        }, [
+          C(w.$slots, "default")
+        ], 2),
+        w.$slots.controls ? (d(), f("div", {
           key: 0,
-          class: "hover:tw-text-action-highlight",
-          onClick: o[1] || (o[1] = (...i) => t.goToLink && t.goToLink(...i))
+          ref: "controlsRef",
+          class: r(["tw-absolute tw-border-t tw-border-tertiary tw-w-full tw-bottom-0 tw-bg-white", {
+            "tw-opacity-0": !t.open,
+            "tw-opacity-full": t.open
+          }])
         }, [
-          b(n, {
-            class: "tw-w-3 tw-h-3",
-            icon: t.mdiLaunch
-          }, null, 8, ["icon"])
-        ])) : C("", !0)
-      ], 2),
-      d("div", {
-        class: c(["tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200 tw-overscroll-y-contain", {
-          "tw-opacity-0": !t.open,
-          "tw-opacity-full": t.open
-        }])
-      }, [
-        F(w.$slots, "default")
-      ], 2)
-    ], 6)
-  ], 2)) : C("", !0);
+          C(w.$slots, "controls")
+        ], 2)) : u("", !0)
+      ], 4)
+    ], 2)
+  ], 2)) : u("", !0);
 }
-const q = /* @__PURE__ */ j(G, [["render", M]]);
+const P = /* @__PURE__ */ A(G, [["render", O]]);
 export {
-  q as default
+  P as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.16.0",
+  "version": "6.17.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "6b563c82fd8270b4df50c76da70eed7f2c82b908"
+  "gitHead": "a1edf8cf5d70ab233c93d312548a73475308a33a"
 }