@adyen/bento-vue3 1.88.1 → 1.89.2

package/dist/chunks/{alert.CDWtu0Hu.js.map → alert.C_8-VNi_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"alert.CDWtu0Hu.js","sources":["../../../vue2/src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../../vue2/src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#001222\" fill-rule=\"evenodd\" d=\"M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z\" clip-rule=\"evenodd\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\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 slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits<{\n        /**\n         * Emits event when the alert is closed. `closeButton` must be `true`\n         */\n        (e: 'close-alert');\n    }>();\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Adds a close button on the right side of the alert\n             */\n            closeButton?: boolean;\n\n            /**\n             * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n             * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING\n             */\n            type?: BentoAlertTypeOption | `${BentoAlertTypeOption}`;\n\n            /**\n             * Variant for the alert\n             * @values DEFAULT, TIP\n             */\n            variant?: BentoAlertVariant | `${BentoAlertVariant}`;\n        }>(),\n        {\n            closeButton: false,\n            type: BentoAlertTypeOption.HIGHLIGHT,\n            variant: BentoAlertVariant.DEFAULT,\n        }\n    );\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","onMounted"],"mappings":";;;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAZZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,+CAAAD,EAAA,OAAA;AAAA;;QAA4E,MAAA;AAAA,QAAe,aAAA;AAAA,QAAoB,GAAA;AAAA,QAAwyE,aAAA;AAAA;IAFnmF,IAAA,GAAAL,CAAA;AAAA;;QAE6oF,IAAA,0CAAAK,EAAA;AAAA;;UAA0D,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAF9tF,IAAA,GAAAJ,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCqKIM,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;AApGA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GA0BA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAV,EAAA,CAAA,GAEAW,IAAAC,EAAA,MAAAL,EAAA,YAAAtB,EAAA,GAAA,GAEA4B,IAAAD,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAL,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAtB,EAAA,GAAA,EAAA,GAAA0B,EAAA;AAAA,IACkB,EAAA,GAGxDG,IAAAF,EAAA,MAAAH,EAAA,GAAAF,EAAA,IAAA,MAAA,CAAA,GAEAQ,IAAAH,EAAA,MAAA;AACI,cAAAL,EAAA,MAAA;AAAA,QAAoB,KAAApB,EAAA;AAEZ,iBAAA6B;AAAA,QAAO,KAAA7B,EAAA;AAEP,iBAAA8B;AAAA,QAAO,KAAA9B,EAAA;AAEP,iBAAA+B;AAAA,QAAO,KAAA/B,EAAA;AAAA,QACe;AAEtB,iBAAAgC;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAR,EAAA,OAAA;AAAA,MAA8C,IAAAS,EAAA;AAAA,MACf,SAAAV,EAAA,QAAAW,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAX,EAAA,MAAAL,EAAA,SAAApB,EAAA,YAAA,WAAA,OAAA,GAEAqC,IAAA,MAAA;AACI,MAAAnB,EAAAhB,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAAoC,EAAA,MAAA;AACI,UAAA,CAAAxB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert.C_8-VNi_.js","sources":["../../../vue2/src/components/alert/alert.types.ts","../../../ui-assets/icons-16/dist/vue/info-filled.vue","../../../vue2/src/components/alert/alert.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertVariant {\n    DEFAULT = 'default',\n    TIP = 'tip',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoAlertTypeOption {\n    WARNING = 'warning',\n    CRITICAL = 'critical',\n    HIGHLIGHT = 'highlight',\n    SUCCESS = 'success',\n}\n\n/**\n * @deprecated from version 2.0.0. Use \"@close-alert\" instead.\n */\nexport enum BentoAlertEvent {\n    CLOSE_ALERT = 'close-alert',\n}\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-16-info_filled__a' + uuid + ')'\"><path fill=\"#001222\" fill-rule=\"evenodd\" d=\"M5.03418 0.839544C6.45015 0.253058 8.00853 0.0992122 9.51172 0.398138C11.015 0.697159 12.3966 1.43547 13.4805 2.51923C14.5642 3.60301 15.3025 4.98476 15.6016 6.48798C15.9005 7.99113 15.7466 9.54958 15.1602 10.9655C14.5736 12.3816 13.5801 13.5925 12.3057 14.444C11.1109 15.2423 9.71924 15.6917 8.28711 15.7448L8 15.7497C5.94458 15.7497 3.97294 14.9336 2.51953 13.4802C1.06623 12.0268 0.250005 10.055 0.25 7.9997C0.250066 6.4671 0.70424 4.96838 1.55566 3.69404C2.40724 2.41967 3.61814 1.42609 5.03418 0.839544ZM6.25 6.2497V7.7497H7.25V10.2497H6.25V11.7497H9.75V10.2497H8.75V6.2497H6.25ZM7.75 3.4997C7.58674 3.4997 7.42763 3.54211 7.28418 3.61786C7.25386 3.63389 7.22303 3.64949 7.19434 3.66865L7.07812 3.75947C7.04744 3.78732 7.01817 3.817 6.99121 3.84833C6.97917 3.86236 6.96827 3.8776 6.95703 3.89228C6.93942 3.91522 6.9228 3.93915 6.90723 3.96357C6.90005 3.97485 6.89248 3.98618 6.88574 3.99775C6.86351 4.03594 6.84324 4.07574 6.82617 4.11689L6.78027 4.25751C6.77017 4.29795 6.7628 4.33927 6.75781 4.38056C6.75552 4.39961 6.75411 4.41902 6.75293 4.43818C6.75166 4.45856 6.75196 4.47926 6.75195 4.4997C6.75195 4.52207 6.75144 4.54472 6.75293 4.56708C6.75579 4.60979 6.76114 4.65273 6.76953 4.69501L6.80859 4.83661C6.82299 4.87685 6.84098 4.91584 6.86035 4.9538C6.86847 4.96971 6.87775 4.98522 6.88672 5.00068C6.89748 5.01922 6.90895 5.03753 6.9209 5.05536C6.93323 5.07376 6.94544 5.09248 6.95898 5.11005C6.98495 5.14371 7.01269 5.17643 7.04297 5.20673L7.1543 5.30341C7.19021 5.33003 7.2285 5.35325 7.26758 5.3747C7.27775 5.38031 7.28847 5.38508 7.29883 5.39033C7.32903 5.40554 7.35995 5.41924 7.3916 5.43134C7.40264 5.43559 7.41361 5.44018 7.4248 5.44404C7.46721 5.45855 7.51041 5.47134 7.55469 5.48017C7.59672 5.48853 7.63919 5.49291 7.68164 5.49579C7.70021 5.49707 7.71872 5.49751 7.7373 5.49775C7.76179 5.49804 7.78614 5.49729 7.81055 5.49579C7.82982 5.49462 7.84899 5.4932 7.86816 5.49091C7.90982 5.48592 7.95139 5.47962 7.99219 5.46943L8.13281 5.42353C8.1739 5.40649 8.21283 5.38517 8.25098 5.36298C8.2626 5.35623 8.27383 5.3487 8.28516 5.3415C8.30964 5.32589 8.33345 5.30934 8.35645 5.29169C8.37116 5.28043 8.38633 5.26958 8.40039 5.25751C8.43176 5.23053 8.46235 5.20229 8.49023 5.17158L8.58105 5.05536C8.69084 4.89096 8.75 4.6974 8.75 4.4997C8.74992 4.2346 8.64449 3.98013 8.45703 3.79267C8.26951 3.60523 8.01514 3.4997 7.75 3.4997Z\" clip-rule=\"evenodd\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-16-info_filled__a' + uuid\"><rect width=\"16\" height=\"16\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-alert\" :role=\"computedRole\">\n        <div class=\"b-alert__inner-container\" :class=\"alertConditionalClasses\">\n            <div class=\"b-alert__icon\">\n                <component :is=\"iconComponent\" aria-hidden=\"true\" :svg-title=\"iconSvgTitle\" />\n            </div>\n\n            <div class=\"b-alert__content\">\n                <bento-typography\n                    v-if=\"hasSlot('default') && !isTipVariant\"\n                    class=\"b-alert__title\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    wide\n                >\n                    <slot />\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"hasSlot('description')\"\n                    class=\"b-alert__description\"\n                    v-bind=\"descriptionTypography\"\n                    data-testid=\"alert-description\"\n                >\n                    <slot name=\"description\" />\n                </bento-typography>\n\n                <div v-if=\"hasSlot('actions') && !isTipVariant\" class=\"b-alert__actions\" data-testid=\"alert-actions\">\n                    <slot name=\"actions\" />\n                </div>\n            </div>\n\n            <bento-button\n                v-if=\"closeButton && !isTipVariant\"\n                class=\"b-alert__close-button\"\n                variant=\"tertiary\"\n                type=\"button\"\n                @click=\"onCloseButtonClick\"\n            >\n                <cross-small :svg-title=\"t('close')\" />\n            </bento-button>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n\n    // Component\n    import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { BentoButton } from '@/components/button';\n\n    import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small';\n    import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled';\n    import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import Info from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\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 slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits<{\n        /**\n         * Emits event when the alert is closed. `closeButton` must be `true`\n         */\n        (e: 'close-alert');\n    }>();\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Adds a close button on the right side of the alert\n             */\n            closeButton?: boolean;\n\n            /**\n             * Type of a alert; set a distinctive icon and color. Defaults to highlight.\n             * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING\n             */\n            type?: BentoAlertTypeOption | `${BentoAlertTypeOption}`;\n\n            /**\n             * Variant for the alert\n             * @values DEFAULT, TIP\n             */\n            variant?: BentoAlertVariant | `${BentoAlertVariant}`;\n        }>(),\n        {\n            closeButton: false,\n            type: BentoAlertTypeOption.HIGHLIGHT,\n            variant: BentoAlertVariant.DEFAULT,\n        }\n    );\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP);\n\n    const alertConditionalClasses = computed(() => ({\n        [`b-alert--${props.type}`]: props.type,\n        [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value,\n    }));\n\n    const iconSvgTitle = computed(() => t(`${props.type}Icon`));\n\n    const iconComponent = computed(() => {\n        switch (props.type) {\n            case BentoAlertTypeOption.CRITICAL:\n                return CrossCircle;\n            case BentoAlertTypeOption.SUCCESS:\n                return CheckedCircle;\n            case BentoAlertTypeOption.WARNING:\n                return Warning;\n            case BentoAlertTypeOption.HIGHLIGHT:\n            default:\n                return Info;\n        }\n    });\n\n    const descriptionTypography = computed(() => ({\n        el: BentoTypographyElement.DIV,\n        variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY,\n        wide: true,\n    }));\n\n    const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert'));\n\n    const onCloseButtonClick = () => {\n        emit(BentoAlertEvent.CLOSE_ALERT);\n    };\n\n    onMounted(() => {\n        if (!slots.default && !slots.description) {\n            throw new Error('Alert Component requires a title or a description');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An Alert component is used to display a persistent\n     * notification containing information important to the user\n     *\n     * @example\n     * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAlert },\n     *     template: `\n     *          <bento-alert type=\"highlight\">\n     *              Title of the Alert\n     *          </bento-alert>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-alert',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./alert.scss\" />\n"],"names":["BentoAlertVariant","BentoAlertVariant2","BentoAlertTypeOption","BentoAlertTypeOption2","BentoAlertEvent","BentoAlertEvent2","uuid","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","slots","useSlots","hasSlot","useHasSlot","emit","__emit","props","__props","t","useI18n","isTipVariant","computed","alertConditionalClasses","iconSvgTitle","iconComponent","CrossCircleFillIcon","CheckmarkCircleFillIcon","WarningFilledIcon","Info","descriptionTypography","BentoTypographyElement","BentoTypographyVariant","computedRole","onCloseButtonClick","onMounted"],"mappings":";;;;;;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,MAAA,OAFQA,IAAAD,KAAA,CAAA,CAAA,GAQLE,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WAJQA,IAAAD,KAAA,CAAA,CAAA,GAULE,IAAA,kBAAAC,OACHA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACdR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAZZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,+CAAAD,EAAA,OAAA;AAAA;;QAA4E,MAAA;AAAA,QAAe,aAAA;AAAA,QAAoB,GAAA;AAAA,QAAwyE,aAAA;AAAA;IAFnmF,IAAA,GAAAL,CAAA;AAAA;;QAE6oF,IAAA,0CAAAK,EAAA;AAAA;;UAA0D,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAF9tF,IAAA,GAAAJ,CAAA;AAAA;;;;;;;;;;;GCqKIM,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;AApGA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,GA0BA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAV,EAAA,CAAA,GAEAW,IAAAC,EAAA,MAAAL,EAAA,YAAAtB,EAAA,GAAA,GAEA4B,IAAAD,EAAA,OAAA;AAAA,MAAgD,CAAA,YAAAL,EAAA,IAAA,EAAA,GAAAA,EAAA;AAAA,MACV,CAAA,YAAAtB,EAAA,GAAA,EAAA,GAAA0B,EAAA;AAAA,IACkB,EAAA,GAGxDG,IAAAF,EAAA,MAAAH,EAAA,GAAAF,EAAA,IAAA,MAAA,CAAA,GAEAQ,IAAAH,EAAA,MAAA;AACI,cAAAL,EAAA,MAAA;AAAA,QAAoB,KAAApB,EAAA;AAEZ,iBAAA6B;AAAA,QAAO,KAAA7B,EAAA;AAEP,iBAAA8B;AAAA,QAAO,KAAA9B,EAAA;AAEP,iBAAA+B;AAAA,QAAO,KAAA/B,EAAA;AAAA,QACe;AAEtB,iBAAAgC;AAAA,MAAO;AAAA,IACf,CAAA,GAGJC,IAAAR,EAAA,OAAA;AAAA,MAA8C,IAAAS,EAAA;AAAA,MACf,SAAAV,EAAA,QAAAW,EAAA,UAAAA,EAAA;AAAA,MAC2D,MAAA;AAAA,IAChF,EAAA,GAGVC,IAAAX,EAAA,MAAAL,EAAA,SAAApB,EAAA,YAAA,WAAA,OAAA,GAEAqC,IAAA,MAAA;AACI,MAAAnB,EAAAhB,EAAA,WAAA;AAAA,IAAgC;AAGpC,WAAAoC,EAAA,MAAA;AACI,UAAA,CAAAxB,EAAA,WAAA,CAAAA,EAAA;AACI,cAAA,IAAA,MAAA,mDAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/anchor-scroller.NhjLDBZI.js

@@ -0,0 +1,207 @@
+import { defineComponent as V, ref as S, computed as h, watch as y, openBlock as g, createElementBlock as x, Fragment as F, renderList as K, createVNode as I, withKeys as C, withModifiers as B, normalizeClass as D, withCtx as w, createTextVNode as M, toDisplayString as N, watchEffect as L, toRef as H, createElementVNode as A, unref as b, renderSlot as O, createCommentVNode as W } from "vue";
+import { f as z, d as J, u as U, g as P, t as R, h as Y, r as q } from "./index.DDwcHPb6.js";
+import { p as E, B as G } from "./typography.B3J6_tYk.js";
+import { u as Q } from "./index.B875RXHM.js";
+import { g as X } from "./generate-uid.DBWe4g6T.js";
+import { u as k } from "./utils.DWmc2mUI.js";
+import { F as Z } from "./fixed-scroller.DtkaGyMD.js";
+import { B as ee } from "./button.DWF7FSIw.js";
+import { _ as $ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/anchor-scroller.css";
+const te = /* @__PURE__ */ V({
+  __name: "anchor-scroller-list",
+  props: {
+    activeIndex: { default: void 0 },
+    items: {},
+    scrollOffset: { default: void 0 }
+  },
+  setup(v) {
+    const l = v, c = S([]), i = h(
+      () => l.items.map((e, a) => ({ disabled: e.disabled, originalIndex: a })).filter(({ disabled: e }) => !e).map(({ originalIndex: e }) => e)
+    ), {
+      state: d,
+      next: p,
+      prev: u
+    } = z(i, {
+      initialValue: l.activeIndex ?? i.value[0]
+    });
+    y(d, async (e) => {
+      const a = c.value[e], n = k(a);
+      n && typeof n.focus == "function" && n.focus();
+    });
+    const s = (e, a) => {
+      if (a)
+        return;
+      const n = k(e);
+      if (!n) {
+        E("[bento-anchor-scroller] element ref not found");
+        return;
+      }
+      if (!n.style.scrollMarginTop && l.scrollOffset) {
+        const r = window.getComputedStyle(n).scrollMarginTop;
+        (r === "0px" || r === "") && (n.style.scrollMarginTop = `${l.scrollOffset}px`);
+      }
+      n.hasAttribute("tabindex") || n.setAttribute("tabindex", "-1"), n.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+        inline: "nearest"
+      }), n.focus({ preventScroll: !0 });
+    }, _ = (e) => {
+      switch (e.key) {
+        case "ArrowRight":
+          e.preventDefault(), p();
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), u();
+          break;
+        case "Home":
+          e.preventDefault(), d.value = 0;
+          break;
+        case "End":
+          e.preventDefault(), d.value = i.value.length - 1;
+          break;
+      }
+    };
+    return (e, a) => (g(), x("ul", {
+      class: "b-anchor-scroller-list",
+      onKeydown: _
+    }, [
+      (g(!0), x(F, null, K(e.items, ({ title: n, disabled: r, elementRef: f }, o) => (g(), x("li", {
+        key: o,
+        class: "b-anchor-scroller-list__item"
+      }, [
+        I(ee, {
+          ref_for: !0,
+          ref_key: "listItemRefs",
+          ref: c,
+          "aria-current": e.activeIndex === o ? "location" : null,
+          class: D(["b-anchor-scroller-list__item-button", {
+            "b-anchor-scroller-list__item-button--active": e.activeIndex === o,
+            "b-anchor-scroller-list__item-button--disabled": r
+          }]),
+          "aria-disabled": r,
+          tabindex: e.activeIndex === o ? null : "-1",
+          variant: "tertiary-with-background",
+          onClick: (m) => s(f, r),
+          onKeydown: [
+            C(B((m) => s(f, r), ["prevent"]), ["space", "native"]),
+            C(B((m) => s(f, r), ["prevent"]), ["enter", "native"])
+          ]
+        }, {
+          default: w(() => [
+            M(N(n), 1)
+          ]),
+          _: 2
+        }, 1032, ["aria-current", "class", "aria-disabled", "tabindex", "onClick", "onKeydown"])
+      ]))), 128))
+    ], 32));
+  }
+}), ne = /* @__PURE__ */ $(te, [["__scopeId", "data-v-03d99bd8"]]), j = {
+  "en-US": { jumpTo: "Jump to" },
+  "ja-JP": { jumpTo: "移動先" },
+  "pt-BR": { jumpTo: "Ir para" }
+}, oe = (v, l) => {
+  const c = S(l.default?.value ?? -1), { y: i } = J(), { height: d } = U(), p = () => {
+    const u = R(v), s = d.value, _ = s / 2;
+    let e = -1, a = 0;
+    for (let n = 0; n < u.length; n++) {
+      const f = u[n];
+      if (!f)
+        continue;
+      const o = f.getBoundingClientRect();
+      if (o.top > _)
+        continue;
+      const m = Math.min(o.bottom, s) - Math.max(o.top, 0);
+      if (m <= 0)
+        continue;
+      const t = m / o.height;
+      t > a && (a = t, e = n);
+    }
+    e !== -1 && c.value !== e && (c.value = e);
+  };
+  return P([i, d], p, { throttle: 100, trailing: !0 }), L(() => {
+    R(v).length && p();
+  }), {
+    activeIndex: c
+  };
+}, ae = {
+  key: 0,
+  class: "b-anchor-scroller"
+}, re = ["aria-labelledby"], ie = { class: "b-anchor-scroller__navigation-panel" }, se = {
+  i18n: { messages: j },
+  name: "bento-anchor-scroller"
+}, le = /* @__PURE__ */ V({
+  ...se,
+  props: {
+    activeIndex: { default: void 0 },
+    items: {}
+  },
+  emits: ["update:active-index"],
+  setup(v, { emit: l }) {
+    const { t: c } = Q({ messages: j }), i = v, d = l, p = S(null), u = h(() => i.items.map((t) => ({ ...t }))), s = h(
+      () => i.items.map((t, T) => ({
+        element: k(t.elementRef),
+        originalIndex: T,
+        disabled: t.disabled
+      })).filter(
+        (t) => !t.disabled && !!t.element
+      )
+    ), { top: _, bottom: e } = Y(p), a = h(() => s.value.map((t) => t.element)), n = h(() => ({
+      "b-anchor-scroller__navigation--pinned": _.value <= 1
+    })), { activeIndex: r } = oe(a, {
+      default: H(i, "activeIndex")
+    }), f = q(r, 200), o = h(() => {
+      const t = s.value[f.value];
+      return t ? t.originalIndex : 0;
+    });
+    y(o, (t) => {
+      Number.isFinite(t) && d("update:active-index", t);
+    }), y(
+      () => i.activeIndex,
+      (t) => {
+        Number.isFinite(t) && u.value[t].disabled && E("[bento-anchor-scroller] activeIndex should not be a disabled item");
+      }
+    );
+    const m = X("bento-anchor-scroller-label");
+    return (t, T) => u.value.length ? (g(), x("div", ae, [
+      A("nav", {
+        ref_key: "navigationRef",
+        ref: p,
+        class: D(["b-anchor-scroller__navigation", n.value]),
+        "aria-labelledby": b(m)
+      }, [
+        I(b(Z), {
+          condensed: "",
+          centered: ""
+        }, {
+          default: w(() => [
+            A("div", ie, [
+              I(G, {
+                id: b(m),
+                el: "span",
+                class: "b-anchor-scroller__navigation-panel-label",
+                stronger: ""
+              }, {
+                default: w(() => [
+                  M(N(b(c)("jumpTo")), 1)
+                ]),
+                _: 1
+              }, 8, ["id"]),
+              I(b(ne), {
+                items: u.value,
+                "active-index": o.value,
+                "scroll-offset": b(e)
+              }, null, 8, ["items", "active-index", "scroll-offset"])
+            ])
+          ]),
+          _: 1
+        })
+      ], 10, re),
+      O(t.$slots, "default", {}, void 0, !0)
+    ])) : W("", !0);
+  }
+}), _e = /* @__PURE__ */ $(le, [["__scopeId", "data-v-9e21fa07"]]);
+export {
+  _e as a
+};
+//# sourceMappingURL=anchor-scroller.NhjLDBZI.js.map

package/dist/chunks/{anchor-scroller.BctgW0se.js.map → anchor-scroller.NhjLDBZI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"anchor-scroller.BctgW0se.js","sources":["../../../vue2/src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../../vue2/src/components/anchor-scroller/composables/use-scroll-spy/use-scroll-spy.ts","../../../vue2/src/components/anchor-scroller/anchor-scroller.vue"],"sourcesContent":["<template>\n    <ul class=\"b-anchor-scroller-list\" @keydown=\"onKeydownNavigation\">\n        <li v-for=\"({ title, disabled, elementRef }, index) in items\" :key=\"index\" class=\"b-anchor-scroller-list__item\">\n            <bento-button\n                ref=\"listItemRefs\"\n                :aria-current=\"activeIndex === index ? 'location' : null\"\n                class=\"b-anchor-scroller-list__item-button\"\n                :class=\"{\n                    'b-anchor-scroller-list__item-button--active': activeIndex === index,\n                    'b-anchor-scroller-list__item-button--disabled': disabled,\n                }\"\n                :aria-disabled=\"disabled\"\n                :tabindex=\"activeIndex === index ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"scrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"scrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"scrollToSection(elementRef, disabled)\"\n            >\n                {{ title }}\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import BentoButton from '@/components/button/button.vue';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAnchorScrollerItem } from '../../anchor-scroller.types';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, ref, watch } from 'vue';\n    import { useCycleList } from '@vueuse/core';\n\n    const props = withDefaults(defineProps<AnchorScrollerListProps>(), {\n        activeIndex: undefined,\n        scrollOffset: undefined,\n    });\n\n    const listItemRefs = ref([]);\n    const listIndices = computed(() =>\n        props.items\n            .map((item, index) => ({ disabled: item.disabled, originalIndex: index }))\n            .filter(({ disabled }) => !disabled)\n            .map(({ originalIndex }) => originalIndex)\n    );\n\n    const {\n        state: focusedIndex,\n        next,\n        prev,\n    } = useCycleList(listIndices, {\n        initialValue: props.activeIndex ?? listIndices.value[0],\n    });\n\n    watch(focusedIndex, async newIndex => {\n        const targetComponent = listItemRefs.value[newIndex];\n        const el = unrefElement(targetComponent); // Handles Component or DOM node\n\n        if (el && typeof el.focus === 'function') {\n            el.focus();\n        }\n    });\n\n    const scrollToSection = (elementRef: BentoAnchorScrollerItem['elementRef'], disabled?: boolean) => {\n        if (disabled) {\n            return;\n        }\n\n        const el = unrefElement(elementRef);\n\n        if (!el) {\n            printDevelopmentWarning(`[bento-anchor-scroller] element ref not found`);\n            return;\n        }\n\n        if (!el.style.scrollMarginTop && props.scrollOffset) {\n            const currentScrollMargin = window.getComputedStyle(el).scrollMarginTop;\n\n            if (currentScrollMargin === '0px' || currentScrollMargin === '') {\n                el.style.scrollMarginTop = `${props.scrollOffset}px`;\n            }\n        }\n\n        if (!el.hasAttribute('tabindex')) {\n            el.setAttribute('tabindex', '-1');\n        }\n\n        el.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start',\n            inline: 'nearest',\n        });\n\n        el.focus({ preventScroll: true });\n    };\n\n    const onKeydownNavigation = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case 'ArrowRight':\n                e.preventDefault();\n                next();\n                break;\n            case 'ArrowLeft':\n                e.preventDefault();\n                prev();\n                break;\n            case 'Home':\n                e.preventDefault();\n                focusedIndex.value = 0;\n                break;\n            case 'End':\n                e.preventDefault();\n                focusedIndex.value = listIndices.value.length - 1;\n                break;\n        }\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","import { type Ref, ref, watchEffect } from 'vue';\nimport { type MaybeRef, toValue, useWindowScroll, useWindowSize, watchThrottled } from '@vueuse/core';\n\n/**\n * Options for the useScrollSpy composable.\n */\nexport interface useScrollSpyOptions {\n    /**\n     * The default active index to use when no item is active or initially.\n     */\n    default?: Ref<number>;\n}\n\n/**\n * Composable to spy on scroll position and determine the active item based on visibility.\n *\n * @param items - The list of elements to spy on.\n * @param options - Configuration options for the scroll spy.\n * @returns An object containing the active index.\n */\nexport const useScrollSpy = (items: MaybeRef<Array<Element>>, options: useScrollSpyOptions) => {\n    const activeIndex = ref(options.default?.value ?? -1);\n\n    const { y: scrollY } = useWindowScroll();\n    const { height: windowHeight } = useWindowSize();\n\n    // Logic to find the \"winner\" when there are multiple items on the same page\n    const calculateActiveIndex = () => {\n        const list = toValue(items);\n        const viewportHeight = windowHeight.value;\n        const midpoint = viewportHeight / 2;\n\n        let winnerIndex = -1;\n        let maxVisibleRatio = 0;\n\n        for (let i = 0; i < list.length; i++) {\n            const item = list[i];\n            const el = item;\n\n            if (!el) {\n                continue;\n            }\n\n            const rect = el.getBoundingClientRect();\n\n            // Constraint 1: Must pass midpoint\n            if (rect.top > midpoint) {\n                continue;\n            }\n\n            // Constraint 2: Must be visible\n            const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);\n            if (visibleHeight <= 0) {\n                continue;\n            }\n\n            // Constraint 3: Highest visible % wins\n            const ratio = visibleHeight / rect.height;\n\n            if (ratio > maxVisibleRatio) {\n                maxVisibleRatio = ratio;\n                winnerIndex = i;\n            }\n        }\n\n        // Only update if changed to avoid unnecessary patch triggers\n        if (winnerIndex !== -1 && activeIndex.value !== winnerIndex) {\n            activeIndex.value = winnerIndex;\n        }\n    };\n\n    watchThrottled([scrollY, windowHeight], calculateActiveIndex, { throttle: 100, trailing: true });\n\n    watchEffect(() => {\n        if (toValue(items).length) {\n            calculateActiveIndex();\n        }\n    });\n\n    return {\n        activeIndex,\n    };\n};\n","<template>\n    <div v-if=\"computedItems.length\" class=\"b-anchor-scroller\">\n        <nav\n            ref=\"navigationRef\"\n            class=\"b-anchor-scroller__navigation\"\n            :class=\"navigationConditionalClasses\"\n            :aria-labelledby=\"navLabelId\"\n        >\n            <fixed-scroller condensed centered>\n                <div class=\"b-anchor-scroller__navigation-panel\">\n                    <bento-typography\n                        :id=\"navLabelId\"\n                        el=\"span\"\n                        class=\"b-anchor-scroller__navigation-panel-label\"\n                        stronger\n                    >\n                        {{ t('jumpTo') }}\n                    </bento-typography>\n\n                    <anchor-scroller-list\n                        :items=\"computedItems\"\n                        :active-index=\"currentActiveIndex\"\n                        :scroll-offset=\"bottom\"\n                    />\n                </div>\n            </fixed-scroller>\n        </nav>\n\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, watch } from 'vue';\n    import { refDebounced, useElementBounding } from '@vueuse/core';\n    import BentoTypography from '@/components/typography/typography.vue';\n    import { FixedScroller } from '@/internal';\n    import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types';\n    import { AnchorScrollerList } from './components/anchor-scroller-list';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from './composables';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = withDefaults(defineProps<BentoAnchorScrollerProps>(), {\n        activeIndex: undefined,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when the active index is changed\n         */\n        (e: 'update:active-index', value: number): void;\n    }>();\n\n    const navigationRef = ref(null);\n\n    const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item })));\n\n    // Skip and cache only items that are enabled\n    const enabledItems = computed(() =>\n        props.items\n            .map((item, originalIndex) => ({\n                element: unrefElement(item.elementRef),\n                originalIndex,\n                disabled: item.disabled,\n            }))\n            .filter(\n                (item): item is { element: Element; originalIndex: number; disabled: boolean } =>\n                    !item.disabled && !!item.element\n            )\n    );\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    // Extract strictly the elements for the ScrollSpy to watch\n    const scrollToTargets = computed(() => enabledItems.value.map(c => c.element));\n\n    const navigationConditionalClasses = computed(() => ({\n        'b-anchor-scroller__navigation--pinned': top.value <= 1,\n    }));\n\n    const { activeIndex: relativeActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n    });\n\n    const debouncedActiveIndex = refDebounced(relativeActiveIndex, 200);\n\n    const currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[debouncedActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    watch(currentActiveIndex, val => {\n        if (Number.isFinite(val)) {\n            emit('update:active-index', val);\n        }\n    });\n\n    watch(\n        () => props.activeIndex,\n        val => {\n            if (Number.isFinite(val) && computedItems.value[val].disabled) {\n                printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`);\n            }\n        }\n    );\n\n    const navLabelId = generateUid('bento-anchor-scroller-label');\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A navigation component that tracks page scroll and allows jumping to sections.\n     *\n     * @example\n     * import { BentoAnchorScroller } from '@adyen/bento-vue2';\n     * import { ref } from 'vue';\n     *\n     * export default {\n     *     components: { BentoAnchorScroller },\n     *     template: `\n     *          <bento-anchor-scroller :items=\"items\">\n     *              <section ref=\"section1\">Section 1</section>\n     *              <section ref=\"section2\">Section 2</section>\n     *          </bento-anchor-scroller>\n     *     `,\n     *      setup() {\n     *          const section1 = ref(null);\n     *          const section2 = ref(null);\n     *          const items = ref([\n     *              { title: 'Section 1', elementRef: section1 },\n     *              { title: 'Section 2', elementRef: section2 },\n     *          ]);\n     *          return {\n     *              items,\n     *              section1,\n     *              section2,\n     *          }\n     *      }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-anchor-scroller',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller.scss\" />\n"],"names":["props","__props","listItemRefs","ref","listIndices","computed","item","index","disabled","originalIndex","focusedIndex","next","prev","useCycleList","watch","newIndex","targetComponent","el","unrefElement","scrollToSection","elementRef","printDevelopmentWarning","currentScrollMargin","onKeydownNavigation","useScrollSpy","items","options","activeIndex","_a","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","rect","visibleHeight","ratio","watchThrottled","watchEffect","__default__","messages","t","useI18n","emit","__emit","navigationRef","computedItems","enabledItems","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","relativeActiveIndex","toRef","debouncedActiveIndex","refDebounced","currentActiveIndex","candidate","val","navLabelId","generateUid"],"mappings":"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"}
+{"version":3,"file":"anchor-scroller.NhjLDBZI.js","sources":["../../../vue2/src/components/anchor-scroller/components/anchor-scroller-list/anchor-scroller-list.vue","../../../vue2/src/components/anchor-scroller/composables/use-scroll-spy/use-scroll-spy.ts","../../../vue2/src/components/anchor-scroller/anchor-scroller.vue"],"sourcesContent":["<template>\n    <ul class=\"b-anchor-scroller-list\" @keydown=\"onKeydownNavigation\">\n        <li v-for=\"({ title, disabled, elementRef }, index) in items\" :key=\"index\" class=\"b-anchor-scroller-list__item\">\n            <bento-button\n                ref=\"listItemRefs\"\n                :aria-current=\"activeIndex === index ? 'location' : null\"\n                class=\"b-anchor-scroller-list__item-button\"\n                :class=\"{\n                    'b-anchor-scroller-list__item-button--active': activeIndex === index,\n                    'b-anchor-scroller-list__item-button--disabled': disabled,\n                }\"\n                :aria-disabled=\"disabled\"\n                :tabindex=\"activeIndex === index ? null : '-1'\"\n                variant=\"tertiary-with-background\"\n                @click=\"scrollToSection(elementRef, disabled)\"\n                @keydown.space.native.prevent=\"scrollToSection(elementRef, disabled)\"\n                @keydown.enter.native.prevent=\"scrollToSection(elementRef, disabled)\"\n            >\n                {{ title }}\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import BentoButton from '@/components/button/button.vue';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n    import { type BentoAnchorScrollerItem } from '../../anchor-scroller.types';\n    import { type AnchorScrollerListProps } from './anchor-scroller-list.types';\n    import { computed, ref, watch } from 'vue';\n    import { useCycleList } from '@vueuse/core';\n\n    const props = withDefaults(defineProps<AnchorScrollerListProps>(), {\n        activeIndex: undefined,\n        scrollOffset: undefined,\n    });\n\n    const listItemRefs = ref([]);\n    const listIndices = computed(() =>\n        props.items\n            .map((item, index) => ({ disabled: item.disabled, originalIndex: index }))\n            .filter(({ disabled }) => !disabled)\n            .map(({ originalIndex }) => originalIndex)\n    );\n\n    const {\n        state: focusedIndex,\n        next,\n        prev,\n    } = useCycleList(listIndices, {\n        initialValue: props.activeIndex ?? listIndices.value[0],\n    });\n\n    watch(focusedIndex, async newIndex => {\n        const targetComponent = listItemRefs.value[newIndex];\n        const el = unrefElement(targetComponent); // Handles Component or DOM node\n\n        if (el && typeof el.focus === 'function') {\n            el.focus();\n        }\n    });\n\n    const scrollToSection = (elementRef: BentoAnchorScrollerItem['elementRef'], disabled?: boolean) => {\n        if (disabled) {\n            return;\n        }\n\n        const el = unrefElement(elementRef);\n\n        if (!el) {\n            printDevelopmentWarning(`[bento-anchor-scroller] element ref not found`);\n            return;\n        }\n\n        if (!el.style.scrollMarginTop && props.scrollOffset) {\n            const currentScrollMargin = window.getComputedStyle(el).scrollMarginTop;\n\n            if (currentScrollMargin === '0px' || currentScrollMargin === '') {\n                el.style.scrollMarginTop = `${props.scrollOffset}px`;\n            }\n        }\n\n        if (!el.hasAttribute('tabindex')) {\n            el.setAttribute('tabindex', '-1');\n        }\n\n        el.scrollIntoView({\n            behavior: 'smooth',\n            block: 'start',\n            inline: 'nearest',\n        });\n\n        el.focus({ preventScroll: true });\n    };\n\n    const onKeydownNavigation = (e: KeyboardEvent) => {\n        switch (e.key) {\n            case 'ArrowRight':\n                e.preventDefault();\n                next();\n                break;\n            case 'ArrowLeft':\n                e.preventDefault();\n                prev();\n                break;\n            case 'Home':\n                e.preventDefault();\n                focusedIndex.value = 0;\n                break;\n            case 'End':\n                e.preventDefault();\n                focusedIndex.value = listIndices.value.length - 1;\n                break;\n        }\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller-list.scss\" />\n","import { type Ref, ref, watchEffect } from 'vue';\nimport { type MaybeRef, toValue, useWindowScroll, useWindowSize, watchThrottled } from '@vueuse/core';\n\n/**\n * Options for the useScrollSpy composable.\n */\nexport interface useScrollSpyOptions {\n    /**\n     * The default active index to use when no item is active or initially.\n     */\n    default?: Ref<number>;\n}\n\n/**\n * Composable to spy on scroll position and determine the active item based on visibility.\n *\n * @param items - The list of elements to spy on.\n * @param options - Configuration options for the scroll spy.\n * @returns An object containing the active index.\n */\nexport const useScrollSpy = (items: MaybeRef<Array<Element>>, options: useScrollSpyOptions) => {\n    const activeIndex = ref(options.default?.value ?? -1);\n\n    const { y: scrollY } = useWindowScroll();\n    const { height: windowHeight } = useWindowSize();\n\n    // Logic to find the \"winner\" when there are multiple items on the same page\n    const calculateActiveIndex = () => {\n        const list = toValue(items);\n        const viewportHeight = windowHeight.value;\n        const midpoint = viewportHeight / 2;\n\n        let winnerIndex = -1;\n        let maxVisibleRatio = 0;\n\n        for (let i = 0; i < list.length; i++) {\n            const item = list[i];\n            const el = item;\n\n            if (!el) {\n                continue;\n            }\n\n            const rect = el.getBoundingClientRect();\n\n            // Constraint 1: Must pass midpoint\n            if (rect.top > midpoint) {\n                continue;\n            }\n\n            // Constraint 2: Must be visible\n            const visibleHeight = Math.min(rect.bottom, viewportHeight) - Math.max(rect.top, 0);\n            if (visibleHeight <= 0) {\n                continue;\n            }\n\n            // Constraint 3: Highest visible % wins\n            const ratio = visibleHeight / rect.height;\n\n            if (ratio > maxVisibleRatio) {\n                maxVisibleRatio = ratio;\n                winnerIndex = i;\n            }\n        }\n\n        // Only update if changed to avoid unnecessary patch triggers\n        if (winnerIndex !== -1 && activeIndex.value !== winnerIndex) {\n            activeIndex.value = winnerIndex;\n        }\n    };\n\n    watchThrottled([scrollY, windowHeight], calculateActiveIndex, { throttle: 100, trailing: true });\n\n    watchEffect(() => {\n        if (toValue(items).length) {\n            calculateActiveIndex();\n        }\n    });\n\n    return {\n        activeIndex,\n    };\n};\n","<template>\n    <div v-if=\"computedItems.length\" class=\"b-anchor-scroller\">\n        <nav\n            ref=\"navigationRef\"\n            class=\"b-anchor-scroller__navigation\"\n            :class=\"navigationConditionalClasses\"\n            :aria-labelledby=\"navLabelId\"\n        >\n            <fixed-scroller condensed centered>\n                <div class=\"b-anchor-scroller__navigation-panel\">\n                    <bento-typography\n                        :id=\"navLabelId\"\n                        el=\"span\"\n                        class=\"b-anchor-scroller__navigation-panel-label\"\n                        stronger\n                    >\n                        {{ t('jumpTo') }}\n                    </bento-typography>\n\n                    <anchor-scroller-list\n                        :items=\"computedItems\"\n                        :active-index=\"currentActiveIndex\"\n                        :scroll-offset=\"bottom\"\n                    />\n                </div>\n            </fixed-scroller>\n        </nav>\n\n        <slot />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRef, watch } from 'vue';\n    import { refDebounced, useElementBounding } from '@vueuse/core';\n    import BentoTypography from '@/components/typography/typography.vue';\n    import { FixedScroller } from '@/internal';\n    import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types';\n    import { AnchorScrollerList } from './components/anchor-scroller-list';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { generateUid } from '@/core/utils/ts';\n    import { unrefElement } from '@/directives/click-outside/utils';\n    import messages from './messages.json';\n    import { useScrollSpy } from './composables';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = withDefaults(defineProps<BentoAnchorScrollerProps>(), {\n        activeIndex: undefined,\n    });\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when the active index is changed\n         */\n        (e: 'update:active-index', value: number): void;\n    }>();\n\n    const navigationRef = ref(null);\n\n    const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item })));\n\n    // Skip and cache only items that are enabled\n    const enabledItems = computed(() =>\n        props.items\n            .map((item, originalIndex) => ({\n                element: unrefElement(item.elementRef),\n                originalIndex,\n                disabled: item.disabled,\n            }))\n            .filter(\n                (item): item is { element: Element; originalIndex: number; disabled: boolean } =>\n                    !item.disabled && !!item.element\n            )\n    );\n\n    const { top, bottom } = useElementBounding(navigationRef);\n\n    // Extract strictly the elements for the ScrollSpy to watch\n    const scrollToTargets = computed(() => enabledItems.value.map(c => c.element));\n\n    const navigationConditionalClasses = computed(() => ({\n        'b-anchor-scroller__navigation--pinned': top.value <= 1,\n    }));\n\n    const { activeIndex: relativeActiveIndex } = useScrollSpy(scrollToTargets, {\n        default: toRef(props, 'activeIndex'),\n    });\n\n    const debouncedActiveIndex = refDebounced(relativeActiveIndex, 200);\n\n    const currentActiveIndex = computed(() => {\n        const candidate = enabledItems.value[debouncedActiveIndex.value];\n\n        return candidate ? candidate.originalIndex : 0;\n    });\n\n    watch(currentActiveIndex, val => {\n        if (Number.isFinite(val)) {\n            emit('update:active-index', val);\n        }\n    });\n\n    watch(\n        () => props.activeIndex,\n        val => {\n            if (Number.isFinite(val) && computedItems.value[val].disabled) {\n                printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`);\n            }\n        }\n    );\n\n    const navLabelId = generateUid('bento-anchor-scroller-label');\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A navigation component that tracks page scroll and allows jumping to sections.\n     *\n     * @example\n     * import { BentoAnchorScroller } from '@adyen/bento-vue2';\n     * import { ref } from 'vue';\n     *\n     * export default {\n     *     components: { BentoAnchorScroller },\n     *     template: `\n     *          <bento-anchor-scroller :items=\"items\">\n     *              <section ref=\"section1\">Section 1</section>\n     *              <section ref=\"section2\">Section 2</section>\n     *          </bento-anchor-scroller>\n     *     `,\n     *      setup() {\n     *          const section1 = ref(null);\n     *          const section2 = ref(null);\n     *          const items = ref([\n     *              { title: 'Section 1', elementRef: section1 },\n     *              { title: 'Section 2', elementRef: section2 },\n     *          ]);\n     *          return {\n     *              items,\n     *              section1,\n     *              section2,\n     *          }\n     *      }\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-anchor-scroller',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./anchor-scroller.scss\" />\n"],"names":["props","__props","listItemRefs","ref","listIndices","computed","item","index","disabled","originalIndex","focusedIndex","next","prev","useCycleList","watch","newIndex","targetComponent","el","unrefElement","scrollToSection","elementRef","printDevelopmentWarning","currentScrollMargin","onKeydownNavigation","useScrollSpy","items","options","activeIndex","scrollY","useWindowScroll","windowHeight","useWindowSize","calculateActiveIndex","list","toValue","viewportHeight","midpoint","winnerIndex","maxVisibleRatio","i","rect","visibleHeight","ratio","watchThrottled","watchEffect","__default__","messages","t","useI18n","emit","__emit","navigationRef","computedItems","enabledItems","top","bottom","useElementBounding","scrollToTargets","c","navigationConditionalClasses","relativeActiveIndex","toRef","debouncedActiveIndex","refDebounced","currentActiveIndex","candidate","val","navLabelId","generateUid"],"mappings":"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"}

package/dist/chunks/{base-button.CRYAiuzn.js → base-button.CvHl36Ue.js}

@@ -1,9 +1,9 @@
 import { defineComponent as B, computed as C, ref as m, resolveComponent as y, openBlock as r, createElementBlock as l, mergeProps as S, renderSlot as u, createCommentVNode as d, createBlock as k, withCtx as g } from "vue";
 import { B as h } from "./typography.B3J6_tYk.js";
-import { u as L } from "./use-has-slot.B7eQSabc.js";
+import { u as L } from "./use-has-slot.CyMiImRQ.js";
 import { _ as $ } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/base-button.css";
-var p = /* @__PURE__ */ ((t) => (t.DESTRUCTIVE = "critical", t.ICON_ONLY = "icon-only", t))(p || {}), n = /* @__PURE__ */ ((t) => (t.BLUR = "blur", t.CLICK = "click", t.FOCUS = "focus", t.KEYDOWN_ESC = "keydown.esc", t))(n || {});
+var p = /* @__PURE__ */ ((t) => (t.DESTRUCTIVE = "critical", t.ICON_ONLY = "icon-only", t))(p || {}), e = /* @__PURE__ */ ((t) => (t.BLUR = "blur", t.CLICK = "click", t.FOCUS = "focus", t.KEYDOWN_ESC = "keydown.esc", t))(e || {});
 const O = B({
   name: "base-button",
   components: { BentoTypography: h },
@@ -32,36 +32,33 @@ const O = B({
     }
   },
   emits: [
-    n.CLICK,
-    n.FOCUS,
-    n.BLUR,
-    n.KEYDOWN_ESC
+    e.CLICK,
+    e.FOCUS,
+    e.BLUR,
+    e.KEYDOWN_ESC
   ],
-  setup(t, { slots: e, emit: s, attrs: b }) {
-    const c = C(() => {
-      var o;
-      return {
-        "aria-expanded": (o = b["aria-expanded"]) == null ? void 0 : o.toString()
-      };
-    }), f = m(null), i = C(() => ({
+  setup(t, { slots: o, emit: s, attrs: b }) {
+    const c = C(() => ({
+      "aria-expanded": b["aria-expanded"]?.toString()
+    })), f = m(null), i = C(() => ({
       [`b-base-button--${p.DESTRUCTIVE}`]: t.critical,
-      [`b-base-button--${p.ICON_ONLY}`]: !e.default
+      [`b-base-button--${p.ICON_ONLY}`]: !o.default
     }));
     return {
       // Values
       ariaAttributes: c,
       conditionalClasses: i,
       // Methods
-      onClickButton: (o) => {
-        t.disabled ? (o.preventDefault(), o.stopPropagation()) : s(n.CLICK, o);
+      onClickButton: (n) => {
+        t.disabled ? (n.preventDefault(), n.stopPropagation()) : s(e.CLICK, n);
       },
-      onFocusButton: (o) => {
-        s(n.FOCUS, o);
+      onFocusButton: (n) => {
+        s(e.FOCUS, n);
       },
-      onBlurButton: (o) => {
-        s(n.BLUR, o);
+      onBlurButton: (n) => {
+        s(e.BLUR, n);
       },
-      hasSlot: L(e),
+      hasSlot: L(o),
       // Refs
       bentoBaseButtonRef: f
     };
@@ -75,16 +72,16 @@ const O = B({
   class: "b-base-button__icon-right",
   "data-testid": "icon-button-right"
 };
-function U(t, e, s, b, c, f) {
+function U(t, o, s, b, c, f) {
   const i = y("bento-typography");
   return r(), l("button", S({ ref: "bentoBaseButtonRef" }, t.$attrs, {
     class: ["b-base-button", t.conditionalClasses],
     disabled: t.disabled,
     type: t.type,
     "aria-expanded": t.ariaAttributes["aria-expanded"],
-    onClick: e[0] || (e[0] = (...a) => t.onClickButton && t.onClickButton(...a)),
-    onFocus: e[1] || (e[1] = (...a) => t.onFocusButton && t.onFocusButton(...a)),
-    onBlur: e[2] || (e[2] = (...a) => t.onBlurButton && t.onBlurButton(...a))
+    onClick: o[0] || (o[0] = (...a) => t.onClickButton && t.onClickButton(...a)),
+    onFocus: o[1] || (o[1] = (...a) => t.onFocusButton && t.onFocusButton(...a)),
+    onBlur: o[2] || (o[2] = (...a) => t.onBlurButton && t.onBlurButton(...a))
   }), [
     t.hasSlot("iconLeft") ? (r(), l("span", F, [
       u(t.$slots, "iconLeft", {}, void 0, !0)
@@ -109,6 +106,6 @@ function U(t, e, s, b, c, f) {
 const T = /* @__PURE__ */ $(O, [["render", U], ["__scopeId", "data-v-cf942c5c"]]);
 export {
   T as B,
-  n as a
+  e as a
 };
-//# sourceMappingURL=base-button.CRYAiuzn.js.map
+//# sourceMappingURL=base-button.CvHl36Ue.js.map

package/dist/chunks/{base-button.CRYAiuzn.js.map → base-button.CvHl36Ue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"base-button.CRYAiuzn.js","sources":["../../../vue2/src/components/internal/base-button/base-button.types.ts","../../../vue2/src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        v-bind=\"$attrs\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { type Booleanish } from '@/types/prop-types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot","_hoisted_1","openBlock","createElementBlock","mergeProps","_ctx","_cache","args","renderSlot","createCommentVNode","createBlock","_component_bento_typography","_hoisted_3"],"mappings":"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"}
+{"version":3,"file":"base-button.CvHl36Ue.js","sources":["../../../vue2/src/components/internal/base-button/base-button.types.ts","../../../vue2/src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        v-bind=\"$attrs\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n        @focus=\"onFocusButton\"\n        @blur=\"onBlurButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, type PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { type Booleanish } from '@/types/prop-types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * The default behavior of the button.\n             * Possible values are: 'button', 'reset', 'submit'\n             */\n            type: {\n                type: String as PropType<ButtonHTMLAttributes['type']>,\n                default: 'button',\n            },\n        },\n        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                } else {\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n            };\n\n            const onFocusButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.FOCUS, e);\n            };\n\n            const onBlurButton = (e: FocusEvent) => {\n                emit(BentoBaseButtonEvent.BLUR, e);\n            };\n\n            return {\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                onFocusButton,\n                onBlurButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot","_hoisted_1","openBlock","createElementBlock","mergeProps","_ctx","_cache","args","renderSlot","createCommentVNode","createBlock","_component_bento_typography","_hoisted_3"],"mappings":"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"}