@adyen/bento-vue3 1.4.1 → 1.5.0

package/dist/chunks/{debounce.f8d92e44.js → keyboard-navigation.ca47dfa8.js}

@@ -1,6 +1,6 @@
-import { l as r } from "./events.58c00e6d.js";
+import { l as a } from "./events.58c00e6d.js";
 var t = /* @__PURE__ */ ((s) => (s.ARROW_DOWN = "keydown:arrow-down", s.ARROW_LEFT = "keydown:arrow-left", s.ARROW_RIGHT = "keydown:arrow-right", s.ARROW_UP = "keydown:arrow-up", s.END = "keydown:end", s.ENTER = "keydown:enter", s.ESCAPE = "keydown:escape", s.HOME = "keydown:home", s.PAGE_DOWN = "keydown:page-down", s.PAGE_UP = "keydown:page-up", s.SHIFT_PAGE_DOWN = "keydown:shift-page-down", s.SHIFT_PAGE_UP = "keydown:shift-page-up", s.TAB = "keydown:tab", s.SPACE = "keydown:space", s))(t || {});
-const w = (s) => (e) => {
+const d = (s) => (e) => {
   switch (e.key) {
     case "Esc":
     case "Escape":
@@ -46,26 +46,20 @@ const w = (s) => (e) => {
       s.dispatchEvent(new CustomEvent(t.END, { detail: e }));
       break;
   }
-}, a = (s, e) => {
-  e.keyDownListener = r(s, "keydown", w(s));
 }, E = (s, e) => {
+  e.keyDownListener = a(s, "keydown", d(s));
+}, c = (s, e) => {
   e.keyDownListener && e.keyDownListener();
-}, p = {
+}, r = {
   // Vue 2 Directive hooks
-  bind: a,
-  unbind: E,
+  bind: E,
+  unbind: c,
   // Vue 3 Directive hooks
-  beforeMount: a,
-  unmounted: E
-}, u = (s, e = 300) => {
-  let c;
-  return (...d) => {
-    c && clearTimeout(c), c = setTimeout(() => s(...d), e);
-  };
+  beforeMount: E,
+  unmounted: c
 };
 export {
   t as B,
-  p as a,
-  u as d
+  r as a
 };
-//# sourceMappingURL=debounce.f8d92e44.js.map
+//# sourceMappingURL=keyboard-navigation.ca47dfa8.js.map

package/dist/chunks/keyboard-navigation.ca47dfa8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard-navigation.ca47dfa8.js","sources":["../../../vue2/src/types/keyboard-navigation.ts","../../../vue2/src/directives/keyboard-navigation/keyboard-navigation.ts"],"sourcesContent":["export enum BentoKeyboardNavigationKeyDownEvent {\n    ARROW_DOWN = 'keydown:arrow-down',\n    ARROW_LEFT = 'keydown:arrow-left',\n    ARROW_RIGHT = 'keydown:arrow-right',\n    ARROW_UP = 'keydown:arrow-up',\n    END = 'keydown:end',\n    ENTER = 'keydown:enter',\n    ESCAPE = 'keydown:escape',\n    HOME = 'keydown:home',\n    PAGE_DOWN = 'keydown:page-down',\n    PAGE_UP = 'keydown:page-up',\n    SHIFT_PAGE_DOWN = 'keydown:shift-page-down',\n    SHIFT_PAGE_UP = 'keydown:shift-page-up',\n    TAB = 'keydown:tab',\n    SPACE = 'keydown:space',\n}\n","import { listen } from '@/utils/ts/events';\nimport { Binding } from './keyboard-navigation.types';\nimport { BentoKeyboardNavigationKeyDownEvent } from '@/types';\nimport type { DirectiveHook } from 'vue';\n\nconst onKeyEvent = (el: Element) => (event: KeyboardEvent) => {\n    switch (event.key) {\n        case 'Esc':\n        case 'Escape':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ESCAPE, { detail: event }));\n            break;\n        case 'Enter':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ENTER, { detail: event }));\n            break;\n        case 'Tab':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.TAB, { detail: event }));\n            break;\n        // Space\n        case ' ':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.SPACE, { detail: event }));\n            break;\n        case 'Right':\n        case 'ArrowRight':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_RIGHT, { detail: event }));\n            break;\n        case 'Left':\n        case 'ArrowLeft':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_LEFT, { detail: event }));\n            break;\n        case 'Up':\n        case 'ArrowUp':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_UP, { detail: event }));\n            break;\n        case 'Down':\n        case 'ArrowDown':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN, { detail: event }));\n            break;\n        case 'PageUp':\n            if (event.shiftKey) {\n                el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.SHIFT_PAGE_UP, { detail: event }));\n            } else {\n                el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.PAGE_UP, { detail: event }));\n            }\n            break;\n        case 'PageDown':\n            if (event.shiftKey) {\n                el.dispatchEvent(\n                    new CustomEvent(BentoKeyboardNavigationKeyDownEvent.SHIFT_PAGE_DOWN, { detail: event })\n                );\n            } else {\n                el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.PAGE_DOWN, { detail: event }));\n            }\n            break;\n        case 'Home':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.HOME, { detail: event }));\n            break;\n        case 'End':\n            el.dispatchEvent(new CustomEvent(BentoKeyboardNavigationKeyDownEvent.END, { detail: event }));\n            break;\n        default:\n            break;\n    }\n};\n\nconst bindDirective: DirectiveHook<Element> = (el, binding: Binding<undefined>) => {\n    // Register the listener cleanup function\n    // eslint-disable-next-line no-param-reassign, dot-notation\n    binding['keyDownListener'] = listen(el, 'keydown', onKeyEvent(el));\n};\n\nconst unbindDirective: DirectiveHook<Element> = (_, binding: Binding<undefined>) => {\n    if (binding.keyDownListener) {\n        binding.keyDownListener();\n    }\n};\n\nexport const BentoKeyboardNavigationDirective = {\n    // Vue 2 Directive hooks\n    bind: bindDirective,\n    unbind: unbindDirective,\n    // Vue 3 Directive hooks\n    beforeMount: bindDirective,\n    unmounted: unbindDirective,\n};\n"],"names":["BentoKeyboardNavigationKeyDownEvent","onKeyEvent","el","event","bindDirective","binding","listen","unbindDirective","_","BentoKeyboardNavigationDirective"],"mappings":";AAAY,IAAAA,sBAAAA,OACRA,EAAA,aAAa,sBACbA,EAAA,aAAa,sBACbA,EAAA,cAAc,uBACdA,EAAA,WAAW,oBACXA,EAAA,MAAM,eACNA,EAAA,QAAQ,iBACRA,EAAA,SAAS,kBACTA,EAAA,OAAO,gBACPA,EAAA,YAAY,qBACZA,EAAA,UAAU,mBACVA,EAAA,kBAAkB,2BAClBA,EAAA,gBAAgB,yBAChBA,EAAA,MAAM,eACNA,EAAA,QAAQ,iBAdAA,IAAAA,KAAA,CAAA,CAAA;ACKZ,MAAMC,IAAa,CAACC,MAAgB,CAACC,MAAyB;AAC1D,UAAQA,EAAM,KAAK;AAAA,IACf,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,QAAQ,EAAE,QAAQG,EAAO,CAAA,CAAC;AAC/F;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,OAAO,EAAE,QAAQG,EAAO,CAAA,CAAC;AAC9F;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,KAAK,EAAE,QAAQG,EAAO,CAAA,CAAC;AAC5F;AAAA,IAEJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,OAAO,EAAE,QAAQG,EAAO,CAAA,CAAC;AAC9F;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,aAAa,EAAE,QAAQG,EAAO,CAAA,CAAC;AACpG;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,YAAY,EAAE,QAAQG,EAAO,CAAA,CAAC;AACnG;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,UAAU,EAAE,QAAQG,EAAO,CAAA,CAAC;AACjG;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,YAAY,EAAE,QAAQG,EAAO,CAAA,CAAC;AACnG;AAAA,IACJ,KAAK;AACD,MAAIA,EAAM,WACHD,EAAA,cAAc,IAAI,YAAYF,EAAoC,eAAe,EAAE,QAAQG,EAAO,CAAA,CAAC,IAEnGD,EAAA,cAAc,IAAI,YAAYF,EAAoC,SAAS,EAAE,QAAQG,EAAO,CAAA,CAAC;AAEpG;AAAA,IACJ,KAAK;AACD,MAAIA,EAAM,WACHD,EAAA;AAAA,QACC,IAAI,YAAYF,EAAoC,iBAAiB,EAAE,QAAQG,GAAO;AAAA,MAAA,IAGvFD,EAAA,cAAc,IAAI,YAAYF,EAAoC,WAAW,EAAE,QAAQG,EAAO,CAAA,CAAC;AAEtG;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,MAAM,EAAE,QAAQG,EAAO,CAAA,CAAC;AAC7F;AAAA,IACJ,KAAK;AACE,MAAAD,EAAA,cAAc,IAAI,YAAYF,EAAoC,KAAK,EAAE,QAAQG,EAAO,CAAA,CAAC;AAC5F;AAAA,EAGR;AACJ,GAEMC,IAAwC,CAACF,GAAIG,MAAgC;AAG/E,EAAAA,EAAQ,kBAAqBC,EAAOJ,GAAI,WAAWD,EAAWC,CAAE,CAAC;AACrE,GAEMK,IAA0C,CAACC,GAAGH,MAAgC;AAChF,EAAIA,EAAQ,mBACRA,EAAQ,gBAAgB;AAEhC,GAEaI,IAAmC;AAAA;AAAA,EAE5C,MAAML;AAAA,EACN,QAAQG;AAAA;AAAA,EAER,aAAaH;AAAA,EACb,WAAWG;AACf;"}

package/dist/chunks/{listbox-option-tag.ffe70226.js → listbox-option-tag.fa70334e.js}

@@ -1,6 +1,6 @@
 import { defineComponent as m, toRefs as O, computed as n, resolveComponent as c, openBlock as i, createElementBlock as d, createVNode as b, createBlock as v, withCtx as f, createTextVNode as g, toDisplayString as y, createCommentVNode as h, createElementVNode as C } from "vue";
-import { A as L, u as $, B as o, a as E } from "./index.450b70d5.js";
-import { B } from "./index.77c651df.js";
+import { A as L, u as $, B as o, a as E } from "./index.dd20095f.js";
+import { B } from "./index.32ed68b7.js";
 import { _ as A } from "./_plugin-vue_export-helper.dad06003.js";
 import { BentoTag as I } from "../tag.js";
 import "../assets/listbox-option-tag.css";
@@ -126,4 +126,4 @@ export {
   M as B,
   W as L
 };
-//# sourceMappingURL=listbox-option-tag.ffe70226.js.map
+//# sourceMappingURL=listbox-option-tag.fa70334e.js.map

package/dist/chunks/{listbox-option-tag.ffe70226.js.map → listbox-option-tag.fa70334e.js.map}

@@ -1 +1 @@
-{"version":3,"file":"listbox-option-tag.ffe70226.js","sources":["../../../vue2/src/components/internal/avatar/avatar.vue","../../../vue2/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","openBlock","createElementBlock","_ctx","createBlock","_component_bento_typography","_sfc_main","BentoTag","createElementVNode","_hoisted_2","createVNode","_component_bento_tag"],"mappings":";;;;;;AA+BI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACqC,OAAA;AAAA;AAAA;AAAA;AAAA,IACpC,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MASU,MAAA;AAAA,MACA,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,KAAA;AAAA,MAKK,MAAA;AAAA,MACK,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA;AAGI,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;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;AAGjC,WAAA;AAAA;AAAA,MAAO,yBAAAC;AAAA;AAAA,MAEH,mBAAAT;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;AArGuB,SAAAI,EAAA,GAAAC,EAAA,OAAA;AAAA,IAA6B,OAAA;AAAA;EAM9C,GAAA;AAAA;MAH6B,KAAAC,EAAA;AAAA,MACjB,UAAAA,EAAA;AAAA,MACF,SAAAA,EAAA,wBAAA;AAAA,MAEa,OAAAA,EAAA;AAAA,IAAA,GAAA,MAAA,GAAA,CAAA,OAAA,YAAA,WAAA,OAAA,CAAA;AAAA,IAENA,EAAA,wBAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAFuC,KAAA;AAAA,MAAI,OAAA;AAAA,MAAc,IAAA;AAAA;;;;;;;;;mFCWhFC,IAAArB,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA;AAAA,IACM,UAAAsB;AAAA,IACR,iBAAApB;AAAA,EACA;AAAA,EACJ,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACO,QAAA;AAAA,MAKK,MAAA;AAAA,MACE,UAAA;AAAA,IACI;AAAA,EACd;AAAA,EACJ,MAAAC,GAAA;AAII,WAAA;AAAA;AAAA,MAAO,SAFPI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;;;IAxC2GoB,EAAA,QAAAC,GAAA;AAAA,MAAvDC,EAAAC,GAAA;AAAA,QAA8B,OAAA;AAAA,QAAY,OAAAR,EAAA,OAAA,MAAA,SAAA;AAAA;MAElE,GAAA,MAAA,GAAA,CAAA,SAAA,SAAA,CAAA;AAAA,IAAY,CAAA;AAAA,IAAWA,EAAA,OAAA,SAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAAA,KAAA;AAAA,MAAM,IAAA;AAAA;;;;;;;;;;"}
+{"version":3,"file":"listbox-option-tag.fa70334e.js","sources":["../../../vue2/src/components/internal/avatar/avatar.vue","../../../vue2/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","openBlock","createElementBlock","_ctx","createBlock","_component_bento_typography","_sfc_main","BentoTag","createElementVNode","_hoisted_2","createVNode","_component_bento_tag"],"mappings":";;;;;;AA+BI,MAAAA,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACqC,OAAA;AAAA;AAAA;AAAA;AAAA,IACpC,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MASU,MAAA;AAAA,MACA,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA,IACd,KAAA;AAAA,MAKK,MAAA;AAAA,MACK,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,MAAAC,GAAA;AAGI,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;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;AAGjC,WAAA;AAAA;AAAA,MAAO,yBAAAC;AAAA;AAAA,MAEH,mBAAAT;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACJ;AAER,CAAA;;;;AArGuB,SAAAI,EAAA,GAAAC,EAAA,OAAA;AAAA,IAA6B,OAAA;AAAA;EAM9C,GAAA;AAAA;MAH6B,KAAAC,EAAA;AAAA,MACjB,UAAAA,EAAA;AAAA,MACF,SAAAA,EAAA,wBAAA;AAAA,MAEa,OAAAA,EAAA;AAAA,IAAA,GAAA,MAAA,GAAA,CAAA,OAAA,YAAA,WAAA,OAAA,CAAA;AAAA,IAENA,EAAA,wBAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAFuC,KAAA;AAAA,MAAI,OAAA;AAAA,MAAc,IAAA;AAAA;;;;;;;;;mFCWhFC,IAAArB,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA;AAAA,IACM,UAAAsB;AAAA,IACR,iBAAApB;AAAA,EACA;AAAA,EACJ,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACO,QAAA;AAAA,MAKK,MAAA;AAAA,MACE,UAAA;AAAA,IACI;AAAA,EACd;AAAA,EACJ,MAAAC,GAAA;AAII,WAAA;AAAA;AAAA,MAAO,SAFPI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA,IAII;AAAA,EACJ;AAER,CAAA;;;;;IAxC2GoB,EAAA,QAAAC,GAAA;AAAA,MAAvDC,EAAAC,GAAA;AAAA,QAA8B,OAAA;AAAA,QAAY,OAAAR,EAAA,OAAA,MAAA,SAAA;AAAA;MAElE,GAAA,MAAA,GAAA,CAAA,SAAA,SAAA,CAAA;AAAA,IAAY,CAAA;AAAA,IAAWA,EAAA,OAAA,SAAAF,EAAA,GAAAG,EAAAC,GAAA;AAAA,MAAA,KAAA;AAAA,MAAM,IAAA;AAAA;;;;;;;;;;"}

package/dist/chunks/{listbox.f535a736.js → listbox.4205c0de.js}

@@ -1,12 +1,13 @@
 import { computed as u, defineComponent as z, openBlock as g, createElementBlock as O, mergeProps as U, withKeys as ne, renderSlot as M, toDisplayString as $, createCommentVNode as j, pushScopeId as fe, popScopeId as Ee, createElementVNode as B, resolveComponent as S, createBlock as I, toHandlerKey as w, withCtx as C, normalizeProps as F, guardReactiveProps as K, createVNode as L, createTextVNode as D, withDirectives as X, vShow as ae, ref as R, onMounted as Ge, toRef as xe, resolveDirective as de, toHandlers as J, Fragment as te, renderList as W, createSlots as Q, normalizeClass as ie, watch as Ye } from "vue";
-import { B as N, a as re, d as Fe } from "./debounce.f8d92e44.js";
-import { B as ee } from "./index.77c651df.js";
-import { BentoLoadingIndicator as Ke } from "../loading-indicator.js";
+import { B as N, a as re } from "./keyboard-navigation.ca47dfa8.js";
+import { B as ee } from "./index.32ed68b7.js";
+import { BentoLoadingIndicator as Fe } from "../loading-indicator.js";
 import { u as ce } from "./i18n.6c402773.js";
+import { d as Ke } from "./debounce.b5ef6acf.js";
 import { _ as H } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as ue } from "./checkbox.17462cb0.js";
-import { a as He, C as We } from "./chevron-up.c03b58f8.js";
-import { B as ze, a as be } from "./loading-button.bc6e3967.js";
+import { B as ue } from "./checkbox.638bab98.js";
+import { C as He, a as We } from "./chevron-up.9bf21068.js";
+import { B as ze, a as be } from "./loading-button.41c15584.js";
 import "../assets/listbox.css";
 const ye = (e, t, v, p) => {
   const n = u(
@@ -981,7 +982,7 @@ const pe = /* @__PURE__ */ H(St, [["render", Tt], ["__scopeId", "data-v-8c62bb32
     BentoListboxSingleSelect: rt,
     BentoListboxMultiSelect: pe,
     BentoTypography: ee,
-    BentoLoadingIndicator: Ke,
+    BentoLoadingIndicator: Fe,
     BentoLoadingButton: ze
   },
   directives: { BentoKeyboardNavigationDirective: re },
@@ -1081,7 +1082,7 @@ const pe = /* @__PURE__ */ H(St, [["render", Tt], ["__scopeId", "data-v-8c62bb32
       t(T, G);
     }, f = () => {
       t(o.SHOW_MORE);
-    }, m = Fe(() => {
+    }, m = Ke(() => {
       const T = n.value, G = T.scrollTop + T.clientHeight >= T.scrollHeight;
       e.hasMoreItems && G && !e.loading && f();
     }), A = u(() => {
@@ -1202,11 +1203,11 @@ function Bt(e, t, v, p, n, b) {
     [s]
   ]);
 }
-const Gt = /* @__PURE__ */ H(Lt, [["render", Bt], ["__scopeId", "data-v-336a01a3"]]);
+const xt = /* @__PURE__ */ H(Lt, [["render", Bt], ["__scopeId", "data-v-336a01a3"]]);
 export {
-  Gt as B,
+  xt as B,
   tt as C,
   o as a,
   q as b
 };
-//# sourceMappingURL=listbox.f535a736.js.map
+//# sourceMappingURL=listbox.4205c0de.js.map