@adyen/bento-vue2 1.35.0 → 1.35.1

package/dist/chunks/{tutorial.D2msGkwn.js → tutorial.D64_0i0-.js}

@@ -1,14 +1,13 @@
 import { defineComponent as h, ref as f, computed as a, isRef as F, watch as g, nextTick as $ } from "vue";
-import { B as k } from "./menu.BhT5t7Ev.js";
-import { a as S, B as I } from "./popover.DFWeWyxd.js";
+import { B as k } from "./menu.DHakGFS4.js";
+import { a as S, B as I } from "./popover.BDaf6hmW.js";
 import { B as w } from "./typography.CqQaHXhq.js";
 import { B as N } from "./image.B3uqhFjl.js";
 import { u as A } from "./i18n.BQkEbtPM.js";
-import { R as D } from "./refresh.Bc9FzGjJ.js";
-/* empty css              */
+import { R as D } from "./refresh.BKI9WwKh.js";
 import { n as d } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { P as b, h as j, o as L } from "./popper-container.CnWphJTN.js";
-import { B as M } from "./button-actions.fnn5w4Jz.js";
+import { B as M } from "./button-actions.DN4eIQes.js";
 import "../assets/tutorial.css";
 var B;
 const K = /* @__PURE__ */ h({
@@ -29,7 +28,7 @@ const K = /* @__PURE__ */ h({
       height: "0",
       borderRadius: "0"
     });
-    function o(l) {
+    function s(l) {
       try {
         const i = parseFloat(getComputedStyle(l).getPropertyValue("border-radius"));
         return Number.isNaN(i) ? "" : `${i + 2 * 2}px`;
@@ -37,7 +36,7 @@ const K = /* @__PURE__ */ h({
         return "";
       }
     }
-    const s = [
+    const o = [
       j(),
       L({
         mainAxis: 2,
@@ -47,16 +46,16 @@ const K = /* @__PURE__ */ h({
         name: "updateIndicatorSize",
         fn: ({ x: l, y: i, elements: r }) => {
           const p = r.reference;
-          return e.value.width = `${p.offsetWidth + 4 * 2}px`, e.value.height = `${p.offsetHeight + 4 * 2}px`, e.value.borderRadius = o(p), { x: l, y: i };
+          return e.value.width = `${p.offsetWidth + 4 * 2}px`, e.value.height = `${p.offsetHeight + 4 * 2}px`, e.value.borderRadius = s(p), { x: l, y: i };
         }
       }
     ];
-    return { __sfc: !0, BORDER_OFFSET: 2, computedStyles: e, getBorderRadius: o, middleware: s, PopperContainer: b };
+    return { __sfc: !0, BORDER_OFFSET: 2, computedStyles: e, getBorderRadius: s, middleware: o, PopperContainer: b };
   }
 });
 var V = function() {
-  var t = this, e = t._self._c, o = t._self._setupProxy;
-  return e(o.PopperContainer, { staticClass: "b-tutorial-indicator", attrs: { "target-element": t.targetElement, middleware: o.middleware, position: "top-start", "fixed-positioning": "", "disabled-focus-trap": "", "data-testid": "tutorial-indicator" } }, [e("div", { staticClass: "b-tutorial-indicator__highlight", style: o.computedStyles })]);
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e(s.PopperContainer, { staticClass: "b-tutorial-indicator", attrs: { "target-element": t.targetElement, middleware: s.middleware, position: "top-start", "fixed-positioning": "", "disabled-focus-trap": "", "data-testid": "tutorial-indicator" } }, [e("div", { staticClass: "b-tutorial-indicator__highlight", style: s.computedStyles })]);
 }, q = [], Z = /* @__PURE__ */ d(
   K,
   V,
@@ -199,33 +198,33 @@ const X = W.exports, G = {
   },
   emits: ["next", "finish", "restart"],
   setup(n, { emit: t }) {
-    const e = n, o = { behavior: "smooth" }, { t: s } = A(), l = a(() => ({
-      title: s("skipTour"),
+    const e = n, s = { behavior: "smooth" }, { t: o } = A(), l = a(() => ({
+      title: o("skipTour"),
       event: () => t("finish")
     })), i = a(() => ({
-      title: s("startTour"),
+      title: o("startTour"),
       event: () => t("next")
     })), r = a(() => ({
-      title: s("next"),
+      title: o("next"),
       event: () => t("next")
     })), p = a(() => ({
-      title: s("finish"),
+      title: o("finish"),
       event: () => t("finish")
     })), C = a(() => ({
-      title: s("ok"),
+      title: o("ok"),
       event: () => t("finish")
     })), O = f(!1), y = f(!1), m = a(() => {
       var u;
       return F(e.targetElement) ? ((u = e.targetElement.value) == null ? void 0 : u.$el) || e.targetElement.value : e.targetElement.$el || e.targetElement;
     }), _ = a(() => e.step === 0), v = a(() => e.step === e.totalSteps), E = a(() => !_.value), R = a(() => [
       {
-        text: s("restartTour"),
+        text: o("restartTour"),
         handler: () => t("restart"),
         icon: D
       },
       ...v.value ? [] : [
         {
-          text: s("skipTour"),
+          text: o("skipTour"),
           handler: () => t("finish"),
           icon: X
         }
@@ -241,21 +240,21 @@ const X = W.exports, G = {
       async (u) => {
         var c, T;
         u && ((c = m.value) != null && c.scrollIntoView) && ((T = m.value) == null || T.scrollIntoView(
-          e.scrollOptions != null ? e.scrollOptions : o
+          e.scrollOptions != null ? e.scrollOptions : s
         ), await $()), O.value = u, y.value = u;
       },
       { immediate: !0 }
-    ), { __sfc: !0, DEFAULT_SCROLL_OPTIONS: o, props: e, t: s, emit: t, ACTION_SKIP: l, ACTION_START: i, ACTION_NEXT: r, ACTION_FINISH: p, ACTION_OK: C, isPopoverOpen: O, isIndicatorVisible: y, targetElement: m, isFirstStep: _, isLastStep: v, showSteps: E, menuData: R, computedActions: P, BentoMenu: k, BentoPopover: I, BentoTypography: w, BentoButtonActions: M, BentoImage: N, TutorialIndicator: z };
+    ), { __sfc: !0, DEFAULT_SCROLL_OPTIONS: s, props: e, t: o, emit: t, ACTION_SKIP: l, ACTION_START: i, ACTION_NEXT: r, ACTION_FINISH: p, ACTION_OK: C, isPopoverOpen: O, isIndicatorVisible: y, targetElement: m, isFirstStep: _, isLastStep: v, showSteps: E, menuData: R, computedActions: P, BentoMenu: k, BentoPopover: I, BentoTypography: w, BentoButtonActions: M, BentoImage: N, TutorialIndicator: z };
   }
 });
 var tt = function() {
-  var t = this, e = t._self._c, o = t._self._setupProxy;
-  return t.active && o.targetElement ? e("div", [o.isIndicatorVisible && o.targetElement ? e(o.TutorialIndicator, { attrs: { "target-element": o.targetElement } }) : t._e(), e(o.BentoPopover, { staticClass: "b-tutorial-popover", attrs: { "target-element": o.targetElement, position: t.position, open: o.isPopoverOpen, "aria-label": t.title, "fixed-positioning": "" }, nativeOn: { keydown: function(s) {
-    return !s.type.indexOf("key") && t._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : o.emit("finish");
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return t.active && s.targetElement ? e("div", [s.isIndicatorVisible && s.targetElement ? e(s.TutorialIndicator, { attrs: { "target-element": s.targetElement } }) : t._e(), e(s.BentoPopover, { staticClass: "b-tutorial-popover", attrs: { "target-element": s.targetElement, position: t.position, open: s.isPopoverOpen, "aria-label": t.title, "fixed-positioning": "" }, nativeOn: { keydown: function(o) {
+    return !o.type.indexOf("key") && t._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : s.emit("finish");
   } }, scopedSlots: t._u([t.image ? { key: "image", fn: function() {
-    return [e(o.BentoImage, t._b({ staticClass: "b-tutorial-popover__image", attrs: { "aspect-ratio": "landscape" } }, "bento-image", t.image, !1))];
-  }, proxy: !0 } : null], null, !0) }, [e("div", { staticClass: "b-tutorial-popover__ripple", attrs: { "aria-hidden": "true" } }), e("div", { staticClass: "b-tutorial-popover__header" }, [e(o.BentoTypography, { attrs: { variant: "title", el: "span" } }, [t._v(" " + t._s(t.title) + " ")]), o.showSteps ? e(o.BentoTypography, { staticClass: "b-tutorial-popover__steps", attrs: { el: "span" } }, [t._v(" " + t._s(o.t("stepsOfTotal", { step: t.step, totalSteps: t.totalSteps })) + " ")]) : t._e()], 1), e(o.BentoTypography, [t._t("default")], 2), e("div", { staticClass: "b-tutorial-popover__footer" }, [o.isFirstStep ? t._e() : e(o.BentoMenu, { staticClass: "b-tutorial-popover__menu", attrs: { data: o.menuData, "data-testid": "menu-button" } }), e("div", { staticClass: "b-tutorial-popover__actions" }, [e(o.BentoButtonActions, { attrs: { actions: o.computedActions, layout: "buttons-end" } })], 1)], 1)], 1)], 1) : t._e();
-}, et = [], ot = /* @__PURE__ */ d(
+    return [e(s.BentoImage, t._b({ staticClass: "b-tutorial-popover__image", attrs: { "aspect-ratio": "landscape" } }, "bento-image", t.image, !1))];
+  }, proxy: !0 } : null], null, !0) }, [e("div", { staticClass: "b-tutorial-popover__ripple", attrs: { "aria-hidden": "true" } }), e("div", { staticClass: "b-tutorial-popover__header" }, [e(s.BentoTypography, { attrs: { variant: "title", el: "span" } }, [t._v(" " + t._s(t.title) + " ")]), s.showSteps ? e(s.BentoTypography, { staticClass: "b-tutorial-popover__steps", attrs: { el: "span" } }, [t._v(" " + t._s(s.t("stepsOfTotal", { step: t.step, totalSteps: t.totalSteps })) + " ")]) : t._e()], 1), e(s.BentoTypography, [t._t("default")], 2), e("div", { staticClass: "b-tutorial-popover__footer" }, [s.isFirstStep ? t._e() : e(s.BentoMenu, { staticClass: "b-tutorial-popover__menu", attrs: { data: s.menuData, "data-testid": "menu-button" } }), e("div", { staticClass: "b-tutorial-popover__actions" }, [e(s.BentoButtonActions, { attrs: { actions: s.computedActions, layout: "buttons-end" } })], 1)], 1)], 1)], 1) : t._e();
+}, et = [], st = /* @__PURE__ */ d(
   Y,
   tt,
   et,
@@ -263,7 +262,7 @@ var tt = function() {
   null,
   "eecafacd"
 );
-const st = ot.exports, rt = {}, at = /* @__PURE__ */ h({
+const ot = st.exports, rt = {}, at = /* @__PURE__ */ h({
   ...rt,
   __name: "tutorial",
   props: {
@@ -295,7 +294,7 @@ const st = ot.exports, rt = {}, at = /* @__PURE__ */ h({
   },
   emits: ["update:index"],
   setup(n, { emit: t }) {
-    const e = n, o = f(e.index || 0), s = a(() => e.steps.length - 1), l = a(() => s.value === 0);
+    const e = n, s = f(e.index || 0), o = a(() => e.steps.length - 1), l = a(() => o.value === 0);
     function i(r, p) {
       return {
         // Visual
@@ -303,35 +302,35 @@ const st = ot.exports, rt = {}, at = /* @__PURE__ */ h({
         image: r.image,
         title: r.title,
         step: p,
-        totalSteps: s.value,
+        totalSteps: o.value,
         action: r.action,
         scrollOptions: e.scrollOptions,
         // Config
-        active: p === o.value,
+        active: p === s.value,
         single: l.value,
         position: r.position
       };
     }
-    return g(o, (r) => {
+    return g(s, (r) => {
       t("update:index", r);
     }), g(
       () => e.index,
       (r) => {
-        r >= -1 && r <= s.value && (o.value = r);
+        r >= -1 && r <= o.value && (s.value = r);
       }
-    ), { __sfc: !0, props: e, emit: t, currentStep: o, totalSteps: s, isSingleTutorial: l, getPopoverProps: i, TutorialPopover: st };
+    ), { __sfc: !0, props: e, emit: t, currentStep: s, totalSteps: o, isSingleTutorial: l, getPopoverProps: i, TutorialPopover: ot };
   }
 });
 var nt = function() {
-  var t = this, e = t._self._c, o = t._self._setupProxy;
-  return e("div", { staticClass: "b-tutorial" }, t._l(t.steps, function(s, l) {
-    return e(o.TutorialPopover, t._b({ key: s.title, on: { finish: function(i) {
-      o.currentStep = -1;
+  var t = this, e = t._self._c, s = t._self._setupProxy;
+  return e("div", { staticClass: "b-tutorial" }, t._l(t.steps, function(o, l) {
+    return e(s.TutorialPopover, t._b({ key: o.title, on: { finish: function(i) {
+      s.currentStep = -1;
     }, next: function(i) {
-      o.currentStep += 1;
+      s.currentStep += 1;
     }, restart: function(i) {
-      o.currentStep = 0;
-    } } }, "tutorial-popover", o.getPopoverProps(s, l), !1), [t._v(" " + t._s(s.description) + " ")]);
+      s.currentStep = 0;
+    } } }, "tutorial-popover", s.getPopoverProps(o, l), !1), [t._v(" " + t._s(o.description) + " ")]);
   }), 1);
 }, it = [], lt = /* @__PURE__ */ d(
   at,
@@ -341,8 +340,8 @@ var nt = function() {
   null,
   null
 );
-const Ot = lt.exports;
+const Ct = lt.exports;
 export {
-  Ot as t
+  Ct as t
 };
-//# sourceMappingURL=tutorial.D2msGkwn.js.map
+//# sourceMappingURL=tutorial.D64_0i0-.js.map

package/dist/chunks/tutorial.D64_0i0-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tutorial.D64_0i0-.js","sources":["../../src/components/tutorial/components/tutorial-popover/components/tutorial-indicator/tutorial-indicator.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/blocked.vue","../../src/components/tutorial/components/tutorial-popover/tutorial-popover.vue","../../src/components/tutorial/tutorial.vue"],"sourcesContent":["<template>\n    <popper-container\n        :target-element=\"targetElement\"\n        :middleware=\"middleware\"\n        position=\"top-start\"\n        fixed-positioning\n        disabled-focus-trap\n        class=\"b-tutorial-indicator\"\n        data-testid=\"tutorial-indicator\"\n    >\n        <div class=\"b-tutorial-indicator__highlight\" :style=\"computedStyles\"></div>\n    </popper-container>\n</template>\n\n<script setup lang=\"ts\">\n    import { ref } from 'vue';\n    import { hide, type Middleware, offset } from '@floating-ui/vue';\n    import { PopperContainer } from '@/components/popper-container';\n\n    const BORDER_OFFSET = 2;\n\n    defineProps({\n        /**\n         * Tutorial indicator's target element.\n         * The indicator will position itself around the target element.\n         */\n        targetElement: {\n            type: PopperContainer.props?.targetElement.type,\n            required: true,\n        },\n    });\n\n    const computedStyles = ref({\n        width: '0',\n        height: '0',\n        borderRadius: '0',\n    });\n\n    function getBorderRadius(element: HTMLElement) {\n        try {\n            const radius = parseFloat(getComputedStyle(element).getPropertyValue('border-radius'));\n            return Number.isNaN(radius) ? '' : `${radius + 2 * BORDER_OFFSET}px`;\n        } catch {\n            return '';\n        }\n    }\n\n    const middleware = [\n        hide(),\n        offset({\n            mainAxis: BORDER_OFFSET,\n            alignmentAxis: -BORDER_OFFSET,\n        }),\n        {\n            name: 'updateIndicatorSize',\n            fn: ({ x, y, elements }) => {\n                const target = elements.reference as HTMLElement;\n                computedStyles.value.width = `${target.offsetWidth + 4 * BORDER_OFFSET}px`;\n                computedStyles.value.height = `${target.offsetHeight + 4 * BORDER_OFFSET}px`;\n                computedStyles.value.borderRadius = getBorderRadius(target);\n                return { x, y };\n            },\n        } as Middleware,\n    ];\n</script>\n\n<style lang=\"scss\" scoped src=\"./tutorial-indicator.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><g :clip-path=\"'url(#uia-icons-16-blocked__a' + uuid + ')'\"><path fill=\"#00112C\" d=\"M9.51195 0.398918C8.00859 0.0998821 6.45033 0.253358 5.0342 0.839937C3.61808 1.42652 2.40769 2.41985 1.55611 3.69433C0.704529 4.96881 0.25 6.4672 0.25 8C0.25 10.0554 1.06652 12.0267 2.51992 13.4801C3.97333 14.9335 5.94457 15.75 8 15.75C9.53281 15.75 11.0312 15.2955 12.3057 14.4439C13.5801 13.5923 14.5735 12.3819 15.1601 10.9658C15.7466 9.54967 15.9001 7.99141 15.6011 6.48805C15.3021 4.9847 14.5639 3.60378 13.4801 2.51993C12.3962 1.43607 11.0153 0.697953 9.51195 0.398918ZM5.60823 2.22576C6.75027 1.75271 8.00693 1.62894 9.21931 1.8701C10.4317 2.11125 11.5453 2.70651 12.4194 3.58059C13.2935 4.45466 13.8887 5.56831 14.1299 6.78069C14.3711 7.99307 14.2473 9.24974 13.7742 10.3918C13.5555 10.9198 13.2667 11.4124 12.9177 11.8573L4.14271 3.0823C4.58761 2.73333 5.08018 2.44448 5.60823 2.22576ZM3.08208 4.14298L11.857 12.9179C11.7327 13.0154 11.6044 13.1085 11.4723 13.1967C10.4445 13.8834 9.23613 14.25 8 14.25C6.3424 14.25 4.75268 13.5915 3.58058 12.4194C2.40848 11.2473 1.75 9.65761 1.75 8C1.75 6.76387 2.11656 5.5555 2.80331 4.52769C2.89155 4.39564 2.98456 4.26733 3.08208 4.14298Z\"/></g><defs><clipPath :id=\"'uia-icons-16-blocked__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div v-if=\"active && targetElement\">\n        <tutorial-indicator v-if=\"isIndicatorVisible && targetElement\" :target-element=\"targetElement\" />\n\n        <bento-popover\n            :target-element=\"targetElement\"\n            :position=\"position\"\n            :open=\"isPopoverOpen\"\n            :aria-label=\"title\"\n            fixed-positioning\n            class=\"b-tutorial-popover\"\n            @keydown.esc.native=\"emit('finish')\"\n        >\n            <template v-if=\"image\" #image>\n                <bento-image v-bind=\"image\" aspect-ratio=\"landscape\" class=\"b-tutorial-popover__image\" />\n            </template>\n\n            <div aria-hidden=\"true\" class=\"b-tutorial-popover__ripple\"></div>\n\n            <div class=\"b-tutorial-popover__header\">\n                <bento-typography variant=\"title\" el=\"span\"> {{ title }} </bento-typography>\n\n                <bento-typography v-if=\"showSteps\" el=\"span\" class=\"b-tutorial-popover__steps\">\n                    {{ t('stepsOfTotal', { step, totalSteps }) }}\n                </bento-typography>\n            </div>\n\n            <bento-typography>\n                <slot />\n            </bento-typography>\n\n            <div class=\"b-tutorial-popover__footer\">\n                <bento-menu\n                    v-if=\"!isFirstStep\"\n                    :data=\"menuData\"\n                    class=\"b-tutorial-popover__menu\"\n                    data-testid=\"menu-button\"\n                />\n                <div class=\"b-tutorial-popover__actions\">\n                    <bento-button-actions :actions=\"computedActions\" layout=\"buttons-end\" />\n                </div>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, isRef, nextTick, PropType, ref, type default as Vue, watch } from 'vue';\n    import { BentoMenu } from '@/components/menu';\n    import { BentoPopover, BentoPopoverPositions } from '@/components/popover';\n    import { BentoTypography } from '@/components/typography';\n    import { type BentoButtonActionObject, BentoButtonActions } from '@/components/button';\n    import { BentoImage } from '@/components/image';\n    import { TutorialIndicator } from './components/tutorial-indicator';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { BentoMenuItem } from '@/components/menu/components';\n    import type { VueNodeElement } from '@/types';\n    import type { BentoTutorialScrollOptions, BentoTutorialStep } from '../../tutorial.types';\n    import RefreshIcon from '@adyen/ui-assets-icons-16/vue/refresh';\n    import BlockedIcon from '@adyen/ui-assets-icons-16/vue/blocked';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEFAULT_SCROLL_OPTIONS: BentoTutorialScrollOptions = { behavior: 'smooth' };\n\n    const props = defineProps({\n        /**\n         * Optional configuration for the secondary action.\n         * In tour tutorials, this is ignored for the introductory step.\n         */\n        action: {\n            type: Object as PropType<BentoButtonActionObject>,\n            default: null,\n        },\n\n        /**\n         * Indicates whether this popover is the active step (and should be visible).\n         */\n        active: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Optional illustration to display at the top of the popover.\n         */\n        image: {\n            type: Object as PropType<BentoTutorialStep['image']>,\n            default: null,\n        },\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: {\n            type: String as PropType<`${BentoPopoverPositions}`>,\n            default: BentoPopoverPositions.BOTTOM_START,\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n\n        /**\n         * Options to control the scroll into view behavior.\n         * Takes the same options as the `scrollIntoView` function\n         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView}\n         */\n        scrollOptions: {\n            type: [Boolean, Object] as PropType<BentoTutorialScrollOptions>,\n            default: null,\n        },\n\n        /**\n         * Indicates whether this popover is a single tutorial or a tour.\n         */\n        single: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The tutorial step number.\n         * In tour tutorials, `0` is the introductory step, and is displayed next\n         * to the title.\n         */\n        step: {\n            type: Number,\n            default: null,\n        },\n\n        /**\n         * Tutorial popover's target element.\n         * The popover will position itself relatively to target element.\n         */\n        targetElement: {\n            type: [Element, Object] as PropType<VueNodeElement>,\n            required: true,\n        },\n\n        /**\n         * The tutorial step title.\n         */\n        title: {\n            type: String,\n            required: true,\n        },\n\n        /**\n         * Total count of steps.\n         * In tour tutorials, this does not include the introductory step, and is\n         * displayed next to the title.\n         */\n        totalSteps: {\n            type: Number,\n            default: null,\n        },\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const emit = defineEmits([\"next\", \"finish\", \"restart\"]);\n\n    const ACTION_SKIP = computed<BentoButtonActionObject>(() => ({\n        title: t('skipTour') as string,\n        event: () => emit('finish'),\n    }));\n\n    const ACTION_START = computed<BentoButtonActionObject>(() => ({\n        title: t('startTour') as string,\n        event: () => emit('next'),\n    }));\n\n    const ACTION_NEXT = computed<BentoButtonActionObject>(() => ({\n        title: t('next') as string,\n        event: () => emit('next'),\n    }));\n\n    const ACTION_FINISH = computed<BentoButtonActionObject>(() => ({\n        title: t('finish') as string,\n        event: () => emit('finish'),\n    }));\n\n    const ACTION_OK = computed<BentoButtonActionObject>(() => ({\n        title: t('ok') as string,\n        event: () => emit('finish'),\n    }));\n\n    const isPopoverOpen = ref(false);\n    const isIndicatorVisible = ref(false);\n\n    const targetElement = computed(() => {\n        if (isRef(props.targetElement)) {\n            return ((props.targetElement.value as Vue)?.$el || props.targetElement.value) as HTMLElement;\n        }\n        return ((props.targetElement as Vue).$el || props.targetElement) as HTMLElement;\n    });\n\n    const isFirstStep = computed(() => props.step === 0);\n    const isLastStep = computed(() => props.step === props.totalSteps);\n\n    const showSteps = computed(() => !isFirstStep.value);\n\n    const menuData = computed<BentoMenuItem[]>(() => [\n        {\n            text: t('restartTour'),\n            handler: () => emit('restart'),\n            icon: RefreshIcon,\n        },\n        ...(isLastStep.value\n            ? []\n            : [\n                  {\n                      text: t('skipTour'),\n                      handler: () => emit('finish'),\n                      icon: BlockedIcon,\n                  },\n              ]),\n    ]);\n\n    const computedActions = computed(() => {\n        let primaryAction: BentoButtonActionObject;\n        if (isFirstStep.value) {\n            primaryAction = props.single ? ACTION_OK.value : ACTION_START.value;\n        } else if (isLastStep.value) {\n            primaryAction = ACTION_FINISH.value;\n        } else {\n            primaryAction = ACTION_NEXT.value;\n        }\n\n        const actions = [primaryAction];\n        if (isFirstStep.value && !props.single) {\n            actions.push(ACTION_SKIP.value);\n        } else if (props.action) {\n            actions.push(props.action);\n        }\n\n        return actions;\n    });\n\n    watch(\n        () => props.active,\n        async isActive => {\n            if (isActive && targetElement.value?.scrollIntoView) {\n                targetElement.value?.scrollIntoView(\n                    props.scrollOptions != null ? props.scrollOptions : DEFAULT_SCROLL_OPTIONS\n                );\n\n                // Skip to next tick to preserve popover appear animation\n                await nextTick();\n            }\n\n            isPopoverOpen.value = isActive;\n            isIndicatorVisible.value = isActive;\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./tutorial-popover.scss\" />\n","<template>\n    <div class=\"b-tutorial\">\n        <tutorial-popover\n            v-for=\"(step, i) in steps\"\n            v-bind=\"getPopoverProps(step, i)\"\n            :key=\"step.title\"\n            @finish=\"currentStep = -1\"\n            @next=\"currentStep += 1\"\n            @restart=\"currentStep = 0\"\n        >\n            {{ step.description }}\n        </tutorial-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref, watch } from 'vue';\n    import { TutorialPopover } from './components/tutorial-popover';\n    import type { BentoTutorialScrollOptions, BentoTutorialStep } from './tutorial.types';\n\n    const props = defineProps({\n        /**\n         * The current step index. If provided, will start the tutorial in that step.\n         */\n        index: {\n            type: Number,\n            default: null,\n        },\n\n        /**\n         * The steps configuration for the tutorial.\n         *\n         */\n        steps: {\n            type: Array as PropType<BentoTutorialStep[]>,\n            required: true,\n            validator: (value: BentoTutorialStep[]) => value.length > 0,\n        },\n\n        /**\n         * Options to control the scroll into view behavior.\n         * Takes the same options as the `scrollIntoView` function\n         * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView}\n         */\n        scrollOptions: {\n            type: [Boolean, Object] as PropType<BentoTutorialScrollOptions>,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits([\"update:index\"]);\n\n    const currentStep = ref(props.index || 0);\n\n    const totalSteps = computed(() => props.steps.length - 1);\n    const isSingleTutorial = computed(() => totalSteps.value === 0);\n\n    function getPopoverProps(step: BentoTutorialStep, index: number) {\n        return {\n            // Visual\n            targetElement: step.target,\n            image: step.image,\n            title: step.title,\n            step: index,\n            totalSteps: totalSteps.value,\n            action: step.action,\n            scrollOptions: props.scrollOptions,\n\n            // Config\n            active: index === currentStep.value,\n            single: isSingleTutorial.value,\n            position: step.position,\n        };\n    }\n\n    watch(currentStep, step => {\n        emit('update:index', step);\n    });\n\n    watch(\n        () => props.index,\n        value => {\n            if (value >= -1 && value <= totalSteps.value) {\n                currentStep.value = value;\n            }\n        }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The Tutorial is a temporary popover that should be used to educate users about\n     * new or unfamiliar features or experiences.\n     *\n     * You can use single tutorial or chain them into a tour.\n     *\n     * Only use this component for new features/experiences that are not obvious and\n     * self-explanatory on their own.\n     *\n     * @example\n     * import { BentoTutorial } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTutorial },\n     *     template: `\n     *         <bento-tutorial\n     *           :steps=\"[\n     *               {\n     *                   target: targetElement1,\n     *                   title: 'Tutorial intro title',\n     *                   description: 'Intro body content',\n     *                   image: { src: imageSource, alt: 'Alt text' }\n     *               },\n     *               {\n     *                   target: targetElement1,\n     *                   title: 'Tutorial intro title',\n     *                   description: 'Intro body content',\n     *                   action: { title: 'Action label', event: () => {} }\n     *               },\n     *           ]\"\n     *         />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n"],"names":["computedStyles","ref","getBorderRadius","element","radius","middleware","hide","offset","x","y","elements","target","uuid","_sfc_main$2","__default__$1","messages","DEFAULT_SCROLL_OPTIONS","t","useI18n","ACTION_SKIP","computed","emit","ACTION_START","ACTION_NEXT","ACTION_FINISH","ACTION_OK","isPopoverOpen","isIndicatorVisible","targetElement","isRef","props","_a","isFirstStep","isLastStep","showSteps","menuData","RefreshIcon","BlockedIcon","computedActions","primaryAction","actions","watch","isActive","_b","nextTick","__default__","currentStep","totalSteps","isSingleTutorial","getPopoverProps","step","index","value"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/chunks/{use-cached-selected-values.it4ENg3q.js → use-cached-selected-values.BOAumEi7.js}

@@ -1,18 +1,17 @@
 import { computed as c, ref as O, onMounted as te, onUnmounted as _e, watch as se, defineComponent as $, toRef as G } from "vue";
 import { B as w } from "./typography.CqQaHXhq.js";
 import { B as ge } from "./loading-indicator.DXc7I1Lm.js";
-import { B as ye } from "./empty-state.CaQuZx7L.js";
+import { B as ye } from "./empty-state.C2ba_wDp.js";
 import { u as Y } from "./i18n.BQkEbtPM.js";
 import { d as pe } from "./debounce.DUTu11PS.js";
 import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-/* empty css              */
 import { B as k, a as X } from "./keyboard-navigation.Clz1jOaA.js";
-import { B as J } from "./checkbox.CVSzcaHk.js";
+import { B as J } from "./checkbox.B3u_hzUo.js";
 import "./index.Cl4_42j5.js";
-import { C as Ce, a as Se } from "./chevron-up.DqJmLciO.js";
+import { C as Ce, a as Se } from "./chevron-up.B2uWhZf7.js";
 import { B as he } from "./base-button.qWj0m9-v.js";
-import { C as xe } from "./cross-small.CZqsjZDz.js";
-import { B as Ee, a as Z } from "./loading-button.CsaWlmzb.js";
+import { C as xe } from "./cross-small.BLUwtRB-.js";
+import { B as Ee, a as Z } from "./loading-button.DoX2sopf.js";
 import { o as Le } from "./resize.Bqks3WUm.js";
 import "../assets/use-cached-selected-values.css";
 const le = (t, e, s, l) => {
@@ -1243,7 +1242,7 @@ var Et = function() {
   null,
   "0d827a88"
 );
-const Vt = Ot.exports, H = (t, e) => {
+const zt = Ot.exports, H = (t, e) => {
   for (const s of t) {
     if (s.value === e)
       return s.label;
@@ -1251,7 +1250,7 @@ const Vt = Ot.exports, H = (t, e) => {
       return H(s.items, e);
   }
   return null;
-}, Yt = (t, e, s) => {
+}, Vt = (t, e, s) => {
   const l = O([]), n = O(), a = (b) => {
     n.value = s.value ? b.map(({ value: m }) => m) : b[0].value;
   }, o = (b) => {
@@ -1292,8 +1291,8 @@ const Vt = Ot.exports, H = (t, e) => {
 export {
   P as B,
   i as a,
-  Vt as b,
-  Yt as c,
+  zt as b,
+  Vt as c,
   _t as u
 };
-//# sourceMappingURL=use-cached-selected-values.it4ENg3q.js.map
+//# sourceMappingURL=use-cached-selected-values.BOAumEi7.js.map