@kiva/kv-components 6.56.1 → 6.56.2

package/dist/vue/KvWwwHeader/KvHeaderDropdownLink.js

@@ -1,8 +1,8 @@
-import { getCurrentInstance as c, computed as d, resolveComponent as m, openBlock as u, createElementBlock as f, createElementVNode as w, normalizeClass as l, renderSlot as p, createVNode as v } from "vue";
-import h from "../KvMaterialIcon.js";
+import { getCurrentInstance as u, computed as d, resolveComponent as m, openBlock as f, createElementBlock as w, createElementVNode as h, normalizeClass as i, renderSlot as p, createVNode as v } from "vue";
+import C from "../KvMaterialIcon.js";
 import x from "../../_virtual/_plugin-vue_export-helper.js";
-const C = {
-  components: { KvMaterialIcon: h },
+const M = {
+  components: { KvMaterialIcon: C },
   props: {
     refName: {
       type: String,
@@ -34,55 +34,58 @@ const C = {
     }
   },
   emits: [
-    "on-hover"
+    "on-hover",
+    "user-tap"
   ],
-  setup(e, { emit: o }) {
-    const { proxy: n } = c();
+  setup(e, { emit: n }) {
+    const { proxy: o } = u(), r = d(() => [
+      e.baseClass,
+      { "tw-text-tertiary": e.openMenuItem && e.openMenuItem !== e.menuComponent }
+    ]), a = () => {
+      if (!e.sendLinkPosition) return null;
+      const t = o.$refs[e.refName];
+      if (!t) return null;
+      const s = t.getBoundingClientRect();
+      return {
+        left: `${s.left + s.width / 2}px`,
+        transform: "translateX(-50%)",
+        borderRadius: "0px 0px 8px 8px"
+      };
+    };
     return {
-      computedClass: d(() => [
-        e.baseClass,
-        { "tw-text-tertiary": e.openMenuItem && e.openMenuItem !== e.menuComponent }
-      ]),
+      computedClass: r,
       handleMouseOver: () => {
-        if (!navigator.maxTouchPoints) {
-          let s = null;
-          if (e.sendLinkPosition) {
-            const a = n.$refs[e.refName];
-            if (a) {
-              const t = a.getBoundingClientRect();
-              s = {
-                left: `${(t == null ? void 0 : t.left) + (t == null ? void 0 : t.width) / 2}px`,
-                transform: "translateX(-50%)",
-                borderRadius: "0px 0px 8px 8px"
-              };
-            }
-          }
-          o("on-hover", e.refName, e.menuComponent, s);
-        }
+        const t = a();
+        n("on-hover", e.refName, e.menuComponent, t);
+      },
+      handleTouchStart: () => {
+        const t = a();
+        n("user-tap", e.refName, e.menuComponent, t);
       }
     };
   }
-}, M = ["href"];
-function y(e, o, n, r, i, s) {
-  const a = m("KvMaterialIcon");
-  return u(), f("a", {
-    ref: n.refName,
+}, y = ["href"];
+function k(e, n, o, r, a, c) {
+  const l = m("KvMaterialIcon");
+  return f(), w("a", {
+    ref: o.refName,
     class: "tw-py-1 tw-no-underline hover:tw-no-underline tw-text-primary hover:tw-text-action tw-items-center tw-cursor-pointer",
-    href: n.href,
-    onMouseover: o[0] || (o[0] = (...t) => r.handleMouseOver && r.handleMouseOver(...t))
+    href: o.href,
+    onMouseover: n[0] || (n[0] = (...t) => r.handleMouseOver && r.handleMouseOver(...t)),
+    onTouchstart: n[1] || (n[1] = (...t) => r.handleTouchStart && r.handleTouchStart(...t))
   }, [
-    w("div", {
-      class: l(["tw-flex tw-items-center", r.computedClass])
+    h("div", {
+      class: i(["tw-flex tw-items-center", r.computedClass])
     }, [
       p(e.$slots, "default"),
-      v(a, {
-        class: l(["tw-inline tw-w-3 tw-ml-0.5 tw-transition-transform tw-duration-300", { "tw-rotate-180": n.openMenuItem === n.menuComponent }]),
-        icon: n.dropdownIcon
+      v(l, {
+        class: i(["tw-inline tw-w-3 tw-ml-0.5 tw-transition-transform tw-duration-300", { "tw-rotate-180": o.openMenuItem === o.menuComponent }]),
+        icon: o.dropdownIcon
       }, null, 8, ["class", "icon"])
     ], 2)
-  ], 40, M);
+  ], 40, y);
 }
-const O = /* @__PURE__ */ x(C, [["render", y]]);
+const _ = /* @__PURE__ */ x(M, [["render", k]]);
 export {
-  O as default
+  _ as default
 };

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.css

@@ -1 +1 @@
-.header-link[data-v-290d8315]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-290d8315]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}[data-v-290d8315] .avatar div:first-child{display:flex}
+.header-link[data-v-7bbc2157]{cursor:pointer;padding-top:1rem;padding-bottom:1rem;--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.header-link[data-v-7bbc2157]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:none}[data-v-7bbc2157] .avatar div:first-child{display:flex}

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.js

@@ -1,20 +1,20 @@
-import { defineAsyncComponent as k, ref as a, computed as C, onMounted as G, onUnmounted as J, resolveComponent as h, resolveDirective as Q, openBlock as r, createElementBlock as c, withDirectives as s, normalizeClass as p, createVNode as E, createBlock as f, withCtx as H, createTextVNode as M, createElementVNode as L, createCommentVNode as B, vShow as X, toDisplayString as Y } from "vue";
+import { defineAsyncComponent as g, ref as l, computed as S, watch as G, onMounted as J, onUnmounted as Q, resolveComponent as T, resolveDirective as X, openBlock as i, createElementBlock as w, withDirectives as m, normalizeClass as y, createVNode as _, createBlock as f, withCtx as H, createTextVNode as M, createElementVNode as A, createCommentVNode as C, vShow as E, toDisplayString as Y } from "vue";
 import { mdiAccountCircle as Z, mdiChevronDown as $, mdiMagnify as ee, mdiMenu as ne } from "@mdi/js";
 import te from "numeral";
 import oe from "../KvMaterialIcon.js";
-import le from "../KvIconBag.js";
-import ae from "./KvHeaderDropdownLink.js";
-import re from "../KvUserAvatar.js";
-import { throttle as ie } from "../../utils/throttle.js";
+import ae from "../KvIconBag.js";
+import le from "./KvHeaderDropdownLink.js";
+import ie from "../KvUserAvatar.js";
+import { throttle as re } from "../../utils/throttle.js";
 import { isLegacyPlaceholderAvatar as de } from "../../utils/imageUtils.js";
 import "./KvHeaderLinkBar.css";
 import ue from "../../_virtual/_plugin-vue_export-helper.js";
-const me = k(() => import("./KvHeaderMobileMenu.js")), S = k(() => import("./KvHeaderMyKivaMenu.js")), se = k(() => import("./LendMenu/KvLendMenu.js")), ve = k(() => import("./KvHeaderTakeActionMenu.js")), ce = k(() => import("./KvHeaderAboutMenu.js")), P = 146, y = "avatar-menu", K = "menuButton", V = { top: "-3.75rem", width: "100%" }, we = {
+const me = g(() => import("./KvHeaderMobileMenu.js")), P = g(() => import("./KvHeaderMyKivaMenu.js")), se = g(() => import("./LendMenu/KvLendMenu.js")), ve = g(() => import("./KvHeaderTakeActionMenu.js")), ce = g(() => import("./KvHeaderAboutMenu.js")), L = 120, k = "avatar-menu", U = "menuButton", V = { top: "-3.75rem", width: "100%" }, we = {
   components: {
     KvMaterialIcon: oe,
-    KvIconBag: le,
-    KvHeaderDropdownLink: ae,
-    KvUserAvatar: re
+    KvIconBag: ae,
+    KvHeaderDropdownLink: le,
+    KvUserAvatar: ie
   },
   props: {
     loggedIn: {
@@ -57,70 +57,76 @@ const me = k(() => import("./KvHeaderMobileMenu.js")), S = k(() => import("./KvH
   emits: [
     "item-hover"
   ],
-  setup(d, { emit: e }) {
-    const t = a(null), n = a(null), O = a(null), U = a(null), g = a(null), w = a(null), A = a(null), T = a(null), i = a(null), o = a(null), I = a(!1), b = a(), u = (l, m, v = null) => {
-      e("item-hover", l, m, v);
-    }, R = (l, m, v = null) => {
-      navigator.maxTouchPoints || (o.value = l, u(
-        l,
-        m,
-        l === K && d.isMobile ? V : v
+  setup(r, { emit: n }) {
+    const o = l(null), e = l(null), B = l(null), K = l(null), b = l(null), c = l(null), x = l(null), I = l(null), d = l(null), t = l(null), O = l(!1), h = l(), s = (a, v, u = null) => {
+      n("item-hover", a, v, u);
+    }, R = (a, v, u = null) => {
+      navigator.maxTouchPoints || (t.value = a, s(
+        a,
+        v,
+        a === U && r.isMobile ? V : u
       ));
-    }, F = (l) => {
-      !I.value && o.value === l && (o.value = null, u());
+    }, F = (a) => {
+      !navigator.maxTouchPoints && t.value === a && (t.value = null, s());
     }, z = () => {
-      var D, _;
-      const l = (_ = (D = t.value) == null ? void 0 : D.userAvatar) == null ? void 0 : _.getBoundingClientRect();
-      if (!l) return null;
-      const v = l.left + l.width / 2 - P / 2;
+      var D;
+      const a = (D = o.value) == null ? void 0 : D.getBoundingClientRect();
+      if (!a) return null;
+      const u = a.left + a.width / 2 - L / 2;
       return {
-        ...v + P > window.innerWidth ? { right: 0 } : { left: d.isMobile ? 0 : `${v}px` },
+        ...u + L > window.innerWidth ? { right: 0 } : { left: r.isMobile ? 0 : `${u}px` },
         marginTop: "-2px",
         // Avoid closing avatar menu on header edge
-        borderRadius: d.isMobile ? "auto" : "0px 0px 8px 8px"
+        borderRadius: r.isMobile ? "auto" : "0px 0px 8px 8px",
+        width: r.isMobile ? "100%" : `${L}px`
       };
-    }, x = () => {
-      o.value = y, u(t.value, S, z());
-    }, W = (l, m) => {
-      b.value = null, I.value = !0, b.value && clearTimeout(b.value), o.value === K && (o.value = null), !o.value || o.value !== l ? (o.value = l, l === y ? x() : l === K && d.isMobile ? u(l, m, V) : u(l, m)) : (o.value = null, u()), b.value = setTimeout(() => {
-        I.value = !1;
+    }, p = () => {
+      t.value = k, s(o.value, P, z());
+    }, W = (a, v, u) => {
+      h.value = null, O.value = !0, h.value && clearTimeout(h.value), t.value === U && (t.value = null), !t.value || t.value !== a ? (t.value = a, a === k ? p() : a === U && r.isMobile ? s(a, v, V) : s(a, v, u)) : (t.value = null, s()), h.value = setTimeout(() => {
+        O.value = !1;
       }, 500);
-    }, N = ie(() => {
-      o.value === y && x();
-    }, 100), j = C(() => d.isMobile ? void 0 : "/lend-by-category"), q = C(() => {
-      var l;
-      return ((l = d.lenderImageUrl) == null ? void 0 : l.split("/").pop()) ?? "";
+    }, N = re(() => {
+      t.value === k && p();
+    }, 100), j = S(() => r.isMobile ? void 0 : "/lend-by-category"), q = S(() => {
+      var a;
+      return ((a = r.lenderImageUrl) == null ? void 0 : a.split("/").pop()) ?? "";
     });
-    return G(() => {
+    return G(
+      () => r.isMobile,
+      () => {
+        t.value === k && p();
+      }
+    ), J(() => {
       import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", N);
-    }), J(() => {
+    }), Q(() => {
       window.removeEventListener("resize", N);
     }), {
-      AVATAR_MENU_ID: y,
-      openMenuId: o,
+      AVATAR_MENU_ID: k,
+      openMenuId: t,
       numeral: te,
       mdiAccountCircle: Z,
       mdiChevronDown: $,
       mdiMagnify: ee,
       mdiMenu: ne,
-      onHover: u,
-      avatar: t,
-      lendButton: n,
-      aboutUsLink: O,
-      partnerWithUsLink: U,
-      borrowLink: g,
-      supportKivaLink: w,
-      basketLink: A,
-      signInLink: T,
-      menuButton: i,
+      onHover: s,
+      avatar: o,
+      lendButton: e,
+      aboutUsLink: B,
+      partnerWithUsLink: K,
+      borrowLink: b,
+      supportKivaLink: c,
+      basketLink: x,
+      signInLink: I,
+      menuButton: d,
       lendUrl: j,
       avatarFilename: q,
       handleOnHover: R,
       handleTouchStart: W,
       handleMouseOut: F,
-      handleAvatarMenuPosition: x,
+      handleAvatarMenuPosition: p,
       KvHeaderMobileMenu: me,
-      KvHeaderMyKivaMenu: S,
+      KvHeaderMyKivaMenu: P,
       KvLendMenu: se,
       KvHeaderTakeActionMenu: ve,
       KvHeaderAboutMenu: ce,
@@ -128,137 +134,140 @@ const me = k(() => import("./KvHeaderMobileMenu.js")), S = k(() => import("./KvH
     };
   }
 }, fe = { class: "tw-h-full tw-flex tw-items-center tw-gap-0.5 md:tw-gap-2 lg:tw-gap-2.5" }, Me = ["href"], ke = { class: "tw-text-eco-green-4" }, ge = ["href"];
-function be(d, e, t, n, O, U) {
-  const g = h("kv-material-icon"), w = h("KvHeaderDropdownLink"), A = h("kv-icon-bag"), T = h("KvUserAvatar"), i = Q("kv-track-event");
-  return r(), c("div", fe, [
-    s((r(), c("button", {
+function be(r, n, o, e, B, K) {
+  const b = T("kv-material-icon"), c = T("KvHeaderDropdownLink"), x = T("kv-icon-bag"), I = T("KvUserAvatar"), d = X("kv-track-event");
+  return i(), w("div", fe, [
+    m((i(), w("button", {
       ref: "menuButton",
-      class: p(["header-link tw-inline-flex md:tw-hidden", {
-        "tw-text-tertiary": t.openMenuItem && t.openMenuItem !== n.KvHeaderMobileMenu
+      class: y(["header-link tw-inline-flex md:tw-hidden", {
+        "tw-text-tertiary": o.openMenuItem && o.openMenuItem !== e.KvHeaderMobileMenu
       }]),
-      onMouseover: e[0] || (e[0] = (o) => n.handleOnHover("menuButton", n.KvHeaderMobileMenu)),
-      onMouseout: e[1] || (e[1] = (o) => n.handleMouseOut("menuButton")),
-      onTouchstart: e[2] || (e[2] = (o) => n.handleTouchStart("menuButton", n.KvHeaderMobileMenu))
+      onMouseover: n[0] || (n[0] = (t) => e.handleOnHover("menuButton", e.KvHeaderMobileMenu)),
+      onMouseout: n[1] || (n[1] = (t) => e.handleMouseOut("menuButton")),
+      onTouchstart: n[2] || (n[2] = (t) => e.handleTouchStart("menuButton", e.KvHeaderMobileMenu))
     }, [
-      E(g, { icon: n.mdiMenu }, null, 8, ["icon"])
+      _(b, { icon: e.mdiMenu }, null, 8, ["icon"])
     ], 34)), [
-      [i, t.openMenuItem === n.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
+      [d, o.openMenuItem === e.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
     ]),
-    s((r(), f(w, {
+    m((i(), f(c, {
       class: "tw-py-1",
       "ref-name": "lendButton",
-      href: n.lendUrl,
-      "menu-component": n.KvLendMenu,
-      "open-menu-item": t.openMenuItem,
-      "dropdown-icon": n.mdiChevronDown,
+      href: e.lendUrl,
+      "menu-component": e.KvLendMenu,
+      "open-menu-item": o.openMenuItem,
+      "dropdown-icon": e.mdiChevronDown,
       "base-class": "tw-inline-flex md:tw-border md:tw-rounded-md tw-px-1.5 tw-py-1",
-      onOnHover: n.handleOnHover,
-      onMouseout: e[3] || (e[3] = (o) => n.handleMouseOut("lendButton")),
-      onTouchstart: e[4] || (e[4] = (o) => n.handleTouchStart("lendButton", n.KvLendMenu))
+      onOnHover: e.handleOnHover,
+      onMouseout: n[3] || (n[3] = (t) => e.handleMouseOut("lendButton")),
+      onTouchstart: n[4] || (n[4] = (t) => e.handleTouchStart("lendButton", e.KvLendMenu))
     }, {
-      default: H(() => e[10] || (e[10] = [
+      default: H(() => n[10] || (n[10] = [
         M(" Lend ")
       ])),
       _: 1
     }, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
-      [i, ["TopNav", "click-Lend"]]
+      [d, ["TopNav", "click-Lend"]]
     ]),
-    s((r(), f(w, {
+    m((i(), f(c, {
       "ref-name": "takeActionButton",
       "base-class": "tw-hidden md:tw-inline-flex tw-py-1",
-      "menu-component": n.KvHeaderTakeActionMenu,
-      "open-menu-item": t.openMenuItem,
-      "dropdown-icon": n.mdiChevronDown,
+      "menu-component": e.KvHeaderTakeActionMenu,
+      "open-menu-item": o.openMenuItem,
+      "dropdown-icon": e.mdiChevronDown,
       "send-link-position": "",
-      onOnHover: n.handleOnHover,
-      onMouseout: e[5] || (e[5] = (o) => n.handleMouseOut("takeActionButton"))
+      onOnHover: e.handleOnHover,
+      onMouseout: n[5] || (n[5] = (t) => e.handleMouseOut("takeActionButton")),
+      onUserTap: e.handleTouchStart
     }, {
-      default: H(() => e[11] || (e[11] = [
+      default: H(() => n[11] || (n[11] = [
         M(" Take action ")
       ])),
       _: 1
-    }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
-      [i, ["TopNav", "click-TakeAction"]]
+    }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"])), [
+      [d, ["TopNav", "click-TakeAction"]]
     ]),
-    s((r(), f(w, {
+    m((i(), f(c, {
       "ref-name": "aboutUsLink",
       "data-testid": "header-about",
       "base-class": "tw-hidden md:tw-inline-flex tw-py-1",
-      "menu-component": n.KvHeaderAboutMenu,
-      "open-menu-item": t.openMenuItem,
-      "dropdown-icon": n.mdiChevronDown,
+      "menu-component": e.KvHeaderAboutMenu,
+      "open-menu-item": o.openMenuItem,
+      "dropdown-icon": e.mdiChevronDown,
       "send-link-position": "",
-      onOnHover: n.handleOnHover,
-      onMouseout: e[6] || (e[6] = (o) => n.handleMouseOut("aboutUsLink"))
+      onOnHover: e.handleOnHover,
+      onMouseout: n[6] || (n[6] = (t) => e.handleMouseOut("aboutUsLink")),
+      onUserTap: e.handleTouchStart
     }, {
-      default: H(() => e[12] || (e[12] = [
+      default: H(() => n[12] || (n[12] = [
         M(" About ")
       ])),
       _: 1
-    }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
-      [i, ["TopNav", "click-About"]]
+    }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"])), [
+      [d, ["TopNav", "click-About"]]
     ]),
-    e[16] || (e[16] = L("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
-    t.loggedIn ? s((r(), c("a", {
+    n[16] || (n[16] = A("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
+    o.loggedIn ? m((i(), w("a", {
       key: 0,
       ref: "dashboardLink",
-      href: t.myDashboardUrl,
-      class: p(["header-link tw-hidden md:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
-    }, e[13] || (e[13] = [
+      href: o.myDashboardUrl,
+      class: y(["header-link tw-hidden md:tw-block", { "tw-text-tertiary": !!o.openMenuItem }])
+    }, n[13] || (n[13] = [
       M(" My dashboard ")
     ]), 10, Me)), [
-      [i, ["TopNav", "click-Dashboard"]]
-    ]) : B("", !0),
-    s((r(), c("a", {
+      [d, ["TopNav", "click-Dashboard"]]
+    ]) : C("", !0),
+    m((i(), w("a", {
       ref: "basketLink",
       href: "/basket",
-      class: p(["header-link tw-relative md:!tw-mr-0 tw-flex tw-items-center tw-gap-0.5", { "tw-text-tertiary": !!t.openMenuItem }]),
+      class: y(["header-link tw-relative md:!tw-mr-0 tw-flex tw-items-center tw-gap-0.5", { "tw-text-tertiary": !!o.openMenuItem }]),
       style: { "margin-right": "2px" },
       "data-testid": "header-basket"
     }, [
-      E(A, {
+      _(x, {
         class: "tw-w-3 tw-h-3 md:tw-w-3.5 md:tw-h-3.5 tw-pointer-events-none",
-        count: t.basketCount
+        count: o.basketCount
       }, null, 8, ["count"]),
-      e[14] || (e[14] = L("span", { class: "tw-hidden md:tw-block" }, "Basket", -1))
+      n[14] || (n[14] = A("span", { class: "tw-hidden md:tw-block" }, "Basket", -1))
     ], 2)), [
-      [X, t.basketCount > 0],
-      [i, ["TopNav", "click-Basket"]]
+      [E, o.basketCount > 0],
+      [d, ["TopNav", "click-Basket"]]
     ]),
-    t.loggedIn ? (r(), c("div", {
-      key: 1,
+    m(A("div", {
+      ref: "avatar",
       class: "tw-cursor-pointer tw-flex tw-items-center tw-gap-1 tw-bg-eco-green-1 tw-rounded-md tw-py-0.5 md:tw-py-1 tw-px-1 md:tw-px-2",
-      onMouseover: e[7] || (e[7] = (...o) => n.handleAvatarMenuPosition && n.handleAvatarMenuPosition(...o)),
-      onMouseout: e[8] || (e[8] = (o) => n.handleMouseOut(n.AVATAR_MENU_ID)),
-      onTouchstart: e[9] || (e[9] = (o) => n.handleTouchStart(n.AVATAR_MENU_ID))
+      onMouseover: n[7] || (n[7] = (...t) => e.handleAvatarMenuPosition && e.handleAvatarMenuPosition(...t)),
+      onMouseout: n[8] || (n[8] = (t) => e.handleMouseOut(e.AVATAR_MENU_ID)),
+      onTouchstart: n[9] || (n[9] = (t) => e.handleTouchStart(e.AVATAR_MENU_ID))
     }, [
-      n.isLegacyPlaceholderAvatar(n.avatarFilename) || !n.avatarFilename ? (r(), f(g, {
+      e.isLegacyPlaceholderAvatar(e.avatarFilename) || !e.avatarFilename ? (i(), f(b, {
         key: 0,
-        icon: n.mdiAccountCircle,
+        icon: e.mdiAccountCircle,
         class: "tw-w-3"
-      }, null, 8, ["icon"])) : (r(), f(T, {
+      }, null, 8, ["icon"])) : (i(), f(I, {
         key: 1,
-        ref: "avatar",
         class: "avatar",
-        "lender-name": t.lenderName,
-        "lender-image-url": t.lenderImageUrl,
+        "lender-name": o.lenderName,
+        "lender-image-url": o.lenderImageUrl,
         "is-small": ""
       }, null, 8, ["lender-name", "lender-image-url"])),
-      L("span", ke, Y(n.numeral(t.balance).format("$0")), 1)
-    ], 32)) : B("", !0),
-    t.loggedIn ? B("", !0) : s((r(), c("a", {
-      key: 2,
+      A("span", ke, Y(e.numeral(o.balance).format("$0")), 1)
+    ], 544), [
+      [E, o.loggedIn]
+    ]),
+    o.loggedIn ? C("", !0) : m((i(), w("a", {
+      key: 1,
       ref: "signInLink",
-      href: t.loginUrl,
-      class: p(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
-    }, e[15] || (e[15] = [
+      href: o.loginUrl,
+      class: y(["header-link", { "tw-text-tertiary": !!o.openMenuItem }])
+    }, n[15] || (n[15] = [
       M(" Sign in ")
     ]), 10, ge)), [
-      [i, ["TopNav", "click-Sign-in"]]
+      [d, ["TopNav", "click-Sign-in"]]
     ])
   ]);
 }
-const Ue = /* @__PURE__ */ ue(we, [["render", be], ["__scopeId", "data-v-290d8315"]]);
+const Oe = /* @__PURE__ */ ue(we, [["render", be], ["__scopeId", "data-v-7bbc2157"]]);
 export {
-  Ue as default
+  Oe as default
 };

package/dist/vue/KvWwwHeader.css

@@ -1 +1 @@
-.header-fade-enter-active[data-v-c1223ffa]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-c1223ffa]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-c1223ffa],.header-fade-leave-to[data-v-c1223ffa]{opacity:0}.header-fade-leave[data-v-c1223ffa],.header-fade-enter-to[data-v-c1223ffa]{opacity:1}.bg-opacity-50[data-v-c1223ffa]{background-color:rgba(var(--bg-action-highlight),.5)}
+.header-fade-enter-active[data-v-bbcd9055]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-bbcd9055]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-bbcd9055],.header-fade-leave-to[data-v-bbcd9055]{opacity:0}.header-fade-leave[data-v-bbcd9055],.header-fade-enter-to[data-v-bbcd9055]{opacity:1}.bg-opacity-50[data-v-bbcd9055]{background-color:rgba(var(--bg-action-highlight),.5)}

package/dist/vue/KvWwwHeader.js

@@ -1,17 +1,17 @@
-import { ref as l, shallowRef as D, computed as U, onMounted as B, onBeforeUnmount as N, resolveComponent as f, resolveDirective as x, openBlock as w, createBlock as M, withCtx as g, createElementVNode as k, normalizeStyle as _, createVNode as d, Transition as I, withDirectives as h, vShow as E, createElementBlock as A, normalizeClass as S, resolveDynamicComponent as G } from "vue";
-import K from "@kiva/kv-tokens";
-import z from "./KvWwwHeader/KvHeaderLinkBar.js";
+import { ref as l, shallowRef as D, computed as N, onMounted as B, onBeforeUnmount as S, resolveComponent as b, resolveDirective as x, openBlock as w, createBlock as p, withCtx as g, createElementVNode as _, normalizeStyle as k, createVNode as m, Transition as E, withDirectives as h, vShow as I, createElementBlock as A, normalizeClass as K, resolveDynamicComponent as G } from "vue";
+import z from "@kiva/kv-tokens";
+import P from "./KvWwwHeader/KvHeaderLinkBar.js";
 import R from "./KvWwwHeader/KvHeaderLogo.js";
-import P from "./KvThemeProvider.js";
+import O from "./KvThemeProvider.js";
 import V from "./KvPageContainer.js";
-import { throttle as O } from "../utils/throttle.js";
+import { throttle as W } from "../utils/throttle.js";
 import "./KvWwwHeader.css";
-import W from "../_virtual/_plugin-vue_export-helper.js";
-const j = "3.75rem", q = {
+import Y from "../_virtual/_plugin-vue_export-helper.js";
+const j = "3.75rem", q = ["lendMenu", "aboutUsLink"], F = {
   components: {
-    KvHeaderLinkBar: z,
+    KvHeaderLinkBar: P,
     KvHeaderLogo: R,
-    KvThemeProvider: P,
+    KvThemeProvider: O,
     KvPageContainer: V
   },
   props: {
@@ -68,122 +68,122 @@ const j = "3.75rem", q = {
     "load-lend-menu-data"
   ],
   setup(L, { emit: t }) {
-    const o = l(!0), e = l(null), r = l(!1), a = D(null), i = l(null), s = l({ left: 0, position: "relative" }), u = l(!1);
+    const n = l(!0), e = l(null), a = l(!1), i = D(null), s = l(null), u = l({ left: 0, position: "relative" }), d = l(!1), v = l(null);
     let c;
-    const b = U(() => {
-      var m, n;
-      return ((n = (m = i.value) == null ? void 0 : m.$options) == null ? void 0 : n.name) === "KvHeaderMobileMenu";
-    }), v = (m, n, p) => {
-      n ? (clearTimeout(c), a.value !== n && (s.value = { left: 0, position: "relative" }), a.value = n, r.value = !0, p && (s.value = {
-        ...p,
+    const f = N(() => {
+      var r, o;
+      return ((o = (r = s.value) == null ? void 0 : r.$options) == null ? void 0 : o.name) === "KvHeaderMobileMenu";
+    }), T = (r, o, M) => {
+      o ? (v.value = r, clearTimeout(c), i.value !== o && (u.value = { left: 0, position: "relative" }), i.value = o, a.value = !0, M && (u.value = {
+        ...M,
         position: "absolute"
-      })) : r.value && (c = setTimeout(() => {
-        r.value = !1, a.value = null;
+      })) : a.value && (c = setTimeout(() => {
+        a.value = !1, i.value = null;
       }, 100));
-    }, T = (m) => {
-      var n;
-      (n = i.value) == null || n.onLoad(m);
-    }, C = () => {
+    }, C = (r) => {
+      var o;
+      (o = s.value) == null || o.onLoad(r);
+    }, U = () => {
       t("load-lend-menu-data");
     }, y = () => {
-      u.value = (window == null ? void 0 : window.innerWidth) < K.breakpoints.md;
-    }, H = O(y, 100);
+      d.value = (window == null ? void 0 : window.innerWidth) < z.breakpoints.md, d.value && q.includes(v.value) && (i.value = null, a.value = !1);
+    }, H = W(y, 100);
     return B(() => {
       y(), window.addEventListener("resize", H);
-    }), N(() => {
+    }), S(() => {
       window.removeEventListener("resize", H);
     }), {
       HEADER_HEIGHT: j,
-      emitLendMenuEvent: C,
-      isMobile: u,
-      linksVisible: o,
-      menuOpen: r,
-      isMobileMenuActive: b,
-      onHover: v,
-      loadMenuData: T,
+      emitLendMenuEvent: U,
+      isMobile: d,
+      linksVisible: n,
+      menuOpen: a,
+      isMobileMenuActive: f,
+      onHover: T,
+      loadMenuData: C,
       activeHeaderItem: e,
-      menuComponent: a,
-      menuComponentInstance: i,
-      menuPosition: s
+      menuComponent: i,
+      menuComponentInstance: s,
+      menuPosition: u
     };
   }
-}, F = {
+}, J = {
   href: "/",
   class: "tw-px-1 tw-py-2 tw-cursor-pointer tw-absolute tw-top-1/2 tw-left-1/2 tw--translate-y-1/2 tw--translate-x-1/2 tw-transition-all tw-duration-300"
 };
-function J(L, t, o, e, r, a) {
-  const i = f("kv-header-link-bar"), s = f("kv-header-logo"), u = f("kv-page-container"), c = f("kv-theme-provider"), b = x("kv-track-event");
-  return w(), M(c, {
+function Q(L, t, n, e, a, i) {
+  const s = b("kv-header-link-bar"), u = b("kv-header-logo"), d = b("kv-page-container"), v = b("kv-theme-provider"), c = x("kv-track-event");
+  return w(), p(v, {
     tag: "div",
     class: "tw-bg-primary"
   }, {
     default: g(() => [
-      k("nav", {
+      _("nav", {
         class: "tw-font-medium tw-relative",
-        style: _({ height: e.HEADER_HEIGHT })
+        style: k({ height: e.HEADER_HEIGHT })
       }, [
-        d(u, null, {
+        m(d, null, {
           default: g(() => [
-            d(I, { name: "header-fade" }, {
+            m(E, { name: "header-fade" }, {
               default: g(() => [
-                h(d(i, {
-                  "logged-in": o.loggedIn,
-                  "basket-count": o.basketCount,
-                  "login-url": o.loginUrl,
+                h(m(s, {
+                  "logged-in": n.loggedIn,
+                  "basket-count": n.basketCount,
+                  "login-url": n.loginUrl,
                   "open-menu-item": e.menuComponent,
-                  "my-dashboard-url": o.myDashboardUrl,
-                  "lender-name": o.lenderName,
-                  "lender-image-url": o.lenderImageUrl,
+                  "my-dashboard-url": n.myDashboardUrl,
+                  "lender-name": n.lenderName,
+                  "lender-image-url": n.lenderImageUrl,
                   "is-mobile": e.isMobile,
-                  balance: o.balance,
+                  balance: n.balance,
                   onItemHover: e.onHover
                 }, null, 8, ["logged-in", "basket-count", "login-url", "open-menu-item", "my-dashboard-url", "lender-name", "lender-image-url", "is-mobile", "balance", "onItemHover"]), [
-                  [E, e.linksVisible]
+                  [I, e.linksVisible]
                 ])
               ]),
               _: 1
             }),
-            h((w(), A("a", F, [
-              d(s)
+            h((w(), A("a", J, [
+              m(u)
             ])), [
-              [b, ["TopNav", "click-Logo"]]
+              [c, ["TopNav", "click-Logo"]]
             ])
           ]),
           _: 1
         })
       ], 4),
-      d(I, { name: "header-fade" }, {
+      m(E, { name: "header-fade" }, {
         default: g(() => [
-          h(k("div", {
+          h(_("div", {
             class: "tw-absolute tw-z-modal tw-h-full tw-inset-x-0 tw-bg-eco-green-4 bg-opacity-50 tw-min-h-screen",
-            style: _({ top: e.HEADER_HEIGHT })
+            style: k({ top: e.HEADER_HEIGHT })
           }, [
-            k("div", {
-              class: S(["tw-bg-primary tw-overflow-y-auto", { "tw-min-h-dvh": e.isMobileMenuActive }]),
-              style: _({
+            _("div", {
+              class: K(["tw-bg-primary tw-overflow-y-auto", { "tw-min-h-dvh": e.isMobileMenuActive }]),
+              style: k({
                 ...e.menuPosition,
                 maxHeight: e.isMobileMenuActive ? "auto" : `calc(100dvh - ${e.HEADER_HEIGHT})`
               }),
-              onMouseover: t[1] || (t[1] = (v) => e.onHover(e.activeHeaderItem, e.menuComponent)),
-              onMouseout: t[2] || (t[2] = (v) => e.onHover())
+              onMouseover: t[1] || (t[1] = (f) => e.onHover(e.activeHeaderItem, e.menuComponent)),
+              onMouseout: t[2] || (t[2] = (f) => e.onHover())
             }, [
-              (w(), M(G(e.menuComponent), {
+              (w(), p(G(e.menuComponent), {
                 ref: "menuComponentInstance",
-                "logged-in": o.loggedIn,
-                "login-url": o.loginUrl,
-                "user-id": o.userId,
-                "is-borrower": o.isBorrower,
-                "is-trustee": o.isTrustee,
-                "my-dashboard-url": o.myDashboardUrl,
-                "show-m-g-upsell-link": o.showMGUpsellLink,
+                "logged-in": n.loggedIn,
+                "login-url": n.loginUrl,
+                "user-id": n.userId,
+                "is-borrower": n.isBorrower,
+                "is-trustee": n.isTrustee,
+                "my-dashboard-url": n.myDashboardUrl,
+                "show-m-g-upsell-link": n.showMGUpsellLink,
                 "is-mobile": e.isMobile,
-                "countries-not-lent-to-url": o.countriesNotLentToUrl,
+                "countries-not-lent-to-url": n.countriesNotLentToUrl,
                 onLoadLendMenuData: e.emitLendMenuEvent,
-                onClosingMenu: t[0] || (t[0] = (v) => e.onHover())
+                onClosingMenu: t[0] || (t[0] = (f) => e.onHover())
               }, null, 40, ["logged-in", "login-url", "user-id", "is-borrower", "is-trustee", "my-dashboard-url", "show-m-g-upsell-link", "is-mobile", "countries-not-lent-to-url", "onLoadLendMenuData"]))
             ], 38)
           ], 4), [
-            [E, e.menuOpen]
+            [I, e.menuOpen]
           ])
         ]),
         _: 1
@@ -192,7 +192,7 @@ function J(L, t, o, e, r, a) {
     _: 1
   });
 }
-const le = /* @__PURE__ */ W(q, [["render", J], ["__scopeId", "data-v-c1223ffa"]]);
+const ie = /* @__PURE__ */ Y(F, [["render", Q], ["__scopeId", "data-v-bbcd9055"]]);
 export {
-  le as default
+  ie as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "6.56.1",
+  "version": "6.56.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -114,5 +114,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "2f61b45ca5c74f7ce4ce26ee2db566ad70a7fe3e"
+  "gitHead": "580254ec8b85927b0f438c36ab69df3603c206e4"
 }