@adyen/bento-vue3 1.84.2 → 1.86.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "1.84.2",
+  "version": "1.86.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue3",
-  "version": "1.84.2",
+  "version": "1.86.0",
   "description": "Adyen Bento Vue 3 components",
   "type": "module",
   "main": "dist/index.js",
@@ -46,7 +46,7 @@
     "unified": "11.0.5",
     "uuid": "11.0.5",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.84.2"
+    "@adyen/bento-design-tokens": "1.86.0"
   },
   "dependenciesMeta": {
     "@adyen/bento-vue-i18n-demi": {
@@ -67,7 +67,7 @@
   },
   "devDependencies": {
     "@adyen/lume-vue3": "1.11.3",
-    "@axe-core/playwright": "4.9.0",
+    "@axe-core/playwright": "4.11.1",
     "@codemirror/commands": "6.3.3",
     "@codemirror/lang-java": "6.0.1",
     "@codemirror/lang-javascript": "6.2.2",
@@ -108,7 +108,7 @@
     "vite": "5.4.21",
     "vite-plugin-css-injected-by-js": "2.4.0",
     "vite-plugin-dynamic-import": "1.5.0",
-    "vite-plugin-static-copy": "0.15.0",
+    "vite-plugin-static-copy": "3.2.0",
     "vitest": "2.1.9",
     "vue": "3.5.13",
     "vue-docgen-web-types": "0.1.8",
@@ -118,10 +118,9 @@
     "vue-tsc": "1.0.24",
     "zod": "3.25.35",
     "@adyen/bento-core": "0.0.1",
-    "@adyen/bento-tailwind": "0.10.1",
     "@adyen/bento-vue-i18n-demi": "0.1.0",
-    "@adyen/ui-assets-icons-16": "7.6.0",
-    "@adyen/ui-assets-payment-method-icons": "10.6.0"
+    "@adyen/ui-assets-payment-method-icons": "10.6.2",
+    "@adyen/ui-assets-icons-16": "7.7.1"
   },
   "scripts": {
     "build": "pnpm run build:prod",

package/dist/assets/field-label.css

@@ -1 +0,0 @@
-.b-error-message[data-v-024e50b0]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:flex-start;color:var(--b-color-label-critical);display:flex}.b-error-message[data-v-024e50b0],.b-error-message[data-v-024e50b0]:before,.b-error-message[data-v-024e50b0]:after{box-sizing:border-box}.b-error-message[data-v-024e50b0] *,.b-error-message[data-v-024e50b0] *:before,.b-error-message[data-v-024e50b0] *:after{box-sizing:border-box}.b-error-message[data-v-024e50b0] ::-webkit-scrollbar{height:14px;width:14px}.b-error-message[data-v-024e50b0] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-error-message__icon[data-v-024e50b0]{align-items:center;display:inline-flex;height:var(--b-text-body-line-height);margin-right:var(--b-spacer-040)}.b-field-label[data-v-6498d675]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--b-color-label-primary);display:inline-block;margin-bottom:var(--b-spacer-040)}.b-field-label[data-v-6498d675],.b-field-label[data-v-6498d675]:before,.b-field-label[data-v-6498d675]:after{box-sizing:border-box}.b-field-label[data-v-6498d675] *,.b-field-label[data-v-6498d675] *:before,.b-field-label[data-v-6498d675] *:after{box-sizing:border-box}.b-field-label[data-v-6498d675] ::-webkit-scrollbar{height:14px;width:14px}.b-field-label[data-v-6498d675] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-field-label[data-v-6498d675]>:not(:last-child){margin-right:var(--b-spacer-020)}.b-field-label__tooltip-wrapper[data-v-6498d675]:not(:last-child){margin-right:var(--b-spacer-040)}.b-field-label__tooltip[data-v-6498d675]{vertical-align:text-bottom}.b-field-label__requirement[data-v-6498d675]{color:var(--b-color-label-secondary)}.b-field-label--condensed[data-v-6498d675]{margin-bottom:var(--b-spacer-030)}[data-v-6498d675]:host{display:inline-block}

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

@@ -1,204 +0,0 @@
-import { defineComponent as F, computed as c, ref as _, toRefs as G, watch as E, provide as U, nextTick as f, createBlock as b, openBlock as d, Transition as L, withCtx as B, createElementVNode as S, unref as t, normalizeClass as W, createElementBlock as K, createCommentVNode as M, createVNode as y, createTextVNode as z, toDisplayString as h } from "vue";
-import { B as D } from "./button.CSp48LJt.js";
-import { B as J } from "./typography.6Oo5TOMP.js";
-import { B as Z } from "./button-actions-with-menu.B8xFgt-p.js";
-import { C as j } from "./cross.B92GxFTY.js";
-import { u as q } from "./index.pdBj0KQU.js";
-import { u as Y } from "./index.E60QniEu.js";
-import { P as $, B as H } from "./button-actions.Crj4QFAd.js";
-import { _ as Q } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import "../assets/action-bar.css";
-const N = {
-  "en-US": {
-    actionBar: "Action bar",
-    cancel: "Cancel",
-    close: "Close",
-    save: "Save",
-    selected: "selected",
-    unsavedChanges: "unsaved change | unsaved changes"
-  },
-  "ja-JP": {
-    actionBar: "アクションバー",
-    cancel: "キャンセル",
-    close: "閉じる",
-    save: "保存",
-    selected: "選択済み",
-    unsavedChanges: "未保存の変更 | 未保存の変更"
-  },
-  "pt-BR": {
-    actionBar: "Barra de ação",
-    cancel: "Cancelar",
-    close: "Fechar",
-    save: "Salvar",
-    selected: "Selecionado",
-    unsavedChanges: "alteração não salva | alterações não salvas"
-  }
-}, X = ["aria-label"], ee = {
-  key: 0,
-  class: "b-action-bar__close-button"
-}, ae = {
-  i18n: { messages: N }
-}, te = /* @__PURE__ */ F({
-  ...ae,
-  __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: (n) => n > 0 && n <= 4
-    },
-    /**
-     * Use when there are sticky elements at the bottom, like sticky pagination
-     */
-    extraBottomSpacing: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show how many items are selected
-     */
-    itemCounter: {
-      type: Number,
-      required: !0
-    },
-    /**
-     * Label for the selection, e.g. 'selected'/'changed'
-     */
-    selectionLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * Variant for the action bar
-     * @values default, confirmation
-     */
-    variant: {
-      type: String,
-      default: "default"
-    }
-  },
-  emits: ["close", "cancel", "save"],
-  setup(n, { emit: g }) {
-    const s = n, m = g, { t: i, tc: I, n: T } = q({ messages: N }), O = c(() => s.selectionLabel ? s.selectionLabel : i("selected")), l = _(null), { extraBottomSpacing: P, visibleActions: V } = G(s), { width: r } = Y(), e = _(null), p = _(null), u = c(() => s.variant === "confirmation");
-    E(
-      () => V.value,
-      (a) => {
-        p.value = a <= 4 ? a : 4, e.value = p.value;
-      },
-      { immediate: !0 }
-    );
-    const k = c(() => ({
-      "b-action-bar--extra-spacing": P.value,
-      "b-action-bar--confirmation": u.value
-    }));
-    U($, 7);
-    const w = c(() => {
-      const a = s.actions.map((R) => ({
-        ...R,
-        variant: "secondary"
-      })), o = a.slice(0, e.value).reverse(), v = a.slice(e.value);
-      return [...o, ...v];
-    }), x = c(() => [
-      {
-        title: i("save"),
-        event: () => m("save")
-      },
-      {
-        title: i("cancel"),
-        variant: "secondary",
-        event: () => m("cancel")
-      }
-    ]), A = async () => {
-      await f(), r.value > l.value.clientWidth + 32 + 100 && e.value < p.value && (e.value += 1, A());
-    }, C = async () => {
-      await f(), r.value < l.value.clientWidth + 32 && e.value > 0 && (e.value -= 1, C());
-    };
-    return E(
-      () => r.value,
-      async (a, o) => {
-        if (await f(), !l.value)
-          return;
-        const v = a > o;
-        r.value < 500 ? e.value = 0 : v ? A() : C();
-      },
-      { immediate: !0 }
-    ), (a, o) => (d(), b(L, {
-      name: "b-action-bar__animation",
-      appear: ""
-    }, {
-      default: B(() => [
-        S("section", {
-          class: W(["b-action-bar", k.value]),
-          "aria-label": t(i)("actionBar")
-        }, [
-          S("div", {
-            ref_key: "actionBar",
-            ref: l,
-            class: "b-action-bar__container"
-          }, [
-            u.value ? M("", !0) : (d(), K("div", ee, [
-              y(t(D), {
-                variant: "tertiary",
-                inverse: "",
-                "aria-label": t(i)("close"),
-                onClick: o[0] || (o[0] = (v) => m("close"))
-              }, {
-                iconLeft: B(() => [
-                  y(t(j), { "aria-hidden": !0 })
-                ]),
-                _: 1
-              }, 8, ["aria-label"])
-            ])),
-            y(t(J), {
-              el: "span",
-              stronger: "",
-              class: "b-action-bar__selection"
-            }, {
-              default: B(() => [
-                z(h(t(T)(n.itemCounter)) + " " + h(u.value ? t(I)("unsavedChanges", n.itemCounter) : O.value), 1)
-              ]),
-              _: 1
-            }),
-            u.value ? (d(), b(t(H), {
-              key: 1,
-              actions: x.value,
-              class: "b-action-bar__actions",
-              inverse: ""
-            }, null, 8, ["actions"])) : (d(), b(Z, {
-              key: 2,
-              actions: w.value,
-              class: "b-action-bar__actions",
-              "displayed-actions": e.value,
-              "menu-position": "top-end",
-              "disable-responsive-behavior": "",
-              inverse: ""
-            }, null, 8, ["actions", "displayed-actions"]))
-          ], 512)
-        ], 10, X)
-      ]),
-      _: 1
-    }));
-  }
-}), fe = /* @__PURE__ */ Q(te, [["__scopeId", "data-v-46e6e5aa"]]);
-export {
-  fe as B
-};
-//# sourceMappingURL=action-bar.CriH15oF.js.map

package/dist/chunks/action-bar.CriH15oF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"action-bar.CriH15oF.js","sources":["../../../vue2/src/components/action-bar/action-bar.vue"],"sourcesContent":["<template>\n    <Transition name=\"b-action-bar__animation\" appear>\n        <section class=\"b-action-bar\" :class=\"conditionalClasses\" :aria-label=\"t('actionBar')\">\n            <div ref=\"actionBar\" class=\"b-action-bar__container\">\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                    {{ n(itemCounter) }}\n                    {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }}\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        </section>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, type PropType, provide, ref, toRefs, watch } from 'vue';\n    import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n\n    import { 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\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         */\n        itemCounter: {\n            type: Number,\n            required: true,\n        },\n        /**\n         * Label for the selection, e.g. 'selected'/'changed'\n         */\n        selectionLabel: {\n            type: String,\n            default: null,\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        (e: 'cancel'): void;\n        (e: 'save'): void;\n    }>();\n\n    const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected')));\n\n    // Refs\n    const actionBar = ref<HTMLDivElement>(null);\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    }));\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    // 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","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuPIA,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAjMA,UAAAC,IAAAC,GAuDAC,IAAAC,GASA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAR,EAAA,CAAA,GACAS,IAAAC,EAAA,MAAAT,EAAA,iBAAAA,EAAA,iBAAAI,EAAA,UAAA,CAAA,GAGAM,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAd,CAAA,GACA,EAAA,OAAAe,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAV,EAAA,MAAAT,EAAA,YAAA,cAAA;AAEA,IAAAoB;AAAA,MAAA,MAAAP,EAAA;AAAA,MACyB,CAAAQ,MAAA;AAEjB,QAAAH,EAAA,QAAAG,KAAA,IAAAA,IAAA,GACAJ,EAAA,QAAAC,EAAA;AAAA,MAAwD;AAAA,MAC5D,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAI,IAAAb,EAAA,OAAA;AAAA,MAA2C,+BAAAG,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAA,CAAA;AAGA,UAAAC,IAAAhB,EAAA,MAAA;AAEI,YAAAiB,IAAA1B,EAAA,QAAA,IAAA,CAAA2B,OAAA;AAAA,QAA6C,GAAAA;AAAA,QACtC,SAAA;AAAA,MACM,EAAA,GAGbC,IAAAF,EAAA,MAAA,GAAAT,EAAA,KAAA,EAAA,QAAA,GACAY,IAAAH,EAAA,MAAAT,EAAA,KAAA;AAEA,aAAA,CAAA,GAAAW,GAAA,GAAAC,CAAA;AAAA,IAAyC,CAAA,GAG7CC,IAAArB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAL,EAAA,MAAA;AAAA,QACmB,OAAA,MAAAF,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAAE,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAAF,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJ6B,IAAA,YAAA;AACI,YAAAC,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,KAAA,OAAAO,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAc,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAjB,EAAA,QAAAL,EAAA,MAAA,cAAA,MAAAO,EAAA,QAAA,MACIA,EAAA,SAAA,GACAgB,EAAA;AAAA,IACJ;AAIJ,WAAAb;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAmB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAtB,EAAA;AACI;AAEJ,cAAA0B,IAAAF,IAAAC;AACA,QAAApB,EAAA,QAAA,MACIE,EAAA,QAAA,IAAiCmB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/ai-button.CDRPf7IY.js

@@ -1,93 +0,0 @@
-import { createElementBlock as n, openBlock as s, mergeProps as g, createCommentVNode as v, createElementVNode as o, toDisplayString as h, defineComponent as C, useSlots as B, computed as V, onMounted as $, normalizeClass as k, createVNode as c, withModifiers as w, withCtx as p, renderSlot as y, unref as H } from "vue";
-import { B as S } from "./button.CSp48LJt.js";
-/* empty css              */
-import { _ as m } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { u as A } from "./use-has-slot.B7eQSabc.js";
-import { p as I } from "./typography.6Oo5TOMP.js";
-import "../assets/ai-button.css";
-let f = 0;
-const M = {
-  beforeCreate() {
-    this.uuid = f.toString(), f += 1;
-  }
-}, N = { key: 0 }, P = ["clip-path"], D = ["id"];
-function E(t, i, a, l, d, r) {
-  return s(), n("svg", g({ role: "img" }, t.$attrs, {
-    class: "ui-assets-icons-16",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    t.$attrs["svg-title"] ? (s(), n("title", N, h(t.$attrs["svg-title"]), 1)) : v("", !0),
-    o("g", {
-      "clip-path": "url(#uia-ui-assets/icons-16-artificial_intelligence_ai_filled__a" + t.uuid + ")"
-    }, i[0] || (i[0] = [
-      o("path", {
-        fill: "#001222",
-        d: "M8.75 2.75C8.75 5.23579 10.7642 7.25 13.25 7.25H15.5V8.75H13.25C10.7642 8.75 8.75 10.7642 8.75 13.25V15.5H7.25V13.25C7.25 10.7642 5.23579 8.75 2.75 8.75H0.5V7.25H2.75C5.23579 7.25 7.25 5.23579 7.25 2.75V0.5H8.75V2.75Z"
-      }, null, -1)
-    ]), 8, P),
-    o("defs", null, [
-      o("clipPath", {
-        id: "uia-ui-assets/icons-16-artificial_intelligence_ai_filled__a" + t.uuid
-      }, i[1] || (i[1] = [
-        o("rect", {
-          width: "16",
-          height: "16",
-          fill: "#fff"
-        }, null, -1)
-      ]), 8, D)
-    ])
-  ], 16);
-}
-const z = /* @__PURE__ */ m(M, [["render", E]]), F = {
-  name: "bento-ai-button"
-}, L = /* @__PURE__ */ C({
-  ...F,
-  props: {
-    condensed: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    inverse: { type: Boolean, default: !1 },
-    link: { default: void 0 },
-    type: { default: "button" }
-  },
-  emits: ["click"],
-  setup(t, { emit: i }) {
-    const a = t, l = i, d = B(), r = A(d), _ = V(() => ({
-      "b-ai-button--disabled": a.disabled
-    })), b = (e) => {
-      e.stopPropagation(), l("click", e);
-    };
-    return $(() => {
-      r("default") || I("An icon-only button cannot be a AI button");
-    }), (e, u) => (s(), n("div", {
-      class: k(["b-ai-button", _.value])
-    }, [
-      u[0] || (u[0] = o("div", { class: "b-ai-button__animation" }, null, -1)),
-      c(S, {
-        class: "b-ai-button__button",
-        condensed: e.condensed,
-        disabled: e.disabled,
-        inverse: e.inverse,
-        variant: "secondary",
-        onClickCapture: w(b, ["stop"])
-      }, {
-        iconLeft: p(() => [
-          c(H(z), {
-            "aria-hidden": "true",
-            class: "b-ai-button__icon"
-          })
-        ]),
-        default: p(() => [
-          y(e.$slots, "default", {}, void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["condensed", "disabled", "inverse"])
-    ], 2));
-  }
-}), K = /* @__PURE__ */ m(L, [["__scopeId", "data-v-659c4c06"]]);
-export {
-  K as a
-};
-//# sourceMappingURL=ai-button.CDRPf7IY.js.map

package/dist/chunks/ai-button.CDRPf7IY.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ai-button.CDRPf7IY.js","sources":["../../../ui-assets/icons-16/dist/vue/artificial-intelligence-ai-filled.vue","../../../vue2/src/components/button/components/ai-button/ai-button.vue"],"sourcesContent":["\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-artificial_intelligence_ai_filled__a' + uuid + ')'\"><path fill=\"#001222\" d=\"M8.75 2.75C8.75 5.23579 10.7642 7.25 13.25 7.25H15.5V8.75H13.25C10.7642 8.75 8.75 10.7642 8.75 13.25V15.5H7.25V13.25C7.25 10.7642 5.23579 8.75 2.75 8.75H0.5V7.25H2.75C5.23579 7.25 7.25 5.23579 7.25 2.75V0.5H8.75V2.75Z\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-artificial_intelligence_ai_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-ai-button\" :class=\"conditionalClass\">\n        <div class=\"b-ai-button__animation\" />\n\n        <bento-button\n            class=\"b-ai-button__button\"\n            :condensed=\"condensed\"\n            :disabled=\"disabled\"\n            :inverse=\"inverse\"\n            variant=\"secondary\"\n            @click.capture.stop=\"onClick\"\n        >\n            <template #iconLeft>\n                <ai-filled-icon aria-hidden=\"true\" class=\"b-ai-button__icon\" />\n            </template>\n\n            <slot></slot>\n        </bento-button>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import BentoButton from '../../button.vue';\n    import AiFilledIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAiButtonProps } from './ai-button.types';\n\n    const props = withDefaults(defineProps<BentoAiButtonProps>(), {\n        link: undefined,\n        type: 'button',\n        condensed: false,\n        disabled: false,\n        inverse: false,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClass = computed(() => ({\n        'b-ai-button--disabled': props.disabled,\n    }));\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        emit('click', e);\n    };\n\n    onMounted(() => {\n        if (!hasSlot('default')) {\n            printDevelopmentWarning('An icon-only button cannot be a AI button');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * AI Button component is used for cases where pressing a button starts an AI-related action.\n     *\n     * @example\n     * import { BentoAiButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAiButton },\n     *     template: `\n     *        <bento-ai-button @click=\"onClick\">Generate with AI</bento-ai-button>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-ai-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./ai-button.scss\" />\n"],"names":["uuid","_hoisted_2","_hoisted_3","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","props","__props","emit","__emit","slots","useSlots","hasSlot","useHasSlot","conditionalClass","computed","onClick","onMounted","printDevelopmentWarning"],"mappings":";;;;;;;AAOI,IAAAA,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,qEAAAD,EAAA,OAAA;AAAA;;QAAkG,MAAA;AAAA,QAAe,GAAA;AAAA;IAF7T,IAAA,GAAAL,CAAA;AAAA;;QAEijB,IAAA,gEAAAK,EAAA;AAAA;;UAAgF,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAFxpB,IAAA,GAAAJ,CAAA;AAAA;;;iDC+EIM,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;AApDA,UAAAC,IAAAC,GAQAC,IAAAC,GAOAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OAAA;AAAA,MAAyC,yBAAAT,EAAA;AAAA,IACN,EAAA,GAGnCU,IAAA,CAAA,MAAA;AAEI,QAAA,gBAAA,GAEAR,EAAA,SAAA,CAAA;AAAA,IAAe;AAGnB,WAAAS,EAAA,MAAA;AACI,MAAAL,EAAA,SAAA,KACIM,EAAA,2CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}