npm - @adyen/bento-vue3 - Versions diffs - 1.89.2 → 1.90.0 - Mend

@adyen/bento-vue3 1.89.2 → 1.90.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (243) hide show

package/dist/chunks/{alert.C_8-VNi_.js → alert.CFWN2E0b.js} RENAMED Viewed

@@ -1,114 +1,121 @@
-import { openBlock as o, createElementBlock as f, mergeProps as L, toDisplayString as V, createCommentVNode as c, createElementVNode as s, defineComponent as N, useSlots as R, computed as r, onMounted as A, normalizeClass as P, createBlock as p, resolveDynamicComponent as D, unref as e, withCtx as _, renderSlot as h, createVNode as F } from "vue";
-import { c as I, a as U, B as y } from "./typography.B3J6_tYk.js";
-import { B as W } from "./button.DWF7FSIw.js";
-import { C as M } from "./cross-small.Bjq2Gqvh.js";
-import { W as Z } from "./warning-filled.BzyK_mMj.js";
+import { openBlock as t, createElementBlock as g, mergeProps as w, toDisplayString as V, createCommentVNode as l, createElementVNode as s, defineComponent as N, useSlots as R, computed as r, onMounted as F, normalizeClass as A, createBlock as I, resolveDynamicComponent as D, unref as o, withCtx as p, renderSlot as m, createVNode as P } from "vue";
+import { c as _, a as W, B as y } from "./typography.B3J6_tYk.js";
+import { B as M } from "./button.DWF7FSIw.js";
+import { C as U } from "./cross-small.Bjq2Gqvh.js";
+import { W as z } from "./warning-filled.BzyK_mMj.js";
 import { C as q } from "./cross-circle-fill.BWCKKn0E.js";
-import { C as j } from "./checkmark-circle-fill.DugX5fbG.js";
+import { C as Z } from "./checkmark-circle-fill.DugX5fbG.js";
 /* empty css              */
-import { _ as b } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { u as z } from "./use-has-slot.CyMiImRQ.js";
+import { _ as S } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { u as j } from "./use-has-slot.CyMiImRQ.js";
 import { u as J } from "./index.B875RXHM.js";
 import "../assets/alert.css";
-var m = /* @__PURE__ */ ((t) => (t.DEFAULT = "default", t.TIP = "tip", t))(m || {}), n = /* @__PURE__ */ ((t) => (t.WARNING = "warning", t.CRITICAL = "critical", t.HIGHLIGHT = "highlight", t.SUCCESS = "success", t))(n || {}), S = /* @__PURE__ */ ((t) => (t.CLOSE_ALERT = "close-alert", t))(S || {});
-let H = 0;
-const O = {
+var h = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.TIP = "tip", e))(h || {}), c = /* @__PURE__ */ ((e) => (e.WARNING = "warning", e.CRITICAL = "critical", e.HIGHLIGHT = "highlight", e.SUCCESS = "success", e))(c || {}), H = /* @__PURE__ */ ((e) => (e.CLOSE_ALERT = "close-alert", e))(H || {});
+let b = 0;
+const K = {
   beforeCreate() {
-    this.uuid = H.toString(), H += 1;
+    this.uuid = b.toString(), b += 1;
   }
-}, Y = { key: 0 }, K = ["clip-path"], Q = ["id"];
-function X(t, a, u, d, v, i) {
-  return o(), f("svg", L({ role: "img" }, t.$attrs, {
+}, O = { key: 0 }, X = ["clip-path"], Y = ["id"];
+function Q(e, i, u, d, v, n) {
+  return t(), g("svg", w({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    t.$attrs["svg-title"] ? (o(), f("title", Y, V(t.$attrs["svg-title"]), 1)) : c("", !0),
+    e.$attrs["svg-title"] ? (t(), g("title", O, V(e.$attrs["svg-title"]), 1)) : l("", !0),
     s("g", {
-      "clip-path": "url(#uia-ui-assets/icons-16-info_filled__a" + t.uuid + ")"
-    }, a[0] || (a[0] = [
+      "clip-path": "url(#uia-ui-assets/icons-16-info_filled__a" + e.uuid + ")"
+    }, i[0] || (i[0] = [
       s("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"
       }, null, -1)
-    ]), 8, K),
+    ]), 8, X),
     s("defs", null, [
       s("clipPath", {
-        id: "uia-ui-assets/icons-16-info_filled__a" + t.uuid
-      }, a[1] || (a[1] = [
+        id: "uia-ui-assets/icons-16-info_filled__a" + e.uuid
+      }, i[1] || (i[1] = [
         s("rect", {
           width: "16",
           height: "16",
           fill: "#fff"
         }, null, -1)
-      ]), 8, Q)
+      ]), 8, Y)
     ])
   ], 16);
 }
-const x = /* @__PURE__ */ b(O, [["render", X]]), T = {
+const x = /* @__PURE__ */ S(K, [["render", Q]]), L = {
+  "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" }
-}, tt = ["role"], et = { class: "b-alert__icon" }, ot = { class: "b-alert__content" }, st = {
+  "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: "警告图标" }
+}, ee = ["role"], oe = { class: "b-alert__icon" }, te = { class: "b-alert__content" }, se = {
   key: 2,
   class: "b-alert__actions",
   "data-testid": "alert-actions"
-}, it = {
-  i18n: { messages: T },
+}, ne = {
+  i18n: { messages: L },
   name: "bento-alert"
-}, nt = /* @__PURE__ */ N({
-  ...it,
+}, ce = /* @__PURE__ */ N({
+  ...ne,
   props: {
     closeButton: { type: Boolean, default: !1 },
-    type: { default: n.HIGHLIGHT },
-    variant: { default: m.DEFAULT }
+    type: { default: c.HIGHLIGHT },
+    variant: { default: h.DEFAULT }
   },
   emits: ["close-alert"],
-  setup(t, { emit: a }) {
-    const u = R(), d = z(u), v = a, i = t, { t: g } = J({ messages: T }), l = r(() => i.variant === m.TIP), $ = r(() => ({
-      [`b-alert--${i.type}`]: i.type,
-      [`b-alert--${m.TIP}`]: l.value
-    })), w = r(() => g(`${i.type}Icon`)), B = r(() => {
-      switch (i.type) {
-        case n.CRITICAL:
+  setup(e, { emit: i }) {
+    const u = R(), d = j(u), v = i, n = e, { t: f } = J({ messages: L }), a = r(() => n.variant === h.TIP), T = r(() => ({
+      [`b-alert--${n.type}`]: n.type,
+      [`b-alert--${h.TIP}`]: a.value
+    })), $ = r(() => f(`${n.type}Icon`)), B = r(() => {
+      switch (n.type) {
+        case c.CRITICAL:
           return q;
-        case n.SUCCESS:
-          return j;
-        case n.WARNING:
+        case c.SUCCESS:
           return Z;
-        case n.HIGHLIGHT:
+        case c.WARNING:
+          return z;
+        case c.HIGHLIGHT:
         default:
           return x;
       }
-    }), k = r(() => ({
-      el: U.DIV,
-      variant: l.value ? I.CAPTION : I.BODY,
+    }), E = r(() => ({
+      el: W.DIV,
+      variant: a.value ? _.CAPTION : _.BODY,
       wide: !0
-    })), E = r(() => i.type === n.HIGHLIGHT ? "status" : "alert"), G = () => {
-      v(S.CLOSE_ALERT);
+    })), k = r(() => n.type === c.HIGHLIGHT ? "status" : "alert"), G = () => {
+      v(H.CLOSE_ALERT);
     };
-    return A(() => {
+    return F(() => {
       if (!u.default && !u.description)
         throw new Error("Alert Component requires a title or a description");
-    }), (C, at) => (o(), f("div", {
+    }), (C, ie) => (t(), g("div", {
       class: "b-alert",
-      role: E.value
+      role: k.value
     }, [
       s("div", {
-        class: P(["b-alert__inner-container", $.value])
+        class: A(["b-alert__inner-container", T.value])
       }, [
-        s("div", et, [
-          (o(), p(D(B.value), {
+        s("div", oe, [
+          (t(), I(D(B.value), {
             "aria-hidden": "true",
-            "svg-title": w.value
+            "svg-title": $.value
           }, null, 8, ["svg-title"]))
         ]),
-        s("div", ot, [
-          e(d)("default") && !l.value ? (o(), p(e(y), {
+        s("div", te, [
+          o(d)("default") && !a.value ? (t(), I(o(y), {
             key: 0,
             class: "b-alert__title",
             el: "div",
@@ -116,46 +123,46 @@ const x = /* @__PURE__ */ b(O, [["render", X]]), T = {
             strongest: "",
             wide: ""
           }, {
-            default: _(() => [
-              h(C.$slots, "default", {}, void 0, !0)
+            default: p(() => [
+              m(C.$slots, "default", {}, void 0, !0)
             ]),
             _: 3
-          })) : c("", !0),
-          e(d)("description") ? (o(), p(e(y), L({
+          })) : l("", !0),
+          o(d)("description") ? (t(), I(o(y), w({
             key: 1,
             class: "b-alert__description"
-          }, k.value, { "data-testid": "alert-description" }), {
-            default: _(() => [
-              h(C.$slots, "description", {}, void 0, !0)
+          }, E.value, { "data-testid": "alert-description" }), {
+            default: p(() => [
+              m(C.$slots, "description", {}, void 0, !0)
             ]),
             _: 3
-          }, 16)) : c("", !0),
-          e(d)("actions") && !l.value ? (o(), f("div", st, [
-            h(C.$slots, "actions", {}, void 0, !0)
-          ])) : c("", !0)
+          }, 16)) : l("", !0),
+          o(d)("actions") && !a.value ? (t(), g("div", se, [
+            m(C.$slots, "actions", {}, void 0, !0)
+          ])) : l("", !0)
         ]),
-        C.closeButton && !l.value ? (o(), p(e(W), {
+        C.closeButton && !a.value ? (t(), I(o(M), {
           key: 0,
           class: "b-alert__close-button",
           variant: "tertiary",
           type: "button",
           onClick: G
         }, {
-          default: _(() => [
-            F(e(M), {
-              "svg-title": e(g)("close")
+          default: p(() => [
+            P(o(U), {
+              "svg-title": o(f)("close")
             }, null, 8, ["svg-title"])
           ]),
           _: 1
-        })) : c("", !0)
+        })) : l("", !0)
       ], 2)
-    ], 8, tt));
+    ], 8, ee));
   }
-}), vt = /* @__PURE__ */ b(nt, [["__scopeId", "data-v-5c5a81b8"]]);
+}), ve = /* @__PURE__ */ S(ce, [["__scopeId", "data-v-5c5a81b8"]]);
 export {
-  vt as B,
-  S as a,
-  n as b,
-  m as c
+  ve as B,
+  H as a,
+  c as b,
+  h as c
 };
-//# sourceMappingURL=alert.C_8-VNi_.js.map
+//# sourceMappingURL=alert.CFWN2E0b.js.map

package/dist/chunks/{alert.C_8-VNi_.js.map → alert.CFWN2E0b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"alert.C_8-VNi_.js","sources":["../../../vue2/src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../../vue2/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<{\n /\n Emits event when the alert is closed. `closeButton` must be `true`\n /\n (e: 'close-alert');\n }>();\n\n const props = withDefaults(\n defineProps<{\n /\n Adds a close button on the right side of the alert\n /\n closeButton?: boolean;\n\n /\n Type of a alert; set a distinctive icon and color. Defaults to highlight.\n * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING\n /\n type?: BentoAlertTypeOption \| `${BentoAlertTypeOption}`;\n\n /\n Variant for the alert\n * @values DEFAULT, TIP\n /\n variant?: BentoAlertVariant \| `${BentoAlertVariant}`;\n }>(),\n {\n closeButton: false,\n type: BentoAlertTypeOption.HIGHLIGHT,\n variant: BentoAlertVariant.DEFAULT,\n }\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","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","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;ACdR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAZZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,+CAAAD,EAAA,OAAA;AAAA;;QAA4E,MAAA;AAAA,QAAe,aAAA;AAAA,QAAoB,GAAA;AAAA,QAAwyE,aAAA;AAAA;IAFnmF,IAAA,GAAAL,CAAA;AAAA;;QAE6oF,IAAA,0CAAAK,EAAA;AAAA;;UAA0D,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAF9tF,IAAA,GAAAJ,CAAA;AAAA;;;;;;;;;;;GCqKIM,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;AApGA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GA0BA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAV,EAAA,CAAA,GAEAW,IAAAC,EAAA,MAAAL,EAAA,YAAAtB,EAAA,GAAA,GAEA4B,IAAAD,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAL,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAtB,EAAA,GAAA,EAAA,GAAA0B,EAAA;AAAA,IACkB,EAAA,GAGxDG,IAAAF,EAAA,MAAAH,EAAA,GAAAF,EAAA,IAAA,MAAA,CAAA,GAEAQ,IAAAH,EAAA,MAAA;AACI,cAAAL,EAAA,MAAA;AAAA,QAAoB,KAAApB,EAAA;AAEZ,iBAAA6B;AAAA,QAAO,KAAA7B,EAAA;AAEP,iBAAA8B;AAAA,QAAO,KAAA9B,EAAA;AAEP,iBAAA+B;AAAA,QAAO,KAAA/B,EAAA;AAAA,QACe;AAEtB,iBAAAgC;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAR,EAAA,OAAA;AAAA,MAA8C,IAAAS,EAAA;AAAA,MACf,SAAAV,EAAA,QAAAW,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAX,EAAA,MAAAL,EAAA,SAAApB,EAAA,YAAA,WAAA,OAAA,GAEAqC,IAAA,MAAA;AACI,MAAAnB,EAAAhB,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAAoC,EAAA,MAAA;AACI,UAAA,CAAAxB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"alert.CFWN2E0b.js","sources":["../../../vue2/src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../../vue2/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<{\n /\n Emits event when the alert is closed. `closeButton` must be `true`\n /\n (e: 'close-alert');\n }>();\n\n const props = withDefaults(\n defineProps<{\n /\n Adds a close button on the right side of the alert\n /\n closeButton?: boolean;\n\n /\n Type of a alert; set a distinctive icon and color. Defaults to highlight.\n * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING\n /\n type?: BentoAlertTypeOption \| `${BentoAlertTypeOption}`;\n\n /\n Variant for the alert\n * @values DEFAULT, TIP\n /\n variant?: BentoAlertVariant \| `${BentoAlertVariant}`;\n }>(),\n {\n closeButton: false,\n type: BentoAlertTypeOption.HIGHLIGHT,\n variant: BentoAlertVariant.DEFAULT,\n }\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","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","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;ACdR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAZZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,+CAAAD,EAAA,OAAA;AAAA;;QAA4E,MAAA;AAAA,QAAe,aAAA;AAAA,QAAoB,GAAA;AAAA,QAAwyE,aAAA;AAAA;IAFnmF,IAAA,GAAAL,CAAA;AAAA;;QAE6oF,IAAA,0CAAAK,EAAA;AAAA;;UAA0D,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAF9tF,IAAA,GAAAJ,CAAA;AAAA;;;;;;;;;;;;;;;;;;GCqKIM,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;AApGA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GA0BA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAV,EAAA,CAAA,GAEAW,IAAAC,EAAA,MAAAL,EAAA,YAAAtB,EAAA,GAAA,GAEA4B,IAAAD,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAL,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAtB,EAAA,GAAA,EAAA,GAAA0B,EAAA;AAAA,IACkB,EAAA,GAGxDG,IAAAF,EAAA,MAAAH,EAAA,GAAAF,EAAA,IAAA,MAAA,CAAA,GAEAQ,IAAAH,EAAA,MAAA;AACI,cAAAL,EAAA,MAAA;AAAA,QAAoB,KAAApB,EAAA;AAEZ,iBAAA6B;AAAA,QAAO,KAAA7B,EAAA;AAEP,iBAAA8B;AAAA,QAAO,KAAA9B,EAAA;AAEP,iBAAA+B;AAAA,QAAO,KAAA/B,EAAA;AAAA,QACe;AAEtB,iBAAAgC;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAR,EAAA,OAAA;AAAA,MAA8C,IAAAS,EAAA;AAAA,MACf,SAAAV,EAAA,QAAAW,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAX,EAAA,MAAAL,EAAA,SAAApB,EAAA,YAAA,WAAA,OAAA,GAEAqC,IAAA,MAAA;AACI,MAAAnB,EAAAhB,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAAoC,EAAA,MAAA;AACI,UAAA,CAAAxB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/anchor-scroller.DSfXK6vK.js ADDED Viewed

@@ -0,0 +1,214 @@
+import { defineComponent as R, ref as S, computed as h, watch as y, openBlock as g, createElementBlock as x, Fragment as $, renderList as K, createVNode as I, withKeys as C, withModifiers as j, normalizeClass as V, withCtx as w, createTextVNode as D, toDisplayString as E, watchEffect as L, toRef as z, createElementVNode as B, unref as b, renderSlot as H, createCommentVNode as J } from "vue";
+import { f as O, d as W, u as P, g as U, t as A, h as G, r as X } from "./index.DDwcHPb6.js";
+import { p as M, B as Y } from "./typography.B3J6_tYk.js";
+import { u as q } from "./index.B875RXHM.js";
+import { g as Q } from "./generate-uid.DBWe4g6T.js";
+import { u as T } from "./utils.DWmc2mUI.js";
+import { F as Z } from "./fixed-scroller.yVsaQzy5.js";
+import { B as ee } from "./button.DWF7FSIw.js";
+import { _ as N } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/anchor-scroller.css";
+const te = /* @__PURE__ */ R({
+  __name: "anchor-scroller-list",
+  props: {
+    activeIndex: { default: void 0 },
+    items: {},
+    scrollOffset: { default: void 0 }
+  },
+  setup(v) {
+    const l = v, c = S([]), i = h(
+      () => l.items.map((e, a) => ({ disabled: e.disabled, originalIndex: a })).filter(({ disabled: e }) => !e).map(({ originalIndex: e }) => e)
+    ), {
+      state: u,
+      next: f,
+      prev: d
+    } = O(i, {
+      initialValue: l.activeIndex ?? i.value[0]
+    });
+    y(u, async (e) => {
+      const a = c.value[e], o = T(a);
+      o && typeof o.focus == "function" && o.focus();
+    });
+    const s = (e, a) => {
+      if (a)
+        return;
+      const o = T(e);
+      if (!o) {
+        M("[bento-anchor-scroller] element ref not found");
+        return;
+      }
+      if (!o.style.scrollMarginTop && l.scrollOffset) {
+        const r = window.getComputedStyle(o).scrollMarginTop;
+        (r === "0px" || r === "") && (o.style.scrollMarginTop = `${l.scrollOffset}px`);
+      }
+      o.hasAttribute("tabindex") || o.setAttribute("tabindex", "-1"), o.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest"
+      }), o.focus({ preventScroll: !0 });
+    }, _ = (e) => {
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault(), f();
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), d();
+          break;
+        case "Home":
+          e.preventDefault(), u.value = 0;
+          break;
+        case "End":
+          e.preventDefault(), u.value = i.value.length - 1;
+          break;
+      }
+    };
+    return (e, a) => (g(), x("ul", {
+      class: "b-anchor-scroller-list",
+      onKeydown: _
+    }, [
+      (g(!0), x($, null, K(e.items, ({ title: o, disabled: r, elementRef: m }, n) => (g(), x("li", {
+        key: n,
+        class: "b-anchor-scroller-list__item"
+      }, [
+        I(ee, {
+          ref_for: !0,
+          ref_key: "listItemRefs",
+          ref: c,
+          "aria-current": e.activeIndex === n ? "location" : null,
+          class: V(["b-anchor-scroller-list__item-button", {
+            "b-anchor-scroller-list__item-button--active": e.activeIndex === n,
+            "b-anchor-scroller-list__item-button--disabled": r
+          }]),
+          "aria-disabled": r,
+          tabindex: e.activeIndex === n ? null : "-1",
+          variant: "tertiary-with-background",
+          onClick: (p) => s(m, r),
+          onKeydown: [
+            C(j((p) => s(m, r), ["prevent"]), ["space", "native"]),
+            C(j((p) => s(m, r), ["prevent"]), ["enter", "native"])
+          ]
+        }, {
+          default: w(() => [
+            D(E(o), 1)
+          ]),
+          _: 2
+        }, 1032, ["aria-current", "class", "aria-disabled", "tabindex", "onClick", "onKeydown"])
+      ]))), 128))
+    ], 32));
+  }
+}), oe = /* @__PURE__ */ N(te, [["__scopeId", "data-v-03d99bd8"]]), F = {
+  "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: "跳转到" }
+}, ne = (v, l) => {
+  const c = S(l.default?.value ?? -1), { y: i } = W(), { height: u } = P(), f = () => {
+    const d = A(v), s = u.value, _ = s / 2;
+    let e = -1, a = 0;
+    for (let o = 0; o < d.length; o++) {
+      const m = d[o];
+      if (!m)
+        continue;
+      const n = m.getBoundingClientRect();
+      if (n.top > _)
+        continue;
+      const p = Math.min(n.bottom, s) - Math.max(n.top, 0);
+      if (p <= 0)
+        continue;
+      const t = p / n.height;
+      t > a && (a = t, e = o);
+    }
+    e !== -1 && c.value !== e && (c.value = e);
+  };
+  return U([i, u], f, { throttle: 100, trailing: !0 }), L(() => {
+    A(v).length && f();
+  }), {
+    activeIndex: c
+  };
+}, ae = {
+  key: 0,
+  class: "b-anchor-scroller"
+}, re = ["aria-labelledby"], ie = { class: "b-anchor-scroller__navigation-panel" }, se = {
+  i18n: { messages: F },
+  name: "bento-anchor-scroller"
+}, le = /* @__PURE__ */ R({
+  ...se,
+  props: {
+    activeIndex: { default: void 0 },
+    items: {}
+  },
+  emits: ["update:active-index"],
+  setup(v, { emit: l }) {
+    const { t: c } = q({ messages: F }), i = v, u = l, f = S(null), d = h(() => i.items.map((t) => ({ ...t }))), s = h(
+      () => i.items.map((t, k) => ({
+        element: T(t.elementRef),
+        originalIndex: k,
+        disabled: t.disabled
+      })).filter(
+        (t) => !t.disabled && !!t.element
+      )
+    ), { top: _, bottom: e } = G(f), a = h(() => s.value.map((t) => t.element)), o = h(() => ({
+      "b-anchor-scroller__navigation--pinned": _.value <= 1
+    })), { activeIndex: r } = ne(a, {
+      default: z(i, "activeIndex")
+    }), m = X(r, 200), n = h(() => {
+      const t = s.value[m.value];
+      return t ? t.originalIndex : 0;
+    });
+    y(n, (t) => {
+      Number.isFinite(t) && u("update:active-index", t);
+    }), y(
+      () => i.activeIndex,
+      (t) => {
+        Number.isFinite(t) && d.value[t].disabled && M("[bento-anchor-scroller] activeIndex should not be a disabled item");
+      }
+    );
+    const p = Q("bento-anchor-scroller-label");
+    return (t, k) => d.value.length ? (g(), x("div", ae, [
+      B("nav", {
+        ref_key: "navigationRef",
+        ref: f,
+        class: V(["b-anchor-scroller__navigation", o.value]),
+        "aria-labelledby": b(p)
+      }, [
+        I(b(Z), {
+          condensed: "",
+          centered: ""
+        }, {
+          default: w(() => [
+            B("div", ie, [
+              I(Y, {
+                id: b(p),
+                el: "span",
+                class: "b-anchor-scroller__navigation-panel-label",
+                stronger: ""
+              }, {
+                default: w(() => [
+                  D(E(b(c)("jumpTo")), 1)
+                ]),
+                _: 1
+              }, 8, ["id"]),
+              I(b(oe), {
+                items: d.value,
+                "active-index": n.value,
+                "scroll-offset": b(e)
+              }, null, 8, ["items", "active-index", "scroll-offset"])
+            ])
+          ]),
+          _: 1
+        })
+      ], 10, re),
+      H(t.$slots, "default", {}, void 0, !0)
+    ])) : J("", !0);
+  }
+}), _e = /* @__PURE__ */ N(le, [["__scopeId", "data-v-9e21fa07"]]);
+export {
+  _e as a
+};
+//# sourceMappingURL=anchor-scroller.DSfXK6vK.js.map

package/dist/chunks/{anchor-scroller.NhjLDBZI.js.map → anchor-scroller.DSfXK6vK.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"anchor-scroller.NhjLDBZI.js","sources":["../../../vue2/src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../../vue2/src/components/anchor-scroller/composables/use-scroll-spy/use-scroll-spy.ts","../../../vue2/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 = withDefaults(defineProps<AnchorScrollerListProps>(), {\n activeIndex: undefined,\n scrollOffset: 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 = withDefaults(defineProps<BentoAnchorScrollerProps>(), {\n activeIndex: undefined,\n });\n\n const emit = defineEmits<{\n /\n Emits update event when the active index is changed\n /\n (e: 'update:active-index', value: number): void;\n }>();\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":["props","__props","listItemRefs","ref","listIndices","computed","item","index","disabled","originalIndex","focusedIndex","next","prev","useCycleList","watch","newIndex","targetComponent","el","unrefElement","scrollToSection","elementRef","printDevelopmentWarning","currentScrollMargin","onKeydownNavigation","useScrollSpy","items","options","activeIndex","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","rect","visibleHeight","ratio","watchThrottled","watchEffect","__default__","messages","t","useI18n","emit","__emit","navigationRef","computedItems","enabledItems","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","relativeActiveIndex","toRef","debouncedActiveIndex","refDebounced","currentActiveIndex","candidate","val","navLabelId","generateUid"],"mappings":"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"}
1	+ {"version":3,"file":"anchor-scroller.DSfXK6vK.js","sources":["../../../vue2/src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../../vue2/src/components/anchor-scroller/composables/use-scroll-spy/use-scroll-spy.ts","../../../vue2/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 = withDefaults(defineProps<AnchorScrollerListProps>(), {\n activeIndex: undefined,\n scrollOffset: 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 = withDefaults(defineProps<BentoAnchorScrollerProps>(), {\n activeIndex: undefined,\n });\n\n const emit = defineEmits<{\n /\n Emits update event when the active index is changed\n /\n (e: 'update:active-index', value: number): void;\n }>();\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":["props","__props","listItemRefs","ref","listIndices","computed","item","index","disabled","originalIndex","focusedIndex","next","prev","useCycleList","watch","newIndex","targetComponent","el","unrefElement","scrollToSection","elementRef","printDevelopmentWarning","currentScrollMargin","onKeydownNavigation","useScrollSpy","items","options","activeIndex","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","rect","visibleHeight","ratio","watchThrottled","watchEffect","__default__","messages","t","useI18n","emit","__emit","navigationRef","computedItems","enabledItems","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","relativeActiveIndex","toRef","debouncedActiveIndex","refDebounced","currentActiveIndex","candidate","val","navLabelId","generateUid"],"mappings":"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"}