@adyen/bento-vue2 1.89.2 → 1.90.0

package/dist/chunks/inspector.BzBPlz-5.js

@@ -0,0 +1,172 @@
+import { ref as p, watch as T, defineComponent as B, computed as v, nextTick as E } from "vue";
+import { d as F, B as I } from "./typography.C8lPlsbD.js";
+import { B as k } from "./button.C9b2AC9w.js";
+import { B as D } from "./loading-indicator.PxbRzshH.js";
+import { B as L, s as A, g as w, a as H, f as O } from "./focus-trap.DRqjHzt6.js";
+import { E as P } from "./expand.Bbielaja.js";
+import { C as R } from "./cross.CC_B-vG-.js";
+import { g as z } from "./generate-uid.NJ8tVoha.js";
+import { u as V } from "./index.B6WW_F-J.js";
+import { a as N, b as G } from "./index.CwzYJHw2.js";
+import { n as $ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/inspector.css";
+function Y(s) {
+  const e = p([]), t = N();
+  return T(t, (a) => {
+    !s.value || !a || !s.value.contains(a) || (e.value.unshift(a), e.value.length > 3 && e.value.pop());
+  }), {
+    findValidFocusFallback: () => {
+      for (const a of e.value)
+        if (a && document.body.contains(a))
+          return a;
+      return null;
+    }
+  };
+}
+const K = {
+  "de-DE": {
+    close: "Schließen",
+    expand: "Anzeigen",
+    inspector: "Inspektor",
+    returnToMainContent: "Zurück zum Hauptinhalt (Strg+Shift+S)",
+    returnToMainContentDescription: "Mit der Tastenkombination Strg + Umschalt + S können Sie zwischen dem Inspektor und den Seitenbereichen navigieren."
+  },
+  "en-GB": {
+    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."
+  },
+  "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."
+  },
+  "es-ES": {
+    close: "Cerrar",
+    expand: "Ampliar",
+    inspector: "Inspector",
+    returnToMainContent: "Volver al contenido principal (Ctrl+Shift+S)",
+    returnToMainContentDescription: "Puedes usar Ctrl + Shift + S para navegar entre las secciones del inspector y de la página."
+  },
+  "es-MX": {
+    close: "Cerrar",
+    expand: "Ampliar",
+    inspector: "Inspector",
+    returnToMainContent: "Volver al contenido principal (Ctrl+Shift+S)",
+    returnToMainContentDescription: "Puedes usar Ctrl + Shift + S para navegar entre las secciones del inspector y de la página."
+  },
+  "fr-FR": {
+    close: "Fermer",
+    expand: "Développer",
+    inspector: "Inspecteur",
+    returnToMainContent: "Retour au contenu principal (Ctrl+Maj+S)",
+    returnToMainContentDescription: "Vous pouvez utiliser Ctrl + Shift + S pour naviguer entre les sections de l'inspecteur et de la page."
+  },
+  "it-IT": {
+    close: "Chiudi",
+    expand: "Espandi",
+    inspector: "Ispettore",
+    returnToMainContent: "Torna al contenuto principale (Ctrl+Shift+S)",
+    returnToMainContentDescription: "Puoi usare Ctrl + Shift + S per navigare tra le sezioni ispettore e pagina."
+  },
+  "ja-JP": {
+    close: "閉じる",
+    expand: "展開",
+    inspector: "インスペクター",
+    returnToMainContent: "メインコンテンツに戻る（Ctrl+Shift+S）",
+    returnToMainContentDescription: "Ctrl + Shift + S を使用して、インスペクターとページセクション間を移動できます。"
+  },
+  "pt-BR": {
+    close: "Fechar",
+    expand: "Expandir",
+    inspector: "Inspetor",
+    returnToMainContent: "Voltar ao conteúdo principal (Ctrl+Shift+S)",
+    returnToMainContentDescription: "Você pode usar Ctrl + Shift + S para navegar entre as seções do inspetor e da página."
+  },
+  "zh-CN": {
+    close: "关闭",
+    expand: "展开",
+    inspector: "检查器",
+    returnToMainContent: "返回主内容（Ctrl+Shift+S）",
+    returnToMainContentDescription: "您可以使用 Ctrl + Shift + S 在检查器和页面分区之间导航。"
+  }
+}, U = { i18n: { messages: K } }, X = /* @__PURE__ */ B({
+  ...U,
+  __name: "inspector",
+  props: {
+    activePage: { default: "" },
+    expandable: { type: Boolean, default: !1 },
+    isOpen: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    size: { default: "small" },
+    title: null,
+    relativeLayout: { default: "push-content" },
+    pageFocusAnchor: { default: null }
+  },
+  emits: ["update:is-open", "update:active-page", "expand"],
+  setup(s, { emit: n }) {
+    const e = s, { t } = V(), r = z("returnToMainContentDescription"), a = p(null), l = p(null), S = p(null), u = p(null), { width: _ } = G(a), d = v(() => {
+      const m = e.size === "small" ? 740 : 915;
+      return _.value > 0 && _.value < m;
+    }), c = v(() => e.pageFocusAnchor), b = v(() => ({
+      [`b-inspector--${e.size}`]: !0,
+      [`b-inspector--${e.relativeLayout}`]: !0,
+      "b-inspector--is-compact": d.value
+    })), M = v(() => `${t("inspector")}, ${e.title}`), { findValidFocusFallback: f } = Y(S), g = async () => {
+      e.isOpen ? (await E(), A(l.value, c.value)) : i(c.value ?? f());
+    }, y = (o) => {
+      if (d.value)
+        return;
+      const C = o.shiftKey ? -1 : 1, m = w(C, l.value);
+      H() === m && (o.preventDefault(), u.value = document.activeElement, i(c.value ?? f()), n("update:active-page", void 0));
+    }, x = (o) => {
+      const C = o.shiftKey && o.ctrlKey && o.key === "S";
+      e.isOpen && !d.value && C && h();
+    }, h = () => {
+      O(l.value) ? (u.value = document.activeElement, i(c.value ?? f()), n("update:active-page", void 0)) : i(u.value);
+    }, i = (o) => {
+      o && (o == null || o.focus(), document.activeElement !== o && i(o.parentElement));
+    };
+    return T(
+      () => e.activePage,
+      () => {
+        e.activePage && g();
+      }
+    ), e.activePage || F(
+      '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"
+    ), { __sfc: !0, props: e, emit: n, t, returnToMainContentDescriptionId: r, wrapper: a, inspector: l, page: S, inspectorLastFocusedElement: u, wrapperWidth: _, isCompact: d, computedPageLastFocusedElement: c, conditionalClass: b, inspectorAriaLabel: M, findValidFocusFallback: f, setFocus: g, handleTabNavigation: y, handleSectionFocus: x, moveFocusBetweenSections: h, focusElement: i, BentoTypography: I, BentoButton: k, BentoLoadingIndicator: D, BentoFocusTrap: L, ExpandIcon: P, CrossIcon: R };
+  }
+});
+var j = function() {
+  var n = this, e = n._self._c, t = n._self._setupProxy;
+  return e("div", { ref: "wrapper", staticClass: "b-inspector", class: t.conditionalClass, on: { keydown: t.handleSectionFocus } }, [e("div", { ref: "page", staticClass: "b-inspector__page-wrapper" }, [e("div", { staticClass: "b-inspector__page" }, [n._t("page")], 2)]), e("Transition", { attrs: { name: "b-inspector__animation", mode: "out-in" }, on: { "before-enter": t.setFocus, "after-leave": t.setFocus } }, [n.isOpen ? e("aside", { ref: "inspector", staticClass: "b-inspector__container-wrapper", attrs: { "aria-label": t.inspectorAriaLabel }, on: { keydown: function(r) {
+    return !r.type.indexOf("key") && n._k(r.keyCode, "tab", 9, r.key, "Tab") ? null : t.handleTabNavigation.apply(null, arguments);
+  } } }, [e(t.BentoFocusTrap, { attrs: { disabled: !t.isCompact } }, [e("div", { staticClass: "b-inspector__container" }, [e("div", { staticClass: "b-inspector__header" }, [t.isCompact ? n._e() : [e(t.BentoButton, { staticClass: "b-inspector__return-content", attrs: { variant: "secondary", condensed: "", "aria-describedby": t.returnToMainContentDescriptionId }, on: { click: t.moveFocusBetweenSections } }, [n._v(" " + n._s(t.t("returnToMainContent")) + " ")]), e("span", { staticClass: "b-inspector__return-content-description", attrs: { id: t.returnToMainContentDescriptionId } }, [n._v(n._s(t.t("returnToMainContentDescription")))])], e(t.BentoTypography, { staticClass: "b-inspector__title", attrs: { el: "h2", variant: "title" } }, [n._v(" " + n._s(n.title) + " ")]), e("div", { staticClass: "b-inspector__icons" }, [n.expandable ? e(t.BentoButton, { attrs: { variant: "tertiary" }, on: { click: function(r) {
+    return t.emit("expand");
+  } }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
+    return [e(t.ExpandIcon, { attrs: { "svg-title": t.t("expand") } })];
+  }, proxy: !0 }], null, !1, 1210869445) }) : n._e(), e(t.BentoButton, { attrs: { variant: "tertiary" }, on: { click: function(r) {
+    return t.emit("update:is-open", !1);
+  } }, scopedSlots: n._u([{ key: "iconLeft", fn: function() {
+    return [e(t.CrossIcon, { attrs: { "svg-title": t.t("close") } })];
+  }, proxy: !0 }], null, !1, 858730413) })], 1)], 2), e("div", { staticClass: "b-inspector__content" }, [n.loading ? e(t.BentoLoadingIndicator, { staticClass: "b-inspector__loading-indicator", attrs: { large: "" } }) : n._t("content")], 2)])])], 1) : n._e()])], 1);
+}, q = [], J = /* @__PURE__ */ $(
+  X,
+  j,
+  q,
+  !1,
+  null,
+  "62a28c4d"
+);
+const ce = J.exports;
+export {
+  ce as B
+};
+//# sourceMappingURL=inspector.BzBPlz-5.js.map

package/dist/chunks/{inspector.Bnm0hl_D.js.map → inspector.BzBPlz-5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"inspector.Bnm0hl_D.js","sources":["../../src/components/inspector/composables/use-focus-history/use-focus-history.ts","../../src/components/inspector/inspector.vue"],"sourcesContent":["import { ref, type Ref } from 'vue';\nimport { useActiveElement } from '@vueuse/core';\nimport { watch } from 'vue';\n\n/**\n * A composable to track the focus history within a target element.\n * @param targetEl The stable parent element to monitor for focus changes.\n */\nexport function useFocusHistory(targetEl: Ref<HTMLElement | null>) {\n    const MAX_HISTORY_LENGTH = 3;\n\n    const focusHistory = ref<Array<Element>>([]);\n\n    const currentActiveElement = useActiveElement();\n\n    // Edge case 1:\n    // While the inspector is opened, if user tabs through the data-grid to the inspector, and closes it,\n    // it returns to the last element on the data grid regardless if it is a data-grid-cell.\n    //\n    // Edge case 2:\n    // Buttons or actions teleported out of the data-grid may have the focus shifted into a different context.\n    watch(currentActiveElement, newlyFocusedElement => {\n        // Check if the newly focused element is a child of our target container.\n        if (!targetEl.value || !newlyFocusedElement || !targetEl.value.contains(newlyFocusedElement)) {\n            return;\n        }\n\n        // Add the focused element to the history\n        focusHistory.value.unshift(newlyFocusedElement);\n\n        if (focusHistory.value.length > MAX_HISTORY_LENGTH) {\n            focusHistory.value.pop();\n        }\n    });\n\n    /**\n     * Iterates through the focus history to find the first valid element\n     * that is still present in the DOM.\n     * @returns The first valid historical element, or null if none are found.\n     */\n    const findValidFocusFallback = (): HTMLElement | null => {\n        for (const el of focusHistory.value) {\n            if (el && document.body.contains(el as Node)) {\n                return el as HTMLElement;\n            }\n        }\n\n        return null; // No valid fallback found\n    };\n\n    return {\n        findValidFocusFallback,\n    };\n}\n","<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=\"!isCompact\">\n                    <div class=\"b-inspector__container\">\n                        <div class=\"b-inspector__header\">\n                            <template v-if=\"!isCompact\">\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 } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n    import { type BentoInspectorProps } from './inspector.types';\n    import { useFocusHistory } from './composables/use-focus-history/use-focus-history';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  activePage: { default: '' },\n  expandable: { type: Boolean, default: false },\n  isOpen: { type: Boolean, default: false },\n  loading: { type: Boolean, default: false },\n  size: { default: 'small' },\n  title: null,\n  relativeLayout: { default: 'push-content' },\n  pageFocusAnchor: { default: null }\n});\n\n    const emit = defineEmits([\"update:is-open\", \"update:active-page\", \"expand\"]);\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 inspectorLastFocusedElement = ref<HTMLElement>(null);\n\n    const { width: wrapperWidth } = useElementSize(wrapper);\n\n    const isCompact = computed(() => {\n        const COMPACT_THRESHOLD_SMALL = 740;\n        const COMPACT_THRESHOLD_LARGE = 915;\n\n        // small inspector to occupy full screen if < 740px\n        // large inspector to occupy full screen if < 915px\n        const threshold = props.size === 'small' ? COMPACT_THRESHOLD_SMALL : COMPACT_THRESHOLD_LARGE;\n\n        return wrapperWidth.value > 0 && wrapperWidth.value < threshold;\n    });\n\n    const computedPageLastFocusedElement = computed(() => props.pageFocusAnchor);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n        [`b-inspector--${props.relativeLayout}`]: true,\n        [`b-inspector--is-compact`]: isCompact.value,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const { findValidFocusFallback } = useFocusHistory(page);\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            await nextTick();\n            moveFocusInside(inspector.value, computedPageLastFocusedElement.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(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n        }\n    };\n\n    const handleTabNavigation = event => {\n        if (isCompact.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(computedPageLastFocusedElement.value ?? findValidFocusFallback());\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 && !isCompact.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\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    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"],"names":["useFocusHistory","targetEl","focusHistory","ref","currentActiveElement","useActiveElement","watch","newlyFocusedElement","el","__default__","messages","t","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","inspector","page","inspectorLastFocusedElement","wrapperWidth","useElementSize","isCompact","computed","threshold","props","computedPageLastFocusedElement","conditionalClass","inspectorAriaLabel","findValidFocusFallback","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","emit","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","deprecate"],"mappings":";;;;;;;;;;;;AAQO,SAAAA,EAAAC,GAAA;AAGH,QAAAC,IAAAC,EAAA,CAAA,CAAA,GAEAC,IAAAC,EAAA;AAQA,SAAAC,EAAAF,GAAA,CAAAG,MAAA;AAEI,IAAA,CAAAN,EAAA,SAAA,CAAAM,KAAA,CAAAN,EAAA,MAAA,SAAAM,CAAA,MAKAL,EAAA,MAAA,QAAAK,CAAA,GAEAL,EAAA,MAAA,SAAA,KACIA,EAAA,MAAA,IAAA;AAAA,EACJ,CAAA,GAkBJ;AAAA,IAAO,wBAVP,MAAA;AACI,iBAAAM,KAAAN,EAAA;AACI,YAAAM,KAAA,SAAA,KAAA,SAAAA,CAAA;AACI,iBAAAA;AAIR,aAAA;AAAA,IAAO;AAAA,EAIP;AAER;;;;;GC2KIC,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;;;iBApIA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,gCAAA,GACAC,IAAAZ,EAAA,IAAA,GACAa,IAAAb,EAAA,IAAA,GACAc,IAAAd,EAAA,IAAA,GACAe,IAAAf,EAAA,IAAA,GAEA,EAAA,OAAAgB,EAAA,IAAAC,EAAAL,CAAA,GAEAM,IAAAC,EAAA,MAAA;AAMI,YAAAC,IAAAC,EAAA,SAAA,UAAA,MAAA;AAEA,aAAAL,EAAA,QAAA,KAAAA,EAAA,QAAAI;AAAA,IAAsD,CAAA,GAG1DE,IAAAH,EAAA,MAAAE,EAAA,eAAA,GAEAE,IAAAJ,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAE,EAAA,IAAA,EAAA,GAAA;AAAA,MACL,CAAA,gBAAAA,EAAA,cAAA,EAAA,GAAA;AAAA,MACU,2BAAAH,EAAA;AAAA,IACH,EAAA,GAG3CM,IAAAL,EAAA,MAAA,GAAAX,EAAA,WAAA,CAAA,KAAAa,EAAA,KAAA,EAAA,GAEA,EAAA,wBAAAI,EAAA,IAAA5B,EAAAiB,CAAA,GAEAY,IAAA,YAAA;AACI,MAAAL,EAAA,UACI,MAAAM,EAAA,GACAC,EAAAf,EAAA,OAAAS,EAAA,KAAA,KAIAO,EAAAP,EAAA,SAAAG,EAAA,CAAA;AAAA,IACJ,GAGJK,IAAA,CAAAC,MAAA;AACI,UAAAb,EAAA;AACI;AAEJ,YAAAc,IAAAD,EAAA,WAAA,KAAA,GACAE,IAAAC,EAAAF,GAAAnB,EAAA,KAAA;AAGA,MAAAsB,EAAA,MAAAF,MACIF,EAAA,eAAA,GACAhB,EAAA,QAAA,SAAA,eACAc,EAAAP,EAAA,SAAAG,EAAA,CAAA,GAEAW,EAAA,sBAAA,MAAA;AAAA,IACJ,GAGJC,IAAA,CAAAN,MAAA;AACI,YAAAO,IAAAP,EAAA,YAAAA,EAAA,WAAAA,EAAA,QAAA;AACA,MAAAV,EAAA,UAAA,CAAAH,EAAA,SAAAoB,KACIC,EAAA;AAAA,IACJ,GAGJA,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,KAAA,KACIE,EAAA,QAAA,SAAA,eACAc,EAAAP,EAAA,SAAAG,EAAA,CAAA,GAEAW,EAAA,sBAAA,MAAA,KAEAP,EAAAd,EAAA,KAAA;AAAA,IACJ,GAGJc,IAAA,CAAAY,MAAA;AACI,MAAAA,MAGAA,KAAA,QAAAA,EAAA,SACA,SAAA,kBAAAA,KACIZ,EAAAY,EAAA,aAAA;AAAA,IACJ;AAGJ,WAAAtC;AAAA,MAAA,MAAAkB,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,cACIK,EAAA;AAAA,MACJ;AAAA,IACJ,GAGJL,EAAA,cACIqB;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"inspector.BzBPlz-5.js","sources":["../../src/components/inspector/composables/use-focus-history/use-focus-history.ts","../../src/components/inspector/inspector.vue"],"sourcesContent":["import { ref, type Ref } from 'vue';\nimport { useActiveElement } from '@vueuse/core';\nimport { watch } from 'vue';\n\n/**\n * A composable to track the focus history within a target element.\n * @param targetEl The stable parent element to monitor for focus changes.\n */\nexport function useFocusHistory(targetEl: Ref<HTMLElement | null>) {\n    const MAX_HISTORY_LENGTH = 3;\n\n    const focusHistory = ref<Array<Element>>([]);\n\n    const currentActiveElement = useActiveElement();\n\n    // Edge case 1:\n    // While the inspector is opened, if user tabs through the data-grid to the inspector, and closes it,\n    // it returns to the last element on the data grid regardless if it is a data-grid-cell.\n    //\n    // Edge case 2:\n    // Buttons or actions teleported out of the data-grid may have the focus shifted into a different context.\n    watch(currentActiveElement, newlyFocusedElement => {\n        // Check if the newly focused element is a child of our target container.\n        if (!targetEl.value || !newlyFocusedElement || !targetEl.value.contains(newlyFocusedElement)) {\n            return;\n        }\n\n        // Add the focused element to the history\n        focusHistory.value.unshift(newlyFocusedElement);\n\n        if (focusHistory.value.length > MAX_HISTORY_LENGTH) {\n            focusHistory.value.pop();\n        }\n    });\n\n    /**\n     * Iterates through the focus history to find the first valid element\n     * that is still present in the DOM.\n     * @returns The first valid historical element, or null if none are found.\n     */\n    const findValidFocusFallback = (): HTMLElement | null => {\n        for (const el of focusHistory.value) {\n            if (el && document.body.contains(el as Node)) {\n                return el as HTMLElement;\n            }\n        }\n\n        return null; // No valid fallback found\n    };\n\n    return {\n        findValidFocusFallback,\n    };\n}\n","<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=\"!isCompact\">\n                    <div class=\"b-inspector__container\">\n                        <div class=\"b-inspector__header\">\n                            <template v-if=\"!isCompact\">\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 } from '@vueuse/core';\n    import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n    import { type BentoInspectorProps } from './inspector.types';\n    import { useFocusHistory } from './composables/use-focus-history/use-focus-history';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  activePage: { default: '' },\n  expandable: { type: Boolean, default: false },\n  isOpen: { type: Boolean, default: false },\n  loading: { type: Boolean, default: false },\n  size: { default: 'small' },\n  title: null,\n  relativeLayout: { default: 'push-content' },\n  pageFocusAnchor: { default: null }\n});\n\n    const emit = defineEmits([\"update:is-open\", \"update:active-page\", \"expand\"]);\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 inspectorLastFocusedElement = ref<HTMLElement>(null);\n\n    const { width: wrapperWidth } = useElementSize(wrapper);\n\n    const isCompact = computed(() => {\n        const COMPACT_THRESHOLD_SMALL = 740;\n        const COMPACT_THRESHOLD_LARGE = 915;\n\n        // small inspector to occupy full screen if < 740px\n        // large inspector to occupy full screen if < 915px\n        const threshold = props.size === 'small' ? COMPACT_THRESHOLD_SMALL : COMPACT_THRESHOLD_LARGE;\n\n        return wrapperWidth.value > 0 && wrapperWidth.value < threshold;\n    });\n\n    const computedPageLastFocusedElement = computed(() => props.pageFocusAnchor);\n\n    const conditionalClass = computed(() => ({\n        [`b-inspector--${props.size}`]: true,\n        [`b-inspector--${props.relativeLayout}`]: true,\n        [`b-inspector--is-compact`]: isCompact.value,\n    }));\n\n    const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n    const { findValidFocusFallback } = useFocusHistory(page);\n\n    const setFocus = async () => {\n        if (props.isOpen) {\n            await nextTick();\n            moveFocusInside(inspector.value, computedPageLastFocusedElement.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(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n        }\n    };\n\n    const handleTabNavigation = event => {\n        if (isCompact.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(computedPageLastFocusedElement.value ?? findValidFocusFallback());\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 && !isCompact.value && sectionShortcut) {\n            moveFocusBetweenSections();\n        }\n    };\n\n    const moveFocusBetweenSections = () => {\n        if (focusInside(inspector.value)) {\n            inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n            focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback());\n            // Set active-page as undefined when focus is not on page\n            emit('update:active-page', undefined);\n        } else {\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    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"],"names":["useFocusHistory","targetEl","focusHistory","ref","currentActiveElement","useActiveElement","watch","newlyFocusedElement","el","__default__","messages","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","inspector","page","inspectorLastFocusedElement","wrapperWidth","useElementSize","isCompact","computed","threshold","props","computedPageLastFocusedElement","conditionalClass","inspectorAriaLabel","findValidFocusFallback","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","emit","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","deprecate"],"mappings":";;;;;;;;;;;;AAQO,SAAAA,EAAAC,GAAA;AAGH,QAAAC,IAAAC,EAAA,CAAA,CAAA,GAEAC,IAAAC,EAAA;AAQA,SAAAC,EAAAF,GAAA,CAAAG,MAAA;AAEI,IAAA,CAAAN,EAAA,SAAA,CAAAM,KAAA,CAAAN,EAAA,MAAA,SAAAM,CAAA,MAKAL,EAAA,MAAA,QAAAK,CAAA,GAEAL,EAAA,MAAA,SAAA,KACIA,EAAA,MAAA,IAAA;AAAA,EACJ,CAAA,GAkBJ;AAAA,IAAO,wBAVP,MAAA;AACI,iBAAAM,KAAAN,EAAA;AACI,YAAAM,KAAA,SAAA,KAAA,SAAAA,CAAA;AACI,iBAAAA;AAIR,aAAA;AAAA,IAAO;AAAA,EAIP;AAER;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC2KIC,IAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;;;iBApIA,EAAA,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,gCAAA,GACAC,IAAAX,EAAA,IAAA,GACAY,IAAAZ,EAAA,IAAA,GACAa,IAAAb,EAAA,IAAA,GACAc,IAAAd,EAAA,IAAA,GAEA,EAAA,OAAAe,EAAA,IAAAC,EAAAL,CAAA,GAEAM,IAAAC,EAAA,MAAA;AAMI,YAAAC,IAAAC,EAAA,SAAA,UAAA,MAAA;AAEA,aAAAL,EAAA,QAAA,KAAAA,EAAA,QAAAI;AAAA,IAAsD,CAAA,GAG1DE,IAAAH,EAAA,MAAAE,EAAA,eAAA,GAEAE,IAAAJ,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAE,EAAA,IAAA,EAAA,GAAA;AAAA,MACL,CAAA,gBAAAA,EAAA,cAAA,EAAA,GAAA;AAAA,MACU,2BAAAH,EAAA;AAAA,IACH,EAAA,GAG3CM,IAAAL,EAAA,MAAA,GAAA,EAAA,WAAA,CAAA,KAAAE,EAAA,KAAA,EAAA,GAEA,EAAA,wBAAAI,EAAA,IAAA3B,EAAAgB,CAAA,GAEAY,IAAA,YAAA;AACI,MAAAL,EAAA,UACI,MAAAM,EAAA,GACAC,EAAAf,EAAA,OAAAS,EAAA,KAAA,KAIAO,EAAAP,EAAA,SAAAG,EAAA,CAAA;AAAA,IACJ,GAGJK,IAAA,CAAAC,MAAA;AACI,UAAAb,EAAA;AACI;AAEJ,YAAAc,IAAAD,EAAA,WAAA,KAAA,GACAE,IAAAC,EAAAF,GAAAnB,EAAA,KAAA;AAGA,MAAAsB,EAAA,MAAAF,MACIF,EAAA,eAAA,GACAhB,EAAA,QAAA,SAAA,eACAc,EAAAP,EAAA,SAAAG,EAAA,CAAA,GAEAW,EAAA,sBAAA,MAAA;AAAA,IACJ,GAGJC,IAAA,CAAAN,MAAA;AACI,YAAAO,IAAAP,EAAA,YAAAA,EAAA,WAAAA,EAAA,QAAA;AACA,MAAAV,EAAA,UAAA,CAAAH,EAAA,SAAAoB,KACIC,EAAA;AAAA,IACJ,GAGJA,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,KAAA,KACIE,EAAA,QAAA,SAAA,eACAc,EAAAP,EAAA,SAAAG,EAAA,CAAA,GAEAW,EAAA,sBAAA,MAAA,KAEAP,EAAAd,EAAA,KAAA;AAAA,IACJ,GAGJc,IAAA,CAAAY,MAAA;AACI,MAAAA,MAGAA,KAAA,QAAAA,EAAA,SACA,SAAA,kBAAAA,KACIZ,EAAAY,EAAA,aAAA;AAAA,IACJ;AAGJ,WAAArC;AAAA,MAAA,MAAAiB,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,cACIK,EAAA;AAAA,MACJ;AAAA,IACJ,GAGJL,EAAA,cACIqB;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{link.MhoM3zQj.js → link.DB5g6d48.js}

@@ -1,39 +1,66 @@
-import { defineComponent as g, computed as r } from "vue";
-import { RouterLink as m } from "vue-router";
-import { g as b } from "./generate-uid.NJ8tVoha.js";
+import { defineComponent as b, computed as r } from "vue";
+import { RouterLink as g } from "vue-router";
+import { g as m } from "./generate-uid.NJ8tVoha.js";
 import { B as y } from "./typography.C8lPlsbD.js";
-import { u as k } from "./index.B6WW_F-J.js";
+import { u as T } from "./index.B6WW_F-J.js";
 /* empty css              */
-import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/link.css";
 var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.QUIET = "quiet", a))(s || {});
-let c = 0;
-const x = {
+let p = 0;
+const k = {
   beforeCreate() {
-    this.uuid = c.toString(), c += 1;
+    this.uuid = p.toString(), p += 1;
   }
 };
 var h = function() {
   var t = this, e = t._self._c;
   return e("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#001222", d: "M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z" } })]);
-}, T = [], B = /* @__PURE__ */ p(
-  x,
+}, x = [], I = /* @__PURE__ */ c(
+  k,
   h,
-  T,
+  x,
   !1,
   null,
   null
 );
-const C = B.exports, I = {
-  "en-US": { opensInNewTab: "Opens in new tab" },
-  "ja-JP": { opensInNewTab: "新しいタブで開きます" },
-  "pt-BR": { opensInNewTab: "Abre em uma nova aba" }
-}, w = {
+const w = I.exports, B = {
+  "de-DE": {
+    opensInNewTab: "Wird in neuem Tab geöffnet"
+  },
+  "en-GB": {
+    opensInNewTab: "Opens in new tab"
+  },
+  "en-US": {
+    opensInNewTab: "Opens in new tab"
+  },
+  "es-ES": {
+    opensInNewTab: "Se abre en una nueva pestaña"
+  },
+  "es-MX": {
+    opensInNewTab: "Se abre en una nueva pestaña"
+  },
+  "fr-FR": {
+    opensInNewTab: "S'ouvre dans un nouvel onglet"
+  },
+  "it-IT": {
+    opensInNewTab: "Si apre in una nuova scheda"
+  },
+  "ja-JP": {
+    opensInNewTab: "新しいタブで開きます"
+  },
+  "pt-BR": {
+    opensInNewTab: "Abre em uma nova aba"
+  },
+  "zh-CN": {
+    opensInNewTab: "在新标签页中打开"
+  }
+}, C = {
   name: "bento-link",
   inheritAttrs: !1,
-  i18n: { messages: I }
-}, L = /* @__PURE__ */ g({
-  ...w,
+  i18n: { messages: B }
+}, N = /* @__PURE__ */ b({
+  ...C,
   props: {
     to: null,
     replace: { type: Boolean },
@@ -56,40 +83,40 @@ const C = B.exports, I = {
   },
   emits: ["click"],
   setup(a, { emit: t }) {
-    const e = a, { t: n } = k(), i = {
+    const e = a, { t: n } = T(), i = {
       variant: void 0,
       isButton: void 0,
       truncate: void 0,
       disableTypography: void 0,
       external: void 0,
       isNotRouting: void 0
-    }, u = b("external-link"), _ = (o) => o, d = r(() => ({
+    }, u = m("external-link"), _ = (o) => o, d = r(() => ({
       "b-link": !e.isButton,
       [`b-link--${s.QUIET}`]: e.variant === s.QUIET,
       "b-link--truncate": e.truncate
     })), f = r(() => e.external ? e.target ?? "_blank" : e.target), v = r(() => !(e.isButton || e.isNotRouting));
     return { __sfc: !0, t: n, props: e, nonForwardedProps: i, externalLinkId: u, getAttributeTitle: _, conditionalClasses: d, computedTarget: f, showExternalLinkIcon: v, emit: t, onClick: (o, l) => {
       t("click", o), l && l();
-    }, RouterLink: m, BentoTypography: y, ExternalLinkIcon: C };
+    }, RouterLink: g, BentoTypography: y, ExternalLinkIcon: w };
   }
 });
-var $ = function() {
+var L = function() {
   var t = this, e = t._self._c, n = t._self._setupProxy;
   return t.external || t.isNotRouting ? e("a", t._b({ class: n.conditionalClasses, attrs: { "aria-describedby": n.externalLinkId, href: t.$props.to.toString(), title: n.getAttributeTitle(t.$attrs.title), target: n.computedTarget }, on: { click: n.onClick } }, "a", t.$attrs, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2), n.showExternalLinkIcon ? e("span", { staticClass: "b-link__external-link-icon", attrs: { "aria-hidden": "true" } }, [e(n.ExternalLinkIcon)], 1) : t._e(), t.external ? e("span", { staticClass: "b-link--visually-hidden", attrs: { id: n.externalLinkId } }, [t._v(t._s(n.t("opensInNewTab")))]) : t._e()], 2) : e(n.RouterLink, t._b({ class: n.conditionalClasses, attrs: { target: t.target, to: n.props.to, custom: "" }, nativeOn: { click: function(i) {
     return n.onClick.apply(null, arguments);
   } } }, "router-link", { ...t.$attrs, ...t.$props, ...n.nonForwardedProps }, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2)], 2);
-}, E = [], R = /* @__PURE__ */ p(
+}, $ = [], E = /* @__PURE__ */ c(
+  N,
   L,
   $,
-  E,
   !1,
   null,
   "7930653c"
 );
-const V = R.exports;
+const O = E.exports;
 export {
-  V as B,
-  C as E,
+  O as B,
+  w as E,
   s as a
 };
-//# sourceMappingURL=link.MhoM3zQj.js.map
+//# sourceMappingURL=link.DB5g6d48.js.map

package/dist/chunks/{link.MhoM3zQj.js.map → link.DB5g6d48.js.map}

@@ -1 +1 @@
-{"version":3,"file":"link.MhoM3zQj.js","sources":["../../src/components/link/link.types.ts","../../../ui-assets/icons-16/dist/vue/external-link.vue","../../src/components/link/link.vue"],"sourcesContent":["import type { Location } from 'vue-router/types/router.d.ts';\n// TODO: revert to import once fully migrated to Vue 3\n// import type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n\n/**\n * Manually defined RouterLinkProps to ensure compatibility\n * with Vue Macros and Vue 2.7 / 3 monorepos.\n */\nexport interface RouterLinkProps {\n    /**\n     * Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to\n     * `router.push()` internally, so the value can be either a string or a location descriptor object.\n     */\n    to: string | Location;\n    /**\n     * Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will\n     * not create a new history record.\n     *\n     * @default false\n     */\n    replace?: boolean;\n    /**\n     * Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating\n     * from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with append we will end up at\n     * `/a/b`.\n     *\n     * @default false\n     */\n    append?: boolean;\n    /**\n     * Sometimes we want <RouterLink> to render as another tag, e.g <li>. Then we can use tag prop to specify which tag to\n     * render to, and it will still listen to click events for navigation.\n     *\n     * @default \"a\"\n     */\n    tag?: string;\n    /**\n     * Configure the active CSS class applied when the link is active. Note the default value can also be configured\n     * globally via the `linkActiveClass` router constructor option.\n     *\n     * @default \"router-link-active\"\n     */\n    activeClass?: string;\n    /**\n     * The default active class matching behavior is **inclusive match**. For example, `<RouterLink to=\"/a\">` will get\n     * this class applied as long as the current path starts with `/a/` or is `/a`.\n     *\n     * @default false\n     */\n    exact?: boolean;\n    /**\n     * Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections.\n     *\n     * @default false\n     */\n    exactPath?: boolean;\n    /**\n     * Configure the active CSS class applied when the link is active with exact path match. Note the default value can\n     * also be configured globally via the `linkExactPathActiveClass` router constructor option.\n     *\n     * @default \"router-link-exact-path-active\"\n     */\n    exactPathActiveClass?: string;\n\n    /**\n     * Specify the event(s) that can trigger the link navigation.\n     *\n     * @default 'click'\n     */\n    event?: string | ReadonlyArray<string>;\n    /**\n     * Configure the active CSS class applied when the link is active with exact match. Note the default value can also be\n     * configured globally via the `linkExactActiveClass` router constructor option.\n     *\n     * @default \"router-link-exact-active\"\n     */\n    exactActiveClass?: string;\n    /**\n     * Configure the value of `aria-current` when the link is active with exact match. It must be one of the allowed\n     * values for [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the\n     * default of page should be the best fit.\n     *\n     * @default \"page\"\n     */\n    ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoLinkVariant {\n    DEFAULT = 'default',\n    QUIET = 'quiet',\n}\n\nexport type BentoLinkProps = RouterLinkProps & {\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography component.\n     */\n    disableTypography?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link and renders an external link icon.\n     */\n    external?: boolean;\n\n    /**\n     * Set to true if used inside a `BentoButton` component.\n     */\n    isButton?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link.\n     */\n    isNotRouting?: boolean;\n\n    /**\n     * Sets the target of the rendered link.\n     */\n    target?: string;\n\n    /**\n     * Set to true to truncate link. Doesn't work with disableTypography.\n     */\n    truncate?: boolean;\n\n    /**\n     * Link variant type affecting visual style.\n     * @values default, quiet\n     */\n    variant?: BentoLinkVariant | `${BentoLinkVariant}`;\n};\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=\"M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z\"/></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","<template>\n    <a\n        v-if=\"external || isNotRouting\"\n        :class=\"conditionalClasses\"\n        v-bind=\"$attrs\"\n        :aria-describedby=\"externalLinkId\"\n        :href=\"$props.to.toString()\"\n        :title=\"getAttributeTitle($attrs.title)\"\n        :target=\"computedTarget\"\n        @click=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n        <span v-if=\"showExternalLinkIcon\" aria-hidden=\"true\" class=\"b-link__external-link-icon\">\n            <external-link-icon />\n        </span>\n        <span v-if=\"external\" :id=\"externalLinkId\" class=\"b-link--visually-hidden\">{{ t('opensInNewTab') }}</span>\n    </a>\n    <router-link\n        v-else\n        v-bind=\"{ ...$attrs, ...$props, ...nonForwardedProps }\"\n        :class=\"conditionalClasses\"\n        :target=\"target\"\n        :to=\"props.to\"\n        custom\n        @click.native=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </router-link>\n</template>\n\n<script setup lang=\"ts\">\n    import { RouterLink } from 'vue-router';\n    import { computed } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoLinkProps, BentoLinkVariant } from './link.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { RouterLinkSlotArgument } from 'vue-router/types/router.d.ts';\n    import ExternalLinkIcon from '@adyen/ui-assets-icons-16/vue/external-link';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  to: null,\n  replace: { type: Boolean },\n  append: { type: Boolean },\n  tag: null,\n  activeClass: null,\n  exact: { type: Boolean },\n  exactPath: { type: Boolean },\n  exactPathActiveClass: null,\n  event: null,\n  exactActiveClass: null,\n  ariaCurrentValue: null,\n  disableTypography: { type: Boolean },\n  external: { type: Boolean },\n  isButton: { type: Boolean },\n  isNotRouting: { type: Boolean },\n  target: { default: null },\n  truncate: { type: Boolean },\n  variant: { default: BentoLinkVariant.DEFAULT }\n});\n\n    // Props that should not be forwarded to the underlying anchor element\n    const nonForwardedProps = {\n        variant: undefined,\n        isButton: undefined,\n        truncate: undefined,\n        disableTypography: undefined,\n        external: undefined,\n        isNotRouting: undefined,\n    };\n\n    const externalLinkId = generateUid('external-link');\n\n    const getAttributeTitle = (attributesTitle: unknown) => attributesTitle as string;\n\n    const conditionalClasses = computed(() => ({\n        'b-link': !props.isButton,\n        [`b-link--${BentoLinkVariant.QUIET}`]: props.variant === BentoLinkVariant.QUIET,\n        [`b-link--truncate`]: props.truncate,\n    }));\n\n    const computedTarget = computed(() => (props.external ? (props.target ?? '_blank') : props.target));\n    const showExternalLinkIcon = computed(() => !(props.isButton || props.isNotRouting));\n\n    const emit = defineEmits([\"click\"]);\n\n    const onClick = (e: MouseEvent, navigateCallback?: RouterLinkSlotArgument['navigate']) => {\n        emit('click', e);\n        if (navigateCallback) {\n            navigateCallback();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Extends the `router-link` from the `vue-router` NPM package.\n     *\n     * @example\n     * import { BentoLink } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLink },\n     *     template: `\n     *       <bento-link to=\"/\">\n     *           link\n     *       </bento-link>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-link',\n        inheritAttrs: false,\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/link/link.scss\" />\n"],"names":["BentoLinkVariant","BentoLinkVariant2","uuid","_sfc_main$1","__default__","messages","t","useI18n","nonForwardedProps","externalLinkId","generateUid","getAttributeTitle","attributesTitle","conditionalClasses","computed","props","computedTarget","showExternalLinkIcon","e","navigateCallback","emit"],"mappings":";;;;;;;;AA0FO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACnFZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;GC2GIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAAA,EACQ,MAAA,EAAA,UAAAC,EAAA;AAElB;;;;;;;;;;;;;;;;;;;;;;;;iBA5EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAwBAC,IAAA;AAAA,MAA0B,SAAA;AAAA,MACb,UAAA;AAAA,MACC,UAAA;AAAA,MACA,mBAAA;AAAA,MACS,UAAA;AAAA,MACT,cAAA;AAAA,IACI,GAGlBC,IAAAC,EAAA,eAAA,GAEAC,IAAA,CAAAC,MAAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,UAAA,CAAAC,EAAA;AAAA,MACtB,CAAA,WAAAf,EAAA,KAAA,EAAA,GAAAe,EAAA,YAAAf,EAAA;AAAA,MACyD,oBAAAe,EAAA;AAAA,IAC9C,EAAA,GAGhCC,IAAAF,EAAA,MAAAC,EAAA,WAAAA,EAAA,UAAA,WAAAA,EAAA,MAAA,GACAE,IAAAH,EAAA,MAAA,EAAAC,EAAA,YAAAA,EAAA,aAAA;4LAIA,CAAAG,GAAAC,MAAA;AACI,MAAAC,EAAA,SAAAF,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"link.DB5g6d48.js","sources":["../../src/components/link/link.types.ts","../../../ui-assets/icons-16/dist/vue/external-link.vue","../../src/components/link/link.vue"],"sourcesContent":["import type { Location } from 'vue-router/types/router.d.ts';\n// TODO: revert to import once fully migrated to Vue 3\n// import type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n\n/**\n * Manually defined RouterLinkProps to ensure compatibility\n * with Vue Macros and Vue 2.7 / 3 monorepos.\n */\nexport interface RouterLinkProps {\n    /**\n     * Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to\n     * `router.push()` internally, so the value can be either a string or a location descriptor object.\n     */\n    to: string | Location;\n    /**\n     * Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will\n     * not create a new history record.\n     *\n     * @default false\n     */\n    replace?: boolean;\n    /**\n     * Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating\n     * from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with append we will end up at\n     * `/a/b`.\n     *\n     * @default false\n     */\n    append?: boolean;\n    /**\n     * Sometimes we want <RouterLink> to render as another tag, e.g <li>. Then we can use tag prop to specify which tag to\n     * render to, and it will still listen to click events for navigation.\n     *\n     * @default \"a\"\n     */\n    tag?: string;\n    /**\n     * Configure the active CSS class applied when the link is active. Note the default value can also be configured\n     * globally via the `linkActiveClass` router constructor option.\n     *\n     * @default \"router-link-active\"\n     */\n    activeClass?: string;\n    /**\n     * The default active class matching behavior is **inclusive match**. For example, `<RouterLink to=\"/a\">` will get\n     * this class applied as long as the current path starts with `/a/` or is `/a`.\n     *\n     * @default false\n     */\n    exact?: boolean;\n    /**\n     * Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections.\n     *\n     * @default false\n     */\n    exactPath?: boolean;\n    /**\n     * Configure the active CSS class applied when the link is active with exact path match. Note the default value can\n     * also be configured globally via the `linkExactPathActiveClass` router constructor option.\n     *\n     * @default \"router-link-exact-path-active\"\n     */\n    exactPathActiveClass?: string;\n\n    /**\n     * Specify the event(s) that can trigger the link navigation.\n     *\n     * @default 'click'\n     */\n    event?: string | ReadonlyArray<string>;\n    /**\n     * Configure the active CSS class applied when the link is active with exact match. Note the default value can also be\n     * configured globally via the `linkExactActiveClass` router constructor option.\n     *\n     * @default \"router-link-exact-active\"\n     */\n    exactActiveClass?: string;\n    /**\n     * Configure the value of `aria-current` when the link is active with exact match. It must be one of the allowed\n     * values for [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the\n     * default of page should be the best fit.\n     *\n     * @default \"page\"\n     */\n    ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoLinkVariant {\n    DEFAULT = 'default',\n    QUIET = 'quiet',\n}\n\nexport type BentoLinkProps = RouterLinkProps & {\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography component.\n     */\n    disableTypography?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link and renders an external link icon.\n     */\n    external?: boolean;\n\n    /**\n     * Set to true if used inside a `BentoButton` component.\n     */\n    isButton?: boolean;\n\n    /**\n     * Set the rendered link to a regular external anchor link.\n     */\n    isNotRouting?: boolean;\n\n    /**\n     * Sets the target of the rendered link.\n     */\n    target?: string;\n\n    /**\n     * Set to true to truncate link. Doesn't work with disableTypography.\n     */\n    truncate?: boolean;\n\n    /**\n     * Link variant type affecting visual style.\n     * @values default, quiet\n     */\n    variant?: BentoLinkVariant | `${BentoLinkVariant}`;\n};\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=\"M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z\"/></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","<template>\n    <a\n        v-if=\"external || isNotRouting\"\n        :class=\"conditionalClasses\"\n        v-bind=\"$attrs\"\n        :aria-describedby=\"externalLinkId\"\n        :href=\"$props.to.toString()\"\n        :title=\"getAttributeTitle($attrs.title)\"\n        :target=\"computedTarget\"\n        @click=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n        <span v-if=\"showExternalLinkIcon\" aria-hidden=\"true\" class=\"b-link__external-link-icon\">\n            <external-link-icon />\n        </span>\n        <span v-if=\"external\" :id=\"externalLinkId\" class=\"b-link--visually-hidden\">{{ t('opensInNewTab') }}</span>\n    </a>\n    <router-link\n        v-else\n        v-bind=\"{ ...$attrs, ...$props, ...nonForwardedProps }\"\n        :class=\"conditionalClasses\"\n        :target=\"target\"\n        :to=\"props.to\"\n        custom\n        @click.native=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </router-link>\n</template>\n\n<script setup lang=\"ts\">\n    import { RouterLink } from 'vue-router';\n    import { computed } from 'vue';\n    import { generateUid } from '@/core/utils/ts';\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoLinkProps, BentoLinkVariant } from './link.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { RouterLinkSlotArgument } from 'vue-router/types/router.d.ts';\n    import ExternalLinkIcon from '@adyen/ui-assets-icons-16/vue/external-link';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  to: null,\n  replace: { type: Boolean },\n  append: { type: Boolean },\n  tag: null,\n  activeClass: null,\n  exact: { type: Boolean },\n  exactPath: { type: Boolean },\n  exactPathActiveClass: null,\n  event: null,\n  exactActiveClass: null,\n  ariaCurrentValue: null,\n  disableTypography: { type: Boolean },\n  external: { type: Boolean },\n  isButton: { type: Boolean },\n  isNotRouting: { type: Boolean },\n  target: { default: null },\n  truncate: { type: Boolean },\n  variant: { default: BentoLinkVariant.DEFAULT }\n});\n\n    // Props that should not be forwarded to the underlying anchor element\n    const nonForwardedProps = {\n        variant: undefined,\n        isButton: undefined,\n        truncate: undefined,\n        disableTypography: undefined,\n        external: undefined,\n        isNotRouting: undefined,\n    };\n\n    const externalLinkId = generateUid('external-link');\n\n    const getAttributeTitle = (attributesTitle: unknown) => attributesTitle as string;\n\n    const conditionalClasses = computed(() => ({\n        'b-link': !props.isButton,\n        [`b-link--${BentoLinkVariant.QUIET}`]: props.variant === BentoLinkVariant.QUIET,\n        [`b-link--truncate`]: props.truncate,\n    }));\n\n    const computedTarget = computed(() => (props.external ? (props.target ?? '_blank') : props.target));\n    const showExternalLinkIcon = computed(() => !(props.isButton || props.isNotRouting));\n\n    const emit = defineEmits([\"click\"]);\n\n    const onClick = (e: MouseEvent, navigateCallback?: RouterLinkSlotArgument['navigate']) => {\n        emit('click', e);\n        if (navigateCallback) {\n            navigateCallback();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Extends the `router-link` from the `vue-router` NPM package.\n     *\n     * @example\n     * import { BentoLink } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLink },\n     *     template: `\n     *       <bento-link to=\"/\">\n     *           link\n     *       </bento-link>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-link',\n        inheritAttrs: false,\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/link/link.scss\" />\n"],"names":["BentoLinkVariant","BentoLinkVariant2","uuid","_sfc_main$1","__default__","messages","t","useI18n","nonForwardedProps","externalLinkId","generateUid","getAttributeTitle","attributesTitle","conditionalClasses","computed","props","computedTarget","showExternalLinkIcon","e","navigateCallback","emit"],"mappings":";;;;;;;;AA0FO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACnFZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC2GIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAAA,EACQ,MAAA,EAAA,UAAAC,EAAA;AAElB;;;;;;;;;;;;;;;;;;;;;;;;iBA5EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAwBAC,IAAA;AAAA,MAA0B,SAAA;AAAA,MACb,UAAA;AAAA,MACC,UAAA;AAAA,MACA,mBAAA;AAAA,MACS,UAAA;AAAA,MACT,cAAA;AAAA,IACI,GAGlBC,IAAAC,EAAA,eAAA,GAEAC,IAAA,CAAAC,MAAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,UAAA,CAAAC,EAAA;AAAA,MACtB,CAAA,WAAAf,EAAA,KAAA,EAAA,GAAAe,EAAA,YAAAf,EAAA;AAAA,MACyD,oBAAAe,EAAA;AAAA,IAC9C,EAAA,GAGhCC,IAAAF,EAAA,MAAAC,EAAA,WAAAA,EAAA,UAAA,WAAAA,EAAA,MAAA,GACAE,IAAAH,EAAA,MAAA,EAAAC,EAAA,YAAAA,EAAA,aAAA;4LAIA,CAAAG,GAAAC,MAAA;AACI,MAAAC,EAAA,SAAAF,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{list-item.BnzU1LIu.js → list-item.DqTHh8-Z.js}

@@ -2,7 +2,7 @@ import { defineComponent as a, computed as n, useSlots as d } from "vue";
 import { n as r } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { C as m } from "./chevron-right-small.BKeb_dRX.js";
 import { B as u } from "./status.CKb07vxI.js";
-import { B as f } from "./tag.CocLKztJ.js";
+import { B as f } from "./tag.D2xagTJv.js";
 import { B as h } from "./typography.C8lPlsbD.js";
 import { u as v } from "./use-has-slot.C9lQZ6nz.js";
 import "../assets/list-item.css";
@@ -73,4 +73,4 @@ export {
   z as a,
   P as l
 };
-//# sourceMappingURL=list-item.BnzU1LIu.js.map
+//# sourceMappingURL=list-item.DqTHh8-Z.js.map

package/dist/chunks/{list-item.BnzU1LIu.js.map → list-item.DqTHh8-Z.js.map}

@@ -1 +1 @@
-{"version":3,"file":"list-item.BnzU1LIu.js","sources":["../../src/components/list/list.vue","../../src/components/list/components/list-item/list-item.vue"],"sourcesContent":["<template>\n    <component :is=\"listElement\" class=\"b-list\">\n        <slot />\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import type { BentoListProps } from './list.types';\n\n    const props = defineProps({\n  type: { default: 'unordered' }\n});\n\n    const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoList` renders an ordered or unordered list container for `BentoListItem` rows.\n     *\n     * @example\n     * import { BentoList, BentoListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              />\n     *              <bento-list-item\n     *                  label=\"Risk configuration\"\n     *                  description=\"Updated yesterday\"\n     *                  :tag=\"{ label: 'Review', variant: 'orange' }\"\n     *              />\n     *          </bento-list>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-list',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list.scss\" />\n","<template>\n    <li class=\"b-list-item\" @click=\"onItemClick\" @keydown=\"onItemKeydown\">\n        <bento-typography\n            class=\"b-list-item__inner\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            :role=\"props.withChevron ? 'button' : undefined\"\n            :tabindex=\"props.withChevron ? 0 : undefined\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-list-item__image\">\n                <slot name=\"image\" />\n            </div>\n\n            <div v-if=\"hasSlot('start')\" class=\"b-list-item__start\">\n                <slot name=\"start\" />\n            </div>\n\n            <div class=\"b-list-item__content\">\n                <div v-if=\"hasSlot('content')\" class=\"b-list-item__label\">\n                    <slot name=\"content\" />\n                </div>\n\n                <template v-else>\n                    <div class=\"b-list-item__header\">\n                        <bento-typography v-if=\"props.label\" class=\"b-list-item__label\" el=\"span\" stronger>\n                            {{ props.label }}\n                        </bento-typography>\n                        <bento-status\n                            v-if=\"props.showStatus\"\n                            class=\"b-list-item__status\"\n                            :variant=\"props.statusColor\"\n                            aria-hidden=\"true\"\n                        />\n                        <bento-tag v-if=\"props.tag\" v-bind=\"props.tag\" class=\"b-list-item__tag\" />\n                    </div>\n                    <span v-if=\"props.description\" class=\"b-list-item__description\">\n                        {{ props.description }}\n                    </span>\n                </template>\n            </div>\n\n            <div v-if=\"hasSlot('end')\" class=\"b-list-item__end\">\n                <slot name=\"end\" />\n            </div>\n\n            <chevron-right-icon v-if=\"props.withChevron\" class=\"b-list-item__chevron\" aria-hidden=\"true\" />\n        </bento-typography>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n    import { BentoStatus } from '@/components/status';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import type { BentoListItemProps } from './list-item.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n  label: null,\n  description: null,\n  showStatus: { type: Boolean, default: false },\n  statusColor: { default: 'blue' },\n  tag: { default: undefined },\n  withChevron: { type: Boolean, default: false },\n  showTopDivider: { type: Boolean, default: false },\n  showBottomDivider: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"click\"]);\n\n    const onItemClick = (): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        emit('click');\n    };\n\n    const onItemKeydown = (event: KeyboardEvent): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            emit('click');\n        }\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-list-item__inner--clickable': props.withChevron,\n        'b-list-item__inner--top-divider': props.showTopDivider,\n        'b-list-item__inner--bottom-divider': props.showBottomDivider,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoListItem` renders an item to be used inside `BentoList`.\n     *\n     * @example\n     * import { BentoList, BentoListItem, BentoButton, BentoToggle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem, BentoButton, BentoToggle },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              >\n     *                  <template #start>\n     *                      <bento-toggle />\n     *                  </template>\n     *                  <template #end>\n     *                      <bento-button variant=\"secondary\">Edit</bento-button>\n     *                  </template>\n     *              </bento-list-item>\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list-item',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list-item.scss\" />\n"],"names":["__default__$1","listElement","computed","props","__default__","slots","useSlots","hasSlot","useHasSlot","onItemClick","emit","onItemKeydown","event","conditionalClasses"],"mappings":";;;;;;;;AA2CI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;iBA/BAC,IAAAC,EAAA,MAAAC,EAAA,SAAA,YAAA,OAAA,IAAA;;;;;;;;;;;;;;;qBCkHAC,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;iBAvEAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAeAI,IAAA,MAAA;AACI,MAAAN,EAAA,eAGAO,EAAA,OAAA;AAAA,IAAY,GAGhBC,IAAA,CAAAC,MAAA;AACI,MAAAT,EAAA,gBAGAS,EAAA,QAAA,WAAAA,EAAA,QAAA,SACIA,EAAA,eAAA,GACAF,EAAA,OAAA;AAAA,IACJ,GAGJG,IAAAX,EAAA,OAAA;AAAA,MAA2C,iCAAAC,EAAA;AAAA,MACA,mCAAAA,EAAA;AAAA,MACE,sCAAAA,EAAA;AAAA,IACG,EAAA;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"list-item.DqTHh8-Z.js","sources":["../../src/components/list/list.vue","../../src/components/list/components/list-item/list-item.vue"],"sourcesContent":["<template>\n    <component :is=\"listElement\" class=\"b-list\">\n        <slot />\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import type { BentoListProps } from './list.types';\n\n    const props = defineProps({\n  type: { default: 'unordered' }\n});\n\n    const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoList` renders an ordered or unordered list container for `BentoListItem` rows.\n     *\n     * @example\n     * import { BentoList, BentoListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              />\n     *              <bento-list-item\n     *                  label=\"Risk configuration\"\n     *                  description=\"Updated yesterday\"\n     *                  :tag=\"{ label: 'Review', variant: 'orange' }\"\n     *              />\n     *          </bento-list>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-list',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list.scss\" />\n","<template>\n    <li class=\"b-list-item\" @click=\"onItemClick\" @keydown=\"onItemKeydown\">\n        <bento-typography\n            class=\"b-list-item__inner\"\n            :class=\"conditionalClasses\"\n            el=\"div\"\n            :role=\"props.withChevron ? 'button' : undefined\"\n            :tabindex=\"props.withChevron ? 0 : undefined\"\n        >\n            <div v-if=\"hasSlot('image')\" class=\"b-list-item__image\">\n                <slot name=\"image\" />\n            </div>\n\n            <div v-if=\"hasSlot('start')\" class=\"b-list-item__start\">\n                <slot name=\"start\" />\n            </div>\n\n            <div class=\"b-list-item__content\">\n                <div v-if=\"hasSlot('content')\" class=\"b-list-item__label\">\n                    <slot name=\"content\" />\n                </div>\n\n                <template v-else>\n                    <div class=\"b-list-item__header\">\n                        <bento-typography v-if=\"props.label\" class=\"b-list-item__label\" el=\"span\" stronger>\n                            {{ props.label }}\n                        </bento-typography>\n                        <bento-status\n                            v-if=\"props.showStatus\"\n                            class=\"b-list-item__status\"\n                            :variant=\"props.statusColor\"\n                            aria-hidden=\"true\"\n                        />\n                        <bento-tag v-if=\"props.tag\" v-bind=\"props.tag\" class=\"b-list-item__tag\" />\n                    </div>\n                    <span v-if=\"props.description\" class=\"b-list-item__description\">\n                        {{ props.description }}\n                    </span>\n                </template>\n            </div>\n\n            <div v-if=\"hasSlot('end')\" class=\"b-list-item__end\">\n                <slot name=\"end\" />\n            </div>\n\n            <chevron-right-icon v-if=\"props.withChevron\" class=\"b-list-item__chevron\" aria-hidden=\"true\" />\n        </bento-typography>\n    </li>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n    import { BentoStatus } from '@/components/status';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import type { BentoListItemProps } from './list-item.types';\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = defineProps({\n  label: null,\n  description: null,\n  showStatus: { type: Boolean, default: false },\n  statusColor: { default: 'blue' },\n  tag: { default: undefined },\n  withChevron: { type: Boolean, default: false },\n  showTopDivider: { type: Boolean, default: false },\n  showBottomDivider: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"click\"]);\n\n    const onItemClick = (): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        emit('click');\n    };\n\n    const onItemKeydown = (event: KeyboardEvent): void => {\n        if (!props.withChevron) {\n            return;\n        }\n        if (event.key === 'Enter' || event.key === ' ') {\n            event.preventDefault();\n            emit('click');\n        }\n    };\n\n    const conditionalClasses = computed(() => ({\n        'b-list-item__inner--clickable': props.withChevron,\n        'b-list-item__inner--top-divider': props.showTopDivider,\n        'b-list-item__inner--bottom-divider': props.showBottomDivider,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * `BentoListItem` renders an item to be used inside `BentoList`.\n     *\n     * @example\n     * import { BentoList, BentoListItem, BentoButton, BentoToggle } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoList, BentoListItem, BentoButton, BentoToggle },\n     *     template: `\n     *          <bento-list>\n     *              <bento-list-item\n     *                  label=\"Payment details\"\n     *                  description=\"Updated 2 hours ago\"\n     *                  :tag=\"{ label: 'Live', variant: 'green' }\"\n     *                  show-bottom-divider\n     *              >\n     *                  <template #start>\n     *                      <bento-toggle />\n     *                  </template>\n     *                  <template #end>\n     *                      <bento-button variant=\"secondary\">Edit</bento-button>\n     *                  </template>\n     *              </bento-list-item>\n     *          </bento-list>\n     *     `\n     * }\n     */\n\n    export default {\n        name: 'bento-list-item',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./list-item.scss\" />\n"],"names":["__default__$1","listElement","computed","props","__default__","slots","useSlots","hasSlot","useHasSlot","onItemClick","emit","onItemKeydown","event","conditionalClasses"],"mappings":";;;;;;;;AA2CI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;iBA/BAC,IAAAC,EAAA,MAAAC,EAAA,SAAA,YAAA,OAAA,IAAA;;;;;;;;;;;;;;;qBCkHAC,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;iBAvEAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAeAI,IAAA,MAAA;AACI,MAAAN,EAAA,eAGAO,EAAA,OAAA;AAAA,IAAY,GAGhBC,IAAA,CAAAC,MAAA;AACI,MAAAT,EAAA,gBAGAS,EAAA,QAAA,WAAAA,EAAA,QAAA,SACIA,EAAA,eAAA,GACAF,EAAA,OAAA;AAAA,IACJ,GAGJG,IAAAX,EAAA,OAAA;AAAA,MAA2C,iCAAAC,EAAA;AAAA,MACA,mCAAAA,EAAA;AAAA,MACE,sCAAAA,EAAA;AAAA,IACG,EAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{listbox-option-tag.BhPVuAjJ.js → listbox-option-tag.CvbE-EuG.js}

@@ -1,5 +1,5 @@
 import { defineComponent as n, computed as e } from "vue";
-import { B as s } from "./tag.CocLKztJ.js";
+import { B as s } from "./tag.D2xagTJv.js";
 import { B as r } from "./typography.C8lPlsbD.js";
 import { n as i } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/listbox-option-tag.css";
@@ -41,4 +41,4 @@ const v = m.exports;
 export {
   v as L
 };
-//# sourceMappingURL=listbox-option-tag.BhPVuAjJ.js.map
+//# sourceMappingURL=listbox-option-tag.CvbE-EuG.js.map

package/dist/chunks/{listbox-option-tag.BhPVuAjJ.js.map → listbox-option-tag.CvbE-EuG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"listbox-option-tag.BhPVuAjJ.js","sources":["../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <span class=\"b-listbox-tag-option\">\n        <span :aria-hidden=\"!!option.label\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types/listbox';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTag","BentoTypography","props","computed"],"mappings":";;;;;AAmBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"listbox-option-tag.CvbE-EuG.js","sources":["../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <span class=\"b-listbox-tag-option\">\n        <span :aria-hidden=\"!!option.label\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types/listbox';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTag","BentoTypography","props","computed"],"mappings":";;;;;AAmBA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAC,EAAA,MAAAD,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}