@adyen/bento-vue2 1.84.2 → 1.86.0

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

@@ -1,162 +0,0 @@
-import { defineComponent as O, computed as c, ref as b, toRefs as P, watch as g, provide as V, nextTick as B } from "vue";
-import { B as R } from "./button.DIU6m9wD.js";
-import { B as F } from "./typography.Bq-EGj9y.js";
-import { B as W } from "./button-actions-with-menu.B5mKwc-F.js";
-import { C as L } from "./cross.CC_B-vG-.js";
-import { u as k } from "./index.B6WW_F-J.js";
-import { u as M } from "./index.BDK4hwK_.js";
-import { P as U, B as z } from "./button-actions.D9n7MxWe.js";
-import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/action-bar.css";
-const G = {
-  "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"
-  }
-}, J = {
-  i18n: { messages: G }
-}, K = /* @__PURE__ */ O({
-  ...J,
-  __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: (o) => o > 0 && o <= 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(o, { emit: e }) {
-    const a = o, t = 100, v = 7, C = 500, d = 32, { t: r, tc: S, n: E } = k(), I = c(() => a.selectionLabel ? a.selectionLabel : r("selected")), l = b(null), { extraBottomSpacing: y, visibleActions: h } = P(a), { width: i } = M(), n = b(null), u = b(null), A = c(() => a.variant === "confirmation");
-    g(
-      () => h.value,
-      (s) => {
-        u.value = s <= 4 ? s : 4, n.value = u.value;
-      },
-      { immediate: !0 }
-    );
-    const T = c(() => ({
-      "b-action-bar--extra-spacing": y.value,
-      "b-action-bar--confirmation": A.value
-    }));
-    V(U, v);
-    const N = c(() => {
-      const s = a.actions.map((x) => ({
-        ...x,
-        variant: "secondary"
-      })), _ = s.slice(0, n.value).reverse(), f = s.slice(n.value);
-      return [..._, ...f];
-    }), w = c(() => [
-      {
-        title: r("save"),
-        event: () => e("save")
-      },
-      {
-        title: r("cancel"),
-        variant: "secondary",
-        event: () => e("cancel")
-      }
-    ]), m = async () => {
-      await B(), i.value > l.value.clientWidth + d + t && n.value < u.value && (n.value += 1, m());
-    }, p = async () => {
-      await B(), i.value < l.value.clientWidth + d && n.value > 0 && (n.value -= 1, p());
-    };
-    return g(
-      () => i.value,
-      async (s, _) => {
-        if (await B(), !l.value)
-          return;
-        const f = s > _;
-        i.value < C ? n.value = 0 : f ? m() : p();
-      },
-      { immediate: !0 }
-    ), { __sfc: !0, AVERAGE_BUTTON_SIZE: t, MENU_OFFSET: v, RESPONSIVE_BREAKPOINT: C, SPACING: d, props: a, emit: e, t: r, tc: S, n: E, label: I, actionBar: l, extraBottomSpacing: y, visibleActions: h, width: i, internalDisplayedActions: n, internalVisibleActions: u, isConfirmationVariant: A, conditionalClasses: T, actionsInternal: N, confirmationActions: w, showActions: m, hideActions: p, BentoButton: R, BentoButtonActions: z, BentoTypography: F, ButtonActionsWithMenu: W, CrossIcon: L };
-  }
-});
-var j = function() {
-  var e = this, a = e._self._c, t = e._self._setupProxy;
-  return a("Transition", { attrs: { name: "b-action-bar__animation", appear: "" } }, [a("section", { staticClass: "b-action-bar", class: t.conditionalClasses, attrs: { "aria-label": t.t("actionBar") } }, [a("div", { ref: "actionBar", staticClass: "b-action-bar__container" }, [t.isConfirmationVariant ? e._e() : a("div", { staticClass: "b-action-bar__close-button" }, [a(t.BentoButton, { attrs: { variant: "tertiary", inverse: "", "aria-label": t.t("close") }, on: { click: function(v) {
-    return t.emit("close");
-  } }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
-    return [a(t.CrossIcon, { attrs: { "aria-hidden": !0 } })];
-  }, proxy: !0 }], null, !1, 4214210411) })], 1), a(t.BentoTypography, { staticClass: "b-action-bar__selection", attrs: { el: "span", stronger: "" } }, [e._v(" " + e._s(t.n(e.itemCounter)) + " " + e._s(t.isConfirmationVariant ? t.tc("unsavedChanges", e.itemCounter) : t.label) + " ")]), t.isConfirmationVariant ? a(t.BentoButtonActions, { staticClass: "b-action-bar__actions", attrs: { actions: t.confirmationActions, inverse: "" } }) : a(t.ButtonActionsWithMenu, { staticClass: "b-action-bar__actions", attrs: { actions: t.actionsInternal, "displayed-actions": t.internalDisplayedActions, "menu-position": "top-end", "disable-responsive-behavior": "", inverse: "" } })], 1)])]);
-}, q = [], Y = /* @__PURE__ */ D(
-  K,
-  j,
-  q,
-  !1,
-  null,
-  "08a7f661"
-);
-const st = Y.exports;
-export {
-  st as B
-};
-//# sourceMappingURL=action-bar.y4tcdk7R.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"action-bar.y4tcdk7R.js","sources":["../../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([\"close\", \"cancel\", \"save\"]);\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","AVERAGE_BUTTON_SIZE","MENU_OFFSET","RESPONSIVE_BREAKPOINT","SPACING","t","tc","n","useI18n","label","computed","props","actionBar","ref","extraBottomSpacing","visibleActions","toRefs","width","useWindowSize","internalDisplayedActions","internalVisibleActions","isConfirmationVariant","watch","value","conditionalClasses","provide","POPOVER_OFFSET_INJECTION_KEY","actionsInternal","actions","action","shownActions","hiddenActions","confirmationActions","emit","showActions","nextTick","hideActions","newValue","oldValue","isIncreasing"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgPIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/LAC,IAAA,KACAC,IAAA,GACAC,IAAA,KACAC,IAAA,IA2DA,EAAA,GAAAC,GAAA,IAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,MAAAC,EAAA,iBAAAA,EAAA,iBAAAN,EAAA,UAAA,CAAA,GAGAO,IAAAC,EAAA,IAAA,GACA,EAAA,oBAAAC,GAAA,gBAAAC,EAAA,IAAAC,EAAAL,CAAA,GACA,EAAA,OAAAM,EAAA,IAAAC,EAAA,GACAC,IAAAN,EAAA,IAAA,GACAO,IAAAP,EAAA,IAAA,GAEAQ,IAAAX,EAAA,MAAAC,EAAA,YAAA,cAAA;AAEA,IAAAW;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,IAAAd,EAAA,OAAA;AAAA,MAA2C,+BAAAI,EAAA;AAAA,MACW,8BAAAO,EAAA;AAAA,IACE,EAAA;AAIxD,IAAAI,EAAAC,GAAAxB,CAAA;AAGA,UAAAyB,IAAAjB,EAAA,MAAA;AAEI,YAAAkB,IAAAjB,EAAA,QAAA,IAAA,CAAAkB,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,IAAAtB,EAAA,MAAA;AAAA,MAAmE;AAAA,QAC/D,OAAAL,EAAA,MAAA;AAAA,QACmB,OAAA,MAAA4B,EAAA,MAAA;AAAA,MACS;AAAA,MAC5B;AAAA,QACA,OAAA5B,EAAA,QAAA;AAAA,QACqB,SAAA;AAAA,QACR,OAAA,MAAA4B,EAAA,QAAA;AAAA,MACiB;AAAA,IAC9B,CAAA,GAIJC,IAAA,YAAA;AACI,YAAAC,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAR,IAAAH,KAAAkB,EAAA,QAAAC,EAAA,UAIID,EAAA,SAAA,GACAe,EAAA;AAAA,IACJ,GAGJE,IAAA,YAAA;AACI,YAAAD,EAAA,GACAlB,EAAA,QAAAL,EAAA,MAAA,cAAAR,KAAAe,EAAA,QAAA,MACIA,EAAA,SAAA,GACAiB,EAAA;AAAA,IACJ;AAIJ,WAAAd;AAAA,MAAA,MAAAL,EAAA;AAAA,MACgB,OAAAoB,GAAAC,MAAA;AAGR,YADA,MAAAH,EAAA,GACA,CAAAvB,EAAA;AACI;AAEJ,cAAA2B,IAAAF,IAAAC;AACA,QAAArB,EAAA,QAAAd,IACIgB,EAAA,QAAA,IAAiCoB,IAEjCL,EAAA,IAEAE,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,67 +0,0 @@
-import { defineComponent as u, useSlots as _, computed as d, onMounted as f } from "vue";
-import { B as p } from "./button.DIU6m9wD.js";
-/* empty css              */
-import { n as l } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { u as m } from "./use-has-slot.C9lQZ6nz.js";
-import { p as b } from "./typography.Bq-EGj9y.js";
-import "../assets/ai-button.css";
-let o = 0;
-const v = {
-  beforeCreate() {
-    this.uuid = o.toString(), o += 1;
-  }
-};
-var g = function() {
-  var t = this, s = t._self._c;
-  return s("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? s("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), s("g", { attrs: { "clip-path": "url(#uia-ui-assets/icons-16-artificial_intelligence_ai_filled__a" + t.uuid + ")" } }, [s("path", { attrs: { 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" } })]), s("defs", [s("clipPath", { attrs: { id: "uia-ui-assets/icons-16-artificial_intelligence_ai_filled__a" + t.uuid } }, [s("rect", { attrs: { width: "16", height: "16", fill: "#fff" } })])])]);
-}, C = [], h = /* @__PURE__ */ l(
-  v,
-  g,
-  C,
-  !1,
-  null,
-  null
-);
-const y = h.exports, B = {
-  name: "bento-ai-button"
-}, k = /* @__PURE__ */ u({
-  ...B,
-  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(i, { emit: t }) {
-    const s = i, n = _(), e = m(n), r = d(() => ({
-      "b-ai-button--disabled": s.disabled
-    })), c = (a) => {
-      a.stopPropagation(), t("click", a);
-    };
-    return f(() => {
-      e("default") || b("An icon-only button cannot be a AI button");
-    }), { __sfc: !0, props: s, emit: t, slots: n, hasSlot: e, conditionalClass: r, onClick: c, BentoButton: p, AiFilledIcon: y };
-  }
-});
-var H = function() {
-  var t = this, s = t._self._c, n = t._self._setupProxy;
-  return s("div", { staticClass: "b-ai-button", class: n.conditionalClass }, [s("div", { staticClass: "b-ai-button__animation" }), s(n.BentoButton, { staticClass: "b-ai-button__button", attrs: { condensed: t.condensed, disabled: t.disabled, inverse: t.inverse, variant: "secondary" }, on: { "!click": function(e) {
-    return e.stopPropagation(), n.onClick.apply(null, arguments);
-  } }, scopedSlots: t._u([{ key: "iconLeft", fn: function() {
-    return [s(n.AiFilledIcon, { staticClass: "b-ai-button__icon", attrs: { "aria-hidden": "true" } })];
-  }, proxy: !0 }]) }, [t._t("default")], 2)], 1);
-}, $ = [], w = /* @__PURE__ */ l(
-  k,
-  H,
-  $,
-  !1,
-  null,
-  "d7320b14"
-);
-const I = w.exports;
-export {
-  I as a
-};
-//# sourceMappingURL=ai-button.BEy4Gly-.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ai-button.BEy4Gly-.js","sources":["../../../ui-assets/icons-16/dist/vue/artificial-intelligence-ai-filled.vue","../../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 = defineProps({\n  condensed: { type: Boolean, default: false },\n  disabled: { type: Boolean, default: false },\n  inverse: { type: Boolean, default: false },\n  link: { default: undefined },\n  type: { default: 'button' }\n});\n\n    const emit = defineEmits([\"click\"]);\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","_sfc_main$1","__default__","slots","useSlots","hasSlot","useHasSlot","conditionalClass","computed","props","onClick","e","emit","onMounted","printDevelopmentWarning"],"mappings":";;;;;;;AAOA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;qBC4DIE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;iBArCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OAAA;AAAA,MAAyC,yBAAAC,EAAA;AAAA,IACN,EAAA,GAGnCC,IAAA,CAAAC,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAC,EAAA,SAAAD,CAAA;AAAA,IAAe;AAGnB,WAAAE,EAAA,MAAA;AACI,MAAAR,EAAA,SAAA,KACIS,EAAA,2CAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;"}