@kiva/kv-components 7.6.2 → 8.0.0

package/dist/vue/KvWwwHeader/KvHeaderLinkBar.js

@@ -1,341 +1,170 @@
-import { defineAsyncComponent as h, ref as i, inject as ne, computed as T, watch as V, onMounted as te, onUnmounted as oe, resolveComponent as g, resolveDirective as ae, openBlock as d, createElementBlock as v, withDirectives as f, normalizeClass as A, withModifiers as K, createVNode as w, createBlock as R, withCtx as E, createTextVNode as b, createElementVNode as L, createCommentVNode as z, normalizeStyle as N, vShow as W, toDisplayString as le } from "vue";
-import { mdiAccountCircle as ie, mdiChevronDown as re, mdiMagnify as de, mdiMenu as se } from "@mdi/js";
-import ue from "numeral";
-import me from "@kiva/kv-tokens";
-import ce from "../KvMaterialIcon.js";
-import ve from "../KvIconBag.js";
-import fe from "./KvHeaderDropdownLink.js";
-import we from "../KvUserAvatar.js";
-import ke from "../KvLoadingPlaceholder.js";
-import { throttle as Me } from "../../utils/throttle.js";
-import { isLegacyPlaceholderAvatar as j } from "../../utils/imageUtils.js";
+import D from "./KvHeaderLinkBar2.js";
+import { resolveComponent as s, resolveDirective as H, openBlock as a, createElementBlock as i, withDirectives as l, normalizeClass as v, withModifiers as c, createVNode as r, createBlock as g, withCtx as k, createTextVNode as m, createElementVNode as w, createCommentVNode as y, normalizeStyle as f, vShow as h, toDisplayString as L } from "vue";
 import "./KvHeaderLinkBar.css";
-import ge from "../../_virtual/_plugin-vue_export-helper.js";
-const be = h(() => import("./KvHeaderMobileMenu.js")), F = h(() => import("./KvHeaderMyKivaMenu.js")), he = h(() => import("./LendMenu/KvLendMenu.js")), ye = h(() => import("./KvHeaderTakeActionMenu.js")), pe = h(() => import("./KvHeaderAboutMenu.js")), q = 150, k = "avatar-menu", U = "menuButton", G = { top: "-3.75rem", width: "100%" }, Te = "lendButton", Ae = "takeActionButton", Le = "aboutUsLink", Ue = {
-  components: {
-    KvMaterialIcon: ce,
-    KvIconBag: ve,
-    KvHeaderDropdownLink: fe,
-    KvUserAvatar: we,
-    KvLoadingPlaceholder: ke
-  },
-  props: {
-    loggedIn: {
-      type: Boolean,
-      default: !1
-    },
-    basketCount: {
-      type: Number,
-      default: 0
-    },
-    openMenuItem: {
-      type: [Object, Function],
-      default: null
-    },
-    loginUrl: {
-      type: String,
-      default: "/ui-login"
-    },
-    myDashboardUrl: {
-      type: String,
-      default: "/mykiva"
-    },
-    lenderName: {
-      type: String,
-      default: ""
-    },
-    lenderImageUrl: {
-      type: String,
-      default: ""
-    },
-    isMobile: {
-      type: Boolean,
-      default: !1
-    },
-    balance: {
-      type: Number,
-      default: 0
-    },
-    isBasketDataLoading: {
-      type: Boolean,
-      default: !1
-    },
-    isUserDataLoading: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "item-hover"
-  ],
-  setup(s, { emit: n }) {
-    const o = i(null), e = i(null), x = i(null), _ = i(null), y = i(null), M = i(null), B = i(null), I = i(null), H = i(null), a = i(null), l = ne("$kvTrackEvent"), O = {
-      [Te]: { action: "hover-Lend-menu", label: "Lend" },
-      [Ae]: { action: "hover-Take-action-menu", label: "Take action" },
-      [Le]: { action: "hover-About-menu", label: "About" },
-      [U]: { action: "hover-Hamburger-menu", label: "Hamburger" },
-      [k]: { action: "hover-Avatar-menu", label: "Avatar" }
-    }, u = (t, m, c = null) => {
-      n("item-hover", t, m, c);
-    }, J = (t, m, c = null) => {
-      if (!navigator.maxTouchPoints) {
-        if (t && a.value !== t) {
-          const r = O[t];
-          r && l(
-            "TopNav",
-            r.action,
-            r.label
-          );
-        }
-        a.value = t, u(
-          t,
-          m,
-          t === U && s.isMobile ? G : c
-        );
-      }
-    }, Q = (t) => {
-      !navigator.maxTouchPoints && a.value === t && (a.value = null, u());
-    }, S = () => {
-      var P;
-      const t = (P = o.value) == null ? void 0 : P.getBoundingClientRect();
-      if (!t) return null;
-      const c = t.left + t.width / 2 - q / 2, r = `${window.innerWidth - c - q}px`;
-      return {
-        right: (window == null ? void 0 : window.innerWidth) < me.breakpoints.md ? 0 : r
-      };
-    }, p = () => {
-      a.value = k, u(o.value, F, S());
-    }, X = (t, m, c) => {
-      if (t && a.value !== t) {
-        const r = O[t];
-        r && l(
-          "TopNav",
-          r.action,
-          r.label
-        );
-      }
-      a.value === U && (a.value = null), !a.value || a.value !== t ? (a.value = t, t === k ? p() : t === U && s.isMobile ? u(t, m, G) : u(t, m, c)) : (a.value = null, u());
-    }, C = Me(() => {
-      a.value === k && p();
-    }, 100), Y = T(() => s.isMobile ? void 0 : "/lend-by-category"), D = T(() => {
-      var t;
-      return ((t = s.lenderImageUrl) == null ? void 0 : t.split("/").pop()) ?? "";
-    }), Z = T(() => Math.floor(s.balance)), $ = T(() => j(D.value) || !D.value), ee = (t) => {
-      t.target === t.currentTarget && u();
-    };
-    return V(
-      () => s.isMobile,
-      () => {
-        a.value === k && p();
-      }
-    ), V(
-      () => s.openMenuItem,
-      (t) => {
-        t || (a.value = null);
-      }
-    ), te(() => {
-      import("./KvHeaderMobileMenu.js"), import("./KvHeaderMyKivaMenu.js"), import("./LendMenu/KvLendMenu.js"), import("./KvHeaderTakeActionMenu.js"), import("./KvHeaderAboutMenu.js"), window.addEventListener("resize", C);
-    }), oe(() => {
-      window.removeEventListener("resize", C);
-    }), {
-      AVATAR_MENU_ID: k,
-      openMenuId: a,
-      numeral: ue,
-      mdiAccountCircle: ie,
-      mdiChevronDown: re,
-      mdiMagnify: de,
-      mdiMenu: se,
-      onHover: u,
-      avatar: o,
-      lendButton: e,
-      aboutUsLink: x,
-      partnerWithUsLink: _,
-      borrowLink: y,
-      supportKivaLink: M,
-      basketLink: B,
-      signInLink: I,
-      menuButton: H,
-      lendUrl: Y,
-      avatarFilename: D,
-      handleOnHover: J,
-      handleTouchStart: X,
-      handleMouseOut: Q,
-      handleAvatarMenuPosition: p,
-      KvHeaderMobileMenu: be,
-      KvHeaderMyKivaMenu: F,
-      KvLendMenu: he,
-      KvHeaderTakeActionMenu: ye,
-      KvHeaderAboutMenu: pe,
-      isLegacyPlaceholderAvatar: j,
-      getAvatarMenuPosition: S,
-      handleEmptySpaceClick: ee,
-      roundedBalance: Z,
-      isDefaultProfilePic: $
-    };
-  }
-}, Be = ["href"], Ie = {
+import B from "../../_virtual/_plugin-vue_export-helper.js";
+const U = ["href"], A = {
   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"
-}, He = {
+}, I = {
   key: 0,
   class: "tw-w-4 tw-h-3",
   style: {
     display: "var(--user-balance-loading-display, inline-block)"
   }
-}, De = {
+}, K = {
   key: 1,
   class: "tw-text-eco-green-4"
-}, Ke = ["href"];
-function Ee(s, n, o, e, x, _) {
-  const y = g("kv-material-icon"), M = g("KvHeaderDropdownLink"), B = g("kv-icon-bag"), I = g("KvUserAvatar"), H = g("KvLoadingPlaceholder"), a = ae("kv-track-event");
-  return d(), v("div", {
+}, O = ["href"];
+function N(C, n, t, e, S, _) {
+  const M = s("kv-material-icon"), u = s("KvHeaderDropdownLink"), b = s("kv-icon-bag"), T = s("KvUserAvatar"), x = s("KvLoadingPlaceholder"), d = H("kv-track-event");
+  return a(), i("div", {
     class: "tw-h-full tw-flex tw-items-center tw-gap-0.5 md:tw-gap-2 lg:tw-gap-2.5",
-    onTouchstart: n[10] || (n[10] = (...l) => e.handleEmptySpaceClick && e.handleEmptySpaceClick(...l))
+    onTouchstart: n[10] || (n[10] = (...o) => e.handleEmptySpaceClick && e.handleEmptySpaceClick(...o))
   }, [
-    f((d(), v("button", {
+    l((a(), i("button", {
       ref: "menuButton",
-      class: A(["header-link tw-inline-flex md:tw-hidden", {
-        "tw-text-tertiary": o.openMenuItem && o.openMenuItem !== e.KvHeaderMobileMenu
+      class: v(["header-link tw-inline-flex md:tw-hidden", {
+        "tw-text-tertiary": t.openMenuItem && t.openMenuItem !== e.KvHeaderMobileMenu
       }]),
-      onMouseover: n[0] || (n[0] = (l) => e.handleOnHover("menuButton", e.KvHeaderMobileMenu)),
-      onMouseout: n[1] || (n[1] = (l) => e.handleMouseOut("menuButton")),
-      onTouchstart: n[2] || (n[2] = K((l) => e.handleTouchStart("menuButton", e.KvHeaderMobileMenu), ["stop"]))
+      onMouseover: n[0] || (n[0] = (o) => e.handleOnHover("menuButton", e.KvHeaderMobileMenu)),
+      onMouseout: n[1] || (n[1] = (o) => e.handleMouseOut("menuButton")),
+      onTouchstart: n[2] || (n[2] = c((o) => e.handleTouchStart("menuButton", e.KvHeaderMobileMenu), ["stop"]))
     }, [
-      w(y, { icon: e.mdiMenu }, null, 8, ["icon"])
+      r(M, { icon: e.mdiMenu }, null, 8, ["icon"])
     ], 34)), [
-      [a, o.openMenuItem === e.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
+      [d, t.openMenuItem === e.KvHeaderMobileMenu ? ["TopNav", "click-Hamburger-menu"] : null]
     ]),
-    f((d(), R(M, {
+    l((a(), g(u, {
       class: "tw-py-1",
       "ref-name": "lendButton",
       href: e.lendUrl,
       "menu-component": e.KvLendMenu,
-      "open-menu-item": o.openMenuItem,
+      "open-menu-item": t.openMenuItem,
       "dropdown-icon": e.mdiChevronDown,
       "base-class": "tw-inline-flex md:tw-border md:tw-rounded-md tw-px-1.5 tw-py-0.5",
       onOnHover: e.handleOnHover,
-      onMouseleave: n[3] || (n[3] = (l) => e.handleMouseOut("lendButton")),
-      onTouchstart: n[4] || (n[4] = K((l) => e.handleTouchStart("lendButton", e.KvLendMenu), ["stop"]))
+      onMouseleave: n[3] || (n[3] = (o) => e.handleMouseOut("lendButton")),
+      onTouchstart: n[4] || (n[4] = c((o) => e.handleTouchStart("lendButton", e.KvLendMenu), ["stop"]))
     }, {
-      default: E(() => n[11] || (n[11] = [
-        b(" Lend ")
+      default: k(() => n[11] || (n[11] = [
+        m(" Lend ")
       ])),
       _: 1
     }, 8, ["href", "menu-component", "open-menu-item", "dropdown-icon", "onOnHover"])), [
-      [a, ["TopNav", "click-Lend"]]
+      [d, ["TopNav", "click-Lend"]]
     ]),
-    f((d(), R(M, {
+    l((a(), g(u, {
       "ref-name": "takeActionButton",
       "base-class": "tw-hidden md:tw-inline-flex tw-py-1",
       "menu-component": e.KvHeaderTakeActionMenu,
-      "open-menu-item": o.openMenuItem,
+      "open-menu-item": t.openMenuItem,
       "dropdown-icon": e.mdiChevronDown,
       "send-link-position": "",
       onOnHover: e.handleOnHover,
-      onMouseleave: n[5] || (n[5] = (l) => e.handleMouseOut("takeActionButton")),
+      onMouseleave: n[5] || (n[5] = (o) => e.handleMouseOut("takeActionButton")),
       onUserTap: e.handleTouchStart
     }, {
-      default: E(() => n[12] || (n[12] = [
-        b(" Take action ")
+      default: k(() => n[12] || (n[12] = [
+        m(" Take action ")
       ])),
       _: 1
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"])), [
-      [a, ["TopNav", "click-take-action"]]
+      [d, ["TopNav", "click-take-action"]]
     ]),
-    w(M, {
+    r(u, {
       "ref-name": "aboutUsLink",
       "data-testid": "header-about",
       "base-class": "tw-hidden md:tw-inline-flex tw-py-1",
       "menu-component": e.KvHeaderAboutMenu,
-      "open-menu-item": o.openMenuItem,
+      "open-menu-item": t.openMenuItem,
       "dropdown-icon": e.mdiChevronDown,
       "send-link-position": "",
       onOnHover: e.handleOnHover,
-      onMouseleave: n[6] || (n[6] = (l) => e.handleMouseOut("aboutUsLink")),
+      onMouseleave: n[6] || (n[6] = (o) => e.handleMouseOut("aboutUsLink")),
       onUserTap: e.handleTouchStart
     }, {
-      default: E(() => n[13] || (n[13] = [
-        b(" About ")
+      default: k(() => n[13] || (n[13] = [
+        m(" About ")
       ])),
       _: 1
     }, 8, ["menu-component", "open-menu-item", "dropdown-icon", "onOnHover", "onUserTap"]),
-    n[17] || (n[17] = L("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
-    o.loggedIn ? f((d(), v("a", {
+    n[17] || (n[17] = w("div", { class: "tw-flex-1 tw-h-full" }, null, -1)),
+    t.loggedIn ? l((a(), i("a", {
       key: 0,
       ref: "dashboardLink",
-      href: o.myDashboardUrl,
-      class: A(["header-link tw-hidden md:tw-block", { "tw-text-tertiary": !!o.openMenuItem }])
+      href: t.myDashboardUrl,
+      class: v(["header-link tw-hidden md:tw-block", { "tw-text-tertiary": !!t.openMenuItem }])
     }, n[14] || (n[14] = [
-      b(" My dashboard ")
-    ]), 10, Be)), [
-      [a, ["TopNav", "click-Dashboard"]]
-    ]) : z("", !0),
-    f((d(), v("a", {
+      m(" My dashboard ")
+    ]), 10, U)), [
+      [d, ["TopNav", "click-Dashboard"]]
+    ]) : y("", !0),
+    l((a(), i("a", {
       ref: "basketLink",
       href: "/basket",
-      class: A(["header-link tw-relative md:!tw-mr-0 tw-flex tw-items-center tw-gap-0.5", { "tw-text-tertiary": !!o.openMenuItem }]),
-      style: N([o.isBasketDataLoading ? {
+      class: v(["header-link tw-relative md:!tw-mr-0 tw-flex tw-items-center tw-gap-0.5", { "tw-text-tertiary": !!t.openMenuItem }]),
+      style: f([t.isBasketDataLoading ? {
         display: "var(--basket-display, flex)"
       } : void 0, { "margin-right": "2px" }]),
       "data-testid": "header-basket"
     }, [
-      w(B, {
+      r(b, {
         class: "tw-w-3 tw-h-3 md:tw-w-3.5 md:tw-h-3.5 tw-pointer-events-none tw-text-action",
-        count: o.isBasketDataLoading ? 0 : o.basketCount
+        count: t.isBasketDataLoading ? 0 : t.basketCount
       }, null, 8, ["count"]),
-      n[15] || (n[15] = L("span", { class: "tw-hidden md:tw-block" }, "Basket", -1))
+      n[15] || (n[15] = w("span", { class: "tw-hidden md:tw-block" }, "Basket", -1))
     ], 6)), [
-      [W, o.isBasketDataLoading ? !0 : o.basketCount > 0],
-      [a, ["TopNav", "click-Basket"]]
+      [h, t.isBasketDataLoading ? !0 : t.basketCount > 0],
+      [d, ["TopNav", "click-Basket"]]
     ]),
-    L("div", {
+    w("div", {
       class: "md:tw-py-1",
-      onMouseenter: n[7] || (n[7] = (l) => e.handleOnHover(e.AVATAR_MENU_ID, e.KvHeaderMyKivaMenu, e.getAvatarMenuPosition())),
-      onMouseleave: n[8] || (n[8] = (l) => e.handleMouseOut(e.AVATAR_MENU_ID)),
-      onTouchstart: n[9] || (n[9] = K((l) => e.handleTouchStart(e.AVATAR_MENU_ID), ["stop"]))
+      onMouseenter: n[7] || (n[7] = (o) => e.handleOnHover(e.AVATAR_MENU_ID, e.KvHeaderMyKivaMenu, e.getAvatarMenuPosition())),
+      onMouseleave: n[8] || (n[8] = (o) => e.handleMouseOut(e.AVATAR_MENU_ID)),
+      onTouchstart: n[9] || (n[9] = c((o) => e.handleTouchStart(e.AVATAR_MENU_ID), ["stop"]))
     }, [
-      f(L("div", Ie, [
-        w(y, {
+      l(w("div", A, [
+        r(M, {
           icon: e.mdiAccountCircle,
           class: "tw-w-3",
-          style: N(o.isUserDataLoading ? {
+          style: f(t.isUserDataLoading ? {
             display: "var(--user-avatar-legacy-display, inline-block)"
           } : {
             display: e.isDefaultProfilePic ? "inline-block" : "none"
           })
         }, null, 8, ["icon", "style"]),
-        w(I, {
+        r(T, {
           class: "tw-w-3 tw-h-3",
-          "lender-name": o.lenderName,
-          "lender-image-url": o.lenderImageUrl,
-          style: N(o.isUserDataLoading ? {
+          "lender-name": t.lenderName,
+          "lender-image-url": t.lenderImageUrl,
+          style: f(t.isUserDataLoading ? {
             display: "var(--user-avatar-display, inline-block)"
           } : {
             display: e.isDefaultProfilePic ? "none" : "inline-block"
           }),
-          "show-css-placeholder": o.isUserDataLoading,
+          "show-css-placeholder": t.isUserDataLoading,
           "is-small": ""
         }, null, 8, ["lender-name", "lender-image-url", "style", "show-css-placeholder"]),
-        o.isUserDataLoading ? (d(), v("div", He, [
-          w(H)
-        ])) : (d(), v("span", De, le(e.numeral(e.roundedBalance).format("$0")), 1))
+        t.isUserDataLoading ? (a(), i("div", I, [
+          r(x)
+        ])) : (a(), i("span", K, L(e.numeral(e.roundedBalance).format("$0")), 1))
       ], 512), [
-        [W, o.loggedIn]
+        [h, t.loggedIn]
       ])
     ], 32),
-    o.loggedIn ? z("", !0) : f((d(), v("a", {
+    t.loggedIn ? y("", !0) : l((a(), i("a", {
       key: 1,
       ref: "signInLink",
-      href: o.loginUrl,
-      class: A(["header-link", { "tw-text-tertiary": !!o.openMenuItem }])
+      href: t.loginUrl,
+      class: v(["header-link", { "tw-text-tertiary": !!t.openMenuItem }])
     }, n[16] || (n[16] = [
-      b(" Sign in ")
-    ]), 10, Ke)), [
-      [a, ["TopNav", "click-Sign-in"]]
+      m(" Sign in ")
+    ]), 10, O)), [
+      [d, ["TopNav", "click-Sign-in"]]
     ])
   ], 32);
 }
-const Ge = /* @__PURE__ */ ge(Ue, [["render", Ee], ["__scopeId", "data-v-c31f1fca"]]);
+const R = /* @__PURE__ */ B(D, [["render", N], ["__scopeId", "data-v-3db10484"]]);
 export {
-  Ge as default
+  R as default
 };