@adyen/bento-vue3 1.89.2 → 1.90.0

package/dist/chunks/action-bar.Pe_hvtja.js

@@ -0,0 +1,336 @@
+import { defineComponent as ne, computed as c, ref as f, toRefs as te, watch as R, provide as se, nextTick as E, openBlock as s, createBlock as l, Transition as T, withCtx as u, createElementVNode as x, unref as e, normalizeClass as O, createVNode as C, createElementBlock as m, normalizeStyle as oe, createCommentVNode as d, Fragment as U, createTextVNode as y, toDisplayString as g, renderSlot as ie } from "vue";
+import { B as S } from "./button.DWF7FSIw.js";
+import { B as F } from "./typography.B3J6_tYk.js";
+import { B as ce } from "./loading-indicator.BPol9I84.js";
+import { B as re } from "./button-actions-with-menu.DvkS16ur.js";
+import { C as le } from "./cross.CCHdi6v3.js";
+import { C as ue } from "./checkmark-circle-fill.DugX5fbG.js";
+import { C as de } from "./cross-circle-fill.BWCKKn0E.js";
+import { u as ve } from "./index.B875RXHM.js";
+import { u as me } from "./index.DDwcHPb6.js";
+import { P as ge, B as he } from "./button-actions.Bh_PZ_fV.js";
+import { _ as fe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/action-bar.css";
+const P = {
+  "de-DE": { actionBar: "Aktionsleiste", applying: "Anwenden...", cancel: "Abbrechen", close: "Schließen", retry: "Wiederholen", save: "Speichern", selected: "ausgewählt", somethingWentWrong: "Etwas ist schief gelaufen", success: "Erfolg!", undo: "Rückgängig machen", unsavedChanges: "Ungespeicherte Änderungen | ungespeicherte Änderung | ungespeicherte Änderungen" },
+  "en-GB": { actionBar: "Action bar", applying: "Applying...", cancel: "Cancel", close: "Close", retry: "Retry", save: "Save", selected: "selected", somethingWentWrong: "Something went wrong", success: "Success!", undo: "Undo", unsavedChanges: "Unsaved changes | unsaved change | unsaved changes" },
+  "en-US": { actionBar: "Action bar", applying: "Applying...", cancel: "Cancel", close: "Close", retry: "Retry", save: "Save", selected: "selected", somethingWentWrong: "Something went wrong", success: "Success!", undo: "Undo", unsavedChanges: "Unsaved changes | unsaved change | unsaved changes" },
+  "es-ES": { actionBar: "Barra de acción", applying: "Aplicando...", cancel: "Cancelar", close: "Cerrar", retry: "Reintentar", save: "Guardar", selected: "seleccionado", somethingWentWrong: "Algo salió mal", success: "¡Éxito!", undo: "Deshacer", unsavedChanges: "Cambios no guardados | cambio no guardado | cambios no guardados" },
+  "es-MX": { actionBar: "Barra de acción", applying: "Aplicando...", cancel: "Cancelar", close: "Cerrar", retry: "Reintentar", save: "Guardar", selected: "seleccionado", somethingWentWrong: "Algo salió mal", success: "¡Éxito!", undo: "Deshacer", unsavedChanges: "Cambios no guardados | cambio no guardado | cambios no guardados" },
+  "fr-FR": { actionBar: "Barre d'action", applying: "Application…", cancel: "Annuler", close: "Fermer", retry: "Réessayer", save: "Enregistrer", selected: "sélectionné(s)", somethingWentWrong: "Une erreur s'est produite", success: "Succès !", undo: "Annuler", unsavedChanges: "Modifications non enregistrées | modification non enregistrée | modifications non enregistrées" },
+  "it-IT": { actionBar: "Barra delle azioni", applying: "Applicazione in corso..", cancel: "Annulla", close: "Chiudi", retry: "Riprova", save: "Salva", selected: "selezionati", somethingWentWrong: "Qualcosa è andato storto", success: "Successo!", undo: "Annulla", unsavedChanges: "Modifiche non salvate | modifica non salvata | modifiche non salvate" },
+  "ja-JP": { actionBar: "アクションバー", applying: "適用中...", cancel: "キャンセル", close: "閉じる", retry: "再試行", save: "保存", selected: "選択済み", somethingWentWrong: "問題が発生しました", success: "成功！", undo: "元に戻す", unsavedChanges: "保存されていない変更 | 保存されていない変更 | 保存されていない変更" },
+  "pt-BR": { actionBar: "Barra de ação", applying: "Aplicando...", cancel: "Cancelar", close: "Fechar", retry: "Tentar de novo", save: "Salvar", selected: "selecionado", somethingWentWrong: "Algo deu errado", success: "Sucesso!", undo: "Desfazer", unsavedChanges: "Alterações não salvas | alteração não salva | alterações não salvas" },
+  "zh-CN": { actionBar: "操作栏", applying: "申请...", cancel: "取消", close: "关闭", retry: "重试", save: "保存", selected: "已选", somethingWentWrong: "出了点问题", success: "成功！", undo: "撤销", unsavedChanges: "未保存的更改 | 未保存的更改 | 未保存的更改" }
+}, ye = ["aria-label"], pe = {
+  key: 0,
+  class: "b-action-bar__container-inner"
+}, be = {
+  key: 0,
+  class: "b-action-bar__close-button"
+}, Ce = {
+  key: 1,
+  class: "b-action-bar__container-inner"
+}, Ae = { class: "b-action-bar__state-icon" }, Be = {
+  key: 0,
+  class: "b-action-bar__state-actions"
+}, Se = {
+  i18n: { messages: P }
+}, _e = /* @__PURE__ */ ne({
+  ...Se,
+  __name: "action-bar",
+  props: {
+    /**
+     * List of actions that will be used to render the buttons.
+     * Required and used for the `default` variant.
+     *
+     * Each object in the list should have a `title`, an `event` and,
+     * optionally, an `icon`.
+     *
+     * The component will display 4 actions and the hide the rest inside a menu.
+     *
+     * @see BentoButton for a list of all the other props supported by each button action.
+     */
+    actions: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * How many actions should be visible outside the menu, cannot be more than 4
+     */
+    visibleActions: {
+      type: Number,
+      default: 4,
+      validator: (a) => a > 0 && a <= 4
+    },
+    /**
+     * Use when there are sticky elements at the bottom, like sticky pagination
+     */
+    extraBottomSpacing: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show how many items are selected.
+     * When omitted in the `confirmation` variant, a generic "Unsaved changes" label is displayed.
+     */
+    itemCounter: {
+      type: Number,
+      default: null
+    },
+    /**
+     * Label for the selection, e.g. 'selected'/'changed'
+     */
+    selectionLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * State of the action bar.
+     * @values start, loading, success, fail
+     */
+    state: {
+      type: String,
+      default: "start"
+    },
+    /**
+     * Displays the undo action button in `success` state.
+     */
+    showUndoAction: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Displays the retry action button in `fail` state.
+     */
+    showRetryAction: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Variant for the action bar
+     * @values default, confirmation
+     */
+    variant: {
+      type: String,
+      default: "default"
+    }
+  },
+  emits: ["close", "cancel", "save", "undo-action", "retry-action", "cancel-action"],
+  setup(a, { emit: V }) {
+    const n = a, h = V, { t: i, tc: w, n: $ } = ve({ messages: P }), z = c(() => n.selectionLabel ? n.selectionLabel : i("selected")), G = c(() => {
+      switch (n.state) {
+        case "loading":
+          return i("applying");
+        case "success":
+          return i("success");
+        case "fail":
+          return i("somethingWentWrong");
+        default:
+          return "";
+      }
+    }), A = f(null), p = f(null), _ = f(null), W = f(!1), L = c(
+      () => n.state === "loading" ? "out-in" : void 0
+    ), M = c(
+      () => n.state === "loading" || n.state === "success" && !n.showUndoAction
+    ), D = (t) => {
+      n.state === "loading" && (p.value = `${t.offsetWidth}px`, _.value = "100%");
+    }, j = (t) => {
+      if (n.state !== "loading")
+        return;
+      Object.assign(t.style, { width: "auto", maxWidth: "none" });
+      const o = t.offsetWidth;
+      Object.assign(t.style, { width: "100%", maxWidth: p.value }), requestAnimationFrame(() => {
+        p.value = `${o}px`;
+      });
+    }, K = () => {
+      p.value = null, _.value = null, n.state === "fail" && (W.value = !0);
+    }, J = (t) => {
+      t.animationName.startsWith("shake-") && (W.value = !1);
+    }, { extraBottomSpacing: Z, visibleActions: q } = te(n), { width: B } = me(), r = f(null), k = f(null), b = c(() => n.variant === "confirmation");
+    R(
+      () => q.value,
+      (t) => {
+        k.value = t <= 4 ? t : 4, r.value = k.value;
+      },
+      { immediate: !0 }
+    );
+    const Q = c(() => ({
+      "b-action-bar--extra-spacing": Z.value,
+      "b-action-bar--confirmation": b.value,
+      "b-action-bar__state-animation--shake": W.value
+    })), X = c(() => ({
+      [`b-action-bar__container--${n.state}`]: n.state !== "start"
+    }));
+    se(ge, 7);
+    const Y = c(() => {
+      const t = n.actions.map((ae) => ({
+        ...ae,
+        variant: "secondary"
+      })), o = t.slice(0, r.value).reverse(), v = t.slice(r.value);
+      return [...o, ...v];
+    }), H = c(() => [
+      {
+        title: i("save"),
+        event: () => h("save")
+      },
+      {
+        title: i("cancel"),
+        variant: "secondary",
+        event: () => h("cancel")
+      }
+    ]), ee = c(() => n.itemCounter == null || n.itemCounter < 1), I = async () => {
+      await E(), B.value > A.value.clientWidth + 32 + 100 && r.value < k.value && (r.value += 1, I());
+    }, N = async () => {
+      await E(), B.value < A.value.clientWidth + 32 && r.value > 0 && (r.value -= 1, N());
+    };
+    return R(
+      () => B.value,
+      async (t, o) => {
+        if (await E(), !A.value)
+          return;
+        const v = t > o;
+        B.value < 500 ? r.value = 0 : v ? I() : N();
+      },
+      { immediate: !0 }
+    ), (t, o) => (s(), l(T, {
+      name: "b-action-bar__animation",
+      appear: ""
+    }, {
+      default: u(() => [
+        x("section", {
+          class: O(["b-action-bar", Q.value]),
+          "aria-label": e(i)("actionBar"),
+          onAnimationend: J
+        }, [
+          C(T, {
+            name: `b-action-bar__state-animation--${a.state}`,
+            mode: L.value,
+            onBeforeLeave: D,
+            onEnter: j,
+            onAfterEnter: K
+          }, {
+            default: u(() => [
+              (s(), m("div", {
+                ref_key: "actionBar",
+                ref: A,
+                key: a.state,
+                class: O(["b-action-bar__container", X.value]),
+                style: oe({ width: _.value, maxWidth: p.value })
+              }, [
+                a.state === "start" ? (s(), m("div", pe, [
+                  b.value ? d("", !0) : (s(), m("div", be, [
+                    C(e(S), {
+                      variant: "tertiary",
+                      inverse: "",
+                      "aria-label": e(i)("close"),
+                      onClick: o[0] || (o[0] = (v) => h("close"))
+                    }, {
+                      iconLeft: u(() => [
+                        C(e(le), { "aria-hidden": !0 })
+                      ]),
+                      _: 1
+                    }, 8, ["aria-label"])
+                  ])),
+                  C(e(F), {
+                    el: "span",
+                    stronger: "",
+                    class: "b-action-bar__selection"
+                  }, {
+                    default: u(() => [
+                      b.value && ee.value ? (s(), m(U, { key: 0 }, [
+                        y(g(e(w)("unsavedChanges", 0)), 1)
+                      ], 64)) : (s(), m(U, { key: 1 }, [
+                        y(g(e($)(a.itemCounter)) + " " + g(b.value ? e(w)("unsavedChanges", a.itemCounter) : z.value), 1)
+                      ], 64))
+                    ]),
+                    _: 1
+                  }),
+                  b.value ? (s(), l(e(he), {
+                    key: 1,
+                    actions: H.value,
+                    class: "b-action-bar__actions",
+                    inverse: ""
+                  }, null, 8, ["actions"])) : (s(), l(re, {
+                    key: 2,
+                    actions: Y.value,
+                    class: "b-action-bar__actions",
+                    "displayed-actions": r.value,
+                    "menu-position": "top-end",
+                    "disable-responsive-behavior": "",
+                    inverse: ""
+                  }, null, 8, ["actions", "displayed-actions"]))
+                ])) : (s(), m("div", Ce, [
+                  x("div", Ae, [
+                    a.state === "loading" ? (s(), l(e(ce), {
+                      key: 0,
+                      small: "",
+                      inverse: ""
+                    })) : d("", !0),
+                    a.state === "success" ? (s(), l(e(ue), {
+                      key: 1,
+                      "aria-hidden": !0
+                    })) : d("", !0),
+                    a.state === "fail" ? (s(), l(e(de), {
+                      key: 2,
+                      "aria-hidden": !0
+                    })) : d("", !0)
+                  ]),
+                  C(e(F), { stronger: "" }, {
+                    default: u(() => [
+                      ie(t.$slots, "stateLabel", {}, () => [
+                        y(g(G.value), 1)
+                      ], !0)
+                    ]),
+                    _: 3
+                  }),
+                  M.value ? d("", !0) : (s(), m("div", Be, [
+                    a.state === "success" && a.showUndoAction ? (s(), l(e(S), {
+                      key: 0,
+                      variant: "tertiary",
+                      inverse: "",
+                      onClick: o[1] || (o[1] = (v) => h("undo-action"))
+                    }, {
+                      default: u(() => [
+                        y(g(e(i)("undo")), 1)
+                      ]),
+                      _: 1
+                    })) : d("", !0),
+                    a.state === "fail" && a.showRetryAction ? (s(), l(e(S), {
+                      key: 1,
+                      variant: "tertiary",
+                      inverse: "",
+                      onClick: o[2] || (o[2] = (v) => h("retry-action"))
+                    }, {
+                      default: u(() => [
+                        y(g(e(i)("retry")), 1)
+                      ]),
+                      _: 1
+                    })) : d("", !0),
+                    a.state === "fail" ? (s(), l(e(S), {
+                      key: 2,
+                      variant: "tertiary",
+                      inverse: "",
+                      onClick: o[3] || (o[3] = (v) => h("cancel-action"))
+                    }, {
+                      default: u(() => [
+                        y(g(e(i)("cancel")), 1)
+                      ]),
+                      _: 1
+                    })) : d("", !0)
+                  ]))
+                ]))
+              ], 6))
+            ]),
+            _: 3
+          }, 8, ["name", "mode"])
+        ], 42, ye)
+      ]),
+      _: 3
+    }));
+  }
+}), Ge = /* @__PURE__ */ fe(_e, [["__scopeId", "data-v-6ed0fae4"]]);
+export {
+  Ge as B
+};
+//# sourceMappingURL=action-bar.Pe_hvtja.js.map

package/dist/chunks/{action-bar.DLMaIUWW.js.map → action-bar.Pe_hvtja.js.map}

@@ -1 +1 @@
-{"version":3,"file":"action-bar.DLMaIUWW.js","sources":["../../../vue2/src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n                        <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n                            <template v-else>\n                                {{ n(itemCounter) }}\n                                {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                            </template>\n                        </bento-typography>\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `confirmation` variant.\n         */\n        (e: 'cancel'): void;\n        /**\n         * Event emitted when the user clicks the save button in `confirmation` variant.\n         */\n        (e: 'save'): void;\n        /**\n         * Event emitted when the user clicks the undo button in `success` state.\n         */\n        (e: 'undo-action'): void;\n        /**\n         * Event emitted when the user clicks the retry button in `fail` state.\n         */\n        (e: 'retry-action'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `fail` state.\n         */\n        (e: 'cancel-action'): void;\n    }>();\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","tc","n","useI18n","label","computed","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}
+{"version":3,"file":"action-bar.Pe_hvtja.js","sources":["../../../vue2/src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section\n            class=\"b-action-bar\"\n            :class=\"conditionalClasses\"\n            :aria-label=\"t('actionBar')\"\n            @animationend=\"onAnimationEnd\"\n        >\n            <Transition\n                :name=\"`b-action-bar__state-animation--${state}`\"\n                :mode=\"stateTransitionMode\"\n                @before-leave=\"onBeforeLeave\"\n                @enter=\"onEnter\"\n                @after-enter=\"onAfterEnter\"\n            >\n                <div\n                    ref=\"actionBar\"\n                    :key=\"state\"\n                    class=\"b-action-bar__container\"\n                    :class=\"containerClasses\"\n                    :style=\"{ width: containerWidth, maxWidth: containerMaxWidth }\"\n                >\n                    <div v-if=\"state === 'start'\" class=\"b-action-bar__container-inner\">\n                        <div v-if=\"!isConfirmationVariant\" class=\"b-action-bar__close-button\">\n                            <bento-button variant=\"tertiary\" inverse :aria-label=\"t('close')\" @click=\"emit('close')\">\n                                <template #iconLeft><cross-icon :aria-hidden=\"true\" /></template>\n                            </bento-button>\n                        </div>\n                        <bento-typography el=\"span\" stronger class=\"b-action-bar__selection\">\n                            <template v-if=\"isConfirmationVariant && noItemCounter\">\n                                {{ tc('unsavedChanges', 0) }}\n                            </template>\n                            <template v-else>\n                                {{ n(itemCounter) }}\n                                {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\n                            </template>\n                        </bento-typography>\n                        <bento-button-actions\n                            v-if=\"isConfirmationVariant\"\n                            :actions=\"confirmationActions\"\n                            class=\"b-action-bar__actions\"\n                            inverse\n                        />\n                        <button-actions-with-menu\n                            v-else\n                            :actions=\"actionsInternal\"\n                            class=\"b-action-bar__actions\"\n                            :displayed-actions=\"internalDisplayedActions\"\n                            menu-position=\"top-end\"\n                            disable-responsive-behavior\n                            inverse\n                        />\n                    </div>\n                    <div v-else class=\"b-action-bar__container-inner\">\n                        <div class=\"b-action-bar__state-icon\">\n                            <bento-loading-indicator v-if=\"state === 'loading'\" small inverse />\n                            <checkmark-circle-fill v-if=\"state === 'success'\" :aria-hidden=\"true\" />\n                            <cross-circle-fill v-if=\"state === 'fail'\" :aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography stronger>\n                            <slot name=\"stateLabel\">{{ defaultStateLabel }}</slot>\n                        </bento-typography>\n                        <div v-if=\"!hideStateActions\" class=\"b-action-bar__state-actions\">\n                            <bento-button\n                                v-if=\"state === 'success' && showUndoAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('undo-action')\"\n                                >{{ t('undo') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail' && showRetryAction\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('retry-action')\"\n                                >{{ t('retry') }}</bento-button\n                            >\n                            <bento-button\n                                v-if=\"state === 'fail'\"\n                                variant=\"tertiary\"\n                                inverse\n                                @click=\"emit('cancel-action')\"\n                                >{{ t('cancel') }}</bento-button\n                            >\n                        </div>\n                    </div>\n                </div>\n            </Transition>\n        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n\n    import { type BentoActionBarState, type BentoActionBarVariant } from '@/components/action-bar/action-bar.types';\n    import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n    import CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useWindowSize } from '@vueuse/core';\n\n    import messages from './messages.json';\n    import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    // Constants\n    const AVERAGE_BUTTON_SIZE = 100;\n    const MENU_OFFSET = 7;\n    const RESPONSIVE_BREAKPOINT = 500;\n    const SPACING = 32;\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * Required and used for the `default` variant.\n         *\n         * Each object in the list should have a `title`, an `event` and,\n         * optionally, an `icon`.\n         *\n         * The component will display 4 actions and the hide the rest inside a menu.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: () => [],\n        },\n        /**\n         * How many actions should be visible outside the menu, cannot be more than 4\n         */\n        visibleActions: {\n            type: Number,\n            default: 4,\n            validator: (value: number) => value > 0 && value <= 4,\n        },\n        /**\n         * Use when there are sticky elements at the bottom, like sticky pagination\n         */\n        extraBottomSpacing: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Show how many items are selected.\n         * When omitted in the `confirmation` variant, a generic \"Unsaved changes\" label is displayed.\n         */\n        itemCounter: {\n            type: Number,\n            default: null,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\n        },\n        /**\n         * State of the action bar.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoActionBarState>,\n            default: 'start',\n        },\n        /**\n         * Displays the undo action button in `success` state.\n         */\n        showUndoAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Displays the retry action button in `fail` state.\n         */\n        showRetryAction: {\n            type: Boolean,\n            default: false,\n        },\n        /**\n         * Variant for the action bar\n         * @values default, confirmation\n         */\n        variant: {\n            type: String as PropType<BentoActionBarVariant>,\n            default: 'default',\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Event emitted when the user click the close button\n         */\n        (e: 'close'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `confirmation` variant.\n         */\n        (e: 'cancel'): void;\n        /**\n         * Event emitted when the user clicks the save button in `confirmation` variant.\n         */\n        (e: 'save'): void;\n        /**\n         * Event emitted when the user clicks the undo button in `success` state.\n         */\n        (e: 'undo-action'): void;\n        /**\n         * Event emitted when the user clicks the retry button in `fail` state.\n         */\n        (e: 'retry-action'): void;\n        /**\n         * Event emitted when the user clicks the cancel button in `fail` state.\n         */\n        (e: 'cancel-action'): void;\n    }>();\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    const defaultStateLabel = computed(() => {\n        switch (props.state) {\n            case 'loading':\n                return t('applying');\n            case 'success':\n                return t('success');\n            case 'fail':\n                return t('somethingWentWrong');\n            default:\n                return '';\n        }\n    });\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\n    const containerMaxWidth = ref<string | null>(null);\n    const containerWidth = ref<string | null>(null);\n    const isShaking = ref(false);\n\n    const stateTransitionMode = computed(\n        () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode']\n    );\n\n    const hideStateActions = computed(\n        () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction)\n    );\n\n    const onBeforeLeave = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        containerMaxWidth.value = `${el.offsetWidth}px`;\n        containerWidth.value = '100%';\n    };\n\n    const onEnter = (el: HTMLElement) => {\n        if (props.state !== 'loading') {\n            return;\n        }\n\n        // Reset styles to get natural width\n        Object.assign(el.style, { width: 'auto', maxWidth: 'none' });\n        const newWidth = el.offsetWidth;\n\n        // Reset it back to the original values\n        Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value });\n\n        requestAnimationFrame(() => {\n            containerMaxWidth.value = `${newWidth}px`;\n        });\n    };\n\n    const onAfterEnter = () => {\n        containerMaxWidth.value = null;\n        containerWidth.value = null;\n\n        if (props.state === 'fail') {\n            isShaking.value = true;\n        }\n    };\n\n    const onAnimationEnd = (event: AnimationEvent) => {\n        if (event.animationName.startsWith('shake-')) {\n            isShaking.value = false;\n        }\n    };\n\n    const { extraBottomSpacing, visibleActions } = toRefs(props);\n    const { width } = useWindowSize();\n    const internalDisplayedActions = ref(null);\n    const internalVisibleActions = ref(null);\n\n    const isConfirmationVariant = computed(() => props.variant === 'confirmation');\n\n    watch(\n        () => visibleActions.value,\n        value => {\n            internalVisibleActions.value = value <= 4 ? value : 4;\n            internalDisplayedActions.value = internalVisibleActions.value;\n        },\n        { immediate: true }\n    );\n\n    // Styling\n    const conditionalClasses = computed(() => ({\n        'b-action-bar--extra-spacing': extraBottomSpacing.value,\n        'b-action-bar--confirmation': isConfirmationVariant.value,\n        'b-action-bar__state-animation--shake': isShaking.value,\n    }));\n\n    const containerClasses = computed(() => ({\n        [`b-action-bar__container--${props.state}`]: props.state !== 'start',\n    }));\n\n    // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset\n    provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET);\n\n    // Manipulate actions array to display as intended\n    const actionsInternal = computed(() => {\n        // All buttons should be of type secondary in the action bar\n        const actions = props.actions.map(action => ({\n            ...action,\n            variant: 'secondary',\n        })) as BentoButtonActionsList;\n        // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default\n        const shownActions = actions.slice(0, internalDisplayedActions.value).reverse();\n        const hiddenActions = actions.slice(internalDisplayedActions.value);\n\n        return [...shownActions, ...hiddenActions];\n    });\n\n    const confirmationActions = computed<BentoButtonActionsList>(() => [\n        {\n            title: t('save'),\n            event: () => emit('save'),\n        },\n        {\n            title: t('cancel'),\n            variant: 'secondary',\n            event: () => emit('cancel'),\n        },\n    ]);\n\n    const noItemCounter = computed(() => {\n        return props.itemCounter == null || props.itemCounter < 1;\n    });\n\n    // Recursive functions to determine how many actions should be visible/hidden based on the screens width\n    const showActions = async () => {\n        await nextTick();\n        if (\n            width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE &&\n            internalDisplayedActions.value < internalVisibleActions.value\n        ) {\n            internalDisplayedActions.value += 1;\n            showActions();\n        }\n    };\n\n    const hideActions = async () => {\n        await nextTick();\n        if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) {\n            internalDisplayedActions.value -= 1;\n            hideActions();\n        }\n    };\n\n    // Screen width watcher to toggle hidden/visible actions\n    watch(\n        () => width.value,\n        async (newValue, oldValue) => {\n            await nextTick();\n            if (!actionBar.value) {\n                return;\n            }\n            const isIncreasing = newValue > oldValue;\n            if (width.value < RESPONSIVE_BREAKPOINT) {\n                internalDisplayedActions.value = 0;\n            } else if (isIncreasing) {\n                showActions();\n            } else {\n                hideActions();\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items.\n     *\n     * @example\n     * import { BentoActionBar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoActionBar },\n     *     template: `\n     *          <bento-action-bar\n     *               :actions='[\n     *                   {\n     *                       title: 'Delete',\n     *                       critical: true,\n     *                       icon: BinIcon,\n     *                       event: () => true,\n     *                   },\n     *                   {\n     *                       title: 'Edit',\n     *                       icon: EditIcon,\n     *                       event: () => true,\n     *                   }\n     *               ]'\n     *               @close=\"closeAction\"\n     *               :item-counter=\"5\"\n     *           />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./action-bar.scss\" />\n"],"names":["__default__","messages","props","__props","emit","__emit","t","tc","n","useI18n","label","computed","defaultStateLabel","actionBar","ref","containerMaxWidth","containerWidth","isShaking","stateTransitionMode","hideStateActions","onBeforeLeave","el","onEnter","newWidth","onAfterEnter","onAnimationEnd","event","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","containerClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","noItemCounter","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":"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"}

package/dist/chunks/ai-tag.BSlc78DU.js

@@ -0,0 +1,137 @@
+import { defineComponent as k, ref as c, watch as b, computed as T, openBlock as p, createElementBlock as V, withKeys as w, createVNode as o, unref as e, withCtx as t, createTextVNode as r, toDisplayString as s, createBlock as v, createElementVNode as C, createCommentVNode as I } from "vue";
+import { u as N, c as D, h as K } from "./button-actions.Bh_PZ_fV.js";
+import { B as g } from "./typography.B3J6_tYk.js";
+import { u as R } from "./index.B875RXHM.js";
+import { g as L } from "./generate-uid.DBWe4g6T.js";
+import { A } from "./artificial-intelligence-ai-filled.AhDHffzT.js";
+import { _ as P } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/ai-tag.css";
+const x = {
+  "de-DE": { ai: "KI", aiExplained: "KI erklärt" },
+  "en-GB": { ai: "AI", aiExplained: "AI explained" },
+  "en-US": { ai: "AI", aiExplained: "AI explained" },
+  "es-ES": { ai: "IA", aiExplained: "IA explicada" },
+  "es-MX": { ai: "AI", aiExplained: "IA explicada" },
+  "fr-FR": { ai: "IA", aiExplained: "L'IA expliquée" },
+  "it-IT": { ai: "AI", aiExplained: "L'AI spiegata" },
+  "ja-JP": { ai: "AI", aiExplained: "AIについての説明" },
+  "pt-BR": { ai: "IA", aiExplained: "IA explicada" },
+  "zh-CN": { ai: "人工智能", aiExplained: "AI 解释" }
+}, S = { class: "b-ai-tag__popover-content" }, U = {
+  i18n: { messages: x }
+}, O = /* @__PURE__ */ k({
+  ...U,
+  __name: "ai-tag",
+  props: {
+    title: {},
+    description: {},
+    influencedValue: { default: void 0 },
+    toggled: { type: Boolean, default: !1 },
+    action: { default: void 0 }
+  },
+  emits: ["update:toggled"],
+  setup(E, { emit: y }) {
+    const n = E, { t: u } = R({ messages: x }), i = c(n.toggled), f = c(null), d = c(null), m = L("b-ai-tag-popover");
+    b(
+      () => n.toggled,
+      (a) => {
+        i.value = a;
+      }
+    ), N(f, () => {
+      l();
+    });
+    const h = T(
+      () => n.action ? [
+        {
+          ...n.action,
+          variant: "secondary"
+        }
+      ] : void 0
+    ), B = y, _ = (a) => {
+      i.value = a, B("update:toggled", a);
+    }, l = () => {
+      i.value && _(!1);
+    };
+    return (a, j) => (p(), V("div", {
+      ref_key: "aiTagRef",
+      ref: f,
+      class: "b-ai-tag",
+      onKeydown: w(l, ["esc"])
+    }, [
+      o(e(D), {
+        ref_key: "targetElement",
+        ref: d,
+        toggled: i.value,
+        "aria-controls": e(m),
+        variant: "secondary",
+        condensed: "",
+        class: "b-ai-tag__trigger",
+        "onUpdate:toggled": _
+      }, {
+        iconLeft: t(() => [
+          o(e(A), {
+            class: "b-ai-tag__trigger-icon",
+            "aria-hidden": !0
+          })
+        ]),
+        default: t(() => [
+          r(" " + s(e(u)("ai")), 1)
+        ]),
+        _: 1
+      }, 8, ["toggled", "aria-controls"]),
+      d.value ? (p(), v(e(K), {
+        key: 0,
+        id: e(m),
+        open: i.value,
+        "target-element": d.value,
+        actions: h.value,
+        "actions-layout": "fill-container",
+        title: e(u)("aiExplained"),
+        "trap-all": "",
+        "trap-all-options": { onDeactivate: l, allowOutsideClick: !0 },
+        "fixed-positioning": "",
+        "overflow-visible": "",
+        onDismiss: l
+      }, {
+        headerIcon: t(() => [
+          o(e(A), {
+            class: "b-ai-tag__popover-header-icon",
+            "aria-hidden": !0
+          })
+        ]),
+        default: t(() => [
+          C("div", S, [
+            a.influencedValue ? (p(), v(e(g), {
+              key: 0,
+              variant: "title",
+              medium: "",
+              class: "b-ai-tag__influenced-value"
+            }, {
+              default: t(() => [
+                r(s(a.influencedValue), 1)
+              ]),
+              _: 1
+            })) : I("", !0),
+            o(e(g), { variant: "title" }, {
+              default: t(() => [
+                r(s(a.title), 1)
+              ]),
+              _: 1
+            }),
+            o(e(g), null, {
+              default: t(() => [
+                r(s(a.description), 1)
+              ]),
+              _: 1
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["id", "open", "target-element", "actions", "title", "trap-all-options"])) : I("", !0)
+    ], 544));
+  }
+}), H = /* @__PURE__ */ P(O, [["__scopeId", "data-v-18003291"]]);
+export {
+  H as a
+};
+//# sourceMappingURL=ai-tag.BSlc78DU.js.map

package/dist/chunks/{ai-tag.DK63ExDc.js.map → ai-tag.BSlc78DU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ai-tag.DK63ExDc.js","sources":["../../../vue2/src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoAiTagProps>(), {\n        influencedValue: undefined,\n        toggled: false,\n        action: undefined,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Triggered when the popover is toggled\n         */\n        (e: 'update:toggled', toggled: boolean): void;\n    }>();\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","props","__props","t","useI18n","toggled","ref","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","emit","__emit","onToggle"],"mappings":";;;;;;;;;;;;+CA0IIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;AA1EA,UAAAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAAL,EAAA,OAAA,GACAM,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,CAAAW,MAAA;AAER,QAAAP,EAAA,QAAAO;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAf,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAGVgB,IAAAC,GAOAC,IAAA,CAAAP,MAAA;AACI,MAAAP,EAAA,QAAAO,GACAK,EAAA,kBAAAL,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAT,EAAA,SACIc,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ai-tag.BSlc78DU.js","sources":["../../../vue2/src/components/ai-tag/ai-tag.vue"],"sourcesContent":["<template>\n    <div ref=\"aiTagRef\" class=\"b-ai-tag\" @keydown.esc=\"closePopover\">\n        <bento-toggle-button\n            ref=\"targetElement\"\n            :toggled=\"toggled\"\n            :aria-controls=\"popoverId\"\n            variant=\"secondary\"\n            condensed\n            class=\"b-ai-tag__trigger\"\n            @update:toggled=\"onToggle\"\n        >\n            <template #iconLeft>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__trigger-icon\" :aria-hidden=\"true\" />\n            </template>\n            {{ t('ai') }}\n        </bento-toggle-button>\n\n        <bento-popover\n            v-if=\"targetElement\"\n            :id=\"popoverId\"\n            :open=\"toggled\"\n            :target-element=\"targetElement\"\n            :actions=\"popoverActions\"\n            actions-layout=\"fill-container\"\n            :title=\"t('aiExplained')\"\n            trap-all\n            :trap-all-options=\"{ onDeactivate: closePopover, allowOutsideClick: true }\"\n            fixed-positioning\n            overflow-visible\n            @dismiss=\"closePopover\"\n        >\n            <template #headerIcon>\n                <artificial-intelligence-ai-icon class=\"b-ai-tag__popover-header-icon\" :aria-hidden=\"true\" />\n            </template>\n            <div class=\"b-ai-tag__popover-content\">\n                <bento-typography v-if=\"influencedValue\" variant=\"title\" medium class=\"b-ai-tag__influenced-value\">\n                    {{ influencedValue }}\n                </bento-typography>\n\n                <bento-typography variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n\n                <bento-typography>\n                    {{ description }}\n                </bento-typography>\n            </div>\n        </bento-popover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoToggleButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { useClickOutside } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types';\n    import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import type { BentoAiTagProps } from './ai-tag.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = withDefaults(defineProps<BentoAiTagProps>(), {\n        influencedValue: undefined,\n        toggled: false,\n        action: undefined,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const toggled = ref(props.toggled);\n    const aiTagRef = ref<HTMLElement | null>(null);\n    const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null);\n    const popoverId = generateUid('b-ai-tag-popover');\n\n    watch(\n        () => props.toggled,\n        value => {\n            toggled.value = value;\n        }\n    );\n\n    useClickOutside(aiTagRef, () => {\n        closePopover();\n    });\n\n    const popoverActions = computed<BentoButtonActionsList>(() =>\n        props.action\n            ? [\n                  {\n                      ...props.action,\n                      variant: 'secondary',\n                  },\n              ]\n            : undefined\n    );\n\n    const emit = defineEmits<{\n        /**\n         * Triggered when the popover is toggled\n         */\n        (e: 'update:toggled', toggled: boolean): void;\n    }>();\n\n    const onToggle = (value: boolean) => {\n        toggled.value = value;\n        emit('update:toggled', value);\n    };\n\n    const closePopover = () => {\n        if (toggled.value) {\n            onToggle(false);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or\n     * enhanced by artificial intelligence.\n     *\n     * @example\n     * import { BentoAiTag } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiTag },\n     *     template: `\n     *          <bento-ai-tag\n     *              title=\"Input fields auto-filled by AI\"\n     *              description=\"Based on your documents uploaded, AI has auto-filled some information for you.\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-tag.scss\" />\n"],"names":["__default__","messages","props","__props","t","useI18n","toggled","ref","aiTagRef","targetElement","popoverId","generateUid","watch","value","useClickOutside","closePopover","popoverActions","computed","emit","__emit","onToggle"],"mappings":";;;;;;;;;;;;;;;;;;;+CA0IIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;AA1EA,UAAAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAJ,EAAA,CAAA,GAEAK,IAAAC,EAAAL,EAAA,OAAA,GACAM,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAC,EAAA,kBAAA;AAEA,IAAAC;AAAA,MAAA,MAAAV,EAAA;AAAA,MACgB,CAAAW,MAAA;AAER,QAAAP,EAAA,QAAAO;AAAA,MAAgB;AAAA,IACpB,GAGJC,EAAAN,GAAA,MAAA;AACI,MAAAO,EAAA;AAAA,IAAa,CAAA;AAGjB,UAAAC,IAAAC;AAAA,MAAuB,MAAAf,EAAA,SAAA;AAAA,QAEb;AAAA,UACI,GAAAA,EAAA;AAAA,UACa,SAAA;AAAA,QACA;AAAA,MACb,IAAA;AAAA,IAEJ,GAGVgB,IAAAC,GAOAC,IAAA,CAAAP,MAAA;AACI,MAAAP,EAAA,QAAAO,GACAK,EAAA,kBAAAL,CAAA;AAAA,IAA4B,GAGhCE,IAAA,MAAA;AACI,MAAAT,EAAA,SACIc,EAAA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}