@adyen/bento-vue2 1.85.0 → 1.86.0

package/dist/chunks/on-click-outside.BW4rkhzG.js

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

package/dist/chunks/on-click-outside.BW4rkhzG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-click-outside.BW4rkhzG.js","sources":["../../src/directives/click-outside/useEventListener/index.ts","../../src/directives/click-outside/on-click-outside.ts"],"sourcesContent":["import type { Fn } from '@/types/functions';\nimport type { MaybeComputedRef } from '@/types/refs';\nimport type { Arrayable, GeneralEventListener } from './types';\nimport { watch } from 'vue';\nimport { defaultWindow, noop, resolveUnref, unrefElement } from '../utils';\n\n/**\n * Verify type of input value\n * @param val Value to be evaluated as string\n * @returns {boolean} true if the value is a \"string\", false if it's something else\n */\nconst isString = (val: unknown): val is string => typeof val === 'string';\n\n/**\n * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.\n *\n * Overload 1: Omitted Window target\n *\n * @see https://vueuse.org/useEventListener\n * @param event\n * @param listener\n * @param options\n */\nexport function useEventListener<E extends keyof WindowEventMap>(\n    event: Arrayable<E>,\n    listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => unknown>,\n    options?: MaybeComputedRef<boolean | AddEventListenerOptions>\n): Fn;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.\n *\n * Overload 2: Explicitly Window target\n *\n * @see https://vueuse.org/useEventListener\n * @param target\n * @param event\n * @param listener\n * @param options\n */\nexport function useEventListener<E extends keyof WindowEventMap>(\n    target: Window,\n    event: Arrayable<E>,\n    listener: Arrayable<(this: Window, ev: WindowEventMap[E]) => unknown>,\n    options?: MaybeComputedRef<boolean | AddEventListenerOptions>\n): Fn;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.\n *\n * Overload 3: Explicitly Document target\n *\n * @see https://vueuse.org/useEventListener\n * @param target\n * @param event\n * @param listener\n * @param options\n */\nexport function useEventListener<E extends keyof DocumentEventMap>(\n    target: DocumentOrShadowRoot,\n    event: Arrayable<E>,\n    listener: Arrayable<(this: Document, ev: DocumentEventMap[E]) => unknown>,\n    options?: MaybeComputedRef<boolean | AddEventListenerOptions>\n): Fn;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.\n *\n * Overload 4: Custom event target with event type infer\n *\n * @see https://vueuse.org/useEventListener\n * @param target\n * @param event\n * @param listener\n * @param options\n */\nexport function useEventListener<Names extends string, EventType = Event>(\n    target: EventTarget,\n    event: Arrayable<Names>,\n    listener: Arrayable<GeneralEventListener<EventType>>,\n    options?: MaybeComputedRef<boolean | AddEventListenerOptions>\n): Fn;\n\n/**\n * Register using addEventListener on mounted, and removeEventListener automatically on unmounted.\n *\n * Overload 5: Custom event target fallback\n *\n * @see https://vueuse.org/useEventListener\n * @param target\n * @param event\n * @param listener\n * @param options\n */\nexport function useEventListener<EventType = Event>(\n    target: MaybeComputedRef<EventTarget | null | undefined>,\n    event: Arrayable<string>,\n    listener: Arrayable<GeneralEventListener<EventType>>,\n    options?: MaybeComputedRef<boolean | AddEventListenerOptions>\n): Fn;\n\nexport function useEventListener(...args) {\n    let target: MaybeComputedRef<EventTarget> | undefined;\n    let events: Arrayable<string>;\n    let listeners: Arrayable<EventListenerOrEventListenerObject>;\n    let options: MaybeComputedRef<boolean | AddEventListenerOptions> | undefined;\n\n    if (isString(args[0]) || Array.isArray(args[0])) {\n        [events, listeners, options] = args;\n        target = defaultWindow;\n    } else {\n        [target, events, listeners, options] = args;\n    }\n\n    if (!target) {\n        return noop;\n    }\n\n    if (!Array.isArray(events)) {\n        events = [events];\n    }\n\n    if (!Array.isArray(listeners)) {\n        listeners = [listeners];\n    }\n\n    const cleanups: Array<() => void> = [];\n    const cleanup = () => {\n        cleanups.forEach(fn => fn());\n        cleanups.length = 0;\n    };\n\n    const register = (\n        el: EventTarget,\n        event: string,\n        listener: EventListenerOrEventListenerObject,\n        registerOptions: boolean | AddEventListenerOptions\n    ) => {\n        // eslint-disable-next-line scanjs-rules/call_addEventListener\n        el.addEventListener(event, listener, registerOptions);\n        return () => el.removeEventListener(event, listener, registerOptions);\n    };\n\n    const stopWatch = watch(\n        () => [unrefElement(target as any), resolveUnref(options)],\n        ([el, stopWatchOptions]) => {\n            cleanup();\n\n            if (!el) {\n                return;\n            }\n\n            cleanups.push(\n                ...(events as Array<string>).flatMap(event =>\n                    (listeners as Array<EventListenerOrEventListenerObject>).map(listener =>\n                        register(\n                            el as EventTarget,\n                            event,\n                            listener as EventListenerOrEventListenerObject,\n                            stopWatchOptions as boolean | AddEventListenerOptions\n                        )\n                    )\n                )\n            );\n        },\n        { immediate: true, flush: 'post' }\n    );\n\n    const stop = () => {\n        stopWatch();\n        cleanup();\n    };\n\n    return stop;\n}\n","import type { Fn } from '@/types/functions';\nimport type { MaybeElementRef } from '@/types/elements';\nimport type { OnClickOutsideHandler, OnClickOutsideOptions } from './types';\nimport { useEventListener } from './useEventListener';\nimport { defaultWindow, isIOS, noop, unrefElement } from './utils';\n\n// eslint-disable-next-line no-underscore-dangle\nlet _iOSWorkaround = false;\n\n/**\n * Listen for clicks outside of an element.\n *\n * @see https://vueuse.org/onClickOutside\n * @param target\n * @param handler\n * @param options\n */\nexport function onClickOutside<T extends OnClickOutsideOptions>(\n    target: MaybeElementRef,\n    handler: OnClickOutsideHandler,\n    options: T = {} as T\n) {\n    const { window = defaultWindow, ignore = [], capture = true, detectIframe = false } = options;\n\n    if (!window) {\n        return;\n    }\n\n    // Fixes \"onClickOutside not working on Safari iOS\": https://github.com/vueuse/vueuse/issues/1520\n    // How it works: https://stackoverflow.com/a/39712411\n    if (isIOS && !_iOSWorkaround) {\n        _iOSWorkaround = true;\n        // eslint-disable-next-line scanjs-rules/call_addEventListener\n        Array.from(window.document.body.children).forEach((el: Element) => el.addEventListener('click', noop));\n    }\n\n    let shouldListen = true;\n\n    const shouldIgnore = (event: PointerEvent) =>\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        ignore.some(target => {\n            if (typeof target === 'string') {\n                return Array.from(window.document.querySelectorAll(target)).some(\n                    (el: Element) => el === event.target || event.composedPath().includes(el)\n                );\n            }\n\n            const el = unrefElement(target as any) as EventTarget;\n            return el && (event.target === el || event.composedPath().includes(el));\n        });\n\n    const listener = (event: PointerEvent) => {\n        const el = unrefElement(target as any) as EventTarget;\n\n        if (!el || el === event.target || event.composedPath().includes(el)) {\n            return;\n        }\n\n        if (event.detail === 0) {\n            shouldListen = !shouldIgnore(event);\n        }\n\n        if (!shouldListen) {\n            shouldListen = true;\n            return;\n        }\n\n        handler(event);\n    };\n\n    const cleanup = [\n        useEventListener(window, 'click', listener, { passive: true, capture }),\n        useEventListener(\n            window,\n            'pointerdown',\n            e => {\n                const el = unrefElement(target as any) as EventTarget;\n                if (el) {\n                    shouldListen = !e.composedPath().includes(el) && !shouldIgnore(e);\n                }\n            },\n            { passive: true }\n        ),\n        useEventListener(\n            window,\n            'pointerup',\n            e => {\n                const el = unrefElement(target as any) as EventTarget;\n                if (el) {\n                    shouldListen = shouldListen && !e.composedPath().includes(el) && !shouldIgnore(e);\n                }\n            },\n            { passive: true }\n        ),\n        detectIframe &&\n            useEventListener(window, 'blur', event => {\n                const el: Element = unrefElement(target as any);\n                if (\n                    window.document.activeElement?.tagName === 'IFRAME' &&\n                    !el?.contains(window.document.activeElement)\n                ) {\n                    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                    handler(event as any);\n                }\n            }),\n    ].filter(Boolean) as Array<Fn>;\n\n    const stop = () => cleanup.forEach(fn => fn());\n\n    // eslint-disable-next-line consistent-return\n    return stop;\n}\n"],"names":["isString","val","useEventListener","args","target","events","listeners","options","defaultWindow","noop","cleanups","cleanup","fn","register","el","event","listener","registerOptions","stopWatch","watch","unrefElement","resolveUnref","stopWatchOptions","_iOSWorkaround","onClickOutside","handler","window","ignore","capture","detectIframe","isIOS","shouldListen","shouldIgnore","e","_a"],"mappings":"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"}

package/dist/chunks/{pagination.spAA5CX0.js → pagination.wuEIlDcq.js}

@@ -1,10 +1,10 @@
 import { defineComponent as d, computed as p, useSlots as S, useAttrs as B, ref as N, toRefs as I } from "vue";
-import { B as f } from "./typography.Bq-EGj9y.js";
-import { B as L } from "./dropdown.ByH2zHxF.js";
+import { B as f } from "./typography.C8lPlsbD.js";
+import { B as L } from "./dropdown.DDPfKc74.js";
 import { g as x } from "./generate-uid.NJ8tVoha.js";
 import { u as m, g as $, a as w } from "./index.B6WW_F-J.js";
 import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as O } from "./button.DIU6m9wD.js";
+import { B as O } from "./button.Ctj3rkxw.js";
 /* empty css              */
 import { u as F } from "./aria-label.CaUURpnB.js";
 import { u as R } from "./use-has-slot.C9lQZ6nz.js";
@@ -335,4 +335,4 @@ const Dt = wt.exports;
 export {
   Dt as B
 };
-//# sourceMappingURL=pagination.spAA5CX0.js.map
+//# sourceMappingURL=pagination.wuEIlDcq.js.map

package/dist/chunks/{pagination.spAA5CX0.js.map → pagination.wuEIlDcq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pagination.spAA5CX0.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../../ui-assets/icons-16/dist/vue/chevron-right-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"predefinedDropdownOptions\"\n                        :model-value=\"itemsPerPage\"\n                        @update:model-value=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/core/utils/ts';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  itemsPerPage: { default: 50 },\n  totalCount: { default: null }\n});\n\n    const emit = defineEmits([\"select\"]);\n\n    const dropdownId = generateUid('b-pagination-context-number-elements');\n    const predefinedDropdownOptions = computed(() => [\n        { label: n(10), value: 10 },\n        { label: n(20), value: 20 },\n        { label: n(50), value: 50 },\n        { label: n(75), value: 75 },\n        { label: n(100), value: 100 },\n    ]);\n    const i18nComponent = getI18nComponent();\n\n    const onSelectChange = (selectedNumberOfResults: number) => {\n        emit('select', selectedNumberOfResults);\n    };\n\n    const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageNumber')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageNumber', { page: n(page) })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :model-value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @update:model-value=\"onPageSelectChange\"\n                    />\n                </template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"totalPages === 1\" el=\"span\">\n            {{ t('pageOneOfOne') }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page: n(page) }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  page: { default: 1 },\n  totalPages: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n    const emit = defineEmits([\"page-selected\"]);\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('bento-pagination-context-current-page');\n    const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n    const i18nComponent = getI18nComponent();\n\n    // Generate a list of pages from 1 to \"totalPages\"\n    const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n        label: n(value),\n        value,\n    });\n    const transformToPageNumber = (_, index) => index + 1;\n    const listOfAvailablePages = computed(() =>\n        Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n    );\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\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=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#001222\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.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    <ul class=\"b-pagination-controls\">\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hasNext: { type: Boolean, default: null },\n  page: null,\n  totalPages: { default: null }\n});\n\n    const emit = defineEmits([\"navigate\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isCurrentPageFirst = computed(() => props.page === 1);\n    const isCurrentPageLast = computed(() => props.page === props.totalPages);\n    const isNextButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        return hasNoNextPage || isCurrentPageLast.value;\n    });\n    const isLastPageButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        const hasNoTotalPagesNumber = !props.totalPages;\n\n        return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n    });\n\n    const navigate = (pageArg: number) => {\n        emit('navigate', pageArg);\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :total-count=\"totalCount\"\n                    :virtual-scroll=\"virtualScroll\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRefs, useAttrs, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = defineProps({\n  ariaLabel: { default: null },\n  hasNext: { type: Boolean, default: null },\n  hidePageSize: { type: Boolean, default: false },\n  page: { default: 1 },\n  size: { default: 20 },\n  totalCount: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"navigate\", \"items-page\", \"update:page\", \"update:size\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const attrs = useAttrs();\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n    });\n\n    const totalPages = computed(() =>\n        !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n    );\n\n    const navigate = (pageArg: number, itemsPerPage?: number) => {\n        if (props.hidePageSize) {\n            emit('navigate', pageArg);\n        } else {\n            emit('navigate', pageArg, itemsPerPage ?? props?.size);\n        }\n        emit('update:page', pageArg);\n    };\n\n    const onPageSelected = (pageNumber: number) => {\n        navigate(pageNumber);\n    };\n\n    const onItemsPerPageChange = (elements: number) => {\n        emit('items-page', elements);\n        emit('update:size', elements);\n\n        // Always go to first page when the\n        // number of items page changes\n        navigate(1, elements);\n    };\n\n    const navigationConditionalClasses = () => ({\n        'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","t","useI18n","dropdownId","generateUid","predefinedDropdownOptions","computed","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","emit","translationPathKey","props","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","uuid$3","_sfc_main$5","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ref","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":"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"}
+{"version":3,"file":"pagination.wuEIlDcq.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../../ui-assets/icons-16/dist/vue/chevron-right-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"predefinedDropdownOptions\"\n                        :model-value=\"itemsPerPage\"\n                        @update:model-value=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/core/utils/ts';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  itemsPerPage: { default: 50 },\n  totalCount: { default: null }\n});\n\n    const emit = defineEmits([\"select\"]);\n\n    const dropdownId = generateUid('b-pagination-context-number-elements');\n    const predefinedDropdownOptions = computed(() => [\n        { label: n(10), value: 10 },\n        { label: n(20), value: 20 },\n        { label: n(50), value: 50 },\n        { label: n(75), value: 75 },\n        { label: n(100), value: 100 },\n    ]);\n    const i18nComponent = getI18nComponent();\n\n    const onSelectChange = (selectedNumberOfResults: number) => {\n        emit('select', selectedNumberOfResults);\n    };\n\n    const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageNumber')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageNumber', { page: n(page) })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :model-value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @update:model-value=\"onPageSelectChange\"\n                    />\n                </template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"totalPages === 1\" el=\"span\">\n            {{ t('pageOneOfOne') }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page: n(page) }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  page: { default: 1 },\n  totalPages: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n    const emit = defineEmits([\"page-selected\"]);\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('bento-pagination-context-current-page');\n    const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n    const i18nComponent = getI18nComponent();\n\n    // Generate a list of pages from 1 to \"totalPages\"\n    const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n        label: n(value),\n        value,\n    });\n    const transformToPageNumber = (_, index) => index + 1;\n    const listOfAvailablePages = computed(() =>\n        Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n    );\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\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=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#001222\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.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    <ul class=\"b-pagination-controls\">\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hasNext: { type: Boolean, default: null },\n  page: null,\n  totalPages: { default: null }\n});\n\n    const emit = defineEmits([\"navigate\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isCurrentPageFirst = computed(() => props.page === 1);\n    const isCurrentPageLast = computed(() => props.page === props.totalPages);\n    const isNextButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        return hasNoNextPage || isCurrentPageLast.value;\n    });\n    const isLastPageButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        const hasNoTotalPagesNumber = !props.totalPages;\n\n        return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n    });\n\n    const navigate = (pageArg: number) => {\n        emit('navigate', pageArg);\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :total-count=\"totalCount\"\n                    :virtual-scroll=\"virtualScroll\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRefs, useAttrs, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = defineProps({\n  ariaLabel: { default: null },\n  hasNext: { type: Boolean, default: null },\n  hidePageSize: { type: Boolean, default: false },\n  page: { default: 1 },\n  size: { default: 20 },\n  totalCount: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n\n    const emit = defineEmits([\"navigate\", \"items-page\", \"update:page\", \"update:size\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const attrs = useAttrs();\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n    });\n\n    const totalPages = computed(() =>\n        !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n    );\n\n    const navigate = (pageArg: number, itemsPerPage?: number) => {\n        if (props.hidePageSize) {\n            emit('navigate', pageArg);\n        } else {\n            emit('navigate', pageArg, itemsPerPage ?? props?.size);\n        }\n        emit('update:page', pageArg);\n    };\n\n    const onPageSelected = (pageNumber: number) => {\n        navigate(pageNumber);\n    };\n\n    const onItemsPerPageChange = (elements: number) => {\n        emit('items-page', elements);\n        emit('update:size', elements);\n\n        // Always go to first page when the\n        // number of items page changes\n        navigate(1, elements);\n    };\n\n    const navigationConditionalClasses = () => ({\n        'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","t","useI18n","dropdownId","generateUid","predefinedDropdownOptions","computed","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","emit","translationPathKey","props","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","uuid$3","_sfc_main$5","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ref","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":"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"}

package/dist/chunks/{payment-method.BKXLPDC9.js → payment-method.B3CkgsAY.js}

@@ -1,5 +1,5 @@
 import { ref as n, watch as l, defineComponent as i, toRef as h, computed as y, inject as v } from "vue";
-import { B as C } from "./typography.Bq-EGj9y.js";
+import { B as C } from "./typography.C8lPlsbD.js";
 import { S as g } from "./summary-grid.keys.Xx-W5a2w.js";
 import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/payment-method.css";
@@ -73,4 +73,4 @@ const O = H.exports;
 export {
   O as B
 };
-//# sourceMappingURL=payment-method.BKXLPDC9.js.map
+//# sourceMappingURL=payment-method.B3CkgsAY.js.map

package/dist/chunks/{payment-method.BKXLPDC9.js.map → payment-method.B3CkgsAY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"payment-method.BKXLPDC9.js","sources":["../../src/components/payment-method/composables/use-payment-icon/use-payment-icon.ts","../../../ui-assets/icons-pm/dist/vue/unknowncard.vue","../../src/components/payment-method/payment-method.vue"],"sourcesContent":["import { ref, type Ref, watch } from 'vue';\n\n/**\n * Generates the payment icon URl from a payment icons string.\n * @param paymentType - the payment icon you wish to generate a URL for.\n * @returns the payment icon URL to the SVG for a specific payment icon.\n */\nexport const paymentMethodToCdnUrl = (paymentType: string) =>\n    `https://checkoutshopper-live.cdn.adyen.com/checkoutshopper/images/logos/${paymentType}.svg`;\n/**\n * Dynamically retrieves the payment method icon SVG from the @adyen/ui-assets-payment-method-icons package.\n *\n * @param type the type of payment method\n * @param useFallback if fallback icon should be used in case of error\n * @returns\n */\nexport const usePaymentIcon = (type: Ref<string>) => {\n    const paymentType = ref(type);\n    const paymentIconSrc = ref<string>();\n\n    watch(\n        paymentType,\n        newPaymentType => {\n            if (newPaymentType == null || newPaymentType === 'Unknowncard') {\n                return;\n            }\n            // TODO: what about when to use checkoutshopper-test? Should we add this to the config of Bento?\n            paymentIconSrc.value = paymentMethodToCdnUrl(newPaymentType);\n        },\n        { immediate: true }\n    );\n\n    return paymentIconSrc;\n};\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-pm\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"26\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-pm-unknowncard__a' + uuid + ')'\"><path fill=\"#fff\" d=\"M0 0H40V26H0V0Z\"/><path fill=\"#00112C\" d=\"M32 9V8C32 7.20435 31.6839 6.44129 31.1213 5.87868C30.5587 5.31607 29.7956 5 29 5H11C10.2044 5 9.44129 5.31607 8.87868 5.87868C8.31607 6.44129 8 7.20435 8 8V9H32Z\"/><path fill=\"#00112C\" d=\"M8 12V18C8 18.7956 8.31607 19.5587 8.87868 20.1213C9.44129 20.6839 10.2044 21 11 21H29C29.7956 21 30.5587 20.6839 31.1213 20.1213C31.6839 19.5587 32 18.7956 32 18V12H8Z\"/><rect width=\"5\" height=\"2\" x=\"24\" y=\"16\" fill=\"#fff\" rx=\".5\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-pm-unknowncard__a' + uuid\"><rect width=\"40\" height=\"26\" fill=\"#fff\"/></clipPath></defs></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    <div class=\"b-payment-method\">\n        <div class=\"b-payment-method__icon-container\">\n            <img\n                v-if=\"type !== 'Unknowncard' && !hasErroredOnImage\"\n                aria-hidden=\"true\"\n                class=\"b-payment-method__icon\"\n                :class=\"conditionalIconClasses\"\n                :alt=\"label\"\n                :src=\"paymentMethodIconSrc\"\n                @error=\"onSrcError\"\n            />\n            <unknown-card-icon v-else :svg-title=\"label\" aria-hidden=\"true\" />\n        </div>\n        <div v-if=\"label\" class=\"b-payment-method__label\">\n            <span v-if=\"isSummaryGridLayout\">{{ label }}</span>\n            <bento-typography v-else el=\"span\">{{ label }}</bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, inject, ref, toRef, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys';\n    import { type BentoSummaryGridLayout } from '@/components/summary-grid';\n    import { usePaymentIcon } from './composables/use-payment-icon/use-payment-icon';\n    import type { BentoPaymentMethodProps } from './payment-method.types';\n    import UnknownCardIcon from '@adyen/ui-assets-payment-method-icons/vue/unknowncard';\n\n    const props = defineProps({\n  label: { default: null },\n  small: { type: Boolean, default: false },\n  type: { default: 'Unknowncard' }\n});\n    const type = toRef(props, 'type');\n    const hasErroredOnImage = ref(false);\n    const paymentMethodIconSrc = usePaymentIcon(type);\n    const conditionalIconClasses = computed(() => ({\n        'b-payment-method__icon--small': props.small,\n    }));\n\n    /* == Summary-grid styles == */\n    const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject(\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        () => ({\n            isSummaryGridLayout: false,\n        })\n    );\n\n    const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid();\n\n    /**\n     * This funciton is fired if the payment image source is not valid and has thrown an error.\n     */\n    const onSrcError = () => {\n        hasErroredOnImage.value = true;\n    };\n\n    // Reset the image error to be able to load the new payment type\n    watch(\n        () => type.value,\n        (newType, oldType) => {\n            if (newType !== oldType) {\n                hasErroredOnImage.value = false;\n            }\n        }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A payment method type component to display the type's icon and label.\n     *\n     * @example\n     * import { BentoPaymentMethod} from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPaymentMethod },\n     *     template: `\n     *          <bento-payment-method type=\"ideal\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-payment-method',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./payment-method.scss\" />\n"],"names":["paymentMethodToCdnUrl","paymentType","usePaymentIcon","type","ref","paymentIconSrc","watch","newPaymentType","uuid","_sfc_main$1","__default__","defineComponent","toRef","props","hasErroredOnImage","paymentMethodIconSrc","conditionalIconClasses","computed","registerPaymentMethodInSummaryGrid","inject","SUMMARY_GRID_LAYOUT_INJECTION_KEY","isSummaryGridLayout","onSrcError","newType","oldType"],"mappings":";;;;;AAOO,MAAAA,IAAA,CAAAC,MAAA,2EAAAA,CAAA,QASAC,IAAA,CAAAC,MAAA;AACH,QAAAF,IAAAG,EAAAD,CAAA,GACAE,IAAAD,EAAA;AAEA,SAAAE;AAAA,IAAAL;AAAA,IACI,CAAAM,MAAA;AAEI,MAAAA,KAAA,QAAAA,MAAA,kBAIAF,EAAA,QAAAL,EAAAO,CAAA;AAAA,IAA2D;AAAA,IAC/D,EAAA,WAAA,GAAA;AAAA,EACkB,GAGtBF;AACJ;AC1BA,IAAAG,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;qBCsEIE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;iBAnDAR,IAAAS,EAAAC,GAAA,MAAA,GACAC,IAAAV,EAAA,EAAA,GACAW,IAAAb,EAAAC,CAAA,GACAa,IAAAC,EAAA,OAAA;AAAA,MAA+C,iCAAAJ,EAAA;AAAA,IACJ,EAAA,GAI3CK,IAAAC;AAAA,MAAmEC;AAAA,MAC/D,OAAA;AAAA,QACO,qBAAA;AAAA,MACkB;AAAA,IACzB,GAGJ,EAAA,qBAAAC,EAAA,IAAAH,EAAA,GAKAI,IAAA,MAAA;AACI,MAAAR,EAAA,QAAA;AAAA,IAA0B;AAI9B,WAAAR;AAAA,MAAA,MAAAH,EAAA;AAAA,MACe,CAAAoB,GAAAC,MAAA;AAEP,QAAAD,MAAAC,MACIV,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ;;;;;;;;;;;;;;;"}
+{"version":3,"file":"payment-method.B3CkgsAY.js","sources":["../../src/components/payment-method/composables/use-payment-icon/use-payment-icon.ts","../../../ui-assets/icons-pm/dist/vue/unknowncard.vue","../../src/components/payment-method/payment-method.vue"],"sourcesContent":["import { ref, type Ref, watch } from 'vue';\n\n/**\n * Generates the payment icon URl from a payment icons string.\n * @param paymentType - the payment icon you wish to generate a URL for.\n * @returns the payment icon URL to the SVG for a specific payment icon.\n */\nexport const paymentMethodToCdnUrl = (paymentType: string) =>\n    `https://checkoutshopper-live.cdn.adyen.com/checkoutshopper/images/logos/${paymentType}.svg`;\n/**\n * Dynamically retrieves the payment method icon SVG from the @adyen/ui-assets-payment-method-icons package.\n *\n * @param type the type of payment method\n * @param useFallback if fallback icon should be used in case of error\n * @returns\n */\nexport const usePaymentIcon = (type: Ref<string>) => {\n    const paymentType = ref(type);\n    const paymentIconSrc = ref<string>();\n\n    watch(\n        paymentType,\n        newPaymentType => {\n            if (newPaymentType == null || newPaymentType === 'Unknowncard') {\n                return;\n            }\n            // TODO: what about when to use checkoutshopper-test? Should we add this to the config of Bento?\n            paymentIconSrc.value = paymentMethodToCdnUrl(newPaymentType);\n        },\n        { immediate: true }\n    );\n\n    return paymentIconSrc;\n};\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-pm\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"26\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-pm-unknowncard__a' + uuid + ')'\"><path fill=\"#fff\" d=\"M0 0H40V26H0V0Z\"/><path fill=\"#00112C\" d=\"M32 9V8C32 7.20435 31.6839 6.44129 31.1213 5.87868C30.5587 5.31607 29.7956 5 29 5H11C10.2044 5 9.44129 5.31607 8.87868 5.87868C8.31607 6.44129 8 7.20435 8 8V9H32Z\"/><path fill=\"#00112C\" d=\"M8 12V18C8 18.7956 8.31607 19.5587 8.87868 20.1213C9.44129 20.6839 10.2044 21 11 21H29C29.7956 21 30.5587 20.6839 31.1213 20.1213C31.6839 19.5587 32 18.7956 32 18V12H8Z\"/><rect width=\"5\" height=\"2\" x=\"24\" y=\"16\" fill=\"#fff\" rx=\".5\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-pm-unknowncard__a' + uuid\"><rect width=\"40\" height=\"26\" fill=\"#fff\"/></clipPath></defs></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    <div class=\"b-payment-method\">\n        <div class=\"b-payment-method__icon-container\">\n            <img\n                v-if=\"type !== 'Unknowncard' && !hasErroredOnImage\"\n                aria-hidden=\"true\"\n                class=\"b-payment-method__icon\"\n                :class=\"conditionalIconClasses\"\n                :alt=\"label\"\n                :src=\"paymentMethodIconSrc\"\n                @error=\"onSrcError\"\n            />\n            <unknown-card-icon v-else :svg-title=\"label\" aria-hidden=\"true\" />\n        </div>\n        <div v-if=\"label\" class=\"b-payment-method__label\">\n            <span v-if=\"isSummaryGridLayout\">{{ label }}</span>\n            <bento-typography v-else el=\"span\">{{ label }}</bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, defineComponent, inject, ref, toRef, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys';\n    import { type BentoSummaryGridLayout } from '@/components/summary-grid';\n    import { usePaymentIcon } from './composables/use-payment-icon/use-payment-icon';\n    import type { BentoPaymentMethodProps } from './payment-method.types';\n    import UnknownCardIcon from '@adyen/ui-assets-payment-method-icons/vue/unknowncard';\n\n    const props = defineProps({\n  label: { default: null },\n  small: { type: Boolean, default: false },\n  type: { default: 'Unknowncard' }\n});\n    const type = toRef(props, 'type');\n    const hasErroredOnImage = ref(false);\n    const paymentMethodIconSrc = usePaymentIcon(type);\n    const conditionalIconClasses = computed(() => ({\n        'b-payment-method__icon--small': props.small,\n    }));\n\n    /* == Summary-grid styles == */\n    const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject(\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        () => ({\n            isSummaryGridLayout: false,\n        })\n    );\n\n    const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid();\n\n    /**\n     * This funciton is fired if the payment image source is not valid and has thrown an error.\n     */\n    const onSrcError = () => {\n        hasErroredOnImage.value = true;\n    };\n\n    // Reset the image error to be able to load the new payment type\n    watch(\n        () => type.value,\n        (newType, oldType) => {\n            if (newType !== oldType) {\n                hasErroredOnImage.value = false;\n            }\n        }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A payment method type component to display the type's icon and label.\n     *\n     * @example\n     * import { BentoPaymentMethod} from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPaymentMethod },\n     *     template: `\n     *          <bento-payment-method type=\"ideal\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-payment-method',\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./payment-method.scss\" />\n"],"names":["paymentMethodToCdnUrl","paymentType","usePaymentIcon","type","ref","paymentIconSrc","watch","newPaymentType","uuid","_sfc_main$1","__default__","defineComponent","toRef","props","hasErroredOnImage","paymentMethodIconSrc","conditionalIconClasses","computed","registerPaymentMethodInSummaryGrid","inject","SUMMARY_GRID_LAYOUT_INJECTION_KEY","isSummaryGridLayout","onSrcError","newType","oldType"],"mappings":";;;;;AAOO,MAAAA,IAAA,CAAAC,MAAA,2EAAAA,CAAA,QASAC,IAAA,CAAAC,MAAA;AACH,QAAAF,IAAAG,EAAAD,CAAA,GACAE,IAAAD,EAAA;AAEA,SAAAE;AAAA,IAAAL;AAAA,IACI,CAAAM,MAAA;AAEI,MAAAA,KAAA,QAAAA,MAAA,kBAIAF,EAAA,QAAAL,EAAAO,CAAA;AAAA,IAA2D;AAAA,IAC/D,EAAA,WAAA,GAAA;AAAA,EACkB,GAGtBF;AACJ;AC1BA,IAAAG,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;qBCsEIE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;iBAnDAR,IAAAS,EAAAC,GAAA,MAAA,GACAC,IAAAV,EAAA,EAAA,GACAW,IAAAb,EAAAC,CAAA,GACAa,IAAAC,EAAA,OAAA;AAAA,MAA+C,iCAAAJ,EAAA;AAAA,IACJ,EAAA,GAI3CK,IAAAC;AAAA,MAAmEC;AAAA,MAC/D,OAAA;AAAA,QACO,qBAAA;AAAA,MACkB;AAAA,IACzB,GAGJ,EAAA,qBAAAC,EAAA,IAAAH,EAAA,GAKAI,IAAA,MAAA;AACI,MAAAR,EAAA,QAAA;AAAA,IAA0B;AAI9B,WAAAR;AAAA,MAAA,MAAAH,EAAA;AAAA,MACe,CAAAoB,GAAAC,MAAA;AAEP,QAAAD,MAAAC,MACIV,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ;;;;;;;;;;;;;;;"}

package/dist/chunks/popover.types.DkiRUQ4Z.js

@@ -0,0 +1,6 @@
+import { b as o } from "./popper-container.D4dworD4.js";
+const i = { ...o };
+export {
+  i as B
+};
+//# sourceMappingURL=popover.types.DkiRUQ4Z.js.map

package/dist/chunks/{popover.types.Zm8nugBw.js.map → popover.types.DkiRUQ4Z.js.map}

@@ -1 +1 @@
-{"version":3,"file":"popover.types.Zm8nugBw.js","sources":["../../src/components/popover/popover.types.ts"],"sourcesContent":["import { PopperContainerPosition } from '../popper-container/popper-container.types';\nimport type { Placement } from '@floating-ui/vue';\nimport type {\n    BentoButtonActionsLayout,\n    BentoButtonActionsList,\n} from '../button/components/button-actions/button-actions.types';\nimport { type VueNodeElement } from '@/types/elements';\nimport type { Options as FocusTrapOptions } from 'focus-trap/index';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoPopoverPositions = { ...PopperContainerPosition };\nexport type BentoPopoverPositions = PopperContainerPosition;\n\nexport interface BentoPopoverProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     * First element in the list will be rendered as \"primary\".\n     * All elements after the first will be rendered as \"secondary\".\n     *\n     * Each object in the list should have a `title`, an `event` and\n     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n     *\n     * `title`: Button's text.\n     *\n     * `event`: Event triggered when clicking the Button.\n     *\n     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   icon: FourPeopleIcon\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     * }]\n     * ```\n     */\n    actions?: BentoButtonActionsList;\n\n    /**\n     * Defines the layout in which the button actions is presented.\n     * It can be one of:\n     *\n     * @values BUTTONS_END\n     * @values FILL_CONTAINER\n     * @values SPACE_BETWEEN\n     * @values VERTICAL_STACK\n     */\n    actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n    /**\n     * Defines a string value that provides an accessible name for the popover.\n     * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the \"default\" slot.\n     */\n    divider?: boolean;\n\n    /**\n     * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.\n     * */\n    disableFocusTrap?: boolean;\n\n    /**\n     * Adds a \"dismiss\" icon that triggers the \"dismiss\" event. Requires the `title` prop to be set.\n     */\n    dismissible?: boolean;\n\n    /**\n     * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...].\n     * Useful when not using auto as starting placement.\n     * https://floating-ui.com/docs/flip#fallbackplacements\n     */\n    fallbackPosition?: Array<Placement>;\n\n    /**\n     * Sets the size of the container to fit its content\n     */\n    fitContent?: boolean;\n\n    /**\n     * Instructs popover to be visible outside of the containing container.\n     * Useful when component would be used in limited containers like Modal, Side panel, etc.\n     * @see {@link https://floating-ui.com/docs/usefloating#strategy}\n     */\n    fixedPositioning?: boolean;\n\n    /**\n     * Toggles the popover open and closed\n     */\n    open?: boolean;\n\n    /**\n     * Displays the popover in a large size.\n     */\n    large?: boolean;\n\n    /**\n     * @deprecated\n     * NOTE: This property no longer functions since moving to the floating-ui framework.\n     */\n    modifiers?: Array<unknown>;\n\n    /**\n     * Popover's position relative to the target element.\n     * Possible values are:\n     * 'auto',    'auto-start',    'auto-end',\n     * 'top',     'top-start',     'top-end'\n     * 'right',   'right-start',   'right-end'\n     * 'bottom',  'bottom-start',  'bottom-end'\n     * 'left',    'left-start',    'left-end'\n     */\n    position?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n    /**\n     * Displays the popover in a small size.\n     */\n    small?: boolean;\n\n    /**\n     * Indicates the title you want to give the popover.\n     */\n    title?: string;\n\n    /**\n     * Popover's target element.\n     * The popover will position itself relatively to target element, in specified position.\n     */\n    targetElement: VueNodeElement;\n\n    /**\n     * Activates focus trap for both arrow and tab keys.\n     */\n    trapAll?: boolean;\n\n    /**\n     * Configurations for the focus-trap when trap-all is active.\n     */\n    trapAllOptions?: FocusTrapOptions;\n\n    /**\n     * Displays the popover without padding.\n     */\n    withoutSpace?: boolean;\n\n    /**\n     * Allows content to appear outside of the popover. Used when there are nested popovers.\n     */\n    overflowVisible?: boolean;\n}\n"],"names":["BentoPopoverPositions","PopperContainerPosition"],"mappings":";AAYO,MAAMA,IAAwB,EAAE,GAAGC,EAAA;"}
+{"version":3,"file":"popover.types.DkiRUQ4Z.js","sources":["../../src/components/popover/popover.types.ts"],"sourcesContent":["import { PopperContainerPosition } from '../popper-container/popper-container.types';\nimport type { Placement } from '@floating-ui/vue';\nimport type {\n    BentoButtonActionsLayout,\n    BentoButtonActionsList,\n} from '../button/components/button-actions/button-actions.types';\nimport { type VueNodeElement } from '@/types/elements';\nimport type { Options as FocusTrapOptions } from 'focus-trap/index';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoPopoverPositions = { ...PopperContainerPosition };\nexport type BentoPopoverPositions = PopperContainerPosition;\n\nexport interface BentoPopoverProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     * First element in the list will be rendered as \"primary\".\n     * All elements after the first will be rendered as \"secondary\".\n     *\n     * Each object in the list should have a `title`, an `event` and\n     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n     *\n     * `title`: Button's text.\n     *\n     * `event`: Event triggered when clicking the Button.\n     *\n     * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   icon: FourPeopleIcon\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     * }]\n     * ```\n     */\n    actions?: BentoButtonActionsList;\n\n    /**\n     * Defines the layout in which the button actions is presented.\n     * It can be one of:\n     *\n     * @values BUTTONS_END\n     * @values FILL_CONTAINER\n     * @values SPACE_BETWEEN\n     * @values VERTICAL_STACK\n     */\n    actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n    /**\n     * Defines a string value that provides an accessible name for the popover.\n     * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n     */\n    ariaLabel?: string;\n\n    /**\n     * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the \"default\" slot.\n     */\n    divider?: boolean;\n\n    /**\n     * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it.\n     * */\n    disableFocusTrap?: boolean;\n\n    /**\n     * Adds a \"dismiss\" icon that triggers the \"dismiss\" event. Requires the `title` prop to be set.\n     */\n    dismissible?: boolean;\n\n    /**\n     * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...].\n     * Useful when not using auto as starting placement.\n     * https://floating-ui.com/docs/flip#fallbackplacements\n     */\n    fallbackPosition?: Array<Placement>;\n\n    /**\n     * Sets the size of the container to fit its content\n     */\n    fitContent?: boolean;\n\n    /**\n     * Instructs popover to be visible outside of the containing container.\n     * Useful when component would be used in limited containers like Modal, Side panel, etc.\n     * @see {@link https://floating-ui.com/docs/usefloating#strategy}\n     */\n    fixedPositioning?: boolean;\n\n    /**\n     * Toggles the popover open and closed\n     */\n    open?: boolean;\n\n    /**\n     * Displays the popover in a large size.\n     */\n    large?: boolean;\n\n    /**\n     * @deprecated\n     * NOTE: This property no longer functions since moving to the floating-ui framework.\n     */\n    modifiers?: Array<unknown>;\n\n    /**\n     * Popover's position relative to the target element.\n     * Possible values are:\n     * 'auto',    'auto-start',    'auto-end',\n     * 'top',     'top-start',     'top-end'\n     * 'right',   'right-start',   'right-end'\n     * 'bottom',  'bottom-start',  'bottom-end'\n     * 'left',    'left-start',    'left-end'\n     */\n    position?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n    /**\n     * Displays the popover in a small size.\n     */\n    small?: boolean;\n\n    /**\n     * Indicates the title you want to give the popover.\n     */\n    title?: string;\n\n    /**\n     * Popover's target element.\n     * The popover will position itself relatively to target element, in specified position.\n     */\n    targetElement: VueNodeElement;\n\n    /**\n     * Activates focus trap for both arrow and tab keys.\n     */\n    trapAll?: boolean;\n\n    /**\n     * Configurations for the focus-trap when trap-all is active.\n     */\n    trapAllOptions?: FocusTrapOptions;\n\n    /**\n     * Displays the popover without padding.\n     */\n    withoutSpace?: boolean;\n\n    /**\n     * Allows content to appear outside of the popover. Used when there are nested popovers.\n     */\n    overflowVisible?: boolean;\n}\n"],"names":["BentoPopoverPositions","PopperContainerPosition"],"mappings":";AAYO,MAAMA,IAAwB,EAAE,GAAGC,EAAA;"}