@adyen/bento-vue3 1.88.1 → 1.89.2

package/dist/chunks/fixed-scroller.DtkaGyMD.js

@@ -0,0 +1,150 @@
+import { ref as a, onMounted as I, computed as u, defineComponent as T, openBlock as g, createElementBlock as R, createElementVNode as B, normalizeStyle as V, unref as e, renderSlot as N, normalizeClass as y, createVNode as p, withCtx as C, createCommentVNode as L } from "vue";
+import { B as k } from "./button.DWF7FSIw.js";
+import { u as z } from "./index.B875RXHM.js";
+import { C as P, a as A } from "./chevron-left.C_vPW7OR.js";
+import { o as W } from "./resize.Bqks3WUm.js";
+import { _ as M } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/fixed-scroller.css";
+const $ = 1, w = 40, D = ({
+  contentRef: n,
+  containerRef: c,
+  leftButtonRef: d,
+  rightButtonRef: f
+}) => {
+  const l = a(0), t = a(0), s = a(0), o = a(0);
+  I(() => {
+    W(c.value, () => {
+      c.value && (o.value = c.value.offsetWidth, t.value = 0, l.value = 0);
+    }), W(n.value, () => {
+      s.value = n.value?.scrollWidth, s.value < o.value && (t.value = 0, l.value = 0);
+    });
+  });
+  const v = u(() => {
+    const r = d.value?.scrollWidth ? d.value.scrollWidth + w : 0, S = f.value?.scrollWidth ? f.value.scrollWidth + w : 0;
+    return r + S;
+  }), i = u(() => Math.ceil(s.value / o.value) ?? 0), h = u(() => {
+    const r = new Array(i.value).fill(0);
+    return r.forEach((S, m) => {
+      if (m === 0)
+        return;
+      if (m === i.value - 1) {
+        r[r.length - 1] = -(s.value - o.value + $);
+        return;
+      }
+      const O = r[m - 1];
+      r[m] = -(o.value + Math.abs(O) - v.value);
+    }), r;
+  }), b = u(() => t.value !== 0), _ = u(
+    () => l.value >= -(s.value - o.value - 1)
+  );
+  return {
+    offset: l,
+    shouldShowLeftButton: b,
+    shouldShowRightButton: _,
+    // Methods
+    scrollLeft: () => {
+      t.value !== 0 && (t.value -= 1, l.value = h.value[t.value]);
+    },
+    scrollRight: () => {
+      t.value !== i.value - 1 && (t.value += 1, l.value = h.value[t.value]);
+    }
+  };
+}, E = {
+  "en-US": { scrollLeft: "Scroll left", scrollRight: "Scroll right" },
+  "ja-JP": { scrollLeft: "左にスクロール", scrollRight: "右にスクロール" },
+  "pt-BR": { scrollLeft: "Deslizar para esquerda", scrollRight: "Rolar à direita" }
+}, j = { class: "b-fixed-scroller__container" }, q = {
+  i18n: { messages: E }
+}, G = /* @__PURE__ */ T({
+  ...q,
+  __name: "fixed-scroller",
+  props: {
+    /**
+     * Applies the condensed style to the buttons
+     */
+    condensed: { type: Boolean, default: !1 },
+    /**
+     * Padding to be applied to the top of the scroller container
+     */
+    extraPaddingTop: { type: Number, default: 0 },
+    /**
+     * Padding to be applied to the top of the scroller container
+     */
+    centered: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const { t: c } = z({ messages: E }), d = a(null), f = a(null), l = a(null), t = a(null), s = n, { offset: o, shouldShowLeftButton: v, shouldShowRightButton: i, scrollLeft: h, scrollRight: b } = D({
+      contentRef: d,
+      containerRef: f,
+      leftButtonRef: l,
+      rightButtonRef: t
+    }), _ = u(() => ({
+      "b-fixed-scroller__button--centered": s.centered
+    }));
+    return (x, F) => (g(), R("div", {
+      ref_key: "fixedScrollerRef",
+      ref: f,
+      class: "b-fixed-scroller"
+    }, [
+      B("div", j, [
+        B("div", {
+          ref_key: "contentRef",
+          ref: d,
+          class: "b-fixed-scroller__content",
+          style: V({
+            transform: `translateX(${e(o)}px)`,
+            paddingTop: e(v) || e(i) ? `${n.extraPaddingTop}px` : null
+          })
+        }, [
+          N(x.$slots, "default", {}, void 0, !0)
+        ], 4)
+      ]),
+      e(v) ? (g(), R("div", {
+        key: 0,
+        ref_key: "leftButtonRef",
+        ref: l,
+        class: y(["b-fixed-scroller__left b-fixed-scroller__button", _.value])
+      }, [
+        p(e(k), {
+          variant: "secondary",
+          "aria-label": e(c)("scrollLeft"),
+          condensed: n.condensed,
+          onClick: e(h)
+        }, {
+          iconLeft: C(() => [
+            p(e(P), {
+              "svg-title": "checked",
+              "aria-hidden": "true"
+            })
+          ]),
+          _: 1
+        }, 8, ["aria-label", "condensed", "onClick"])
+      ], 2)) : L("", !0),
+      e(i) ? (g(), R("div", {
+        key: 1,
+        ref_key: "rightButtonRef",
+        ref: t,
+        class: y(["b-fixed-scroller__right b-fixed-scroller__button", _.value])
+      }, [
+        p(e(k), {
+          variant: "secondary",
+          "aria-label": e(c)("scrollRight"),
+          condensed: n.condensed,
+          onClick: e(b)
+        }, {
+          iconLeft: C(() => [
+            p(e(A), {
+              "svg-title": "checked",
+              "aria-hidden": "true"
+            })
+          ]),
+          _: 1
+        }, 8, ["aria-label", "condensed", "onClick"])
+      ], 2)) : L("", !0)
+    ], 512));
+  }
+}), Y = /* @__PURE__ */ M(G, [["__scopeId", "data-v-e829dae2"]]);
+export {
+  Y as F
+};
+//# sourceMappingURL=fixed-scroller.DtkaGyMD.js.map

package/dist/chunks/{fixed-scroller.i1tmEmst.js.map → fixed-scroller.DtkaGyMD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fixed-scroller.i1tmEmst.js","sources":["../../../vue2/src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../../vue2/src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, onMounted, ref } from 'vue';\nimport type { Ref, UnwrapRef } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    containerRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    leftButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    rightButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param props - All the necessary references to calculate the scroll\n * @param props.containerRef - Reference to the container, this defines the visible space width\n * @param props.contentRef - Reference to the content itself, this defines the total content width\n * @param props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns response - Values used in the view to show the buttons and to change the view right or left\n * @returns response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns response.scrollLeft - Used to shift the view to the left\n * @returns response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n\n            if (totalContentWidth.value < visibleSpaceWidth.value) {\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div\n            v-if=\"shouldShowLeftButton\"\n            ref=\"leftButtonRef\"\n            class=\"b-fixed-scroller__left b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div\n            v-if=\"shouldShowRightButton\"\n            ref=\"rightButtonRef\"\n            class=\"b-fixed-scroller__right b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n\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 contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    const props = defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        centered: { type: Boolean, default: false },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({\n        contentRef,\n        containerRef: fixedScrollerRef,\n        leftButtonRef,\n        rightButtonRef,\n    });\n\n    const buttonConditionalClasses = computed(() => ({\n        'b-fixed-scroller__button--centered': props.centered,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","_a","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","_b","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","__default__","messages","t","useI18n","fixedScrollerRef","props","__props","scrollLeft","scrollRight","buttonConditionalClasses"],"mappings":"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"}
+{"version":3,"file":"fixed-scroller.DtkaGyMD.js","sources":["../../../vue2/src/components/internal/fixed-scroller/composables/useFixedScroller.ts","../../../vue2/src/components/internal/fixed-scroller/fixed-scroller.vue"],"sourcesContent":["import { observeSizeOfElement } from '@/utils/ts/resize';\nimport { computed, onMounted, ref } from 'vue';\nimport type { Ref, UnwrapRef } from 'vue';\n\n// Adding an offset of \"1\" so that the border can be shown within the boundaries\nconst OVERFLOW_CLIP_OFFSET = 1;\n// Add the gradient offset to the calculations\nconst GRADIENT_OFFSET = 40;\n\ninterface useFixedScrollerProps {\n    contentRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    containerRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    leftButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n    rightButtonRef?: Ref<UnwrapRef<HTMLDivElement | undefined>>;\n}\n\n/**\n * Function to calculate the offset of each view and change the \"view\" via offsets\n * through the functions `scrollLeft` and `scrollRight` whilst providing a way to\n * show and hide the buttons based on the current \"view\" via\n * `shouldShowLeftButton` and `shouldShowRightButton`.\n *\n * Each view is pre-calculated (offsetArray) and updated if the content changes as a computed ref:\n * First view: Always 0 (x axis beginning).\n * Last view: total content space - visible width\n * Intermediate views: Previous offset (to the left) plus the visible space taking\n *                     away the space the buttons take so that the whole view can be rendered\n *\n *\n * @param props - All the necessary references to calculate the scroll\n * @param props.containerRef - Reference to the container, this defines the visible space width\n * @param props.contentRef - Reference to the content itself, this defines the total content width\n * @param props.leftButtonRef - Reference to the left button, used to calculate total space in which the content will be rendered\n * @param props.rightButtonRef - Reference to the right button, used to calculate total space in which the content will be rendered\n * @returns response - Values used in the view to show the buttons and to change the view right or left\n * @returns response.offset - Offset value by which the view will move on the x axis. To be used in `styles`.\n * @returns response.shouldShowLeftButton - Indicates if the button on the left should be shown\n * @returns response.shouldShowRightButton - Indicates if the button on the right should be shown\n * @returns response.scrollLeft - Used to shift the view to the left\n * @returns response.scrollRight - Used to shift the view to the right\n */\nexport const useFixedScroller = ({\n    contentRef,\n    containerRef,\n    leftButtonRef,\n    rightButtonRef,\n}: useFixedScrollerProps) => {\n    const offset = ref(0);\n    const currentView = ref(0);\n\n    // Calculated using 'scrollWidth' to get the full width of the content\n    const totalContentWidth = ref(0);\n    // Calculated using 'clientWidth' to get the rendered componen width\n    const visibleSpaceWidth = ref(0);\n\n    onMounted(() => {\n        observeSizeOfElement(containerRef.value, () => {\n            if (containerRef.value) {\n                // Set new width when resized\n                visibleSpaceWidth.value = containerRef.value.offsetWidth;\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n\n        observeSizeOfElement(contentRef.value, () => {\n            totalContentWidth.value = contentRef.value?.scrollWidth;\n\n            if (totalContentWidth.value < visibleSpaceWidth.value) {\n                // Reset the offset and view\n                currentView.value = 0;\n                offset.value = 0;\n            }\n        });\n    });\n\n    // Sum of the space used by the Left and Right buttons\n    // Used to calculate how much space the \"actual\" visible space is\n    const buttonsWidth = computed(() => {\n        const leftButtonWidth = leftButtonRef.value?.scrollWidth\n            ? leftButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n        const rightButtonWidth = rightButtonRef.value?.scrollWidth\n            ? rightButtonRef.value.scrollWidth + GRADIENT_OFFSET\n            : 0;\n\n        return leftButtonWidth + rightButtonWidth;\n    });\n    // Total number of pages/views available.\n    // Calculated as \"ceil\" because if the space doesn't fit \"one view\" (irrational number) the content flows to the next view (integer).\n    const totalViews = computed(() => Math.ceil(totalContentWidth.value / visibleSpaceWidth.value) ?? 0);\n\n    // Calculation of offsets per view (index).\n    // This allows to easily swap the offset without on-the-fly calculations\n    const offsetArray = computed(() => {\n        const calculatedOffsetList = new Array(totalViews.value).fill(0);\n\n        calculatedOffsetList.forEach((_, index) => {\n            // First offset will be 0\n            if (index === 0) {\n                return;\n            }\n\n            // Calculate last\n            if (index === totalViews.value - 1) {\n                calculatedOffsetList[calculatedOffsetList.length - 1] = -(\n                    totalContentWidth.value -\n                    visibleSpaceWidth.value +\n                    OVERFLOW_CLIP_OFFSET\n                );\n\n                return;\n            }\n\n            // Calculate each offset - Move 1 view\n            const previousOffset = calculatedOffsetList[index - 1];\n            calculatedOffsetList[index] = -(visibleSpaceWidth.value + Math.abs(previousOffset) - buttonsWidth.value);\n        });\n\n        return calculatedOffsetList;\n    });\n\n    // Hide left button when it's the first view\n    const shouldShowLeftButton = computed(() => currentView.value !== 0);\n    // Hide right button if it's the last view\n    const shouldShowRightButton = computed(\n        () => offset.value >= -(totalContentWidth.value - visibleSpaceWidth.value - 1)\n    );\n\n    /**\n     * Shifts the current offset by one view to the left.\n     */\n    const scrollLeft = () => {\n        // Do nothing if it is already in page 0\n        if (currentView.value === 0) {\n            return;\n        }\n\n        currentView.value -= 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    /**\n     * Shifts the current offset by one view to the right.\n     */\n    const scrollRight = () => {\n        // Do nothing if it is already in last page\n        if (currentView.value === totalViews.value - 1) {\n            return;\n        }\n\n        currentView.value += 1;\n        offset.value = offsetArray.value[currentView.value];\n    };\n\n    return {\n        offset,\n        shouldShowLeftButton,\n        shouldShowRightButton,\n\n        // Methods\n        scrollLeft,\n        scrollRight,\n    };\n};\n","<template>\n    <div ref=\"fixedScrollerRef\" class=\"b-fixed-scroller\">\n        <div class=\"b-fixed-scroller__container\">\n            <div\n                ref=\"contentRef\"\n                class=\"b-fixed-scroller__content\"\n                :style=\"{\n                    transform: `translateX(${offset}px)`,\n                    paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null,\n                }\"\n            >\n                <slot></slot>\n            </div>\n        </div>\n\n        <div\n            v-if=\"shouldShowLeftButton\"\n            ref=\"leftButtonRef\"\n            class=\"b-fixed-scroller__left b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button variant=\"secondary\" :aria-label=\"t('scrollLeft')\" :condensed=\"condensed\" @click=\"scrollLeft\">\n                <template #iconLeft>\n                    <chevron-left-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n        <div\n            v-if=\"shouldShowRightButton\"\n            ref=\"rightButtonRef\"\n            class=\"b-fixed-scroller__right b-fixed-scroller__button\"\n            :class=\"buttonConditionalClasses\"\n        >\n            <bento-button\n                variant=\"secondary\"\n                :aria-label=\"t('scrollRight')\"\n                :condensed=\"condensed\"\n                @click=\"scrollRight\"\n            >\n                <template #iconLeft>\n                    <chevron-right-icon svg-title=\"checked\" aria-hidden=\"true\" />\n                </template>\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useFixedScroller } from './composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left';\n    import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right';\n\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 contentRef = ref(null);\n    const fixedScrollerRef = ref(null);\n    const leftButtonRef = ref(null);\n    const rightButtonRef = ref(null);\n\n    const props = defineProps({\n        /**\n         * Applies the condensed style to the buttons\n         */\n        condensed: { type: Boolean, default: false },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        extraPaddingTop: { type: Number, default: 0 },\n        /**\n         * Padding to be applied to the top of the scroller container\n         */\n        centered: { type: Boolean, default: false },\n    });\n\n    const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({\n        contentRef,\n        containerRef: fixedScrollerRef,\n        leftButtonRef,\n        rightButtonRef,\n    });\n\n    const buttonConditionalClasses = computed(() => ({\n        'b-fixed-scroller__button--centered': props.centered,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Allows to horizontally scroll content by one view at a time.\n     *\n     * @example\n     * import { FixedScroller } from '@/internal';\n     *\n     * export default {\n     *     components: { FixedScroller },\n     *     template: `\n     *          <fixed-scroller>\n     *              <div style=\"display: flex; gap: 8px;\">\n     *                  {{ Content here }}\n     *              </div>\n     *          </fixed-scroller>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./fixed-scroller.scss\" />\n"],"names":["OVERFLOW_CLIP_OFFSET","GRADIENT_OFFSET","useFixedScroller","contentRef","containerRef","leftButtonRef","rightButtonRef","offset","ref","currentView","totalContentWidth","visibleSpaceWidth","onMounted","observeSizeOfElement","buttonsWidth","computed","leftButtonWidth","rightButtonWidth","totalViews","offsetArray","calculatedOffsetList","_","index","previousOffset","shouldShowLeftButton","shouldShowRightButton","__default__","messages","t","useI18n","fixedScrollerRef","props","__props","scrollLeft","scrollRight","buttonConditionalClasses"],"mappings":"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"}

package/dist/chunks/{focus-trap.BxCwzLqN.js → focus-trap.BAiM_ywb.js}

@@ -1,6 +1,6 @@
 import { ref as X, onUnmounted as Re, isRef as at, watch as Le, computed as U, onMounted as it, onBeforeUnmount as ot, defineComponent as ut, useSlots as ct, toRef as st, unref as R, openBlock as lt, createElementBlock as ft, mergeProps as dt, toHandlers as vt, withKeys as bt, renderSlot as pt, createCommentVNode as mt } from "vue";
-import { u as ht } from "./use-has-slot.B7eQSabc.js";
-import { k as yt, l as gt, m as wt } from "./index.Dppy4qHk.js";
+import { u as ht } from "./use-has-slot.CyMiImRQ.js";
+import { k as yt, l as gt, m as wt } from "./index.DDwcHPb6.js";
 import { _ as Nt } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/focus-trap.css";
 const Et = (t) => {
@@ -36,10 +36,10 @@ const Et = (t) => {
     for (const l of i.composedPath()) {
       if (!(l instanceof HTMLElement))
         return;
-      const d = l, b = d.tagName, v = d.getAttribute("role"), p = b === "DIALOG", w = u.includes(v), g = a.includes(v), F = s.includes(b), S = at(t) ? t.value === d : t === d;
+      const d = l, b = d.tagName, v = d.getAttribute("role"), p = b === "DIALOG", E = u.includes(v), w = a.includes(v), F = s.includes(b), S = at(t) ? t.value === d : t === d;
       if (p || S)
         return;
-      if (g && e.value || (w || F) || !p && v === "dialog") {
+      if (w && e.value || (E || F) || !p && v === "dialog") {
         i.stopPropagation(), i.preventDefault();
         return;
       }
@@ -49,16 +49,12 @@ const Et = (t) => {
     r();
   }), { handleKeydownEscape: n };
 };
-/*!
-* tabbable 6.4.0
-* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
-*/
 var Be = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert] *)", "textarea:not([inert]):not([inert] *)", "a[href]:not([inert]):not([inert] *)", "button:not([inert]):not([inert] *)", "[tabindex]:not(slot):not([inert]):not([inert] *)", "audio[controls]:not([inert]):not([inert] *)", "video[controls]:not([inert]):not([inert] *)", '[contenteditable]:not([contenteditable="false"]):not([inert]):not([inert] *)', "details>summary:first-of-type:not([inert]):not([inert] *)", "details:not([inert]):not([inert] *)"], G = /* @__PURE__ */ Be.join(","), _e = typeof Element > "u", C = _e ? function() {
 } : Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector, H = !_e && Element.prototype.getRootNode ? function(t) {
   var e;
   return t == null || (e = t.getRootNode) === null || e === void 0 ? void 0 : e.call(t);
 } : function(t) {
-  return t == null ? void 0 : t.ownerDocument;
+  return t?.ownerDocument;
 }, q = function(e, r) {
   var n;
   r === void 0 && (r = !0);
@@ -90,10 +86,10 @@ var Be = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert]
         var v = a.shadowRoot || // check for an undisclosed shadow
         typeof n.getShadowRoot == "function" && n.getShadowRoot(a), p = !q(v, !1) && (!n.shadowRootFilter || n.shadowRootFilter(a));
         if (v && p) {
-          var w = $(v === !0 ? a.children : v.children, !0, n);
-          n.flatten ? i.push.apply(i, w) : i.push({
+          var E = $(v === !0 ? a.children : v.children, !0, n);
+          n.flatten ? i.push.apply(i, E) : i.push({
             scopeParent: a,
-            candidates: w
+            candidates: E
           });
         } else
           u.unshift.apply(u, a.children);
@@ -261,10 +257,6 @@ var Be = ["input:not([inert]):not([inert] *)", "select:not([inert]):not([inert]
     throw new Error("No node provided");
   return C.call(e, Mt) === !1 ? !1 : Y(r, e);
 };
-/*!
-* focus-trap 7.6.4
-* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
-*/
 function oe(t, e) {
   (e == null || e > t.length) && (e = t.length);
   for (var r = 0, n = Array(e); r < e; r++) n[r] = t[r];
@@ -349,9 +341,9 @@ var Se = {
 }, $t = function(e) {
   return e.tagName && e.tagName.toLowerCase() === "input" && typeof e.select == "function";
 }, Yt = function(e) {
-  return (e == null ? void 0 : e.key) === "Escape" || (e == null ? void 0 : e.key) === "Esc" || (e == null ? void 0 : e.keyCode) === 27;
+  return e?.key === "Escape" || e?.key === "Esc" || e?.keyCode === 27;
 }, j = function(e) {
-  return (e == null ? void 0 : e.key) === "Tab" || (e == null ? void 0 : e.keyCode) === 9;
+  return e?.key === "Tab" || e?.keyCode === 9;
 }, Zt = function(e) {
   return j(e) && !e.shiftKey;
 }, zt = function(e) {
@@ -365,7 +357,7 @@ var Se = {
 }, W = function(e) {
   return e.target.shadowRoot && typeof e.composedPath == "function" ? e.composedPath()[0] : e.target;
 }, Xt = [], Jt = function(e, r) {
-  var n = (r == null ? void 0 : r.document) || document, i = (r == null ? void 0 : r.trapStack) || Xt, u = Ae({
+  var n = r?.document || document, i = r?.trapStack || Xt, u = Ae({
     returnFocusOnDeactivate: !0,
     escapeDeactivates: !0,
     delayInitialFocus: !0,
@@ -411,20 +403,16 @@ var Se = {
   }, s, l = function(o, c, f) {
     return o && o[c] !== void 0 ? o[c] : u[f || c];
   }, d = function(o, c) {
-    var f = typeof (c == null ? void 0 : c.composedPath) == "function" ? c.composedPath() : void 0;
+    var f = typeof c?.composedPath == "function" ? c.composedPath() : void 0;
     return a.containerGroups.findIndex(function(h) {
-      var y = h.container, E = h.tabbableNodes;
-      return y.contains(o) || // fall back to explicit tabbable search which will take into consideration any
-      //  web components if the `tabbableOptions.getShadowRoot` option was used for
-      //  the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
-      //  look inside web components even if open)
-      (f == null ? void 0 : f.includes(y)) || E.find(function(m) {
+      var y = h.container, N = h.tabbableNodes;
+      return y.contains(o) || f?.includes(y) || N.find(function(m) {
         return m === o;
       });
     });
   }, b = function(o) {
-    var c = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, f = c.hasFallback, h = f === void 0 ? !1 : f, y = c.params, E = y === void 0 ? [] : y, m = u[o];
-    if (typeof m == "function" && (m = m.apply(void 0, Wt(E))), m === !0 && (m = void 0), !m) {
+    var c = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, f = c.hasFallback, h = f === void 0 ? !1 : f, y = c.params, N = y === void 0 ? [] : y, m = u[o];
+    if (typeof m == "function" && (m = m.apply(void 0, Wt(N))), m === !0 && (m = void 0), !m) {
       if (m === void 0 || m === !1)
         return m;
       throw new Error("`".concat(o, "` was specified but was not a node, or did not return a node"));
@@ -459,7 +447,7 @@ var Se = {
     return o;
   }, p = function() {
     if (a.containerGroups = a.containers.map(function(o) {
-      var c = Bt(o, u.tabbableOptions), f = _t(o, u.tabbableOptions), h = c.length > 0 ? c[0] : void 0, y = c.length > 0 ? c[c.length - 1] : void 0, E = f.find(function(O) {
+      var c = Bt(o, u.tabbableOptions), f = _t(o, u.tabbableOptions), h = c.length > 0 ? c[0] : void 0, y = c.length > 0 ? c[c.length - 1] : void 0, N = f.find(function(O) {
         return L(O);
       }), m = f.slice().reverse().find(function(O) {
         return L(O);
@@ -484,7 +472,7 @@ var Se = {
         //  "close enough most of the time" alternative for positive tabindexes which should generally
         //  be avoided anyway...
         /** First tabbable node in container, __DOM__ order; `undefined` if none. */
-        firstDomTabbableNode: E,
+        firstDomTabbableNode: N,
         /** Last tabbable node in container, __DOM__ order; `undefined` if none. */
         lastDomTabbableNode: m,
         /**
@@ -512,14 +500,14 @@ var Se = {
       return o.posTabIndexesFound;
     }) && a.containerGroups.length > 1)
       throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.");
-  }, w = function(o) {
+  }, E = function(o) {
     var c = o.activeElement;
     if (c)
-      return c.shadowRoot && c.shadowRoot.activeElement !== null ? w(c.shadowRoot) : c;
-  }, g = function(o) {
-    if (o !== !1 && o !== w(document)) {
+      return c.shadowRoot && c.shadowRoot.activeElement !== null ? E(c.shadowRoot) : c;
+  }, w = function(o) {
+    if (o !== !1 && o !== E(document)) {
       if (!o || !o.focus) {
-        g(v());
+        w(v());
         return;
       }
       o.focus({
@@ -534,11 +522,11 @@ var Se = {
   }, S = function(o) {
     var c = o.target, f = o.event, h = o.isBackward, y = h === void 0 ? !1 : h;
     c = c || W(f), p();
-    var E = null;
+    var N = null;
     if (a.tabbableGroups.length > 0) {
       var m = d(c, f), T = m >= 0 ? a.containerGroups[m] : void 0;
       if (m < 0)
-        y ? E = a.tabbableGroups[a.tabbableGroups.length - 1].lastTabbableNode : E = a.tabbableGroups[0].firstTabbableNode;
+        y ? N = a.tabbableGroups[a.tabbableGroups.length - 1].lastTabbableNode : N = a.tabbableGroups[0].firstTabbableNode;
       else if (y) {
         var O = a.tabbableGroups.findIndex(function(Q) {
           var ee = Q.firstTabbableNode;
@@ -546,8 +534,8 @@ var Se = {
         });
         if (O < 0 && (T.container === c || te(c, u.tabbableOptions) && !L(c, u.tabbableOptions) && !T.nextTabbableNode(c, !1)) && (O = m), O >= 0) {
           var x = O === 0 ? a.tabbableGroups.length - 1 : O - 1, _ = a.tabbableGroups[x];
-          E = P(c) >= 0 ? _.lastTabbableNode : _.lastDomTabbableNode;
-        } else j(f) || (E = T.nextTabbableNode(c, !1));
+          N = P(c) >= 0 ? _.lastTabbableNode : _.lastDomTabbableNode;
+        } else j(f) || (N = T.nextTabbableNode(c, !1));
       } else {
         var k = a.tabbableGroups.findIndex(function(Q) {
           var ee = Q.lastTabbableNode;
@@ -555,12 +543,12 @@ var Se = {
         });
         if (k < 0 && (T.container === c || te(c, u.tabbableOptions) && !L(c, u.tabbableOptions) && !T.nextTabbableNode(c)) && (k = m), k >= 0) {
           var M = k === a.tabbableGroups.length - 1 ? 0 : k + 1, Te = a.tabbableGroups[M];
-          E = P(c) >= 0 ? Te.firstTabbableNode : Te.firstDomTabbableNode;
-        } else j(f) || (E = T.nextTabbableNode(c));
+          N = P(c) >= 0 ? Te.firstTabbableNode : Te.firstDomTabbableNode;
+        } else j(f) || (N = T.nextTabbableNode(c));
       }
     } else
-      E = b("fallbackFocus");
-    return E;
+      N = b("fallbackFocus");
+    return N;
   }, I = function(o) {
     var c = W(o);
     if (!(d(c, o) >= 0)) {
@@ -587,7 +575,7 @@ var Se = {
       var h, y = !0;
       if (a.mostRecentlyFocusedNode)
         if (P(a.mostRecentlyFocusedNode) > 0) {
-          var E = d(a.mostRecentlyFocusedNode), m = a.containerGroups[E].tabbableNodes;
+          var N = d(a.mostRecentlyFocusedNode), m = a.containerGroups[N].tabbableNodes;
           if (m.length > 0) {
             var T = m.findIndex(function(O) {
               return O === a.mostRecentlyFocusedNode;
@@ -607,7 +595,7 @@ var Se = {
         //  outside the trap causing the focus escape we're trying to fix)
         target: a.mostRecentlyFocusedNode,
         isBackward: u.isKeyBackward(a.recentNavEvent)
-      })), g(h || a.mostRecentlyFocusedNode || v());
+      })), w(h || a.mostRecentlyFocusedNode || v());
     }
     a.recentNavEvent = void 0;
   }, he = function(o) {
@@ -617,7 +605,7 @@ var Se = {
       event: o,
       isBackward: c
     });
-    f && (j(o) && o.preventDefault(), g(f));
+    f && (j(o) && o.preventDefault(), w(f));
   }, ye = function(o) {
     (u.isKeyForward(o) || u.isKeyBackward(o)) && he(o, u.isKeyBackward(o));
   }, ge = function(o) {
@@ -628,8 +616,8 @@ var Se = {
   }, Ne = function() {
     if (a.active)
       return Se.activateTrap(i, s), a.delayInitialFocusTimer = u.delayInitialFocus ? Ie(function() {
-        g(v());
-      }) : g(v()), n.addEventListener("focusin", D, !0), n.addEventListener("mousedown", I, {
+        w(v());
+      }) : w(v()), n.addEventListener("focusin", D, !0), n.addEventListener("mousedown", I, {
         capture: !0,
         passive: !1
       }), n.addEventListener("touchstart", I, {
@@ -652,7 +640,7 @@ var Se = {
         return y === a.mostRecentlyFocusedNode;
       });
     });
-    c && g(v());
+    c && w(v());
   }, J = typeof window < "u" && "MutationObserver" in window ? new MutationObserver(nt) : void 0, B = function() {
     J && (J.disconnect(), a.active && !a.paused && a.containers.map(function(o) {
       J.observe(o, {
@@ -672,9 +660,9 @@ var Se = {
       if (a.active)
         return this;
       var c = l(o, "onActivate"), f = l(o, "onPostActivate"), h = l(o, "checkCanFocusTrap");
-      h || p(), a.active = !0, a.paused = !1, a.nodeFocusedBeforeActivation = n.activeElement, c == null || c();
+      h || p(), a.active = !0, a.paused = !1, a.nodeFocusedBeforeActivation = n.activeElement, c?.();
       var y = function() {
-        h && p(), Ne(), B(), f == null || f();
+        h && p(), Ne(), B(), f?.();
       };
       return h ? (h(a.containers.concat()).then(y, y), this) : (y(), this);
     },
@@ -687,14 +675,14 @@ var Se = {
         checkCanReturnFocus: u.checkCanReturnFocus
       }, o);
       clearTimeout(a.delayInitialFocusTimer), a.delayInitialFocusTimer = void 0, Ee(), a.active = !1, a.paused = !1, B(), Se.deactivateTrap(i, s);
-      var f = l(c, "onDeactivate"), h = l(c, "onPostDeactivate"), y = l(c, "checkCanReturnFocus"), E = l(c, "returnFocus", "returnFocusOnDeactivate");
-      f == null || f();
+      var f = l(c, "onDeactivate"), h = l(c, "onPostDeactivate"), y = l(c, "checkCanReturnFocus"), N = l(c, "returnFocus", "returnFocusOnDeactivate");
+      f?.();
       var m = function() {
         Ie(function() {
-          E && g(F(a.nodeFocusedBeforeActivation)), h == null || h();
+          N && w(F(a.nodeFocusedBeforeActivation)), h?.();
         });
       };
-      return E && y ? (y(F(a.nodeFocusedBeforeActivation)).then(m, m), this) : (m(), this);
+      return N && y ? (y(F(a.nodeFocusedBeforeActivation)).then(m, m), this) : (m(), this);
     },
     pause: function(o) {
       return a.active ? (a.manuallyPaused = !0, this._setPausedState(!0, o)) : this;
@@ -720,10 +708,10 @@ var Se = {
           return this;
         if (a.paused = o, o) {
           var f = l(c, "onPause"), h = l(c, "onPostPause");
-          f == null || f(), Ee(), B(), h == null || h();
+          f?.(), Ee(), B(), h?.();
         } else {
-          var y = l(c, "onUnpause"), E = l(c, "onPostUnpause");
-          y == null || y(), p(), Ne(), B(), E == null || E();
+          var y = l(c, "onUnpause"), N = l(c, "onPostUnpause");
+          y?.(), p(), Ne(), B(), N?.();
         }
         return this;
       }
@@ -746,8 +734,7 @@ const Qt = (t, e, r) => {
     },
     { flush: "post" }
   ), Re(() => {
-    var u;
-    e.value && ((u = n.value) == null || u.deactivate());
+    e.value && n.value?.deactivate();
   });
 };
 var ke = "data-focus-lock", er = "data-focus-lock-disabled", tr = "data-no-focus-lock", rr = "data-autofocus-inside", nr = "data-no-autofocus", A = function(t) {
@@ -943,20 +930,20 @@ var ke = "data-focus-lock", er = "data-focus-lock-disabled", tr = "data-no-focus
 }, Qe = "NEW_FOCUS", Tr = function(t, e, r, n) {
   var i = t.length, u = t[0], a = t[i - 1], s = le(r);
   if (!(r && t.indexOf(r) >= 0)) {
-    var l = r !== void 0 ? e.indexOf(r) : -1, d = n ? e.indexOf(n) : l, b = n ? t.indexOf(n) : -1, v = l - d, p = e.indexOf(u), w = e.indexOf(a), g = Er(e), F = r !== void 0 ? g.indexOf(r) : -1, S = F - (n ? g.indexOf(n) : l), I = De(t, 0), D = De(t, i - 1);
+    var l = r !== void 0 ? e.indexOf(r) : -1, d = n ? e.indexOf(n) : l, b = n ? t.indexOf(n) : -1, v = l - d, p = e.indexOf(u), E = e.indexOf(a), w = Er(e), F = r !== void 0 ? w.indexOf(r) : -1, S = F - (n ? w.indexOf(n) : l), I = De(t, 0), D = De(t, i - 1);
     if (l === -1 || b === -1)
       return Qe;
     if (!v && b >= 0)
       return b;
     if (l <= p && s && Math.abs(v) > 1)
       return D;
-    if (l >= w && s && Math.abs(v) > 1)
+    if (l >= E && s && Math.abs(v) > 1)
       return I;
     if (v && Math.abs(S) > 1)
       return b;
     if (l <= p)
       return D;
-    if (l > w)
+    if (l > E)
       return I;
     if (v)
       return Math.abs(v) > 1 ? b : (i + b + v) % i;
@@ -995,22 +982,22 @@ var ke = "data-focus-lock", er = "data-focus-lock-disabled", tr = "data-no-focus
     return r.get(n);
   }).filter(lr);
 }, Sr = function(t, e) {
-  var r = document && pe(), n = be(t).filter(Z), i = et(r || t, t, n), u = /* @__PURE__ */ new Map(), a = Pe(n, u), s = ce(n, u).filter(function(w) {
-    var g = w.node;
-    return Z(g);
+  var r = document && pe(), n = be(t).filter(Z), i = et(r || t, t, n), u = /* @__PURE__ */ new Map(), a = Pe(n, u), s = ce(n, u).filter(function(E) {
+    var w = E.node;
+    return Z(w);
   });
   if (!(!s[0] && (s = a, !s[0]))) {
-    var l = Pe([i], u).map(function(w) {
-      var g = w.node;
-      return g;
-    }), d = Ar(l, s), b = d.map(function(w) {
-      var g = w.node;
-      return g;
+    var l = Pe([i], u).map(function(E) {
+      var w = E.node;
+      return w;
+    }), d = Ar(l, s), b = d.map(function(E) {
+      var w = E.node;
+      return w;
     }), v = Tr(b, l, r, e);
     if (v === Qe) {
-      var p = xe(a.map(function(w) {
-        var g = w.node;
-        return g;
+      var p = xe(a.map(function(E) {
+        var w = E.node;
+        return w;
       })).filter(Fr(Or(n, u)));
       return {
         node: p && p.length ? Ce(p) : Ce(xe(b))
@@ -1054,9 +1041,8 @@ const Cr = (t) => requestAnimationFrame(t), Dr = (t, e) => {
   const r = e.findIndex((n) => n.node === t);
   return r === -1 ? 0 : r;
 }, Rr = (t, e) => {
-  var u;
   const r = document.activeElement, n = kr(e), i = Dr(r, n) + t;
-  return ((u = n[i]) == null ? void 0 : u.node) || r;
+  return n[i]?.node || r;
 }, Lr = (t, e) => {
   const r = t.key.toLowerCase();
   return {
@@ -1081,23 +1067,21 @@ const _r = (t, e, r) => {
       focusOptions: { preventScroll: !0 }
     }), n.value = document.activeElement);
   }, l = () => {
-    var w;
-    const p = n.value || ((w = t.value) == null ? void 0 : w.parentNode) || document.body;
+    const p = n.value || t.value?.parentNode || document.body;
     p && p.focus();
   }, d = () => {
     e.value && Cr(s);
   }, b = () => {
-    var g;
     if (!u.value && !i.value)
       return !1;
-    const p = (g = document.activeElement) == null ? void 0 : g.tagName.toLowerCase(), w = u.value ? ["textarea", "select"] : ["input", "textarea"];
-    return p ? w.includes(p) : !1;
+    const p = document.activeElement?.tagName.toLowerCase(), E = u.value ? ["textarea", "select"] : ["input", "textarea"];
+    return p ? E.includes(p) : !1;
   }, v = (p) => {
     if (!e.value || document.activeElement.isContentEditable || b())
       return;
-    const { isArrowNext: w, isArrowPrev: g } = Lr(p, a.value);
-    if ((g || w) && (p.preventDefault(), p.stopPropagation(), t.value)) {
-      const F = Rr(g ? 1 : -1, t.value);
+    const { isArrowNext: E, isArrowPrev: w } = Lr(p, a.value);
+    if ((w || E) && (p.preventDefault(), p.stopPropagation(), t.value)) {
+      const F = Rr(w ? 1 : -1, t.value);
       if (F.focus(), "scrollIntoView" in F) {
         const S = "scrollBehavior" in document.documentElement.style ? Br : !1;
         F.scrollIntoView(S);
@@ -1185,4 +1169,4 @@ export {
   Rr as g,
   Pr as s
 };
-//# sourceMappingURL=focus-trap.BxCwzLqN.js.map
+//# sourceMappingURL=focus-trap.BAiM_ywb.js.map