@adyen/bento-vue3 1.53.0 → 1.54.0

package/dist/chunks/{button-actions.BvGAE7sw.js.map → button-actions.CdlXZ29B.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-actions.BvGAE7sw.js","sources":["../../../core/src/components/button-actions/button-actions.types.ts","../../../core/src/components/loading-button/loading-button.types.ts","../../../vue2/src/components/button/components/loading-button/loading-button.vue","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.keys.ts","../../../vue2/src/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons.ts","../../../vue2/src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { BentoButtonProps } from '@/core/components/button/button.types';\nimport { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n\nexport interface BentoButtonActionObject<IconType = object> extends BentoButtonProps {\n    title: string;\n    event?: (event: Event) => void;\n    icon?: IconType;\n    iconLeft?: IconType;\n    iconRight?: IconType;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n    iconOnly?: boolean;\n}\n\nexport type BentoButtonActionsList<IconType = object> = Array<BentoButtonActionObject<IconType>>;\n\nexport enum BentoButtonActionsLayoutBasic {\n    BUTTONS_END = 'buttons-end',\n    FILL_CONTAINER = 'fill-container',\n    SPACE_BETWEEN = 'space-between',\n    VERTICAL_STACK = 'vertical-stack',\n}\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n","export enum BentoLoadingButtonState {\n    START = 'start',\n    LOADING = 'loading',\n    SUCCESS = 'success',\n    FAIL = 'fail',\n}\n\nexport type BentoLoadingButtonIconState = Partial<{ [key in BentoLoadingButtonState]: string }>;\n","<template>\n    <bento-button\n        :critical=\"isCritical\"\n        :variant=\"variant\"\n        :condensed=\"condensed\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        class=\"b-loading-button\"\n        :class=\"conditionalClasses\"\n        @click.capture.stop=\"onClick\"\n    >\n        <slot></slot>\n\n        <template v-if=\"state === 'start' && hasSlot('iconLeft')\" #iconLeft>\n            <slot name=\"iconLeft\"></slot>\n        </template>\n        <template v-else-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=\"t('failed')\" />\n                <checkmark v-else-if=\"state === 'success'\" :svg-title=\"t('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, useSlots } from 'vue';\n    import { BentoLoadingButtonState } from '@/core/components/loading-button/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    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Displays loading-button as critical\n         */\n        critical: {\n            type: BentoButton.props.critical.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * State of the button.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>,\n            default: BentoLoadingButtonState.START,\n            validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value),\n        },\n\n        /**\n         * Types of flavour of Button\n         */\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 slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const conditionalClasses = computed(() => ({\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]:\n            props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        'b-loading-button--loading': props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]:\n            props.state === BentoLoadingButtonState.SUCCESS,\n        [`b-loading-button--inverse`]: props.inverse,\n    }));\n\n    const isInverseLoadingIndicator = computed(\n        () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse)\n    );\n    const isCritical = computed(\n        () =>\n            (props.critical && props.state === BentoLoadingButtonState.START) ||\n            props.state === BentoLoadingButtonState.FAIL\n    );\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        if (props.state !== BentoLoadingButtonState.LOADING) {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g.  when you have any sort of asynchronous action and are waiting for a response\n     *\n     * @example\n     * import { BentoLoadingButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLoadingButton },\n     *     template: `\n     *          <bento-loading-button state=\"loading\" variant=\"secondary\">\n     *              Loading\n     *          </bento-loading button>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/loading-button/loading-button.scss\" />\n","export const BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY = Symbol(\n    'button actions with menu container injection key'\n);\n","import { computed, inject, nextTick, onMounted, onUnmounted, ref, Ref, watch } from 'vue';\nimport { observeSizeOfElement } from '@/utils/ts/resize';\nimport { BButtonActionsButtonsEndColumnGap } from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoButtonActionsList } from '../../button-actions.types';\nimport { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from '@/internal/button-actions-with-menu/button-actions-with-menu.keys';\n\nconst CONTAINER_QUERY = 242;\nconst BUTTONS_GAP = parseInt(BButtonActionsButtonsEndColumnGap, 10);\n\n/**\n * Calculates the width of the container and the buttons and decides if the buttons should be stacked or not\n *\n * @param buttonActions Reference to the container element\n * @param buttons Reference array of button elements\n * @param actions Button actions actions prop\n */\nexport const useStackButtons = (\n    buttonActions: Ref<HTMLDivElement>,\n    buttons: Ref<HTMLDivElement[]>,\n    actions: BentoButtonActionsList\n) => {\n    const originalButtonsWidth = ref(0);\n    let containerObserver: ResizeObserver | null = null;\n\n    const { buttonActionsWithMenu, menu, stackButtons } = inject(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, {\n        buttonActionsWithMenu: ref(null),\n        menu: ref(null),\n        stackButtons: ref(false),\n    });\n\n    const container = computed(() => buttonActionsWithMenu.value ?? buttonActions.value);\n\n    const computedButtons = computed(() => (menu.value ? [...buttons.value, menu.value.$el] : buttons.value));\n\n    const areButtonsWiderThanContainer = (updateOriginalButtonsWidth?: boolean) => {\n        const buttonsWidth = computedButtons.value?.reduce(\n            (acc, button) => acc + button.clientWidth + BUTTONS_GAP,\n            -BUTTONS_GAP - 1 // to remove the extra spacing, as if there's 3 buttons, only two will have a gap in between\n        );\n\n        const containersWidth = container.value.clientWidth;\n\n        if (updateOriginalButtonsWidth) {\n            originalButtonsWidth.value = containersWidth >= CONTAINER_QUERY && !stackButtons.value ? buttonsWidth : 0;\n        }\n        return originalButtonsWidth.value > containersWidth;\n    };\n\n    watch(\n        () => actions,\n        () => {\n            nextTick(() => {\n                stackButtons.value = areButtonsWiderThanContainer(true);\n            });\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        containerObserver = observeSizeOfElement(container.value, () => {\n            stackButtons.value = areButtonsWiderThanContainer(originalButtonsWidth.value === 0);\n        });\n    });\n\n    onUnmounted(() => {\n        containerObserver?.disconnect();\n    });\n\n    return stackButtons;\n};\n","<template>\n    <div ref=\"buttonActions\" class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div\n                v-for=\"(button, index) in reversedActionsList\"\n                :key=\"index\"\n                ref=\"buttons\"\n                class=\"b-button-actions__button-wrapper\"\n            >\n                <bento-loading-button\n                    v-if=\"button.state\"\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :state=\"button.state\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    {{ button.title }}\n                </bento-loading-button>\n                <bento-button\n                    v-else\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :link=\"button.link\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                        <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                    </template>\n                    <template v-if=\"!isIconOnly(button)\" #default>\n                        {{ button.title }}\n                    </template>\n                    <template v-if=\"button.iconRight\" #iconRight>\n                        <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                    </template>\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, ref } from 'vue';\n    import BentoButton from '../../button.vue';\n    import {\n        BentoButtonActionObject,\n        BentoButtonActionsLayout,\n        BentoButtonActionsList,\n    } from '@/core/components/button-actions/button-actions.types';\n    import { BentoLoadingButton } from '../loading-button';\n    import { useStackButtons } from '@/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons';\n\n    const props = defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * Each object in the list should have a `title`, an `event` and\n         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n         *\n         * `title`: Button's text.\n         *\n         * `event`: Event triggered when clicking the Button.\n         *\n         * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n         *\n         * @see BentoButton for a list of all the other props supported by each button action.\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon,\n         *   link: {\n         *           variant: 'default',\n         *           external: true,\n         *           to: 'https://www.adyen.com/'\n         *       },\n         *  }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         *   disabled: true,\n         *   variant: 'secondary',\n         *   critical: true\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * Sets the Button Actions to color scheme inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Defines the layout in which the button actions is presented.\n         * It can be one of:\n         *\n         * @values BUTTONS_START\n         * @values BUTTONS_END\n         * @values FILL_CONTAINER\n         * @values SPACE_BETWEEN\n         * @values VERTICAL_STACK\n         */\n        layout: {\n            type: String as PropType<BentoButtonActionsLayout | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (layout: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(layout),\n        },\n    });\n\n    const buttonActions = ref<HTMLDivElement>(null);\n    const buttons = ref<HTMLDivElement[]>(null);\n    const stackButtons = useStackButtons(buttonActions, buttons, props.actions);\n\n    const reversedActionsList = computed(() => props.actions.slice().reverse());\n    const generateButtonVariantByIndex = actionIndex => {\n        const lastActionIndex = props.actions.length - 1;\n        return actionIndex === lastActionIndex ? 'primary' : 'secondary';\n    };\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions--${props.layout}`]: true,\n        [`b-button-actions--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const generateButtonEvents = (button: BentoButtonActionObject) =>\n        button?.event !== undefined\n            ? {\n                  click: button.event,\n              }\n            : {};\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons.\n     *\n     * @example\n     * import { BentoButtonActions } from '@adyen/bento-vue2';\n     * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n     *\n     * const clickedAction = () => { //your action here }\n     *\n     * <template>\n     *     <bento-button-actions\n     *         :actions=\"[{\n     *             title: 'Primary',\n     *             event: clickedAction,\n     *             icon: MachineLearningIcon,\n     *         }, {\n     *             title: 'Secondary',\n     *             event: clickedAction,\n     *         }, {\n     *             title: 'Tertiary',\n     *             event: clickedAction,\n     *         }]\"\n     *     />\n     * </template>\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button-actions/button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","BentoLoadingButtonState","BentoLoadingButtonState2","__default__$1","messages","props","__props","emit","__emit","slots","useSlots","hasSlot","useHasSlot","t","useI18n","conditionalClasses","computed","isInverseLoadingIndicator","isCritical","onClick","e","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","CONTAINER_QUERY","BUTTONS_GAP","BButtonActionsButtonsEndColumnGap","useStackButtons","buttonActions","buttons","actions","originalButtonsWidth","ref","containerObserver","buttonActionsWithMenu","menu","stackButtons","inject","container","computedButtons","areButtonsWiderThanContainer","updateOriginalButtonsWidth","buttonsWidth","_a","acc","button","containersWidth","watch","nextTick","onMounted","observeSizeOfElement","onUnmounted","__default__","reversedActionsList","generateButtonVariantByIndex","actionIndex","lastActionIndex","generateButtonEvents","isIconOnly"],"mappings":"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"}
+{"version":3,"file":"button-actions.CdlXZ29B.js","sources":["../../../core/src/components/button-actions/button-actions.types.ts","../../../core/src/components/loading-button/loading-button.types.ts","../../../vue2/src/components/button/components/loading-button/loading-button.vue","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.keys.ts","../../../vue2/src/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons.ts","../../../vue2/src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { BentoButtonProps } from '@/core/components/button/button.types';\nimport { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n\nexport interface BentoButtonActionObject<IconType = object> extends BentoButtonProps {\n    title: string;\n    event?: (event: Event) => void;\n    icon?: IconType;\n    iconLeft?: IconType;\n    iconRight?: IconType;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n    iconOnly?: boolean;\n}\n\nexport type BentoButtonActionsList<IconType = object> = Array<BentoButtonActionObject<IconType>>;\n\nexport enum BentoButtonActionsLayoutBasic {\n    BUTTONS_END = 'buttons-end',\n    FILL_CONTAINER = 'fill-container',\n    SPACE_BETWEEN = 'space-between',\n    VERTICAL_STACK = 'vertical-stack',\n}\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n","export enum BentoLoadingButtonState {\n    START = 'start',\n    LOADING = 'loading',\n    SUCCESS = 'success',\n    FAIL = 'fail',\n}\n\nexport type BentoLoadingButtonIconState = Partial<{ [key in BentoLoadingButtonState]: string }>;\n","<template>\n    <bento-button\n        :critical=\"isCritical\"\n        :variant=\"variant\"\n        :condensed=\"condensed\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        class=\"b-loading-button\"\n        :class=\"conditionalClasses\"\n        @click.capture.stop=\"onClick\"\n    >\n        <slot></slot>\n\n        <template v-if=\"state === 'start' && hasSlot('iconLeft')\" #iconLeft>\n            <slot name=\"iconLeft\"></slot>\n        </template>\n        <template v-else-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=\"t('failed')\" />\n                <checkmark v-else-if=\"state === 'success'\" :svg-title=\"t('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, useSlots } from 'vue';\n    import { BentoLoadingButtonState } from '@/core/components/loading-button/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    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Displays loading-button as critical\n         */\n        critical: {\n            type: BentoButton.props.critical.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * State of the button.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>,\n            default: BentoLoadingButtonState.START,\n            validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value),\n        },\n\n        /**\n         * Types of flavour of Button\n         */\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 slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const conditionalClasses = computed(() => ({\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]:\n            props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        'b-loading-button--loading': props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]:\n            props.state === BentoLoadingButtonState.SUCCESS,\n        [`b-loading-button--inverse`]: props.inverse,\n    }));\n\n    const isInverseLoadingIndicator = computed(\n        () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse)\n    );\n    const isCritical = computed(\n        () =>\n            (props.critical && props.state === BentoLoadingButtonState.START) ||\n            props.state === BentoLoadingButtonState.FAIL\n    );\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        if (props.state !== BentoLoadingButtonState.LOADING) {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g.  when you have any sort of asynchronous action and are waiting for a response\n     *\n     * @example\n     * import { BentoLoadingButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLoadingButton },\n     *     template: `\n     *          <bento-loading-button state=\"loading\" variant=\"secondary\">\n     *              Loading\n     *          </bento-loading button>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/loading-button/loading-button.scss\" />\n","export const BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY = Symbol(\n    'button actions with menu container injection key'\n);\n","import { computed, inject, nextTick, onMounted, onUnmounted, ref, Ref, watch } from 'vue';\nimport { observeSizeOfElement } from '@/utils/ts/resize';\nimport { BButtonActionsButtonsEndColumnGap } from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoButtonActionsList } from '../../button-actions.types';\nimport { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from '@/internal/button-actions-with-menu/button-actions-with-menu.keys';\n\nconst CONTAINER_QUERY = 242;\nconst BUTTONS_GAP = parseInt(BButtonActionsButtonsEndColumnGap, 10);\n\n/**\n * Calculates the width of the container and the buttons and decides if the buttons should be stacked or not\n *\n * @param buttonActions Reference to the container element\n * @param buttons Reference array of button elements\n * @param actions Button actions actions prop\n */\nexport const useStackButtons = (\n    buttonActions: Ref<HTMLDivElement>,\n    buttons: Ref<HTMLDivElement[]>,\n    actions: BentoButtonActionsList\n) => {\n    const originalButtonsWidth = ref(0);\n    let containerObserver: ResizeObserver | null = null;\n\n    const { buttonActionsWithMenu, menu, stackButtons } = inject(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, {\n        buttonActionsWithMenu: ref(null),\n        menu: ref(null),\n        stackButtons: ref(false),\n    });\n\n    const container = computed(() => buttonActionsWithMenu.value ?? buttonActions.value);\n\n    const computedButtons = computed(() => (menu.value ? [...buttons.value, menu.value.$el] : buttons.value));\n\n    const areButtonsWiderThanContainer = (updateOriginalButtonsWidth?: boolean) => {\n        const buttonsWidth = computedButtons.value?.reduce(\n            (acc, button) => acc + button.clientWidth + BUTTONS_GAP,\n            -BUTTONS_GAP - 1 // to remove the extra spacing, as if there's 3 buttons, only two will have a gap in between\n        );\n\n        const containersWidth = container.value.clientWidth;\n\n        if (updateOriginalButtonsWidth) {\n            originalButtonsWidth.value = containersWidth >= CONTAINER_QUERY && !stackButtons.value ? buttonsWidth : 0;\n        }\n        return originalButtonsWidth.value > containersWidth;\n    };\n\n    watch(\n        () => actions,\n        () => {\n            nextTick(() => {\n                stackButtons.value = areButtonsWiderThanContainer(true);\n            });\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        containerObserver = observeSizeOfElement(container.value, () => {\n            stackButtons.value = areButtonsWiderThanContainer(originalButtonsWidth.value === 0);\n        });\n    });\n\n    onUnmounted(() => {\n        containerObserver?.disconnect();\n    });\n\n    return stackButtons;\n};\n","<template>\n    <div ref=\"buttonActions\" class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div\n                v-for=\"(button, index) in reversedActionsList\"\n                :key=\"index\"\n                ref=\"buttons\"\n                class=\"b-button-actions__button-wrapper\"\n            >\n                <bento-loading-button\n                    v-if=\"button.state\"\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :state=\"button.state\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    {{ button.title }}\n                </bento-loading-button>\n                <bento-button\n                    v-else\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :link=\"button.link\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                        <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                    </template>\n                    <template v-if=\"!isIconOnly(button)\" #default>\n                        {{ button.title }}\n                    </template>\n                    <template v-if=\"button.iconRight\" #iconRight>\n                        <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                    </template>\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import BentoButton from '../../button.vue';\n    import {\n        BentoButtonActionObject,\n        BentoButtonActionsLayout,\n    } from '@/core/components/button-actions/button-actions.types';\n    import type { BentoButtonActionsProps } from './button-actions.types';\n    import { BentoLoadingButton } from '../loading-button';\n    import { useStackButtons } from '@/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons';\n\n    const props = withDefaults(defineProps<BentoButtonActionsProps>(), {\n        inverse: false,\n        layout: BentoButtonActionsLayout.BUTTONS_END,\n    });\n\n    const buttonActions = ref<HTMLDivElement>(null);\n    const buttons = ref<HTMLDivElement[]>(null);\n    const stackButtons = useStackButtons(buttonActions, buttons, props.actions);\n\n    const reversedActionsList = computed(() => props.actions.slice().reverse());\n    const generateButtonVariantByIndex = actionIndex => {\n        const lastActionIndex = props.actions.length - 1;\n        return actionIndex === lastActionIndex ? 'primary' : 'secondary';\n    };\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions--${props.layout}`]: true,\n        [`b-button-actions--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const generateButtonEvents = (button: BentoButtonActionObject) =>\n        button?.event !== undefined\n            ? {\n                  click: button.event,\n              }\n            : {};\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons.\n     *\n     * @example\n     * import { BentoButtonActions } from '@adyen/bento-vue2';\n     * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n     *\n     * const clickedAction = () => { //your action here }\n     *\n     * <template>\n     *     <bento-button-actions\n     *         :actions=\"[{\n     *             title: 'Primary',\n     *             event: clickedAction,\n     *             icon: MachineLearningIcon,\n     *         }, {\n     *             title: 'Secondary',\n     *             event: clickedAction,\n     *         }, {\n     *             title: 'Tertiary',\n     *             event: clickedAction,\n     *         }]\"\n     *     />\n     * </template>\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button-actions/button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","BentoLoadingButtonState","BentoLoadingButtonState2","__default__$1","messages","props","__props","emit","__emit","slots","useSlots","hasSlot","useHasSlot","t","useI18n","conditionalClasses","computed","isInverseLoadingIndicator","isCritical","onClick","e","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","CONTAINER_QUERY","BUTTONS_GAP","BButtonActionsButtonsEndColumnGap","useStackButtons","buttonActions","buttons","actions","originalButtonsWidth","ref","containerObserver","buttonActionsWithMenu","menu","stackButtons","inject","container","computedButtons","areButtonsWiderThanContainer","updateOriginalButtonsWidth","buttonsWidth","_a","acc","button","containersWidth","watch","nextTick","onMounted","observeSizeOfElement","onUnmounted","__default__","reversedActionsList","generateButtonVariantByIndex","actionIndex","lastActionIndex","generateButtonEvents","isIconOnly"],"mappings":"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"}

package/dist/chunks/{calendar.DKHNrb9_.js → calendar.BRsV4rkQ.js}

@@ -10,7 +10,7 @@ import "./events.FNmSWp_P.js";
 import { a as Ze } from "./keyboard-navigation.CqgGzfZQ.js";
 import { g as et } from "./generate-uid.NJ8tVoha.js";
 import { u as tt } from "./i18n.D9azDLPe.js";
-import { h as ct } from "./index.C5sL_d0I.js";
+import { h as ct } from "./index.BzJQl-2M.js";
 import "../assets/calendar.css";
 function fe(e, t) {
   S(2, arguments);
@@ -53,7 +53,7 @@ function at(e, t) {
   var a = I(t);
   return te(e, a * 12);
 }
-function he(e, t) {
+function ye(e, t) {
   S(2, arguments);
   var a = ae(e), n = ae(t);
   return a.getTime() === n.getTime();
@@ -92,7 +92,7 @@ function mt(e) {
   var t = w(e), a = t.getFullYear(), n = t.getMonth(), o = /* @__PURE__ */ new Date(0);
   return o.setFullYear(a, n + 1, 0), o.setHours(0, 0, 0, 0), o.getDate();
 }
-function ht(e, t) {
+function yt(e, t) {
   S(2, arguments);
   var a = I(t);
   return fe(e, -a);
@@ -102,7 +102,7 @@ function ve(e, t) {
   var a = I(t);
   return te(e, -a);
 }
-function yt(e, t) {
+function ht(e, t) {
   S(2, arguments);
   var a = w(e), n = w(t);
   return a.getTime() > n.getTime();
@@ -112,7 +112,7 @@ function gt(e, t) {
   var a = w(e), n = w(t);
   return a.getTime() < n.getTime();
 }
-function ye(e, t) {
+function he(e, t) {
   S(2, arguments);
   var a = w(e), n = w(t);
   return a.getFullYear() === n.getFullYear() && a.getMonth() === n.getMonth();
@@ -338,7 +338,7 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
   }, c = (u) => {
     const g = !!d.value[u == null ? void 0 : u.toDateString()];
     u && g && d.value[u.toDateString()].$el.focus();
-  }, y = (u) => {
+  }, h = (u) => {
     u.preventDefault(), u.stopImmediatePropagation(), u.stopPropagation();
   }, N = ({ nextDate: u, isIncreasingDays: g, amountOfMonths: L, isCalendarButtonsNav: V }) => {
     if (!V && a && a(u))
@@ -366,29 +366,29 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
      */
     // ArrowRight
     moveToNextDay: (u) => {
-      y(u), N({ nextDate: fe(i.value, 1), isIncreasingDays: !0 });
+      h(u), N({ nextDate: fe(i.value, 1), isIncreasingDays: !0 });
     },
     // ArrowLeft
     moveToPreviousDay: (u) => {
-      y(u), N({ nextDate: Ue(i.value, 1), isIncreasingDays: !1 });
+      h(u), N({ nextDate: Ue(i.value, 1), isIncreasingDays: !1 });
     },
     // ArrowUp
     moveToPreviousWeek: (u) => {
-      y(u), N({ nextDate: Ue(i.value, 7), isIncreasingDays: !1 });
+      h(u), N({ nextDate: Ue(i.value, 7), isIncreasingDays: !1 });
     },
     // ArrowDown
     moveToNextWeek: (u) => {
-      y(u), N({ nextDate: fe(i.value, 7), isIncreasingDays: !0 });
+      h(u), N({ nextDate: fe(i.value, 7), isIncreasingDays: !0 });
     },
     // Home
     moveToFirstDayOfWeek: (u) => {
-      y(u), N({
+      h(u), N({
         nextDate: ge(i.value, { weekStartsOn: n }),
         isIncreasingDays: !1
       });
     },
     moveToFirstMonthOfYear: (u) => {
-      y(u);
+      h(u);
       const g = Ce(l.value, Be(l.value));
       N({
         nextDate: Be(l.value),
@@ -398,13 +398,13 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
     },
     // End
     moveToLastDayOfWeek: (u) => {
-      y(u), N({
+      h(u), N({
         nextDate: be(i.value, { weekStartsOn: n }),
         isIncreasingDays: !0
       });
     },
     moveToLastMonthOfYear: (u) => {
-      y(u);
+      h(u);
       const g = bt(l.value, { month: 11, date: 1 }), L = Ce(g, l.value);
       N({
         nextDate: g,
@@ -414,7 +414,7 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
     },
     // PageUp
     moveToPreviousMonth: (u, g = !1, L = 1) => {
-      y(u);
+      h(u);
       const V = L;
       N({
         nextDate: ve(i.value, V),
@@ -425,7 +425,7 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
     },
     // Shift+PageUp
     moveToPreviousYear: (u, g = !1) => {
-      y(u);
+      h(u);
       const L = 12;
       N({
         nextDate: ve(i.value, L),
@@ -436,7 +436,7 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
     },
     // PageDown
     moveToNextMonth: (u, g = !1, L = 1) => {
-      y(u);
+      h(u);
       const V = L;
       N({
         nextDate: te(i.value, V),
@@ -447,7 +447,7 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
     },
     // Shift-PageDown
     moveToNextYear: (u, g = !1) => {
-      y(u);
+      h(u);
       const L = 12;
       N({
         nextDate: te(i.value, L),
@@ -550,9 +550,9 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
       moveToNextDay: v,
       moveToPreviousDay: m,
       moveToPreviousWeek: c,
-      moveToNextWeek: y,
+      moveToNextWeek: h,
       moveToFirstDayOfWeek: N,
-      moveToLastDayOfWeek: h,
+      moveToLastDayOfWeek: y,
       moveToPreviousMonth: b,
       moveToPreviousYear: Y,
       moveToNextMonth: T,
@@ -600,15 +600,15 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
       // Enums
       CalendarMonthEvent: U,
       // Functions
-      isSelectedDate: (M) => r.value && he(r.value, M) && !e.endDate ? !0 : e.startDate && e.endDate && Ee(M, { start: e.startDate, end: e.endDate }),
+      isSelectedDate: (M) => r.value && ye(r.value, M) && !e.endDate ? !0 : e.startDate && e.endDate && Ee(M, { start: e.startDate, end: e.endDate }),
       showNextMonth: D,
       showPreviousMonth: f,
       dayVariant: (M) => {
-        if (!e.isRange || he(e.startDate, e.endDate))
+        if (!e.isRange || ye(e.startDate, e.endDate))
           return G.SINGLE;
-        if (e.startDate && he(e.startDate, M))
+        if (e.startDate && ye(e.startDate, M))
           return G.BEGINNING;
-        if (e.endDate && he(e.endDate, M))
+        if (e.endDate && ye(e.endDate, M))
           return G.END;
         if (e.startDate && e.endDate && Ee(M, { start: e.startDate, end: e.endDate }))
           return G.MIDDLE;
@@ -624,9 +624,9 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
         "keydown:arrow-right": v,
         "keydown:arrow-left": m,
         "keydown:arrow-up": c,
-        "keydown:arrow-down": y,
+        "keydown:arrow-down": h,
         "keydown:home": N,
-        "keydown:end": h,
+        "keydown:end": y,
         "keydown:page-up": b,
         "keydown:shift-page-up": Y,
         "keydown:page-down": T,
@@ -637,9 +637,9 @@ const Ue = /* @__PURE__ */ _t($t), ot = ({ currentSelectedDate: e, month: t, isD
       moveToNextDay: v,
       moveToPreviousDay: m,
       moveToPreviousWeek: c,
-      moveToNextWeek: y,
+      moveToNextWeek: h,
       moveToFirstDayOfWeek: N,
-      moveToLastDayOfWeek: h,
+      moveToLastDayOfWeek: y,
       moveToPreviousMonth: b,
       moveToPreviousYear: Y,
       moveToNextMonth: T,
@@ -723,10 +723,10 @@ function Ut(e, t, a, n, o, s) {
             key: 0,
             colspan: 7 - v.length
           }, null, 8, Bt)) : ce("", !0),
-          (O(!0), $(le, null, ue(v, (c, y) => (O(), ee(D, {
+          (O(!0), $(le, null, ue(v, (c, h) => (O(), ee(D, {
             ref_for: !0,
             ref: e.addDayRef(c),
-            key: `calendar-day-${y}`,
+            key: `calendar-day-${h}`,
             day: c,
             disabled: e.computedIsDateDisabled(c),
             selected: e.isSelectedDate(c),
@@ -837,9 +837,9 @@ const Gt = ["tabindex", "aria-selected"], Wt = { class: "b-calendar-year-month__
       moveToPreviousMonth: v,
       moveToPreviousYear: m,
       moveToNextMonth: c,
-      moveToNextYear: y,
+      moveToNextYear: h,
       moveToFirstMonthOfYear: N,
-      moveToLastMonthOfYear: h,
+      moveToLastMonthOfYear: y,
       focusOnDate: b
     } = ot(
       {
@@ -860,7 +860,7 @@ const Gt = ["tabindex", "aria-selected"], Wt = { class: "b-calendar-year-month__
         E.push(z);
       }
       return E;
-    }), T = (E) => !o.isRange || ye(o.startDate, o.endDate) ? H.SINGLE : o.startDate && ye(o.startDate, E) ? H.BEGINNING : o.endDate && ye(o.endDate, E) ? H.END : o.startDate && o.endDate && Ee(E, { start: o.startDate, end: o.endDate }) ? H.MIDDLE : null, P = (E) => D.value && ye(D.value, E) ? !0 : o.startDate && o.endDate && Ee(E, { start: o.startDate, end: o.endDate }), p = (E) => {
+    }), T = (E) => !o.isRange || he(o.startDate, o.endDate) ? H.SINGLE : o.startDate && he(o.startDate, E) ? H.BEGINNING : o.endDate && he(o.endDate, E) ? H.END : o.startDate && o.endDate && Ee(E, { start: o.startDate, end: o.endDate }) ? H.MIDDLE : null, P = (E) => D.value && he(D.value, E) ? !0 : o.startDate && o.endDate && Ee(E, { start: o.startDate, end: o.endDate }), p = (E) => {
       s("input", E);
     }, R = o.isRange ? {} : {
       "keydown:arrow-right": c,
@@ -868,9 +868,9 @@ const Gt = ["tabindex", "aria-selected"], Wt = { class: "b-calendar-year-month__
       "keydown:arrow-up": (E) => v(E, !1, 4),
       "keydown:arrow-down": (E) => c(E, !1, 4),
       "keydown:home": N,
-      "keydown:end": h,
+      "keydown:end": y,
       "keydown:page-up": m,
-      "keydown:page-down": y
+      "keydown:page-down": h
     };
     return (E, C) => He((O(), $("div", Ve({ class: "b-calendar-year" }, xe(_(R), !0)), [
       A("div", xt, [
@@ -903,7 +903,7 @@ const Gt = ["tabindex", "aria-selected"], Wt = { class: "b-calendar-year-month__
           d.value ? (O(), ee(_(Se), {
             key: 0,
             variant: "tertiary",
-            onClick: C[1] || (C[1] = (B) => _(y)(B, !0))
+            onClick: C[1] || (C[1] = (B) => _(h)(B, !0))
           }, {
             iconLeft: J(() => [
               K(_(Qe), {
@@ -915,7 +915,7 @@ const Gt = ["tabindex", "aria-selected"], Wt = { class: "b-calendar-year-month__
         ])
       ]),
       A("table", {
-        class: "b-calendar-month__month-container",
+        class: "b-calendar-year__year-container",
         role: "grid",
         "aria-labelledby": _(n)
       }, [
@@ -939,7 +939,7 @@ const Gt = ["tabindex", "aria-selected"], Wt = { class: "b-calendar-year-month__
       [_(Ze)]
     ]);
   }
-}), je = /* @__PURE__ */ me(Qt, [["__scopeId", "data-v-76c9fd8a"]]), Jt = ({ selectedDate: e }, t) => {
+}), je = /* @__PURE__ */ me(Qt, [["__scopeId", "data-v-0a67988c"]]), Jt = ({ selectedDate: e }, t) => {
   const a = qe({
     startDate: null,
     endDate: null
@@ -998,66 +998,66 @@ const Gt = ["tabindex", "aria-selected"], Wt = { class: "b-calendar-year-month__
   se(
     () => e.value,
     () => {
-      let { startDate: h = null, endDate: b = null } = e.value || {};
-      h && (h = ae(h)), b && (b = ae(b)), !(h && t && t(h) || b && t && t(b) || h && b && yt(h, b)) && (v.startDate = h, v.endDate = b);
+      let { startDate: y = null, endDate: b = null } = e.value || {};
+      y && (y = ae(y)), b && (b = ae(b)), !(y && t && t(y) || b && t && t(b) || y && b && ht(y, b)) && (v.startDate = y, v.endDate = b);
     },
     { immediate: !0, deep: !0 }
   );
-  const c = (h, b, Y) => {
-    if (v.startDate = h, v.endDate = b, a.value) {
-      const T = Dt(b, h) - a.value;
-      T > 0 && (Y < 1 ? (v.startDate = h, v.endDate = ht(b, T)) : (v.startDate = fe(h, T), v.endDate = b));
+  const c = (y, b, Y) => {
+    if (v.startDate = y, v.endDate = b, a.value) {
+      const T = Dt(b, y) - a.value;
+      T > 0 && (Y < 1 ? (v.startDate = y, v.endDate = yt(b, T)) : (v.startDate = fe(y, T), v.endDate = b));
     }
     r(X.START_DATE_SELECTED, v.startDate), r(X.END_DATE_SELECTED, v.endDate);
-  }, y = (h) => {
+  }, h = (y) => {
     var b, Y, T, P;
-    if (!(!m.value || t && t(h)))
-      if (gt(h, m.value)) {
+    if (!(!m.value || t && t(y)))
+      if (gt(y, m.value)) {
         if (((b = n == null ? void 0 : n.value) == null ? void 0 : b.type) === "weekly") {
-          const { startDate: p, endDate: R } = D(h, m.value, s.value, l.value);
+          const { startDate: p, endDate: R } = D(y, m.value, s.value, l.value);
           c(p, R, -1);
           return;
         }
         if (((Y = n == null ? void 0 : n.value) == null ? void 0 : Y.type) === "monthly") {
-          const { startDate: p, endDate: R } = f(h, m.value, s.value, l.value);
+          const { startDate: p, endDate: R } = f(y, m.value, s.value, l.value);
           c(p, R, -1);
           return;
         }
-        c(h, m.value, -1);
+        c(y, m.value, -1);
       } else {
         if (((T = n == null ? void 0 : n.value) == null ? void 0 : T.type) === "weekly") {
-          const { startDate: p, endDate: R } = D(m.value, h, s.value, l.value);
+          const { startDate: p, endDate: R } = D(m.value, y, s.value, l.value);
           c(p, R, 1);
           return;
         }
         if (((P = n == null ? void 0 : n.value) == null ? void 0 : P.type) === "monthly") {
-          const { startDate: p, endDate: R } = f(m.value, h, s.value, l.value);
+          const { startDate: p, endDate: R } = f(m.value, y, s.value, l.value);
           c(p, R, 1);
           return;
         }
-        c(m.value, h, 1);
+        c(m.value, y, 1);
       }
   };
   return {
     internalValue: v,
-    onDateInput: (h) => {
+    onDateInput: (y) => {
       var b, Y;
       if (m.value)
         m.value = null, r(X.INPUT, v);
       else {
-        let T = h;
+        let T = y;
         if (((b = n == null ? void 0 : n.value) == null ? void 0 : b.type) === "weekly") {
-          const { startDate: P, endDate: p } = D(h);
+          const { startDate: P, endDate: p } = D(y);
           T = P, c(T, p);
         }
         if (((Y = n == null ? void 0 : n.value) == null ? void 0 : Y.type) === "monthly") {
-          const { startDate: P, endDate: p } = f(h);
+          const { startDate: P, endDate: p } = f(y);
           T = P, c(T, p);
         }
-        m.value = T, y(T);
+        m.value = T, h(T);
       }
     },
-    onMouseOver: y
+    onMouseOver: h
   };
 }, ta = De({
   name: "calendar",
@@ -1138,12 +1138,12 @@ const Gt = ["tabindex", "aria-selected"], Wt = { class: "b-calendar-year-month__
     se(
       () => e.value,
       () => {
-        var c, y, N;
+        var c, h, N;
         if (e.isRange)
-          n.value = e != null && e.showEndDateOnOpen && ((c = e.value) != null && c.endDate) ? (y = e.value) == null ? void 0 : y.endDate : ((N = e.value) == null ? void 0 : N.startDate) || /* @__PURE__ */ new Date();
+          n.value = e != null && e.showEndDateOnOpen && ((c = e.value) != null && c.endDate) ? (h = e.value) == null ? void 0 : h.endDate : ((N = e.value) == null ? void 0 : N.startDate) || /* @__PURE__ */ new Date();
         else {
-          const h = e.defaultDisplayMonth && new Date(e.defaultDisplayMonth).getTime() ? new Date(e.defaultDisplayMonth) : /* @__PURE__ */ new Date();
-          n.value = e.value || h;
+          const y = e.defaultDisplayMonth && new Date(e.defaultDisplayMonth).getTime() ? new Date(e.defaultDisplayMonth) : /* @__PURE__ */ new Date();
+          n.value = e.value || y;
         }
       },
       { immediate: !0 }
@@ -1174,11 +1174,11 @@ const Gt = ["tabindex", "aria-selected"], Wt = { class: "b-calendar-year-month__
       },
       t
     ), d = (c) => e.numberOfMonths === 1 ? re.UNIQUE : c === 0 ? re.FIRST : c === e.numberOfMonths - 1 ? re.LAST : re.MIDDLE, D = k(() => (c) => {
-      const y = e != null && e.showEndDateOnOpen && e.isRange ? ve(n.value, e.numberOfMonths - 1) : n.value;
-      return te(y, c);
+      const h = e != null && e.showEndDateOnOpen && e.isRange ? ve(n.value, e.numberOfMonths - 1) : n.value;
+      return te(h, c);
     }), f = k(() => (c) => {
-      const y = e != null && e.showEndDateOnOpen ? Mt(n.value, e.numberOfMonths - 1) : n.value;
-      return at(y, c);
+      const h = e != null && e.showEndDateOnOpen ? Mt(n.value, e.numberOfMonths - 1) : n.value;
+      return at(h, c);
     });
     return {
       // Refs
@@ -1231,10 +1231,10 @@ function aa(e, t, a, n, o, s) {
     }, null, 40, ["first-day-of-week", "is-date-disabled", "month", "year", "position", "min", "max", "is-range", "start-date", "end-date", "granularity", "onInput", "onMouseover", "onChangeDay", "onNextMonth", "onPreviousMonth"]))), 128))
   ], 2);
 }
-const ha = /* @__PURE__ */ me(ta, [["render", aa], ["__scopeId", "data-v-71902e62"]]);
+const ya = /* @__PURE__ */ me(ta, [["render", aa], ["__scopeId", "data-v-71902e62"]]);
 export {
   Z as C,
-  ha as a,
+  ya as a,
   X as b,
   re as c,
   Te as d,
@@ -1242,11 +1242,11 @@ export {
   ge as f,
   fe as g,
   be as h,
-  he as i,
-  ht as j,
+  ye as i,
+  yt as j,
   te as k,
   ve as l,
   Ne as s,
   Zt as u
 };
-//# sourceMappingURL=calendar.DKHNrb9_.js.map
+//# sourceMappingURL=calendar.BRsV4rkQ.js.map