@adyen/bento-vue2 0.10.0 → 0.10.1-2

package/dist/menu.js

@@ -0,0 +1,474 @@
+import "./assets/index20.css";
+import { defineComponent as k, computed as v, ref as c, onMounted as U } from "vue";
+import { n as h } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { g as H } from "./chunks/unique-id.a2a2b458.js";
+import { B as N, a as w } from "./chunks/button.31b757d1.js";
+import { BentoPopover as q, BentoPopoverPositions as B } from "./popover.js";
+import { a as V, C as I } from "./chunks/chevron-left.e3a49e62.js";
+import { B as W, a as L } from "./chunks/base-button.38651156.js";
+import { BentoTypography as j, BentoTypographyElement as Y, BentoTypographyVariant as Z } from "./typography.js";
+import { B as $ } from "./chunks/directive.23e35ab0.js";
+let O = 0;
+const z = {
+  beforeCreate() {
+    this.uuid = O.toString(), O += 1;
+  }
+};
+var G = function() {
+  var e = this, n = e._self._c;
+  return n("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? n("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), n("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M8 4C8.29667 4 8.58668 3.91203 8.83335 3.74721C9.08003 3.58238 9.27229 3.34811 9.38582 3.07403C9.49935 2.79994 9.52906 2.49834 9.47118 2.20737C9.4133 1.91639 9.27044 1.64912 9.06066 1.43934C8.85088 1.22956 8.58361 1.0867 8.29264 1.02882C8.00166 0.970945 7.70006 1.00065 7.42597 1.11418C7.15189 1.22771 6.91762 1.41997 6.7528 1.66665C6.58797 1.91332 6.5 2.20333 6.5 2.5C6.5 2.89783 6.65804 3.27936 6.93934 3.56066C7.22064 3.84197 7.60218 4 8 4Z", "clip-rule": "evenodd" } }), n("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M8 15C8.29667 15 8.58668 14.912 8.83335 14.7472C9.08003 14.5824 9.27229 14.3481 9.38582 14.074C9.49935 13.7999 9.52906 13.4983 9.47118 13.2074C9.4133 12.9164 9.27044 12.6491 9.06066 12.4393C8.85088 12.2296 8.58361 12.0867 8.29264 12.0288C8.00166 11.9709 7.70006 12.0007 7.42597 12.1142C7.15189 12.2277 6.91762 12.42 6.7528 12.6666C6.58797 12.9133 6.5 13.2033 6.5 13.5C6.5 13.8978 6.65804 14.2794 6.93934 14.5607C7.22064 14.842 7.60218 15 8 15Z", "clip-rule": "evenodd" } }), n("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "M8.83335 9.24721C8.58668 9.41203 8.29667 9.5 8 9.5C7.60218 9.5 7.22064 9.34197 6.93934 9.06066C6.65804 8.77936 6.5 8.39783 6.5 8C6.5 7.70333 6.58797 7.41332 6.7528 7.16665C6.91762 6.91997 7.15189 6.72771 7.42597 6.61418C7.70006 6.50065 8.00166 6.47094 8.29264 6.52882C8.58361 6.5867 8.85088 6.72956 9.06066 6.93934C9.27044 7.14912 9.4133 7.41639 9.47118 7.70737C9.52906 7.99834 9.49935 8.29994 9.38582 8.57403C9.27229 8.84811 9.08003 9.08238 8.83335 9.24721Z", "clip-rule": "evenodd" } })]);
+}, J = [], Q = /* @__PURE__ */ h(
+  z,
+  G,
+  J,
+  !1,
+  null,
+  "c663a42e",
+  null,
+  null
+);
+const X = Q.exports, ee = k({
+  name: "menu-item",
+  components: { BaseButton: W, BentoTypography: j, ChevronRightIcon: V },
+  props: {
+    /**
+     * menu-item text that gets displayed as the main label
+     */
+    text: {
+      type: String,
+      required: !0
+    },
+    /**
+     * menu-item action that gets executed when the MeniItem is clicked
+     */
+    handler: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * menu-item text that gets displayed as the secondary label
+     */
+    secondaryText: {
+      type: String,
+      default: null
+    },
+    /**
+     * Optional chevron icon displayed to the right of the menu-item
+     */
+    chevron: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Optional icon displayed to the left of the menu-item
+     */
+    icon: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Disables menu-item button functionality
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays an indent variant od the menu-item
+     */
+    indent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays menu-item button as critical
+     */
+    critical: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Renders the text in a bold variant
+     */
+    isTitle: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [L.CLICK],
+  setup(s, { emit: e }) {
+    const n = v(() => ({
+      "b-menu-item--critical": s.critical,
+      "b-menu-item--indent": s.indent
+    }));
+    return {
+      // Enums
+      BentoTypographyElement: Y,
+      BentoTypographyVariant: Z,
+      // Values
+      conditionalClasses: n,
+      // Methods
+      onClick: () => {
+        s.handler(), e(L.CLICK);
+      }
+    };
+  }
+});
+var te = function() {
+  var e = this, n = e._self._c;
+  return e._self._setupProxy, n("base-button", { staticClass: "b-menu-item", class: e.conditionalClasses, attrs: { role: "menuitem", disabled: e.disabled, tabindex: "-1" }, on: { click: e.onClick }, scopedSlots: e._u([e.icon ? { key: "iconLeft", fn: function() {
+    return [n(e.icon, { tag: "component", staticClass: "b-menu-item__icon-left", attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 } : null, { key: "default", fn: function() {
+    return [n("bento-typography", { staticClass: "b-menu-item__primary-text", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY, stronger: e.isTitle } }, [e._v(" " + e._s(e.text) + " ")]), e.secondaryText ? n("bento-typography", { staticClass: "b-menu-item__secondary-text", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY } }, [e._v(" " + e._s(e.secondaryText) + " ")]) : e._e()];
+  }, proxy: !0 }, e.chevron ? { key: "iconRight", fn: function() {
+    return [n("chevron-right-icon", { attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 } : null], null, !0) });
+}, ne = [], se = /* @__PURE__ */ h(
+  ee,
+  te,
+  ne,
+  !1,
+  null,
+  "11b01587",
+  null,
+  null
+);
+const S = se.exports;
+var b = /* @__PURE__ */ ((s) => (s.CLOSE = "close", s.BACK = "back", s))(b || {});
+const oe = k({
+  name: "bento-menu-list-container",
+  inheritAttrs: !1
+});
+var ue = function() {
+  var e = this, n = e._self._c;
+  return e._self._setupProxy, n("div", { staticClass: "b-menu-list-container" }, [e._t("default")], 2);
+}, le = [], ae = /* @__PURE__ */ h(
+  oe,
+  ue,
+  le,
+  !1,
+  null,
+  "a22c0a04",
+  null,
+  null
+);
+const T = ae.exports, P = {
+  "en-US": {
+    menuButton: "Open menu",
+    backButton: "Go back"
+  }
+}, re = k({
+  i18n: { messages: P },
+  name: "sub-menu-item-list",
+  components: { MenuItem: S, MenuListContainer: T },
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    title: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: [b.CLOSE, b.BACK],
+  setup(s, { emit: e }) {
+    const n = c(null), t = c(0), o = c(s.items.length), i = () => e(b.CLOSE), r = () => e(b.BACK), u = v(() => {
+      var p;
+      const f = (p = s.items) == null ? void 0 : p.map((m) => ({
+        ...m,
+        indent: !m.icon,
+        isTitle: !1,
+        clickHandler: i
+      }));
+      return [
+        {
+          text: s.title,
+          secondaryText: null,
+          critical: !1,
+          icon: I,
+          isTitle: !0,
+          disabled: !1,
+          indent: !1,
+          handler: r,
+          clickHandler: r
+        },
+        ...f
+      ];
+    }), _ = async () => {
+      var f, p, m, x, C;
+      (C = (x = (m = (p = (f = n.value) == null ? void 0 : f.children) == null ? void 0 : p[t.value]) == null ? void 0 : m.children) == null ? void 0 : x[0]) == null || C.focus();
+    };
+    U(async () => {
+      setTimeout(() => _(), 150);
+    });
+    const l = () => {
+      t.value > 0 ? (t.value -= 1, u.value[t.value].disabled && l()) : t.value = o.value, _();
+    }, g = () => {
+      t.value < o.value ? (t.value += 1, u.value[t.value].disabled && g()) : t.value = 0, _();
+    };
+    return {
+      // Enums
+      BentoMenuEvent: b,
+      // Values
+      subMenuItemListRefLocal: n,
+      subMenuFocusedIndex: t,
+      ChevronLeftIcon: I,
+      computedItems: u,
+      // Methods
+      closeMenu: i,
+      onBackButton: r,
+      focusPrevious: l,
+      focusNext: g
+    };
+  }
+});
+var ie = function() {
+  var e = this, n = e._self._c;
+  return e._self._setupProxy, n("transition", { attrs: { name: "b-sub-menu-item-list__transition", appear: "" } }, [n("menu-list-container", { staticClass: "b-sub-menu-item-list" }, [n("ul", { ref: "subMenuItemListRefLocal", staticClass: "b-sub-menu-item-list__list", attrs: { role: "menu" }, on: { keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "down", 40, t.key, ["Down", "ArrowDown"]) ? null : (t.stopPropagation(), e.focusNext.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "up", 38, t.key, ["Up", "ArrowUp"]) ? null : (t.stopPropagation(), e.focusPrevious.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : (t.stopPropagation(), e.onBackButton.apply(null, arguments));
+  }] } }, e._l(e.computedItems, function(t, o) {
+    return n("li", { key: `sub-menu-item-list-item-${o}`, class: [
+      { "b-sub-menu-item-list__back-button": o === 0 },
+      { "b-sub-menu-item-list__first-item": o == 1 }
+    ], attrs: { role: "none" } }, [n("menu-item", { attrs: { text: t.text, handler: t.handler, "secondary-text": t.secondaryText, icon: t.icon, "is-title": t.isTitle, disabled: t.disabled, critical: t.critical, indent: t.indent, tabindex: o === e.subMenuFocusedIndex ? "0" : "-1" }, on: { click: t.clickHandler } })], 1);
+  }), 0)])], 1);
+}, ce = [], de = /* @__PURE__ */ h(
+  re,
+  ie,
+  ce,
+  !1,
+  null,
+  "708c9290",
+  null,
+  null
+);
+const fe = de.exports, _e = k({
+  name: "menu-item-list",
+  components: { MenuItem: S, MenuListContainer: T, SubMenuItemList: fe },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The data to be displayed in the list
+     */
+    data: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Displays the menu-items of the list in the indent variant. Only applies to elements that don't have an icon to their left.
+     */
+    indentItems: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The id of the list. Required for accessibility reasons.
+     */
+    id: {
+      type: String,
+      required: !0
+    },
+    /**
+     * If set to true, focuses the last item on the list instead of the first. Used for accessibility purposes when the menu is opened with the 'up' arrow key.
+     */
+    focusLastElement: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [b.CLOSE],
+  setup(s, { emit: e }) {
+    const n = c(null), t = c(null), o = c(null), i = c(!1), r = c(null), u = c(s.focusLastElement ? s.data.length - 1 : 0), _ = c(0), l = c(s.data.length - 1), g = v(() => s.data.some((a) => a.icon)), f = v(() => s.indentItems || g.value ? s.data.map((a) => {
+      let d = !1;
+      return a.icon || (d = !0), {
+        ...a,
+        // eslint-disable-next-line no-param-reassign
+        indent: d
+      };
+    }) : s.data), p = () => {
+      var a, d, y;
+      return (y = (d = (a = n.value) == null ? void 0 : a.children[u.value]) == null ? void 0 : d.children[0]) == null ? void 0 : y.focus();
+    }, m = () => e(b.CLOSE), x = async (a, d) => {
+      a.items ? (r.value = d, i.value = !0) : (r.value = d, i.value = !1, m());
+    }, C = () => {
+      u.value > 0 ? (u.value -= 1, f.value[u.value].disabled && C()) : u.value = l.value, p();
+    }, M = () => {
+      u.value < l.value ? (u.value += 1, f.value[u.value].disabled && M()) : u.value = 0, p();
+    }, R = (a, d) => {
+      var y;
+      (y = a == null ? void 0 : a.items) != null && y.length && (r.value = d, i.value = !0);
+    }, A = () => {
+      r.value && i.value && (r.value = null, i.value = !1);
+    }, E = () => {
+      i.value = !1, r.value = null, p();
+    }, F = v(() => {
+      var a;
+      return (a = t == null ? void 0 : t.value) == null ? void 0 : a.$el.offsetHeight;
+    }), D = v(() => {
+      var a, d, y;
+      return (y = (d = (a = o == null ? void 0 : o.value) == null ? void 0 : a[0]) == null ? void 0 : d.$el) == null ? void 0 : y.offsetHeight;
+    }), K = v(() => i.value ? `${D.value}px` : `${F.value}px`);
+    return {
+      // Values
+      menuItemListRef: n,
+      menuItemListWrapperRef: t,
+      subMenuItemListRef: o,
+      computedData: f,
+      computedHeight: K,
+      focusedIndex: u,
+      subMenuFocusedIndex: _,
+      showSubMenu: i,
+      visibleSubMenuIndex: r,
+      // Methods
+      toggleMenu: x,
+      closeMenu: m,
+      focusPrevious: C,
+      focusNext: M,
+      focusRight: R,
+      focusLeft: A,
+      onBackButton: E
+    };
+  }
+});
+var pe = function() {
+  var e = this, n = e._self._c;
+  return e._self._setupProxy, n("menu-list-container", { ref: "menuItemListWrapperRef", style: { height: e.computedHeight } }, [n("ul", { ref: "menuItemListRef", staticClass: "b-menu-item-list", attrs: { id: e.id, role: "menu" }, on: { keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "down", 40, t.key, ["Down", "ArrowDown"]) ? null : e.focusNext.apply(null, arguments);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "up", 38, t.key, ["Up", "ArrowUp"]) ? null : e.focusPrevious.apply(null, arguments);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : e.closeMenu.apply(null, arguments);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "tab", 9, t.key, "Tab") ? null : e.closeMenu.apply(null, arguments);
+  }] } }, e._l(e.computedData, function(t, o) {
+    var i, r, u, _;
+    return n("li", { key: `menu-item-${o}`, staticClass: "b-menu-item-list__item", attrs: { role: "none" }, on: { keydown: [function(l) {
+      return !l.type.indexOf("key") && e._k(l.keyCode, "right", 39, l.key, ["Right", "ArrowRight"]) || "button" in l && l.button !== 2 ? null : e.focusRight(t, o);
+    }, function(l) {
+      return !l.type.indexOf("key") && e._k(l.keyCode, "left", 37, l.key, ["Left", "ArrowLeft"]) || "button" in l && l.button !== 0 ? null : e.focusLeft();
+    }] } }, [n("menu-item", { attrs: { text: t.text, handler: (i = t.items) != null && i.length ? () => null : t.handler, "secondary-text": t.secondaryText, icon: t.icon, chevron: !!((r = t.items) != null && r.length), disabled: t.disabled, critical: t.critical, indent: t.indent, tabindex: o === e.subMenuFocusedIndex ? "0" : "-1", "aria-haspopup": !!((u = t.items) != null && u.length), "aria-expanded": e.showSubMenu && e.visibleSubMenuIndex === o }, on: { click: function(l) {
+      return e.toggleMenu(t, o);
+    } } }), (_ = t.items) != null && _.length && e.showSubMenu && e.visibleSubMenuIndex === o ? n("sub-menu-item-list", { ref: "subMenuItemListRef", refInFor: !0, attrs: { items: t.items, title: t.text }, on: { back: e.onBackButton, close: e.closeMenu } }) : e._e()], 1);
+  }), 0)]);
+}, me = [], ye = /* @__PURE__ */ h(
+  _e,
+  pe,
+  me,
+  !1,
+  null,
+  "0bd49bc0",
+  null,
+  null
+);
+const ve = ye.exports, be = k({
+  i18n: { messages: P },
+  name: "bento-menu",
+  components: { BentoButton: N, BentoPopover: q, MenuItemList: ve, OptionsVerticalIcon: X },
+  directives: { BentoClickOutsideDirective: $ },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The data to be displayed in the list
+     */
+    data: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * The position of where the menu should open.
+     * @see BentoPopoverPositions
+     */
+    menuPosition: {
+      type: String,
+      default: B.BOTTOM_START,
+      validator: (s) => Object.values(B).includes(s)
+    },
+    /**
+     * Instructs the menu popover to be visible outside of the containing container.
+     * https://popper.js.org/docs/v2/constructors/#strategy
+     */
+    menuFixedPositioning: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets a custom width for the menu popover.
+     */
+    menuWidth: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.
+     */
+    button: {
+      type: Object,
+      default: () => ({
+        variant: w.SECONDARY
+      })
+    }
+  },
+  setup(s) {
+    const e = c(null), n = c(!1), t = c(!1), o = H("menu"), i = v(() => s.menuWidth ? { width: `${s.menuWidth}px` } : null), r = () => {
+      n.value = !0;
+    }, u = () => {
+      n.value && (n.value = !1, e.value.$el.focus());
+    };
+    return {
+      // Enums
+      BentoButtonVariant: w,
+      BentoPopoverPositions: B,
+      // Values
+      menuButtonRef: e,
+      menuId: o,
+      showMenu: n,
+      computedMenuWidth: i,
+      isLastElementFocused: t,
+      // Methods
+      onKeyDown: () => {
+        t.value = !1, r();
+      },
+      onKeyUp: () => {
+        t.value = !0, r();
+      },
+      closeMenu: u,
+      toggleShowMenu: (f) => {
+        f.stopPropagation(), n.value ? u() : r();
+      }
+    };
+  }
+});
+var he = function() {
+  var e = this, n = e._self._c;
+  return e._self._setupProxy, n("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.closeMenu, expression: "closeMenu" }], staticClass: "b-menu", on: { keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "down", 40, t.key, ["Down", "ArrowDown"]) ? null : e.onKeyDown.apply(null, arguments);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "up", 38, t.key, ["Up", "ArrowUp"]) ? null : e.onKeyUp.apply(null, arguments);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : e.closeMenu.apply(null, arguments);
+  }] } }, [n("bento-button", e._b({ ref: "menuButtonRef", attrs: { "aria-haspopup": "true", "aria-expanded": e.showMenu, "aria-controls": e.menuId }, on: { click: e.toggleShowMenu }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [e._t("default", function() {
+      return [n("options-vertical-icon", { attrs: { title: e.$t("menuButton") } })];
+    })];
+  }, proxy: !0 }], null, !0) }, "bento-button", e.button, !1)), e.menuButtonRef ? n("bento-popover", { staticClass: "b-menu__popover", style: e.computedMenuWidth, attrs: { open: e.showMenu, "target-element": e.menuButtonRef, position: e.menuPosition, "fixed-positioning": e.menuFixedPositioning, "without-space": "" } }, [n("menu-item-list", { attrs: { id: e.menuId, data: e.data, "focus-last-element": e.isLastElementFocused }, on: { close: e.closeMenu } })], 1) : e._e()], 1);
+}, ge = [], Ce = /* @__PURE__ */ h(
+  be,
+  he,
+  ge,
+  !1,
+  null,
+  "1975995f",
+  null,
+  null
+);
+const Pe = Ce.exports;
+export {
+  Pe as BentoMenu,
+  b as BentoMenuEvent
+};
+//# sourceMappingURL=menu.js.map

package/dist/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sources":["../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/options-vertical.vue","../src/components/menu/components/menu-item/menu-item.vue","../src/components/menu/menu.types.ts","../src/components/menu/components/menu-list-container/menu-list-container.vue","../src/components/menu/components/sub-menu-item-list/sub-menu-item-list.vue","../src/components/menu/components/menu-item-list/menu-item-list.vue","../src/components/menu/menu.vue"],"sourcesContent":["\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" 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=\"#00112C\" fill-rule=\"evenodd\" d=\"M8 4C8.29667 4 8.58668 3.91203 8.83335 3.74721C9.08003 3.58238 9.27229 3.34811 9.38582 3.07403C9.49935 2.79994 9.52906 2.49834 9.47118 2.20737C9.4133 1.91639 9.27044 1.64912 9.06066 1.43934C8.85088 1.22956 8.58361 1.0867 8.29264 1.02882C8.00166 0.970945 7.70006 1.00065 7.42597 1.11418C7.15189 1.22771 6.91762 1.41997 6.7528 1.66665C6.58797 1.91332 6.5 2.20333 6.5 2.5C6.5 2.89783 6.65804 3.27936 6.93934 3.56066C7.22064 3.84197 7.60218 4 8 4Z\" clip-rule=\"evenodd\"/><path fill=\"#00112C\" fill-rule=\"evenodd\" d=\"M8 15C8.29667 15 8.58668 14.912 8.83335 14.7472C9.08003 14.5824 9.27229 14.3481 9.38582 14.074C9.49935 13.7999 9.52906 13.4983 9.47118 13.2074C9.4133 12.9164 9.27044 12.6491 9.06066 12.4393C8.85088 12.2296 8.58361 12.0867 8.29264 12.0288C8.00166 11.9709 7.70006 12.0007 7.42597 12.1142C7.15189 12.2277 6.91762 12.42 6.7528 12.6666C6.58797 12.9133 6.5 13.2033 6.5 13.5C6.5 13.8978 6.65804 14.2794 6.93934 14.5607C7.22064 14.842 7.60218 15 8 15Z\" clip-rule=\"evenodd\"/><path fill=\"#00112C\" fill-rule=\"evenodd\" d=\"M8.83335 9.24721C8.58668 9.41203 8.29667 9.5 8 9.5C7.60218 9.5 7.22064 9.34197 6.93934 9.06066C6.65804 8.77936 6.5 8.39783 6.5 8C6.5 7.70333 6.58797 7.41332 6.7528 7.16665C6.91762 6.91997 7.15189 6.72771 7.42597 6.61418C7.70006 6.50065 8.00166 6.47094 8.29264 6.52882C8.58361 6.5867 8.85088 6.72956 9.06066 6.93934C9.27044 7.14912 9.4133 7.41639 9.47118 7.70737C9.52906 7.99834 9.49935 8.29994 9.38582 8.57403C9.27229 8.84811 9.08003 9.08238 8.83335 9.24721Z\" clip-rule=\"evenodd\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style scoped lang=\"scss\">\n    svg {\n        display: inline-flex;\n        flex-shrink: 0;\n    }\n    \n    svg,\n    svg * {\n        fill: currentcolor;\n    }\n</style>\n","<template>\n    <base-button\n        class=\"b-menu-item\"\n        role=\"menuitem\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        tabindex=\"-1\"\n        @click=\"onClick\"\n    >\n        <template v-if=\"icon\" #iconLeft>\n            <component :is=\"icon\" class=\"b-menu-item__icon-left\" aria-hidden=\"true\" />\n        </template>\n        <template #default>\n            <bento-typography\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                :stronger=\"isTitle\"\n                class=\"b-menu-item__primary-text\"\n            >\n                {{ text }}\n            </bento-typography>\n            <bento-typography\n                v-if=\"secondaryText\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                class=\"b-menu-item__secondary-text\"\n            >\n                {{ secondaryText }}\n            </bento-typography>\n        </template>\n        <template v-if=\"chevron\" #iconRight><chevron-right-icon aria-hidden=\"true\" /></template>\n    </base-button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import type { VueNodeElement } from '@/types';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n    import { BaseButton, BentoBaseButtonEvent } from '@/components/internal/base-button';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoMenuItem } from './menu-item.types';\n\n    /**\n     * Menu item component to render items in a menu. For internal use only.\n     */\n    export default defineComponent({\n        name: 'menu-item',\n        components: { BaseButton, BentoTypography, ChevronRightIcon },\n        props: {\n            /**\n             * menu-item text that gets displayed as the main label\n             */\n            text: {\n                type: String,\n                required: true,\n            },\n            /**\n             * menu-item action that gets executed when the MeniItem is clicked\n             */\n            handler: {\n                type: Function as PropType<BentoMenuItem['handler']>,\n                required: true,\n            },\n            /**\n             * menu-item text that gets displayed as the secondary label\n             */\n            secondaryText: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Optional chevron icon displayed to the right of the menu-item\n             */\n            chevron: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Optional icon displayed to the left of the menu-item\n             */\n            icon: {\n                type: Object as PropType<VueNodeElement>,\n                default: null,\n            },\n            /**\n             * Disables menu-item button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays an indent variant od the menu-item\n             */\n            indent: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays menu-item button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Renders the text in a bold variant\n             */\n            isTitle: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: [BentoBaseButtonEvent.CLICK],\n        setup(props, { emit }) {\n            const conditionalClasses = computed(() => ({\n                'b-menu-item--critical': props.critical,\n                'b-menu-item--indent': props.indent,\n            }));\n\n            const onClick = () => {\n                props.handler();\n                emit(BentoBaseButtonEvent.CLICK);\n            };\n\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                conditionalClasses,\n\n                // Methods\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./menu-item.scss\" />\n","import { BentoButton } from '../button';\n\nexport enum BentoMenuEvent {\n    CLOSE = 'close',\n    BACK = 'back',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\n\nexport type BentoMenuButtonProps = {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n};\n","<template>\n    <div class=\"b-menu-list-container\"><slot></slot></div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n\n    /**\n     * Menu list container component to set the correct styling in a menu list. For internal use only.\n     */\n    export default defineComponent({\n        name: 'bento-menu-list-container',\n        inheritAttrs: false,\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./menu-list-container.scss\" />\n","<template>\n    <transition name=\"b-sub-menu-item-list__transition\" appear>\n        <menu-list-container class=\"b-sub-menu-item-list\">\n            <ul\n                ref=\"subMenuItemListRefLocal\"\n                role=\"menu\"\n                class=\"b-sub-menu-item-list__list\"\n                @keydown.down.stop=\"focusNext\"\n                @keydown.up.stop=\"focusPrevious\"\n                @keydown.esc.stop=\"onBackButton\"\n            >\n                <li\n                    v-for=\"(item, index) in computedItems\"\n                    :key=\"`sub-menu-item-list-item-${index}`\"\n                    :class=\"[\n                        { 'b-sub-menu-item-list__back-button': index === 0 },\n                        { 'b-sub-menu-item-list__first-item': index == 1 },\n                    ]\"\n                    role=\"none\"\n                >\n                    <menu-item\n                        :text=\"item.text\"\n                        :handler=\"item.handler\"\n                        :secondary-text=\"item.secondaryText\"\n                        :icon=\"item.icon\"\n                        :is-title=\"item.isTitle\"\n                        :disabled=\"item.disabled\"\n                        :critical=\"item.critical\"\n                        :indent=\"item.indent\"\n                        :tabindex=\"index === subMenuFocusedIndex ? '0' : '-1'\"\n                        @click=\"item.clickHandler\"\n                    />\n                </li>\n            </ul>\n        </menu-list-container>\n    </transition>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref } from 'vue';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import { BentoMenuItem, MenuItem } from '../menu-item';\n    import { BentoMenuEvent } from '../../menu.types';\n    import messages from '../../messages.json';\n    import MenuListContainer from '../menu-list-container/menu-list-container.vue';\n\n    /**\n     * SubMenuItemList component to render a submenu with the sliding transition. For internal use only.\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'sub-menu-item-list',\n        components: { MenuItem, MenuListContainer },\n        props: {\n            items: {\n                type: Array as PropType<BentoMenuItem[]>,\n                required: true,\n            },\n            title: {\n                type: String,\n                required: true,\n            },\n        },\n        emits: [BentoMenuEvent.CLOSE, BentoMenuEvent.BACK],\n        setup(props, { emit }) {\n            const subMenuItemListRefLocal = ref(null);\n            const subMenuFocusedIndex = ref(0);\n            const numberOfItems = ref(props.items.length);\n\n            const closeMenu = () => emit(BentoMenuEvent.CLOSE);\n\n            const onBackButton = () => emit(BentoMenuEvent.BACK);\n\n            const computedItems = computed(() => {\n                const items = props.items?.map(el => ({\n                    ...el,\n                    indent: !el.icon,\n                    isTitle: false,\n                    clickHandler: closeMenu,\n                }));\n                return [\n                    {\n                        text: props.title,\n                        secondaryText: null,\n                        critical: false,\n                        icon: ChevronLeftIcon,\n                        isTitle: true,\n                        disabled: false,\n                        indent: false,\n                        handler: onBackButton,\n                        clickHandler: onBackButton,\n                    },\n                    ...items,\n                ];\n            });\n\n            const focusItem = async () => {\n                subMenuItemListRefLocal.value?.children?.[subMenuFocusedIndex.value]?.children?.[0]?.focus();\n            };\n\n            onMounted(async () => {\n                // Using setTimeout otherwise the sliding animation doesn't work anymore. The timeout imer is the same as the transition time (0.15s)\n                setTimeout(() => focusItem(), 150);\n            });\n\n            const focusPrevious = () => {\n                if (subMenuFocusedIndex.value > 0) {\n                    subMenuFocusedIndex.value -= 1;\n                    if (computedItems.value[subMenuFocusedIndex.value].disabled) {\n                        focusPrevious();\n                    }\n                } else {\n                    subMenuFocusedIndex.value = numberOfItems.value;\n                }\n                focusItem();\n            };\n\n            const focusNext = () => {\n                if (subMenuFocusedIndex.value < numberOfItems.value) {\n                    subMenuFocusedIndex.value += 1;\n                    if (computedItems.value[subMenuFocusedIndex.value].disabled) {\n                        focusNext();\n                    }\n                } else {\n                    subMenuFocusedIndex.value = 0;\n                }\n                focusItem();\n            };\n\n            return {\n                // Enums\n                BentoMenuEvent,\n\n                // Values\n                subMenuItemListRefLocal,\n                subMenuFocusedIndex,\n                ChevronLeftIcon,\n                computedItems,\n\n                // Methods\n                closeMenu,\n                onBackButton,\n                focusPrevious,\n                focusNext,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./sub-menu-item-list.scss\" />\n","<template>\n    <menu-list-container ref=\"menuItemListWrapperRef\" :style=\"{ height: computedHeight }\">\n        <ul\n            :id=\"id\"\n            ref=\"menuItemListRef\"\n            class=\"b-menu-item-list\"\n            role=\"menu\"\n            @keydown.down=\"focusNext\"\n            @keydown.up=\"focusPrevious\"\n            @keydown.esc=\"closeMenu\"\n            @keydown.tab=\"closeMenu\"\n        >\n            <li\n                v-for=\"(item, index) in computedData\"\n                :key=\"`menu-item-${index}`\"\n                class=\"b-menu-item-list__item\"\n                role=\"none\"\n                @keydown.right=\"focusRight(item, index)\"\n                @keydown.left=\"focusLeft()\"\n            >\n                <menu-item\n                    :text=\"item.text\"\n                    :handler=\"!item.items?.length ? item.handler : () => null\"\n                    :secondary-text=\"item.secondaryText\"\n                    :icon=\"item.icon\"\n                    :chevron=\"!!item.items?.length\"\n                    :disabled=\"item.disabled\"\n                    :critical=\"item.critical\"\n                    :indent=\"item.indent\"\n                    :tabindex=\"index === subMenuFocusedIndex ? '0' : '-1'\"\n                    :aria-haspopup=\"!!item.items?.length\"\n                    :aria-expanded=\"showSubMenu && visibleSubMenuIndex === index\"\n                    @click=\"toggleMenu(item, index)\"\n                />\n                <sub-menu-item-list\n                    v-if=\"item.items?.length && showSubMenu && visibleSubMenuIndex === index\"\n                    ref=\"subMenuItemListRef\"\n                    :items=\"item.items\"\n                    :title=\"item.text\"\n                    @back=\"onBackButton\"\n                    @close=\"closeMenu\"\n                />\n            </li>\n        </ul>\n    </menu-list-container>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoMenuItem, MenuItem } from '../menu-item';\n    import { BentoMenuEvent } from '../../menu.types';\n    import MenuListContainer from '../menu-list-container/menu-list-container.vue';\n    import SubMenuItemList from '../sub-menu-item-list/sub-menu-item-list.vue';\n\n    /**\n     * MenuItem list to be used in the Menu component. For internal use only.\n     */\n    export default defineComponent({\n        name: 'menu-item-list',\n        components: { MenuItem, MenuListContainer, SubMenuItemList },\n        inheritAttrs: false,\n        props: {\n            /**\n             * The data to be displayed in the list\n             */\n            data: {\n                type: Array as PropType<BentoMenuItem[]>,\n                required: true,\n            },\n            /**\n             * Displays the menu-items of the list in the indent variant. Only applies to elements that don't have an icon to their left.\n             */\n            indentItems: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The id of the list. Required for accessibility reasons.\n             */\n            id: {\n                type: String,\n                required: true,\n            },\n            /**\n             * If set to true, focuses the last item on the list instead of the first. Used for accessibility purposes when the menu is opened with the 'up' arrow key.\n             */\n            focusLastElement: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: [BentoMenuEvent.CLOSE],\n        setup(props, { emit }) {\n            const menuItemListRef = ref(null);\n            const menuItemListWrapperRef = ref(null);\n            const subMenuItemListRef = ref(null);\n            const showSubMenu = ref(false);\n            const visibleSubMenuIndex = ref(null);\n            const focusedIndex = ref(props.focusLastElement ? props.data.length - 1 : 0);\n            const subMenuFocusedIndex = ref(0);\n            const numberOfItems = ref(props.data.length - 1);\n            const hasMenuItemsWithIcon = computed(() => props.data.some(el => el.icon));\n\n            const computedData = computed(() => {\n                if (props.indentItems || hasMenuItemsWithIcon.value) {\n                    return props.data.map(el => {\n                        let indent = false;\n                        if (!el.icon) {\n                            indent = true;\n                        }\n                        return {\n                            ...el,\n                            // eslint-disable-next-line no-param-reassign\n                            indent,\n                        };\n                    });\n                }\n                return props.data;\n            });\n\n            const focusItem = () => menuItemListRef.value?.children[focusedIndex.value]?.children[0]?.focus();\n\n            const closeMenu = () => emit(BentoMenuEvent.CLOSE);\n\n            const toggleMenu = async (item: BentoMenuItem, index: number) => {\n                if (item.items) {\n                    visibleSubMenuIndex.value = index;\n                    showSubMenu.value = true;\n                } else {\n                    visibleSubMenuIndex.value = index;\n                    showSubMenu.value = false;\n                    closeMenu();\n                }\n            };\n\n            const focusPrevious = () => {\n                if (focusedIndex.value > 0) {\n                    focusedIndex.value -= 1;\n                    if (computedData.value[focusedIndex.value].disabled) {\n                        focusPrevious();\n                    }\n                } else {\n                    focusedIndex.value = numberOfItems.value;\n                }\n                focusItem();\n            };\n\n            const focusNext = () => {\n                if (focusedIndex.value < numberOfItems.value) {\n                    focusedIndex.value += 1;\n                    if (computedData.value[focusedIndex.value].disabled) {\n                        focusNext();\n                    }\n                } else {\n                    focusedIndex.value = 0;\n                }\n                focusItem();\n            };\n\n            const focusRight = (item, index) => {\n                if (item?.items?.length) {\n                    visibleSubMenuIndex.value = index;\n                    showSubMenu.value = true;\n                }\n            };\n\n            const focusLeft = () => {\n                if (visibleSubMenuIndex.value && showSubMenu.value) {\n                    visibleSubMenuIndex.value = null;\n                    showSubMenu.value = false;\n                }\n            };\n\n            const onBackButton = () => {\n                showSubMenu.value = false;\n                visibleSubMenuIndex.value = null;\n                // Focus the right element\n                focusItem();\n            };\n\n            const menuHeight = computed(() => menuItemListWrapperRef?.value?.$el.offsetHeight);\n\n            const subMenuHeight = computed(() => subMenuItemListRef?.value?.[0]?.$el?.offsetHeight);\n\n            const computedHeight = computed(() => {\n                if (showSubMenu.value) {\n                    return `${subMenuHeight.value}px`;\n                }\n                return `${menuHeight.value}px`;\n            });\n\n            return {\n                // Values\n                menuItemListRef,\n                menuItemListWrapperRef,\n                subMenuItemListRef,\n\n                computedData,\n                computedHeight,\n\n                focusedIndex,\n                subMenuFocusedIndex,\n\n                showSubMenu,\n                visibleSubMenuIndex,\n\n                // Methods\n                toggleMenu,\n                closeMenu,\n                focusPrevious,\n                focusNext,\n                focusRight,\n                focusLeft,\n                onBackButton,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./menu-item-list.scss\" />\n","<template>\n    <div\n        v-bento-click-outside-directive=\"closeMenu\"\n        class=\"b-menu\"\n        @keydown.down=\"onKeyDown\"\n        @keydown.up=\"onKeyUp\"\n        @keydown.esc=\"closeMenu\"\n    >\n        <bento-button\n            ref=\"menuButtonRef\"\n            aria-haspopup=\"true\"\n            v-bind=\"button\"\n            :aria-expanded=\"showMenu\"\n            :aria-controls=\"menuId\"\n            @click=\"toggleShowMenu\"\n        >\n            <template #iconLeft>\n                <slot>\n                    <options-vertical-icon :title=\"$t('menuButton')\" />\n                </slot>\n            </template>\n        </bento-button>\n        <bento-popover\n            v-if=\"menuButtonRef\"\n            :open=\"showMenu\"\n            class=\"b-menu__popover\"\n            :style=\"computedMenuWidth\"\n            :target-element=\"menuButtonRef\"\n            :position=\"menuPosition\"\n            :fixed-positioning=\"menuFixedPositioning\"\n            without-space\n        >\n            <menu-item-list :id=\"menuId\" :data=\"data\" :focus-last-element=\"isLastElementFocused\" @close=\"closeMenu\" />\n        </bento-popover>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { BentoClickOutsideDirective } from '@/directives';\n    import { BentoButton, BentoButtonVariant } from '@/components/button';\n    import { BentoPopover, BentoPopoverPositions } from '@/components/popover';\n    import { BentoMenuItem, MenuItemList } from './components';\n    import { BentoMenuButtonProps } from './menu.types';\n    import messages from './messages.json';\n\n    /**\n     * Menu component to render a series of buttons. Csan render nested submenus.\n     *\n     * @example\n     * import { BentoMenu } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoMenu },\n     *     template: `\n     *          <bento-menu\n     *             :data=[\n     *                 { text: 'Menu item text', handler: () => { some code here } },\n     *                 { text: 'Another menu item text', handler: () => { some other code here }, critical: true }\n     *              ]\n     *           />\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-menu',\n        components: { BentoButton, BentoPopover, MenuItemList, OptionsVerticalIcon },\n        directives: { BentoClickOutsideDirective },\n        inheritAttrs: false,\n        props: {\n            /**\n             * The data to be displayed in the list\n             */\n            data: {\n                type: Array as PropType<BentoMenuItem[]>,\n                required: true,\n            },\n\n            /**\n             * The position of where the menu should open.\n             * @see BentoPopoverPositions\n             */\n            menuPosition: {\n                type: String as PropType<BentoPopoverPositions>,\n                default: BentoPopoverPositions.BOTTOM_START,\n                validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n            },\n\n            /**\n             * Instructs the menu popover to be visible outside of the containing container.\n             * https://popper.js.org/docs/v2/constructors/#strategy\n             */\n            menuFixedPositioning: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Sets a custom width for the menu popover.\n             */\n            menuWidth: {\n                type: Number,\n                default: null,\n            },\n            /**\n             * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n             */\n            button: {\n                type: Object as PropType<BentoMenuButtonProps>,\n                default: () => ({\n                    variant: BentoButtonVariant.SECONDARY,\n                }),\n            },\n        },\n        setup(props) {\n            const menuButtonRef = ref(null);\n            const showMenu = ref(false);\n            const isLastElementFocused = ref(false);\n            const menuId = generateUid('menu');\n\n            const computedMenuWidth = computed(() => (props.menuWidth ? { width: `${props.menuWidth}px` } : null));\n\n            const openMenu = () => {\n                showMenu.value = true;\n            };\n\n            const closeMenu = () => {\n                if (showMenu.value) {\n                    showMenu.value = false;\n                    menuButtonRef.value.$el.focus();\n                }\n            };\n\n            const toggleShowMenu = (e: MouseEvent) => {\n                e.stopPropagation();\n                if (!showMenu.value) {\n                    openMenu();\n                } else {\n                    closeMenu();\n                }\n            };\n\n            const onKeyDown = () => {\n                isLastElementFocused.value = false;\n                openMenu();\n            };\n\n            const onKeyUp = () => {\n                isLastElementFocused.value = true;\n                openMenu();\n            };\n\n            return {\n                // Enums\n                BentoButtonVariant,\n                BentoPopoverPositions,\n\n                // Values\n                menuButtonRef,\n                menuId,\n                showMenu,\n                computedMenuWidth,\n                isLastElementFocused,\n\n                // Methods\n                onKeyDown,\n                onKeyUp,\n                closeMenu,\n                toggleShowMenu,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./menu.scss\" />\n"],"names":["uuid","_sfc_main$5","_sfc_main$4","defineComponent","BaseButton","BentoTypography","ChevronRightIcon","BentoBaseButtonEvent","props","emit","conditionalClasses","computed","BentoTypographyElement","BentoTypographyVariant","BentoMenuEvent","BentoMenuEvent2","_sfc_main$3","_sfc_main$2","messages","MenuItem","MenuListContainer","subMenuItemListRefLocal","ref","subMenuFocusedIndex","numberOfItems","closeMenu","onBackButton","computedItems","items","_a","el","ChevronLeftIcon","focusItem","_e","_d","_c","_b","onMounted","focusPrevious","focusNext","_sfc_main$1","SubMenuItemList","menuItemListRef","menuItemListWrapperRef","subMenuItemListRef","showSubMenu","visibleSubMenuIndex","focusedIndex","hasMenuItemsWithIcon","computedData","indent","toggleMenu","item","index","focusRight","focusLeft","menuHeight","subMenuHeight","computedHeight","_sfc_main","BentoButton","BentoPopover","MenuItemList","OptionsVerticalIcon","BentoClickOutsideDirective","BentoPopoverPositions","value","BentoButtonVariant","menuButtonRef","showMenu","isLastElementFocused","menuId","generateUid","computedMenuWidth","openMenu","e"],"mappings":"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","x_google_ignoreList":[0]}