npm - @adyen/bento-vue2 - Versions diffs - 1.102.0 → 1.103.0 - Mend

@adyen/bento-vue2 1.102.0 → 1.103.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (399) hide show

package/dist/chunks/{navigation-menu-group.p1-x06nS.js → navigation-menu-group.gNMP4tW4.js} RENAMED Viewed

@@ -1,15 +1,15 @@
-import { defineComponent as M, useSlots as L, ref as f, computed as c, provide as N, toRef as j, inject as S, onMounted as R, onBeforeUnmount as W, watch as J, onUnmounted as K } from "vue";
-import { B } from "./typography.C8lPlsbD.js";
-import { B as Y } from "./button.CKS_V3p5.js";
+import { defineComponent as M, useSlots as L, ref as h, computed as u, provide as N, toRef as j, inject as I, onMounted as R, onBeforeUnmount as W, watch as J, onUnmounted as K } from "vue";
+import { B } from "./typography.D1OZJbEa.js";
+import { B as Y } from "./button.C4kKejsg.js";
 /* empty css              */
-import { n as y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as $ } from "./use-has-slot.C9lQZ6nz.js";
-import { g as x } from "./generate-uid.NJ8tVoha.js";
-import { u as G } from "./index.B6WW_F-J.js";
-import { b as T } from "./tooltip.7ct8WxCl.js";
-import { n as D } from "./index.C7m7gI5w.js";
-import { B as q } from "./link.Cejg8jB6.js";
-import { u as X } from "./use-expandable-content-height.2WJLCL-R.js";
+import { g as P } from "./generate-uid.DBWe4g6T.js";
+import { u as G } from "./index.CPOlyau9.js";
+import { b as T } from "./tooltip.D_XsoD_u.js";
+import { m as D } from "./index.CL3TXc0a.js";
+import { B as q } from "./link.CscSbaXa.js";
+import { u as X } from "./use-expandable-content-height.Bdd9hQwq.js";
 import { C as Q } from "./chevron-down.eYtgv5ly.js";
 import { C as ee } from "./chevron-up.d8cwIlA_.js";
 import "../assets/navigation-menu-group.css";
@@ -22,7 +22,7 @@ const te = {
 var ae = function() {
   var e = this, a = e._self._c;
   return a("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? a("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), a("path", { attrs: { fill: "#001222", d: "M15.5303 13.4697L14.4697 14.5303L12 12.0605L9.53027 14.5303L8.46973 13.4697L12 9.93945L15.5303 13.4697Z" } }), a("path", { attrs: { fill: "#001222", d: "M7 13.75H0V12.25H7V13.75Z" } }), a("path", { attrs: { fill: "#001222", d: "M7 8.75H0V7.25H7V8.75Z" } }), a("path", { attrs: { fill: "#001222", d: "M15.5303 2.53027L12 6.06055L8.46973 2.53027L9.53027 1.46973L12 3.93945L14.4697 1.46973L15.5303 2.53027Z" } }), a("path", { attrs: { fill: "#001222", d: "M7 3.75H0V2.25H7V3.75Z" } })]);
-}, ne = [], se = /* @__PURE__ */ y(
+}, ne = [], se = /* @__PURE__ */ x(
   te,
   ae,
   ne,
@@ -40,7 +40,7 @@ const ie = {
 var le = function() {
   var e = this, a = e._self._c;
   return a("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? a("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), a("path", { attrs: { fill: "#001222", d: "M15.5303 11.5303L12 15.0605L8.46973 11.5303L9.53027 10.4697L12 12.9395L14.4697 10.4697L15.5303 11.5303Z" } }), a("path", { attrs: { fill: "#001222", d: "M7 13.75H0V12.25H7V13.75Z" } }), a("path", { attrs: { fill: "#001222", d: "M7 8.75H0V7.25H7V8.75Z" } }), a("path", { attrs: { fill: "#001222", d: "M15.5303 4.46973L14.4697 5.53027L12 3.06055L9.53027 5.53027L8.46973 4.46973L12 0.939453L15.5303 4.46973Z" } }), a("path", { attrs: { fill: "#001222", d: "M7 3.75H0V2.25H7V3.75Z" } })]);
-}, re = [], ue = /* @__PURE__ */ y(
+}, re = [], ue = /* @__PURE__ */ x(
   ie,
   le,
   re,
@@ -49,61 +49,17 @@ var le = function() {
   null
 );
 const ce = ue.exports, E = /* @__PURE__ */ Symbol("navigation menu state injection key"), Z = {
-  "de-DE": {
-    hideAllPages: "Alle Seiten ausblenden",
-    showAllPages: "Alle Seiten anzeigen",
-    showingCurrentPage: "Aktuelle Seite anzeigen"
-  },
-  "en-GB": {
-    hideAllPages: "Hide all pages",
-    showAllPages: "Show all pages",
-    showingCurrentPage: "Displaying the current page"
-  },
-  "en-US": {
-    hideAllPages: "Hide all pages",
-    showAllPages: "Show all pages",
-    showingCurrentPage: "Showing current page"
-  },
-  "es-419": {
-    hideAllPages: "Ocultar todas las páginas",
-    showAllPages: "Mostrar todas las páginas",
-    showingCurrentPage: "Mostrando la página actual"
-  },
-  "es-ES": {
-    hideAllPages: "Ocultar todas las páginas",
-    showAllPages: "Mostrar todas las páginas",
-    showingCurrentPage: "Mostrando la página actual"
-  },
-  "es-MX": {
-    hideAllPages: "Ocultar todas las páginas",
-    showAllPages: "Mostrar todas las páginas",
-    showingCurrentPage: "Mostrando la página actual"
-  },
-  "fr-FR": {
-    hideAllPages: "Masquer toutes les pages",
-    showAllPages: "Afficher toutes les pages",
-    showingCurrentPage: "Affichage de la page actuelle"
-  },
-  "it-IT": {
-    hideAllPages: "Nascondi tutte le pagine",
-    showAllPages: "Mostra tutte le pagine",
-    showingCurrentPage: "Visualizzazione della pagina corrente"
-  },
-  "ja-JP": {
-    hideAllPages: "すべてのページを非表示にする",
-    showAllPages: "すべてのページを表示する",
-    showingCurrentPage: "現在のページを表示しています"
-  },
-  "pt-BR": {
-    hideAllPages: "Ocultar todas as páginas",
-    showAllPages: "Mostrar todas as páginas",
-    showingCurrentPage: "Mostrando a página atual"
-  },
-  "zh-CN": {
-    hideAllPages: "隐藏所有页面",
-    showAllPages: "显示所有页面",
-    showingCurrentPage: "显示当前页面"
-  }
+  "de-DE": { hideAllPages: "Alle Seiten ausblenden", showAllPages: "Alle Seiten anzeigen", showingCurrentPage: "Aktuelle Seite anzeigen" },
+  "en-GB": { hideAllPages: "Hide all pages", showAllPages: "Show all pages", showingCurrentPage: "Displaying the current page" },
+  "en-US": { hideAllPages: "Hide all pages", showAllPages: "Show all pages", showingCurrentPage: "Showing current page" },
+  "es-419": { hideAllPages: "Ocultar todas las páginas", showAllPages: "Mostrar todas las páginas", showingCurrentPage: "Mostrando la página actual" },
+  "es-ES": { hideAllPages: "Ocultar todas las páginas", showAllPages: "Mostrar todas las páginas", showingCurrentPage: "Mostrando la página actual" },
+  "es-MX": { hideAllPages: "Ocultar todas las páginas", showAllPages: "Mostrar todas las páginas", showingCurrentPage: "Mostrando la página actual" },
+  "fr-FR": { hideAllPages: "Masquer toutes les pages", showAllPages: "Afficher toutes les pages", showingCurrentPage: "Affichage de la page actuelle" },
+  "it-IT": { hideAllPages: "Nascondi tutte le pagine", showAllPages: "Mostra tutte le pagine", showingCurrentPage: "Visualizzazione della pagina corrente" },
+  "ja-JP": { hideAllPages: "すべてのページを非表示にする", showAllPages: "すべてのページを表示する", showingCurrentPage: "現在のページを表示しています" },
+  "pt-BR": { hideAllPages: "Ocultar todas as páginas", showAllPages: "Mostrar todas as páginas", showingCurrentPage: "Mostrando a página atual" },
+  "zh-CN": { hideAllPages: "隐藏所有页面", showAllPages: "显示所有页面", showingCurrentPage: "显示当前页面" }
 }, de = {
   i18n: { messages: Z }
 }, pe = /* @__PURE__ */ M({
@@ -115,23 +71,23 @@ const ce = ue.exports, E = /* @__PURE__ */ Symbol("navigation menu state injecti
     activePage: { default: void 0 }
   },
   emits: ["update:active-page", "expand-all", "collapse-all"],
-  setup(v, { emit: e }) {
-    const a = v, t = L(), b = $(t), w = x("navigation-menu-title"), { t: g } = G(), l = f([]), p = (s, n, A) => {
-      l.value.push({ id: s, setOpen: n, getIsOpen: A });
-    }, r = (s) => {
-      l.value = l.value.filter((n) => n.id !== s);
-    }, o = c(() => l.value.length > 0 && l.value.every((s) => s.getIsOpen())), h = c(() => l.value.length > 0 && a.showExpandAllButton), C = c(() => a.label || b("headerActions") || h.value), _ = c(() => o.value ? g("hideAllPages") : g("showAllPages")), m = () => {
-      const s = !o.value;
-      l.value.forEach(({ setOpen: n }) => n(s)), e(s ? "expand-all" : "collapse-all");
-    }, d = (s) => {
-      e("update:active-page", s);
+  setup(p, { emit: e }) {
+    const a = p, t = L(), b = $(t), w = P("navigation-menu-title"), { t: v } = G(), o = h([]), c = (l, n, A) => {
+      o.value.push({ id: l, setOpen: n, getIsOpen: A });
+    }, i = (l) => {
+      o.value = o.value.filter((n) => n.id !== l);
+    }, d = u(() => o.value.length > 0 && o.value.every((l) => l.getIsOpen())), g = u(() => o.value.length > 0 && a.showExpandAllButton), C = u(() => a.label || b("headerActions") || g.value), f = u(() => d.value ? v("hideAllPages") : v("showAllPages")), _ = () => {
+      const l = !d.value;
+      o.value.forEach(({ setOpen: n }) => n(l)), e(l ? "expand-all" : "collapse-all");
+    }, m = (l) => {
+      e("update:active-page", l);
     };
     return N(E, {
-      registerGroup: p,
-      unregisterGroup: r,
+      registerGroup: c,
+      unregisterGroup: i,
       activePage: j(a, "activePage"),
-      updateActivePage: d
-    }), { __sfc: !0, props: a, emit: e, slots: t, hasSlot: b, titleId: w, t: g, groups: l, registerGroup: p, unregisterGroup: r, allExpanded: o, computedShowExpandAll: h, showHeader: C, expandButtonLabel: _, toggleAllGroups: m, updateActivePage: d, BentoTypography: B, BentoButton: Y, MenuCollapseIcon: oe, MenuExpandIcon: ce, vBentoTooltipDirective: T };
+      updateActivePage: m
+    }), { __sfc: !0, props: a, emit: e, slots: t, hasSlot: b, titleId: w, t: v, groups: o, registerGroup: c, unregisterGroup: i, allExpanded: d, computedShowExpandAll: g, showHeader: C, expandButtonLabel: f, toggleAllGroups: _, updateActivePage: m, BentoTypography: B, BentoButton: Y, MenuCollapseIcon: oe, MenuExpandIcon: ce, vBentoTooltipDirective: T };
   }
 });
 var ve = function() {
@@ -139,7 +95,7 @@ var ve = function() {
   return a("nav", { staticClass: "b-navigation-menu", attrs: { "aria-labelledby": e.label ? t.titleId : void 0 } }, [t.showHeader ? a("div", { staticClass: "b-navigation-menu__header" }, [e.label ? a(t.BentoTypography, { staticClass: "b-navigation-menu__title", attrs: { id: t.titleId, el: "p", variant: "caption", stronger: "" } }, [e._v(" " + e._s(e.label) + " ")]) : e._e(), a("div", { staticClass: "b-navigation-menu__actions-container" }, [t.hasSlot("headerActions") ? a("div", { staticClass: "b-navigation-menu__actions" }, [e._t("headerActions")], 2) : e._e(), t.computedShowExpandAll ? a(t.BentoButton, { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive", value: t.expandButtonLabel, expression: "expandButtonLabel" }], attrs: { variant: "tertiary-with-background", "aria-label": t.expandButtonLabel }, on: { click: t.toggleAllGroups }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [t.allExpanded ? a(t.MenuCollapseIcon, { attrs: { "aria-hidden": "true" } }) : a(t.MenuExpandIcon, { attrs: { "aria-hidden": "true" } })];
   }, proxy: !0 }], null, !1, 1954217098) }) : e._e()], 1)], 1) : e._e(), a("ul", { staticClass: "b-navigation-menu__content" }, [e._t("default")], 2)]);
-}, ge = [], _e = /* @__PURE__ */ y(
+}, ge = [], _e = /* @__PURE__ */ x(
   pe,
   ve,
   ge,
@@ -147,10 +103,10 @@ var ve = function() {
   null,
   "2ed5fb08"
 );
-const Ge = _e.exports, U = /* @__PURE__ */ Symbol("navigation menu group state injection key"), he = {
+const Ge = _e.exports, U = /* @__PURE__ */ Symbol("navigation menu group state injection key"), me = {
   name: "bento-navigation-menu-item"
-}, me = /* @__PURE__ */ M({
-  ...he,
+}, he = /* @__PURE__ */ M({
+  ...me,
   props: {
     nested: { type: Boolean, default: !1 },
     label: null,
@@ -158,31 +114,27 @@ const Ge = _e.exports, U = /* @__PURE__ */ Symbol("navigation menu group state i
     value: null,
     alwaysShowActions: { type: Boolean, default: !1 }
   },
-  setup(v) {
-    const e = v, a = L(), t = $(a), b = c(() => e.link ? q : "div"), w = c(() => e.link ? { ...e.link, disableTypography: !0 } : {}), g = f(null), l = f(!1);
-    D(g, () => {
-      var s;
-      const d = ((s = g.value) == null ? void 0 : s.$el) ?? g.value;
-      d && (l.value = d.scrollWidth > d.clientWidth);
+  setup(p) {
+    const e = p, a = L(), t = $(a), b = u(() => e.link ? q : "div"), w = u(() => e.link ? { ...e.link, disableTypography: !0 } : {}), v = h(null), o = h(!1);
+    D(v, () => {
+      const m = v.value?.$el ?? v.value;
+      m && (o.value = m.scrollWidth > m.clientWidth);
     });
-    const p = x("navigation-menu-item"), r = S(U, null), o = S(E, null), h = c(() => {
-      var d;
-      return ((d = o == null ? void 0 : o.activePage) == null ? void 0 : d.value) === e.value;
-    }), C = c(() => !r || !r.isSemiCollapsed.value ? !0 : h.value), _ = c(() => ({
-      "b-navigation-menu-item--selected": h.value,
+    const c = P("navigation-menu-item"), i = I(U, null), d = I(E, null), g = u(() => d?.activePage?.value === e.value), C = u(() => !i || !i.isSemiCollapsed.value ? !0 : g.value), f = u(() => ({
+      "b-navigation-menu-item--selected": g.value,
       "b-navigation-menu-item--nested": e.nested,
       "b-navigation-menu-item--hidden": !C.value,
       "b-navigation-menu-item--always-show-actions": e.alwaysShowActions
     }));
     R(() => {
-      r && e.nested && r.registerItem(p, () => h.value);
+      i && e.nested && i.registerItem(c, () => g.value);
     });
-    const m = () => {
-      o == null || o.updateActivePage(e.value);
+    const _ = () => {
+      d?.updateActivePage(e.value);
     };
     return W(() => {
-      r && e.nested && r.unregisterItem(p);
-    }), { __sfc: !0, props: e, slots: a, hasSlot: t, componentType: b, componentProps: w, labelRef: g, isTruncated: l, itemId: p, groupState: r, menuState: o, isSelected: h, isVisible: C, conditionalClasses: _, handleClick: m, BentoTypography: B, vBentoTooltipDirective: T };
+      i && e.nested && i.unregisterItem(c);
+    }), { __sfc: !0, props: e, slots: a, hasSlot: t, componentType: b, componentProps: w, labelRef: v, isTruncated: o, itemId: c, groupState: i, menuState: d, isSelected: g, isVisible: C, conditionalClasses: f, handleClick: _, BentoTypography: B, vBentoTooltipDirective: T };
   }
 });
 var fe = function() {
@@ -191,8 +143,8 @@ var fe = function() {
     ...t.conditionalClasses,
     "b-navigation-menu-item--no-icon": !t.hasSlot("icon")
   }, attrs: { "aria-hidden": t.isVisible ? void 0 : "true" } }, [a(t.componentType, e._b({ tag: "component", staticClass: "b-navigation-menu-item__link", attrs: { "aria-current": t.isSelected && e.link ? "page" : void 0, tabindex: t.isVisible ? void 0 : -1, inert: t.isVisible ? void 0 : "" }, on: { click: t.handleClick } }, "component", t.componentProps, !1), [!e.nested && t.hasSlot("icon") ? a("div", { staticClass: "b-navigation-menu-item__icon", attrs: { "aria-hidden": "true" } }, [e._t("icon")], 2) : e._e(), a(t.BentoTypography, { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive", value: t.isTruncated ? e.label : void 0, expression: "isTruncated ? label : undefined" }], ref: "labelRef", staticClass: "b-navigation-menu-item__label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.label) + " ")])], 1), t.hasSlot("action") ? a("div", { staticClass: "b-navigation-menu-item__action" }, [e._t("action")], 2) : e._e()], 1);
-}, be = [], we = /* @__PURE__ */ y(
-  me,
+}, be = [], we = /* @__PURE__ */ x(
+  he,
   fe,
   be,
   !1,
@@ -209,38 +161,37 @@ const De = we.exports, Ce = {
     label: null
   },
   emits: ["update:is-expanded"],
-  setup(v, { emit: e }) {
-    const a = v, t = L(), b = $(t), { t: w } = G(), g = c(() => ({
-      "b-navigation-menu-group__header--expanded": u.value && !n.value
-    })), l = c(() => n.value ? w("showingCurrentPage") : void 0), p = f(null), r = f(!1);
-    D(p, () => {
-      var P;
-      const i = ((P = p.value) == null ? void 0 : P.$el) ?? p.value;
-      i && (r.value = i.scrollWidth > i.clientWidth);
+  setup(p, { emit: e }) {
+    const a = p, t = L(), b = $(t), { t: w } = G(), v = u(() => ({
+      "b-navigation-menu-group__header--expanded": r.value && !n.value
+    })), o = u(() => n.value ? w("showingCurrentPage") : void 0), c = h(null), i = h(!1);
+    D(c, () => {
+      const s = c.value?.$el ?? c.value;
+      s && (i.value = s.scrollWidth > s.clientWidth);
     });
-    const o = x("navigation-menu-group"), h = x("navigation-menu-group-button"), C = x("navigation-menu-group-content"), _ = S(E, null), m = f([]), d = (i, P) => {
-      m.value.push({ id: i, isSelected: P });
-    }, s = (i) => {
-      m.value = m.value.filter((P) => P.id !== i);
-    }, n = f(!1);
+    const d = P("navigation-menu-group"), g = P("navigation-menu-group-button"), C = P("navigation-menu-group-content"), f = I(E, null), _ = h([]), m = (s, y) => {
+      _.value.push({ id: s, isSelected: y });
+    }, l = (s) => {
+      _.value = _.value.filter((y) => y.id !== s);
+    }, n = h(!1);
     N(U, {
-      registerItem: d,
-      unregisterItem: s,
+      registerItem: m,
+      unregisterItem: l,
       isSemiCollapsed: n
     });
-    const A = c(() => m.value.some((i) => i.isSelected())), u = f(a.isExpanded), H = f(null), { contentHeight: I } = X(H, u), z = c(() => I.value ? { "max-height": I.value } : {}), F = () => {
-      u.value && !n.value ? A.value ? n.value = !0 : u.value = !1 : n.value ? n.value = !1 : u.value = !0, e("update:is-expanded", u.value && !n.value);
-    }, V = (i) => {
-      i ? (u.value = !0, n.value = !1) : A.value ? n.value = !0 : (n.value = !1, u.value = !1), e("update:is-expanded", i);
+    const A = u(() => _.value.some((s) => s.isSelected())), r = h(a.isExpanded), H = h(null), { contentHeight: S } = X(H, r), z = u(() => S.value ? { "max-height": S.value } : {}), F = () => {
+      r.value && !n.value ? A.value ? n.value = !0 : r.value = !1 : n.value ? n.value = !1 : r.value = !0, e("update:is-expanded", r.value && !n.value);
+    }, V = (s) => {
+      s ? (r.value = !0, n.value = !1) : A.value ? n.value = !0 : (n.value = !1, r.value = !1), e("update:is-expanded", s);
     };
     return J(
       () => a.isExpanded,
-      (i) => {
-        n.value || (u.value = i);
+      (s) => {
+        n.value || (r.value = s);
       }
     ), R(() => {
-      A.value && !u.value && (u.value = !0, e("update:is-expanded", !0)), _ && _.registerGroup(o, V, () => u.value && !n.value);
-    }), K(() => _ == null ? void 0 : _.unregisterGroup(o)), { __sfc: !0, props: a, slots: t, hasSlot: b, t: w, headerClasses: g, headerAriaDescription: l, labelRef: p, isTruncated: r, groupId: o, buttonId: h, contentId: C, navigationMenuState: _, nestedItems: m, registerItem: d, unregisterItem: s, isSemiCollapsed: n, hasActiveItem: A, emit: e, isOpen: u, contentDiv: H, contentHeight: I, contentMaxHeight: z, toggleGroup: F, setOpen: V, BentoTypography: B, vBentoTooltipDirective: T, ChevronDownIcon: Q, ChevronUpIcon: ee };
+      A.value && !r.value && (r.value = !0, e("update:is-expanded", !0)), f && f.registerGroup(d, V, () => r.value && !n.value);
+    }), K(() => f?.unregisterGroup(d)), { __sfc: !0, props: a, slots: t, hasSlot: b, t: w, headerClasses: v, headerAriaDescription: o, labelRef: c, isTruncated: i, groupId: d, buttonId: g, contentId: C, navigationMenuState: f, nestedItems: _, registerItem: m, unregisterItem: l, isSemiCollapsed: n, hasActiveItem: A, emit: e, isOpen: r, contentDiv: H, contentHeight: S, contentMaxHeight: z, toggleGroup: F, setOpen: V, BentoTypography: B, vBentoTooltipDirective: T, ChevronDownIcon: Q, ChevronUpIcon: ee };
   }
 });
 var Pe = function() {
@@ -249,7 +200,7 @@ var Pe = function() {
     ...t.headerClasses,
     "b-navigation-menu-group__header--no-icon": !t.hasSlot("icon")
   }, attrs: { id: t.buttonId, type: "button", "aria-expanded": `${t.isOpen && !t.isSemiCollapsed}`, "aria-controls": t.contentId, "aria-description": t.headerAriaDescription }, on: { click: t.toggleGroup } }, [t.hasSlot("icon") ? a("div", { staticClass: "b-navigation-menu-group__icon", attrs: { "aria-hidden": "true" } }, [e._t("icon")], 2) : e._e(), a(t.BentoTypography, { directives: [{ name: "bento-tooltip-directive", rawName: "v-bento-tooltip-directive", value: t.isTruncated ? e.label : void 0, expression: "isTruncated ? label : undefined" }], ref: "labelRef", staticClass: "b-navigation-menu-group__label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.label) + " ")]), a("div", { staticClass: "b-navigation-menu-group__icon b-navigation-menu-group__icon--chevron", attrs: { "aria-hidden": "true" } }, [t.isOpen && !t.isSemiCollapsed ? a(t.ChevronUpIcon) : a(t.ChevronDownIcon)], 1)], 1), a("Transition", { attrs: { name: "b-navigation-menu-group__animation--content" } }, [a("div", { directives: [{ name: "show", rawName: "v-show", value: t.isOpen, expression: "isOpen" }], staticClass: "b-navigation-menu-group__content-wrapper", style: t.contentMaxHeight, attrs: { id: t.contentId, role: "region", "aria-labelledby": t.buttonId } }, [a("ul", { ref: "contentDiv", staticClass: "b-navigation-menu-group__content" }, [e._t("default")], 2)])])], 1);
-}, xe = [], ye = /* @__PURE__ */ y(
+}, xe = [], Se = /* @__PURE__ */ x(
   Ae,
   Pe,
   xe,
@@ -257,10 +208,10 @@ var Pe = function() {
   null,
   "1199c152"
 );
-const Ze = ye.exports;
+const Ze = Se.exports;
 export {
   Ze as a,
   De as b,
   Ge as n
 };
-//# sourceMappingURL=navigation-menu-group.p1-x06nS.js.map
+//# sourceMappingURL=navigation-menu-group.gNMP4tW4.js.map

package/dist/chunks/{navigation-menu-group.p1-x06nS.js.map → navigation-menu-group.gNMP4tW4.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"navigation-menu-group.p1-x06nS.js","sources":["../../../ui-assets/icons-16/dist/vue/menu-collapse.vue","../../../ui-assets/icons-16/dist/vue/menu-expand.vue","../../src/components/navigation-menu/navigation-menu.keys.ts","../../src/components/navigation-menu/navigation-menu.vue","../../src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.keys.ts","../../src/components/navigation-menu/components/navigation-menu-item/navigation-menu-item.vue","../../src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.vue"],"sourcesContent":["\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M15.5303 13.4697L14.4697 14.5303L12 12.0605L9.53027 14.5303L8.46973 13.4697L12 9.93945L15.5303 13.4697Z\"/><path fill=\"#001222\" d=\"M7 13.75H0V12.25H7V13.75Z\"/><path fill=\"#001222\" d=\"M7 8.75H0V7.25H7V8.75Z\"/><path fill=\"#001222\" d=\"M15.5303 2.53027L12 6.06055L8.46973 2.53027L9.53027 1.46973L12 3.93945L14.4697 1.46973L15.5303 2.53027Z\"/><path fill=\"#001222\" d=\"M7 3.75H0V2.25H7V3.75Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M15.5303 11.5303L12 15.0605L8.46973 11.5303L9.53027 10.4697L12 12.9395L14.4697 10.4697L15.5303 11.5303Z\"/><path fill=\"#001222\" d=\"M7 13.75H0V12.25H7V13.75Z\"/><path fill=\"#001222\" d=\"M7 8.75H0V7.25H7V8.75Z\"/><path fill=\"#001222\" d=\"M15.5303 4.46973L14.4697 5.53027L12 3.06055L9.53027 5.53027L8.46973 4.46973L12 0.939453L15.5303 4.46973Z\"/><path fill=\"#001222\" d=\"M7 3.75H0V2.25H7V3.75Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","export const NAVIGATION_MENU_STATE_INJECTION_KEY = Symbol('navigation menu state injection key');\n","<template>\n <nav class=\"b-navigation-menu\" :aria-labelledby=\"label ? titleId : undefined\">\n <div v-if=\"showHeader\" class=\"b-navigation-menu__header\">\n <bento-typography\n v-if=\"label\"\n :id=\"titleId\"\n el=\"p\"\n variant=\"caption\"\n stronger\n class=\"b-navigation-menu__title\"\n >\n {{ label }}\n </bento-typography>\n <div class=\"b-navigation-menu__actions-container\">\n <div v-if=\"hasSlot('headerActions')\" class=\"b-navigation-menu__actions\">\n <slot name=\"headerActions\" />\n </div>\n <bento-button\n v-if=\"computedShowExpandAll\"\n v-bento-tooltip-directive=\"expandButtonLabel\"\n variant=\"tertiary-with-background\"\n :aria-label=\"expandButtonLabel\"\n @click=\"toggleAllGroups\"\n >\n <template #iconLeft>\n <menu-collapse-icon v-if=\"allExpanded\" aria-hidden=\"true\" />\n <menu-expand-icon v-else aria-hidden=\"true\" />\n </template>\n </bento-button>\n </div>\n </div>\n\n <ul class=\"b-navigation-menu__content\">\n <slot />\n </ul>\n </nav>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, provide, ref, toRef, useSlots } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { BentoButton } from '@/components/button';\n import MenuCollapseIcon from '@adyen/ui-assets-icons-16/vue/menu-collapse';\n import MenuExpandIcon from '@adyen/ui-assets-icons-16/vue/menu-expand';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\n import type {\n BentoNavigationMenuEmits,\n BentoNavigationMenuGroupRegistration,\n BentoNavigationMenuProps,\n BentoNavigationMenuState,\n } from './navigation-menu.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from './navigation-menu.keys';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n label: { default: undefined },\n showExpandAllButton: { type: Boolean, default: false },\n activePage: { default: undefined }\n});\n\n const emit = defineEmits([\"update:active-page\", \"expand-all\", \"collapse-all\"]);\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const titleId = generateUid('navigation-menu-title');\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const groups = ref<Array<BentoNavigationMenuGroupRegistration>>([]);\n\n const registerGroup = (groupId: string, setOpen: (open: boolean) => void, getIsOpen: () => boolean) => {\n groups.value.push({ id: groupId, setOpen, getIsOpen });\n };\n\n const unregisterGroup = (groupId: string) => {\n groups.value = groups.value.filter(g => g.id !== groupId);\n };\n\n const allExpanded = computed(() => groups.value.length > 0 && groups.value.every(group => group.getIsOpen()));\n\n const computedShowExpandAll = computed(() => groups.value.length > 0 && props.showExpandAllButton);\n\n const showHeader = computed(() => props.label \|\| hasSlot('headerActions') \|\| computedShowExpandAll.value);\n\n const expandButtonLabel = computed(() => (allExpanded.value ? t('hideAllPages') : t('showAllPages')));\n\n const toggleAllGroups = () => {\n const shouldExpand = !allExpanded.value;\n groups.value.forEach(({ setOpen }) => setOpen(shouldExpand));\n if (shouldExpand) {\n emit('expand-all');\n } else {\n emit('collapse-all');\n }\n };\n\n const updateActivePage = (value: string) => {\n emit('update:active-page', value);\n };\n\n provide<BentoNavigationMenuState>(NAVIGATION_MENU_STATE_INJECTION_KEY, {\n registerGroup,\n unregisterGroup,\n activePage: toRef(props, 'activePage'),\n updateActivePage,\n });\n</script>\n\n<script lang=\"ts\">\n /*\n Navigation menu container component with optional header and action buttons.\n \n @usage\n * import { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup },\n * template: `\n * <bento-navigation-menu label=\"Pages\" active-page=\"home\">\n * <template #headerActions>\n * <button>Search</button>\n * </template>\n * <bento-navigation-menu-item value=\"home\" label=\"Home\" :link=\"{ to: '/home' }\">\n * <template #icon><home-icon /></template>\n * </bento-navigation-menu-item>\n * <bento-navigation-menu-group label=\"Settings\">\n * <template #icon><folder-icon /></template>\n * <bento-navigation-menu-item nested value=\"general\" label=\"General\" :link=\"{ to: '/settings/general' }\" />\n * </bento-navigation-menu-group>\n * </bento-navigation-menu>\n * `\n * }\n /\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu.scss\" />\n","export const NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY = Symbol('navigation menu group state injection key');\n","<template>\n <li\n class=\"b-navigation-menu-item\"\n :class=\"{\n ...conditionalClasses,\n 'b-navigation-menu-item--no-icon': !hasSlot('icon'),\n }\"\n :aria-hidden=\"!isVisible ? 'true' : undefined\"\n >\n <component\n :is=\"componentType\"\n v-bind=\"componentProps\"\n class=\"b-navigation-menu-item__link\"\n :aria-current=\"isSelected && link ? 'page' : undefined\"\n :tabindex=\"!isVisible ? -1 : undefined\"\n :inert=\"!isVisible ? '' : undefined\"\n @click=\"handleClick\"\n >\n <div v-if=\"!nested && hasSlot('icon')\" class=\"b-navigation-menu-item__icon\" aria-hidden=\"true\">\n <slot name=\"icon\" />\n </div>\n <bento-typography\n ref=\"labelRef\"\n v-bento-tooltip-directive=\"isTruncated ? label : undefined\"\n el=\"span\"\n variant=\"body\"\n stronger\n class=\"b-navigation-menu-item__label\"\n >\n {{ label }}\n </bento-typography>\n </component>\n <div v-if=\"hasSlot('action')\" class=\"b-navigation-menu-item__action\">\n <slot name=\"action\" />\n </div>\n </li>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, onBeforeUnmount, onMounted, ref, useSlots } from 'vue';\n import { useResizeObserver } from '@vueuse/core';\n import { BentoLink } from '@/components/link';\n import { BentoTypography } from '@/components/typography';\n import { generateUid } from '@/core/utils/ts';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import type { BentoNavigationMenuItemProps } from './navigation-menu-item.types';\n import type { BentoNavigationMenuGroupState } from '../navigation-menu-group/navigation-menu-group.types';\n import { NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY } from '../navigation-menu-group/navigation-menu-group.keys';\n import type { BentoNavigationMenuState } from '../../navigation-menu.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from '../../navigation-menu.keys';\n\n const props = defineProps({\n nested: { type: Boolean, default: false },\n label: null,\n link: null,\n value: null,\n alwaysShowActions: { type: Boolean, default: false }\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const componentType = computed(() => (props.link ? BentoLink : 'div'));\n const componentProps = computed(() => (props.link ? { ...props.link, disableTypography: true } : {}));\n\n const labelRef = ref(null);\n const isTruncated = ref(false);\n\n useResizeObserver(labelRef, () => {\n const el = labelRef.value?.$el ?? labelRef.value;\n if (el) {\n isTruncated.value = el.scrollWidth > el.clientWidth;\n }\n });\n\n const itemId = generateUid('navigation-menu-item');\n const groupState = inject<BentoNavigationMenuGroupState \| null>(NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY, null);\n const menuState = inject<BentoNavigationMenuState \| null>(NAVIGATION_MENU_STATE_INJECTION_KEY, null);\n\n const isSelected = computed(() => menuState?.activePage?.value === props.value);\n\n const isVisible = computed(() => {\n if (!groupState) {\n return true;\n }\n if (!groupState.isSemiCollapsed.value) {\n return true;\n }\n return isSelected.value;\n });\n\n const conditionalClasses = computed(() => ({\n 'b-navigation-menu-item--selected': isSelected.value,\n 'b-navigation-menu-item--nested': props.nested,\n 'b-navigation-menu-item--hidden': !isVisible.value,\n 'b-navigation-menu-item--always-show-actions': props.alwaysShowActions,\n }));\n\n onMounted(() => {\n if (groupState && props.nested) {\n groupState.registerItem(itemId, () => isSelected.value);\n }\n });\n\n const handleClick = () => {\n menuState?.updateActivePage(props.value);\n };\n\n onBeforeUnmount(() => {\n if (groupState && props.nested) {\n groupState.unregisterItem(itemId);\n }\n });\n</script>\n\n<script lang=\"ts\">\n /\n Navigation menu item component for rendering individual navigation links.\n * Can be used standalone or nested within a navigation-menu-group.\n \n @usage\n * import { BentoNavigationMenuItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenuItem },\n * template: `\n * <bento-navigation-menu-item value=\"home\" label=\"Home\" :link=\"{ to: '/home' }\">\n * <template #icon><home-icon /></template>\n * <template #action><star-icon svg-title=\"Add to favorites\" /></template>\n * </bento-navigation-menu-item>\n * `\n * }\n /\n export default {\n name: 'bento-navigation-menu-item',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu-item.scss\" />\n","<template>\n <li class=\"b-navigation-menu-group\">\n <button\n :id=\"buttonId\"\n type=\"button\"\n class=\"b-navigation-menu-group__header\"\n :class=\"{\n ...headerClasses,\n 'b-navigation-menu-group__header--no-icon': !hasSlot('icon'),\n }\"\n :aria-expanded=\"`${isOpen && !isSemiCollapsed}`\"\n :aria-controls=\"contentId\"\n :aria-description=\"headerAriaDescription\"\n @click=\"toggleGroup\"\n >\n <div v-if=\"hasSlot('icon')\" class=\"b-navigation-menu-group__icon\" aria-hidden=\"true\">\n <slot name=\"icon\" />\n </div>\n <bento-typography\n ref=\"labelRef\"\n v-bento-tooltip-directive=\"isTruncated ? label : undefined\"\n el=\"span\"\n variant=\"body\"\n stronger\n class=\"b-navigation-menu-group__label\"\n >\n {{ label }}\n </bento-typography>\n <div class=\"b-navigation-menu-group__icon b-navigation-menu-group__icon--chevron\" aria-hidden=\"true\">\n <chevron-up-icon v-if=\"isOpen && !isSemiCollapsed\" />\n <chevron-down-icon v-else />\n </div>\n </button>\n\n <Transition name=\"b-navigation-menu-group__animation--content\">\n <div\n v-show=\"isOpen\"\n :id=\"contentId\"\n class=\"b-navigation-menu-group__content-wrapper\"\n role=\"region\"\n :aria-labelledby=\"buttonId\"\n :style=\"contentMaxHeight\"\n >\n <ul ref=\"contentDiv\" class=\"b-navigation-menu-group__content\">\n <slot />\n </ul>\n </div>\n </Transition>\n </li>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, onMounted, onUnmounted, provide, ref, useSlots, watch } from 'vue';\n import { useResizeObserver } from '@vueuse/core';\n import { BentoTypography } from '@/components/typography';\n import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\n import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n import type {\n BentoNavigationMenuGroupProps,\n BentoNavigationMenuGroupState,\n BentoNavigationMenuItemRegistration,\n } from './navigation-menu-group.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from '../../navigation-menu.keys';\n import { NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY } from './navigation-menu-group.keys';\n import { type BentoNavigationMenuState } from '../../navigation-menu.types';\n import messages from '../../messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n isExpanded: { type: Boolean, default: false },\n label: null\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const headerClasses = computed(() => ({\n 'b-navigation-menu-group__header--expanded': isOpen.value && !isSemiCollapsed.value,\n }));\n\n const headerAriaDescription = computed(() => (isSemiCollapsed.value ? t('showingCurrentPage') : undefined));\n\n const labelRef = ref(null);\n const isTruncated = ref(false);\n\n useResizeObserver(labelRef, () => {\n const el = labelRef.value?.$el ?? labelRef.value;\n if (el) {\n isTruncated.value = el.scrollWidth > el.clientWidth;\n }\n });\n\n const groupId = generateUid('navigation-menu-group');\n const buttonId = generateUid('navigation-menu-group-button');\n const contentId = generateUid('navigation-menu-group-content');\n const navigationMenuState = inject<BentoNavigationMenuState \| null>(NAVIGATION_MENU_STATE_INJECTION_KEY, null);\n\n const nestedItems = ref<Array<BentoNavigationMenuItemRegistration>>([]);\n\n const registerItem = (itemId: string, isSelected: () => boolean) => {\n nestedItems.value.push({ id: itemId, isSelected });\n };\n\n const unregisterItem = (itemId: string) => {\n nestedItems.value = nestedItems.value.filter(item => item.id !== itemId);\n };\n\n const isSemiCollapsed = ref(false);\n\n provide<BentoNavigationMenuGroupState>(NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY, {\n registerItem,\n unregisterItem,\n isSemiCollapsed,\n });\n\n const hasActiveItem = computed(() => nestedItems.value.some(item => item.isSelected()));\n\n const emit = defineEmits([\"update:is-expanded\"]);\n\n const isOpen = ref(props.isExpanded);\n const contentDiv = ref<HTMLUListElement>(null);\n\n const { contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n const toggleGroup = () => {\n if (isOpen.value && !isSemiCollapsed.value) {\n if (hasActiveItem.value) {\n isSemiCollapsed.value = true;\n } else {\n isOpen.value = false;\n }\n } else if (isSemiCollapsed.value) {\n isSemiCollapsed.value = false;\n } else {\n isOpen.value = true;\n }\n emit('update:is-expanded', isOpen.value && !isSemiCollapsed.value);\n };\n\n const setOpen = (open: boolean) => {\n if (open) {\n isOpen.value = true;\n isSemiCollapsed.value = false;\n } else if (hasActiveItem.value) {\n isSemiCollapsed.value = true;\n } else {\n isSemiCollapsed.value = false;\n isOpen.value = false;\n }\n emit('update:is-expanded', open);\n };\n\n watch(\n () => props.isExpanded,\n value => {\n if (!isSemiCollapsed.value) {\n isOpen.value = value;\n }\n }\n );\n\n onMounted(() => {\n if (hasActiveItem.value && !isOpen.value) {\n isOpen.value = true;\n emit('update:is-expanded', true);\n }\n if (navigationMenuState) {\n navigationMenuState.registerGroup(groupId, setOpen, () => isOpen.value && !isSemiCollapsed.value);\n }\n });\n\n onUnmounted(() => navigationMenuState?.unregisterGroup(groupId));\n</script>\n\n<script lang=\"ts\">\n /\n Navigation menu group component for creating collapsible sections.\n \n @usage\n * import { BentoNavigationMenuGroup, BentoNavigationMenuItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenuGroup, BentoNavigationMenuItem },\n * template: `\n * <bento-navigation-menu-group label=\"Section\" :is-expanded=\"true\">\n * <template #icon><folder-icon /></template>\n * <bento-navigation-menu-item nested value=\"item-1\" label=\"Item 1\" :link=\"{ to: '/section/item-1' }\" />\n * <bento-navigation-menu-item nested value=\"item-2\" label=\"Item 2\" :link=\"{ to: '/section/item-2' }\" />\n * </bento-navigation-menu-group>\n * `\n * }\n */\n export default {\n name: 'bento-navigation-menu-group',\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu-group.scss\" />\n"],"names":["uuid$1","_sfc_main$4","uuid","_sfc_main$3","NAVIGATION_MENU_STATE_INJECTION_KEY","__default__$2","messages","slots","useSlots","hasSlot","useHasSlot","titleId","generateUid","t","useI18n","groups","ref","registerGroup","groupId","setOpen","getIsOpen","unregisterGroup","g","allExpanded","computed","group","computedShowExpandAll","props","showHeader","expandButtonLabel","toggleAllGroups","shouldExpand","emit","updateActivePage","value","provide","toRef","NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY","__default__$1","componentType","BentoLink","componentProps","labelRef","isTruncated","useResizeObserver","el","_a","itemId","groupState","inject","menuState","isSelected","isVisible","conditionalClasses","onMounted","handleClick","onBeforeUnmount","__default__","headerClasses","isOpen","isSemiCollapsed","headerAriaDescription","buttonId","contentId","navigationMenuState","nestedItems","registerItem","unregisterItem","item","hasActiveItem","contentDiv","contentHeight","useExpandableContentHeight","contentMaxHeight","toggleGroup","open","watch","onUnmounted"],"mappings":"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"}
1	+ {"version":3,"file":"navigation-menu-group.gNMP4tW4.js","sources":["../../../ui-assets/icons-16/dist/vue/menu-collapse.vue","../../../ui-assets/icons-16/dist/vue/menu-expand.vue","../../src/components/navigation-menu/navigation-menu.keys.ts","../../src/components/navigation-menu/navigation-menu.vue","../../src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.keys.ts","../../src/components/navigation-menu/components/navigation-menu-item/navigation-menu-item.vue","../../src/components/navigation-menu/components/navigation-menu-group/navigation-menu-group.vue"],"sourcesContent":["\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M15.5303 13.4697L14.4697 14.5303L12 12.0605L9.53027 14.5303L8.46973 13.4697L12 9.93945L15.5303 13.4697Z\"/><path fill=\"#001222\" d=\"M7 13.75H0V12.25H7V13.75Z\"/><path fill=\"#001222\" d=\"M7 8.75H0V7.25H7V8.75Z\"/><path fill=\"#001222\" d=\"M15.5303 2.53027L12 6.06055L8.46973 2.53027L9.53027 1.46973L12 3.93945L14.4697 1.46973L15.5303 2.53027Z\"/><path fill=\"#001222\" d=\"M7 3.75H0V2.25H7V3.75Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M15.5303 11.5303L12 15.0605L8.46973 11.5303L9.53027 10.4697L12 12.9395L14.4697 10.4697L15.5303 11.5303Z\"/><path fill=\"#001222\" d=\"M7 13.75H0V12.25H7V13.75Z\"/><path fill=\"#001222\" d=\"M7 8.75H0V7.25H7V8.75Z\"/><path fill=\"#001222\" d=\"M15.5303 4.46973L14.4697 5.53027L12 3.06055L9.53027 5.53027L8.46973 4.46973L12 0.939453L15.5303 4.46973Z\"/><path fill=\"#001222\" d=\"M7 3.75H0V2.25H7V3.75Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","export const NAVIGATION_MENU_STATE_INJECTION_KEY = Symbol('navigation menu state injection key');\n","<template>\n <nav class=\"b-navigation-menu\" :aria-labelledby=\"label ? titleId : undefined\">\n <div v-if=\"showHeader\" class=\"b-navigation-menu__header\">\n <bento-typography\n v-if=\"label\"\n :id=\"titleId\"\n el=\"p\"\n variant=\"caption\"\n stronger\n class=\"b-navigation-menu__title\"\n >\n {{ label }}\n </bento-typography>\n <div class=\"b-navigation-menu__actions-container\">\n <div v-if=\"hasSlot('headerActions')\" class=\"b-navigation-menu__actions\">\n <slot name=\"headerActions\" />\n </div>\n <bento-button\n v-if=\"computedShowExpandAll\"\n v-bento-tooltip-directive=\"expandButtonLabel\"\n variant=\"tertiary-with-background\"\n :aria-label=\"expandButtonLabel\"\n @click=\"toggleAllGroups\"\n >\n <template #iconLeft>\n <menu-collapse-icon v-if=\"allExpanded\" aria-hidden=\"true\" />\n <menu-expand-icon v-else aria-hidden=\"true\" />\n </template>\n </bento-button>\n </div>\n </div>\n\n <ul class=\"b-navigation-menu__content\">\n <slot />\n </ul>\n </nav>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, provide, ref, toRef, useSlots } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { BentoButton } from '@/components/button';\n import MenuCollapseIcon from '@adyen/ui-assets-icons-16/vue/menu-collapse';\n import MenuExpandIcon from '@adyen/ui-assets-icons-16/vue/menu-expand';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\n import type {\n BentoNavigationMenuEmits,\n BentoNavigationMenuGroupRegistration,\n BentoNavigationMenuProps,\n BentoNavigationMenuState,\n } from './navigation-menu.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from './navigation-menu.keys';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n label: { default: undefined },\n showExpandAllButton: { type: Boolean, default: false },\n activePage: { default: undefined }\n});\n\n const emit = defineEmits([\"update:active-page\", \"expand-all\", \"collapse-all\"]);\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const titleId = generateUid('navigation-menu-title');\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const groups = ref<Array<BentoNavigationMenuGroupRegistration>>([]);\n\n const registerGroup = (groupId: string, setOpen: (open: boolean) => void, getIsOpen: () => boolean) => {\n groups.value.push({ id: groupId, setOpen, getIsOpen });\n };\n\n const unregisterGroup = (groupId: string) => {\n groups.value = groups.value.filter(g => g.id !== groupId);\n };\n\n const allExpanded = computed(() => groups.value.length > 0 && groups.value.every(group => group.getIsOpen()));\n\n const computedShowExpandAll = computed(() => groups.value.length > 0 && props.showExpandAllButton);\n\n const showHeader = computed(() => props.label \|\| hasSlot('headerActions') \|\| computedShowExpandAll.value);\n\n const expandButtonLabel = computed(() => (allExpanded.value ? t('hideAllPages') : t('showAllPages')));\n\n const toggleAllGroups = () => {\n const shouldExpand = !allExpanded.value;\n groups.value.forEach(({ setOpen }) => setOpen(shouldExpand));\n if (shouldExpand) {\n emit('expand-all');\n } else {\n emit('collapse-all');\n }\n };\n\n const updateActivePage = (value: string) => {\n emit('update:active-page', value);\n };\n\n provide<BentoNavigationMenuState>(NAVIGATION_MENU_STATE_INJECTION_KEY, {\n registerGroup,\n unregisterGroup,\n activePage: toRef(props, 'activePage'),\n updateActivePage,\n });\n</script>\n\n<script lang=\"ts\">\n /*\n Navigation menu container component with optional header and action buttons.\n \n @usage\n * import { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenu, BentoNavigationMenuItem, BentoNavigationMenuGroup },\n * template: `\n * <bento-navigation-menu label=\"Pages\" active-page=\"home\">\n * <template #headerActions>\n * <button>Search</button>\n * </template>\n * <bento-navigation-menu-item value=\"home\" label=\"Home\" :link=\"{ to: '/home' }\">\n * <template #icon><home-icon /></template>\n * </bento-navigation-menu-item>\n * <bento-navigation-menu-group label=\"Settings\">\n * <template #icon><folder-icon /></template>\n * <bento-navigation-menu-item nested value=\"general\" label=\"General\" :link=\"{ to: '/settings/general' }\" />\n * </bento-navigation-menu-group>\n * </bento-navigation-menu>\n * `\n * }\n /\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu.scss\" />\n","export const NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY = Symbol('navigation menu group state injection key');\n","<template>\n <li\n class=\"b-navigation-menu-item\"\n :class=\"{\n ...conditionalClasses,\n 'b-navigation-menu-item--no-icon': !hasSlot('icon'),\n }\"\n :aria-hidden=\"!isVisible ? 'true' : undefined\"\n >\n <component\n :is=\"componentType\"\n v-bind=\"componentProps\"\n class=\"b-navigation-menu-item__link\"\n :aria-current=\"isSelected && link ? 'page' : undefined\"\n :tabindex=\"!isVisible ? -1 : undefined\"\n :inert=\"!isVisible ? '' : undefined\"\n @click=\"handleClick\"\n >\n <div v-if=\"!nested && hasSlot('icon')\" class=\"b-navigation-menu-item__icon\" aria-hidden=\"true\">\n <slot name=\"icon\" />\n </div>\n <bento-typography\n ref=\"labelRef\"\n v-bento-tooltip-directive=\"isTruncated ? label : undefined\"\n el=\"span\"\n variant=\"body\"\n stronger\n class=\"b-navigation-menu-item__label\"\n >\n {{ label }}\n </bento-typography>\n </component>\n <div v-if=\"hasSlot('action')\" class=\"b-navigation-menu-item__action\">\n <slot name=\"action\" />\n </div>\n </li>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, onBeforeUnmount, onMounted, ref, useSlots } from 'vue';\n import { useResizeObserver } from '@vueuse/core';\n import { BentoLink } from '@/components/link';\n import { BentoTypography } from '@/components/typography';\n import { generateUid } from '@/core/utils/ts';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import type { BentoNavigationMenuItemProps } from './navigation-menu-item.types';\n import type { BentoNavigationMenuGroupState } from '../navigation-menu-group/navigation-menu-group.types';\n import { NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY } from '../navigation-menu-group/navigation-menu-group.keys';\n import type { BentoNavigationMenuState } from '../../navigation-menu.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from '../../navigation-menu.keys';\n\n const props = defineProps({\n nested: { type: Boolean, default: false },\n label: null,\n link: null,\n value: null,\n alwaysShowActions: { type: Boolean, default: false }\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const componentType = computed(() => (props.link ? BentoLink : 'div'));\n const componentProps = computed(() => (props.link ? { ...props.link, disableTypography: true } : {}));\n\n const labelRef = ref(null);\n const isTruncated = ref(false);\n\n useResizeObserver(labelRef, () => {\n const el = labelRef.value?.$el ?? labelRef.value;\n if (el) {\n isTruncated.value = el.scrollWidth > el.clientWidth;\n }\n });\n\n const itemId = generateUid('navigation-menu-item');\n const groupState = inject<BentoNavigationMenuGroupState \| null>(NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY, null);\n const menuState = inject<BentoNavigationMenuState \| null>(NAVIGATION_MENU_STATE_INJECTION_KEY, null);\n\n const isSelected = computed(() => menuState?.activePage?.value === props.value);\n\n const isVisible = computed(() => {\n if (!groupState) {\n return true;\n }\n if (!groupState.isSemiCollapsed.value) {\n return true;\n }\n return isSelected.value;\n });\n\n const conditionalClasses = computed(() => ({\n 'b-navigation-menu-item--selected': isSelected.value,\n 'b-navigation-menu-item--nested': props.nested,\n 'b-navigation-menu-item--hidden': !isVisible.value,\n 'b-navigation-menu-item--always-show-actions': props.alwaysShowActions,\n }));\n\n onMounted(() => {\n if (groupState && props.nested) {\n groupState.registerItem(itemId, () => isSelected.value);\n }\n });\n\n const handleClick = () => {\n menuState?.updateActivePage(props.value);\n };\n\n onBeforeUnmount(() => {\n if (groupState && props.nested) {\n groupState.unregisterItem(itemId);\n }\n });\n</script>\n\n<script lang=\"ts\">\n /\n Navigation menu item component for rendering individual navigation links.\n * Can be used standalone or nested within a navigation-menu-group.\n \n @usage\n * import { BentoNavigationMenuItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenuItem },\n * template: `\n * <bento-navigation-menu-item value=\"home\" label=\"Home\" :link=\"{ to: '/home' }\">\n * <template #icon><home-icon /></template>\n * <template #action><star-icon svg-title=\"Add to favorites\" /></template>\n * </bento-navigation-menu-item>\n * `\n * }\n /\n export default {\n name: 'bento-navigation-menu-item',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu-item.scss\" />\n","<template>\n <li class=\"b-navigation-menu-group\">\n <button\n :id=\"buttonId\"\n type=\"button\"\n class=\"b-navigation-menu-group__header\"\n :class=\"{\n ...headerClasses,\n 'b-navigation-menu-group__header--no-icon': !hasSlot('icon'),\n }\"\n :aria-expanded=\"`${isOpen && !isSemiCollapsed}`\"\n :aria-controls=\"contentId\"\n :aria-description=\"headerAriaDescription\"\n @click=\"toggleGroup\"\n >\n <div v-if=\"hasSlot('icon')\" class=\"b-navigation-menu-group__icon\" aria-hidden=\"true\">\n <slot name=\"icon\" />\n </div>\n <bento-typography\n ref=\"labelRef\"\n v-bento-tooltip-directive=\"isTruncated ? label : undefined\"\n el=\"span\"\n variant=\"body\"\n stronger\n class=\"b-navigation-menu-group__label\"\n >\n {{ label }}\n </bento-typography>\n <div class=\"b-navigation-menu-group__icon b-navigation-menu-group__icon--chevron\" aria-hidden=\"true\">\n <chevron-up-icon v-if=\"isOpen && !isSemiCollapsed\" />\n <chevron-down-icon v-else />\n </div>\n </button>\n\n <Transition name=\"b-navigation-menu-group__animation--content\">\n <div\n v-show=\"isOpen\"\n :id=\"contentId\"\n class=\"b-navigation-menu-group__content-wrapper\"\n role=\"region\"\n :aria-labelledby=\"buttonId\"\n :style=\"contentMaxHeight\"\n >\n <ul ref=\"contentDiv\" class=\"b-navigation-menu-group__content\">\n <slot />\n </ul>\n </div>\n </Transition>\n </li>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, onMounted, onUnmounted, provide, ref, useSlots, watch } from 'vue';\n import { useResizeObserver } from '@vueuse/core';\n import { BentoTypography } from '@/components/typography';\n import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n import { useHasSlot } from '@/composables';\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\n import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n import type {\n BentoNavigationMenuGroupProps,\n BentoNavigationMenuGroupState,\n BentoNavigationMenuItemRegistration,\n } from './navigation-menu-group.types';\n import { NAVIGATION_MENU_STATE_INJECTION_KEY } from '../../navigation-menu.keys';\n import { NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY } from './navigation-menu-group.keys';\n import { type BentoNavigationMenuState } from '../../navigation-menu.types';\n import messages from '../../messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n isExpanded: { type: Boolean, default: false },\n label: null\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const headerClasses = computed(() => ({\n 'b-navigation-menu-group__header--expanded': isOpen.value && !isSemiCollapsed.value,\n }));\n\n const headerAriaDescription = computed(() => (isSemiCollapsed.value ? t('showingCurrentPage') : undefined));\n\n const labelRef = ref(null);\n const isTruncated = ref(false);\n\n useResizeObserver(labelRef, () => {\n const el = labelRef.value?.$el ?? labelRef.value;\n if (el) {\n isTruncated.value = el.scrollWidth > el.clientWidth;\n }\n });\n\n const groupId = generateUid('navigation-menu-group');\n const buttonId = generateUid('navigation-menu-group-button');\n const contentId = generateUid('navigation-menu-group-content');\n const navigationMenuState = inject<BentoNavigationMenuState \| null>(NAVIGATION_MENU_STATE_INJECTION_KEY, null);\n\n const nestedItems = ref<Array<BentoNavigationMenuItemRegistration>>([]);\n\n const registerItem = (itemId: string, isSelected: () => boolean) => {\n nestedItems.value.push({ id: itemId, isSelected });\n };\n\n const unregisterItem = (itemId: string) => {\n nestedItems.value = nestedItems.value.filter(item => item.id !== itemId);\n };\n\n const isSemiCollapsed = ref(false);\n\n provide<BentoNavigationMenuGroupState>(NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY, {\n registerItem,\n unregisterItem,\n isSemiCollapsed,\n });\n\n const hasActiveItem = computed(() => nestedItems.value.some(item => item.isSelected()));\n\n const emit = defineEmits([\"update:is-expanded\"]);\n\n const isOpen = ref(props.isExpanded);\n const contentDiv = ref<HTMLUListElement>(null);\n\n const { contentHeight } = useExpandableContentHeight(contentDiv, isOpen);\n const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {}));\n\n const toggleGroup = () => {\n if (isOpen.value && !isSemiCollapsed.value) {\n if (hasActiveItem.value) {\n isSemiCollapsed.value = true;\n } else {\n isOpen.value = false;\n }\n } else if (isSemiCollapsed.value) {\n isSemiCollapsed.value = false;\n } else {\n isOpen.value = true;\n }\n emit('update:is-expanded', isOpen.value && !isSemiCollapsed.value);\n };\n\n const setOpen = (open: boolean) => {\n if (open) {\n isOpen.value = true;\n isSemiCollapsed.value = false;\n } else if (hasActiveItem.value) {\n isSemiCollapsed.value = true;\n } else {\n isSemiCollapsed.value = false;\n isOpen.value = false;\n }\n emit('update:is-expanded', open);\n };\n\n watch(\n () => props.isExpanded,\n value => {\n if (!isSemiCollapsed.value) {\n isOpen.value = value;\n }\n }\n );\n\n onMounted(() => {\n if (hasActiveItem.value && !isOpen.value) {\n isOpen.value = true;\n emit('update:is-expanded', true);\n }\n if (navigationMenuState) {\n navigationMenuState.registerGroup(groupId, setOpen, () => isOpen.value && !isSemiCollapsed.value);\n }\n });\n\n onUnmounted(() => navigationMenuState?.unregisterGroup(groupId));\n</script>\n\n<script lang=\"ts\">\n /\n Navigation menu group component for creating collapsible sections.\n \n @usage\n * import { BentoNavigationMenuGroup, BentoNavigationMenuItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoNavigationMenuGroup, BentoNavigationMenuItem },\n * template: `\n * <bento-navigation-menu-group label=\"Section\" :is-expanded=\"true\">\n * <template #icon><folder-icon /></template>\n * <bento-navigation-menu-item nested value=\"item-1\" label=\"Item 1\" :link=\"{ to: '/section/item-1' }\" />\n * <bento-navigation-menu-item nested value=\"item-2\" label=\"Item 2\" :link=\"{ to: '/section/item-2' }\" />\n * </bento-navigation-menu-group>\n * `\n * }\n */\n export default {\n name: 'bento-navigation-menu-group',\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./navigation-menu-group.scss\" />\n"],"names":["uuid$1","_sfc_main$4","uuid","_sfc_main$3","NAVIGATION_MENU_STATE_INJECTION_KEY","__default__$2","messages","slots","useSlots","hasSlot","useHasSlot","titleId","generateUid","t","useI18n","groups","ref","registerGroup","groupId","setOpen","getIsOpen","unregisterGroup","g","allExpanded","computed","group","computedShowExpandAll","props","showHeader","expandButtonLabel","toggleAllGroups","shouldExpand","emit","updateActivePage","value","provide","toRef","NAVIGATION_MENU_GROUP_STATE_INJECTION_KEY","__default__$1","componentType","BentoLink","componentProps","labelRef","isTruncated","useResizeObserver","el","itemId","groupState","inject","menuState","isSelected","isVisible","conditionalClasses","onMounted","handleClick","onBeforeUnmount","__default__","headerClasses","isOpen","isSemiCollapsed","headerAriaDescription","buttonId","contentId","navigationMenuState","nestedItems","registerItem","unregisterItem","item","hasActiveItem","contentDiv","contentHeight","useExpandableContentHeight","contentMaxHeight","toggleGroup","open","watch","onUnmounted"],"mappings":"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"}

package/dist/chunks/{on-click-outside.Cy1eFULD.js → on-click-outside.BgIzQ2G1.js} RENAMED Viewed

@@ -1,22 +1,22 @@
 import { watch as k } from "vue";
-import { n as w, u, r as I, d as L, i as S } from "./utils.BzUwtTXc.js";
+import { n as w, u, r as I, d as L, i as S } from "./utils.DWmc2mUI.js";
 const v = (o) => typeof o == "string";
-function y(...o) {
-  let n, i, r, d;
-  if (v(o[0]) || Array.isArray(o[0]) ? ([i, r, d] = o, n = L) : [n, i, r, d] = o, !n)
+function h(...o) {
+  let n, i, r, f;
+  if (v(o[0]) || Array.isArray(o[0]) ? ([i, r, f] = o, n = L) : [n, i, r, f] = o, !n)
     return w;
   Array.isArray(i) || (i = [i]), Array.isArray(r) || (r = [r]);
-  const a = [], E = () => {
+  const a = [], y = () => {
     a.forEach((c) => c()), a.length = 0;
-  }, s = (c, l, h, e) => (c.addEventListener(l, h, e), () => c.removeEventListener(l, h, e)), p = k(
-    () => [u(n), I(d)],
+  }, s = (c, l, m, e) => (c.addEventListener(l, m, e), () => c.removeEventListener(l, m, e)), d = k(
+    () => [u(n), I(f)],
     ([c, l]) => {
-      E(), c && a.push(
+      y(), c && a.push(
         ...i.flatMap(
-          (h) => r.map(
+          (m) => r.map(
             (e) => s(
               c,
-              h,
+              m,
               e,
               l
             )
@@ -27,35 +27,35 @@ function y(...o) {
     { immediate: !0, flush: "post" }
   );
   return () => {
-    p(), E();
+    d(), y();
   };
 }
 let P = !1;
 function g(o, n, i = {}) {
-  const { window: r = L, ignore: d = [], capture: a = !0, detectIframe: E = !1 } = i;
+  const { window: r = L, ignore: f = [], capture: a = !0, detectIframe: y = !1 } = i;
   if (!r)
     return;
   S && !P && (P = !0, Array.from(r.document.body.children).forEach((e) => e.addEventListener("click", w)));
-  let s = !0, p = !1;
-  const m = (e) => (
+  let s = !0, d = !1;
+  const p = (e) => (
     // eslint-disable-next-line @typescript-eslint/no-shadow
-    d.some((t) => {
+    f.some((t) => {
       if (typeof t == "string")
         return Array.from(r.document.querySelectorAll(t)).some(
           (A) => A === e.target || e.composedPath().includes(A)
         );
-      const f = u(t);
-      return f && (e.target === f || e.composedPath().includes(f));
+      const E = u(t);
+      return E && (e.target === E || e.composedPath().includes(E));
     })
   ), l = [
-    y(r, "click", (e) => {
-      if (p) {
-        p = !1;
+    h(r, "click", (e) => {
+      if (d) {
+        d = !1;
         return;
       }
       const t = u(o);
       if (!(!t || t === e.target || e.composedPath().includes(t))) {
-        if (e.detail === 0 && (s = !m(e)), !s) {
+        if (e.detail === 0 && (s = !p(e)), !s) {
           s = !0;
           return;
         }
@@ -63,47 +63,46 @@ function g(o, n, i = {}) {
       }
     }, { passive: !0, capture: a }),
     // Handle touch events on mobile where `click` may not fire on non-interactive elements
-    y(
+    h(
       r,
       "touchend",
       (e) => {
-        if (p = !0, !s) {
+        if (d = !0, !s) {
           s = !0;
           return;
         }
         const t = u(o);
-        !t || e.composedPath().includes(t) || m(e) || n(e);
+        !t || e.composedPath().includes(t) || p(e) || n(e);
       },
       { passive: !0, capture: a }
     ),
-    y(
+    h(
       r,
       "pointerdown",
       (e) => {
         const t = u(o);
-        t && (s = !e.composedPath().includes(t) && !m(e));
+        t && (s = !e.composedPath().includes(t) && !p(e));
       },
       { passive: !0 }
     ),
-    y(
+    h(
       r,
       "pointerup",
       (e) => {
         const t = u(o);
-        t && (s = s && !e.composedPath().includes(t) && !m(e));
+        t && (s = s && !e.composedPath().includes(t) && !p(e));
       },
       { passive: !0 }
     ),
-    E && y(r, "blur", (e) => {
-      var f;
+    y && h(r, "blur", (e) => {
       const t = u(o);
-      ((f = r.document.activeElement) == null ? void 0 : f.tagName) === "IFRAME" && !(t != null && t.contains(r.document.activeElement)) && n(e);
+      r.document.activeElement?.tagName === "IFRAME" && !t?.contains(r.document.activeElement) && n(e);
     })
   ].filter(Boolean);
   return () => l.forEach((e) => e());
 }
 export {
   g as o,
-  y as u
+  h as u
 };
-//# sourceMappingURL=on-click-outside.Cy1eFULD.js.map
+//# sourceMappingURL=on-click-outside.BgIzQ2G1.js.map