@adyen/bento-vue3 1.56.2 → 1.57.0

package/dist/chunks/index.BzJQl-2M.js

@@ -1,386 +0,0 @@
-import { onMounted as T, nextTick as M, watch as O, unref as $, getCurrentScope as I, onScopeDispose as R, getCurrentInstance as N, ref as v, computed as p, watchEffect as j } from "vue";
-function x(e) {
-  return I() ? (R(e), !0) : !1;
-}
-function w(e) {
-  return typeof e == "function" ? e() : $(e);
-}
-const L = typeof window < "u" && typeof document < "u";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const C = (e) => e != null, P = Object.prototype.toString, B = (e) => P.call(e) === "[object Object]", W = () => {
-};
-function z(e, t) {
-  function n(...o) {
-    return new Promise((s, i) => {
-      Promise.resolve(e(() => t.apply(this, o), { fn: t, thisArg: this, args: o })).then(s).catch(i);
-    });
-  }
-  return n;
-}
-const F = (e) => e();
-function V(e, t = {}) {
-  let n, o, s = W;
-  const i = (c) => {
-    clearTimeout(c), s(), s = W;
-  };
-  return (c) => {
-    const d = w(e), a = w(t.maxWait);
-    return n && i(n), d <= 0 || a !== void 0 && a <= 0 ? (o && (i(o), o = null), Promise.resolve(c())) : new Promise((r, u) => {
-      s = t.rejectOnCancel ? u : r, a && !o && (o = setTimeout(() => {
-        n && i(n), o = null, r(c());
-      }, a)), n = setTimeout(() => {
-        o && i(o), o = null, r(c());
-      }, d);
-    });
-  };
-}
-function H(e, t) {
-  var n;
-  if (typeof e == "number")
-    return e + t;
-  const o = ((n = e.match(/^-?\d+\.?\d*/)) == null ? void 0 : n[0]) || "", s = e.slice(o.length), i = Number.parseFloat(o) + t;
-  return Number.isNaN(i) ? e : i + s;
-}
-function D(e) {
-  return N();
-}
-function G(e, t, n = {}) {
-  const {
-    eventFilter: o = F,
-    ...s
-  } = n;
-  return O(
-    e,
-    z(
-      o,
-      t
-    ),
-    s
-  );
-}
-function _(e, t = !0, n) {
-  D() ? T(e, n) : t ? e() : M(e);
-}
-function Z(e, t, n = {}) {
-  const {
-    debounce: o = 0,
-    maxWait: s = void 0,
-    ...i
-  } = n;
-  return G(
-    e,
-    t,
-    {
-      ...i,
-      eventFilter: V(o, { maxWait: s })
-    }
-  );
-}
-const m = L ? window : void 0;
-function b(e) {
-  var t;
-  const n = w(e);
-  return (t = n == null ? void 0 : n.$el) != null ? t : n;
-}
-function g(...e) {
-  let t, n, o, s;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([n, o, s] = e, t = m) : [t, n, o, s] = e, !t)
-    return W;
-  Array.isArray(n) || (n = [n]), Array.isArray(o) || (o = [o]);
-  const i = [], l = () => {
-    i.forEach((r) => r()), i.length = 0;
-  }, c = (r, u, f, h) => (r.addEventListener(u, f, h), () => r.removeEventListener(u, f, h)), d = O(
-    () => [b(t), w(s)],
-    ([r, u]) => {
-      if (l(), !r)
-        return;
-      const f = B(u) ? { ...u } : u;
-      i.push(
-        ...n.flatMap((h) => o.map((y) => c(r, h, y, f)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), a = () => {
-    d(), l();
-  };
-  return x(a), a;
-}
-function U(e) {
-  return typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
-}
-function ee(...e) {
-  let t, n, o = {};
-  e.length === 3 ? (t = e[0], n = e[1], o = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, n = e[0], o = e[1]) : (t = e[0], n = e[1]) : (t = !0, n = e[0]);
-  const {
-    target: s = m,
-    eventName: i = "keydown",
-    passive: l = !1,
-    dedupe: c = !1
-  } = o, d = U(t);
-  return g(s, i, (r) => {
-    r.repeat && w(c) || d(r) && n(r);
-  }, l);
-}
-function Y() {
-  const e = v(!1), t = N();
-  return t && T(() => {
-    e.value = !0;
-  }, t), e;
-}
-function A(e) {
-  const t = Y();
-  return p(() => (t.value, !!e()));
-}
-function q(e, t, n = {}) {
-  const { window: o = m, ...s } = n;
-  let i;
-  const l = A(() => o && "MutationObserver" in o), c = () => {
-    i && (i.disconnect(), i = void 0);
-  }, d = p(() => {
-    const f = w(e), h = (Array.isArray(f) ? f : [f]).map(b).filter(C);
-    return new Set(h);
-  }), a = O(
-    () => d.value,
-    (f) => {
-      c(), l.value && f.size && (i = new MutationObserver(t), f.forEach((h) => i.observe(h, s)));
-    },
-    { immediate: !0, flush: "post" }
-  ), r = () => i == null ? void 0 : i.takeRecords(), u = () => {
-    a(), c();
-  };
-  return x(u), {
-    isSupported: l,
-    stop: u,
-    takeRecords: r
-  };
-}
-function X(e = {}) {
-  var t;
-  const {
-    window: n = m,
-    deep: o = !0,
-    triggerOnRemoval: s = !1
-  } = e, i = (t = e.document) != null ? t : n == null ? void 0 : n.document, l = () => {
-    var a;
-    let r = i == null ? void 0 : i.activeElement;
-    if (o)
-      for (; r != null && r.shadowRoot; )
-        r = (a = r == null ? void 0 : r.shadowRoot) == null ? void 0 : a.activeElement;
-    return r;
-  }, c = v(), d = () => {
-    c.value = l();
-  };
-  return n && (g(n, "blur", (a) => {
-    a.relatedTarget === null && d();
-  }, !0), g(n, "focus", d, !0)), s && q(i, (a) => {
-    a.filter((r) => r.removedNodes.length).map((r) => Array.from(r.removedNodes)).flat().forEach((r) => {
-      r === c.value && d();
-    });
-  }, {
-    childList: !0,
-    subtree: !0
-  }), d(), c;
-}
-function E(e, t = {}) {
-  const { window: n = m } = t, o = A(() => n && "matchMedia" in n && typeof n.matchMedia == "function");
-  let s;
-  const i = v(!1), l = (a) => {
-    i.value = a.matches;
-  }, c = () => {
-    s && ("removeEventListener" in s ? s.removeEventListener("change", l) : s.removeListener(l));
-  }, d = j(() => {
-    o.value && (c(), s = n.matchMedia(w(e)), "addEventListener" in s ? s.addEventListener("change", l) : s.addListener(l), i.value = s.matches);
-  });
-  return x(() => {
-    d(), c(), s = void 0;
-  }), i;
-}
-function te(e, t = {}) {
-  function n(r, u) {
-    let f = w(e[w(r)]);
-    return u != null && (f = H(f, u)), typeof f == "number" && (f = `${f}px`), f;
-  }
-  const { window: o = m, strategy: s = "min-width" } = t;
-  function i(r) {
-    return o ? o.matchMedia(r).matches : !1;
-  }
-  const l = (r) => E(() => `(min-width: ${n(r)})`, t), c = (r) => E(() => `(max-width: ${n(r)})`, t), d = Object.keys(e).reduce((r, u) => (Object.defineProperty(r, u, {
-    get: () => s === "min-width" ? l(u) : c(u),
-    enumerable: !0,
-    configurable: !0
-  }), r), {});
-  function a() {
-    const r = Object.keys(e).map((u) => [u, l(u)]);
-    return p(() => r.filter(([, u]) => u.value).map(([u]) => u));
-  }
-  return Object.assign(d, {
-    greaterOrEqual: l,
-    smallerOrEqual: c,
-    greater(r) {
-      return E(() => `(min-width: ${n(r, 0.1)})`, t);
-    },
-    smaller(r) {
-      return E(() => `(max-width: ${n(r, -0.1)})`, t);
-    },
-    between(r, u) {
-      return E(() => `(min-width: ${n(r)}) and (max-width: ${n(u, -0.1)})`, t);
-    },
-    isGreater(r) {
-      return i(`(min-width: ${n(r, 0.1)})`);
-    },
-    isGreaterOrEqual(r) {
-      return i(`(min-width: ${n(r)})`);
-    },
-    isSmaller(r) {
-      return i(`(max-width: ${n(r, -0.1)})`);
-    },
-    isSmallerOrEqual(r) {
-      return i(`(max-width: ${n(r)})`);
-    },
-    isInBetween(r, u) {
-      return i(`(min-width: ${n(r)}) and (max-width: ${n(u, -0.1)})`);
-    },
-    current: a,
-    active() {
-      const r = a();
-      return p(() => r.value.length === 0 ? "" : r.value.at(-1));
-    }
-  });
-}
-function k(e, t, n = {}) {
-  const { window: o = m, ...s } = n;
-  let i;
-  const l = A(() => o && "ResizeObserver" in o), c = () => {
-    i && (i.disconnect(), i = void 0);
-  }, d = p(() => {
-    const u = w(e);
-    return Array.isArray(u) ? u.map((f) => b(f)) : [b(u)];
-  }), a = O(
-    d,
-    (u) => {
-      if (c(), l.value && o) {
-        i = new ResizeObserver(t);
-        for (const f of u)
-          f && i.observe(f, s);
-      }
-    },
-    { immediate: !0, flush: "post" }
-  ), r = () => {
-    c(), a();
-  };
-  return x(r), {
-    isSupported: l,
-    stop: r
-  };
-}
-function ne(e, t = { width: 0, height: 0 }, n = {}) {
-  const { window: o = m, box: s = "content-box" } = n, i = p(() => {
-    var u, f;
-    return (f = (u = b(e)) == null ? void 0 : u.namespaceURI) == null ? void 0 : f.includes("svg");
-  }), l = v(t.width), c = v(t.height), { stop: d } = k(
-    e,
-    ([u]) => {
-      const f = s === "border-box" ? u.borderBoxSize : s === "content-box" ? u.contentBoxSize : u.devicePixelContentBoxSize;
-      if (o && i.value) {
-        const h = b(e);
-        if (h) {
-          const y = h.getBoundingClientRect();
-          l.value = y.width, c.value = y.height;
-        }
-      } else if (f) {
-        const h = Array.isArray(f) ? f : [f];
-        l.value = h.reduce((y, { inlineSize: S }) => y + S, 0), c.value = h.reduce((y, { blockSize: S }) => y + S, 0);
-      } else
-        l.value = u.contentRect.width, c.value = u.contentRect.height;
-    },
-    n
-  );
-  _(() => {
-    const u = b(e);
-    u && (l.value = "offsetWidth" in u ? u.offsetWidth : t.width, c.value = "offsetHeight" in u ? u.offsetHeight : t.height);
-  });
-  const a = O(
-    () => b(e),
-    (u) => {
-      l.value = u ? t.width : 0, c.value = u ? t.height : 0;
-    }
-  );
-  function r() {
-    d(), a();
-  }
-  return {
-    width: l,
-    height: c,
-    stop: r
-  };
-}
-const K = "focusin", Q = "focusout";
-function re(e, t = {}) {
-  const { window: n = m } = t, o = p(() => b(e)), s = v(!1), i = p(() => s.value), l = X(t);
-  return !n || !l.value ? { focused: i } : (g(o, K, () => s.value = !0), g(o, Q, () => s.value = !1), { focused: i });
-}
-function oe(e = {}) {
-  const { window: t = m, behavior: n = "auto" } = e;
-  if (!t)
-    return {
-      x: v(0),
-      y: v(0)
-    };
-  const o = v(t.scrollX), s = v(t.scrollY), i = p({
-    get() {
-      return o.value;
-    },
-    set(c) {
-      scrollTo({ left: c, behavior: n });
-    }
-  }), l = p({
-    get() {
-      return s.value;
-    },
-    set(c) {
-      scrollTo({ top: c, behavior: n });
-    }
-  });
-  return g(
-    t,
-    "scroll",
-    () => {
-      o.value = t.scrollX, s.value = t.scrollY;
-    },
-    {
-      capture: !1,
-      passive: !0
-    }
-  ), { x: i, y: l };
-}
-function ie(e = {}) {
-  const {
-    window: t = m,
-    initialWidth: n = Number.POSITIVE_INFINITY,
-    initialHeight: o = Number.POSITIVE_INFINITY,
-    listenOrientation: s = !0,
-    includeScrollbar: i = !0,
-    type: l = "inner"
-  } = e, c = v(n), d = v(o), a = () => {
-    t && (l === "outer" ? (c.value = t.outerWidth, d.value = t.outerHeight) : i ? (c.value = t.innerWidth, d.value = t.innerHeight) : (c.value = t.document.documentElement.clientWidth, d.value = t.document.documentElement.clientHeight));
-  };
-  if (a(), _(a), g("resize", a, { passive: !0 }), s) {
-    const r = E("(orientation: portrait)");
-    O(r, () => a());
-  }
-  return { width: c, height: d };
-}
-export {
-  ne as a,
-  k as b,
-  oe as c,
-  re as d,
-  E as e,
-  te as f,
-  q as g,
-  X as h,
-  ee as o,
-  ie as u,
-  Z as w
-};
-//# sourceMappingURL=index.BzJQl-2M.js.map

package/dist/chunks/inspector.types.D5QBC3-G.js

@@ -1,188 +0,0 @@
-import { defineComponent as P, ref as r, computed as h, watch as R, createElementBlock as y, openBlock as v, normalizeClass as V, createElementVNode as a, createVNode as s, renderSlot as S, Transition as A, withCtx as c, createCommentVNode as B, withKeys as W, unref as t, Fragment as U, createTextVNode as T, toDisplayString as C, createBlock as F, nextTick as j } from "vue";
-import { d as q, B as J } from "./typography.DN5eC5ch.js";
-import { B as E } from "./button.BHZgsGkp.js";
-import { B as Y } from "./loading-indicator.DEepb9Wl.js";
-import { B as G, s as H, g as Q, a as X, f as Z } from "./focus-trap.D9cfQpl7.js";
-import { E as ee } from "./expand.DusW7F7p.js";
-import { C as te } from "./cross.CbLEjiVy.js";
-import { g as ne } from "./generate-uid.NJ8tVoha.js";
-import { u as oe } from "./i18n.B6g5VX0q.js";
-import { a as ae, b as se } from "./index.BzJQl-2M.js";
-import { _ as ie } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/inspector.css";
-const I = {
-  "en-US": {
-    close: "Close",
-    expand: "Expand",
-    inspector: "Inspector",
-    returnToMainContent: "Return to main content (Ctrl+Shift+S)",
-    returnToMainContentDescription: "You can use Ctrl + Shift + S to navigate between the inspector and page sections."
-  },
-  "ja-JP": {
-    close: "閉じる",
-    expand: "展開"
-  },
-  "pt-BR": {
-    close: "Fechar",
-    expand: "Expandir"
-  }
-}, re = { class: "b-inspector__page" }, ce = ["aria-label"], le = { class: "b-inspector__container" }, pe = { class: "b-inspector__header" }, de = ["id"], ue = { class: "b-inspector__icons" }, ve = { class: "b-inspector__content" }, fe = { i18n: { messages: I } }, me = /* @__PURE__ */ P({
-  ...fe,
-  __name: "inspector",
-  props: {
-    activePage: { default: "" },
-    expandable: { type: Boolean, default: !1 },
-    isOpen: { type: Boolean, default: !1 },
-    loading: { type: Boolean, default: !1 },
-    size: { default: "small" },
-    title: {}
-  },
-  emits: ["update:is-open", "update:active-page", "expand"],
-  setup($, { emit: z }) {
-    const o = $, f = z, { t: l } = oe({ messages: I }), k = ne("returnToMainContentDescription"), m = r(null), p = r(null), L = r(null), i = r(null), _ = r(null), d = r(!1), { width: w } = ae(m), M = h(() => {
-      const e = o.size === "small" ? 575 : 750;
-      return w.value > 0 && w.value <= e;
-    }), D = h(() => ({
-      [`b-inspector--${o.size}`]: !0,
-      "b-inspector--is-compact": M.value
-    })), K = h(() => `${l("inspector")}, ${o.title}`), g = async () => {
-      o.isOpen ? (i.value = document.activeElement, await j(), H(p.value, i.value)) : u(i.value);
-    }, N = (e) => {
-      if (d.value)
-        return;
-      const n = e.shiftKey ? -1 : 1, b = Q(n, p.value);
-      X() === b && (e.preventDefault(), _.value = document.activeElement, u(i.value), f("update:active-page", void 0));
-    }, O = (e) => {
-      const n = e.shiftKey && e.ctrlKey && e.key === "S";
-      o.isOpen && !d.value && n && x();
-    }, x = () => {
-      Z(p.value) ? (_.value = document.activeElement, u(i.value), f("update:active-page", void 0)) : (i.value = document.activeElement, u(_.value));
-    }, u = (e) => {
-      e && (e == null || e.focus(), document.activeElement !== e && u(e.parentElement));
-    };
-    return R(
-      () => o.activePage,
-      () => {
-        o.activePage && g();
-      }
-    ), se(p, (e) => {
-      const n = e[0];
-      d.value = m.value.clientWidth === n.contentRect.width;
-    }), o.activePage || q(
-      'BentoInspector "active-page" as optional',
-      `Make sure to set the "active-page" prop and keep it in sync with "update:active-page".
-            "active-page" prop will be required in the next version`,
-      "2.0.0"
-    ), (e, n) => (v(), y("div", {
-      ref_key: "wrapper",
-      ref: m,
-      class: V(["b-inspector", D.value]),
-      onKeydown: O
-    }, [
-      a("div", {
-        ref_key: "page",
-        ref: L,
-        class: "b-inspector__page-wrapper"
-      }, [
-        a("div", re, [
-          S(e.$slots, "page", {}, void 0, !0)
-        ])
-      ], 512),
-      s(A, {
-        name: "b-inspector__animation",
-        mode: "out-in",
-        onBeforeEnter: g,
-        onAfterLeave: g
-      }, {
-        default: c(() => [
-          e.isOpen ? (v(), y("aside", {
-            key: 0,
-            ref_key: "inspector",
-            ref: p,
-            class: "b-inspector__container-wrapper",
-            "aria-label": K.value,
-            onKeydown: W(N, ["tab"])
-          }, [
-            s(t(G), {
-              disabled: !d.value
-            }, {
-              default: c(() => [
-                a("div", le, [
-                  a("div", pe, [
-                    d.value ? B("", !0) : (v(), y(U, { key: 0 }, [
-                      s(t(E), {
-                        class: "b-inspector__return-content",
-                        variant: "secondary",
-                        condensed: "",
-                        "aria-describedby": t(k),
-                        onClick: x
-                      }, {
-                        default: c(() => [
-                          T(C(t(l)("returnToMainContent")), 1)
-                        ]),
-                        _: 1
-                      }, 8, ["aria-describedby"]),
-                      a("span", {
-                        id: t(k),
-                        class: "b-inspector__return-content-description"
-                      }, C(t(l)("returnToMainContentDescription")), 9, de)
-                    ], 64)),
-                    s(t(J), {
-                      el: "h2",
-                      variant: "title",
-                      class: "b-inspector__title"
-                    }, {
-                      default: c(() => [
-                        T(C(e.title), 1)
-                      ]),
-                      _: 1
-                    }),
-                    a("div", ue, [
-                      e.expandable ? (v(), F(t(E), {
-                        key: 0,
-                        variant: "tertiary",
-                        onClick: n[0] || (n[0] = (b) => f("expand"))
-                      }, {
-                        iconLeft: c(() => [
-                          s(t(ee), {
-                            "svg-title": t(l)("expand")
-                          }, null, 8, ["svg-title"])
-                        ]),
-                        _: 1
-                      })) : B("", !0),
-                      s(t(E), {
-                        variant: "tertiary",
-                        onClick: n[1] || (n[1] = (b) => f("update:is-open", !1))
-                      }, {
-                        iconLeft: c(() => [
-                          s(t(te), {
-                            "svg-title": t(l)("close")
-                          }, null, 8, ["svg-title"])
-                        ]),
-                        _: 1
-                      })
-                    ])
-                  ]),
-                  a("div", ve, [
-                    e.loading ? (v(), F(t(Y), {
-                      key: 0,
-                      large: "",
-                      class: "b-inspector__loading-indicator"
-                    })) : S(e.$slots, "content", { key: 1 }, void 0, !0)
-                  ])
-                ])
-              ]),
-              _: 3
-            }, 8, ["disabled"])
-          ], 40, ce)) : B("", !0)
-        ]),
-        _: 3
-      })
-    ], 34));
-  }
-}), Se = /* @__PURE__ */ ie(me, [["__scopeId", "data-v-9d52565a"]]), Te = ["small", "large"];
-export {
-  Te as B,
-  Se as i
-};
-//# sourceMappingURL=inspector.types.D5QBC3-G.js.map

package/dist/chunks/inspector.types.D5QBC3-G.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inspector.types.D5QBC3-G.js","sources":["../../../vue2/src/components/inspector/inspector.vue","../../../vue2/src/components/inspector/inspector.types.ts"],"sourcesContent":["<template>\n    <div ref=\"wrapper\" class=\"b-inspector\" :class=\"conditionalClass\" @keydown=\"handleSectionFocus\">\n        <div ref=\"page\" class=\"b-inspector__page-wrapper\">\n            <div class=\"b-inspector__page\">\n                <slot name=\"page\" />\n            </div>\n        </div>\n        <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n            <aside\n                v-if=\"isOpen\"\n                ref=\"inspector\"\n                class=\"b-inspector__container-wrapper\"\n                :aria-label=\"inspectorAriaLabel\"\n                @keydown.tab=\"handleTabNavigation\"\n            >\n                <bento-focus-trap :disabled=\"!isFullWidthInspector\">\n                    <div class=\"b-inspector__container\">\n                        <div class=\"b-inspector__header\">\n                            <template v-if=\"!isFullWidthInspector\">\n                                <bento-button\n                                    class=\"b-inspector__return-content\"\n                                    variant=\"secondary\"\n                                    condensed\n                                    :aria-describedby=\"returnToMainContentDescriptionId\"\n                                    @click=\"moveFocusBetweenSections\"\n                                >\n                                    {{ t('returnToMainContent') }}\n                                </bento-button>\n                                <span\n                                    :id=\"returnToMainContentDescriptionId\"\n                                    class=\"b-inspector__return-content-description\"\n                                    >{{ t('returnToMainContentDescription') }}</span\n                                >\n                            </template>\n                            <bento-typography el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n                                {{ title }}\n                            </bento-typography>\n                            <div class=\"b-inspector__icons\">\n                                <bento-button v-if=\"expandable\" variant=\"tertiary\" @click=\"emit('expand')\">\n                                    <template #iconLeft><expand-icon :svg-title=\"t('expand')\"></expand-icon></template>\n                                </bento-button>\n                                <bento-button variant=\"tertiary\" @click=\"emit('update:is-open', false)\">\n                                    <template #iconLeft><cross-icon :svg-title=\"t('close')\"></cross-icon></template>\n                                </bento-button>\n                            </div>\n                        </div>\n                        <div class=\"b-inspector__content\">\n                            <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n                            <slot v-else name=\"content\" />\n                        </div>\n                    </div>\n                </bento-focus-trap>\n            </aside>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { getNextFocusableElement } from '@/utils/ts/focus-trap.utils';\n    import { useElementSize, useResizeObserver } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n    import { BentoInspectorSize } from './inspector.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * ID of the current active inspector page\n             */\n            activePage?: string;\n\n            /**\n             * Shows the Expand icon in the inspector\n             */\n            expandable?: boolean;\n\n            /**\n             * Opens and closes the inspector\n             */\n            isOpen?: boolean;\n\n            /**\n             * Shows loading indicator for the content\n             */\n            loading?: boolean;\n\n            /**\n             * Determines the size of the inspector\n             */\n            size?: BentoInspectorSize;\n\n            /**\n             * The title of the component\n             */\n            title: string;\n        }>(),\n        {\n            activePage: '',\n            expandable: false,\n            isOpen: false,\n            loading: false,\n            size: 'small',\n        }\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Emits update to keep isOpen prop in sync\n         */\n        (e: 'update:is-open', value: boolean): void;\n        /**\n         * Emits update to keep activePage prop in sync\n         */\n        (e: 'update:active-page', value: string): void;\n        /**\n         * Emits event when user click expand button\n         */\n        (e: 'expand'): void;\n    }>();\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const returnToMainContentDescriptionId = generateUid('returnToMainContentDescription');\n    const wrapper = ref<HTMLElement>(null);\n    const inspector = ref<HTMLElement>(null);\n    const page = ref<HTMLElement>(null);\n    const pageLastFocusedElement = ref<HTMLElement>(null);\n    const inspectorLastFocusedElement = ref<HTMLElement>(null);\n    const isFullWidthInspector = ref(false);\n\n    const { width: wrapperWidth } = useElementSize(wrapper);\n\n    const isCompact = computed(() => {\n        const threshold = props.size === 'small' ? 575 : 750;\n        return wrapperWidth.value > 0 && wrapperWidth.value <= threshold;\n    });\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n        [`b-inspector--is-compact`]: isCompact.value,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            pageLastFocusedElement.value = document.activeElement as HTMLElement;\n            await nextTick();\n            moveFocusInside(inspector.value, pageLastFocusedElement.value);\n        } else {\n            // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n            // To be reviewed after LevelAccess revision\n            focusElement(pageLastFocusedElement.value);\n        }\n    };\n\n    const handleTabNavigation = event => {\n        if (isFullWidthInspector.value) {\n            return;\n        }\n        const direction = event.shiftKey ? -1 : 1;\n        const focusableEl = getNextFocusableElement(direction, inspector.value);\n        // If the nextfocusableEl is the same as the activeElement that means it's the last focusable element\n        // inside the inspector, so the focus is moved back to the last focused element on the page\n        if (getActiveElement() === focusableEl) {\n            event.preventDefault();\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(pageLastFocusedElement.value);\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        }\n    };\n\n    const handleSectionFocus = event => {\n        const sectionShortcut = event.shiftKey && event.ctrlKey && event.key === 'S';\n        if (props.isOpen && !isFullWidthInspector.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(pageLastFocusedElement.value);\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\n            pageLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(inspectorLastFocusedElement.value);\n        }\n    };\n\n    const focusElement = (element: HTMLElement) => {\n        if (!element) {\n            return;\n        }\n        element?.focus();\n        if (document.activeElement !== element) {\n            focusElement(element.parentElement);\n        }\n    };\n\n    watch(\n        () => props.activePage,\n        () => {\n            if (props.activePage) {\n                setFocus();\n            }\n        }\n    );\n\n    useResizeObserver(inspector, entries => {\n        const entry = entries[0];\n\n        isFullWidthInspector.value = wrapper.value.clientWidth === entry.contentRect.width;\n    });\n\n    if (!props.activePage) {\n        deprecate(\n            'BentoInspector \"active-page\" as optional',\n            `Make sure to set the \"active-page\" prop and keep it in sync with \"update:active-page\".\n            \"active-page\" prop will be required in the next version`,\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n     *\n     * @example\n     * import { BentoInspector } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoInspector },\n     *     template: `\n     *          <bento-inspector\n     *                  title=\"Inspector\"\n     *                  size=\"large\"\n     *                  :is-open=\"isOpen\"\n     *                  :active-page=\"activePage\"\n     *                  expandable\n     *                  @update:is-open=\"isOpen = $event\"\n     *                  @update:active-page=\"activePage = $event\"\n     *          >\n     *              <template #page>Content of the page</template>\n     *              <template #content>Content of the inspector</template>\n     *          </bento-inspector>\n     *     `\n     * }\n     */\n    export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n","export const BentoInspectorSizeOptions = ['small', 'large'] as const;\n\nexport type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number];\n"],"names":["__default__","messages","props","__props","emit","__emit","t","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","ref","inspector","page","pageLastFocusedElement","inspectorLastFocusedElement","isFullWidthInspector","wrapperWidth","useElementSize","isCompact","computed","threshold","conditionalClass","inspectorAriaLabel","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","watch","useResizeObserver","entries","entry","deprecate","BentoInspectorSizeOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;yOAyQIA,KAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;AA3LA,UAAAC,IAAAC,GAyCAC,IAAAC,GAeA,EAAA,GAAAC,EAAA,IAAAC,GAAA,EAAA,UAAAN,EAAA,CAAA,GACAO,IAAAC,GAAA,gCAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAJ,EAAA,IAAA,GACAK,IAAAL,EAAA,EAAA,GAEA,EAAA,OAAAM,EAAA,IAAAC,GAAAR,CAAA,GAEAS,IAAAC,EAAA,MAAA;AACI,YAAAC,IAAAnB,EAAA,SAAA,UAAA,MAAA;AACA,aAAAe,EAAA,QAAA,KAAAA,EAAA,SAAAI;AAAA,IAAuD,CAAA,GAG3DC,IAAAF,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAlB,EAAA,IAAA,EAAA,GAAA;AAAA,MACL,2BAAAiB,EAAA;AAAA,IACO,EAAA,GAG3CI,IAAAH,EAAA,MAAA,GAAAd,EAAA,WAAA,CAAA,KAAAJ,EAAA,KAAA,EAAA,GAEAsB,IAAA,YAAA;AACI,MAAAtB,EAAA,UACIY,EAAA,QAAA,SAAA,eACA,MAAAW,EAAA,GACAC,EAAAd,EAAA,OAAAE,EAAA,KAAA,KAIAa,EAAAb,EAAA,KAAA;AAAA,IACJ,GAGJc,IAAA,CAAAC,MAAA;AACI,UAAAb,EAAA;AACI;AAEJ,YAAAc,IAAAD,EAAA,WAAA,KAAA,GACAE,IAAAC,EAAAF,GAAAlB,EAAA,KAAA;AAGA,MAAAqB,EAAA,MAAAF,MACIF,EAAA,eAAA,GACAd,EAAA,QAAA,SAAA,eACAY,EAAAb,EAAA,KAAA,GAEAV,EAAA,sBAAA,MAAA;AAAA,IACJ,GAGJ8B,IAAA,CAAAL,MAAA;AACI,YAAAM,IAAAN,EAAA,YAAAA,EAAA,WAAAA,EAAA,QAAA;AACA,MAAA3B,EAAA,UAAA,CAAAc,EAAA,SAAAmB,KACIC,EAAA;AAAA,IACJ,GAGJA,IAAA,MAAA;AACI,MAAAC,EAAAzB,EAAA,KAAA,KACIG,EAAA,QAAA,SAAA,eACAY,EAAAb,EAAA,KAAA,GAEAV,EAAA,sBAAA,MAAA,MAEAU,EAAA,QAAA,SAAA,eACAa,EAAAZ,EAAA,KAAA;AAAA,IACJ,GAGJY,IAAA,CAAAW,MAAA;AACI,MAAAA,MAGAA,KAAA,QAAAA,EAAA,SACA,SAAA,kBAAAA,KACIX,EAAAW,EAAA,aAAA;AAAA,IACJ;AAGJ,WAAAC;AAAA,MAAA,MAAArC,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,cACIsB,EAAA;AAAA,MACJ;AAAA,IACJ,GAGJgB,GAAA5B,GAAA,CAAA6B,MAAA;AACI,YAAAC,IAAAD,EAAA,CAAA;AAEA,MAAAzB,EAAA,QAAAN,EAAA,MAAA,gBAAAgC,EAAA,YAAA;AAAA,IAA6E,CAAA,GAGjFxC,EAAA,cACIyC;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qEC3OCC,KAAA,CAAA,SAAA,OAAA;"}