@adyen/bento-vue2 1.9.0 → 1.10.0

package/dist/chunks/listbox.163433c5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox.163433c5.js","sources":["../../src/composables/use-checkbox-select-all/use-checkbox-select-all.ts","../../src/composables/use-virtual-list/use-virtual-list.ts","../../src/types/listbox.ts","../../src/components/internal/listbox/components/listbox-single-select/components/listbox-single-select-category/listbox-single-select-category.vue","../../src/components/internal/listbox/components/listbox-option/listbox-option.vue","../../src/components/internal/listbox/components/listbox-single-select-option/listbox-single-select-option.vue","../../src/components/internal/listbox/composables/useListboxKeyboardNavigation.ts","../../src/components/internal/listbox/components/listbox-single-select/listbox-single-select.vue","../../src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/components/listbox-multi-select-category/listbox-multi-select-category.types.ts","../../src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/components/listbox-multi-select-category/listbox-multi-select-category.vue","../../src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/listbox-multi-select-options.types.ts","../../src/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/listbox-multi-select-options.vue","../../src/components/internal/listbox/composables/use-multi-level-items/use-multi-level-items.ts","../../src/components/internal/listbox/components/listbox-multi-select/listbox-multi-select.vue","../../src/components/internal/listbox/listbox.vue"],"sourcesContent":["import { computed } from 'vue';\nimport type { ComputedRef } from 'vue';\nimport type { BentoListboxMultiSelectValue, Fn } from '@/types';\nimport { BentoListboxOptions } from '@/types';\n\n/**\n * Callback function that alllows to select all the items when called\n * @callback selectAllCallback\n */\n\n/**\n * Callback function that alllows to select all the items when called\n * @callback unselectAllCallback\n */\n\n/**\n * @typedef {Object} UseCheckboxSelectAll\n * @property {Ref<boolean>} isAllSelected - Indicates if all values are selected. Pass this to the :value property.\n * @property {Ref<boolean>} isIndeterminate - Indicates if it is in an indeterminated state (not all values are selected nor unselected). Pass this to the :indeterminate property.\n * @property {(selectedValue: boolean) => void} toggleSelectAll - Handles the select all flow, selects or unselects all and nullifies the indeterminated state. Pass this to the @input method.\n */\n\n/**\n * Composable to handle a 3 way checkbox state that allows to manage\n * a \"select all\", \"unselect all\" and an intermediate state where\n * not all are selected.\n *\n * @example\n * const checkboxVModelRef = ref<number[]>([]);\n *\n * const { isAllSelected, isIndeterminate, toggleSelectAll, updateIndeterminate } = useCheckboxSelectAll(\n *    checkboxVModelRef,\n *    () => { checkboxVModelRef.value = [...] // select all logic },\n *    () => { checkboxVModelRef.value = [] // unselect all logic },\n * );\n * toggleSelectAll(true|false); // Hook this to the @input method\n * updateIndeterminate(totalOfAvailableItems);\n *\n *\n * @param {ComputedRef<BentoListboxMultiSelectValue>} selectedItemsList - Reference to the list of selected values\n * @param {ComputedRef<BentoListboxOptions>} items - Reference to the list of all available items in the dropdown\n * @param {selectAllCallback} selectAll - Callback function that alllows to select all the items when called\n * @param {unselectAllCallback} unselectAll - Callback function that alllows to select all the items when called\n * @returns {UseCheckboxSelectAll} Values to be set to the bento-checkbox value and indeterminate props, as well as functions to update them accordingly\n *\n */\nexport const useCheckboxSelectAll = (\n    selectedItemsList: ComputedRef<BentoListboxMultiSelectValue>,\n    items: ComputedRef<BentoListboxOptions>,\n    selectAll: Fn,\n    unselectAll: Fn\n) => {\n    const isAllSelected = computed(\n        () => !!selectedItemsList.value?.length && selectedItemsList.value?.length === items.value.length\n    );\n    const isIndeterminate = computed(() => {\n        // eslint-disable-next-line eqeqeq\n        if (selectedItemsList.value == undefined || selectedItemsList.value.length === 0) {\n            return false;\n        }\n\n        return selectedItemsList.value?.length !== items.value.length;\n    });\n\n    const toggleSelectAll = (selectedValue: boolean) => {\n        if (selectedValue) {\n            selectAll();\n        } else {\n            unselectAll();\n        }\n    };\n\n    return {\n        isAllSelected,\n        isIndeterminate,\n\n        toggleSelectAll,\n    };\n};\n","import { computed, onMounted, onUnmounted, Ref, ref, watch } from 'vue';\nimport type {\n    UseVirtualListContainerProps,\n    UseVirtualListOptions,\n    UseVirtualListWrapperProps,\n} from './use-virtual-list.types';\nimport { observeSizeOfElement } from '../../utils/ts/resize';\n\n/**\n * Sets up a virtual scrolling functionality on a container element and a list of items to virtually scroll over.\n * This composables returns the containerProps and wrapperProps objects that should be v-binded onto the container and wrapper elements\n * of the list you wish to virtually scroll.\n *\n * This will return a filtered down list object the user can render based on how much the user has scrolled on the container.\n *\n * @usage\n * <template>\n *  <div v-bind=\"containerProps\" @scroll=\"onScroll\">\n *    <ul v-bind=\"wrapperProps\">\n *      <li v-for=\"item in list\" :key=\"item.index\" style=\"height: 22px\">\n *        {{ item.label }}\n *      </li>\n *    </ul>\n *  </div>\n * </template>\n *\n * <script setup lang=\"ts\"\n * import { useVirtualList } from '@adyen/bento-vue2';\n *\n * const DEFAULT_OPTIONS: { label: string }[] = new Array(100)\n *       .fill(0)\n *       .map((_, index) => ({ label: `Option ${index + 1}` }));\n * const ITEMS = ref(DEFAULT_OPTIONS);\n * const ITEM_HEIGHT = 30;\n *\n * const { containerProps, wrapperProps, list, onScroll } = useVirtualList(ITEMS, { itemHeight: ITEM_HEIGHT });\n * </script>\n *\n *\n * @param items - a reference to a list of items to virtually scroll over.\n * @param options - customises how the Virtual scroller list functions.\n * @param options.itemHeight - the height in pixel or a function that returns the height in pixels for each item.\n * @param options.overscan - number of pre-rendered DOM nodes. Prevents whitespace between items if you scroll very quickly.\n * @param options.prefixHeight - the prefix height of elements present the scrollable area but not present in the items property.\n * @param options.disabled - if set to true, disables the virtual scrolling functionality.\n */\nexport function useVirtualList<T>(\n    items: Ref<T[]>,\n    { disabled, itemHeight, overscan = 5, prefixHeight }: UseVirtualListOptions\n) {\n    const containerRef = ref<HTMLElement | null>(null);\n    const list = ref<T[]>([]) as Ref<T[]>;\n    const startIndex = ref(0);\n    const endIndex = ref(0);\n    const containerHeight = ref(0);\n    let listObserver;\n\n    const wrapperProps = computed<UseVirtualListWrapperProps>(() => {\n        const totalHeight =\n            typeof itemHeight === 'number'\n                ? items.value.length * itemHeight\n                : items.value.reduce((sum, _, index) => sum + itemHeight(index), 0);\n\n        const offSetTop =\n            typeof itemHeight === 'number'\n                ? startIndex.value * itemHeight\n                : items.value.slice(0, startIndex.value).reduce((sum, _, i) => sum + itemHeight(i), 0);\n\n        return {\n            style: {\n                marginTop: `${offSetTop}px`,\n                height: `${totalHeight - offSetTop}px`,\n            },\n        };\n    });\n\n    /**\n     * Gets the offset for the first item to show within the visible area.\n     * @returns offset number.\n     */\n    const getOffset = () => {\n        const prefixHeightIfSet = prefixHeight?.value ?? 0;\n        const scrollTop = Math.max(containerRef.value.scrollTop - prefixHeightIfSet, 0);\n        if (typeof itemHeight === 'number') {\n            return Math.floor(scrollTop / itemHeight);\n        }\n\n        let sum = 0;\n        let offset = 0;\n\n        for (let i = 0; i < items.value.length; i += 1) {\n            const size = itemHeight(i);\n            sum += size;\n            if (sum >= scrollTop) {\n                offset = i;\n                break;\n            }\n        }\n        return offset;\n    };\n\n    /**\n     * Gets the visible number of items based on the container size and item heights.\n     * @returns visible number of items.\n     */\n    const getVisibileNumberOfItems = () => {\n        containerHeight.value = containerRef.value.clientHeight;\n        if (typeof itemHeight === 'number') {\n            return Math.ceil(containerHeight.value / itemHeight);\n        }\n\n        const start = startIndex.value ?? 0;\n        let sum = 0;\n        let capacity = 0;\n        for (let i = start; i < items.value.length; i += 1) {\n            const size = itemHeight(i);\n            sum += size;\n            capacity = i;\n            if (sum > containerHeight.value) {\n                break;\n            }\n        }\n        return capacity - start;\n    };\n\n    const updateVisibleItems = () => {\n        if (containerRef.value) {\n            const visibleCount = getVisibileNumberOfItems();\n            startIndex.value = getOffset();\n            endIndex.value = Math.min(startIndex.value + visibleCount + overscan, items.value.length);\n            list.value = items.value.slice(startIndex.value, endIndex.value);\n        }\n    };\n\n    const onScroll = () => {\n        updateVisibleItems();\n    };\n\n    if (!disabled) {\n        onMounted(() => {\n            if (containerRef.value) {\n                containerHeight.value = containerRef.value.clientHeight;\n                // When the listbox opens we need to update the height\n                listObserver = observeSizeOfElement(containerRef.value, ({ clientHeight }) => {\n                    containerHeight.value = clientHeight;\n                    updateVisibleItems();\n                });\n                updateVisibleItems();\n            }\n        });\n\n        onUnmounted(() => {\n            listObserver?.disconnect();\n        });\n\n        watch(\n            () => items.value,\n            () => {\n                updateVisibleItems();\n            }\n        );\n    }\n\n    const containerProps: UseVirtualListContainerProps = {\n        ref: containerRef,\n        style: { overflowY: 'auto' },\n    };\n\n    if (disabled) {\n        return {\n            containerRef,\n            containerProps,\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            onScroll: () => {},\n            list: items,\n        };\n    }\n\n    return {\n        containerRef,\n        containerProps,\n        onScroll,\n        list,\n        wrapperProps,\n    };\n}\n","import { BentoSearchBarItem } from '@/components/search-bar';\nimport { BentoEmptyState } from '@/components/empty-state';\nimport { OmitStrict } from './omit-strict';\nimport { BentoButtonActionObject } from '@/components/button';\nimport { UseVirtualListItemHeight } from '@/composables/use-virtual-list';\n\nexport type BentoListboxValue = string | number;\n\nexport type BentoListboxMultiSelectValue = BentoListboxValue[];\n\nexport interface BentoListboxOptionItem extends BentoSearchBarItem {\n    data?: unknown;\n    description?: string;\n    value: BentoListboxValue;\n    items?: Array<BentoListboxOptionItem>; // Reference itself for multi-level options\n}\n\nexport type BentoListboxSelectedValue = BentoListboxValue | BentoListboxMultiSelectValue;\n\nexport type BentoListboxOptions = Array<BentoListboxOptionItem>;\n\nexport type BentoListboxIsOptionDisabled = undefined | ((optionValue: BentoListboxOptionItem) => boolean);\n\nexport enum BentoListboxEvent {\n    SELECT = 'select',\n    SHOW_MORE = 'show-more',\n    ESCAPE = 'escape-pressed',\n    CLICK = 'click',\n    ENTER = 'enter-pressed',\n    SPACE = 'space-pressed',\n    TAB = 'tab-pressed',\n    CLOSE_DROPDOWN = 'close-dropdown',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoListboxLazyLoadType {\n    AUTOMATIC = 'automatic',\n    BUTTON = 'button',\n    NONE = 'none',\n}\n\nexport interface BentoListboxSearchOptions {\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime?: number;\n\n    /**\n     * The event that triggers upon user filtering the listbox items.\n     */\n    searchEvent: (searchValue: string) => void;\n}\n\nexport type BentoListboxEmptyStateProps = { action: { icon?: any } & BentoButtonActionObject } & OmitStrict<\n    InstanceType<typeof BentoEmptyState>['$props'],\n    'variant' | 'image' | 'description'\n>;\n\nexport type BentoListboxVirtulisationOptions = boolean | { itemHeight: UseVirtualListItemHeight };\n","<template>\n    <div class=\"b-listbox-single-select-category\">\n        <bento-typography variant=\"caption\" el=\"span\" class=\"b-listbox-single-select-category__label-text\">\n            {{ categoryLabel }}\n        </bento-typography>\n        <div>\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n\n    export default defineComponent({\n        name: 'bento-listbox-static-category',\n        components: {\n            BentoTypography,\n        },\n        props: {\n            /**\n             * Category label text\n             */\n            categoryLabel: {\n                type: String,\n                required: true,\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-single-select-category.scss\" />\n","<template>\n    <label\n        class=\"b-listbox-option\"\n        role=\"option\"\n        :class=\"conditionalClasses\"\n        v-bind=\"$attrs\"\n        @click=\"onClick\"\n        @keydown.enter=\"onOptionSelected(BentoListboxEvent.ENTER, $event)\"\n        @keydown.space=\"onOptionSelected(BentoListboxEvent.SPACE, $event)\"\n        @keydown.tab=\"onOptionSelected(BentoListboxEvent.TAB, $event)\"\n    >\n        <slot></slot>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent } from 'vue';\n    import { BentoKeyboardNavigationKeyDownEvent, BentoListboxEvent } from '@/types';\n\n    /**\n     * listbox option wrapper.\n     * Contains only styles and allows the Multi-Select and Single-Select DRY the styles.\n     *\n     * Options and Attributes are inherited (`inheritAttrs: true`)\n     *\n     * @example\n     * <bento-listbox-option\n     *    ...props\n     *    ...attrs\n     * />\n     */\n    export default defineComponent({\n        name: 'bento-listbox-option',\n        props: {\n            /**\n             * Setting this property to true will disable the option.\n             */\n            disabled: { type: Boolean, default: false },\n\n            /**\n             * Indicates if the value is selected. Only one element can be selected at a time.\n             */\n            selected: { type: Boolean, default: false },\n        },\n        emits: [BentoListboxEvent.CLICK, BentoListboxEvent.ENTER, BentoListboxEvent.SPACE, BentoListboxEvent.TAB],\n        setup(props, { emit }) {\n            const conditionalClasses = computed(() => ({\n                'b-listbox-option--disabled': props.disabled,\n                'b-listbox-option--selected': props.selected,\n            }));\n\n            const onClick = (e: Event) => {\n                emit(BentoListboxEvent.CLICK, e);\n            };\n\n            const onOptionSelected = (eventName, e: Event) => {\n                emit(eventName, e);\n            };\n\n            return {\n                // Enums\n                BentoKeyboardNavigationKeyDownEvent,\n                BentoListboxEvent,\n\n                // Values\n                conditionalClasses,\n\n                // Events\n                onClick,\n                onOptionSelected,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-option.scss\" />\n","<template>\n    <bento-listbox-option\n        class=\"b-listbox-single-select-option\"\n        :disabled=\"disabled\"\n        :selected=\"selected\"\n        :aria-selected=\"ariaSelected\"\n        :aria-disabled=\"ariaDisabled\"\n        :tabindex=\"tabIndex\"\n        @click=\"onOptionSelected(BentoListboxEvent.SELECT)\"\n        @[BentoListboxEvent.ENTER]=\"onOptionSelected(BentoListboxEvent.ENTER)\"\n        @[BentoListboxEvent.SPACE]=\"onOptionSelected(BentoListboxEvent.SPACE)\"\n        @[BentoListboxEvent.TAB]=\"onOptionSelected(BentoListboxEvent.TAB)\"\n    >\n        <slot v-bind=\"option\">\n            <span class=\"b-listbox-single-select-option__text\">\n                <bento-typography el=\"span\">{{ option.label }}</bento-typography>\n                <bento-typography\n                    v-if=\"option.description\"\n                    class=\"b-listbox-single-select-option__description\"\n                    el=\"span\"\n                >\n                    {{ option.description }}\n                </bento-typography>\n            </span>\n        </slot>\n        <span class=\"b-listbox-single-select-option__check-icon\">\n            <checkmark-icon v-show=\"selected\" svg-title=\"selected\" />\n        </span>\n    </bento-listbox-option>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoListboxOption } from '../listbox-option';\n    import { BentoListboxEvent, BentoListboxOptionItem } from '@/types';\n    import CheckmarkIcon from '@adyen/ui-assets-icons-16/vue/checkmark';\n\n    /**\n     * Listbox option element.\n     *\n     * @example\n     * <bento-listbox-single-select-option\n     *      v-for=\"option in options\"\n     *      :key=\"option.value\"\n     *      :option=\"option\"\n     *      :selected=\"option.selected\"\n     *      @select=\"onOptionSelected\"\n     * />\n     */\n    export default defineComponent({\n        name: 'bento-listbox-single-select-option',\n        components: {\n            BentoListboxOption,\n            BentoTypography,\n            CheckmarkIcon,\n        },\n        props: {\n            /**\n             * Setting this property to true will disable the option.\n             */\n            disabled: { type: Boolean, default: false },\n\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            /**\n             * Indicates if the value is selected. Only one element can be selected at a time.\n             */\n            selected: { type: Boolean, default: false },\n        },\n        emits: [BentoListboxEvent.ENTER, BentoListboxEvent.SELECT, BentoListboxEvent.SPACE, BentoListboxEvent.TAB],\n        setup(props, { emit }) {\n            const onOptionSelected = eventName => {\n                if (props.disabled) {\n                    return;\n                }\n\n                /**\n                 * Trigerred when an option is clicked or selected via keyboard navigation.\n                 * Indicates which option was selected.\n                 *\n                 * @event {string} - The corresponding event\n                 * @property {number} selectedValue - Selected option's value\n                 */\n                emit(eventName, props.option.value);\n            };\n\n            const ariaDisabled = computed(() => (props.disabled ? true : null));\n            const ariaSelected = computed(() => (props.selected ? true : null));\n            const tabIndex = computed(() => (props.disabled ? -1 : 0));\n\n            return {\n                // Values\n                ariaDisabled,\n                ariaSelected,\n                tabIndex,\n\n                // Enums\n                BentoListboxEvent,\n\n                // Events\n                onOptionSelected,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-single-select-option.scss\" />\n","import { computed, onMounted, ref } from 'vue';\n\nconst enum ListboxKeyboardNavigationMutationDirection {\n    INCREASE = 'increase',\n    DECREASE = 'decrease',\n}\n\nexport const useListboxKeyboardNavigation = ({ items, isOptionDisabled }, focusItem) => {\n    const numberOfItems = computed(() => items.value.length - 1);\n    const focusedIndex = ref(0);\n\n    onMounted(() => {\n        if (isOptionDisabled) {\n            focusedIndex.value = items.value.findIndex(el => !isOptionDisabled(el));\n        }\n    });\n\n    const isItemDisabled = (itemIndex: number) =>\n        !isOptionDisabled || (!!isOptionDisabled && isOptionDisabled(items.value[itemIndex]));\n\n    const isItemEnabled = (itemIndex: number) =>\n        !isOptionDisabled || (!!isOptionDisabled && !isOptionDisabled(items.value[itemIndex]));\n\n    const mutateFocusedIndex = (direction: ListboxKeyboardNavigationMutationDirection) => {\n        switch (direction) {\n            case ListboxKeyboardNavigationMutationDirection.INCREASE:\n                focusedIndex.value += 1;\n                break;\n            case ListboxKeyboardNavigationMutationDirection.DECREASE:\n                focusedIndex.value -= 1;\n                break;\n            default:\n                break;\n        }\n    };\n\n    const calculateFocusedIndex = ({ edgeCaseItem, isItemBeforeEdgeCaseItem }, callback, direction) => {\n        const isEdgeCaseItem = focusedIndex.value === edgeCaseItem;\n        if (isEdgeCaseItem) {\n            return;\n        }\n        if (isItemBeforeEdgeCaseItem) {\n            if (isItemEnabled(edgeCaseItem)) {\n                mutateFocusedIndex(direction);\n            }\n        } else {\n            mutateFocusedIndex(direction);\n            if (isItemDisabled(focusedIndex.value)) {\n                callback();\n            }\n        }\n        focusItem(focusedIndex.value);\n    };\n\n    const moveToNextElement = () => {\n        const isIndexSecondToLastItemInArray = focusedIndex.value === numberOfItems.value - 2;\n        calculateFocusedIndex(\n            {\n                isItemBeforeEdgeCaseItem: isIndexSecondToLastItemInArray,\n                edgeCaseItem: numberOfItems.value,\n            },\n            moveToNextElement,\n            ListboxKeyboardNavigationMutationDirection.INCREASE\n        );\n    };\n\n    const moveToPreviousElement = () => {\n        const IsIndexSecondItemInArray = focusedIndex.value === 1;\n        calculateFocusedIndex(\n            {\n                edgeCaseItem: 0,\n                isItemBeforeEdgeCaseItem: IsIndexSecondItemInArray,\n            },\n            moveToPreviousElement,\n            ListboxKeyboardNavigationMutationDirection.DECREASE\n        );\n    };\n\n    const moveToFirstElement = () => {\n        focusedIndex.value = 0;\n        if (isItemDisabled(focusedIndex.value)) {\n            moveToNextElement();\n        } else {\n            focusItem(focusedIndex.value);\n        }\n    };\n\n    const moveToLastElement = () => {\n        focusedIndex.value = numberOfItems.value;\n        if (isItemDisabled(focusedIndex.value)) {\n            moveToPreviousElement();\n        } else {\n            focusItem(focusedIndex.value);\n        }\n    };\n\n    return {\n        moveToFirstElement,\n        moveToLastElement,\n        moveToNextElement,\n        moveToPreviousElement,\n    };\n};\n","<template>\n    <div v-bento-keyboard-navigation-directive v-on=\"listboxListeners\">\n        <template v-if=\"hasCategories && staticCategories\">\n            <bento-listbox-single-select-category\n                v-for=\"category in items\"\n                :key=\"category.value\"\n                :category-label=\"category.label\"\n                role=\"group\"\n            >\n                <bento-listbox-single-select-option\n                    v-for=\"option in category.items\"\n                    :key=\"option.value\"\n                    ref=\"listboxItemRef\"\n                    role=\"option\"\n                    :option=\"option\"\n                    :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                    :selected=\"option.value === selectedValue\"\n                    v-on=\"listboxOptionListeners\"\n                >\n                    <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                        <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                    </template>\n                </bento-listbox-single-select-option>\n            </bento-listbox-single-select-category>\n        </template>\n        <template v-else>\n            <bento-listbox-single-select-option\n                v-for=\"option in items\"\n                :key=\"option.value\"\n                ref=\"listboxItemRef\"\n                role=\"option\"\n                :option=\"option\"\n                :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                :selected=\"option.value === selectedValue\"\n                v-on=\"listboxOptionListeners\"\n            >\n                <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                    <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                </template>\n            </bento-listbox-single-select-option>\n        </template>\n    </div>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef } from 'vue';\n    import { BentoListboxSingleSelectCategory } from './components/listbox-single-select-category';\n    import { BentoListboxSingleSelectOption } from '../listbox-single-select-option';\n    import { useListboxKeyboardNavigation } from '../../composables/useListboxKeyboardNavigation';\n    import {\n        BentoKeyboardNavigationKeyDownEvent,\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxOptions,\n        BentoListboxSelectedValue,\n    } from '@/types';\n    import { BentoKeyboardNavigationDirective } from '@/directives';\n\n    /**\n     * Listbox single-select options list\n     *\n     * @example\n     * import { BentoListboxMultiSelect } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoListboxMultiSelect },\n     *     template: `\n     *          <bento-listbox-multi-select\n     *              :items=\"[{ label: 'Option 1', value: 'option-1' }]\"\n     *              :selected-values=\"['option-1']\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-listbox-single-select',\n        components: {\n            BentoListboxSingleSelectCategory,\n            BentoListboxSingleSelectOption,\n        },\n        directives: { BentoKeyboardNavigationDirective },\n        inheritAttrs: false,\n        props: {\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - listbox option object\n             * @param {string} option.label - Option's label text\n             * @param {string|number} option.value - Option's value\n             * @param {unknown} option.data - Option's extra data to be passed to the default slot\n             */\n            isOptionDisabled: {\n                type: Function as PropType<BentoListboxIsOptionDisabled>,\n                default: () => false,\n            },\n\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }.\n             *\n             * @property {string} value.label - Text to be displayed in the option\n             * @property {string,number} value.value - Value of the option\n             */\n            items: {\n                type: Array as PropType<BentoListboxOptions>,\n                required: true,\n            },\n\n            /**\n             * The `input` value.\n             * Providing an empty string will select no options.\n             * Set to an empty string `''` if you don't want any of the available options to be selected\n             */\n            selectedValue: {\n                type: [String, Number] as PropType<BentoListboxSelectedValue>,\n                default: undefined,\n            },\n\n            /**\n             * If enabled, dropdown will display non-selectable, static categories\n             */\n            staticCategories: { type: Boolean, default: false },\n        },\n        emits: [BentoListboxEvent.SELECT, BentoListboxEvent.ENTER, BentoListboxEvent.SPACE, BentoListboxEvent.TAB],\n        setup(props, { emit, slots }) {\n            const listboxItemRef = ref([]);\n\n            /**\n             * Finds out if items have sub items\n             */\n            const hasCategories = computed(() => !!props.items.find(({ items }) => !!items));\n\n            const onOptionSelected = eventName => (selectedValue: BentoListboxSelectedValue) => {\n                emit(eventName, selectedValue);\n            };\n\n            const focusItem = (nextFocusedItemIndex: number) => listboxItemRef.value[nextFocusedItemIndex].$el.focus();\n\n            // Keyboard navigation\n            const { moveToNextElement, moveToPreviousElement, moveToFirstElement, moveToLastElement } =\n                useListboxKeyboardNavigation(\n                    {\n                        items: toRef(props, 'items'),\n                        isOptionDisabled: props.isOptionDisabled,\n                    },\n                    focusItem\n                );\n\n            const listboxListeners = {\n                [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: moveToPreviousElement,\n                [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: moveToNextElement,\n                [BentoKeyboardNavigationKeyDownEvent.HOME]: moveToFirstElement,\n                [BentoKeyboardNavigationKeyDownEvent.END]: moveToLastElement,\n            };\n\n            const listboxOptionListeners = {\n                [BentoListboxEvent.SELECT]: onOptionSelected(BentoListboxEvent.SELECT),\n                [BentoListboxEvent.SPACE]: onOptionSelected(BentoListboxEvent.SPACE),\n                [BentoListboxEvent.TAB]: onOptionSelected(BentoListboxEvent.TAB),\n                [BentoListboxEvent.ENTER]: onOptionSelected(BentoListboxEvent.ENTER),\n            };\n\n            return {\n                // Enums\n                BentoListboxEvent,\n\n                // Values\n                listboxItemRef,\n                slots,\n\n                // Computed\n                hasCategories,\n\n                // Methods\n                onOptionSelected,\n\n                // Keyboard navigation\n                listboxListeners,\n                listboxOptionListeners,\n            };\n        },\n    });\n</script>\n","export enum ListboxMultiSelectCategoryClass {\n    DISABLED = 'disabled',\n    STATIC_CATEGORY = 'static-category',\n}\n\nexport enum ListboxMultiSelectCategoryEvent {\n    SELECT_CATEGORY = 'select-category',\n    UNSELECT_CATEGORY = 'unselect-category',\n}\n","<template>\n    <div>\n        <bento-listbox-option class=\"b-listbox-multi-select-category__option\" :class=\"conditionalClass\">\n            <bento-checkbox\n                v-if=\"!isStaticCategory\"\n                :model-value=\"isAllSelected\"\n                :indeterminate=\"isIndeterminate\"\n                :disabled=\"hasAllPropsDisabled\"\n                :aria-label=\"category.label\"\n                :value=\"category.value\"\n                @update:model-value=\"toggleSelectAll\"\n            />\n            <span class=\"b-listbox-multi-select-category__label\">\n                <bento-typography v-bind=\"categoryLabelProps\" class=\"b-listbox-multi-select-category__label-text\">\n                    {{ category.label }}\n                </bento-typography>\n                <div\n                    v-if=\"!isStaticCategory\"\n                    class=\"b-listbox-multi-select-category__label-chevron\"\n                    data-testid=\"toggle-listbox\"\n                    @click.capture=\"toggleOpen\"\n                >\n                    <chevron-up-icon v-if=\"isOpen\" :svg-title=\"chevronTitle\" />\n                    <chevron-down-icon v-else :svg-title=\"chevronTitle\" />\n                </div>\n            </span>\n        </bento-listbox-option>\n\n        <div v-show=\"showItemChildren\">\n            <slot />\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef } from 'vue';\n    import { BentoCheckbox } from '@/components/checkbox';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoListboxOption } from '../../../../../listbox-option';\n    import {\n        BentoListboxIsOptionDisabled,\n        BentoListboxMultiSelectValue,\n        BentoListboxOptionItem,\n        BentoListboxValue,\n    } from '@/types';\n    import { useCheckboxSelectAll } from '@/composables';\n    import {\n        ListboxMultiSelectCategoryClass,\n        ListboxMultiSelectCategoryEvent,\n    } from './listbox-multi-select-category.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n    import messages from './messages.json';\n\n    /**\n     * Listbox multi-select category list.\n     * Allows the rendering of nested lists\n     *\n     * @example\n     * import { ListboxMultiSelectCategory } from '@/internal/listbox';\n     *\n     * export default {\n     *     components: { BentoListboxMultiSelectCategory },\n     *     template: `\n     *          <listbox-multi-select-category\n     *              :category=\"option\"\n     *              :is-option-disabled=\"true\"\n     *              :selected-items-list=\"['option-1']\"\n     *              @select-category=\"$emit('select-category', option)\"\n     *              @unselect-category=\"$emit('unselect-category', option)\"\n     *          >\n     *              <listbox-multi-select-options\n     *                  category-items\n     *                  :items=\"[{ label: 'Option 1', value: 'option-1' }]\"\n     *                  :is-multi-level=\"true\"\n     *                  :selected-items-list=\"['option-']\"\n     *                  :searching=\"false\"\n     *                  @toggle-checkbox-selection=\"value => toggleCheckboxSelection(value)\"\n     *              />\n     *          </listbox-multi-select-category>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-listbox-multi-select-category',\n        components: {\n            BentoCheckbox,\n            BentoTypography,\n            BentoListboxOption,\n            ChevronDownIcon,\n            ChevronUpIcon,\n        },\n        props: {\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }.\n             *\n             * @property {string} value.label - Text to be displayed in the option\n             * @property {string,number} value.value - Value of the option\n             * @property {BentoListboxOptionItem} value.items - Category items list\n             */\n            category: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - listbox option object\n             * @param {string} option.label - Option's label text\n             * @param {string|number} option.value - Option's value\n             * @param {unknown} option.data - Option's extra data to be passed to the default slot\n             */\n            isOptionDisabled: {\n                type: [Function] as PropType<BentoListboxIsOptionDisabled>,\n                default: () => false,\n            },\n\n            /**\n             * The `input` value.\n             * Providing an empty array will select no options.\n             */\n            selectedItemsList: {\n                type: Array as PropType<BentoListboxValue[]>,\n                default: () => [],\n            },\n\n            /**\n             * If enabled, dropdown will display non-selectable, static categories\n             */\n            staticCategories: { type: Boolean, default: false },\n        },\n        emits: [ListboxMultiSelectCategoryEvent.SELECT_CATEGORY, ListboxMultiSelectCategoryEvent.UNSELECT_CATEGORY],\n        setup(props, { emit }) {\n            const isOpen = ref(false);\n            const { t } = useI18n();\n\n            // This method should be used to determine if an option is disabled as it works for both vue 2 & 3.\n            const vue2Vue3FixedisOptionDisabled = option =>\n                props.isOptionDisabled ? props.isOptionDisabled(option) : false;\n\n            const hasAllPropsDisabled = computed(() =>\n                props.category.items.every(option => vue2Vue3FixedisOptionDisabled(option))\n            );\n\n            const isStaticCategory = toRef(props, 'staticCategories');\n\n            // Display item children if is open state or if static categories is enabled\n            const showItemChildren = computed(() => isOpen.value || props.staticCategories);\n\n            const conditionalClass = computed(() => ({\n                [`b-listbox-multi-select-category--${ListboxMultiSelectCategoryClass.DISABLED}`]:\n                    hasAllPropsDisabled.value,\n                [`b-listbox-multi-select-category--${ListboxMultiSelectCategoryClass.STATIC_CATEGORY}`]:\n                    props.staticCategories,\n            }));\n\n            const toggleOpen = (event: Event) => {\n                event.preventDefault();\n                isOpen.value = !isOpen.value;\n            };\n\n            const optionStates = (option: BentoListboxOptionItem) => {\n                const isDisabled = vue2Vue3FixedisOptionDisabled(option);\n                const isPreSelected =\n                    (props.selectedItemsList as BentoListboxMultiSelectValue)?.includes(option.value) || false;\n                return { isDisabled, isPreSelected };\n            };\n\n            const enabledItems = computed(() =>\n                props.category.items.filter(option => {\n                    const { isDisabled, isPreSelected } = optionStates(option);\n                    return (isDisabled && isPreSelected) || !isDisabled;\n                })\n            );\n\n            const visibleSelectedList = computed(\n                () =>\n                    enabledItems.value?.filter(({ value }) =>\n                        props.selectedItemsList?.includes(value)\n                    ) as unknown as BentoListboxMultiSelectValue\n            );\n\n            const chevronTitle = computed(() => {\n                const messageName = isOpen.value ? 'categoryOpened' : 'categoryClosed';\n                return t(messageName, { category: props.category.label }) as string;\n            });\n\n            const categoryLabelProps = computed(\n                () =>\n                    ({\n                        el: 'span',\n                        variant: props.staticCategories ? 'caption' : 'body',\n                    } as InstanceType<typeof BentoTypography>['$props'])\n            );\n\n            const selectAll = () => {\n                emit(ListboxMultiSelectCategoryEvent.SELECT_CATEGORY);\n            };\n            const unselectAll = () => {\n                emit(ListboxMultiSelectCategoryEvent.UNSELECT_CATEGORY);\n            };\n\n            const { isAllSelected, isIndeterminate, toggleSelectAll } = useCheckboxSelectAll(\n                visibleSelectedList,\n                enabledItems,\n                selectAll,\n                unselectAll\n            );\n\n            return {\n                // Values\n                chevronTitle,\n                conditionalClass,\n                hasAllPropsDisabled,\n                isOpen,\n                isAllSelected,\n                isIndeterminate,\n                isStaticCategory,\n\n                // Computed\n                showItemChildren,\n                categoryLabelProps,\n\n                // Methods\n                toggleOpen,\n                toggleSelectAll,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-multi-select-category.scss\" />\n","export enum ListboxMultiSelectOptionsEvent {\n    SELECT_CATEGORY = 'select-category',\n    TOGGLE_CHECKBOX_SELECTION = 'toggle-checkbox-selection',\n    UNSELECT_CATEGORY = 'unselect-category',\n}\n","<template>\n    <div>\n        <div v-for=\"option in items\" :key=\"`selected-${option.value}`\">\n            <template v-if=\"searching && isMultiLevel\">\n                <bento-listbox-option\n                    class=\"b-listbox-multi-select-options\"\n                    :class=\"conditionalClasses\"\n                    :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                >\n                    <bento-checkbox\n                        :model-value=\"isOptionSelected(option)\"\n                        :aria-label=\"option.label\"\n                        :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                        :value=\"option.value\"\n                        @update:model-value=\"value => selectSearch(value, option)\"\n                    />\n                    <slot v-bind=\"option\">\n                        <span class=\"b-listbox-multi-select__option-text\">\n                            <bento-typography el=\"span\">{{ option.label }}</bento-typography>\n                            <bento-typography\n                                v-if=\"shouldShowDescription(option)\"\n                                class=\"b-listbox-multi-select__option-description\"\n                                el=\"span\"\n                            >\n                                {{ option.description }}\n                            </bento-typography>\n                        </span>\n                    </slot>\n                </bento-listbox-option>\n            </template>\n\n            <template v-else>\n                <!-- Category -->\n                <template v-if=\"option.items\">\n                    <listbox-multi-select-category\n                        :category=\"option\"\n                        :static-categories=\"staticCategories\"\n                        :is-option-disabled=\"isOptionDisabled\"\n                        :selected-items-list=\"selectedItemsList\"\n                        @select-category=\"$emit(ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, option)\"\n                        @unselect-category=\"$emit(ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, option)\"\n                    >\n                        <listbox-multi-select-options\n                            category-items\n                            :items=\"option.items\"\n                            :is-option-disabled=\"isOptionDisabled\"\n                            :is-multi-level=\"isMultiLevel\"\n                            :static-categories=\"staticCategories\"\n                            :selected-items-list=\"selectedItemsList\"\n                            :searching=\"searching\"\n                            @toggle-checkbox-selection=\"value => toggleCheckboxSelection(value)\"\n                        />\n                    </listbox-multi-select-category>\n                </template>\n\n                <!-- Option -->\n                <bento-listbox-option\n                    v-else\n                    class=\"b-listbox-multi-select-options\"\n                    :class=\"conditionalClasses\"\n                    :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                >\n                    <bento-checkbox\n                        :model-value=\"selectedItemsList\"\n                        :aria-label=\"option.label\"\n                        :disabled=\"isOptionDisabled ? isOptionDisabled(option) : null\"\n                        :value=\"option.value\"\n                        @update:model-value=\"toggleCheckboxSelection(option.value)\"\n                    />\n                    <slot v-bind=\"option\">\n                        <span class=\"b-listbox-multi-select__option-text\">\n                            <bento-typography el=\"span\">{{ option.label }}</bento-typography>\n                            <bento-typography\n                                v-if=\"shouldShowDescription(option)\"\n                                class=\"b-listbox-multi-select__option-description\"\n                                el=\"span\"\n                            >\n                                {{ option.description }}\n                            </bento-typography>\n                        </span>\n                    </slot>\n                </bento-listbox-option>\n            </template>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoCheckbox } from '@/components/checkbox';\n    import { BentoListboxOption } from '../../../listbox-option';\n    import { BentoTypography } from '@/components/typography';\n    import { ListboxMultiSelectCategory } from './components/listbox-multi-select-category';\n    import {\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxOptionItem,\n        BentoListboxOptions,\n        BentoListboxValue,\n    } from '@/types';\n    import { ListboxMultiSelectOptionsEvent } from './listbox-multi-select-options.types';\n\n    /**\n     * Listbox multi-select options list\n     *\n     * @example\n     * import { ListboxMultiSelectOptions } from './components/listbox-multi-select-options';\n     *\n     * export default {\n     *     components: { ListboxMultiSelect },\n     *     template: `\n     *          <listbox-multi-select\n     *              :items=\"[{ label: 'Option 1', value: 'option-1' }]\"\n     *              :selected-values=\"['option-1']\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'listbox-multi-select-options',\n        components: {\n            BentoCheckbox,\n            BentoListboxOption,\n            BentoTypography,\n            ListboxMultiSelectCategory,\n        },\n        props: {\n            /**\n             * Indicates if the items listed are inside a category\n             * so they can be padded to right by one level in recursion.\n             * Items of categories are automatically defined as \"categoryItems\"\n             */\n            categoryItems: { type: Boolean, default: false },\n\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - listbox option object\n             * @param {string} option.label - Option's label text\n             * @param {string|number} option.value - Option's value\n             * @param {unknown} option.data - Option's extra data to be passed to the default slot\n             */\n            isOptionDisabled: {\n                type: Function as PropType<BentoListboxIsOptionDisabled>,\n                default: () => false,\n            },\n\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }.\n             *\n             * @property {string} value.label - Text to be displayed in the option\n             * @property {string,number} value.value - Value of the option\n             */\n            items: {\n                type: Array as PropType<BentoListboxOptions>,\n                required: true,\n            },\n\n            /**\n             * Indicates if the elements options are inside a multi-level category\n             */\n            isMultiLevel: { type: Boolean, default: false },\n\n            /**\n             * Flag that indicates that an external search it's being made\n             * to filter out the items inside the the multi-select listbox\n             *\n             * If enabled, hides the \"Select all\" checkbox in \"multiple\" mode.\n             */\n            searching: { type: Boolean, default: false },\n\n            /**\n             * List of selected items.\n             * Providing an empty array will select no options.\n             */\n            selectedItemsList: {\n                type: Array as PropType<BentoListboxValue[]>,\n                default: () => [],\n            },\n\n            /**\n             * If enabled, dropdown will display non-selectable, static categories\n             */\n            staticCategories: { type: Boolean, default: false },\n        },\n        emits: [\n            ListboxMultiSelectOptionsEvent.TOGGLE_CHECKBOX_SELECTION,\n            ListboxMultiSelectOptionsEvent.SELECT_CATEGORY,\n            ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY,\n        ],\n        setup(props, { emit }) {\n            const toggleCheckboxSelection = (value: BentoListboxValue) => {\n                emit(ListboxMultiSelectOptionsEvent.TOGGLE_CHECKBOX_SELECTION, value);\n            };\n\n            const isCategory = (option: BentoListboxOptionItem) => !!option.items;\n            const shouldShowDescription = (option: BentoListboxOptionItem) => {\n                const isSearchingMultiLevel = props.isMultiLevel && props.searching;\n\n                return option.description && (!props.isMultiLevel || isSearchingMultiLevel);\n            };\n\n            const isOptionSelected = option => {\n                if (option.items) {\n                    return !!option.items.find(item => props.selectedItemsList.includes(item.value));\n                }\n                return props.selectedItemsList.includes(option.value);\n            };\n\n            // eslint-disable-next-line consistent-return\n            const selectSearch = (selectedValue, option) => {\n                if (isCategory(option)) {\n                    return selectedValue\n                        ? emit(ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, option)\n                        : emit(ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, option);\n                }\n\n                toggleCheckboxSelection(option.value);\n            };\n\n            const conditionalClasses = computed(() => ({\n                'b-listbox-multi-select-options__static-category-option': props.staticCategories,\n                'b-listbox-multi-select-options__category-option': props.categoryItems,\n            }));\n\n            return {\n                // Values\n                conditionalClasses,\n\n                // Methods\n                isCategory,\n                isOptionSelected,\n                shouldShowDescription,\n                toggleCheckboxSelection,\n                selectSearch,\n\n                // Enums\n                BentoListboxEvent,\n                ListboxMultiSelectOptionsEvent,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-multi-select-options.scss\" />\n","import { BentoListboxOptions } from '@/types/listbox';\nimport { computed, Ref } from 'vue';\n\n/**\n * Checks if items array is flat or has multi levels and converts items into a flat array if needed\n *\n * It receives a layout of type @see BentoLayoutGroupProportions to\n * generate the class and apply it to the children of the @see BentoFormLayoutGroup component\n *\n * @param {Ref<BentoListboxOptions>} itemsList - ref of the list of items for the listbox\n * @returns {ComputedRef<boolean>} isMultiLevelSelect - Indicates if items array is multi level\n * @returns {ComputedRef<any[]>} flattenedItemsList - list of items computed into a flat array\n */\nexport const useMultiLevelItems = (itemsList: Ref<BentoListboxOptions>) => {\n    const isMultiLevelSelect = computed(() => !!itemsList.value?.find(({ items }) => !!items));\n\n    const flattenedItemsList = computed(() => {\n        if (isMultiLevelSelect.value) {\n            return itemsList.value?.reduce((acc, val) => {\n                if (val.items) {\n                    acc.push(...val.items.flat());\n                } else {\n                    acc.push(val);\n                }\n                return acc;\n            }, []);\n        }\n\n        return itemsList.value;\n    });\n\n    return {\n        isMultiLevelSelect,\n        flattenedItemsList,\n    };\n};\n","<template>\n    <div v-bento-keyboard-navigation-directive class=\"b-listbox-multi-select\" v-on=\"listboxListeners\">\n        <!-- Select all -->\n        <bento-listbox-option ref=\"selectAllListboxItemsRef\" class=\"b-listbox-multi-select__option\">\n            <bento-checkbox\n                :aria-label=\"selectAllCheckboxText\"\n                :model-value=\"isAllSelected\"\n                :indeterminate=\"isIndeterminate\"\n                @update:model-value=\"toggleSelectAll\"\n            />\n            <bento-typography el=\"span\">\n                {{ selectAllCheckboxText }}\n            </bento-typography>\n        </bento-listbox-option>\n\n        <!-- Selected options -->\n        <div v-if=\"isAnOptionSelected\">\n            <hr class=\"b-listbox-multi-select__divider\" />\n\n            <listbox-multi-select-options\n                ref=\"selectedListboxItemsRef\"\n                :items=\"selectedOptions\"\n                :is-option-disabled=\"isOptionDisabled\"\n                :is-multi-level=\"isMultiLevelSelect\"\n                :static-categories=\"staticCategories\"\n                :searching=\"searching\"\n                :selected-items-list=\"selectedItemsList\"\n                @select-category=\"selectAllCategory\"\n                @unselect-category=\"unselectAllCategory\"\n                @toggle-checkbox-selection=\"toggleCheckboxSelection(BentoListboxEvent.SELECT, $event)\"\n                @[BentoListboxEvent.SPACE]=\"toggleCheckboxSelection(BentoListboxEvent.SPACE, $event)\"\n                @[BentoListboxEvent.TAB]=\"toggleCheckboxSelection(BentoListboxEvent.TAB, $event)\"\n                @[BentoListboxEvent.ENTER]=\"toggleCheckboxSelection(BentoListboxEvent.ENTER, $event)\"\n            >\n                <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                    <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                </template>\n            </listbox-multi-select-options>\n        </div>\n\n        <!-- Available options -->\n        <div v-show=\"!isAllItemsIncludingDisabled\">\n            <hr class=\"b-listbox-multi-select__divider\" />\n\n            <listbox-multi-select-options\n                ref=\"listboxItemsRef\"\n                :items=\"items\"\n                :is-option-disabled=\"isOptionDisabled\"\n                :is-multi-level=\"isMultiLevelSelect\"\n                :static-categories=\"staticCategories\"\n                :searching=\"searching\"\n                :selected-items-list=\"selectedItemsList\"\n                @toggle-checkbox-selection=\"toggleCheckboxSelection(BentoListboxEvent.SELECT, $event)\"\n                @select-category=\"selectAllCategory\"\n                @unselect-category=\"unselectAllCategory\"\n                @[BentoListboxEvent.SPACE]=\"toggleCheckboxSelection(BentoListboxEvent.SPACE, $event)\"\n                @[BentoListboxEvent.TAB]=\"toggleCheckboxSelection(BentoListboxEvent.TAB, $event)\"\n                @[BentoListboxEvent.ENTER]=\"toggleCheckboxSelection(BentoListboxEvent.ENTER, $event)\"\n            >\n                <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                    <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                </template>\n            </listbox-multi-select-options>\n        </div>\n    </div>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue';\n    import { BentoCheckbox } from '@/components/checkbox';\n    import { BentoListboxOption } from '../listbox-option';\n    import { BentoTypography } from '@/components/typography';\n    import { useCheckboxSelectAll } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import {\n        BentoKeyboardNavigationKeyDownEvent,\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxMultiSelectValue,\n        BentoListboxOptionItem,\n        BentoListboxOptions,\n        BentoListboxSelectedValue,\n        BentoListboxValue,\n    } from '@/types';\n    import { BentoKeyboardNavigationDirective } from '@/directives';\n    import { ListboxMultiSelectOptions } from './components/listbox-multi-select-options';\n\n    import messages from './messages.json';\n    import { useListboxKeyboardNavigation } from '../../composables/useListboxKeyboardNavigation';\n    import { useMultiLevelItems } from '../../composables/use-multi-level-items/use-multi-level-items';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Listbox multi-select options list\n     *\n     * @example\n     * import { BentoListboxMultiSelect } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoListboxMultiSelect },\n     *     template: `\n     *          <bento-listbox-multi-select\n     *              :items=\"[{ label: 'Option 1', value: 'option-1' }]\"\n     *              :selected-values=\"['option-1']\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-listbox-multi-select',\n        components: {\n            BentoCheckbox,\n            BentoListboxOption,\n            BentoTypography,\n            ListboxMultiSelectOptions,\n        },\n        directives: { BentoKeyboardNavigationDirective },\n        props: {\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - listbox option object\n             * @param {string} option.label - Option's label text\n             * @param {string|number} option.value - Option's value\n             * @param {unknown} option.data - Option's extra data to be passed to the default slot\n             */\n            isOptionDisabled: {\n                type: Function as PropType<BentoListboxIsOptionDisabled>,\n                default: () => false,\n            },\n\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }.\n             *\n             * @property {string} value.label - Text to be displayed in the option\n             * @property {string,number} value.value - Value of the option\n             */\n            items: {\n                type: Array as PropType<BentoListboxOptions>,\n                required: true,\n            },\n\n            /**\n             * Flag that indicates that an external search it's being made\n             * to filter out the items inside the the multi-select listbox\n             *\n             * If enabled, hides the \"Select all\" checkbox in \"multiple\" mode.\n             */\n            searching: { type: Boolean, default: false },\n\n            /**\n             * The `input` value.\n             * Providing an empty array will select no options.\n             */\n            selectedValues: {\n                type: Array as PropType<BentoListboxSelectedValue>,\n                default: () => [] as BentoListboxSelectedValue,\n            },\n\n            /**\n             * If enabled, dropdown will display non-selectable, static categories\n             */\n            staticCategories: { type: Boolean, default: false },\n        },\n        emits: [BentoListboxEvent.SELECT],\n        setup(props, { emit, slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const selectAllListboxItemsRef = ref(null);\n            const selectedListboxItemsRef = ref(null);\n            const listboxItemsRef = ref(null);\n\n            const selectedItemsList = ref();\n            watch(\n                () => props.selectedValues,\n                () => {\n                    selectedItemsList.value = ([...((props.selectedValues as Array<unknown>) ?? [])] ||\n                        []) as BentoListboxMultiSelectValue;\n                },\n                {\n                    immediate: true,\n                }\n            );\n\n            const { isMultiLevelSelect, flattenedItemsList } = useMultiLevelItems(toRef(props, 'items'));\n\n            const optionStates = (option: BentoListboxOptionItem) => {\n                const isDisabled = props.isOptionDisabled(option);\n                const isPreSelected =\n                    (selectedItemsList.value as BentoListboxMultiSelectValue)?.includes(option.value) || false;\n                return { isDisabled, isPreSelected };\n            };\n\n            // Items that are not disabled and pre-selected disabled items\n            const enabledItems = computed(() =>\n                props.searching && isMultiLevelSelect\n                    ? props.items\n                    : flattenedItemsList.value.filter(option => {\n                          const { isDisabled, isPreSelected } = optionStates(option);\n                          return (isDisabled && isPreSelected) || !isDisabled;\n                      })\n            );\n\n            const visibleSelectedList = computed(\n                () =>\n                    enabledItems.value?.filter(option => {\n                        if (option.items && isMultiLevelSelect.value && props.searching) {\n                            const amountOfSelectedCategoryOptions = option.items.filter(categoryOption =>\n                                ((props.selectedValues as Array<BentoListboxSelectedValue>) ?? []).includes(\n                                    categoryOption.value\n                                )\n                            ).length;\n                            return amountOfSelectedCategoryOptions === option.items.length;\n                        }\n\n                        return selectedItemsList.value?.includes(option.value); // Check for category\n                    }) as BentoListboxMultiSelectValue\n            );\n\n            const calculateTotalItems = () => {\n                if (isMultiLevelSelect.value && !props.searching) {\n                    return flattenedItemsList.value.length;\n                }\n\n                return props.items.length;\n            };\n\n            const selectAllCheckboxText = computed(() => {\n                const possibleSelections = enabledItems.value.length;\n                const total = calculateTotalItems();\n                const amountSelectedValues = visibleSelectedList.value?.length || 0;\n\n                if (amountSelectedValues === 0) {\n                    return t('selectAll', { total: possibleSelections });\n                }\n\n                return amountSelectedValues === total\n                    ? t('allSelected', { total })\n                    : t('numberOfTotalSelected', { number: amountSelectedValues, total });\n            });\n\n            const selectAll = (selectableItems: BentoListboxOptions) => {\n                const filterOutDisabledAndNotPreselectedOptions = option => {\n                    const { isDisabled, isPreSelected } = optionStates(option);\n                    return (isDisabled && isPreSelected) || !isDisabled;\n                };\n\n                // Adding or removing this list of values\n                const addOrRemoveList = selectableItems\n                    .filter(filterOutDisabledAndNotPreselectedOptions)\n                    .filter(item => !selectedItemsList.value.includes(item.value)) // MAKE SURE NOT TO ADD DUPLICATES\n                    .map(({ value }) => value);\n\n                selectedItemsList.value = [...selectedItemsList.value, ...addOrRemoveList];\n                emit(BentoListboxEvent.SELECT, selectedItemsList.value);\n            };\n\n            const unselectAll = (selectableItems: BentoListboxOptions) => {\n                const findEnabledUnselectedItems = option => {\n                    const { isDisabled, isPreSelected } = optionStates(option);\n                    return !(isDisabled && isPreSelected);\n                };\n\n                const unselectedItemsList = selectableItems\n                    .filter(findEnabledUnselectedItems)\n                    .map(({ value }) => value);\n                selectedItemsList.value = selectedItemsList.value.filter(item => !unselectedItemsList?.includes(item));\n                emit(BentoListboxEvent.SELECT, selectedItemsList.value);\n            };\n\n            const selectAllItems = () => {\n                selectAll(flattenedItemsList.value);\n            };\n\n            const unselectAllItems = () => {\n                unselectAll(flattenedItemsList.value);\n            };\n\n            const { isAllSelected, isIndeterminate, toggleSelectAll } = useCheckboxSelectAll(\n                visibleSelectedList,\n                enabledItems,\n                selectAllItems,\n                unselectAllItems\n            );\n\n            const selectAllCategory = (category: BentoListboxOptionItem) => {\n                selectAll(category.items);\n            };\n\n            const unselectAllCategory = (category: BentoListboxOptionItem) => {\n                unselectAll(category.items);\n            };\n\n            const toggleCheckboxSelection = (eventName, value: BentoListboxValue) => {\n                let exists = false;\n                selectedItemsList.value = selectedItemsList.value.filter(option => {\n                    if (value === option) {\n                        exists = true;\n                        return false;\n                    }\n\n                    return true;\n                });\n\n                if (!exists) {\n                    selectedItemsList.value.push(value);\n                }\n                emit(eventName, selectedItemsList.value);\n            };\n\n            const selectedOptions = computed(() => {\n                const isOptionSelected = option =>\n                    (selectedItemsList.value as unknown as Array<string | number>).includes(option.value);\n\n                const categoryOptionsSelected = categoryOptions =>\n                    !!categoryOptions.find(option => isOptionSelected(option));\n\n                if (isMultiLevelSelect.value && props.staticCategories) {\n                    const nestedOptions = props.items.flatMap(({ items }) => items.filter(isOptionSelected));\n\n                    return nestedOptions;\n                }\n\n                const options = props.items.filter(option => {\n                    // Check selected categories category\n                    if (option.items && categoryOptionsSelected(option.items)) {\n                        return true;\n                    }\n\n                    return isOptionSelected(option);\n                });\n\n                return options;\n            });\n\n            const isAnOptionSelected = computed(() => selectedOptions.value?.length > 0);\n\n            const isAllItemsIncludingDisabled = computed(\n                () => visibleSelectedList.value?.length === flattenedItemsList.value?.length\n            );\n\n            const computedSelectAllListboxItemsRefs = computed(() =>\n                selectAllListboxItemsRef.value ? [selectAllListboxItemsRef.value] : []\n            );\n\n            // Keyboard navigation\n            const computedselectedListboxItemsRefs = computed(() =>\n                selectedListboxItemsRef.value?.$children?.length ? selectedListboxItemsRef.value.$children : []\n            );\n\n            const computedlistboxItems = computed(() =>\n                listboxItemsRef.value?.$children?.length ? listboxItemsRef.value.$children : []\n            );\n\n            const computedselectAllItemRefs = computed(() => ({ label: selectAllCheckboxText, value: isAllSelected }));\n\n            const computedItems = computed(() => [\n                computedselectAllItemRefs,\n                ...selectedOptions.value,\n                ...flattenedItemsList.value,\n            ]);\n\n            const focusItem = (nextFocusedItemIndex: number) => {\n                const multiSelectListboxItems = [\n                    ...computedSelectAllListboxItemsRefs.value,\n                    ...computedselectedListboxItemsRefs.value,\n                    ...computedlistboxItems.value,\n                ];\n                multiSelectListboxItems[nextFocusedItemIndex].$el.focus();\n            };\n\n            const { moveToNextElement, moveToPreviousElement, moveToFirstElement, moveToLastElement } =\n                useListboxKeyboardNavigation(\n                    {\n                        items: ref(computedItems),\n                        isOptionDisabled: props.isOptionDisabled,\n                    },\n                    focusItem\n                );\n\n            const listboxListeners = {\n                [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: moveToPreviousElement,\n                [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: moveToNextElement,\n                [BentoKeyboardNavigationKeyDownEvent.HOME]: moveToFirstElement,\n                [BentoKeyboardNavigationKeyDownEvent.END]: moveToLastElement,\n            };\n\n            return {\n                // Refs\n                selectAllListboxItemsRef,\n                selectedListboxItemsRef,\n                listboxItemsRef,\n\n                // Values\n                isAllSelected,\n                isAllItemsIncludingDisabled,\n                isAnOptionSelected,\n                isIndeterminate,\n                isMultiLevelSelect,\n                flattenedItemsList,\n                selectedItemsList,\n                selectAllCheckboxText,\n                selectedOptions,\n                slots,\n\n                // Enums\n                BentoListboxEvent,\n\n                // Methods\n                selectAllCategory,\n                toggleCheckboxSelection,\n                toggleSelectAll,\n                unselectAllCategory,\n\n                // Events\n                listboxListeners,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox-multi-select.scss\" />\n","<template>\n    <div\n        :id=\"id\"\n        v-bento-keyboard-navigation-directive\n        v-bind=\"containerProps\"\n        class=\"b-listbox\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n        :aria-busy=\"ariaBusy\"\n        :aria-atomic=\"ariaAtomic\"\n        :aria-label=\"ariaLabel\"\n        :aria-live=\"ariaLive\"\n        @scroll=\"onListboxContainerScroll\"\n    >\n        <div v-bind=\"wrapperProps\">\n            <!-- Empty search message -->\n            <div v-if=\"isSearchResultEmpty\" class=\"b-listbox__empty-search-message\">\n                <bento-empty-state v-if=\"emptyState\" v-bind=\"limitedEmptyStateProps\" />\n                <bento-typography v-else el=\"span\">{{ noResultsMessage }}</bento-typography>\n            </div>\n\n            <template v-else>\n                <!-- Multi select -->\n                <template v-if=\"multiple\">\n                    <bento-listbox-multi-select\n                        ref=\"listboxItemRef\"\n                        :items=\"items\"\n                        :static-categories=\"staticCategories\"\n                        :selected-values=\"selectedValue\"\n                        :searching=\"searching\"\n                        :is-option-disabled=\"isOptionDisabled\"\n                        v-on=\"listboxListeners\"\n                    >\n                        <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                            <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                        </template>\n                    </bento-listbox-multi-select>\n                </template>\n\n                <!-- Single select -->\n                <template v-else>\n                    <bento-listbox-single-select\n                        ref=\"listboxItemRef\"\n                        :items=\"virtualisedItems\"\n                        :selected-value=\"selectedValue\"\n                        :static-categories=\"staticCategories\"\n                        :is-option-disabled=\"isOptionDisabled\"\n                        v-on=\"listboxListeners\"\n                    >\n                        <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n                            <slot :name=\"innerSlot\" v-bind=\"scope\" />\n                        </template>\n                    </bento-listbox-single-select>\n                </template>\n                <div v-if=\"shouldDisplayShowMoreButton\" class=\"b-listbox__lazy-load\">\n                    <bento-loading-button :state=\"loadingButtonState\" variant=\"secondary\" @click.capture=\"emitShowMore\">\n                        {{ showMoreButtonText }}\n                    </bento-loading-button>\n                </div>\n                <div v-else-if=\"loading\" class=\"b-listbox__lazy-load\">\n                    <bento-loading-indicator />\n                </div>\n            </template>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRef } from 'vue';\n    import {\n        BentoKeyboardNavigationKeyDownEvent,\n        BentoListboxEmptyStateProps,\n        BentoListboxEvent,\n        BentoListboxIsOptionDisabled,\n        BentoListboxLazyLoadType,\n        BentoListboxOptionItem,\n        BentoListboxOptions,\n        BentoListboxSelectedValue,\n        BentoListboxVirtulisationOptions,\n    } from '@/types';\n    import { BentoKeyboardNavigationDirective } from '@/directives';\n    import { BentoListboxSingleSelect } from './components/listbox-single-select';\n    import { BentoListboxMultiSelect } from './components/listbox-multi-select';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { BentoLoadingButton, BentoLoadingButtonState } from '@/components/button';\n    import { BentoEmptyState } from '@/components/empty-state';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { debounce } from '@/utils/ts/debounce';\n    import { useVirtualList } from '@/composables/use-virtual-list';\n    import type { HTMLAttributes } from 'vue/types/jsx';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    const DEFAULT_DROPDOWN_ITEM_HEIGHT = 36;\n\n    /**\n     * Listbox container.\n     * It lists all the available options.\n     *\n     * @example\n     * <bento-listbox\n     *      v-slot=\"{label, value}\"\n     *      :id=\"listboxOptionsContainerId\"\n     *      :aria-label=\"ariaLabel\"\n     *      :disabled=\"disabled\"\n     *      :multiple=\"multiple\"\n     *      :selected=\"value\"\n     *      :isOptionDisabled=\"option => option.value === 2\"\n     *      :items=\"[{\n     *         { label: 'Option 1', value: 1 },\n     *         { label: 'Option 2', value: 2 },\n     *      }]\"\n     *      @select=\"onOptionSelected\"\n     * >\n     * </bento-listbox>\n     */\n    export default defineComponent({\n        name: 'bento-listbox',\n        components: {\n            BentoEmptyState,\n            BentoListboxSingleSelect,\n            BentoListboxMultiSelect,\n            BentoTypography,\n            BentoLoadingIndicator,\n            BentoLoadingButton,\n        },\n        directives: { BentoKeyboardNavigationDirective },\n        i18n: { messages },\n        props: {\n            /**\n             * Defines a string value that labels an interactive element.\n             */\n            ariaLabel: { type: String, default: null },\n\n            /**\n             * Empty state props that will be used with the inner empty state component to be displayed when no search results are found.\n             */\n            emptyState: {\n                type: Object as PropType<BentoListboxEmptyStateProps>,\n                default: undefined,\n            },\n\n            /**\n             * Indicates whether there are more items to load\n             */\n            hasMoreItems: { type: Boolean, default: false },\n\n            /**\n             *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.\n             */\n            id: { type: String, required: true },\n\n            /**\n             * Function that allows the options to be disabled\n             *\n             * @type {BentoListboxIsOptionDisabled}\n             * @param {BentoListboxOptionItem} option - Listbox option object\n             * @param {string} option.label - Option's label text\n             * @param {string|number} option.value - Option's value\n             * @param {unknown} option.data - Option's extra data to be passed to the default slot\n             */\n            isOptionDisabled: {\n                type: Function as PropType<BentoListboxIsOptionDisabled>,\n                default: () => undefined,\n            },\n\n            /**\n             * The option elements to populate the listbox with.\n             * It must be an array of {@see BentoListboxOptionItem }\n             *  * @property {string} value.label - Text to be displayed in the option\n             *  * @property {string,number} value.value - Value of the option\n             */\n            items: {\n                type: Array as PropType<BentoListboxOptions>,\n                required: true,\n            },\n\n            /**\n             * Indicates if new options are loading.\n             */\n            loading: { type: Boolean, default: false },\n\n            /**\n             * The type of `Lazy Load`.\n             * Type \"automatic\" will enable infinite scrolling\n             * Type \"button\" will enable lazy loading with \"Show more\" button\n             */\n            lazyLoadType: {\n                type: String as PropType<BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`>,\n                default: BentoListboxLazyLoadType.NONE,\n                validator: (value: BentoListboxLazyLoadType) => Object.values(BentoListboxLazyLoadType).includes(value),\n            },\n\n            /**\n             * If enabled, the user will be able to select multiple items.\n             */\n            multiple: { type: Boolean, default: false },\n\n            /**\n             * If enabled, dropdown will display non-selectable, static categories\n             */\n            staticCategories: { type: Boolean, default: false },\n\n            /**\n             * Messaged displayed when no items are listed in the listbox\n             */\n            noResultsMessage: { type: String, required: true },\n\n            /**\n             * Flag that indicates that an external search it's being made\n             * to filter out the items inside the the multi-select listbox\n             *\n             * If enabled, hides the \"Select all\" checkbox in \"multiple\" mode.\n             */\n            searching: BentoListboxMultiSelect.props.searching,\n\n            /**\n             * The `input` value.\n             * Providing an empty string or empty array will select no options.\n             * Set to an empty string `''` if you don't want any of the available options to be selected for single select\n             */\n            selectedValue: {\n                type: [String, Number, Array] as PropType<BentoListboxSelectedValue>,\n                default: undefined,\n            },\n\n            /**\n             * Enables virtual scrolling if set to true or by providing an object with itemHeight function.\n             * The itemHeight function is used to calculate the height of rendered item given it's index.\n             */\n            virtualScroll: {\n                type: [Boolean, Object] as PropType<BentoListboxVirtulisationOptions>,\n                default: false,\n            },\n        },\n        emits: [\n            BentoListboxEvent.SELECT,\n            BentoListboxEvent.SPACE,\n            BentoListboxEvent.SHOW_MORE,\n            BentoListboxEvent.ENTER,\n            BentoListboxEvent.ESCAPE,\n            BentoListboxEvent.TAB,\n        ],\n        setup(props, { emit, slots }) {\n            const listboxItemRef = ref([]);\n            const items = toRef(props, 'items');\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const isLazyLoadListbox = computed(() => props.lazyLoadType !== BentoListboxLazyLoadType.AUTOMATIC);\n            const hasAutomaticLazyLoader = computed(() => props.lazyLoadType === BentoListboxLazyLoadType.AUTOMATIC);\n\n            // Virtual scrolling\n            const virtualScrollItemHeight = () => {\n                if (typeof props?.virtualScroll === 'object' && props?.virtualScroll?.itemHeight) {\n                    return props.virtualScroll.itemHeight;\n                }\n                return DEFAULT_DROPDOWN_ITEM_HEIGHT;\n            };\n            const {\n                containerRef: listboxRef,\n                containerProps,\n                onScroll: onContainerScroll,\n                list: virtualisedItems,\n                wrapperProps,\n            } = useVirtualList<BentoListboxOptionItem>(items, {\n                itemHeight: virtualScrollItemHeight(),\n                // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select\n                disabled: props?.multiple || props?.virtualScroll === false || props?.lazyLoadType !== 'none',\n            });\n\n            // Aria a11y\n            const ariaAtomic = computed<HTMLAttributes['aria-atomic']>(() =>\n                isLazyLoadListbox.value ? 'true' : undefined\n            );\n            const ariaBusy = computed<HTMLAttributes['aria-busy']>(() =>\n                isLazyLoadListbox.value && props.loading ? 'true' : 'false'\n            );\n            const ariaLive = computed<HTMLAttributes['aria-live']>(() =>\n                isLazyLoadListbox.value ? 'polite' : undefined\n            );\n\n            const onOptionSelected = eventName => (selectedValue: BentoListboxSelectedValue) => {\n                emit(eventName, selectedValue);\n            };\n\n            const emitShowMore = () => {\n                emit(BentoListboxEvent.SHOW_MORE);\n            };\n\n            const emitShowMoreOnScrollEnd = debounce(() => {\n                const container = listboxRef.value;\n\n                if (!container) {\n                    return;\n                }\n\n                const isAtBottom = Math.round(container.scrollTop) + container.clientHeight >= container.scrollHeight;\n\n                if (props.hasMoreItems && isAtBottom && !props.loading) {\n                    emitShowMore();\n                }\n            });\n\n            const onListboxContainerScroll = () => {\n                if (hasAutomaticLazyLoader.value) {\n                    emitShowMoreOnScrollEnd();\n                } else {\n                    onContainerScroll();\n                }\n            };\n\n            const isSearchResultEmpty = computed(() => props.searching && props.items?.length === 0);\n\n            const shouldDisplayShowMoreButton = computed(\n                () => props.lazyLoadType === BentoListboxLazyLoadType.BUTTON && props.hasMoreItems\n            );\n\n            const loadingButtonState = computed(() =>\n                props.loading ? BentoLoadingButtonState.LOADING : BentoLoadingButtonState.START\n            );\n\n            const showMoreButtonText = computed(() => (props.loading ? t('loading') : t('showMore')));\n\n            const limitedEmptyStateProps = computed<InstanceType<typeof BentoEmptyState>['$props']>(() => ({\n                ...props.emptyState,\n                variant: 'condensed',\n            }));\n\n            const listboxListeners = {\n                [BentoListboxEvent.SELECT]: onOptionSelected(BentoListboxEvent.SELECT),\n                [BentoListboxEvent.SPACE]: onOptionSelected(BentoListboxEvent.SPACE),\n                [BentoListboxEvent.TAB]: onOptionSelected(BentoListboxEvent.TAB),\n                [BentoListboxEvent.ENTER]: onOptionSelected(BentoListboxEvent.ENTER),\n            };\n\n            return {\n                // Refs\n                listboxRef,\n                listboxItemRef,\n\n                // a11y\n                ariaAtomic,\n                ariaBusy,\n                ariaLive,\n\n                // Values\n                containerProps,\n                isSearchResultEmpty,\n                limitedEmptyStateProps,\n                loadingButtonState,\n                slots,\n                shouldDisplayShowMoreButton,\n                showMoreButtonText,\n                virtualisedItems,\n                wrapperProps,\n\n                // Enums\n                BentoKeyboardNavigationKeyDownEvent,\n                BentoListboxEvent,\n\n                // Methods\n                onListboxContainerScroll,\n                onOptionSelected,\n                emitShowMore,\n                listboxListeners,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./listbox.scss\" />\n"],"names":["useCheckboxSelectAll","selectedItemsList","items","selectAll","unselectAll","isAllSelected","computed","_a","_b","isIndeterminate","selectedValue","useVirtualList","disabled","itemHeight","overscan","prefixHeight","containerRef","ref","list","startIndex","endIndex","containerHeight","listObserver","wrapperProps","totalHeight","sum","index","offSetTop","i","getOffset","prefixHeightIfSet","scrollTop","offset","size","getVisibileNumberOfItems","start","capacity","updateVisibleItems","visibleCount","onScroll","onMounted","observeSizeOfElement","clientHeight","onUnmounted","watch","containerProps","BentoListboxEvent","BentoListboxEvent2","BentoListboxLazyLoadType","BentoListboxLazyLoadType2","_sfc_main$7","defineComponent","BentoTypography","_sfc_main$6","props","emit","conditionalClasses","BentoKeyboardNavigationKeyDownEvent","e","eventName","_sfc_main$5","BentoListboxOption","CheckmarkIcon","onOptionSelected","ariaDisabled","ariaSelected","tabIndex","useListboxKeyboardNavigation","isOptionDisabled","focusItem","numberOfItems","focusedIndex","el","isItemDisabled","itemIndex","isItemEnabled","mutateFocusedIndex","direction","calculateFocusedIndex","edgeCaseItem","isItemBeforeEdgeCaseItem","callback","moveToNextElement","isIndexSecondToLastItemInArray","moveToPreviousElement","IsIndexSecondItemInArray","_sfc_main$4","BentoListboxSingleSelectCategory","BentoListboxSingleSelectOption","BentoKeyboardNavigationDirective","slots","listboxItemRef","hasCategories","nextFocusedItemIndex","moveToFirstElement","moveToLastElement","toRef","listboxListeners","listboxOptionListeners","ListboxMultiSelectCategoryClass","ListboxMultiSelectCategoryClass2","ListboxMultiSelectCategoryEvent","ListboxMultiSelectCategoryEvent2","_sfc_main$3","messages$2","BentoCheckbox","ChevronDownIcon","ChevronUpIcon","isOpen","t","useI18n","vue2Vue3FixedisOptionDisabled","option","hasAllPropsDisabled","isStaticCategory","showItemChildren","conditionalClass","toggleOpen","event","optionStates","isDisabled","isPreSelected","enabledItems","visibleSelectedList","value","chevronTitle","messageName","categoryLabelProps","toggleSelectAll","ListboxMultiSelectOptionsEvent","ListboxMultiSelectOptionsEvent2","_sfc_main$2","ListboxMultiSelectCategory","toggleCheckboxSelection","isCategory","shouldShowDescription","isSearchingMultiLevel","isOptionSelected","item","selectSearch","useMultiLevelItems","itemsList","isMultiLevelSelect","flattenedItemsList","acc","val","_sfc_main$1","messages$1","ListboxMultiSelectOptions","selectAllListboxItemsRef","selectedListboxItemsRef","listboxItemsRef","categoryOption","calculateTotalItems","selectAllCheckboxText","possibleSelections","total","amountSelectedValues","selectableItems","filterOutDisabledAndNotPreselectedOptions","addOrRemoveList","findEnabledUnselectedItems","unselectedItemsList","selectAllItems","unselectAllItems","selectAllCategory","category","unselectAllCategory","exists","selectedOptions","categoryOptionsSelected","categoryOptions","isAnOptionSelected","isAllItemsIncludingDisabled","computedSelectAllListboxItemsRefs","computedselectedListboxItemsRefs","computedlistboxItems","computedselectAllItemRefs","computedItems","DEFAULT_DROPDOWN_ITEM_HEIGHT","_sfc_main","BentoEmptyState","BentoListboxSingleSelect","BentoListboxMultiSelect","BentoLoadingIndicator","BentoLoadingButton","messages","isLazyLoadListbox","hasAutomaticLazyLoader","virtualScrollItemHeight","listboxRef","onContainerScroll","virtualisedItems","ariaAtomic","ariaBusy","ariaLive","emitShowMore","emitShowMoreOnScrollEnd","debounce","container","isAtBottom","onListboxContainerScroll","isSearchResultEmpty","shouldDisplayShowMoreButton","loadingButtonState","BentoLoadingButtonState","showMoreButtonText","limitedEmptyStateProps"],"mappings":"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"}

package/dist/chunks/{loading-button.459b9ab4.js → loading-button.7b5d0c22.js}

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

package/dist/chunks/{loading-button.459b9ab4.js.map → loading-button.7b5d0c22.js.map}

@@ -1 +1 @@
-{"version":3,"file":"loading-button.459b9ab4.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=\"state === 'fail'\"\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         * 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--${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\n    const onClick = (e: MouseEvent) => {\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","e","emit"],"mappings":";;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,OAAA,QAJQA,IAAAD,KAAA,CAAA,CAAA;ACuHR,MAAAE,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAnCAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAC,EAAA,WAAAL,EAAA,SAAA,GAAAK,EAAA,UAAAL,EAAA,WAAA,CAAAK,EAAA;AAAA,MAEuB,CAAA,qBAAAA,EAAA,WAAAL,EAAA,SAAA,GAAAK,EAAA,UAAAL,EAAA;AAAA,MAElB,CAAA,2BAAA,GAAAK,EAAA;AAAA,IACP,EAAA,GAGzCC,IAAAF;AAAA,MAAkC,MAAAC,EAAA,YAAA,aAAA,CAAAA,EAAA,WAAAA,EAAA,YAAA,aAAAA,EAAA;AAAA,IACiE;yGAGnG,CAAAE,MAAA;AACI,MAAAF,EAAA,UAAAL,EAAA,WACIQ,EAAA,SAAAD,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"loading-button.7b5d0c22.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=\"state === 'fail'\"\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         * 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--${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\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","e","emit"],"mappings":";;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,OAAA,QAJQA,IAAAD,KAAA,CAAA,CAAA;AC0HR,MAAAE,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtCAC,IAAAC,EAAA,OAAA;AAAA,MAA2C,CAAA,qBAAAC,EAAA,WAAAL,EAAA,SAAA,GAAAK,EAAA,UAAAL,EAAA,WAAA,CAAAK,EAAA;AAAA,MAEuB,CAAA,qBAAAA,EAAA,WAAAL,EAAA,SAAA,GAAAK,EAAA,UAAAL,EAAA;AAAA,MAElB,CAAA,2BAAA,GAAAK,EAAA;AAAA,IACP,EAAA,GAGzCC,IAAAF;AAAA,MAAkC,MAAAC,EAAA,YAAA,aAAA,CAAAA,EAAA,WAAAA,EAAA,YAAA,aAAAA,EAAA;AAAA,IACiE;yGAGnG,CAAAE,MAAA;AAEI,MAAAA,EAAA,gBAAA,GAEAF,EAAA,UAAAL,EAAA,WACIQ,EAAA,SAAAD,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{tooltip.b8929659.js → tooltip.4a1300d5.js}

@@ -1,9 +1,9 @@
 import { computed as d, defineComponent as b, reactive as g, nextTick as w } from "vue";
 import { l as r } from "./events.58c00e6d.js";
 import { g as v } from "./unique-id.a2a2b458.js";
-import { P as S, a as D, b as N } from "./index.152b2b16.js";
+import { P as S, a as D, b as N } from "./index.7039d901.js";
 import { V as W } from "./index.4c062058.js";
-import { B as I } from "./index.b201e81d.js";
+import { B as I } from "./index.858b0720.js";
 import { n as x } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import "../assets/tooltip.css";
 const l = { ...S };
@@ -58,20 +58,20 @@ const U = {
     };
   }
 }, G = b(U);
-var H = function() {
+var $ = function() {
   var o = this, e = o._self._c;
   return o._self._setupProxy, e("popper-container", { staticClass: "b-tooltip", class: o.conditionalClasses, attrs: { id: o.id, "aria-role": o.PopperContainerAriaRole.TOOLTIP, "aria-hidden": !o.isShown, arrow: { classes: ["b-tooltip__arrow"] }, "fallback-position": ["top", "bottom", "right", "left"], "is-hidden": !o.isShown, offset: [0, 4], position: o.position, tabindex: o.tabIndex, "target-element": o.targetElement } }, [e("bento-typography", { attrs: { el: "span", variant: "caption" } }, [o._v(" " + o._s(o.content) + " ")])], 1);
-}, $ = [], L = /* @__PURE__ */ x(
+}, H = [], L = /* @__PURE__ */ x(
   G,
-  H,
   $,
+  H,
   !1,
   null,
   "48ebca09",
   null,
   null
 );
-const k = L.exports, i = [], h = "aria-describedby", m = v("tooltip");
+const k = L.exports, s = [], h = "aria-describedby", m = v("tooltip");
 let n, u = !1;
 const a = g({
   targetElement: null,
@@ -86,8 +86,8 @@ const a = g({
     n = new o({ propsData: { targetElement: t, content: "", id: m } }).$mount(), document.body.appendChild(n.$el);
   }
 }, F = () => {
-  document.body.removeChild(n.$el), n.$destroy(), n = void 0;
-}, O = (t) => Object.values(l).includes(t.arg) ? t.arg : l.TOP, _ = (t) => i.find(
+  document.contains(n.$el) && document.body.removeChild(n.$el), n.$destroy(), n = void 0;
+}, O = (t) => Object.values(l).includes(t.arg) ? t.arg : l.TOP, _ = (t) => s.find(
   (o) => (
     // isEqualNode doesn't work correct for svg element, hence the second check here
     o.target.isEqualNode(t) && o.target === t
@@ -98,39 +98,39 @@ const a = g({
     return;
   t && t.setAttribute(h, m);
   let e = !1;
-  document.querySelectorAll("dialog").forEach((s) => {
-    e = (s == null ? void 0 : s.open) || e;
+  document.querySelectorAll("dialog").forEach((i) => {
+    e = (i == null ? void 0 : i.open) || e;
   }), e && (t.after(n.$el), e = !1), u = !0, n.content = o.content, n.position = o.position, a.content = o.content, a.position = o.position, w(() => {
     u && (n.targetElement = t, n.isShown = !0, a.targetElement = t, a.isShown = !0);
   });
 }, P = (t) => {
-  var o, e, s, p;
-  (e = (o = n.$el) == null ? void 0 : o.parentElement) != null && e.tagName && ((p = (s = n.$el) == null ? void 0 : s.parentElement) == null ? void 0 : p.tagName) !== "BODY" && document.body.appendChild(n.$el), u = !1, n.isShown = !1, a.isShown = !1, t && t.removeAttribute(h);
+  var o, e, i, p;
+  (e = (o = n.$el) == null ? void 0 : o.parentElement) != null && e.tagName && ((p = (i = n.$el) == null ? void 0 : i.parentElement) == null ? void 0 : p.tagName) !== "BODY" && document.body.appendChild(n.$el), u = !1, n.isShown = !1, a.isShown = !1, t && t.removeAttribute(h);
 }, f = (t, o) => {
   if (!o.hasOwnProperty("value") || o.value) {
-    i.length === 0 && q(t);
-    const e = () => M(t), s = () => P(t), p = {
+    s.length === 0 && q(t);
+    const e = () => M(t), i = () => P(t), p = {
       target: t,
       content: o.value,
       position: O(o),
       removeListeners: [
         r(t, "mouseenter", e),
-        r(t, "mouseleave", s),
+        r(t, "mouseleave", i),
         r(t, "focus", e),
-        r(t, "blur", s),
+        r(t, "blur", i),
         r(t, "keydown", (T) => {
-          T.key === R.ESCAPE && s();
+          T.key === R.ESCAPE && i();
         })
       ]
     };
-    i.push(p);
+    s.push(p);
   }
 }, c = (t, o) => {
   const e = _(t);
   if (e) {
     if ((e == null ? void 0 : e.content) !== o.value && (e.content = o.value, n.isShown && n.targetElement.isEqualNode(t) && (e.content ? n.content = o.value : n.isShown = !1)), e.position !== o.arg) {
-      const s = O(o);
-      e.position = s, n.position = s;
+      const i = O(o);
+      e.position = i, n.position = i;
     }
   } else
     !e && o.value && f(t, o);
@@ -138,7 +138,7 @@ const a = g({
   const o = _(t);
   o && (o.removeListeners.forEach((e) => {
     e();
-  }), P(), i.splice(i.indexOf(o), 1), i.length === 0 && F());
+  }), P(), s.splice(s.indexOf(o), 1), s.length === 0 && F());
 }, y = {
   // Vue 2 Directive hooks
   bind(t, o) {
@@ -170,4 +170,4 @@ export {
   A as a,
   y as b
 };
-//# sourceMappingURL=tooltip.b8929659.js.map
+//# sourceMappingURL=tooltip.4a1300d5.js.map

package/dist/chunks/tooltip.4a1300d5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.4a1300d5.js","sources":["../../src/directives/tooltip/tooltip.types.ts","../../src/types/utils-events.ts","../../src/components/tooltip/tooltip.vue","../../src/directives/tooltip/tooltip.ts"],"sourcesContent":["import { PopperContainerPositionBasic } from '@/components/popper-container';\nimport type { DirectiveBinding } from 'vue/types/options';\n\nexport const BentoTooltipPosition = { ...PopperContainerPositionBasic };\nexport type BentoTooltipPosition = PopperContainerPositionBasic;\n\nexport enum BentoTooltipState {\n    HIDDEN = 'hidden',\n}\n\nexport interface BentoTooltipDirectiveBinding extends Readonly<DirectiveBinding> {\n    readonly value: string;\n}\n","import type { Vue } from 'vue-demi';\n\nexport interface ListenOptions {\n    capture?: boolean;\n    passive?: boolean;\n    once?: boolean;\n    self?: boolean;\n    vm?: Vue;\n    onCleanup?: () => void;\n}\n\nexport enum EventKey {\n    ESCAPE = 'Escape',\n    ENTER = 'Enter',\n    ARROW_LEFT = 'ArrowLeft',\n    ARROW_UP = 'ArrowUp',\n    ARROW_RIGHT = 'ArrowRight',\n    ARROW_DOWN = 'ArrowDown',\n    PAGE_UP = 'PageUp',\n    PAGE_DOWN = 'PageDown',\n    END = 'End',\n    HOME = 'Home',\n}\n\n/**\n * @deprecated `Event.keyCode` is deprecated. Use `EventKey` instead\n */\nexport enum KeyCode {\n    ESCAPE = 27,\n    ENTER = 13,\n    ARROW_LEFT = 37,\n    ARROW_UP = 38,\n    ARROW_RIGHT = 39,\n    ARROW_DOWN = 40,\n    PAGE_UP = 33,\n    PAGE_DOWN = 34,\n    END = 35,\n    HOME = 36,\n}\n","<template>\n    <popper-container\n        :id=\"id\"\n        :aria-role=\"PopperContainerAriaRole.TOOLTIP\"\n        :aria-hidden=\"!isShown\"\n        :arrow=\"{ classes: ['b-tooltip__arrow'] }\"\n        :class=\"conditionalClasses\"\n        :fallback-position=\"['top', 'bottom', 'right', 'left']\"\n        :is-hidden=\"!isShown\"\n        :offset=\"[0, 4]\"\n        :position=\"position\"\n        :tabindex=\"tabIndex\"\n        :target-element=\"targetElement\"\n        class=\"b-tooltip\"\n    >\n        <bento-typography el=\"span\" variant=\"caption\">\n            {{ content }}\n        </bento-typography>\n    </popper-container>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import { BentoTooltipPosition, BentoTooltipState } from '@/directives/tooltip/tooltip.types';\n    import { PopperContainer, PopperContainerAriaRole } from '@/components/popper-container';\n    import { BentoTypography } from '@/components/typography';\n    import { VueNodeElement } from '@/types';\n\n    /**\n     * Tooltip container, to be used internally to render the tooltip container where the text is shown.\n     */\n    export const Tooltip = {\n        name: 'tooltip',\n        components: { BentoTypography, PopperContainer },\n        props: {\n            /**\n             * The tooltip's id. Necessary for accessibility purposes.\n             */\n            id: { type: String, default: null },\n            /**\n             * Tooltip's target reference to the DOM element or Vue component.\n             * The tooltip will position itself relatively to target element, in the specified position.\n             */\n            targetElement: { type: [Element, Object] as PropType<VueNodeElement>, required: true },\n            /**\n             * Tooltip's position relative to the target element.\n             * Possible values are: 'top', 'bottom', 'left' and 'right'.\n             */\n            position: {\n                type: String as PropType<BentoTooltipPosition>,\n                default: BentoTooltipPosition.TOP,\n                validator: value => Object.values(BentoTooltipPosition).includes(value as BentoTooltipPosition),\n            },\n            /**\n             * Tooltip's offset.\n             * If specified, the tooltip will have an offset in pixels between it and the target element\n             * in specified position.\n             */\n            offset: { type: Number, default: 0 },\n            /**\n             * Tooltip's text content.\n             */\n            content: { type: String, required: true },\n            /**\n             * Shows / Hides the Tooltip component\n             */\n            isShown: { type: Boolean, default: false },\n        },\n        setup(props) {\n            const conditionalClasses = computed(() => ({\n                [`b-tooltip--${BentoTooltipState.HIDDEN}`]: !props.isShown,\n            }));\n\n            const tabIndex = computed((): number => (props.isShown ? 1 : -1));\n\n            return {\n                // Enums\n                PopperContainerAriaRole,\n\n                // Values\n                conditionalClasses,\n                tabIndex,\n            };\n        },\n    };\n\n    export default defineComponent(Tooltip);\n</script>\n\n<style lang=\"scss\" scoped src=\"./tooltip.scss\" />\n","import { nextTick, reactive } from 'vue';\nimport { listen } from '@/utils/ts/events';\nimport { generateUid } from '@/utils/ts/unique-id';\nimport { EventKey } from '@/types/utils-events';\nimport { BentoTooltipDirectiveBinding, BentoTooltipPosition } from './tooltip.types';\nimport { createApp, h, isVue2, Vue2 } from 'vue-demi';\nimport BentoTooltip from '@/components/tooltip/tooltip.vue';\n\ninterface TooltipInstance {\n    target: HTMLElement;\n    content: string;\n    position: BentoTooltipPosition;\n    removeListeners: Array<() => void>;\n}\n\n/**\n * Tooltip directive to render a tooltip on a given HTML element or component.\n *\n * @usage\n * import { BentoTooltipDirective, BentoTooltipPosition } from '@adyen/bento-vue2';\n *\n * export default {\n *     directives: { BentoTooltipDirective },\n *     template: `\n *         <bento-button\n *             v-bento-tooltip-directive:BentoTooltipPosition.BOTTOM=\"refToTextContent\"\n *         >\n *             Button text\n *         </bento-button>\n *     `,\n * }\n */\nconst tooltipInstances: Array<TooltipInstance> = [];\nconst ariaDescribedByAttr = 'aria-describedby';\nconst tooltipId = generateUid('tooltip');\n\nlet tooltipVNode;\n\n// Reusable Tooltip component instance.\nlet tooltip;\n// Global visibility state to prevent tooltips from showing after it being instructed to hide\nlet open = false;\n\nconst tooltipProps = reactive({\n    targetElement: null,\n    content: 'START_MESSAGE',\n    id: tooltipId,\n    position: undefined,\n    isShown: false,\n});\n\n/**\n * Creates a new Tooltip component instance and inserts it into DOM.\n * @param {HTMLElement} el the target element for the Tooltip\n * @internal\n */\nconst createTooltip = (el: HTMLElement) => {\n    // Sets the target's tabindex so as to make the tooltip interactive via keyboard navigation\n    el.setAttribute('tabindex', '0');\n\n    if (isVue2) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore: Type error for Vue method in Vue 3 but this code only executes in vue 2 so ignoring.\n        const TooltipComponent = Vue2.extend(BentoTooltip);\n        tooltip = new TooltipComponent({ propsData: { targetElement: el, content: '', id: tooltipId } }).$mount();\n        document.body.appendChild(tooltip.$el);\n    } else {\n        tooltipProps.targetElement = el;\n        tooltip = createApp({\n            components: { BentoTooltip },\n            setup() {\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore: Type error for h method in Vue 2 but this code only executes in vue 3 so ignoring.\n                return () => h(BentoTooltip, { ...tooltipProps }, '');\n            },\n        });\n        tooltipVNode = document.createElement('div');\n        tooltipVNode.id = 'tooltip-parent';\n        document.body.appendChild(tooltipVNode);\n        tooltip.mount('#tooltip-parent');\n    }\n};\n\n/**\n * Removes Tooltip component instance from the DOM and destroys it.\n * @internal\n */\nconst destroyTooltip = () => {\n    if (isVue2) {\n        if (document.contains(tooltip.$el)) {\n            document.body.removeChild(tooltip.$el);\n        }\n        tooltip.$destroy();\n    } else {\n        tooltip.unmount();\n        if (document.contains(tooltipVNode)) {\n            document.body.removeChild(tooltipVNode);\n        }\n    }\n\n    tooltip = undefined;\n};\n\n/**\n * Returns tooltip position based on the specified argument.\n * By default returns 'top' if no argument is specified.\n * @param {BentoTooltipDirectiveBinding} binding Directive binding object.\n * @returns {string} Tooltip position.\n * @internal\n */\nconst getTooltipPosition = (binding: BentoTooltipDirectiveBinding): BentoTooltipPosition =>\n    Object.values(BentoTooltipPosition).includes(binding.arg as BentoTooltipPosition)\n        ? (binding.arg as BentoTooltipPosition)\n        : BentoTooltipPosition.TOP;\n\n/**\n * Get the correct Tooltip instance for the given target element\n * @param {HTMLElement} el the target element for the Tooltip\n * @returns\n */\nconst getTooltipInstanceForTarget = (el: HTMLElement): TooltipInstance =>\n    tooltipInstances.find(\n        ctx =>\n            // isEqualNode doesn't work correct for svg element, hence the second check here\n            ctx.target.isEqualNode(el) && ctx.target === el\n    );\n\n/**\n * On mouse enter event updates tooltip with correct content and position, and shows tooltip.\n * @param {?HTMLElement} el - Target element\n * @internal\n */\nconst showTooltip = (el?: HTMLElement) => {\n    const tooltipInstance = getTooltipInstanceForTarget(el);\n\n    // If tooltip content is empty – do not show the tooltip\n    if (!tooltipInstance.content || !el) {\n        return;\n    }\n\n    if (el) {\n        el.setAttribute(ariaDescribedByAttr, tooltipId);\n    }\n\n    // If the Tooltip is inside a dialog, move tooltip element inside of it\n    // It gets restored to <body> when it gets hidden\n    let isDialogOpen = false;\n    document.querySelectorAll('dialog').forEach(node => {\n        isDialogOpen = node?.open || isDialogOpen;\n    });\n\n    if (isDialogOpen) {\n        if (isVue2) {\n            el.after(tooltip.$el);\n            // eslint-disable-next-line no-underscore-dangle\n        } else if (tooltip?._instance?.vnode?.el) {\n            // eslint-disable-next-line no-underscore-dangle\n            el.after(tooltip?._instance?.vnode?.el);\n        }\n        isDialogOpen = false;\n    }\n\n    open = true;\n\n    tooltip.content = tooltipInstance.content;\n    tooltip.position = tooltipInstance.position;\n\n    tooltipProps.content = tooltipInstance.content;\n    tooltipProps.position = tooltipInstance.position;\n\n    // Do calculations on a next tick, otherwise tooltip position calculations will be wrong\n    nextTick(() => {\n        // Do not open tooltip if it has been instructed to hide in process\n        if (!open) {\n            return;\n        }\n        tooltip.targetElement = el;\n        tooltip.isShown = true;\n\n        tooltipProps.targetElement = el;\n        tooltipProps.isShown = true;\n    });\n};\n\n/**\n * On mouse leave event hides the tooltip.\n * @internal\n */\nconst hideTooltip = (el?: HTMLElement) => {\n    // Restore the tooltip element to body if it got move out of <body>\n    if (tooltip.$el?.parentElement?.tagName && tooltip.$el?.parentElement?.tagName !== 'BODY') {\n        document.body.appendChild(tooltip.$el);\n    }\n\n    open = false;\n    tooltip.isShown = false;\n    tooltipProps.isShown = false;\n    if (el) {\n        el.removeAttribute(ariaDescribedByAttr);\n    }\n};\n\nconst tooltipBind = (el: HTMLElement, binding: BentoTooltipDirectiveBinding) => {\n    // eslint-disable-next-line no-prototype-builtins\n    if (!binding.hasOwnProperty('value') || binding.value) {\n        // Create Tooltip component singleton instance\n        if (tooltipInstances.length === 0) {\n            createTooltip(el);\n        }\n\n        const show = () => showTooltip(el);\n        const hide = () => hideTooltip(el);\n\n        // Create and store context object, which has directive related handlers and content.\n        const tooltipInstance: TooltipInstance = {\n            target: el,\n            content: binding.value,\n            position: getTooltipPosition(binding),\n            removeListeners: [\n                listen(el, 'mouseenter', show),\n                listen(el, 'mouseleave', hide),\n                listen(el, 'focus', show),\n                listen(el, 'blur', hide),\n                listen(el, 'keydown', evt => {\n                    const keyboardEvent = <KeyboardEvent>evt;\n                    if (keyboardEvent.key === EventKey.ESCAPE) {\n                        hide();\n                    }\n                }),\n            ],\n        };\n\n        tooltipInstances.push(tooltipInstance);\n    }\n};\n\nconst tooltipUpdate = (el: HTMLElement, binding: BentoTooltipDirectiveBinding) => {\n    const tooltipInstance = getTooltipInstanceForTarget(el);\n    if (tooltipInstance) {\n        // Update tooltip content value if it is changed\n        if (tooltipInstance?.content !== binding.value) {\n            tooltipInstance.content = binding.value;\n            // If tooltip is currently shown for current element – update tooltip's content value\n            if (tooltip.isShown && tooltip.targetElement.isEqualNode(el)) {\n                if (!tooltipInstance.content) {\n                    tooltip.isShown = false;\n                } else {\n                    tooltip.content = binding.value;\n                }\n            }\n        }\n        // Update tooltip position if it is changed\n        if (tooltipInstance.position !== binding.arg) {\n            const position = getTooltipPosition(binding);\n            tooltipInstance.position = position;\n            tooltip.position = position;\n        }\n    } else if (!tooltipInstance && binding.value) {\n        // If I don't have a tooltip instance yet but the value passed was updated\n        tooltipBind(el, binding);\n    }\n};\n\nconst tooltipUnbind = (el: HTMLElement) => {\n    const context = getTooltipInstanceForTarget(el);\n\n    // Prevent unbinding/removing when there's nothing to unbind, leads to stack overflow errors\n    if (!context) {\n        return;\n    }\n\n    context.removeListeners.forEach(removeListener => {\n        removeListener();\n    });\n\n    // If el is removed while tooltip is displayed, the tooltip doesnt hide as\n    // there is no el to trigger mouseleave/blur.\n    hideTooltip();\n\n    tooltipInstances.splice(tooltipInstances.indexOf(context), 1);\n\n    // If all the elements using the directive are removed, then no point having\n    // the component on the page.\n    if (tooltipInstances.length === 0) {\n        destroyTooltip();\n    }\n};\n\n/**\n * This directive allows you to bind a tooltip to an element.\n * Tooltip can be configured to be shown in one of four positions: 'top', 'left', 'right' and 'bottom'.\n *\n * @example\n * import { BentoTooltipDirective as BentoTooltip, BentoTooltipPosition } from '@adyen/bento-vue2';\n *\n * export default {\n *     directives: { BentoTooltip },\n *     methods: {\n *         contentExpression() {\n *             return 'tooltip content';\n *         },\n *     },\n *     template: `<div>\n *         <div v-bento-tooltip:left=\"refToTooltipContent\"></div>\n *         <div v-bento-tooltip:[TooltipPosition.BOTTOM]=\"refToTooltipContent\"></div>\n *\n *         <!-- If you don't specify the position then by default it's `TooltipPosition.TOP` -->\n *         <div v-bento-tooltip=\"refToTooltipContent\"></div>\n *\n *         <!-- Tooltip content can also be a data property or a method or a computed property as well -->\n *         <div v-bento-tooltip=\"contentExpression()\"></div>\n *     </div>`,\n * };\n */\nexport const BentoTooltipDirective = {\n    // Vue 2 Directive hooks\n    bind(el, binding) {\n        tooltipBind(el, binding);\n    },\n    update(el, binding) {\n        tooltipUpdate(el, binding);\n    },\n    unbind(el) {\n        tooltipUnbind(el);\n    },\n    // Vue 3 Directive hooks\n    beforeMount(el, binding) {\n        tooltipBind(el, binding);\n    },\n    mounted(el, binding) {\n        tooltipUpdate(el, binding);\n    },\n    updated(el, binding) {\n        tooltipUpdate(el, binding);\n    },\n    unmounted(el) {\n        tooltipUnbind(el);\n    },\n};\n"],"names":["BentoTooltipPosition","PopperContainerPositionBasic","BentoTooltipState","BentoTooltipState2","EventKey","EventKey2","KeyCode","KeyCode2","Tooltip","BentoTypography","PopperContainer","value","props","conditionalClasses","computed","tabIndex","PopperContainerAriaRole","_sfc_main","defineComponent","tooltipInstances","ariaDescribedByAttr","tooltipId","generateUid","tooltip","open","tooltipProps","reactive","createTooltip","el","TooltipComponent","Vue2","BentoTooltip","destroyTooltip","getTooltipPosition","binding","getTooltipInstanceForTarget","ctx","showTooltip","tooltipInstance","isDialogOpen","node","nextTick","hideTooltip","_b","_a","_d","_c","tooltipBind","show","hide","listen","evt","tooltipUpdate","position","tooltipUnbind","context","removeListener","BentoTooltipDirective"],"mappings":"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"}

package/dist/chunks/use-has-slot.fbeb19ec.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-has-slot.fbeb19ec.js","sources":["../../src/composables/use-has-slot/use-has-slot.ts"],"sourcesContent":["import { isVue2, VNode } from 'vue-demi';\nimport type { Slots } from 'vue/types/v3-setup-context';\n\n/**\n * Composable function that allows to verify if a Slot exits in a component.\n *\n * @example\n * <script script lang=\"ts\">\n *    import { useHasSlot } from '@/composables/hasSlot';\n *    import { useSlots } from 'vue';\n *\n *    const slots = useSlots();\n *    const hasSlot = useHasSlot(slots);\n * </script>\n *\n * @param {function(slots: Slots)} useHasSlots Encloses the slots object to be checked when the closure is called\n * @returns {function(name: string)} Checks if the named slot defined by \"name\" exists in the component\n */\nexport const useHasSlot = (slots: Slots | { [key: string]: VNode[] }) => (name: string) => {\n    if (isVue2) {\n        return !!slots[name];\n    }\n\n    if (slots?.[name]) {\n        if (typeof slots?.[name] === 'function') {\n            return !!(slots as Slots)?.[name]?.();\n        }\n        if (Array.isArray(slots?.[name])) {\n            return slots?.[name]?.length > 0;\n        }\n    }\n\n    return false;\n};\n"],"names":["useHasSlot","slots","name"],"mappings":";AAkBO,MAAMA,IAAa,CAACC,MAA8C,CAACC,MAE3D,CAAC,CAACD,EAAMC,CAAI;"}
+{"version":3,"file":"use-has-slot.fbeb19ec.js","sources":["../../src/composables/use-has-slot/use-has-slot.ts"],"sourcesContent":["import { isVue2, VNode } from 'vue-demi';\nimport type { Slots } from 'vue/types/v3-setup-context';\n\n/**\n * Composable function that allows to verify if a Slot exits in a component.\n *\n * @example\n * <script script lang=\"ts\">\n *    import { useHasSlot } from '@/composables/hasSlot';\n *    import { useSlots } from 'vue';\n *\n *    const slots = useSlots();\n *    const hasSlot = useHasSlot(slots);\n * </script>\n *\n * @param {function(slots: Slots)} useHasSlots Encloses the slots object to be checked when the closure is called\n * @returns {function(name: string)} Checks if the named slot defined by \"name\" exists in the component\n */\nexport const useHasSlot = (slots: Slots | { [key: string]: VNode[] }) => (name: string) => {\n    if (isVue2) {\n        return !!slots[name];\n    }\n\n    if (slots?.[name]) {\n        if (typeof slots?.[name] === 'function') {\n            // Issue with named scoped slots in vue3\n            // Once fixed, checkbox-group should use this composable\n            return !!(slots as Slots)?.[name]?.();\n        }\n        if (Array.isArray(slots?.[name])) {\n            return slots?.[name]?.length > 0;\n        }\n    }\n\n    return false;\n};\n"],"names":["useHasSlot","slots","name"],"mappings":";AAkBO,MAAMA,IAAa,CAACC,MAA8C,CAACC,MAE3D,CAAC,CAACD,EAAMC,CAAI;"}