@adyen/bento-vue2 1.7.0 → 1.8.0

package/dist/chunks/{listbox-option-tag.6a09e8e2.js → listbox-option-tag.97af47fc.js}

@@ -1,7 +1,6 @@
 import { defineComponent as i, toRefs as m, computed as r } from "vue";
-import { A as v, u as b, B as n, a as f } from "./index.a201f750.js";
+import { A as v, u as b, B as n, a as f } from "./index.89942d3a.js";
 import { B as _ } from "./index.965ac1af.js";
-import "./index.af05ced4.js";
 import { n as c } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import { BentoTag as d } from "../tag.js";
 import "../assets/listbox-option-tag.css";
@@ -63,7 +62,7 @@ var y = function() {
   null,
   null
 );
-const j = x.exports, A = i({
+const U = x.exports, A = i({
   name: "listbox-tag-option",
   components: {
     BentoTag: d,
@@ -99,9 +98,9 @@ var O = function() {
   null,
   null
 );
-const q = B.exports;
+const j = B.exports;
 export {
-  j as B,
-  q as L
+  U as B,
+  j as L
 };
-//# sourceMappingURL=listbox-option-tag.6a09e8e2.js.map
+//# sourceMappingURL=listbox-option-tag.97af47fc.js.map

package/dist/chunks/{listbox-option-tag.6a09e8e2.js.map → listbox-option-tag.97af47fc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"listbox-option-tag.6a09e8e2.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 lang=\"ts\">\n    import { computed, defineComponent, 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    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoUserProfile } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoUserProfile },\n     *     template: `\n     *          <bento-user-profile :src=\"userAvatarSrc\" username=\"Jane\" />\n     */\n    export default defineComponent({\n        name: 'bento-avatar',\n        components: { AvatarImage, BentoTypography },\n        props: {\n            /**\n             * Displays the user profile without the label.\n             */\n            iconOnly: {\n                type: Boolean,\n                default: false,\n            },\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: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n        },\n\n        setup(props) {\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\n            return {\n                // Enums\n                BentoAvatarImageVariant,\n\n                // Values\n                computedAriaLabel,\n                computedUsername,\n                avatarColor,\n            };\n        },\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":["_sfc_main$1","defineComponent","AvatarImage","BentoTypography","props","username","toRefs","computedAriaLabel","computed","computedUsername","initials","useInitials","charCode","avatarColor","rangeStep","BentoAvatarImageColor","BentoAvatarImageVariant","_sfc_main","BentoTag"],"mappings":";;;;;;;AA+BA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MASA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,KAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAGA,UAAA,EAAA,UAAAC,EAAA,IAAAC,EAAAF,CAAA,GAEAG,IAAAC,EAAA,MAAAJ,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAK,IAAAD,EAAA,MAAAJ,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAM,IAAAC,EAAAN,CAAA,GAGAO,IAAAJ,EAAA,MAAAE,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAG,IAAAL,EAAA,MAAA;AAGA,YAAAM,IAAA,KADA,OAAA,KAAAC,CAAA,EAAA;AAGA,aAAAH,EAAA,SAAAE,IACAC,EAAA,SAEAH,EAAA,SAAAE,IAAA,IACAC,EAAA,OAEAH,EAAA,SAAAE,IAAA,IACAC,EAAA,QAEAA,EAAA;AAAA,IAAA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,yBAAAC;AAAA;AAAA,MAEA,mBAAAT;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;qBCnFAI,IAAAhB,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAiB;AAAA,IACA,iBAAAf;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"listbox-option-tag.97af47fc.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 lang=\"ts\">\n    import { computed, defineComponent, 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    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoUserProfile } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoUserProfile },\n     *     template: `\n     *          <bento-user-profile :src=\"userAvatarSrc\" username=\"Jane\" />\n     */\n    export default defineComponent({\n        name: 'bento-avatar',\n        components: { AvatarImage, BentoTypography },\n        props: {\n            /**\n             * Displays the user profile without the label.\n             */\n            iconOnly: {\n                type: Boolean,\n                default: false,\n            },\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: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n        },\n\n        setup(props) {\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\n            return {\n                // Enums\n                BentoAvatarImageVariant,\n\n                // Values\n                computedAriaLabel,\n                computedUsername,\n                avatarColor,\n            };\n        },\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":["_sfc_main$1","defineComponent","AvatarImage","BentoTypography","props","username","toRefs","computedAriaLabel","computed","computedUsername","initials","useInitials","charCode","avatarColor","rangeStep","BentoAvatarImageColor","BentoAvatarImageVariant","_sfc_main","BentoTag"],"mappings":";;;;;;AA+BA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MASA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,KAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAGA,UAAA,EAAA,UAAAC,EAAA,IAAAC,EAAAF,CAAA,GAEAG,IAAAC,EAAA,MAAAJ,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAK,IAAAD,EAAA,MAAAJ,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAM,IAAAC,EAAAN,CAAA,GAGAO,IAAAJ,EAAA,MAAAE,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAG,IAAAL,EAAA,MAAA;AAGA,YAAAM,IAAA,KADA,OAAA,KAAAC,CAAA,EAAA;AAGA,aAAAH,EAAA,SAAAE,IACAC,EAAA,SAEAH,EAAA,SAAAE,IAAA,IACAC,EAAA,OAEAH,EAAA,SAAAE,IAAA,IACAC,EAAA,QAEAA,EAAA;AAAA,IAAA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,yBAAAC;AAAA;AAAA,MAEA,mBAAAT;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;qBCnFAI,IAAAhB,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAiB;AAAA,IACA,iBAAAf;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{listbox.73c38f38.js → listbox.d039b178.js}

@@ -7,10 +7,9 @@ import { d as fe } from "./debounce.b5ef6acf.js";
 import { C as ge } from "./checkmark.78f3ed9c.js";
 import { B, a as q } from "./keyboard-navigation.ca47dfa8.js";
 import { n as N } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { B as j } from "./checkbox.5343e28e.js";
-import "./index.af05ced4.js";
+import { B as j } from "./checkbox.2277450e.js";
 import { C as ye, a as Ee } from "./chevron-up.674ec2e5.js";
-import { B as Se, a as H } from "./loading-button.c65682d6.js";
+import { B as Se, a as H } from "./loading-button.9a9cbbad.js";
 import { o as xe } from "./resize.a041304d.js";
 import "../assets/listbox.css";
 const ee = (t, e, l, s) => {
@@ -1054,10 +1053,10 @@ var lt = function() {
   null,
   null
 );
-const Et = nt.exports;
+const yt = nt.exports;
 export {
-  Et as B,
+  yt as B,
   i as a,
   P as b
 };
-//# sourceMappingURL=listbox.73c38f38.js.map
+//# sourceMappingURL=listbox.d039b178.js.map