@kiva/kv-components 6.29.1 → 6.29.2

package/dist/vue/KvSideSheet.js

@@ -1,11 +1,11 @@
-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";
-import { mdiArrowLeft as ee, mdiClose as te, mdiExportVariant as oe } from "@mdi/js";
-import ne from "./KvMaterialIcon.js";
-import ie from "../_virtual/_plugin-vue_export-helper.js";
-const le = {
+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";
+import { mdiArrowLeft as oe, mdiClose as ne, mdiExportVariant as ie } from "@mdi/js";
+import le from "./KvMaterialIcon.js";
+import se from "../_virtual/_plugin-vue_export-helper.js";
+const ae = {
   name: "KvSideSheet",
   components: {
-    KvMaterialIcon: ne
+    KvMaterialIcon: le
   },
   props: {
     /**
@@ -65,7 +65,7 @@ const le = {
     widthDimensions: {
       type: [String, Object],
       default: () => ({ default: "100%", md: "50%" }),
-      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
+      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
     },
     /**
      * Whether to hide the background of the headline section on mobile (e.g., in Borrower Profile Sidesheet)
@@ -76,92 +76,88 @@ const le = {
     }
   },
   emits: ["side-sheet-closed", "go-to-link"],
-  setup(n, { emit: i, slots: l }) {
+  setup(o, { emit: n, slots: i }) {
     const {
       visible: t,
-      kvTrackFunction: z,
-      trackEventCategory: M,
-      widthDimensions: s,
-      hideHeadlineBgOnMobile: r
-    } = J(n), d = f(!1), a = f({}), E = f(null), m = f(null), y = f(null), _ = f(null), V = f(null), h = P({
+      kvTrackFunction: M,
+      trackEventCategory: _,
+      widthDimensions: l,
+      hideHeadlineBgOnMobile: d
+    } = 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({
       headline: 0,
       controls: 0
-    }), N = O(() => {
-      const e = _.value - (r.value ? 0 : h.headline) - h.controls;
+    }), U = j(() => {
+      const e = V.value - (d.value ? 0 : v.headline) - v.controls;
       return Math.max(e, 0);
-    }), W = O(() => {
-      if (typeof s.value == "string")
-        return s.value;
+    }), I = j(() => {
+      if (typeof l.value == "string")
+        return l.value;
       const e = {
         sm: 640,
         md: 768,
         lg: 1024,
         xl: 1280,
         "2xl": 1536
-      }, 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]);
-      return w ? s.value[w] : s.value.default || "100%";
-    }), U = (e, o) => {
-      let w;
-      return (...c) => {
-        clearTimeout(w), w = setTimeout(() => e(...c), o);
+      }, 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]);
+      return f ? l.value[f] : l.value.default || "100%";
+    }), A = (e, s) => {
+      let f;
+      return (...u) => {
+        clearTimeout(f), f = setTimeout(() => e(...u), s);
       };
-    }, S = () => {
-      _.value = window.innerHeight, V.value = window.innerWidth, setTimeout(() => {
-        $(() => {
+    }, E = () => {
+      V.value = window.innerHeight, W.value = window.innerWidth, setTimeout(() => {
+        te(() => {
           var e;
           if (y.value) {
-            const o = y.value.getBoundingClientRect();
-            h.headline = o.height;
+            const s = y.value.getBoundingClientRect();
+            v.headline = s.height;
           } else
-            h.headline = 0;
-          if ((e = l.controls) != null && e.call(l) && m.value) {
-            const o = m.value.getBoundingClientRect();
-            h.controls = o.height;
+            v.headline = 0;
+          if ((e = i.controls) != null && e.call(i) && m.value) {
+            const s = m.value.getBoundingClientRect();
+            v.controls = s.height;
           } else
-            h.controls = 0;
+            v.controls = 0;
         });
       }, 300);
-    }, B = U(S, 100), T = () => {
+    }, C = A(E, 100), R = () => {
       const e = "tw-overflow-hidden";
-      d.value ? document.body.classList.add(e) : document.body.classList.remove(e);
+      c.value ? document.body.classList.add(e) : document.body.classList.remove(e);
     }, K = () => {
-      d.value = !1, T(), z.value(M.value, "click", "side-sheet-closed"), setTimeout(() => {
-        i("side-sheet-closed");
-      }, 300), document.removeEventListener("keyup", R);
-    }, A = () => {
-      i("go-to-link");
-    }, R = (e) => {
+      c.value = !1, R(), M.value(_.value, "click", "side-sheet-closed"), setTimeout(() => {
+        n("side-sheet-closed");
+      }, 300), document.removeEventListener("keyup", L);
+    }, G = () => {
+      n("go-to-link");
+    }, L = (e) => {
       (e == null ? void 0 : e.key) === "Escape" && K();
     };
-    Q(() => {
-      if (setTimeout(() => {
-        S();
-      }, 100), m.value) {
-        const e = new ResizeObserver(B);
-        e.observe(m.value), C(() => e.disconnect());
-      }
-      if (y.value) {
-        const e = new ResizeObserver(B);
-        e.observe(y.value), C(() => e.disconnect());
-      }
-      window.addEventListener("resize", B), C(() => window.removeEventListener("resize", B));
+    X(() => {
+      setTimeout(() => {
+        E();
+      }, 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);
+    }), Y(() => {
+      S.value && S.value.disconnect(), B.value && B.value.disconnect(), window.removeEventListener("resize", C);
+      const e = document.getElementById("side-sheet-styles");
+      e && e.remove();
     }), g(() => {
       var e;
-      return (e = l.controls) == null ? void 0 : e.call(l);
+      return (e = i.controls) == null ? void 0 : e.call(i);
     }, () => {
       setTimeout(() => {
-        S();
+        E();
       }, 100);
     }, { deep: !0 });
-    const G = O(() => ({
-      width: W.value
+    const q = j(() => ({
+      width: I.value
     }));
     g(t, (e) => {
-      typeof window < "u" && (e ? (document.addEventListener("keyup", R), a.value = {}, setTimeout(() => {
-        d.value = !0, T(), S();
-      }, 10)) : (d.value = !1, T(), document.removeEventListener("keyup", R), a.value = {}));
-    }, { immediate: !0 }), g(W, (e) => {
-      d.value && t.value && a.value && Object.keys(a.value).length > 0 && (a.value = {
+      typeof window < "u" && (e ? (document.addEventListener("keyup", L), a.value = {}, setTimeout(() => {
+        c.value = !0, R(), E();
+      }, 10)) : (c.value = !1, R(), document.removeEventListener("keyup", L), a.value = {}));
+    }, { immediate: !0 }), g(I, (e) => {
+      c.value && t.value && a.value && Object.keys(a.value).length > 0 && (a.value = {
         ...a.value,
         width: e,
         transition: "none"
@@ -174,132 +170,130 @@ const le = {
       }, 50));
     });
     const D = () => {
-      if (typeof s.value == "object" && E.value) {
+      if (typeof l.value == "object" && T.value) {
         const e = "side-sheet-styles";
-        let o = document.getElementById(e);
-        o || (o = document.createElement("style"), o.id = e, document.head.appendChild(o));
-        const w = {
+        let s = document.getElementById(e);
+        s || (s = document.createElement("style"), s.id = e, document.head.appendChild(s));
+        const f = {
           sm: "640px",
           md: "768px",
           lg: "1024px",
           xl: "1280px",
           "2xl": "1536px"
-        }, L = Object.keys(s.value).filter((v) => v !== "default").sort((v, q) => {
+        }, O = Object.keys(l.value).filter((h) => h !== "default").sort((h, J) => {
           const F = ["sm", "md", "lg", "xl", "2xl"];
-          return F.indexOf(v) - F.indexOf(q);
-        }).map((v) => `
-						@media (min-width: ${w[v]}) {
-							#side-sheet-${n.trackEventCategory || "default"} {
-								width: ${s.value[v]} !important;
+          return F.indexOf(h) - F.indexOf(J);
+        }).map((h) => `
+						@media (min-width: ${f[h]}) {
+							#side-sheet-${o.trackEventCategory || "default"} {
+								width: ${l.value[h]} !important;
 							}
 						}
 					`).join("");
-        o.textContent = L, E.value.id = `side-sheet-${n.trackEventCategory || "default"}`, C(() => {
-          o && o.remove();
-        });
+        s.textContent = O, T.value.id = `side-sheet-${o.trackEventCategory || "default"}`;
       }
     };
-    return g(s, () => {
-      d.value && D();
-    }, { immediate: !0 }), g(d, (e) => {
+    return g(l, () => {
+      c.value && D();
+    }, { immediate: !0 }), g(c, (e) => {
       e && D();
     }), {
       closeSideSheet: K,
-      contentHeight: N,
+      contentHeight: U,
       controlsRef: m,
       headlineRef: y,
-      sideSheetRef: E,
-      sideSheetStyles: G,
-      goToLink: A,
-      mdiArrowLeft: ee,
-      mdiClose: te,
-      mdiExportVariant: oe,
+      sideSheetRef: T,
+      sideSheetStyles: q,
+      goToLink: G,
+      mdiArrowLeft: oe,
+      mdiClose: ne,
+      mdiExportVariant: ie,
       modalStyles: a,
-      open: d
+      open: c
     };
   }
-}, se = { class: "tw-flex tw-gap-1.5" }, ae = { key: 1 }, re = { class: "tw-flex tw-gap-1.5" };
-function de(n, i, l, t, z, M) {
-  const s = X("kv-material-icon");
-  return l.visible ? (p(), k("div", {
+}, de = { class: "tw-flex tw-gap-1.5" }, re = { key: 1 }, ce = { class: "tw-flex tw-gap-1.5" };
+function ue(o, n, i, t, M, _) {
+  const l = Z("kv-material-icon");
+  return i.visible ? (p(), k("div", {
     key: 0,
     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", {
       "tw-bg-opacity-0 tw-delay-300": !t.open,
       "tw-bg-opacity-low": t.open
     }]),
-    onClick: i[3] || (i[3] = Y((...r) => t.closeSideSheet && t.closeSideSheet(...r), ["self"]))
+    onClick: n[3] || (n[3] = $((...d) => t.closeSideSheet && t.closeSideSheet(...d), ["self"]))
   }, [
-    u("div", {
+    w("div", {
       ref: "sideSheetRef",
       class: b(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white", {
         "tw-translate-x-full": !t.open,
         "tw-translate-x-0": t.open,
-        "tw-h-full": n.$slots.controls
+        "tw-h-full": o.$slots.controls
       }]),
-      style: j(t.sideSheetStyles)
+      style: H(t.sideSheetStyles)
     }, [
-      u("div", {
+      w("div", {
         class: "tw-flex tw-flex-col tw-h-full",
-        style: j(t.modalStyles)
+        style: H(t.modalStyles)
       }, [
-        u("div", {
+        w("div", {
           ref: "headlineRef",
           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", {
             "tw-opacity-0": !t.open,
             "tw-opacity-full": t.open,
-            "tw-border-b": l.showHeadlineBorder
+            "tw-border-b": i.showHeadlineBorder
           }])
         }, [
-          u("div", se, [
-            l.showBackButton ? (p(), k("button", {
+          w("div", de, [
+            i.showBackButton ? (p(), k("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: i[0] || (i[0] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
+              onClick: n[0] || (n[0] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
             }, [
-              H(s, {
+              z(l, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiArrowLeft
               }, null, 8, ["icon"])
             ])) : x("", !0),
-            l.headline ? (p(), k("h3", ae, Z(l.headline), 1)) : x("", !0)
+            i.headline ? (p(), k("h3", re, ee(i.headline), 1)) : x("", !0)
           ]),
-          u("div", re, [
-            l.showGoToLink ? (p(), k("button", {
+          w("div", ce, [
+            i.showGoToLink ? (p(), k("button", {
               key: 0,
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: i[1] || (i[1] = (...r) => t.goToLink && t.goToLink(...r))
+              onClick: n[1] || (n[1] = (...d) => t.goToLink && t.goToLink(...d))
             }, [
-              H(s, {
+              z(l, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiExportVariant
               }, null, 8, ["icon"])
             ])) : x("", !0),
-            u("button", {
+            w("button", {
               class: "hover:tw-text-action-highlight tw-flex tw-items-center tw-justify-center",
-              onClick: i[2] || (i[2] = (...r) => t.closeSideSheet && t.closeSideSheet(...r))
+              onClick: n[2] || (n[2] = (...d) => t.closeSideSheet && t.closeSideSheet(...d))
             }, [
-              H(s, {
+              z(l, {
                 class: "tw-w-3 tw-h-3",
                 icon: t.mdiClose
               }, null, 8, ["icon"])
             ])
           ])
         ], 2),
-        u("div", {
+        w("div", {
           id: "sidesheet-content",
           class: "tw-overflow-y-auto tw-overscroll-y-contain",
-          style: j({ height: t.contentHeight + "px" })
+          style: H({ height: t.contentHeight + "px" })
         }, [
-          u("div", {
+          w("div", {
             class: b(["tw-px-2 tw-transition-opacity tw-duration-200", {
               "tw-opacity-0": !t.open,
               "tw-opacity-full": t.open
             }])
           }, [
-            I(n.$slots, "default")
+            N(o.$slots, "default")
           ], 2)
         ], 4),
-        n.$slots.controls ? (p(), k("div", {
+        o.$slots.controls ? (p(), k("div", {
           key: 0,
           ref: "controlsRef",
           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) {
           }]),
           style: { "z-index": "999" }
         }, [
-          I(n.$slots, "controls")
+          N(o.$slots, "controls")
         ], 2)) : x("", !0)
       ], 4)
     ], 6)
   ], 2)) : x("", !0);
 }
-const he = /* @__PURE__ */ ie(le, [["render", de]]);
+const me = /* @__PURE__ */ se(ae, [["render", ue]]);
 export {
-  he as default
+  me as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.29.1",
+  "version": "6.29.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -111,5 +111,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "e2d96427d1426167e21837090886639a6de203e8"
+  "gitHead": "048dc13ccb276f6da7a3f2554215aef259788968"
 }