@adyen/bento-vue2 1.89.2 → 1.90.0

package/dist/chunks/alert.CXRb-Smf.js

@@ -0,0 +1,160 @@
+import { defineComponent as v, useSlots as y, computed as c, onMounted as b } from "vue";
+import { c as l, a as S, B as T } from "./typography.C8lPlsbD.js";
+import { B as w } from "./button.C9b2AC9w.js";
+import { C as H } from "./cross-small.CoQUe8SS.js";
+import { W as L } from "./warning-filled.CbJ1pcB2.js";
+import { C as B } from "./cross-circle-fill.DTDtgLMf.js";
+import { C as E } from "./checkmark-circle-fill.BttTCjrM.js";
+/* empty css              */
+import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { u as R } from "./use-has-slot.C9lQZ6nz.js";
+import { u as G } from "./index.B6WW_F-J.js";
+import "../assets/alert.css";
+var i = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.TIP = "tip", e))(i || {}), n = /* @__PURE__ */ ((e) => (e.WARNING = "warning", e.CRITICAL = "critical", e.HIGHLIGHT = "highlight", e.SUCCESS = "success", e))(n || {}), d = /* @__PURE__ */ ((e) => (e.CLOSE_ALERT = "close-alert", e))(d || {});
+let C = 0;
+const F = {
+  beforeCreate() {
+    this.uuid = C.toString(), C += 1;
+  }
+};
+var V = function() {
+  var s = this, t = s._self._c;
+  return t("svg", s._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", s.$attrs, !1), [s.$attrs["svg-title"] ? t("title", [s._v(s._s(s.$attrs["svg-title"]))]) : s._e(), t("g", { attrs: { "clip-path": "url(#uia-ui-assets/icons-16-info_filled__a" + s.uuid + ")" } }, [t("path", { attrs: { fill: "#001222", "fill-rule": "evenodd", d: "M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z", "clip-rule": "evenodd" } })]), t("defs", [t("clipPath", { attrs: { id: "uia-ui-assets/icons-16-info_filled__a" + s.uuid } }, [t("rect", { attrs: { width: "16", height: "16", fill: "#fff" } })])])]);
+}, $ = [], x = /* @__PURE__ */ u(
+  F,
+  V,
+  $,
+  !1,
+  null,
+  null
+);
+const A = x.exports, P = {
+  "de-DE": {
+    close: "Schließen",
+    criticalIcon: "Kritisches Symbol",
+    highlightIcon: "Symbol hervorheben",
+    successIcon: "Erfolgssymbol",
+    warningIcon: "Warnungssymbol"
+  },
+  "en-GB": {
+    close: "Close",
+    criticalIcon: "Critical icon",
+    highlightIcon: "Highlight icon",
+    successIcon: "Success icon",
+    warningIcon: "Warning icon"
+  },
+  "en-US": {
+    close: "Close",
+    criticalIcon: "Critical icon",
+    highlightIcon: "Highlight icon",
+    successIcon: "Success icon",
+    warningIcon: "Warning icon"
+  },
+  "es-ES": {
+    close: "Cerrar",
+    criticalIcon: "Icono de error crítico",
+    highlightIcon: "Icono de resaltado",
+    successIcon: "Icono de éxito",
+    warningIcon: "Icono de advertencia"
+  },
+  "es-MX": {
+    close: "Cerrar",
+    criticalIcon: "Icono crítico",
+    highlightIcon: "Icono de resaltado",
+    successIcon: "Icono de éxito",
+    warningIcon: "Icono de advertencia"
+  },
+  "fr-FR": {
+    close: "Fermer",
+    criticalIcon: "Icône critique",
+    highlightIcon: "Icône de surbrillance",
+    successIcon: "Icône de réussite",
+    warningIcon: "Icône d'avertissement"
+  },
+  "it-IT": {
+    close: "Chiudi",
+    criticalIcon: "Icona critica",
+    highlightIcon: "Icona di evidenziazione",
+    successIcon: "Icona del successo",
+    warningIcon: "Icona di avviso"
+  },
+  "ja-JP": {
+    close: "閉じる",
+    criticalIcon: "重大アイコン",
+    highlightIcon: "ハイライトアイコン",
+    successIcon: "成功アイコン",
+    warningIcon: "警告アイコン"
+  },
+  "pt-BR": {
+    close: "Fechar",
+    criticalIcon: "Ícone crítico",
+    highlightIcon: "Ícone de destaque",
+    successIcon: "Ícone de sucesso",
+    warningIcon: "Ícone de aviso"
+  },
+  "zh-CN": {
+    close: "关闭",
+    criticalIcon: "关键图标",
+    highlightIcon: "高亮图标",
+    successIcon: "成功图标",
+    warningIcon: "警告图标"
+  }
+}, W = {
+  i18n: { messages: P },
+  name: "bento-alert"
+}, N = /* @__PURE__ */ v({
+  ...W,
+  props: {
+    closeButton: { type: Boolean, default: !1 },
+    type: { default: n.HIGHLIGHT },
+    variant: { default: i.DEFAULT }
+  },
+  emits: ["close-alert"],
+  setup(e, { emit: s }) {
+    const t = e, o = y(), I = R(o), { t: r } = G(), a = c(() => t.variant === i.TIP), h = c(() => ({
+      [`b-alert--${t.type}`]: t.type,
+      [`b-alert--${i.TIP}`]: a.value
+    })), p = c(() => r(`${t.type}Icon`)), _ = c(() => {
+      switch (t.type) {
+        case n.CRITICAL:
+          return B;
+        case n.SUCCESS:
+          return E;
+        case n.WARNING:
+          return L;
+        case n.HIGHLIGHT:
+        default:
+          return A;
+      }
+    }), g = c(() => ({
+      el: S.DIV,
+      variant: a.value ? l.CAPTION : l.BODY,
+      wide: !0
+    })), f = c(() => t.type === n.HIGHLIGHT ? "status" : "alert"), m = () => {
+      s(d.CLOSE_ALERT);
+    };
+    return b(() => {
+      if (!o.default && !o.description)
+        throw new Error("Alert Component requires a title or a description");
+    }), { __sfc: !0, slots: o, hasSlot: I, emit: s, props: t, t: r, isTipVariant: a, alertConditionalClasses: h, iconSvgTitle: p, iconComponent: _, descriptionTypography: g, computedRole: f, onCloseButtonClick: m, BentoTypography: T, BentoButton: w, CrossSmall: H };
+  }
+});
+var k = function() {
+  var s = this, t = s._self._c, o = s._self._setupProxy;
+  return t("div", { staticClass: "b-alert", attrs: { role: o.computedRole } }, [t("div", { staticClass: "b-alert__inner-container", class: o.alertConditionalClasses }, [t("div", { staticClass: "b-alert__icon" }, [t(o.iconComponent, { tag: "component", attrs: { "aria-hidden": "true", "svg-title": o.iconSvgTitle } })], 1), t("div", { staticClass: "b-alert__content" }, [o.hasSlot("default") && !o.isTipVariant ? t(o.BentoTypography, { staticClass: "b-alert__title", attrs: { el: "div", variant: "body", strongest: "", wide: "" } }, [s._t("default")], 2) : s._e(), o.hasSlot("description") ? t(o.BentoTypography, s._b({ staticClass: "b-alert__description", attrs: { "data-testid": "alert-description" } }, "bento-typography", o.descriptionTypography, !1), [s._t("description")], 2) : s._e(), o.hasSlot("actions") && !o.isTipVariant ? t("div", { staticClass: "b-alert__actions", attrs: { "data-testid": "alert-actions" } }, [s._t("actions")], 2) : s._e()], 1), s.closeButton && !o.isTipVariant ? t(o.BentoButton, { staticClass: "b-alert__close-button", attrs: { variant: "tertiary", type: "button" }, on: { click: o.onCloseButtonClick } }, [t(o.CrossSmall, { attrs: { "svg-title": o.t("close") } })], 1) : s._e()], 1)]);
+}, D = [], M = /* @__PURE__ */ u(
+  N,
+  k,
+  D,
+  !1,
+  null,
+  "2c793db1"
+);
+const tt = M.exports;
+export {
+  tt as B,
+  d as a,
+  n as b,
+  i as c
+};
+//# sourceMappingURL=alert.CXRb-Smf.js.map

package/dist/chunks/{alert.QVQ6Zjbm.js.map → alert.CXRb-Smf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.QVQ6Zjbm.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#001222\" fill-rule=\"evenodd\" d=\"M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z\" clip-rule=\"evenodd\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" 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-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;GC8HIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert.CXRb-Smf.js","sources":["../../src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#001222\" fill-rule=\"evenodd\" d=\"M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z\" clip-rule=\"evenodd\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" 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-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"close-alert\"]);\n\n    const props = defineProps({\n  closeButton: { type: Boolean, default: false },\n  type: { default: BentoAlertTypeOption.HIGHLIGHT },\n  variant: { default: BentoAlertVariant.DEFAULT }\n});\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_sfc_main$1","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","isTipVariant","computed","props","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","emit","onMounted"],"mappings":";;;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC8HIE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;iBA3EAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAUA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,YAAAlB,EAAA,GAAA,GAEAmB,IAAAF,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAC,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAlB,EAAA,GAAA,EAAA,GAAAgB,EAAA;AAAA,IACkB,EAAA,GAGxDI,IAAAH,EAAA,MAAAH,EAAA,GAAAI,EAAA,IAAA,MAAA,CAAA,GAEAG,IAAAJ,EAAA,MAAA;AACI,cAAAC,EAAA,MAAA;AAAA,QAAoB,KAAAhB,EAAA;AAEZ,iBAAAoB;AAAA,QAAO,KAAApB,EAAA;AAEP,iBAAAqB;AAAA,QAAO,KAAArB,EAAA;AAEP,iBAAAsB;AAAA,QAAO,KAAAtB,EAAA;AAAA,QACe;AAEtB,iBAAAuB;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAT,EAAA,OAAA;AAAA,MAA8C,IAAAU,EAAA;AAAA,MACf,SAAAX,EAAA,QAAAY,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAZ,EAAA,MAAAC,EAAA,SAAAhB,EAAA,YAAA,WAAA,OAAA,GAEA4B,IAAA,MAAA;AACI,MAAAC,EAAA3B,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAA4B,EAAA,MAAA;AACI,UAAA,CAAAtB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{anchor-scroller.CjJ26PJS.js → anchor-scroller.DWaykZQj.js}

@@ -1,14 +1,14 @@
-import { defineComponent as w, ref as x, computed as m, watch as h, watchEffect as S, toRef as T } from "vue";
-import { f as A, d as B, u as R, g as D, t as y, h as F, r as L } from "./index.CwzYJHw2.js";
-import { p as k, B as M } from "./typography.C8lPlsbD.js";
-import { u as O } from "./index.B6WW_F-J.js";
-import { g as j } from "./generate-uid.NJ8tVoha.js";
+import { defineComponent as T, ref as x, computed as m, watch as h, watchEffect as C, toRef as k } from "vue";
+import { f as j, d as B, u as A, g as R, t as y, h as D, r as F } from "./index.CwzYJHw2.js";
+import { p as S, B as E } from "./typography.C8lPlsbD.js";
+import { u as L } from "./index.B6WW_F-J.js";
+import { g as M } from "./generate-uid.NJ8tVoha.js";
 import { u as g } from "./utils.BzUwtTXc.js";
-import { B as E } from "./button.DxhJNOtr.js";
-import { n as C } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { F as N } from "./fixed-scroller.MerESbd_.js";
+import { B as N } from "./button.C9b2AC9w.js";
+import { n as w } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { F as O } from "./fixed-scroller.DR2E_No4.js";
 import "../assets/anchor-scroller.css";
-const H = /* @__PURE__ */ w({
+const V = /* @__PURE__ */ T({
   __name: "anchor-scroller-list",
   props: {
     activeIndex: { default: void 0 },
@@ -22,7 +22,7 @@ const H = /* @__PURE__ */ w({
       state: c,
       next: i,
       prev: l
-    } = A(t, {
+    } = j(t, {
       initialValue: e.activeIndex ?? t.value[0]
     });
     return h(c, async (r) => {
@@ -33,7 +33,7 @@ const H = /* @__PURE__ */ w({
         return;
       const a = g(r);
       if (!a) {
-        k("[bento-anchor-scroller] element ref not found");
+        S("[bento-anchor-scroller] element ref not found");
         return;
       }
       if (!a.style.scrollMarginTop && e.scrollOffset) {
@@ -60,10 +60,10 @@ const H = /* @__PURE__ */ w({
           r.preventDefault(), c.value = t.value.length - 1;
           break;
       }
-    }, BentoButton: E };
+    }, BentoButton: N };
   }
 });
-var V = function() {
+var z = function() {
   var e = this, n = e._self._c, t = e._self._setupProxy;
   return n("ul", { staticClass: "b-anchor-scroller-list", on: { keydown: t.onKeydownNavigation } }, e._l(e.items, function({ title: c, disabled: i, elementRef: l }, d) {
     return n("li", { key: d, staticClass: "b-anchor-scroller-list__item" }, [n(t.BentoButton, { ref: "listItemRefs", refInFor: !0, staticClass: "b-anchor-scroller-list__item-button", class: {
@@ -77,21 +77,48 @@ var V = function() {
       return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : (s.preventDefault(), t.scrollToSection(l, i));
     }] } }, [e._v(" " + e._s(c) + " ")])], 1);
   }), 0);
-}, K = [], P = /* @__PURE__ */ C(
-  H,
+}, H = [], P = /* @__PURE__ */ w(
   V,
-  K,
+  z,
+  H,
   !1,
   null,
   "5668c5f7"
 );
-const W = P.exports, z = {
-  "en-US": { jumpTo: "Jump to" },
-  "ja-JP": { jumpTo: "移動先" },
-  "pt-BR": { jumpTo: "Ir para" }
-}, J = (p, e) => {
+const J = P.exports, K = {
+  "de-DE": {
+    jumpTo: "Springe zu"
+  },
+  "en-GB": {
+    jumpTo: "Jump to"
+  },
+  "en-US": {
+    jumpTo: "Jump to"
+  },
+  "es-ES": {
+    jumpTo: "Saltar a"
+  },
+  "es-MX": {
+    jumpTo: "Saltar a"
+  },
+  "fr-FR": {
+    jumpTo: "Passer à"
+  },
+  "it-IT": {
+    jumpTo: "Vai a"
+  },
+  "ja-JP": {
+    jumpTo: "移動先"
+  },
+  "pt-BR": {
+    jumpTo: "Ir para"
+  },
+  "zh-CN": {
+    jumpTo: "跳转到"
+  }
+}, W = (p, e) => {
   var l;
-  const n = x(((l = e.default) == null ? void 0 : l.value) ?? -1), { y: t } = B(), { height: c } = R(), i = () => {
+  const n = x(((l = e.default) == null ? void 0 : l.value) ?? -1), { y: t } = B(), { height: c } = A(), i = () => {
     const d = y(p), s = c.value, r = s / 2;
     let u = -1, a = 0;
     for (let f = 0; f < d.length; f++) {
@@ -109,15 +136,15 @@ const W = P.exports, z = {
     }
     u !== -1 && n.value !== u && (n.value = u);
   };
-  return D([t, c], i, { throttle: 100, trailing: !0 }), S(() => {
+  return R([t, c], i, { throttle: 100, trailing: !0 }), C(() => {
     y(p).length && i();
   }), {
     activeIndex: n
   };
 }, U = {
-  i18n: { messages: z },
+  i18n: { messages: K },
   name: "bento-anchor-scroller"
-}, Y = /* @__PURE__ */ w({
+}, G = /* @__PURE__ */ T({
   ...U,
   props: {
     activeIndex: { default: void 0 },
@@ -125,7 +152,7 @@ const W = P.exports, z = {
   },
   emits: ["update:active-index"],
   setup(p, { emit: e }) {
-    const n = p, { t } = O(), c = x(null), i = m(() => n.items.map((o) => ({ ...o }))), l = m(
+    const n = p, { t } = L(), c = x(null), i = m(() => n.items.map((o) => ({ ...o }))), l = m(
       () => n.items.map((o, _) => ({
         element: g(o.elementRef),
         originalIndex: _,
@@ -133,11 +160,11 @@ const W = P.exports, z = {
       })).filter(
         (o) => !o.disabled && !!o.element
       )
-    ), { top: d, bottom: s } = F(c), r = m(() => l.value.map((o) => o.element)), u = m(() => ({
+    ), { top: d, bottom: s } = D(c), r = m(() => l.value.map((o) => o.element)), u = m(() => ({
       "b-anchor-scroller__navigation--pinned": d.value <= 1
-    })), { activeIndex: a } = J(r, {
-      default: T(n, "activeIndex")
-    }), f = L(a, 200), b = m(() => {
+    })), { activeIndex: a } = W(r, {
+      default: k(n, "activeIndex")
+    }), f = F(a, 200), b = m(() => {
       const o = l.value[f.value];
       return o ? o.originalIndex : 0;
     });
@@ -146,26 +173,26 @@ const W = P.exports, z = {
     }), h(
       () => n.activeIndex,
       (o) => {
-        Number.isFinite(o) && i.value[o].disabled && k("[bento-anchor-scroller] activeIndex should not be a disabled item");
+        Number.isFinite(o) && i.value[o].disabled && S("[bento-anchor-scroller] activeIndex should not be a disabled item");
       }
     );
-    const v = j("bento-anchor-scroller-label");
-    return { __sfc: !0, t, props: n, emit: e, navigationRef: c, computedItems: i, enabledItems: l, top: d, bottom: s, scrollToTargets: r, navigationConditionalClasses: u, relativeActiveIndex: a, debouncedActiveIndex: f, currentActiveIndex: b, navLabelId: v, BentoTypography: M, FixedScroller: N, AnchorScrollerList: W };
+    const v = M("bento-anchor-scroller-label");
+    return { __sfc: !0, t, props: n, emit: e, navigationRef: c, computedItems: i, enabledItems: l, top: d, bottom: s, scrollToTargets: r, navigationConditionalClasses: u, relativeActiveIndex: a, debouncedActiveIndex: f, currentActiveIndex: b, navLabelId: v, BentoTypography: E, FixedScroller: O, AnchorScrollerList: J };
   }
 });
-var q = function() {
+var X = function() {
   var e = this, n = e._self._c, t = e._self._setupProxy;
   return t.computedItems.length ? n("div", { staticClass: "b-anchor-scroller" }, [n("nav", { ref: "navigationRef", staticClass: "b-anchor-scroller__navigation", class: t.navigationConditionalClasses, attrs: { "aria-labelledby": t.navLabelId } }, [n(t.FixedScroller, { attrs: { condensed: "", centered: "" } }, [n("div", { staticClass: "b-anchor-scroller__navigation-panel" }, [n(t.BentoTypography, { staticClass: "b-anchor-scroller__navigation-panel-label", attrs: { id: t.navLabelId, el: "span", stronger: "" } }, [e._v(" " + e._s(t.t("jumpTo")) + " ")]), n(t.AnchorScrollerList, { attrs: { items: t.computedItems, "active-index": t.currentActiveIndex, "scroll-offset": t.bottom } })], 1)])], 1), e._t("default")], 2) : e._e();
-}, G = [], Q = /* @__PURE__ */ C(
-  Y,
-  q,
+}, Y = [], q = /* @__PURE__ */ w(
   G,
+  X,
+  Y,
   !1,
   null,
   "ae16e25c"
 );
-const se = Q.exports;
+const se = q.exports;
 export {
   se as a
 };
-//# sourceMappingURL=anchor-scroller.CjJ26PJS.js.map
+//# sourceMappingURL=anchor-scroller.DWaykZQj.js.map

package/dist/chunks/{anchor-scroller.CjJ26PJS.js.map → anchor-scroller.DWaykZQj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"anchor-scroller.CjJ26PJS.js","sources":["../../src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../src/components/anchor-scroller/composables/use-scroll-spy/use-scroll-spy.ts","../../src/components/anchor-scroller/anchor-scroller.vue"],"sourcesContent":["<template>\n    <ul class=\"b-anchor-scroller-list\" @keydown=\"onKeydownNavigation\">\n        <li v-for=\"({ title, disabled, elementRef }, index) in items\" :key=\"index\" class=\"b-anchor-scroller-list__item\">\n            <bento-button\n                ref=\"listItemRefs\"\n                :aria-current=\"activeIndex === index ? 'location' : null\"\n                class=\"b-anchor-scroller-list__item-button\"\n                :class=\"{\n                    'b-anchor-scroller-list__item-button--active': activeIndex === index,\n                    'b-anchor-scroller-list__item-button--disabled': disabled,\n                }\"\n                :aria-disabled=\"disabled\"\n                :tabindex=\"activeIndex === index ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"scrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"scrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"scrollToSection(elementRef, disabled)\"\n            >\n                {{ title }}\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import BentoButton from '@/components/button/button.vue';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAnchorScrollerItem } from '../../anchor-scroller.types';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, ref, watch } from 'vue';\n    import { useCycleList } from '@vueuse/core';\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null,\n  scrollOffset: { default: undefined }\n});\n\n    const listItemRefs = ref([]);\n    const listIndices = computed(() =>\n        props.items\n            .map((item, index) => ({ disabled: item.disabled, originalIndex: index }))\n            .filter(({ disabled }) => !disabled)\n            .map(({ originalIndex }) => originalIndex)\n    );\n\n    const {\n        state: focusedIndex,\n        next,\n        prev,\n    } = useCycleList(listIndices, {\n        initialValue: props.activeIndex ?? listIndices.value[0],\n    });\n\n    watch(focusedIndex, async newIndex => {\n        const targetComponent = listItemRefs.value[newIndex];\n        const el = unrefElement(targetComponent); // Handles Component or DOM node\n\n        if (el && typeof el.focus === 'function') {\n            el.focus();\n        }\n    });\n\n    const scrollToSection = (elementRef: BentoAnchorScrollerItem['elementRef'], disabled?: boolean) => {\n        if (disabled) {\n            return;\n        }\n\n        const el = unrefElement(elementRef);\n\n        if (!el) {\n            printDevelopmentWarning(`[bento-anchor-scroller] element ref not found`);\n            return;\n        }\n\n        if (!el.style.scrollMarginTop && props.scrollOffset) {\n            const currentScrollMargin = window.getComputedStyle(el).scrollMarginTop;\n\n            if (currentScrollMargin === '0px' || currentScrollMargin === '') {\n                el.style.scrollMarginTop = `${props.scrollOffset}px`;\n            }\n        }\n\n        if (!el.hasAttribute('tabindex')) {\n            el.setAttribute('tabindex', '-1');\n        }\n\n        el.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start',\n            inline: 'nearest',\n        });\n\n        el.focus({ preventScroll: true });\n    };\n\n    const onKeydownNavigation = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case 'ArrowRight':\n                e.preventDefault();\n                next();\n                break;\n            case 'ArrowLeft':\n                e.preventDefault();\n                prev();\n                break;\n            case 'Home':\n                e.preventDefault();\n                focusedIndex.value = 0;\n                break;\n            case 'End':\n                e.preventDefault();\n                focusedIndex.value = listIndices.value.length - 1;\n                break;\n        }\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","import { type Ref, ref, watchEffect } from 'vue';\nimport { type MaybeRef, toValue, useWindowScroll, useWindowSize, watchThrottled } from '@vueuse/core';\n\n/**\n * Options for the useScrollSpy composable.\n */\nexport interface useScrollSpyOptions {\n    /**\n     * The default active index to use when no item is active or initially.\n     */\n    default?: Ref<number>;\n}\n\n/**\n * Composable to spy on scroll position and determine the active item based on visibility.\n *\n * @param items - The list of elements to spy on.\n * @param options - Configuration options for the scroll spy.\n * @returns An object containing the active index.\n */\nexport const useScrollSpy = (items: MaybeRef<Array<Element>>, options: useScrollSpyOptions) => {\n    const activeIndex = ref(options.default?.value ?? -1);\n\n    const { y: scrollY } = useWindowScroll();\n    const { height: windowHeight } = useWindowSize();\n\n    // Logic to find the \"winner\" when there are multiple items on the same page\n    const calculateActiveIndex = () => {\n        const list = toValue(items);\n        const viewportHeight = windowHeight.value;\n        const midpoint = viewportHeight / 2;\n\n        let winnerIndex = -1;\n        let maxVisibleRatio = 0;\n\n        for (let i = 0; i < list.length; i++) {\n            const item = list[i];\n            const el = item;\n\n            if (!el) {\n                continue;\n            }\n\n            const rect = el.getBoundingClientRect();\n\n            // Constraint 1: Must pass midpoint\n            if (rect.top > midpoint) {\n                continue;\n            }\n\n            // Constraint 2: Must be visible\n            const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);\n            if (visibleHeight <= 0) {\n                continue;\n            }\n\n            // Constraint 3: Highest visible % wins\n            const ratio = visibleHeight / rect.height;\n\n            if (ratio > maxVisibleRatio) {\n                maxVisibleRatio = ratio;\n                winnerIndex = i;\n            }\n        }\n\n        // Only update if changed to avoid unnecessary patch triggers\n        if (winnerIndex !== -1 && activeIndex.value !== winnerIndex) {\n            activeIndex.value = winnerIndex;\n        }\n    };\n\n    watchThrottled([scrollY, windowHeight], calculateActiveIndex, { throttle: 100, trailing: true });\n\n    watchEffect(() => {\n        if (toValue(items).length) {\n            calculateActiveIndex();\n        }\n    });\n\n    return {\n        activeIndex,\n    };\n};\n","<template>\n    <div v-if=\"computedItems.length\" class=\"b-anchor-scroller\">\n        <nav\n            ref=\"navigationRef\"\n            class=\"b-anchor-scroller__navigation\"\n            :class=\"navigationConditionalClasses\"\n            :aria-labelledby=\"navLabelId\"\n        >\n            <fixed-scroller condensed centered>\n                <div class=\"b-anchor-scroller__navigation-panel\">\n                    <bento-typography\n                        :id=\"navLabelId\"\n                        el=\"span\"\n                        class=\"b-anchor-scroller__navigation-panel-label\"\n                        stronger\n                    >\n                        {{ t('jumpTo') }}\n                    </bento-typography>\n\n                    <anchor-scroller-list\n                        :items=\"computedItems\"\n                        :active-index=\"currentActiveIndex\"\n                        :scroll-offset=\"bottom\"\n                    />\n                </div>\n            </fixed-scroller>\n        </nav>\n\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, watch } from 'vue';\n    import { refDebounced, useElementBounding } from '@vueuse/core';\n    import BentoTypography from '@/components/typography/typography.vue';\n    import { FixedScroller } from '@/internal';\n    import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types';\n    import { AnchorScrollerList } from './components/anchor-scroller-list';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from './composables';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null\n});\n\n    const emit = defineEmits([\"update:active-index\"]);\n\n    const navigationRef = ref(null);\n\n    const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item })));\n\n    // Skip and cache only items that are enabled\n    const enabledItems = computed(() =>\n        props.items\n            .map((item, originalIndex) => ({\n                element: unrefElement(item.elementRef),\n                originalIndex,\n                disabled: item.disabled,\n            }))\n            .filter(\n                (item): item is { element: Element; originalIndex: number; disabled: boolean } =>\n                    !item.disabled && !!item.element\n            )\n    );\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    // Extract strictly the elements for the ScrollSpy to watch\n    const scrollToTargets = computed(() => enabledItems.value.map(c => c.element));\n\n    const navigationConditionalClasses = computed(() => ({\n        'b-anchor-scroller__navigation--pinned': top.value <= 1,\n    }));\n\n    const { activeIndex: relativeActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n    });\n\n    const debouncedActiveIndex = refDebounced(relativeActiveIndex, 200);\n\n    const currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[debouncedActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    watch(currentActiveIndex, val => {\n        if (Number.isFinite(val)) {\n            emit('update:active-index', val);\n        }\n    });\n\n    watch(\n        () => props.activeIndex,\n        val => {\n            if (Number.isFinite(val) && computedItems.value[val].disabled) {\n                printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`);\n            }\n        }\n    );\n\n    const navLabelId = generateUid('bento-anchor-scroller-label');\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A navigation component that tracks page scroll and allows jumping to sections.\n     *\n     * @example\n     * import { BentoAnchorScroller } from '@adyen/bento-vue2';\n     * import { ref } from 'vue';\n     *\n     * export default {\n     *     components: { BentoAnchorScroller },\n     *     template: `\n     *          <bento-anchor-scroller :items=\"items\">\n     *              <section ref=\"section1\">Section 1</section>\n     *              <section ref=\"section2\">Section 2</section>\n     *          </bento-anchor-scroller>\n     *     `,\n     *      setup() {\n     *          const section1 = ref(null);\n     *          const section2 = ref(null);\n     *          const items = ref([\n     *              { title: 'Section 1', elementRef: section1 },\n     *              { title: 'Section 2', elementRef: section2 },\n     *          ]);\n     *          return {\n     *              items,\n     *              section1,\n     *              section2,\n     *          }\n     *      }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-anchor-scroller',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller.scss\" />\n"],"names":["listItemRefs","ref","listIndices","computed","props","item","index","disabled","originalIndex","focusedIndex","next","prev","useCycleList","watch","newIndex","targetComponent","el","unrefElement","elementRef","printDevelopmentWarning","currentScrollMargin","e","useScrollSpy","items","options","activeIndex","_a","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","rect","visibleHeight","ratio","watchThrottled","watchEffect","__default__","messages","useI18n","navigationRef","computedItems","enabledItems","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","relativeActiveIndex","toRef","debouncedActiveIndex","refDebounced","currentActiveIndex","candidate","val","emit","navLabelId","generateUid"],"mappings":"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"}
+{"version":3,"file":"anchor-scroller.DWaykZQj.js","sources":["../../src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../src/components/anchor-scroller/composables/use-scroll-spy/use-scroll-spy.ts","../../src/components/anchor-scroller/anchor-scroller.vue"],"sourcesContent":["<template>\n    <ul class=\"b-anchor-scroller-list\" @keydown=\"onKeydownNavigation\">\n        <li v-for=\"({ title, disabled, elementRef }, index) in items\" :key=\"index\" class=\"b-anchor-scroller-list__item\">\n            <bento-button\n                ref=\"listItemRefs\"\n                :aria-current=\"activeIndex === index ? 'location' : null\"\n                class=\"b-anchor-scroller-list__item-button\"\n                :class=\"{\n                    'b-anchor-scroller-list__item-button--active': activeIndex === index,\n                    'b-anchor-scroller-list__item-button--disabled': disabled,\n                }\"\n                :aria-disabled=\"disabled\"\n                :tabindex=\"activeIndex === index ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"scrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"scrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"scrollToSection(elementRef, disabled)\"\n            >\n                {{ title }}\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import BentoButton from '@/components/button/button.vue';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAnchorScrollerItem } from '../../anchor-scroller.types';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, ref, watch } from 'vue';\n    import { useCycleList } from '@vueuse/core';\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null,\n  scrollOffset: { default: undefined }\n});\n\n    const listItemRefs = ref([]);\n    const listIndices = computed(() =>\n        props.items\n            .map((item, index) => ({ disabled: item.disabled, originalIndex: index }))\n            .filter(({ disabled }) => !disabled)\n            .map(({ originalIndex }) => originalIndex)\n    );\n\n    const {\n        state: focusedIndex,\n        next,\n        prev,\n    } = useCycleList(listIndices, {\n        initialValue: props.activeIndex ?? listIndices.value[0],\n    });\n\n    watch(focusedIndex, async newIndex => {\n        const targetComponent = listItemRefs.value[newIndex];\n        const el = unrefElement(targetComponent); // Handles Component or DOM node\n\n        if (el && typeof el.focus === 'function') {\n            el.focus();\n        }\n    });\n\n    const scrollToSection = (elementRef: BentoAnchorScrollerItem['elementRef'], disabled?: boolean) => {\n        if (disabled) {\n            return;\n        }\n\n        const el = unrefElement(elementRef);\n\n        if (!el) {\n            printDevelopmentWarning(`[bento-anchor-scroller] element ref not found`);\n            return;\n        }\n\n        if (!el.style.scrollMarginTop && props.scrollOffset) {\n            const currentScrollMargin = window.getComputedStyle(el).scrollMarginTop;\n\n            if (currentScrollMargin === '0px' || currentScrollMargin === '') {\n                el.style.scrollMarginTop = `${props.scrollOffset}px`;\n            }\n        }\n\n        if (!el.hasAttribute('tabindex')) {\n            el.setAttribute('tabindex', '-1');\n        }\n\n        el.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start',\n            inline: 'nearest',\n        });\n\n        el.focus({ preventScroll: true });\n    };\n\n    const onKeydownNavigation = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case 'ArrowRight':\n                e.preventDefault();\n                next();\n                break;\n            case 'ArrowLeft':\n                e.preventDefault();\n                prev();\n                break;\n            case 'Home':\n                e.preventDefault();\n                focusedIndex.value = 0;\n                break;\n            case 'End':\n                e.preventDefault();\n                focusedIndex.value = listIndices.value.length - 1;\n                break;\n        }\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","import { type Ref, ref, watchEffect } from 'vue';\nimport { type MaybeRef, toValue, useWindowScroll, useWindowSize, watchThrottled } from '@vueuse/core';\n\n/**\n * Options for the useScrollSpy composable.\n */\nexport interface useScrollSpyOptions {\n    /**\n     * The default active index to use when no item is active or initially.\n     */\n    default?: Ref<number>;\n}\n\n/**\n * Composable to spy on scroll position and determine the active item based on visibility.\n *\n * @param items - The list of elements to spy on.\n * @param options - Configuration options for the scroll spy.\n * @returns An object containing the active index.\n */\nexport const useScrollSpy = (items: MaybeRef<Array<Element>>, options: useScrollSpyOptions) => {\n    const activeIndex = ref(options.default?.value ?? -1);\n\n    const { y: scrollY } = useWindowScroll();\n    const { height: windowHeight } = useWindowSize();\n\n    // Logic to find the \"winner\" when there are multiple items on the same page\n    const calculateActiveIndex = () => {\n        const list = toValue(items);\n        const viewportHeight = windowHeight.value;\n        const midpoint = viewportHeight / 2;\n\n        let winnerIndex = -1;\n        let maxVisibleRatio = 0;\n\n        for (let i = 0; i < list.length; i++) {\n            const item = list[i];\n            const el = item;\n\n            if (!el) {\n                continue;\n            }\n\n            const rect = el.getBoundingClientRect();\n\n            // Constraint 1: Must pass midpoint\n            if (rect.top > midpoint) {\n                continue;\n            }\n\n            // Constraint 2: Must be visible\n            const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);\n            if (visibleHeight <= 0) {\n                continue;\n            }\n\n            // Constraint 3: Highest visible % wins\n            const ratio = visibleHeight / rect.height;\n\n            if (ratio > maxVisibleRatio) {\n                maxVisibleRatio = ratio;\n                winnerIndex = i;\n            }\n        }\n\n        // Only update if changed to avoid unnecessary patch triggers\n        if (winnerIndex !== -1 && activeIndex.value !== winnerIndex) {\n            activeIndex.value = winnerIndex;\n        }\n    };\n\n    watchThrottled([scrollY, windowHeight], calculateActiveIndex, { throttle: 100, trailing: true });\n\n    watchEffect(() => {\n        if (toValue(items).length) {\n            calculateActiveIndex();\n        }\n    });\n\n    return {\n        activeIndex,\n    };\n};\n","<template>\n    <div v-if=\"computedItems.length\" class=\"b-anchor-scroller\">\n        <nav\n            ref=\"navigationRef\"\n            class=\"b-anchor-scroller__navigation\"\n            :class=\"navigationConditionalClasses\"\n            :aria-labelledby=\"navLabelId\"\n        >\n            <fixed-scroller condensed centered>\n                <div class=\"b-anchor-scroller__navigation-panel\">\n                    <bento-typography\n                        :id=\"navLabelId\"\n                        el=\"span\"\n                        class=\"b-anchor-scroller__navigation-panel-label\"\n                        stronger\n                    >\n                        {{ t('jumpTo') }}\n                    </bento-typography>\n\n                    <anchor-scroller-list\n                        :items=\"computedItems\"\n                        :active-index=\"currentActiveIndex\"\n                        :scroll-offset=\"bottom\"\n                    />\n                </div>\n            </fixed-scroller>\n        </nav>\n\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, watch } from 'vue';\n    import { refDebounced, useElementBounding } from '@vueuse/core';\n    import BentoTypography from '@/components/typography/typography.vue';\n    import { FixedScroller } from '@/internal';\n    import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types';\n    import { AnchorScrollerList } from './components/anchor-scroller-list';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from './composables';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  activeIndex: { default: undefined },\n  items: null\n});\n\n    const emit = defineEmits([\"update:active-index\"]);\n\n    const navigationRef = ref(null);\n\n    const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item })));\n\n    // Skip and cache only items that are enabled\n    const enabledItems = computed(() =>\n        props.items\n            .map((item, originalIndex) => ({\n                element: unrefElement(item.elementRef),\n                originalIndex,\n                disabled: item.disabled,\n            }))\n            .filter(\n                (item): item is { element: Element; originalIndex: number; disabled: boolean } =>\n                    !item.disabled && !!item.element\n            )\n    );\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    // Extract strictly the elements for the ScrollSpy to watch\n    const scrollToTargets = computed(() => enabledItems.value.map(c => c.element));\n\n    const navigationConditionalClasses = computed(() => ({\n        'b-anchor-scroller__navigation--pinned': top.value <= 1,\n    }));\n\n    const { activeIndex: relativeActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n    });\n\n    const debouncedActiveIndex = refDebounced(relativeActiveIndex, 200);\n\n    const currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[debouncedActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    watch(currentActiveIndex, val => {\n        if (Number.isFinite(val)) {\n            emit('update:active-index', val);\n        }\n    });\n\n    watch(\n        () => props.activeIndex,\n        val => {\n            if (Number.isFinite(val) && computedItems.value[val].disabled) {\n                printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`);\n            }\n        }\n    );\n\n    const navLabelId = generateUid('bento-anchor-scroller-label');\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A navigation component that tracks page scroll and allows jumping to sections.\n     *\n     * @example\n     * import { BentoAnchorScroller } from '@adyen/bento-vue2';\n     * import { ref } from 'vue';\n     *\n     * export default {\n     *     components: { BentoAnchorScroller },\n     *     template: `\n     *          <bento-anchor-scroller :items=\"items\">\n     *              <section ref=\"section1\">Section 1</section>\n     *              <section ref=\"section2\">Section 2</section>\n     *          </bento-anchor-scroller>\n     *     `,\n     *      setup() {\n     *          const section1 = ref(null);\n     *          const section2 = ref(null);\n     *          const items = ref([\n     *              { title: 'Section 1', elementRef: section1 },\n     *              { title: 'Section 2', elementRef: section2 },\n     *          ]);\n     *          return {\n     *              items,\n     *              section1,\n     *              section2,\n     *          }\n     *      }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-anchor-scroller',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller.scss\" />\n"],"names":["listItemRefs","ref","listIndices","computed","props","item","index","disabled","originalIndex","focusedIndex","next","prev","useCycleList","watch","newIndex","targetComponent","el","unrefElement","elementRef","printDevelopmentWarning","currentScrollMargin","e","useScrollSpy","items","options","activeIndex","_a","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","rect","visibleHeight","ratio","watchThrottled","watchEffect","__default__","messages","useI18n","navigationRef","computedItems","enabledItems","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","relativeActiveIndex","toRef","debouncedActiveIndex","refDebounced","currentActiveIndex","candidate","val","emit","navLabelId","generateUid"],"mappings":";;;;;;;;;;;;;;;;;;iBAuCIA,IAAAC,EAAA,CAAA,CAAA,GACAC,IAAAC;AAAA,MAAoB,MAAAC,EAAA,MAAA,IAAA,CAAAC,GAAAC,OAAA,EAAA,UAAAD,EAAA,UAAA,eAAAC,EAAA,EAAA,EAAA,OAAA,CAAA,EAAA,UAAAC,EAAA,MAAA,CAAAA,CAAA,EAAA,IAAA,CAAA,EAAA,eAAAC,EAAA,MAAAA,CAAA;AAAA,IAI6B,GAGjD;AAAA,MAAM,OAAAC;AAAA,MACK,MAAAC;AAAA,MACP,MAAAC;AAAA,IACA,IAAAC,EAAAV,GAAA;AAAA,MAC0B,cAAAE,EAAA,eAAAF,EAAA,MAAA,CAAA;AAAA,IAC4B,CAAA;AAG1D,WAAAW,EAAAJ,GAAA,OAAAK,MAAA;AACI,YAAAC,IAAAf,EAAA,MAAAc,CAAA,GACAE,IAAAC,EAAAF,CAAA;AAEA,MAAAC,KAAA,OAAAA,EAAA,SAAA,cACIA,EAAA,MAAA;AAAA,IACJ,CAAA,+GAGJ,CAAAE,GAAAX,MAAA;AACI,UAAAA;AACI;AAGJ,YAAAS,IAAAC,EAAAC,CAAA;AAEA,UAAA,CAAAF,GAAA;AACI,QAAAG,EAAA,+CAAA;AACA;AAAA,MAAA;AAGJ,UAAA,CAAAH,EAAA,MAAA,mBAAAZ,EAAA,cAAA;AACI,cAAAgB,IAAA,OAAA,iBAAAJ,CAAA,EAAA;AAEA,SAAAI,MAAA,SAAAA,MAAA,QACIJ,EAAA,MAAA,kBAAA,GAAAZ,EAAA,YAAA;AAAA,MACJ;AAGJ,MAAAY,EAAA,aAAA,UAAA,KACIA,EAAA,aAAA,YAAA,IAAA,GAGJA,EAAA,eAAA;AAAA,QAAkB,UAAA;AAAA,QACJ,OAAA;AAAA,QACH,QAAA;AAAA,MACC,CAAA,GAGZA,EAAA,MAAA,EAAA,eAAA,GAAA,CAAA;AAAA,IAAgC,wBAGpC,CAAAK,MAAA;AACI,cAAAA,EAAA,KAAA;AAAA,QAAe,KAAA;AAEP,UAAAA,EAAA,eAAA,GACAX,EAAA;AACA;AAAA,QAAA,KAAA;AAEA,UAAAW,EAAA,eAAA,GACAV,EAAA;AACA;AAAA,QAAA,KAAA;AAEA,UAAAU,EAAA,eAAA,GACAZ,EAAA,QAAA;AACA;AAAA,QAAA,KAAA;AAEA,UAAAY,EAAA,eAAA,GACAZ,EAAA,QAAAP,EAAA,MAAA,SAAA;AACA;AAAA,MAAA;AAAA,IACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC/FDoB,IAAA,CAAAC,GAAAC,MAAA;;AACH,QAAAC,IAAAxB,IAAAyB,IAAAF,EAAA,YAAA,gBAAAE,EAAA,UAAA,EAAA,GAEA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACA,EAAA,QAAAC,EAAA,IAAAC,EAAA,GAGAC,IAAA,MAAA;AACI,UAAAC,IAAAC,EAAAV,CAAA,GACAW,IAAAL,EAAA,OACAM,IAAAD,IAAA;AAEA,QAAAE,IAAA,IACAC,IAAA;AAEA,aAAAC,IAAA,GAAAA,IAAAN,EAAA,QAAAM,KAAA;AAEI,YAAAtB,IADAgB,EAAAM,CAAA;AAGA,UAAA,CAAAtB;AACI;AAGJ,YAAAuB,IAAAvB,EAAA,sBAAA;AAGA,UAAAuB,EAAA,MAAAJ;AACI;AAIJ,YAAAK,IAAA,KAAA,IAAAD,EAAA,QAAAL,CAAA,IAAA,KAAA,IAAAK,EAAA,KAAA,CAAA;AACA,UAAAC,KAAA;AACI;AAIJ,YAAAC,IAAAD,IAAAD,EAAA;AAEA,MAAAE,IAAAJ,MACIA,IAAAI,GACAL,IAAAE;AAAA,IACJ;AAIJ,IAAAF,MAAA,MAAAX,EAAA,UAAAW,MACIX,EAAA,QAAAW;AAAA,EACJ;AAGJ,SAAAM,EAAA,CAAAf,GAAAE,CAAA,GAAAE,GAAA,EAAA,UAAA,KAAA,UAAA,GAAA,CAAA,GAEAY,EAAA,MAAA;AACI,IAAAV,EAAAV,CAAA,EAAA,UACIQ,EAAA;AAAA,EACJ,CAAA,GAGJ;AAAA,IAAO,aAAAN;AAAA,EACH;AAER,GC+DImB,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;iBApGA,EAAA,EAAA,IAAAC,EAAA,GASAC,IAAA9C,EAAA,IAAA,GAEA+C,IAAA7C,EAAA,MAAAC,EAAA,MAAA,IAAA,CAAAC,OAAA,EAAA,GAAAA,EAAA,EAAA,CAAA,GAGA4C,IAAA9C;AAAA,MAAqB,MAAAC,EAAA,MAAA,IAAA,CAAAC,GAAAG,OAAA;AAAA,QAEkB,SAAAS,EAAAZ,EAAA,UAAA;AAAA,QACU,eAAAG;AAAA,QACrC,UAAAH,EAAA;AAAA,MACe,EAAA,EAAA;AAAA,QAElB,CAAAA,MAAA,CAAAA,EAAA,YAAA,CAAA,CAAAA,EAAA;AAAA,MAEgC;AAAA,IACjC,GAGR,EAAA,KAAA6C,GAAA,QAAAC,EAAA,IAAAC,EAAAL,CAAA,GAGAM,IAAAlD,EAAA,MAAA8C,EAAA,MAAA,IAAA,CAAAK,MAAAA,EAAA,OAAA,CAAA,GAEAC,IAAApD,EAAA,OAAA;AAAA,MAAqD,yCAAA+C,EAAA,SAAA;AAAA,IACK,EAAA,GAG1D,EAAA,aAAAM,EAAA,IAAAlC,EAAA+B,GAAA;AAAA,MAA2E,SAAAI,EAAArD,GAAA,aAAA;AAAA,IACpC,CAAA,GAGvCsD,IAAAC,EAAAH,GAAA,GAAA,GAEAI,IAAAzD,EAAA,MAAA;AACI,YAAA0D,IAAAZ,EAAA,MAAAS,EAAA,KAAA;AAEA,aAAAG,IAAAA,EAAA,gBAAA;AAAA,IAA6C,CAAA;AAGjD,IAAAhD,EAAA+C,GAAA,CAAAE,MAAA;AACI,MAAA,OAAA,SAAAA,CAAA,KACIC,EAAA,uBAAAD,CAAA;AAAA,IACJ,CAAA,GAGJjD;AAAA,MAAA,MAAAT,EAAA;AAAA,MACgB,CAAA0D,MAAA;AAER,QAAA,OAAA,SAAAA,CAAA,KAAAd,EAAA,MAAAc,CAAA,EAAA,YACI3C,EAAA,mEAAA;AAAA,MACJ;AAAA,IACJ;AAGJ,UAAA6C,IAAAC,EAAA,6BAAA;;;;;;;;;;;;;;;;"}