@adyen/bento-vue2 1.26.0 → 1.28.0

package/dist/chunks/{index.317fca12.js → link.DJ1A53gF.js}

@@ -1,33 +1,31 @@
-import { defineComponent as f, computed as o } from "vue";
+import { defineComponent as f, computed as l } from "vue";
 import { RouterLink as d } from "vue-router";
-import { B as g } from "./index.dd30e538.js";
-import { n as _ } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import "../assets/index42.css";
+import { B as g } from "./typography.Bjtu3Gca.js";
+import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/link.css";
 var s = /* @__PURE__ */ ((a) => (a.DEFAULT = "default", a.QUIET = "quiet", a))(s || {});
 let c = 0;
-const v = {
+const m = {
   beforeCreate() {
     this.uuid = c.toString(), c += 1;
   }
 };
-var y = function() {
+var v = function() {
   var t = this, e = t._self._c;
   return e("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"] ? e("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), e("path", { attrs: { fill: "#00112C", d: "M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z" } })]);
-}, m = [], k = /* @__PURE__ */ _(
+}, y = [], k = /* @__PURE__ */ p(
+  m,
   v,
   y,
-  m,
   !1,
   null,
-  null,
-  null,
   null
 );
-const x = k.exports, h = {
+const h = k.exports, x = {
   name: "bento-link",
   inheritAttrs: !1
 }, b = /* @__PURE__ */ f({
-  ...h,
+  ...x,
   props: {
     to: null,
     replace: { type: Boolean },
@@ -50,14 +48,14 @@ const x = k.exports, h = {
   },
   emits: ["click"],
   setup(a, { emit: t }) {
-    const e = a, n = (l) => l, r = o(() => ({
+    const e = a, n = (o) => o, r = l(() => ({
       "b-link": !e.isButton,
       [`b-link--${s.QUIET}`]: e.variant === s.QUIET,
-      ["b-link--truncate"]: e.truncate
-    })), u = o(() => e.external ? e.target ?? "_blank" : e.target), p = o(() => !(e.isButton || e.isNotRouting));
-    return { __sfc: !0, props: e, getAttributeTitle: n, conditionalClasses: r, computedTarget: u, showExternalLinkIcon: p, emit: t, onClick: (l, i) => {
-      t("click", l), i && i();
-    }, RouterLink: d, BentoTypography: g, ExternalLinkIcon: x };
+      "b-link--truncate": e.truncate
+    })), u = l(() => e.external ? e.target ?? "_blank" : e.target), _ = l(() => !(e.isButton || e.isNotRouting));
+    return { __sfc: !0, props: e, getAttributeTitle: n, conditionalClasses: r, computedTarget: u, showExternalLinkIcon: _, emit: t, onClick: (o, i) => {
+      t("click", o), i && i();
+    }, RouterLink: d, BentoTypography: g, ExternalLinkIcon: h };
   }
 });
 var C = function() {
@@ -65,20 +63,18 @@ var C = function() {
   return t.external || t.isNotRouting ? e("a", t._b({ class: n.conditionalClasses, attrs: { href: t.$props.to.toString(), title: n.getAttributeTitle(t.$attrs.title), target: n.computedTarget }, on: { click: n.onClick } }, "a", t.$attrs, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2), n.showExternalLinkIcon ? e("span", { staticClass: "b-link__external-link-icon" }, [e(n.ExternalLinkIcon)], 1) : t._e()], 2) : e(n.RouterLink, t._b({ class: n.conditionalClasses, attrs: { target: t.target, to: n.props.to, custom: "" }, nativeOn: { click: function(r) {
     return n.onClick.apply(null, arguments);
   } } }, "router-link", { ...t.$attrs, ...t.$props }, !1), [t.disableTypography ? t._t("default") : e(n.BentoTypography, { staticClass: "b-link__text", attrs: { el: "span", variant: "body" } }, [t._t("default")], 2)], 2);
-}, B = [], T = /* @__PURE__ */ _(
+}, B = [], T = /* @__PURE__ */ p(
   b,
   C,
   B,
   !1,
   null,
-  "69522ac0",
-  null,
-  null
+  "69522ac0"
 );
 const I = T.exports;
 export {
   I as B,
-  x as E,
+  h as E,
   s as a
 };
-//# sourceMappingURL=index.317fca12.js.map
+//# sourceMappingURL=link.DJ1A53gF.js.map

package/dist/chunks/link.DJ1A53gF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.DJ1A53gF.js","sources":["../../../core/src/components/link/link.types.ts","../../../../node_modules/@adyen/ui-assets-icons-16/dist/vue/external-link.vue","../../src/components/link/link.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoLinkVariant {\n    DEFAULT = 'default',\n    QUIET = 'quiet',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M2.93933 11.9999L10.1893 4.74989H5.24999V3.24989H12.75V10.7499H11.25V5.81055L3.99999 13.0605L2.93933 11.9999Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <a\n        v-if=\"external || isNotRouting\"\n        :class=\"conditionalClasses\"\n        v-bind=\"$attrs\"\n        :href=\"$props.to.toString()\"\n        :title=\"getAttributeTitle($attrs.title)\"\n        :target=\"computedTarget\"\n        @click=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n        <span v-if=\"showExternalLinkIcon\" class=\"b-link__external-link-icon\">\n            <external-link-icon />\n        </span>\n    </a>\n    <router-link\n        v-else\n        v-bind=\"{ ...$attrs, ...$props }\"\n        :class=\"conditionalClasses\"\n        :target=\"target\"\n        :to=\"props.to\"\n        custom\n        @click.native=\"onClick\"\n    >\n        <bento-typography v-if=\"!disableTypography\" class=\"b-link__text\" el=\"span\" variant=\"body\">\n            <slot />\n        </bento-typography>\n        <slot v-else />\n    </router-link>\n</template>\n\n<script setup lang=\"ts\">\n    import { RouterLink } from 'vue-router';\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLinkVariant } from '@/core/components/link/link.types';\n    import type { RouterLinkSlotArgument } from 'vue-router/types/router';\n    import ExternalLinkIcon from '@adyen/ui-assets-icons-16/vue/external-link';\n\n    /* eslint-disable vue/require-default-prop */ // Allow RouterLink to set the defaults\n    /* eslint-disable @typescript-eslint/no-explicit-any */ // \"to\" needs to be any\n    export interface LinkProps {\n        /**\n         * Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to\n         * `router.push()` internally, so the value can be either a \"string\" or a location\" descriptor object.\n         */\n        to: any;\n        /* eslint-enable @typescript-eslint/no-explicit-any */\n\n        /**\n         * Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will\n         * not create a new history record.\n         *\n         * @default false\n         */\n        replace?: boolean;\n        /**\n         * Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating\n         * from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with append we will end up at\n         * `/a/b`.\n         *\n         * @default false\n         */\n        append?: boolean;\n        /**\n         * Sometimes we want <RouterLink> to render as another tag, e.g <li>. Then we can use tag prop to specify which tag to\n         * render to, and it will still listen to click events for navigation.\n         *\n         * @default \"a\"\n         */\n        tag?: string;\n        /**\n         * Configure the active CSS class applied when the link is active. Note the default value can also be configured\n         * globally via the `linkActiveClass` router constructor option.\n         *\n         * @default \"router-link-active\"\n         */\n        activeClass?: string;\n        /**\n         * The default active class matching behavior is **inclusive match**. For example, `<RouterLink to=\"/a\">` will get\n         * this class applied as long as the current path starts with `/a/` or is `/a`.\n         *\n         * @default false\n         */\n        exact?: boolean;\n        /**\n         * Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections.\n         *\n         * @default false\n         */\n        exactPath?: boolean;\n        /**\n         * Configure the active CSS class applied when the link is active with exact path match. Note the default value can\n         * also be configured globally via the `linkExactPathActiveClass` router constructor option.\n         *\n         * @default \"router-link-exact-path-active\"\n         */\n        exactPathActiveClass?: string;\n\n        /**\n         * Specify the event(s) that can trigger the link navigation.\n         *\n         * @default 'click'\n         */\n        event?: string | ReadonlyArray<string>;\n        /**\n         * Configure the active CSS class applied when the link is active with exact match. Note the default value can also be\n         * configured globally via the `linkExactActiveClass` router constructor option.\n         *\n         * @default \"router-link-exact-active\"\n         */\n        exactActiveClass?: string;\n        /**\n         * Configure the value of `aria-current` when the link is active with exact match. It must be one of the allowed\n         * values for [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the\n         * default of page should be the best fit.\n         *\n         * @default \"page\"\n         */\n        ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';\n\n        /**\n         * Custom Props\n         */\n\n        /**\n         * Disable the default typography for the component. Only use this when the component is inside another typography component.\n         */\n        disableTypography?: boolean;\n\n        /**\n         * Set the rendered link to a regular external anchor link and renders an external link icon.\n         */\n        external?: boolean;\n\n        /**\n         * Set to true if used inside a `BentoButton` component.\n         */\n        isButton?: boolean;\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        isNotRouting?: boolean;\n\n        /**\n         * Sets the target of the rendered link.\n         */\n        target?: string;\n\n        /**\n         * Set to true to truncate link. Doesn't work with disableTypography.\n         */\n        truncate?: boolean;\n\n        /**\n         * Link variant type affecting visual style.\n         * @values default, quiet\n         */\n        variant?: BentoLinkVariant | `${BentoLinkVariant}`;\n    }\n\n    const props = withDefaults(defineProps<LinkProps>(), {\n        target: null,\n        variant: BentoLinkVariant.DEFAULT,\n    });\n\n    const getAttributeTitle = (attributesTitle: unknown) => attributesTitle as string;\n\n    const conditionalClasses = computed(() => ({\n        'b-link': !props.isButton,\n        [`b-link--${BentoLinkVariant.QUIET}`]: props.variant === BentoLinkVariant.QUIET,\n        [`b-link--truncate`]: props.truncate,\n    }));\n\n    const computedTarget = computed(() => (props.external ? props.target ?? '_blank' : props.target));\n    const showExternalLinkIcon = computed(() => !(props.isButton || props.isNotRouting));\n\n    const emit = defineEmits<{\n        (e: 'click', clickEvent: MouseEvent): void;\n    }>();\n\n    const onClick = (e: MouseEvent, navigateCallback?: RouterLinkSlotArgument['navigate']) => {\n        emit('click', e);\n        if (navigateCallback) {\n            navigateCallback();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Extends the `router-link` from the `vue-router` NPM package.\n     *\n     * @example\n     * import { BentoLink } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLink },\n     *     template: `\n     *       <bento-link to=\"/\">\n     *           link\n     *       </bento-link>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-link',\n        inheritAttrs: false,\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/link/link.scss\" />\n"],"names":["BentoLinkVariant","BentoLinkVariant2","uuid","_sfc_main$1","__default__","getAttributeTitle","attributesTitle","conditionalClasses","computed","props","computedTarget","showExternalLinkIcon","e","navigateCallback","emit"],"mappings":";;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;ACEZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;qBCqMIE,IAAA;AAAA,EAAe,MAAA;AAAA,EACL,cAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;;iBA1CAC,IAAA,CAAAC,MAAAA,GAEAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,UAAA,CAAAC,EAAA;AAAA,MACtB,CAAA,WAAAT,EAAA,KAAA,EAAA,GAAAS,EAAA,YAAAT,EAAA;AAAA,MACyD,oBAAAS,EAAA;AAAA,IAC9C,EAAA,GAGhCC,IAAAF,EAAA,MAAAC,EAAA,WAAAA,EAAA,UAAA,WAAAA,EAAA,MAAA,GACAE,IAAAH,EAAA,MAAA,EAAAC,EAAA,YAAAA,EAAA,aAAA;6IAMA,CAAAG,GAAAC,MAAA;AACI,MAAAC,EAAA,SAAAF,CAAA,GACAC,KACIA,EAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/chunks/listbox-option-tag.BDjsYOE1.js

@@ -0,0 +1,75 @@
+import { defineComponent as c, toRefs as v, computed as o } from "vue";
+import { u as f, a as n, A as b, B as d } from "./avatar-image.DhlR-7Yg.js";
+import { B as p } from "./typography.Bjtu3Gca.js";
+import "./index.Cl4_42j5.js";
+import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as g } from "./tag.bhKrZHTU.js";
+import "../assets/listbox-option-tag.css";
+const y = {
+  name: "bento-avatar"
+}, C = /* @__PURE__ */ c({
+  ...y,
+  props: {
+    iconOnly: { type: Boolean, default: !1 },
+    src: { default: null },
+    username: null
+  },
+  setup(r) {
+    const t = r, { username: a } = v(t), e = o(() => t.iconOnly ? t.username : null), _ = o(() => t.src ? null : t.username), l = f(a), s = o(() => l.value ? l.value.charCodeAt(0) - 65 : null), m = o(() => {
+      const i = 26 / Object.keys(n).length;
+      return s.value <= i ? n.YELLOW : s.value <= i * 2 ? n.BLUE : s.value <= i * 3 ? n.GREEN : n.RED;
+    });
+    return { __sfc: !0, props: t, username: a, computedAriaLabel: e, computedUsername: _, initials: l, charCode: s, avatarColor: m, AvatarImage: b, BentoAvatarImageVariant: d, BentoTypography: p };
+  }
+});
+var A = function() {
+  var t = this, a = t._self._c, e = t._self._setupProxy;
+  return a("div", { staticClass: "b-avatar", attrs: { "aria-label": e.computedAriaLabel } }, [a(e.AvatarImage, { attrs: { src: t.src, username: e.computedUsername, variant: e.BentoAvatarImageVariant.SMALL, color: e.avatarColor } }), t.iconOnly ? t._e() : a(e.BentoTypography, { staticClass: "b-avatar__label", attrs: { el: "span", variant: "body" } }, [t._v(" " + t._s(e.username) + " ")])], 1);
+}, B = [], h = /* @__PURE__ */ u(
+  C,
+  A,
+  B,
+  !1,
+  null,
+  "c024d59b"
+);
+const P = h.exports, L = c({
+  name: "listbox-tag-option",
+  components: {
+    BentoTag: g,
+    BentoTypography: p
+  },
+  props: {
+    /**
+     * The option item that contains all the option item's data.
+     * @type {BentoListboxOptionItem}
+     */
+    option: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(r) {
+    return {
+      // Values
+      variant: o(() => r.option.data)
+    };
+  }
+});
+var O = function() {
+  var t = this, a = t._self._c;
+  return t._self._setupProxy, a("span", { staticClass: "b-listbox-tag-option" }, [a("span", { attrs: { "aria-hidden": "true" } }, [a("bento-tag", { staticClass: "b-listbox-tag-option__tag", attrs: { label: t.option.value.toString(), variant: t.variant } })], 1), t.option.label ? a("bento-typography", { staticClass: "b-listbox-tag-option__label", attrs: { el: "span" } }, [t._v(" " + t._s(t.option.label) + " ")]) : t._e()], 1);
+}, x = [], I = /* @__PURE__ */ u(
+  L,
+  O,
+  x,
+  !1,
+  null,
+  "83a3d6e2"
+);
+const V = I.exports;
+export {
+  P as B,
+  V as L
+};
+//# sourceMappingURL=listbox-option-tag.BDjsYOE1.js.map

package/dist/chunks/listbox-option-tag.BDjsYOE1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-option-tag.BDjsYOE1.js","sources":["../../src/components/internal/avatar/avatar.vue","../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from '@/components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Displays the user profile without the label.\n             */\n            iconOnly?: boolean;\n\n            /**\n             * Image src to load the profile picture.\n             */\n            src?: string;\n\n            /**\n             * Name of the user that will be used both in the label and to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username: string;\n        }>(),\n        {\n            iconOnly: false,\n            src: null,\n        }\n    );\n\n    const { username } = toRefs(props);\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\n    const initials = useInitials(username);\n\n    // Returns the UTF-16 char code\n    const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n    // Returns a computed color based on the letter passed\n    const avatarColor = computed(() => {\n        const numberOfAlphabetLetters = 26;\n        const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n        const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n        if (charCode.value <= rangeStep) {\n            return BentoAvatarImageColor.YELLOW;\n        }\n        if (charCode.value <= rangeStep * 2) {\n            return BentoAvatarImageColor.BLUE;\n        }\n        if (charCode.value <= rangeStep * 3) {\n            return BentoAvatarImageColor.GREEN;\n        }\n        return BentoAvatarImageColor.RED;\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoAvatar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAvatar },\n     *     template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {\n        name: 'bento-avatar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n","<template>\n    <span class=\"b-listbox-tag-option\">\n        <span aria-hidden=\"true\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types';\n    import { BentoTag, BentoTagVariant } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["__default__","username","toRefs","props","computedAriaLabel","computed","computedUsername","initials","useInitials","charCode","avatarColor","rangeStep","BentoAvatarImageColor","_sfc_main","defineComponent","BentoTag","BentoTypography"],"mappings":";;;;;;;AAuFI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1CA,EAAA,UAAAC,EAAA,IAAAC,EAAAC,CAAA,GAEAC,IAAAC,EAAA,MAAAF,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAG,IAAAD,EAAA,MAAAF,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAI,IAAAC,EAAAP,CAAA,GAGAQ,IAAAJ,EAAA,MAAAE,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAG,IAAAL,EAAA,MAAA;AAGI,YAAAM,IAAA,KADA,OAAA,KAAAC,CAAA,EAAA;AAGA,aAAAH,EAAA,SAAAE,IACIC,EAAA,SAEJH,EAAA,SAAAE,IAAA,IACIC,EAAA,OAEJH,EAAA,SAAAE,IAAA,IACIC,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;qBCpDrCC,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAb,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAE,EAAA,MAAAF,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/{loading-button.eafc9e1b.js → loading-button.CoF1IhEU.js}

@@ -1,13 +1,13 @@
-import { defineComponent as d, computed as r } from "vue";
-import { BentoLoadingIndicator as p } from "../loading-indicator.js";
-import { a as i } from "./button.9d6435ae.js";
-import { C as u } from "./cross-circle-fill.27580c4b.js";
-import { C as _ } from "./checkmark-circle-fill.345311d2.js";
-import { n as f } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { defineComponent as d, computed as o } from "vue";
+import { B as p } from "./loading-indicator.DXc7I1Lm.js";
+import { B as i } from "./button.DhAUh5JA.js";
+import { C as u } from "./cross-circle-fill.CnYH4R_h.js";
+import { C as f } from "./checkmark-circle-fill.DVl6QSwm.js";
+import { n as v } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/loading-button.css";
-var e = /* @__PURE__ */ ((s) => (s.START = "start", s.LOADING = "loading", s.SUCCESS = "success", s.FAIL = "fail", s))(e || {});
-const v = {}, m = /* @__PURE__ */ d({
-  ...v,
+var s = /* @__PURE__ */ ((e) => (e.START = "start", e.LOADING = "loading", e.SUCCESS = "success", e.FAIL = "fail", e))(s || {});
+const _ = {}, m = /* @__PURE__ */ d({
+  ..._,
   __name: "loading-button",
   props: {
     /**
@@ -44,8 +44,8 @@ const v = {}, m = /* @__PURE__ */ d({
      */
     state: {
       type: String,
-      default: e.START,
-      validator: (s) => Object.values(e).includes(s)
+      default: s.START,
+      validator: (e) => Object.values(s).includes(e)
     },
     /**
      * Types of flavour of Button
@@ -58,42 +58,40 @@ const v = {}, m = /* @__PURE__ */ d({
     }
   },
   emits: ["click"],
-  setup(s, { emit: a }) {
-    const t = s, n = r(() => ({
-      [`b-loading-button--${t.variant}-${e.LOADING}`]: t.state === e.LOADING && !t.disabled,
-      "b-loading-button--loading": t.state === e.LOADING && !t.disabled,
-      [`b-loading-button--${t.variant}-${e.SUCCESS}`]: t.state === e.SUCCESS,
-      ["b-loading-button--inverse"]: t.inverse
-    })), o = r(
+  setup(e, { emit: a }) {
+    const t = e, n = o(() => ({
+      [`b-loading-button--${t.variant}-${s.LOADING}`]: t.state === s.LOADING && !t.disabled,
+      "b-loading-button--loading": t.state === s.LOADING && !t.disabled,
+      [`b-loading-button--${t.variant}-${s.SUCCESS}`]: t.state === s.SUCCESS,
+      "b-loading-button--inverse": t.inverse
+    })), r = o(
       () => t.variant === "primary" && !t.inverse || t.variant !== "primary" && t.inverse
-    ), c = r(
-      () => t.critical && t.state === e.START || t.state === e.FAIL
+    ), c = o(
+      () => t.critical && t.state === s.START || t.state === s.FAIL
     );
-    return { __sfc: !0, props: t, emit: a, conditionalClasses: n, isInverseLoadingIndicator: o, isCritical: c, onClick: (l) => {
-      l.stopPropagation(), t.state !== e.LOADING && a("click", l);
-    }, BentoLoadingIndicator: p, BentoButton: i, Cross: u, Checkmark: _ };
+    return { __sfc: !0, props: t, emit: a, conditionalClasses: n, isInverseLoadingIndicator: r, isCritical: c, onClick: (l) => {
+      l.stopPropagation(), t.state !== s.LOADING && a("click", l);
+    }, BentoLoadingIndicator: p, BentoButton: i, Cross: u, Checkmark: f };
   }
 });
 var C = function() {
   var a = this, t = a._self._c, n = a._self._setupProxy;
-  return t(n.BentoButton, { staticClass: "b-loading-button", class: n.conditionalClasses, attrs: { critical: n.isCritical, variant: a.variant, condensed: a.condensed, disabled: a.disabled, inverse: a.inverse }, on: { "!click": function(o) {
-    return o.stopPropagation(), n.onClick.apply(null, arguments);
+  return t(n.BentoButton, { staticClass: "b-loading-button", class: n.conditionalClasses, attrs: { critical: n.isCritical, variant: a.variant, condensed: a.condensed, disabled: a.disabled, inverse: a.inverse }, on: { "!click": function(r) {
+    return r.stopPropagation(), n.onClick.apply(null, arguments);
   } }, scopedSlots: a._u([a.state !== "start" ? { key: "iconLeft", fn: function() {
     return [t("span", { staticClass: "b-loading-button__icon", attrs: { "data-testid": "loading-button-rotating-icon" } }, [a.state === "fail" ? t(n.Cross, { attrs: { "svg-title": "failed" } }) : a.state === "success" ? t(n.Checkmark, { attrs: { "svg-title": "succeded" } }) : a.state === "loading" ? t(n.BentoLoadingIndicator, { attrs: { small: "", inverse: n.isInverseLoadingIndicator } }) : a._e()], 1)];
   }, proxy: !0 } : null], null, !0) }, [a._t("default")], 2);
-}, g = [], b = /* @__PURE__ */ f(
+}, b = [], g = /* @__PURE__ */ v(
   m,
   C,
-  g,
+  b,
   !1,
   null,
-  "ae91d0e0",
-  null,
-  null
+  "ae91d0e0"
 );
-const T = b.exports;
+const O = g.exports;
 export {
-  T as B,
-  e as a
+  O as B,
+  s as a
 };
-//# sourceMappingURL=loading-button.eafc9e1b.js.map
+//# sourceMappingURL=loading-button.CoF1IhEU.js.map

package/dist/chunks/{loading-button.eafc9e1b.js.map → loading-button.CoF1IhEU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"loading-button.eafc9e1b.js","sources":["../../src/components/button/components/loading-button/loading-button.types.ts","../../src/components/button/components/loading-button/loading-button.vue"],"sourcesContent":["export enum BentoLoadingButtonState {\n    START = 'start',\n    LOADING = 'loading',\n    SUCCESS = 'success',\n    FAIL = 'fail',\n}\n\nexport type BentoLoadingButtonIconState = Partial<{ [key in BentoLoadingButtonState]: string }>;\n","<template>\n    <bento-button\n        :critical=\"isCritical\"\n        :variant=\"variant\"\n        :condensed=\"condensed\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        class=\"b-loading-button\"\n        :class=\"conditionalClasses\"\n        @click.capture.stop=\"onClick\"\n    >\n        <slot></slot>\n        <template v-if=\"state !== 'start'\" #iconLeft>\n            <span class=\"b-loading-button__icon\" data-testid=\"loading-button-rotating-icon\">\n                <cross v-if=\"state === 'fail'\" svg-title=\"failed\" />\n                <checkmark v-else-if=\"state === 'success'\" svg-title=\"succeded\" />\n                <!-- TODO: Replace with new loading-indicator component -->\n                <bento-loading-indicator v-else-if=\"state === 'loading'\" small :inverse=\"isInverseLoadingIndicator\" />\n            </span>\n        </template>\n    </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import { BentoLoadingButtonState } from './loading-button.types';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import BentoButton from '@/components/button/button.vue';\n    import Cross from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import Checkmark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Displays loading-button as critical\n         */\n        critical: {\n            type: BentoButton.props.critical.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * State of the button.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>,\n            default: BentoLoadingButtonState.START,\n            validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value),\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary\n         */\n        variant: {\n            type: BentoButton.props.variant.type,\n            default: 'primary',\n            validator: BentoButton.props.variant.validator,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\n\n    const conditionalClasses = computed(() => ({\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]:\n            props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        'b-loading-button--loading': props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]:\n            props.state === BentoLoadingButtonState.SUCCESS,\n        [`b-loading-button--inverse`]: props.inverse,\n    }));\n\n    const isInverseLoadingIndicator = computed(\n        () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse)\n    );\n    const isCritical = computed(\n        () =>\n            (props.critical && props.state === BentoLoadingButtonState.START) ||\n            props.state === BentoLoadingButtonState.FAIL\n    );\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        if (props.state !== BentoLoadingButtonState.LOADING) {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g.  when you have any sort of asynchronous action and are waiting for a response\n     *\n     * @example\n     * import { BentoLoadingButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLoadingButton },\n     *     template: `\n     *          <bento-loading-button state=\"loading\" variant=\"secondary\">\n     *              Loading\n     *          </bento-loading button>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./loading-button.scss\" />\n"],"names":["BentoLoadingButtonState","BentoLoadingButtonState2","__default__","conditionalClasses","computed","props","isInverseLoadingIndicator","isCritical","e","emit"],"mappings":";;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,OAAA,QAJQA,IAAAD,KAAA,CAAA,CAAA;ACwIR,MAAAE,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAC,EAAA,WAAAL,EAAA,SAAA,GAAAK,EAAA,UAAAL,EAAA,WAAA,CAAAK,EAAA;AAAA,MAEuB,6BAAAA,EAAA,UAAAL,EAAA,WAAA,CAAAK,EAAA;AAAA,MACyB,CAAA,qBAAAA,EAAA,WAAAL,EAAA,SAAA,GAAAK,EAAA,UAAAL,EAAA;AAAA,MAE3C,CAAA,2BAAA,GAAAK,EAAA;AAAA,IACP,EAAA,GAGzCC,IAAAF;AAAA,MAAkC,MAAAC,EAAA,YAAA,aAAA,CAAAA,EAAA,WAAAA,EAAA,YAAA,aAAAA,EAAA;AAAA,IACiE,GAEnGE,IAAAH;AAAA,MAAmB,MAAAC,EAAA,YAAAA,EAAA,UAAAL,EAAA,SAAAK,EAAA,UAAAL,EAAA;AAAA,IAG6B;wHAGhD,CAAAQ,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAH,EAAA,UAAAL,EAAA,WACIS,EAAA,SAAAD,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"loading-button.CoF1IhEU.js","sources":["../../src/components/button/components/loading-button/loading-button.types.ts","../../src/components/button/components/loading-button/loading-button.vue"],"sourcesContent":["export enum BentoLoadingButtonState {\n    START = 'start',\n    LOADING = 'loading',\n    SUCCESS = 'success',\n    FAIL = 'fail',\n}\n\nexport type BentoLoadingButtonIconState = Partial<{ [key in BentoLoadingButtonState]: string }>;\n","<template>\n    <bento-button\n        :critical=\"isCritical\"\n        :variant=\"variant\"\n        :condensed=\"condensed\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        class=\"b-loading-button\"\n        :class=\"conditionalClasses\"\n        @click.capture.stop=\"onClick\"\n    >\n        <slot></slot>\n        <template v-if=\"state !== 'start'\" #iconLeft>\n            <span class=\"b-loading-button__icon\" data-testid=\"loading-button-rotating-icon\">\n                <cross v-if=\"state === 'fail'\" svg-title=\"failed\" />\n                <checkmark v-else-if=\"state === 'success'\" svg-title=\"succeded\" />\n                <!-- TODO: Replace with new loading-indicator component -->\n                <bento-loading-indicator v-else-if=\"state === 'loading'\" small :inverse=\"isInverseLoadingIndicator\" />\n            </span>\n        </template>\n    </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType } from 'vue';\n    import { BentoLoadingButtonState } from './loading-button.types';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import BentoButton from '@/components/button/button.vue';\n    import Cross from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import Checkmark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Displays loading-button as critical\n         */\n        critical: {\n            type: BentoButton.props.critical.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * State of the button.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>,\n            default: BentoLoadingButtonState.START,\n            validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value),\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary\n         */\n        variant: {\n            type: BentoButton.props.variant.type,\n            default: 'primary',\n            validator: BentoButton.props.variant.validator,\n        },\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\n\n    const conditionalClasses = computed(() => ({\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]:\n            props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        'b-loading-button--loading': props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]:\n            props.state === BentoLoadingButtonState.SUCCESS,\n        [`b-loading-button--inverse`]: props.inverse,\n    }));\n\n    const isInverseLoadingIndicator = computed(\n        () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse)\n    );\n    const isCritical = computed(\n        () =>\n            (props.critical && props.state === BentoLoadingButtonState.START) ||\n            props.state === BentoLoadingButtonState.FAIL\n    );\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        if (props.state !== BentoLoadingButtonState.LOADING) {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g.  when you have any sort of asynchronous action and are waiting for a response\n     *\n     * @example\n     * import { BentoLoadingButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLoadingButton },\n     *     template: `\n     *          <bento-loading-button state=\"loading\" variant=\"secondary\">\n     *              Loading\n     *          </bento-loading button>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./loading-button.scss\" />\n"],"names":["BentoLoadingButtonState","BentoLoadingButtonState2","__default__","conditionalClasses","computed","props","isInverseLoadingIndicator","isCritical","e","emit"],"mappings":";;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,OAAA,QAJQA,IAAAD,KAAA,CAAA,CAAA;ACwIR,MAAAE,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA5CAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAC,EAAA,OAAA,IAAAL,EAAA,OAAA,EAAA,GAAAK,EAAA,UAAAL,EAAA,WAAA,CAAAK,EAAA;AAAA,MAEuB,6BAAAA,EAAA,UAAAL,EAAA,WAAA,CAAAK,EAAA;AAAA,MACyB,CAAA,qBAAAA,EAAA,OAAA,IAAAL,EAAA,OAAA,EAAA,GAAAK,EAAA,UAAAL,EAAA;AAAA,MAE3C,6BAAAK,EAAA;AAAA,IACP,EAAA,GAGzCC,IAAAF;AAAA,MAAkC,MAAAC,EAAA,YAAA,aAAA,CAAAA,EAAA,WAAAA,EAAA,YAAA,aAAAA,EAAA;AAAA,IACiE,GAEnGE,IAAAH;AAAA,MAAmB,MAAAC,EAAA,YAAAA,EAAA,UAAAL,EAAA,SAAAK,EAAA,UAAAL,EAAA;AAAA,IAG6B;wHAGhD,CAAAQ,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAH,EAAA,UAAAL,EAAA,WACIS,EAAA,SAAAD,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/loading-indicator.DXc7I1Lm.js

@@ -0,0 +1,48 @@
+import { defineComponent as t, onMounted as s, onUnmounted as i, computed as l } from "vue";
+import { n as r } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/loading-indicator.css";
+var e = /* @__PURE__ */ ((a) => (a.START = "loading-start", a.END = "loading-end", a))(e || {});
+const d = t({
+  name: "bento-loading-indicator",
+  props: {
+    /**
+     * Displays the loading indicator in a small size
+     */
+    small: { type: Boolean, default: !1 },
+    /**
+     * Displays the loading indicator in a large size
+     */
+    large: { type: Boolean, default: !1 },
+    /**
+     * Displays the loading indicator in a white variant
+     */
+    inverse: { type: Boolean, default: !1 }
+  },
+  emits: [e.START, e.END],
+  setup(a, { emit: n }) {
+    return s(() => n(e.START)), i(() => n(e.END)), {
+      conditionalClasses: l(() => ({
+        "b-loading-indicator--inverse": a.inverse,
+        "b-loading-indicator--small": a.small,
+        "b-loading-indicator--large": a.large
+      }))
+    };
+  }
+});
+var c = function() {
+  var n = this, o = n._self._c;
+  return n._self._setupProxy, o("div", { staticClass: "b-loading-indicator", class: n.conditionalClasses, attrs: { "aria-hidden": "true", "data-testid": "loading-indicator" } });
+}, m = [], f = /* @__PURE__ */ r(
+  d,
+  c,
+  m,
+  !1,
+  null,
+  "6d66904c"
+);
+const p = f.exports;
+export {
+  p as B,
+  e as a
+};
+//# sourceMappingURL=loading-indicator.DXc7I1Lm.js.map

package/dist/chunks/loading-indicator.DXc7I1Lm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-indicator.DXc7I1Lm.js","sources":["../../src/components/loading-indicator/loading-indicator.types.ts","../../src/components/loading-indicator/loading-indicator.vue"],"sourcesContent":["export enum BentoLoadingIndicatorEvent {\n    START = 'loading-start',\n    END = 'loading-end',\n}\n","<template>\n    <div class=\"b-loading-indicator\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"loading-indicator\" />\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, onUnmounted } from 'vue';\n    import { BentoLoadingIndicatorEvent } from './loading-indicator.types';\n\n    export default defineComponent({\n        name: 'bento-loading-indicator',\n        props: {\n            /**\n             * Displays the loading indicator in a small size\n             */\n            small: { type: Boolean, default: false },\n            /**\n             * Displays the loading indicator in a large size\n             */\n            large: { type: Boolean, default: false },\n            /**\n             * Displays the loading indicator in a white variant\n             */\n            inverse: { type: Boolean, default: false },\n        },\n        emits: [BentoLoadingIndicatorEvent.START, BentoLoadingIndicatorEvent.END],\n        setup(props, { emit }) {\n            onMounted(() => emit(BentoLoadingIndicatorEvent.START));\n\n            onUnmounted(() => emit(BentoLoadingIndicatorEvent.END));\n\n            const conditionalClasses = computed(() => ({\n                'b-loading-indicator--inverse': props.inverse,\n                'b-loading-indicator--small': props.small,\n                'b-loading-indicator--large': props.large,\n            }));\n\n            return {\n                conditionalClasses,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./loading-indicator.scss\" />\n"],"names":["BentoLoadingIndicatorEvent","BentoLoadingIndicatorEvent2","_sfc_main","defineComponent","props","emit","onMounted","onUnmounted","computed"],"mappings":";;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,iBACAA,EAAA,MAAA,eAFQA,IAAAD,KAAA,CAAA,CAAA;ACQZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA,EAAA,MAAA,SAAA,SAAA,GAAA;AAAA,EAIA;AAAA,EACA,OAAA,CAAAH,EAAA,OAAAA,EAAA,GAAA;AAAA,EACA,MAAAI,GAAA,EAAA,MAAAC,EAAA,GAAA;AAEA,WAAAC,EAAA,MAAAD,EAAAL,EAAA,KAAA,CAAA,GAEAO,EAAA,MAAAF,EAAAL,EAAA,GAAA,CAAA,GAQA;AAAA,MAAA,oBANAQ,EAAA,OAAA;AAAA,QAAA,gCAAAJ,EAAA;AAAA,QACA,8BAAAA,EAAA;AAAA,QACA,8BAAAA,EAAA;AAAA,MACA,EAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}