@adyen/bento-vue2 1.102.0 → 1.103.0

package/dist/chunks/{button.CKS_V3p5.js → button.C4kKejsg.js}

@@ -1,14 +1,14 @@
-import { defineComponent as m, useAttrs as S, useSlots as g, computed as o } from "vue";
-import { B as C } from "./typography.C8lPlsbD.js";
-import { u as E } from "./use-has-slot.C9lQZ6nz.js";
-import { B as h, a as R } from "./link.Cejg8jB6.js";
-import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { defineComponent as y, useAttrs as m, useSlots as S, computed as o } from "vue";
+import { B as g } from "./typography.D1OZJbEa.js";
+import { u as C } from "./use-has-slot.C9lQZ6nz.js";
+import { B as E, a as h } from "./link.CscSbaXa.js";
+import { n as R } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/button.css";
-var u = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e.TERTIARY = "tertiary", e.TERTIARY_WITH_BACKGROUND = "tertiary-with-background", e))(u || {}), l = /* @__PURE__ */ ((e) => (e.CONDENSED = "condensed", e.DESTRUCTIVE = "critical", e.DISABLED = "disabled", e.ICON_ONLY = "icon-only", e.INVERSE = "inverse", e))(l || {});
-const I = {
+var u = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e.TERTIARY = "tertiary", e.TERTIARY_WITH_BACKGROUND = "tertiary-with-background", e))(u || {}), i = /* @__PURE__ */ ((e) => (e.CONDENSED = "condensed", e.DESTRUCTIVE = "critical", e.DISABLED = "disabled", e.ICON_ONLY = "icon-only", e.INVERSE = "inverse", e))(i || {});
+const D = {
   name: "bento-button"
-}, T = /* @__PURE__ */ m({
-  ...I,
+}, I = /* @__PURE__ */ y({
+  ...D,
   props: {
     /**
      * Reduces sizing of button
@@ -50,23 +50,20 @@ const I = {
   },
   emits: ["blur", "click", "focus", "keydown.esc"],
   setup(e, { emit: n }) {
-    const a = e, t = S(), r = g(), d = E(r), c = o(
+    const a = e, t = m(), l = S(), d = C(l), r = o(
       () => t["aria-disabled"] === "true" || t["aria-disabled"] === "" || t["aria-disabled"] === !0
-    ), s = o(() => a.disabled || c.value), p = o(() => (a == null ? void 0 : a.link) !== void 0 ? s.value ? "span" : h : "button"), b = o(() => {
-      var i, _;
-      return {
-        "aria-controls": (i = t["aria-controls"]) == null ? void 0 : i.toString(),
-        "aria-expanded": (_ = t["aria-expanded"]) == null ? void 0 : _.toString()
-      };
-    }), v = o(
+    ), s = o(() => a.disabled || r.value), p = o(() => a?.link !== void 0 ? s.value ? "span" : E : "button"), b = o(() => ({
+      "aria-controls": t["aria-controls"]?.toString(),
+      "aria-expanded": t["aria-expanded"]?.toString()
+    })), _ = o(
       () => p.value === "button" ? {
         ...b.value,
-        ...c.value ? { "aria-disabled": "true" } : { disabled: a.disabled },
+        ...r.value ? { "aria-disabled": "true" } : { disabled: a.disabled },
         type: a.type
       } : {
         ...a.link,
         disableTypography: !0,
-        variant: R.DEFAULT,
+        variant: h.DEFAULT,
         isButton: !0,
         /**
          * When the button is a disabled link, it's rendered as a `<span>`.
@@ -76,37 +73,37 @@ const I = {
         role: s.value ? "link" : void 0
       }
     ), f = o(() => ({
-      [`b-button--${a.variant}${a.critical ? `-${l.DESTRUCTIVE}` : ""}`]: !0
-    })), y = o(() => ({
+      [`b-button--${a.variant}${a.critical ? `-${i.DESTRUCTIVE}` : ""}`]: !0
+    })), v = o(() => ({
       ...f.value,
-      [`b-button--${l.CONDENSED}`]: a.condensed,
-      [`b-button--${l.DISABLED}`]: s.value,
-      [`b-button--${l.INVERSE}`]: a.inverse
+      [`b-button--${i.CONDENSED}`]: a.condensed,
+      [`b-button--${i.DISABLED}`]: s.value,
+      [`b-button--${i.INVERSE}`]: a.inverse
     }));
-    return { __sfc: !0, props: a, emit: n, attrs: t, slots: r, hasSlot: d, isAriaDisabled: c, isDisabled: s, componentType: p, ariaAttributes: b, componentProps: v, variantClass: f, conditionalClasses: y, getIconOnlyClass: () => ({
-      [`b-button--${l.ICON_ONLY}`]: !d("default")
-    }), onClickButton: (i) => {
-      s.value ? (i.preventDefault(), i.stopPropagation()) : n("click", i);
-    }, BentoTypography: C };
+    return { __sfc: !0, props: a, emit: n, attrs: t, slots: l, hasSlot: d, isAriaDisabled: r, isDisabled: s, componentType: p, ariaAttributes: b, componentProps: _, variantClass: f, conditionalClasses: v, getIconOnlyClass: () => ({
+      [`b-button--${i.ICON_ONLY}`]: !d("default")
+    }), onClickButton: (c) => {
+      s.value ? (c.preventDefault(), c.stopPropagation()) : n("click", c);
+    }, BentoTypography: g };
   }
 });
-var k = function() {
+var T = function() {
   var n = this, a = n._self._c, t = n._self._setupProxy;
-  return a(t.componentType, n._b({ tag: "component", staticClass: "b-button", class: { ...t.conditionalClasses, ...t.getIconOnlyClass() }, on: { "!click": function(r) {
+  return a(t.componentType, n._b({ tag: "component", staticClass: "b-button", class: { ...t.conditionalClasses, ...t.getIconOnlyClass() }, on: { "!click": function(l) {
     return t.onClickButton.apply(null, arguments);
   } } }, "component", t.componentProps, !1), [t.hasSlot("iconLeft") ? a("span", { staticClass: "b-button__icon-left", attrs: { "data-testid": "icon-button-left", "aria-hidden": t.hasSlot("default") ? "true" : null } }, [n._t("iconLeft")], 2) : n._e(), t.hasSlot("default") ? a(t.BentoTypography, { staticClass: "b-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [n._t("default")], 2) : n._e(), t.hasSlot("iconRight") ? a("span", { staticClass: "b-button__icon-right", attrs: { "data-testid": "icon-button-right", "aria-hidden": t.hasSlot("default") ? "true" : null } }, [n._t("iconRight")], 2) : n._e()], 1);
-}, O = [], A = /* @__PURE__ */ D(
+}, k = [], O = /* @__PURE__ */ R(
+  I,
   T,
   k,
-  O,
   !1,
   null,
   "1f8e11d4"
 );
-const j = A.exports;
+const U = O.exports;
 export {
-  j as B,
-  l as a,
+  U as B,
+  i as a,
   u as b
 };
-//# sourceMappingURL=button.CKS_V3p5.js.map
+//# sourceMappingURL=button.C4kKejsg.js.map

package/dist/chunks/{button.CKS_V3p5.js.map → button.C4kKejsg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button.CKS_V3p5.js","sources":["../../src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n    TERTIARY_WITH_BACKGROUND = 'tertiary-with-background',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n    INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n    condensed?: boolean;\n    critical?: boolean;\n    disabled?: boolean;\n    inverse?: boolean;\n    variant?: BentoButtonVariant | `${BentoButtonVariant}`;\n    type?: string;\n    link?: object;\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"{ ...conditionalClasses, ...getIconOnlyClass() }\"\n        @click.capture=\"onClickButton\"\n    >\n        <span\n            v-if=\"hasSlot('iconLeft')\"\n            class=\"b-button__icon-left\"\n            data-testid=\"icon-button-left\"\n            :aria-hidden=\"hasSlot('default') ? 'true' : null\"\n        >\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-button__label\">\n            <slot />\n        </bento-typography>\n        <span\n            v-if=\"hasSlot('iconRight')\"\n            class=\"b-button__icon-right\"\n            data-testid=\"icon-button-right\"\n            :aria-hidden=\"hasSlot('default') ? 'true' : null\"\n        >\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType, useAttrs, useSlots } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from './button.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { type Booleanish } from '../../types/prop-types';\n    import type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external: boolean;\n    }\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Displays button as critical\n         */\n        critical: { type: Boolean, default: false },\n\n        /**\n         * Disables button functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: { type: Boolean, default: false },\n\n        /**\n         * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n         */\n        link: { type: Object, default: undefined },\n\n        /**\n         * The default behavior of the button.\n         * Possible values are: 'button', 'reset', 'submit'\n         */\n        type: {\n            type: String as PropType<ButtonHTMLAttributes['type']>,\n            default: 'button',\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary, tertiary-with-background\n         */\n        variant: {\n            type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n            default: BentoButtonVariant.PRIMARY,\n            validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"blur\", \"click\", \"focus\", \"keydown.esc\"]);\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const isAriaDisabled = computed(\n        () => attrs['aria-disabled'] === 'true' || attrs['aria-disabled'] === '' || attrs['aria-disabled'] === true\n    );\n    const isDisabled = computed(() => props.disabled || isAriaDisabled.value);\n\n    const componentType = computed(() => {\n        if (props?.link !== undefined) {\n            /**\n             * Display a \"span\" with role \"link\" and \"aria-disabled=true\"\n             * if the link is disabled.\n             * @link https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n             */\n            return isDisabled.value ? 'span' : BentoLink;\n        }\n        return 'button';\n    });\n    const ariaAttributes = computed(() => ({\n        'aria-controls': attrs['aria-controls']?.toString() as string,\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        componentType.value === 'button'\n            ? {\n                  ...ariaAttributes.value,\n                  ...(isAriaDisabled.value ? { 'aria-disabled': 'true' } : { disabled: props.disabled }),\n                  type: props.type,\n              }\n            : {\n                  ...props.link,\n                  disableTypography: true,\n                  variant: BentoLinkVariant.DEFAULT,\n                  isButton: true,\n\n                  /**\n                   * When the button is a disabled link, it's rendered as a `<span>`.\n                   * These attributes ensure it's still announced as a disabled link by screen readers.\n                   */\n                  'aria-disabled': isDisabled.value ? 'true' : undefined,\n                  role: isDisabled.value ? 'link' : undefined,\n              }\n    );\n\n    const variantClass = computed(() => ({\n        [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        ...variantClass.value,\n        [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n        [`b-button--${BentoButtonPropClass.DISABLED}`]: isDisabled.value,\n        [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n    }));\n\n    const getIconOnlyClass = () => ({\n        [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !hasSlot('default'),\n    });\n\n    const onClickButton = (e: MouseEvent) => {\n        if (isDisabled.value) {\n            e.preventDefault();\n            e.stopPropagation();\n        } else {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @example\n     * import { BentoButton } from '@adyen/bento-vue2';\n     * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             variant=\"secondary\"\n     *         >\n     *              <template #iconLeft>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *\n     *              Button text\n     *\n     *              <template #iconRight>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","isAriaDisabled","computed","isDisabled","props","componentType","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","emit"],"mappings":";;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,2BAAA,4BAJQA,IAAAD,KAAA,CAAA,CAAA,GAOLE,IAAA,kBAAAC,OACHA,EAAA,YAAA,aACAA,EAAA,cAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;AC6LR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtGAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC;AAAA,MAAuB,MAAAP,EAAA,eAAA,MAAA,UAAAA,EAAA,eAAA,MAAA,MAAAA,EAAA,eAAA,MAAA;AAAA,IACoF,GAE3GQ,IAAAD,EAAA,MAAAE,EAAA,YAAAH,EAAA,KAAA,GAEAI,IAAAH,EAAA,OACIE,KAAA,gBAAAA,EAAA,UAAA,SAMID,EAAA,QAAA,SAAAG,IAEJ,QAAO,GAEXC,IAAAL,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAM,IAAAb,EAAA,eAAA,MAAA,gBAAAa,EAAA;AAAA,QACe,kBAAAC,IAAAd,EAAA,eAAA,MAAA,gBAAAc,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAR;AAAA,MAAuB,MAAAG,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAE,EAAA;AAAA,QACsB,GAAAN,EAAA,QAAA,EAAA,iBAAA,OAAA,IAAA,EAAA,UAAAG,EAAA,SAAA;AAAA,QACkE,MAAAA,EAAA;AAAA,MACxE,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAO,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAR,EAAA,QAAA,SAAA;AAAA,QAMmC,MAAAA,EAAA,QAAA,SAAA;AAAA,MACX;AAAA,IACtC,GAGVS,IAAAV,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAE,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAZ,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGqB,IAAAX,EAAA,OAAA;AAAA,MAA2C,GAAAU,EAAA;AAAA,MACvB,CAAA,aAAApB,EAAA,SAAA,EAAA,GAAAY,EAAA;AAAA,MACuC,CAAA,aAAAZ,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,MACI,CAAA,aAAAX,EAAA,OAAA,EAAA,GAAAY,EAAA;AAAA,IACN,EAAA;+NAGzD,OAAA;AAAA,MAAgC,CAAA,aAAAZ,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA,SAAA;AAAA,IACuC,mBAGvE,CAAAe,MAAA;AACI,MAAAX,EAAA,SACIW,EAAA,eAAA,GACAA,EAAA,gBAAA,KAEAC,EAAA,SAAAD,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"button.C4kKejsg.js","sources":["../../src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n    TERTIARY_WITH_BACKGROUND = 'tertiary-with-background',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n    INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n    condensed?: boolean;\n    critical?: boolean;\n    disabled?: boolean;\n    inverse?: boolean;\n    variant?: BentoButtonVariant | `${BentoButtonVariant}`;\n    type?: string;\n    link?: object;\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"{ ...conditionalClasses, ...getIconOnlyClass() }\"\n        @click.capture=\"onClickButton\"\n    >\n        <span\n            v-if=\"hasSlot('iconLeft')\"\n            class=\"b-button__icon-left\"\n            data-testid=\"icon-button-left\"\n            :aria-hidden=\"hasSlot('default') ? 'true' : null\"\n        >\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-button__label\">\n            <slot />\n        </bento-typography>\n        <span\n            v-if=\"hasSlot('iconRight')\"\n            class=\"b-button__icon-right\"\n            data-testid=\"icon-button-right\"\n            :aria-hidden=\"hasSlot('default') ? 'true' : null\"\n        >\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType, useAttrs, useSlots } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from './button.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { type Booleanish } from '../../types/prop-types';\n    import type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external: boolean;\n    }\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Displays button as critical\n         */\n        critical: { type: Boolean, default: false },\n\n        /**\n         * Disables button functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: { type: Boolean, default: false },\n\n        /**\n         * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n         */\n        link: { type: Object, default: undefined },\n\n        /**\n         * The default behavior of the button.\n         * Possible values are: 'button', 'reset', 'submit'\n         */\n        type: {\n            type: String as PropType<ButtonHTMLAttributes['type']>,\n            default: 'button',\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary, tertiary-with-background\n         */\n        variant: {\n            type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n            default: BentoButtonVariant.PRIMARY,\n            validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"blur\", \"click\", \"focus\", \"keydown.esc\"]);\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const isAriaDisabled = computed(\n        () => attrs['aria-disabled'] === 'true' || attrs['aria-disabled'] === '' || attrs['aria-disabled'] === true\n    );\n    const isDisabled = computed(() => props.disabled || isAriaDisabled.value);\n\n    const componentType = computed(() => {\n        if (props?.link !== undefined) {\n            /**\n             * Display a \"span\" with role \"link\" and \"aria-disabled=true\"\n             * if the link is disabled.\n             * @link https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n             */\n            return isDisabled.value ? 'span' : BentoLink;\n        }\n        return 'button';\n    });\n    const ariaAttributes = computed(() => ({\n        'aria-controls': attrs['aria-controls']?.toString() as string,\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        componentType.value === 'button'\n            ? {\n                  ...ariaAttributes.value,\n                  ...(isAriaDisabled.value ? { 'aria-disabled': 'true' } : { disabled: props.disabled }),\n                  type: props.type,\n              }\n            : {\n                  ...props.link,\n                  disableTypography: true,\n                  variant: BentoLinkVariant.DEFAULT,\n                  isButton: true,\n\n                  /**\n                   * When the button is a disabled link, it's rendered as a `<span>`.\n                   * These attributes ensure it's still announced as a disabled link by screen readers.\n                   */\n                  'aria-disabled': isDisabled.value ? 'true' : undefined,\n                  role: isDisabled.value ? 'link' : undefined,\n              }\n    );\n\n    const variantClass = computed(() => ({\n        [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        ...variantClass.value,\n        [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n        [`b-button--${BentoButtonPropClass.DISABLED}`]: isDisabled.value,\n        [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n    }));\n\n    const getIconOnlyClass = () => ({\n        [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !hasSlot('default'),\n    });\n\n    const onClickButton = (e: MouseEvent) => {\n        if (isDisabled.value) {\n            e.preventDefault();\n            e.stopPropagation();\n        } else {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @example\n     * import { BentoButton } from '@adyen/bento-vue2';\n     * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             variant=\"secondary\"\n     *         >\n     *              <template #iconLeft>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *\n     *              Button text\n     *\n     *              <template #iconRight>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","isAriaDisabled","computed","isDisabled","props","componentType","BentoLink","ariaAttributes","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","emit"],"mappings":";;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,2BAAA,4BAJQA,IAAAD,KAAA,CAAA,CAAA,GAOLE,IAAA,kBAAAC,OACHA,EAAA,YAAA,aACAA,EAAA,cAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;AC6LR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtGAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC;AAAA,MAAuB,MAAAP,EAAA,eAAA,MAAA,UAAAA,EAAA,eAAA,MAAA,MAAAA,EAAA,eAAA,MAAA;AAAA,IACoF,GAE3GQ,IAAAD,EAAA,MAAAE,EAAA,YAAAH,EAAA,KAAA,GAEAI,IAAAH,EAAA,MACIE,GAAA,SAAA,SAMID,EAAA,QAAA,SAAAG,IAEJ,QAAO,GAEXC,IAAAL,EAAA,OAAA;AAAA,MAAuC,iBAAAP,EAAA,eAAA,GAAA,SAAA;AAAA,MACe,iBAAAA,EAAA,eAAA,GAAA,SAAA;AAAA,IACA,EAAA,GAGtDa,IAAAN;AAAA,MAAuB,MAAAG,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAE,EAAA;AAAA,QACsB,GAAAN,EAAA,QAAA,EAAA,iBAAA,OAAA,IAAA,EAAA,UAAAG,EAAA,SAAA;AAAA,QACkE,MAAAA,EAAA;AAAA,MACxE,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAK,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAN,EAAA,QAAA,SAAA;AAAA,QAMmC,MAAAA,EAAA,QAAA,SAAA;AAAA,MACX;AAAA,IACtC,GAGVO,IAAAR,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAE,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAZ,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGmB,IAAAT,EAAA,OAAA;AAAA,MAA2C,GAAAQ,EAAA;AAAA,MACvB,CAAA,aAAAlB,EAAA,SAAA,EAAA,GAAAY,EAAA;AAAA,MACuC,CAAA,aAAAZ,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,MACI,CAAA,aAAAX,EAAA,OAAA,EAAA,GAAAY,EAAA;AAAA,IACN,EAAA;+NAGzD,OAAA;AAAA,MAAgC,CAAA,aAAAZ,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA,SAAA;AAAA,IACuC,mBAGvE,CAAAa,MAAA;AACI,MAAAT,EAAA,SACIS,EAAA,eAAA,GACAA,EAAA,gBAAA,KAEAC,EAAA,SAAAD,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}