@adyen/bento-vue2 1.45.0 → 1.46.0

package/dist/chunks/{controls-group.CnXzOQkX.js → controls-group.CIdhlTk3.js}

@@ -1,6 +1,6 @@
 import { defineComponent as d, useAttrs as p, computed as s } from "vue";
-import { d as c, B as b } from "./typography.J1v_SPG3.js";
-import { F as u } from "./error-message.Ccc1sTTp.js";
+import { d as c, B as b } from "./typography.Bu_WAKdf.js";
+import { F as u } from "./error-message.Brg-AZjT.js";
 import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/controls-group.css";
 const f = {}, m = /* @__PURE__ */ d({
@@ -78,4 +78,4 @@ const B = g.exports;
 export {
   B as C
 };
-//# sourceMappingURL=controls-group.CnXzOQkX.js.map
+//# sourceMappingURL=controls-group.CIdhlTk3.js.map

package/dist/chunks/{controls-group.CnXzOQkX.js.map → controls-group.CIdhlTk3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"controls-group.CnXzOQkX.js","sources":["../../src/components/internal/controls-group/controls-group.vue"],"sourcesContent":["<template>\n    <fieldset\n        class=\"b-controls-group\"\n        :class=\"conditionalClasses\"\n        :form=\"form\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"ariaAttributes['aria-describedby']\"\n    >\n        <legend class=\"b-controls-group__label-container\" :class=\"legendConditionalClasses\">\n            <field-label\n                v-if=\"label\"\n                class=\"b-controls-group__label\"\n                :label=\"label\"\n                :tooltip-text=\"tooltipText\"\n                :optional=\"optional\"\n                :required=\"required\"\n            />\n            <bento-typography v-if=\"description\" class=\"b-controls-group__description\" el=\"span\">\n                {{ description }}\n            </bento-typography>\n        </legend>\n        <slot />\n    </fieldset>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useAttrs } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { FieldLabel } from '@/components/internal/field-label';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const attrs = useAttrs();\n\n    const props = defineProps({\n        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * The name of the component to cite when throwing a depreacte error.\n         */\n        componentName: { type: String, required: true },\n\n        /**\n         * Sets all child controls of the <fieldset> as disabled.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * The value of the id attribute of a <form> element the <fieldset> is to part of, even if it is not inside the form itself.\n         */\n        form: { type: String, default: null },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * The name associated with the group. Required for accessibility purposes.\n         * The label is shown when `hideLabel` is set to `true` or if `description` is passed\n         */\n        label: { type: String, required: true },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n    });\n\n    const ariaAttributes = computed(() => ({\n        'aria-describedby': attrs['aria-describedby']?.toString() as string,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        'b-controls-group--disabled': props.disabled,\n    }));\n\n    const legendConditionalClasses = computed(() => {\n        const isLabelAndDescriptionPresent = props.label && props.description;\n        const shouldShowLabel = isLabelAndDescriptionPresent || props.hideLabel === false;\n\n        return {\n            'b-controls-group__label-container--hidden': !shouldShowLabel,\n        };\n    });\n\n    // eslint-disable-next-line eqeqeq -- Needs to show deprecate message when hideLabel is not set and no description available\n    const hasNoPropsDefined = !props.description && props.hideLabel == undefined;\n    if (hasNoPropsDefined) {\n        deprecate(\n            `${props.componentName}: The property \\`label\\` will always be rendered by default.`,\n            `After version 2.0.0, the label will be shown by default.\n            To continue hiding the label set \\`:hide-label=\"true\"\\`.  Up until version 2.0.0, to display the label set \\`hide-label=\"false\"\\`.\n            \\`label\\` will always be rendered when \\`description\\` is passed alongside with \\`label\\``,\n            `2.0.0`\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A controls group components should be used whenever it is necessary to group a set of controls (i.e. radio buttons or checkboxes)\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * NOTE: This component should not be used by itself but more implemented by other exported components\n     * @example\n     * import { ControlsGroup, BentoCheckbox, BentoRadioButton } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { ControlsGroup, BentoRadioButton },\n     *     template: `\n     *             <controls-group\n     *                 label=\"Your group label\"\n     *                 description=\"Description\"\n     *             >\n     *                 <bento-radio-button\n     *                      disabled\n     *                      value=\"inputRadio\"\n     *                 >\n     *                      Label text\n     *                 </bento-radio-button>\n     *                 <bento-radio-button\n     *                      value=\"inputRadio\"\n     *                 >\n     *                      Another label text\n     *                 </bento-radio-button>\n     *             </controls-group>\n     *     `\n     * };\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/controls-group/controls-group.scss\" />\n"],"names":["__default__","attrs","useAttrs","ariaAttributes","computed","_a","conditionalClasses","props","legendConditionalClasses","hasNoPropsDefined","deprecate"],"mappings":";;;;;AA8II,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/GAC,IAAAC,EAAA,GAkDAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAuC,qBAAAC,IAAAJ,EAAA,kBAAA,MAAA,gBAAAI,EAAA;AAAA,MACqB;AAAA,KAAA,GAG5DC,IAAAF,EAAA,OAAA;AAAA,MAA2C,8BAAAG,EAAA;AAAA,IACH,EAAA,GAGxCC,IAAAJ,EAAA,OAII;AAAA,MAAO,6CAAA,EAHPG,EAAA,SAAAA,EAAA,eACAA,EAAA,cAAA;AAAA,IAGkD,EAClD,GAIJE,IAAA,CAAAF,EAAA,eAAAA,EAAA,aAAA;AACA,WAAAE,KACIC;AAAA,MAAA,GAAAH,EAAA,aAAA;AAAA,MAC0B;AAAA,MACtB;AAAA,IAGA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"controls-group.CIdhlTk3.js","sources":["../../src/components/internal/controls-group/controls-group.vue"],"sourcesContent":["<template>\n    <fieldset\n        class=\"b-controls-group\"\n        :class=\"conditionalClasses\"\n        :form=\"form\"\n        :disabled=\"disabled\"\n        :aria-describedby=\"ariaAttributes['aria-describedby']\"\n    >\n        <legend class=\"b-controls-group__label-container\" :class=\"legendConditionalClasses\">\n            <field-label\n                v-if=\"label\"\n                class=\"b-controls-group__label\"\n                :label=\"label\"\n                :tooltip-text=\"tooltipText\"\n                :optional=\"optional\"\n                :required=\"required\"\n            />\n            <bento-typography v-if=\"description\" class=\"b-controls-group__description\" el=\"span\">\n                {{ description }}\n            </bento-typography>\n        </legend>\n        <slot />\n    </fieldset>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useAttrs } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { FieldLabel } from '@/components/internal/field-label';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const attrs = useAttrs();\n\n    const props = defineProps({\n        /**\n         * Descriptive supporting text visbile underneath the label.\n         */\n        description: { type: String, default: null },\n\n        /**\n         * The name of the component to cite when throwing a depreacte error.\n         */\n        componentName: { type: String, required: true },\n\n        /**\n         * Sets all child controls of the <fieldset> as disabled.\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * The value of the id attribute of a <form> element the <fieldset> is to part of, even if it is not inside the form itself.\n         */\n        form: { type: String, default: null },\n\n        /**\n         * Shows/hides the group label.\n         */\n        hideLabel: { type: Boolean, default: null },\n\n        /**\n         * The name associated with the group. Required for accessibility purposes.\n         * The label is shown when `hideLabel` is set to `true` or if `description` is passed\n         */\n        label: { type: String, required: true },\n\n        /**\n         * Indicates the field is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Indicates the field is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n    });\n\n    const ariaAttributes = computed(() => ({\n        'aria-describedby': attrs['aria-describedby']?.toString() as string,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        'b-controls-group--disabled': props.disabled,\n    }));\n\n    const legendConditionalClasses = computed(() => {\n        const isLabelAndDescriptionPresent = props.label && props.description;\n        const shouldShowLabel = isLabelAndDescriptionPresent || props.hideLabel === false;\n\n        return {\n            'b-controls-group__label-container--hidden': !shouldShowLabel,\n        };\n    });\n\n    // eslint-disable-next-line eqeqeq -- Needs to show deprecate message when hideLabel is not set and no description available\n    const hasNoPropsDefined = !props.description && props.hideLabel == undefined;\n    if (hasNoPropsDefined) {\n        deprecate(\n            `${props.componentName}: The property \\`label\\` will always be rendered by default.`,\n            `After version 2.0.0, the label will be shown by default.\n            To continue hiding the label set \\`:hide-label=\"true\"\\`.  Up until version 2.0.0, to display the label set \\`hide-label=\"false\"\\`.\n            \\`label\\` will always be rendered when \\`description\\` is passed alongside with \\`label\\``,\n            `2.0.0`\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A controls group components should be used whenever it is necessary to group a set of controls (i.e. radio buttons or checkboxes)\n     * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/\n     *\n     * NOTE: This component should not be used by itself but more implemented by other exported components\n     * @example\n     * import { ControlsGroup, BentoCheckbox, BentoRadioButton } from '@adyen/bento-vue2/';\n     *\n     * export default {\n     *     components: { ControlsGroup, BentoRadioButton },\n     *     template: `\n     *             <controls-group\n     *                 label=\"Your group label\"\n     *                 description=\"Description\"\n     *             >\n     *                 <bento-radio-button\n     *                      disabled\n     *                      value=\"inputRadio\"\n     *                 >\n     *                      Label text\n     *                 </bento-radio-button>\n     *                 <bento-radio-button\n     *                      value=\"inputRadio\"\n     *                 >\n     *                      Another label text\n     *                 </bento-radio-button>\n     *             </controls-group>\n     *     `\n     * };\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/controls-group/controls-group.scss\" />\n"],"names":["__default__","attrs","useAttrs","ariaAttributes","computed","_a","conditionalClasses","props","legendConditionalClasses","hasNoPropsDefined","deprecate"],"mappings":";;;;;AA8II,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/GAC,IAAAC,EAAA,GAkDAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAuC,qBAAAC,IAAAJ,EAAA,kBAAA,MAAA,gBAAAI,EAAA;AAAA,MACqB;AAAA,KAAA,GAG5DC,IAAAF,EAAA,OAAA;AAAA,MAA2C,8BAAAG,EAAA;AAAA,IACH,EAAA,GAGxCC,IAAAJ,EAAA,OAII;AAAA,MAAO,6CAAA,EAHPG,EAAA,SAAAA,EAAA,eACAA,EAAA,cAAA;AAAA,IAGkD,EAClD,GAIJE,IAAA,CAAAF,EAAA,eAAAA,EAAA,aAAA;AACA,WAAAE,KACIC;AAAA,MAAA,GAAAH,EAAA,aAAA;AAAA,MAC0B;AAAA,MACtB;AAAA,IAGA;;;;;;;;;;;;;;;"}

package/dist/chunks/{copy.DN0tClPm.js → copy.BakPR7GI.js}

@@ -1,9 +1,9 @@
 import { defineComponent as v, ref as i, computed as s } from "vue";
-import { B as _ } from "./button.BX6ZJxF7.js";
-import { d as f } from "./popper-container.B1iB2ovW.js";
+import { B as _ } from "./button.Bx8WC-dy.js";
+import { d as f } from "./popper-container.B9qZTf2V.js";
 import { u as y } from "./i18n.BQkEbtPM.js";
 import { n as c } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as C } from "./tooltip.R2sqydIE.js";
+import { B as C } from "./tooltip.CQGwmwt9.js";
 import "../assets/copy.css";
 var r = /* @__PURE__ */ ((o) => (o.DEFAULT = "default", o.COPYING = "copying", o.ERROR = "error", o))(r || {});
 let a = 0;
@@ -125,4 +125,4 @@ export {
   A as C,
   r as a
 };
-//# sourceMappingURL=copy.DN0tClPm.js.map
+//# sourceMappingURL=copy.BakPR7GI.js.map

package/dist/chunks/{copy.DN0tClPm.js.map → copy.BakPR7GI.js.map}

@@ -1 +1 @@
-{"version":3,"file":"copy.DN0tClPm.js","sources":["../../src/components/internal/copy/copy.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/copy.vue","../../src/components/internal/copy/copy.vue"],"sourcesContent":["import type { BentoButton } from '../../button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport type BentoCopyButtonProps = {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\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><path fill=\"#00112C\" d=\"M3.5 1.25C2.25736 1.25 1.25 2.25736 1.25 3.5V8.5C1.25 9.74264 2.25736 10.75 3.5 10.75H5.25V12.5C5.25 13.7426 6.25736 14.75 7.5 14.75H12.5C13.7426 14.75 14.75 13.7426 14.75 12.5V7.5C14.75 6.25736 13.7426 5.25 12.5 5.25H10.75V3.5C10.75 2.25736 9.74264 1.25 8.5 1.25H3.5ZM9.25 5.25H7.5C6.25736 5.25 5.25 6.25736 5.25 7.5V9.25H3.5C3.08579 9.25 2.75 8.91421 2.75 8.5V3.5C2.75 3.08579 3.08579 2.75 3.5 2.75H8.5C8.91421 2.75 9.25 3.08579 9.25 3.5V5.25ZM6.75 12.5V7.5C6.75 7.08579 7.08579 6.75 7.5 6.75H12.5C12.9142 6.75 13.25 7.08579 13.25 7.5V12.5C13.25 12.9142 12.9142 13.25 12.5 13.25H7.5C7.08579 13.25 6.75 12.9142 6.75 12.5Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-copy\" @mouseleave=\"resetText\" @focusout=\"resetText\">\n        <span v-if=\"$slots.default\" v-bento-tooltip-directive:[tooltipPosition]=\"copyText\" @click=\"onClickCopy\">\n            <slot />\n        </span>\n        <bento-button\n            v-else\n            v-bento-tooltip-directive:[tooltipPosition]=\"copyText\"\n            v-bind=\"button\"\n            @click=\"onClickCopy\"\n        >\n            <template #iconLeft>\n                <copy-icon :svg-title=\"svgTitle\" />\n            </template>\n            <template v-if=\"buttonText\" #default>\n                {{ buttonText }}\n            </template>\n        </bento-button>\n        <div v-if=\"showScreenReaderAlert\" role=\"alert\" class=\"b-copy__screen-reader-alert\">{{ t('copied') }}</div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoCopyButtonProps, CopyTooltipState } from './copy.types';\n    import CopyIcon from '@adyen/ui-assets-icons-16/vue/copy';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An internal button component that copies text to the user's clipboard.\n     *\n     * @example\n     * import { Copy } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { Copy },\n     *     template: `\n     *          <copy :text=\"textToCopy\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'copy',\n        components: { BentoButton, CopyIcon },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n             */\n            button: {\n                type: Object as PropType<BentoCopyButtonProps>,\n                default: () =>\n                    ({\n                        variant: 'tertiary',\n                    } as BentoCopyButtonProps),\n            },\n\n            /**\n             * Sets the button text of the copy button.\n             */\n            buttonText: {\n                type: String,\n                default: undefined,\n            },\n\n            /**\n             * Defines the string that will get copied to the clipboard\n             */\n            text: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Position the tooltip should take if space is available. Defaults to 'top'\n             */\n            tooltipPosition: {\n                type: String as PropType<PopperContainerPosition>,\n                default: PopperContainerPosition.TOP,\n            },\n        },\n        setup(props) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n            const showScreenReaderAlert = ref(false);\n            const onClickCopy = async () => {\n                try {\n                    await navigator.clipboard.writeText(props.text);\n                    copyState.value = CopyTooltipState.COPYING;\n                    showScreenReaderAlert.value = true;\n                } catch (e) {\n                    copyState.value = CopyTooltipState.ERROR;\n                }\n            };\n\n            const resetText = () => {\n                copyState.value = CopyTooltipState.DEFAULT;\n                showScreenReaderAlert.value = false;\n            };\n\n            const copyText = computed(() => {\n                switch (copyState.value) {\n                    case CopyTooltipState.COPYING:\n                        return t('copied');\n                    case CopyTooltipState.ERROR:\n                        return t('copyFailed');\n                    case CopyTooltipState.DEFAULT:\n                    default:\n                        return t('copy');\n                }\n            });\n\n            const svgTitle = computed(() => (props?.buttonText ? undefined : t('copy')));\n\n            return {\n                copyText,\n                onClickCopy,\n                resetText,\n                showScreenReaderAlert,\n                svgTitle,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","_sfc_main$1","_sfc_main","defineComponent","messages","BentoButton","CopyIcon","BentoTooltipDirective","PopperContainerPosition","props","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","resetText","copyText","computed","svgTitle"],"mappings":";;;;;;;AAEY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACGZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GCmCAE,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,UAAAC,EAAA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA,OAAA;AAAA,QAEA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,iBAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAA,EAAA,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAAd,EAAA,OAAA,GAEAe,IAAAD,EAAA,EAAA,GACAE,IAAA,YAAA;AACA,UAAA;AACA,cAAA,UAAA,UAAA,UAAAL,EAAA,IAAA,GACAE,EAAA,QAAAb,EAAA,SACAe,EAAA,QAAA;AAAA,MAAA,QAAA;AAEA,QAAAF,EAAA,QAAAb,EAAA;AAAA,MAAA;AAAA,IACA,GAGAiB,IAAA,MAAA;AACA,MAAAJ,EAAA,QAAAb,EAAA,SACAe,EAAA,QAAA;AAAA,IAAA,GAGAG,IAAAC,EAAA,MAAA;AACA,cAAAN,EAAA,OAAA;AAAA,QAAA,KAAAb,EAAA;AAEA,iBAAA,EAAA,QAAA;AAAA,QAAA,KAAAA,EAAA;AAEA,iBAAA,EAAA,YAAA;AAAA,QAAA,KAAAA,EAAA;AAAA,QACA;AAEA,iBAAA,EAAA,MAAA;AAAA,MAAA;AAAA,IACA,CAAA,GAGAoB,IAAAD,EAAA,MAAAR,KAAA,QAAAA,EAAA,aAAA,SAAA,EAAA,MAAA,CAAA;AAEA,WAAA;AAAA,MAAA,UAAAO;AAAA,MACA,aAAAF;AAAA,MACA,WAAAC;AAAA,MACA,uBAAAF;AAAA,MACA,UAAAK;AAAA;AAAA,MACA;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}
+{"version":3,"file":"copy.BakPR7GI.js","sources":["../../src/components/internal/copy/copy.types.ts","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/copy.vue","../../src/components/internal/copy/copy.vue"],"sourcesContent":["import type { BentoButton } from '../../button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport type BentoCopyButtonProps = {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\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><path fill=\"#00112C\" d=\"M3.5 1.25C2.25736 1.25 1.25 2.25736 1.25 3.5V8.5C1.25 9.74264 2.25736 10.75 3.5 10.75H5.25V12.5C5.25 13.7426 6.25736 14.75 7.5 14.75H12.5C13.7426 14.75 14.75 13.7426 14.75 12.5V7.5C14.75 6.25736 13.7426 5.25 12.5 5.25H10.75V3.5C10.75 2.25736 9.74264 1.25 8.5 1.25H3.5ZM9.25 5.25H7.5C6.25736 5.25 5.25 6.25736 5.25 7.5V9.25H3.5C3.08579 9.25 2.75 8.91421 2.75 8.5V3.5C2.75 3.08579 3.08579 2.75 3.5 2.75H8.5C8.91421 2.75 9.25 3.08579 9.25 3.5V5.25ZM6.75 12.5V7.5C6.75 7.08579 7.08579 6.75 7.5 6.75H12.5C12.9142 6.75 13.25 7.08579 13.25 7.5V12.5C13.25 12.9142 12.9142 13.25 12.5 13.25H7.5C7.08579 13.25 6.75 12.9142 6.75 12.5Z\"/></svg>\n</template>\n<script>\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n<style>\n    @import '../css/main.css';\n</style>\n","<template>\n    <div class=\"b-copy\" @mouseleave=\"resetText\" @focusout=\"resetText\">\n        <span v-if=\"$slots.default\" v-bento-tooltip-directive:[tooltipPosition]=\"copyText\" @click=\"onClickCopy\">\n            <slot />\n        </span>\n        <bento-button\n            v-else\n            v-bento-tooltip-directive:[tooltipPosition]=\"copyText\"\n            v-bind=\"button\"\n            @click=\"onClickCopy\"\n        >\n            <template #iconLeft>\n                <copy-icon :svg-title=\"svgTitle\" />\n            </template>\n            <template v-if=\"buttonText\" #default>\n                {{ buttonText }}\n            </template>\n        </bento-button>\n        <div v-if=\"showScreenReaderAlert\" role=\"alert\" class=\"b-copy__screen-reader-alert\">{{ t('copied') }}</div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoCopyButtonProps, CopyTooltipState } from './copy.types';\n    import CopyIcon from '@adyen/ui-assets-icons-16/vue/copy';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An internal button component that copies text to the user's clipboard.\n     *\n     * @example\n     * import { Copy } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { Copy },\n     *     template: `\n     *          <copy :text=\"textToCopy\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'copy',\n        components: { BentoButton, CopyIcon },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n             */\n            button: {\n                type: Object as PropType<BentoCopyButtonProps>,\n                default: () =>\n                    ({\n                        variant: 'tertiary',\n                    } as BentoCopyButtonProps),\n            },\n\n            /**\n             * Sets the button text of the copy button.\n             */\n            buttonText: {\n                type: String,\n                default: undefined,\n            },\n\n            /**\n             * Defines the string that will get copied to the clipboard\n             */\n            text: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Position the tooltip should take if space is available. Defaults to 'top'\n             */\n            tooltipPosition: {\n                type: String as PropType<PopperContainerPosition>,\n                default: PopperContainerPosition.TOP,\n            },\n        },\n        setup(props) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n            const showScreenReaderAlert = ref(false);\n            const onClickCopy = async () => {\n                try {\n                    await navigator.clipboard.writeText(props.text);\n                    copyState.value = CopyTooltipState.COPYING;\n                    showScreenReaderAlert.value = true;\n                } catch (e) {\n                    copyState.value = CopyTooltipState.ERROR;\n                }\n            };\n\n            const resetText = () => {\n                copyState.value = CopyTooltipState.DEFAULT;\n                showScreenReaderAlert.value = false;\n            };\n\n            const copyText = computed(() => {\n                switch (copyState.value) {\n                    case CopyTooltipState.COPYING:\n                        return t('copied');\n                    case CopyTooltipState.ERROR:\n                        return t('copyFailed');\n                    case CopyTooltipState.DEFAULT:\n                    default:\n                        return t('copy');\n                }\n            });\n\n            const svgTitle = computed(() => (props?.buttonText ? undefined : t('copy')));\n\n            return {\n                copyText,\n                onClickCopy,\n                resetText,\n                showScreenReaderAlert,\n                svgTitle,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","_sfc_main$1","_sfc_main","defineComponent","messages","BentoButton","CopyIcon","BentoTooltipDirective","PopperContainerPosition","props","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","resetText","copyText","computed","svgTitle"],"mappings":";;;;;;;AAEY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACGZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GCmCAE,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,UAAAC,EAAA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA,OAAA;AAAA,QAEA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,iBAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAA,EAAA,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAAd,EAAA,OAAA,GAEAe,IAAAD,EAAA,EAAA,GACAE,IAAA,YAAA;AACA,UAAA;AACA,cAAA,UAAA,UAAA,UAAAL,EAAA,IAAA,GACAE,EAAA,QAAAb,EAAA,SACAe,EAAA,QAAA;AAAA,MAAA,QAAA;AAEA,QAAAF,EAAA,QAAAb,EAAA;AAAA,MAAA;AAAA,IACA,GAGAiB,IAAA,MAAA;AACA,MAAAJ,EAAA,QAAAb,EAAA,SACAe,EAAA,QAAA;AAAA,IAAA,GAGAG,IAAAC,EAAA,MAAA;AACA,cAAAN,EAAA,OAAA;AAAA,QAAA,KAAAb,EAAA;AAEA,iBAAA,EAAA,QAAA;AAAA,QAAA,KAAAA,EAAA;AAEA,iBAAA,EAAA,YAAA;AAAA,QAAA,KAAAA,EAAA;AAAA,QACA;AAEA,iBAAA,EAAA,MAAA;AAAA,MAAA;AAAA,IACA,CAAA,GAGAoB,IAAAD,EAAA,MAAAR,KAAA,QAAAA,EAAA,aAAA,SAAA,EAAA,MAAA,CAAA;AAEA,WAAA;AAAA,MAAA,UAAAO;AAAA,MACA,aAAAF;AAAA,MACA,WAAAC;AAAA,MACA,uBAAAF;AAAA,MACA,UAAAK;AAAA;AAAA,MACA;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;","x_google_ignoreList":[1]}

package/dist/chunks/{country.Bft91V1L.js → country.BegULkAC.js}

@@ -1,6 +1,6 @@
 import { defineComponent as y, toRefs as p, ref as d, watch as v, inject as _ } from "vue";
-import { B as f, d as C } from "./typography.J1v_SPG3.js";
-import { B as o, a as u, b, u as S, c as h } from "./country.types.pilf5B3F.js";
+import { B as f, d as C } from "./typography.Bu_WAKdf.js";
+import { a as u, B as o, b, u as S, c as h } from "./country.types.pilf5B3F.js";
 import { u as L } from "./i18n.BQkEbtPM.js";
 import { S as N } from "./summary-grid.keys.BBbFrFGF.js";
 import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -90,4 +90,4 @@ const R = A.exports;
 export {
   R as c
 };
-//# sourceMappingURL=country.Bft91V1L.js.map
+//# sourceMappingURL=country.BegULkAC.js.map

package/dist/chunks/{country.Bft91V1L.js.map → country.BegULkAC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"country.Bft91V1L.js","sources":["../../src/components/country/country.vue"],"sourcesContent":["<template>\n    <div class=\"b-country\">\n        <div class=\"b-country__label\">\n            <span v-if=\"isSummaryGridLayout\">{{ countryLabel }}</span>\n            <bento-typography v-else el=\"span\">{{ countryLabel }}</bento-typography>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, inject, PropType, ref, toRefs, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryCapital, useCountryName, useCountryPhoneCode } from './composables';\n    import { BentoCountryCode, BentoCountryVariant } from './country.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoSummaryGridLayout } from '@/components/summary-grid';\n    import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys';\n\n    /**\n     * A component to display a country's label.\n     * The label comes in four variates: iso code, country name, phone number code or capital city.\n     *\n     * @example\n     * import { BentoCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCountry },\n     *     template: `\n     *          <bento-country :code=\"BentoCountryCode.NL\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-country',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).\n             */\n            code: {\n                type: String as PropType<BentoCountryCode | `${BentoCountryCode}`>,\n                default: BentoCountryCode.UNKNOWN,\n                validator: (value: BentoCountryCode) =>\n                    Object.values(BentoCountryCode).includes(value.toUpperCase() as BentoCountryCode),\n            },\n\n            /**\n             * Custom label text.\n             */\n            label: {\n                type: String,\n                default: undefined,\n            },\n\n            /**\n             * Which label variant to display.\n             * @values iso, name, phone_code, capital\n             */\n            variant: {\n                type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>,\n                default: BentoCountryVariant.NAME,\n                validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n            },\n        },\n\n        setup(props) {\n            const { code, variant, label: customLabel } = toRefs(props);\n            const { locale } = useI18n(undefined, true);\n            const countryName = useCountryName(code, locale);\n            const countryLabel = ref('');\n\n            const getLabel = () => {\n                switch (variant.value) {\n                    case BentoCountryVariant.ISO:\n                        return code.value;\n                    case BentoCountryVariant.PHONE_CODE:\n                        return `${code.value} (${useCountryPhoneCode(code).value})`;\n                    case BentoCountryVariant.CAPITAL:\n                        // TODO: do we need an API OR get a longer translations list???\n                        // Need to be able TRANSLATE as well as map...\n                        return `${useCountryCapital(code, locale).value} (${countryName.value})`;\n                    case BentoCountryVariant.CUSTOM:\n                        return customLabel.value;\n                    case BentoCountryVariant.NAME:\n                    default:\n                        return countryName.value;\n                }\n            };\n\n            // Update label if variant prop changes\n            watch(\n                [variant, locale, code],\n                () => {\n                    countryLabel.value = getLabel();\n                },\n                { immediate: true }\n            );\n\n            if (variant.value === 'custom' || props.label) {\n                deprecate(\n                    'BentoCountry \"custom\" variant and \"label\" prop',\n                    'Use any of the other BentoCountry variants instead OR BentoTypography component for custom text',\n                    '2.0.0'\n                );\n            }\n\n            /* == Summary-grid styles == */\n            const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject(\n                SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n                () => ({\n                    isSummaryGridLayout: false,\n                })\n            );\n\n            const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid();\n\n            return {\n                // Values\n                countryName,\n                countryLabel,\n                isSummaryGridLayout,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./country.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTypography","BentoCountryCode","value","BentoCountryVariant","props","code","variant","customLabel","toRefs","locale","useI18n","countryName","useCountryName","countryLabel","ref","getLabel","useCountryPhoneCode","useCountryCapital","watch","deprecate","registerPaymentMethodInSummaryGrid","inject","SUMMARY_GRID_LAYOUT_INJECTION_KEY","isSummaryGridLayout"],"mappings":";;;;;;;AAiCA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,OAAAD,CAAA,EAAA,SAAAC,EAAA,YAAA,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,CAAAD,MAAA,OAAA,OAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAE,GAAA;AAGA,UAAA,EAAA,MAAAC,GAAA,SAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAJ,CAAA,GACA,EAAA,QAAAK,EAAA,IAAAC,EAAA,QAAA,EAAA,GACAC,IAAAC,EAAAP,GAAAI,CAAA,GACAI,IAAAC,EAAA,EAAA,GAEAC,IAAA,MAAA;AACA,cAAAT,EAAA,OAAA;AAAA,QAAA,KAAAH,EAAA;AAEA,iBAAAE,EAAA;AAAA,QAAA,KAAAF,EAAA;AAEA,iBAAA,GAAAE,EAAA,KAAA,KAAAW,EAAAX,CAAA,EAAA,KAAA;AAAA,QAAA,KAAAF,EAAA;AAIA,iBAAA,GAAAc,EAAAZ,GAAAI,CAAA,EAAA,KAAA,KAAAE,EAAA,KAAA;AAAA,QAAA,KAAAR,EAAA;AAEA,iBAAAI,EAAA;AAAA,QAAA,KAAAJ,EAAA;AAAA,QACA;AAEA,iBAAAQ,EAAA;AAAA,MAAA;AAAA,IACA;AAIA,IAAAO;AAAA,MAAA,CAAAZ,GAAAG,GAAAJ,CAAA;AAAA,MACA,MAAA;AAEA,QAAAQ,EAAA,QAAAE,EAAA;AAAA,MAAA;AAAA,MACA,EAAA,WAAA,GAAA;AAAA,IACA,IAGAT,EAAA,UAAA,YAAAF,EAAA,UACAe;AAAA,MAAA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAKA,UAAAC,IAAAC;AAAA,MAAAC;AAAA,MACA,OAAA;AAAA,QACA,qBAAA;AAAA,MACA;AAAA,IACA,GAGA,EAAA,qBAAAC,EAAA,IAAAH,EAAA;AAEA,WAAA;AAAA;AAAA,MAAA,aAAAT;AAAA,MAEA,cAAAE;AAAA,MACA,qBAAAU;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}
+{"version":3,"file":"country.BegULkAC.js","sources":["../../src/components/country/country.vue"],"sourcesContent":["<template>\n    <div class=\"b-country\">\n        <div class=\"b-country__label\">\n            <span v-if=\"isSummaryGridLayout\">{{ countryLabel }}</span>\n            <bento-typography v-else el=\"span\">{{ countryLabel }}</bento-typography>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { defineComponent, inject, PropType, ref, toRefs, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { useCountryCapital, useCountryName, useCountryPhoneCode } from './composables';\n    import { BentoCountryCode, BentoCountryVariant } from './country.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { BentoSummaryGridLayout } from '@/components/summary-grid';\n    import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys';\n\n    /**\n     * A component to display a country's label.\n     * The label comes in four variates: iso code, country name, phone number code or capital city.\n     *\n     * @example\n     * import { BentoCountry, BentoCountryCode } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCountry },\n     *     template: `\n     *          <bento-country :code=\"BentoCountryCode.NL\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-country',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Two character country code ([ISO 3166-1 alpha-2 format](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)).\n             */\n            code: {\n                type: String as PropType<BentoCountryCode | `${BentoCountryCode}`>,\n                default: BentoCountryCode.UNKNOWN,\n                validator: (value: BentoCountryCode) =>\n                    Object.values(BentoCountryCode).includes(value.toUpperCase() as BentoCountryCode),\n            },\n\n            /**\n             * Custom label text.\n             */\n            label: {\n                type: String,\n                default: undefined,\n            },\n\n            /**\n             * Which label variant to display.\n             * @values iso, name, phone_code, capital\n             */\n            variant: {\n                type: String as PropType<BentoCountryVariant | `${BentoCountryVariant}`>,\n                default: BentoCountryVariant.NAME,\n                validator: (value: BentoCountryVariant) => Object.values(BentoCountryVariant).includes(value),\n            },\n        },\n\n        setup(props) {\n            const { code, variant, label: customLabel } = toRefs(props);\n            const { locale } = useI18n(undefined, true);\n            const countryName = useCountryName(code, locale);\n            const countryLabel = ref('');\n\n            const getLabel = () => {\n                switch (variant.value) {\n                    case BentoCountryVariant.ISO:\n                        return code.value;\n                    case BentoCountryVariant.PHONE_CODE:\n                        return `${code.value} (${useCountryPhoneCode(code).value})`;\n                    case BentoCountryVariant.CAPITAL:\n                        // TODO: do we need an API OR get a longer translations list???\n                        // Need to be able TRANSLATE as well as map...\n                        return `${useCountryCapital(code, locale).value} (${countryName.value})`;\n                    case BentoCountryVariant.CUSTOM:\n                        return customLabel.value;\n                    case BentoCountryVariant.NAME:\n                    default:\n                        return countryName.value;\n                }\n            };\n\n            // Update label if variant prop changes\n            watch(\n                [variant, locale, code],\n                () => {\n                    countryLabel.value = getLabel();\n                },\n                { immediate: true }\n            );\n\n            if (variant.value === 'custom' || props.label) {\n                deprecate(\n                    'BentoCountry \"custom\" variant and \"label\" prop',\n                    'Use any of the other BentoCountry variants instead OR BentoTypography component for custom text',\n                    '2.0.0'\n                );\n            }\n\n            /* == Summary-grid styles == */\n            const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject(\n                SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n                () => ({\n                    isSummaryGridLayout: false,\n                })\n            );\n\n            const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid();\n\n            return {\n                // Values\n                countryName,\n                countryLabel,\n                isSummaryGridLayout,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./country.scss\" />\n"],"names":["_sfc_main","defineComponent","BentoTypography","BentoCountryCode","value","BentoCountryVariant","props","code","variant","customLabel","toRefs","locale","useI18n","countryName","useCountryName","countryLabel","ref","getLabel","useCountryPhoneCode","useCountryCapital","watch","deprecate","registerPaymentMethodInSummaryGrid","inject","SUMMARY_GRID_LAYOUT_INJECTION_KEY","isSummaryGridLayout"],"mappings":";;;;;;;AAiCA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,OAAAD,CAAA,EAAA,SAAAC,EAAA,YAAA,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,SAAA;AAAA,MAMA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,CAAAD,MAAA,OAAA,OAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAE,GAAA;AAGA,UAAA,EAAA,MAAAC,GAAA,SAAAC,GAAA,OAAAC,EAAA,IAAAC,EAAAJ,CAAA,GACA,EAAA,QAAAK,EAAA,IAAAC,EAAA,QAAA,EAAA,GACAC,IAAAC,EAAAP,GAAAI,CAAA,GACAI,IAAAC,EAAA,EAAA,GAEAC,IAAA,MAAA;AACA,cAAAT,EAAA,OAAA;AAAA,QAAA,KAAAH,EAAA;AAEA,iBAAAE,EAAA;AAAA,QAAA,KAAAF,EAAA;AAEA,iBAAA,GAAAE,EAAA,KAAA,KAAAW,EAAAX,CAAA,EAAA,KAAA;AAAA,QAAA,KAAAF,EAAA;AAIA,iBAAA,GAAAc,EAAAZ,GAAAI,CAAA,EAAA,KAAA,KAAAE,EAAA,KAAA;AAAA,QAAA,KAAAR,EAAA;AAEA,iBAAAI,EAAA;AAAA,QAAA,KAAAJ,EAAA;AAAA,QACA;AAEA,iBAAAQ,EAAA;AAAA,MAAA;AAAA,IACA;AAIA,IAAAO;AAAA,MAAA,CAAAZ,GAAAG,GAAAJ,CAAA;AAAA,MACA,MAAA;AAEA,QAAAQ,EAAA,QAAAE,EAAA;AAAA,MAAA;AAAA,MACA,EAAA,WAAA,GAAA;AAAA,IACA,IAGAT,EAAA,UAAA,YAAAF,EAAA,UACAe;AAAA,MAAA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAKA,UAAAC,IAAAC;AAAA,MAAAC;AAAA,MACA,OAAA;AAAA,QACA,qBAAA;AAAA,MACA;AAAA,IACA,GAGA,EAAA,qBAAAC,EAAA,IAAAH,EAAA;AAEA,WAAA;AAAA;AAAA,MAAA,aAAAT;AAAA,MAEA,cAAAE;AAAA,MACA,qBAAAU;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}

package/dist/chunks/{currency.BmI4Sqy5.js → currency.P7Psn_SK.js}

@@ -1,5 +1,5 @@
 import { defineComponent as m, useSlots as G, computed as i, onMounted as f } from "vue";
-import { d as E, B as U } from "./typography.J1v_SPG3.js";
+import { d as E, B as U } from "./typography.Bu_WAKdf.js";
 import { g as P } from "./get-slot-text.Cgn-E48s.js";
 import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/currency.css";
@@ -103,4 +103,4 @@ export {
   N as B,
   j as c
 };
-//# sourceMappingURL=currency.BmI4Sqy5.js.map
+//# sourceMappingURL=currency.P7Psn_SK.js.map

package/dist/chunks/{currency.BmI4Sqy5.js.map → currency.P7Psn_SK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"currency.BmI4Sqy5.js","sources":["../../src/utils/ts/currency/countries-list.ts","../../src/utils/ts/currency/currency.ts","../../src/components/currency/currency.types.ts","../../src/components/currency/currency.vue"],"sourcesContent":["/**\n * Contains mapping configuration between currency code and exponent for amount in the corresponding currency.\n * Since the majority of the currencies have an exponent equal to 2, they are not listed here.\n * https://docs.adyen.com/development-resources/currency-codes\n * @type {Array}\n * @internal\n */\nexport const currencyExponentMap = [\n    {\n        exponent: 0,\n        currencies: [\n            'CVE',\n            'DJF',\n            'GNF',\n            'IDR',\n            'JPY',\n            'KMF',\n            'KRW',\n            'PYG',\n            'RWF',\n            'UGX',\n            'VND',\n            'VUV',\n            'XAF',\n            'XOF',\n            'XPF',\n        ],\n    },\n    {\n        exponent: 1,\n        currencies: ['MRO'],\n    },\n    {\n        exponent: 3,\n        currencies: ['BHD', 'IQD', 'JOD', 'KWD', 'LYD', 'OMR', 'TND'],\n    },\n];\n","import { CurrencyAmount, CurrencyOptions, NumberFormatOptionsResult } from './currency.types';\nimport { currencyExponentMap } from './countries-list';\n\n/**\n * Returns exponent for specified currency code.\n */\nexport const getExponent = (currencyCode: string): number =>\n    currencyExponentMap.find(obj => obj.currencies.includes(currencyCode))?.exponent ?? 2;\n\n/**\n * Converts passed amount from regular to minor units, based on currency exponent\n */\nexport const getMinorUnitsAmount = (amount: CurrencyAmount): number => {\n    const exponent = getExponent(amount.currency);\n    const value = Number(amount.value);\n\n    return Math.round(value * 10 ** exponent);\n};\n\n/**\n * Returns normalized amount value from minor units as decimal point number (when exponent is more than zero).\n */\nexport const getNormalizedAmount = (amount: CurrencyAmount, exponent: number) =>\n    // Amount is in minor units and have to be converted to number with fraction digits\n    // return (amount.value * 100) / 10 ** exp;\n    amount.value / 10 ** exponent;\n\n/**\n * /**\n * Prepares amount to be rendered by Intl.NumberFormat function.\n * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat\n *\n * It enables language-sensitive number formatting.\n * Adds currency symbol and ISO code based on provided options\n * The result of execution - is a configuration object that is used in 'getLocalizedCurrencyValue' function\n *\n * @param amount - the value and currency to format.\n * @param options - the formatting options that are passed to the Intl.NumberFormat function.\n * @param majorUnits - if set to true, then currency major units will be used instead of minor ones\n */\nexport function getNumberFormatOptions(\n    amount: CurrencyAmount,\n    options: CurrencyOptions = {},\n    majorUnits = false\n): NumberFormatOptionsResult {\n    // Exponent is based on currency, if not specified explicitly.\n    const exp = options?.exponent ?? getExponent(amount.currency);\n    // Minor Units have to be retrieved from component passed amount\n    const minorAmount = majorUnits ? getMinorUnitsAmount(amount) : amount.value;\n    const amountInMinorUnits: CurrencyAmount = { ...amount, value: minorAmount };\n    // Amount is in minor units and have to be converted to number with fraction digits\n    const value = getNormalizedAmount(amountInMinorUnits, exp);\n    // This is the requirement for currency component - to remove currency symbol for negative values\n    const style = value < 0 ? 'decimal' : options?.style || 'currency';\n    // If optionalFractions is true, numbers will not contain fraction digits when they are zero (e.g. 100.00 will be 100)\n    const minimumFractionDigits = options?.optionalFractions ? 0 : exp;\n    // If highPrecision is true, numbers can contain 10 fraction digits (highest precision in Adyen is about 5)\n    const maximumFractionDigits = options?.highPrecision ? 10 : exp;\n\n    return {\n        value,\n        format: {\n            style,\n            currency: amount.currency,\n            currencyDisplay: 'symbol',\n            minimumFractionDigits,\n            maximumFractionDigits,\n        },\n    };\n}\n\n/**\n * Get a formatted and localised currency string given an amount and currency type.\n *\n * @param amountValue - the amount of the currency.\n * @param currency - the ISO 4217 currency code.\n * @param majorUnits - if set to true, then currency major units will be used instead of minor ones\n */\nexport const getLocalizedCurrencyValue = (amountValue: string, currency: string, majorUnits?: boolean): string => {\n    const amount: CurrencyAmount = { value: parseFloat(amountValue), currency };\n    const numberFormatOptions = getNumberFormatOptions(amount, { style: 'decimal' }, majorUnits);\n    // TODO replace hardcoded locale with dynamic one, when i18n strategy is defined\n    const formatter = new Intl.NumberFormat('en-US', numberFormatOptions.format as Intl.NumberFormatOptions);\n\n    return formatter.format(numberFormatOptions.value);\n};\n","export interface BentoCurrencyProps {\n    /**\n     * Currency code based on the ISO 4217 standard\n     */\n    currency?: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`;\n\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography component.\n     */\n    disableTypography?: boolean;\n\n    /**\n     * Accepts currency value in major units instead of minor ones\n     */\n    majorUnits?: boolean;\n\n    /**\n     * Currency value to be formatted\n     */\n    value?: number;\n}\n\nexport enum BentoCurrencyISOCode {\n    AFA = 'AFA',\n    ALL = 'ALL',\n    DZD = 'DZD',\n    AOA = 'AOA',\n    ARS = 'ARS',\n    AMD = 'AMD',\n    AWG = 'AWG',\n    AUD = 'AUD',\n    AZN = 'AZN',\n    BSD = 'BSD',\n    BHD = 'BHD',\n    BDT = 'BDT',\n    BBD = 'BBD',\n    BYR = 'BYR',\n    BEF = 'BEF',\n    BZD = 'BZD',\n    BMD = 'BMD',\n    BTN = 'BTN',\n    BTC = 'BTC',\n    BOB = 'BOB',\n    BAM = 'BAM',\n    BWP = 'BWP',\n    BRL = 'BRL',\n    GBP = 'GBP',\n    BND = 'BND',\n    BGN = 'BGN',\n    BIF = 'BIF',\n    KHR = 'KHR',\n    CAD = 'CAD',\n    CVE = 'CVE',\n    KYD = 'KYD',\n    XOF = 'XOF',\n    XAF = 'XAF',\n    XPF = 'XPF',\n    CLP = 'CLP',\n    CLF = 'CLF',\n    CNY = 'CNY',\n    COP = 'COP',\n    KMF = 'KMF',\n    CDF = 'CDF',\n    CRC = 'CRC',\n    HRK = 'HRK',\n    CUC = 'CUC',\n    CZK = 'CZK',\n    DKK = 'DKK',\n    DJF = 'DJF',\n    DOP = 'DOP',\n    XCD = 'XCD',\n    EGP = 'EGP',\n    ERN = 'ERN',\n    EEK = 'EEK',\n    ETB = 'ETB',\n    EUR = 'EUR',\n    FKP = 'FKP',\n    FJD = 'FJD',\n    GMD = 'GMD',\n    GEL = 'GEL',\n    DEM = 'DEM',\n    GHS = 'GHS',\n    GIP = 'GIP',\n    GRD = 'GRD',\n    GTQ = 'GTQ',\n    GNF = 'GNF',\n    GYD = 'GYD',\n    HTG = 'HTG',\n    HNL = 'HNL',\n    HKD = 'HKD',\n    HUF = 'HUF',\n    ISK = 'ISK',\n    INR = 'INR',\n    IDR = 'IDR',\n    IRR = 'IRR',\n    IQD = 'IQD',\n    ILS = 'ILS',\n    ITL = 'ITL',\n    JMD = 'JMD',\n    JPY = 'JPY',\n    JOD = 'JOD',\n    KZT = 'KZT',\n    KES = 'KES',\n    KWD = 'KWD',\n    KGS = 'KGS',\n    LAK = 'LAK',\n    LVL = 'LVL',\n    LBP = 'LBP',\n    LSL = 'LSL',\n    LRD = 'LRD',\n    LYD = 'LYD',\n    LTC = 'LTC',\n    LTL = 'LTL',\n    MOP = 'MOP',\n    MKD = 'MKD',\n    MGA = 'MGA',\n    MWK = 'MWK',\n    MYR = 'MYR',\n    MVR = 'MVR',\n    MRO = 'MRO',\n    MUR = 'MUR',\n    MXN = 'MXN',\n    MDL = 'MDL',\n    MNT = 'MNT',\n    MAD = 'MAD',\n    MZM = 'MZM',\n    MMK = 'MMK',\n    NAD = 'NAD',\n    NPR = 'NPR',\n    ANG = 'ANG',\n    TWD = 'TWD',\n    NZD = 'NZD',\n    NIO = 'NIO',\n    NGN = 'NGN',\n    KPW = 'KPW',\n    NOK = 'NOK',\n    OMR = 'OMR',\n    PKR = 'PKR',\n    PAB = 'PAB',\n    PGK = 'PGK',\n    PYG = 'PYG',\n    PEN = 'PEN',\n    PHP = 'PHP',\n    PLN = 'PLN',\n    QAR = 'QAR',\n    RON = 'RON',\n    RUB = 'RUB',\n    RWF = 'RWF',\n    SVC = 'SVC',\n    WST = 'WST',\n    STD = 'STD',\n    SAR = 'SAR',\n    RSD = 'RSD',\n    SCR = 'SCR',\n    SLL = 'SLL',\n    SGD = 'SGD',\n    SKK = 'SKK',\n    SBD = 'SBD',\n    SOS = 'SOS',\n    ZAR = 'ZAR',\n    KRW = 'KRW',\n    SSP = 'SSP',\n    XDR = 'XDR',\n    LKR = 'LKR',\n    SHP = 'SHP',\n    SDG = 'SDG',\n    SRD = 'SRD',\n    SZL = 'SZL',\n    SEK = 'SEK',\n    CHF = 'CHF',\n    SYP = 'SYP',\n    TJS = 'TJS',\n    TZS = 'TZS',\n    THB = 'THB',\n    TOP = 'TOP',\n    TTD = 'TTD',\n    TND = 'TND',\n    TRY = 'TRY',\n    TMT = 'TMT',\n    UGX = 'UGX',\n    UAH = 'UAH',\n    AED = 'AED',\n    UYU = 'UYU',\n    USD = 'USD',\n    UZS = 'UZS',\n    VUV = 'VUV',\n    VEF = 'VEF',\n    VND = 'VND',\n    YER = 'YER',\n    ZMK = 'ZMK',\n    ZWL = 'ZWL',\n}\n","<template>\n    <div class=\"b-currency\">\n        <bento-typography v-if=\"!disableTypography\" class=\"b-currency__amount\" el=\"span\" variant=\"body\" strong>\n            {{ formattedCurrency }} {{ currency }}\n        </bento-typography>\n        <template v-else>{{ formattedCurrency }} {{ currency }}</template>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { getLocalizedCurrencyValue } from '@/utils/ts/currency/currency';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoCurrencyISOCode, BentoCurrencyProps } from './currency.types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const slots = useSlots();\n\n    const props = defineProps({\n  currency: { default: BentoCurrencyISOCode.EUR },\n  disableTypography: { type: Boolean, default: false },\n  majorUnits: { type: Boolean, default: false },\n  value: { default: undefined }\n});\n\n    const formattedCurrency = computed<string>(() => {\n        const value = props.value || getSlotText(slots)('default');\n        return getLocalizedCurrencyValue(value as string, props.currency, props.majorUnits);\n    });\n\n    onMounted(() => {\n        if (getSlotText(slots)('default')) {\n            deprecate(\n                'BentoCurrency \"default\" slot',\n                `The use of \"default\" slot in \"BentoCurrency\" is no longer supported as it causes issues with dynamic content.\n                Use the \"value\" property instead.\n                <bento-currency :value=\"12345.67\" currency=\"USD\" major-units=\"false\" />`,\n                '2.0.0'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency component is used to display a formatted currency value.\n     *\n     * @example\n     * import { BentoCurrency, BentoCurrencyISOCode } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCurrency },\n     *     template: `\n     *          <bento-currency\n     *              :currency=\"BentoCurrencyISOCode.USD\"\n     *              :value=\"76.33\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-currency',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./currency.scss\" />\n"],"names":["currencyExponentMap","getExponent","currencyCode","_a","obj","getMinorUnitsAmount","amount","exponent","value","getNormalizedAmount","getNumberFormatOptions","options","majorUnits","exp","minorAmount","amountInMinorUnits","style","minimumFractionDigits","maximumFractionDigits","getLocalizedCurrencyValue","amountValue","currency","numberFormatOptions","BentoCurrencyISOCode","BentoCurrencyISOCode2","__default__","slots","useSlots","formattedCurrency","computed","props","getSlotText","onMounted","deprecate"],"mappings":";;;;;AAOO,MAAAA,IAAA;AAAA,EAA4B;AAAA,IAC/B,UAAA;AAAA,IACc,YAAA;AAAA,MACE;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACJ;AAAA,EACJ;AAAA,IACA,UAAA;AAAA,IACc,YAAA,CAAA,KAAA;AAAA,EACQ;AAAA,EACtB;AAAA,IACA,UAAA;AAAA,IACc,YAAA,CAAA,OAAA,OAAA,OAAA,OAAA,OAAA,OAAA,KAAA;AAAA,EACkD;AAEpE,GC9BOC,IAAA,CAAAC,MAAA;;AAAA,WAAAC,IAAAH,EAAA,KAAA,CAAAI,MAAAA,EAAA,WAAA,SAAAF,CAAA,CAAA,MAAA,gBAAAC,EAAA,aAAA;AAAA,GAMME,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAN,EAAAK,EAAA,QAAA,GACAE,IAAA,OAAAF,EAAA,KAAA;AAEA,SAAA,KAAA,MAAAE,IAAA,MAAAD,CAAA;AACJ,GAKaE,IAAA,CAAAH,GAAAC;AAAA;AAAA;AAAA,EAA+CD,EAAA,QAAA,MAAAC;AAAA;AAkBrD,SAAAG,EAAAJ,GAAAK,IAAA,CAAA,GAAAC,IAAA,IAAA;AAMH,QAAAC,KAAAF,KAAA,gBAAAA,EAAA,aAAAV,EAAAK,EAAA,QAAA,GAEAQ,IAAAF,IAAAP,EAAAC,CAAA,IAAAA,EAAA,OACAS,IAAA,EAAA,GAAAT,GAAA,OAAAQ,EAAA,GAEAN,IAAAC,EAAAM,GAAAF,CAAA,GAEAG,IAAAR,IAAA,IAAA,aAAAG,KAAA,gBAAAA,EAAA,UAAA,YAEAM,IAAAN,KAAA,QAAAA,EAAA,oBAAA,IAAAE,GAEAK,IAAAP,KAAA,QAAAA,EAAA,gBAAA,KAAAE;AAEA,SAAA;AAAA,IAAO,OAAAL;AAAA,IACH,QAAA;AAAA,MACQ,OAAAQ;AAAA,MACJ,UAAAV,EAAA;AAAA,MACiB,iBAAA;AAAA,MACA,uBAAAW;AAAA,MACjB,uBAAAC;AAAA,IACA;AAAA,EACJ;AAER;AASO,MAAAC,IAAA,CAAAC,GAAAC,GAAAT,MAAA;AACH,QAAAN,IAAA,EAAA,OAAA,WAAAc,CAAA,GAAA,UAAAC,EAAA,GACAC,IAAAZ,EAAAJ,GAAA,EAAA,OAAA,UAAA,GAAAM,CAAA;AAIA,SAFA,IAAA,KAAA,aAAA,SAAAU,EAAA,MAAA,EAEA,OAAAA,EAAA,KAAA;AACJ;AC/DY,IAAAC,IAAA,kBAAAC,OACRA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OAxKQA,IAAAD,KAAA,CAAA,CAAA;ACuCR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;iBA9CAC,IAAAC,EAAA,GASAC,IAAAC,EAAA,MAAA;AACI,YAAArB,IAAAsB,EAAA,SAAAC,EAAAL,CAAA,EAAA,SAAA;AACA,aAAAP,EAAAX,GAAAsB,EAAA,UAAAA,EAAA,UAAA;AAAA,IAAkF,CAAA;AAGtF,WAAAE,EAAA,MAAA;AACI,MAAAD,EAAAL,CAAA,EAAA,SAAA,KACIO;AAAA,QAAA;AAAA,QACI;AAAA;AAAA;AAAA,QACA;AAAA,MAGA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"currency.P7Psn_SK.js","sources":["../../src/utils/ts/currency/countries-list.ts","../../src/utils/ts/currency/currency.ts","../../src/components/currency/currency.types.ts","../../src/components/currency/currency.vue"],"sourcesContent":["/**\n * Contains mapping configuration between currency code and exponent for amount in the corresponding currency.\n * Since the majority of the currencies have an exponent equal to 2, they are not listed here.\n * https://docs.adyen.com/development-resources/currency-codes\n * @type {Array}\n * @internal\n */\nexport const currencyExponentMap = [\n    {\n        exponent: 0,\n        currencies: [\n            'CVE',\n            'DJF',\n            'GNF',\n            'IDR',\n            'JPY',\n            'KMF',\n            'KRW',\n            'PYG',\n            'RWF',\n            'UGX',\n            'VND',\n            'VUV',\n            'XAF',\n            'XOF',\n            'XPF',\n        ],\n    },\n    {\n        exponent: 1,\n        currencies: ['MRO'],\n    },\n    {\n        exponent: 3,\n        currencies: ['BHD', 'IQD', 'JOD', 'KWD', 'LYD', 'OMR', 'TND'],\n    },\n];\n","import { CurrencyAmount, CurrencyOptions, NumberFormatOptionsResult } from './currency.types';\nimport { currencyExponentMap } from './countries-list';\n\n/**\n * Returns exponent for specified currency code.\n */\nexport const getExponent = (currencyCode: string): number =>\n    currencyExponentMap.find(obj => obj.currencies.includes(currencyCode))?.exponent ?? 2;\n\n/**\n * Converts passed amount from regular to minor units, based on currency exponent\n */\nexport const getMinorUnitsAmount = (amount: CurrencyAmount): number => {\n    const exponent = getExponent(amount.currency);\n    const value = Number(amount.value);\n\n    return Math.round(value * 10 ** exponent);\n};\n\n/**\n * Returns normalized amount value from minor units as decimal point number (when exponent is more than zero).\n */\nexport const getNormalizedAmount = (amount: CurrencyAmount, exponent: number) =>\n    // Amount is in minor units and have to be converted to number with fraction digits\n    // return (amount.value * 100) / 10 ** exp;\n    amount.value / 10 ** exponent;\n\n/**\n * /**\n * Prepares amount to be rendered by Intl.NumberFormat function.\n * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat\n *\n * It enables language-sensitive number formatting.\n * Adds currency symbol and ISO code based on provided options\n * The result of execution - is a configuration object that is used in 'getLocalizedCurrencyValue' function\n *\n * @param amount - the value and currency to format.\n * @param options - the formatting options that are passed to the Intl.NumberFormat function.\n * @param majorUnits - if set to true, then currency major units will be used instead of minor ones\n */\nexport function getNumberFormatOptions(\n    amount: CurrencyAmount,\n    options: CurrencyOptions = {},\n    majorUnits = false\n): NumberFormatOptionsResult {\n    // Exponent is based on currency, if not specified explicitly.\n    const exp = options?.exponent ?? getExponent(amount.currency);\n    // Minor Units have to be retrieved from component passed amount\n    const minorAmount = majorUnits ? getMinorUnitsAmount(amount) : amount.value;\n    const amountInMinorUnits: CurrencyAmount = { ...amount, value: minorAmount };\n    // Amount is in minor units and have to be converted to number with fraction digits\n    const value = getNormalizedAmount(amountInMinorUnits, exp);\n    // This is the requirement for currency component - to remove currency symbol for negative values\n    const style = value < 0 ? 'decimal' : options?.style || 'currency';\n    // If optionalFractions is true, numbers will not contain fraction digits when they are zero (e.g. 100.00 will be 100)\n    const minimumFractionDigits = options?.optionalFractions ? 0 : exp;\n    // If highPrecision is true, numbers can contain 10 fraction digits (highest precision in Adyen is about 5)\n    const maximumFractionDigits = options?.highPrecision ? 10 : exp;\n\n    return {\n        value,\n        format: {\n            style,\n            currency: amount.currency,\n            currencyDisplay: 'symbol',\n            minimumFractionDigits,\n            maximumFractionDigits,\n        },\n    };\n}\n\n/**\n * Get a formatted and localised currency string given an amount and currency type.\n *\n * @param amountValue - the amount of the currency.\n * @param currency - the ISO 4217 currency code.\n * @param majorUnits - if set to true, then currency major units will be used instead of minor ones\n */\nexport const getLocalizedCurrencyValue = (amountValue: string, currency: string, majorUnits?: boolean): string => {\n    const amount: CurrencyAmount = { value: parseFloat(amountValue), currency };\n    const numberFormatOptions = getNumberFormatOptions(amount, { style: 'decimal' }, majorUnits);\n    // TODO replace hardcoded locale with dynamic one, when i18n strategy is defined\n    const formatter = new Intl.NumberFormat('en-US', numberFormatOptions.format as Intl.NumberFormatOptions);\n\n    return formatter.format(numberFormatOptions.value);\n};\n","export interface BentoCurrencyProps {\n    /**\n     * Currency code based on the ISO 4217 standard\n     */\n    currency?: BentoCurrencyISOCode | `${BentoCurrencyISOCode}`;\n\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography component.\n     */\n    disableTypography?: boolean;\n\n    /**\n     * Accepts currency value in major units instead of minor ones\n     */\n    majorUnits?: boolean;\n\n    /**\n     * Currency value to be formatted\n     */\n    value?: number;\n}\n\nexport enum BentoCurrencyISOCode {\n    AFA = 'AFA',\n    ALL = 'ALL',\n    DZD = 'DZD',\n    AOA = 'AOA',\n    ARS = 'ARS',\n    AMD = 'AMD',\n    AWG = 'AWG',\n    AUD = 'AUD',\n    AZN = 'AZN',\n    BSD = 'BSD',\n    BHD = 'BHD',\n    BDT = 'BDT',\n    BBD = 'BBD',\n    BYR = 'BYR',\n    BEF = 'BEF',\n    BZD = 'BZD',\n    BMD = 'BMD',\n    BTN = 'BTN',\n    BTC = 'BTC',\n    BOB = 'BOB',\n    BAM = 'BAM',\n    BWP = 'BWP',\n    BRL = 'BRL',\n    GBP = 'GBP',\n    BND = 'BND',\n    BGN = 'BGN',\n    BIF = 'BIF',\n    KHR = 'KHR',\n    CAD = 'CAD',\n    CVE = 'CVE',\n    KYD = 'KYD',\n    XOF = 'XOF',\n    XAF = 'XAF',\n    XPF = 'XPF',\n    CLP = 'CLP',\n    CLF = 'CLF',\n    CNY = 'CNY',\n    COP = 'COP',\n    KMF = 'KMF',\n    CDF = 'CDF',\n    CRC = 'CRC',\n    HRK = 'HRK',\n    CUC = 'CUC',\n    CZK = 'CZK',\n    DKK = 'DKK',\n    DJF = 'DJF',\n    DOP = 'DOP',\n    XCD = 'XCD',\n    EGP = 'EGP',\n    ERN = 'ERN',\n    EEK = 'EEK',\n    ETB = 'ETB',\n    EUR = 'EUR',\n    FKP = 'FKP',\n    FJD = 'FJD',\n    GMD = 'GMD',\n    GEL = 'GEL',\n    DEM = 'DEM',\n    GHS = 'GHS',\n    GIP = 'GIP',\n    GRD = 'GRD',\n    GTQ = 'GTQ',\n    GNF = 'GNF',\n    GYD = 'GYD',\n    HTG = 'HTG',\n    HNL = 'HNL',\n    HKD = 'HKD',\n    HUF = 'HUF',\n    ISK = 'ISK',\n    INR = 'INR',\n    IDR = 'IDR',\n    IRR = 'IRR',\n    IQD = 'IQD',\n    ILS = 'ILS',\n    ITL = 'ITL',\n    JMD = 'JMD',\n    JPY = 'JPY',\n    JOD = 'JOD',\n    KZT = 'KZT',\n    KES = 'KES',\n    KWD = 'KWD',\n    KGS = 'KGS',\n    LAK = 'LAK',\n    LVL = 'LVL',\n    LBP = 'LBP',\n    LSL = 'LSL',\n    LRD = 'LRD',\n    LYD = 'LYD',\n    LTC = 'LTC',\n    LTL = 'LTL',\n    MOP = 'MOP',\n    MKD = 'MKD',\n    MGA = 'MGA',\n    MWK = 'MWK',\n    MYR = 'MYR',\n    MVR = 'MVR',\n    MRO = 'MRO',\n    MUR = 'MUR',\n    MXN = 'MXN',\n    MDL = 'MDL',\n    MNT = 'MNT',\n    MAD = 'MAD',\n    MZM = 'MZM',\n    MMK = 'MMK',\n    NAD = 'NAD',\n    NPR = 'NPR',\n    ANG = 'ANG',\n    TWD = 'TWD',\n    NZD = 'NZD',\n    NIO = 'NIO',\n    NGN = 'NGN',\n    KPW = 'KPW',\n    NOK = 'NOK',\n    OMR = 'OMR',\n    PKR = 'PKR',\n    PAB = 'PAB',\n    PGK = 'PGK',\n    PYG = 'PYG',\n    PEN = 'PEN',\n    PHP = 'PHP',\n    PLN = 'PLN',\n    QAR = 'QAR',\n    RON = 'RON',\n    RUB = 'RUB',\n    RWF = 'RWF',\n    SVC = 'SVC',\n    WST = 'WST',\n    STD = 'STD',\n    SAR = 'SAR',\n    RSD = 'RSD',\n    SCR = 'SCR',\n    SLL = 'SLL',\n    SGD = 'SGD',\n    SKK = 'SKK',\n    SBD = 'SBD',\n    SOS = 'SOS',\n    ZAR = 'ZAR',\n    KRW = 'KRW',\n    SSP = 'SSP',\n    XDR = 'XDR',\n    LKR = 'LKR',\n    SHP = 'SHP',\n    SDG = 'SDG',\n    SRD = 'SRD',\n    SZL = 'SZL',\n    SEK = 'SEK',\n    CHF = 'CHF',\n    SYP = 'SYP',\n    TJS = 'TJS',\n    TZS = 'TZS',\n    THB = 'THB',\n    TOP = 'TOP',\n    TTD = 'TTD',\n    TND = 'TND',\n    TRY = 'TRY',\n    TMT = 'TMT',\n    UGX = 'UGX',\n    UAH = 'UAH',\n    AED = 'AED',\n    UYU = 'UYU',\n    USD = 'USD',\n    UZS = 'UZS',\n    VUV = 'VUV',\n    VEF = 'VEF',\n    VND = 'VND',\n    YER = 'YER',\n    ZMK = 'ZMK',\n    ZWL = 'ZWL',\n}\n","<template>\n    <div class=\"b-currency\">\n        <bento-typography v-if=\"!disableTypography\" class=\"b-currency__amount\" el=\"span\" variant=\"body\" strong>\n            {{ formattedCurrency }} {{ currency }}\n        </bento-typography>\n        <template v-else>{{ formattedCurrency }} {{ currency }}</template>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { getLocalizedCurrencyValue } from '@/utils/ts/currency/currency';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoCurrencyISOCode, BentoCurrencyProps } from './currency.types';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    const slots = useSlots();\n\n    const props = defineProps({\n  currency: { default: BentoCurrencyISOCode.EUR },\n  disableTypography: { type: Boolean, default: false },\n  majorUnits: { type: Boolean, default: false },\n  value: { default: undefined }\n});\n\n    const formattedCurrency = computed<string>(() => {\n        const value = props.value || getSlotText(slots)('default');\n        return getLocalizedCurrencyValue(value as string, props.currency, props.majorUnits);\n    });\n\n    onMounted(() => {\n        if (getSlotText(slots)('default')) {\n            deprecate(\n                'BentoCurrency \"default\" slot',\n                `The use of \"default\" slot in \"BentoCurrency\" is no longer supported as it causes issues with dynamic content.\n                Use the \"value\" property instead.\n                <bento-currency :value=\"12345.67\" currency=\"USD\" major-units=\"false\" />`,\n                '2.0.0'\n            );\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A Currency component is used to display a formatted currency value.\n     *\n     * @example\n     * import { BentoCurrency, BentoCurrencyISOCode } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCurrency },\n     *     template: `\n     *          <bento-currency\n     *              :currency=\"BentoCurrencyISOCode.USD\"\n     *              :value=\"76.33\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-currency',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./currency.scss\" />\n"],"names":["currencyExponentMap","getExponent","currencyCode","_a","obj","getMinorUnitsAmount","amount","exponent","value","getNormalizedAmount","getNumberFormatOptions","options","majorUnits","exp","minorAmount","amountInMinorUnits","style","minimumFractionDigits","maximumFractionDigits","getLocalizedCurrencyValue","amountValue","currency","numberFormatOptions","BentoCurrencyISOCode","BentoCurrencyISOCode2","__default__","slots","useSlots","formattedCurrency","computed","props","getSlotText","onMounted","deprecate"],"mappings":";;;;;AAOO,MAAAA,IAAA;AAAA,EAA4B;AAAA,IAC/B,UAAA;AAAA,IACc,YAAA;AAAA,MACE;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACJ;AAAA,EACJ;AAAA,IACA,UAAA;AAAA,IACc,YAAA,CAAA,KAAA;AAAA,EACQ;AAAA,EACtB;AAAA,IACA,UAAA;AAAA,IACc,YAAA,CAAA,OAAA,OAAA,OAAA,OAAA,OAAA,OAAA,KAAA;AAAA,EACkD;AAEpE,GC9BOC,IAAA,CAAAC,MAAA;;AAAA,WAAAC,IAAAH,EAAA,KAAA,CAAAI,MAAAA,EAAA,WAAA,SAAAF,CAAA,CAAA,MAAA,gBAAAC,EAAA,aAAA;AAAA,GAMME,IAAA,CAAAC,MAAA;AACT,QAAAC,IAAAN,EAAAK,EAAA,QAAA,GACAE,IAAA,OAAAF,EAAA,KAAA;AAEA,SAAA,KAAA,MAAAE,IAAA,MAAAD,CAAA;AACJ,GAKaE,IAAA,CAAAH,GAAAC;AAAA;AAAA;AAAA,EAA+CD,EAAA,QAAA,MAAAC;AAAA;AAkBrD,SAAAG,EAAAJ,GAAAK,IAAA,CAAA,GAAAC,IAAA,IAAA;AAMH,QAAAC,KAAAF,KAAA,gBAAAA,EAAA,aAAAV,EAAAK,EAAA,QAAA,GAEAQ,IAAAF,IAAAP,EAAAC,CAAA,IAAAA,EAAA,OACAS,IAAA,EAAA,GAAAT,GAAA,OAAAQ,EAAA,GAEAN,IAAAC,EAAAM,GAAAF,CAAA,GAEAG,IAAAR,IAAA,IAAA,aAAAG,KAAA,gBAAAA,EAAA,UAAA,YAEAM,IAAAN,KAAA,QAAAA,EAAA,oBAAA,IAAAE,GAEAK,IAAAP,KAAA,QAAAA,EAAA,gBAAA,KAAAE;AAEA,SAAA;AAAA,IAAO,OAAAL;AAAA,IACH,QAAA;AAAA,MACQ,OAAAQ;AAAA,MACJ,UAAAV,EAAA;AAAA,MACiB,iBAAA;AAAA,MACA,uBAAAW;AAAA,MACjB,uBAAAC;AAAA,IACA;AAAA,EACJ;AAER;AASO,MAAAC,IAAA,CAAAC,GAAAC,GAAAT,MAAA;AACH,QAAAN,IAAA,EAAA,OAAA,WAAAc,CAAA,GAAA,UAAAC,EAAA,GACAC,IAAAZ,EAAAJ,GAAA,EAAA,OAAA,UAAA,GAAAM,CAAA;AAIA,SAFA,IAAA,KAAA,aAAA,SAAAU,EAAA,MAAA,EAEA,OAAAA,EAAA,KAAA;AACJ;AC/DY,IAAAC,IAAA,kBAAAC,OACRA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OACAA,EAAA,MAAA,OAxKQA,IAAAD,KAAA,CAAA,CAAA;ACuCR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;iBA9CAC,IAAAC,EAAA,GASAC,IAAAC,EAAA,MAAA;AACI,YAAArB,IAAAsB,EAAA,SAAAC,EAAAL,CAAA,EAAA,SAAA;AACA,aAAAP,EAAAX,GAAAsB,EAAA,UAAAA,EAAA,UAAA;AAAA,IAAkF,CAAA;AAGtF,WAAAE,EAAA,MAAA;AACI,MAAAD,EAAAL,CAAA,EAAA,SAAA,KACIO;AAAA,QAAA;AAAA,QACI;AAAA;AAAA;AAAA,QACA;AAAA,MAGA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{dashboard-section.DYXZhtop.js → dashboard-section.DUN8FB74.js}

@@ -1,7 +1,7 @@
 import { defineComponent as C, useSlots as T, ref as d, computed as l, watch as m, onUnmounted as R, onMounted as x } from "vue";
-import { B as y } from "./header.BvZxtIOD.js";
-import { a as I, B as H } from "./tabs.9kObZry9.js";
-import { b as P } from "./index.D8ivUe7P.js";
+import { B as y } from "./header.Bbwnv6Ei.js";
+import { B as I, a as H } from "./tabs.B0f1qiMR.js";
+import { b as P } from "./index.B5Tq465X.js";
 import { o as W } from "./resize.Bqks3WUm.js";
 import { u as S } from "./use-has-slot.C9lQZ6nz.js";
 import { n as k } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -49,7 +49,7 @@ const D = {}, j = /* @__PURE__ */ C({
       }
     ), R(() => {
       i == null || i.disconnect();
-    }), { __sfc: !0, props: t, slots: a, hasSlot: s, tabsRef: n, filtersRef: e, isFiltersPinned: u, filtersElementObserver: i, isTabsPinned: p, tabsPosition: _, hasStickyFilters: b, hasStickyTabs: f, dashboardFiltersConditionalClasses: B, dashboardTabsConditionalClasses: w, dashboardTopSectionConditionalClasses: $, tabsSlots: g, getTabTitle: F, y: h, BentoHeader: y, BentoTab: H, BentoTabs: I };
+    }), { __sfc: !0, props: t, slots: a, hasSlot: s, tabsRef: n, filtersRef: e, isFiltersPinned: u, filtersElementObserver: i, isTabsPinned: p, tabsPosition: _, hasStickyFilters: b, hasStickyTabs: f, dashboardFiltersConditionalClasses: B, dashboardTabsConditionalClasses: w, dashboardTopSectionConditionalClasses: $, tabsSlots: g, getTabTitle: F, y: h, BentoHeader: y, BentoTab: I, BentoTabs: H };
   }
 });
 var E = function() {
@@ -102,4 +102,4 @@ export {
   st as a,
   tt as d
 };
-//# sourceMappingURL=dashboard-section.DYXZhtop.js.map
+//# sourceMappingURL=dashboard-section.DUN8FB74.js.map

package/dist/chunks/{dashboard-section.DYXZhtop.js.map → dashboard-section.DUN8FB74.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashboard-section.DYXZhtop.js","sources":["../../src/templates/dashboard-template/dashboard-template.vue","../../src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue"],"sourcesContent":["<template>\n    <main class=\"b-dashboard-template\">\n        <bento-header v-bind=\"header\" variant=\"page\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div class=\"b-dashboard-template__top-section\" :class=\"dashboardTopSectionConditionalClasses\">\n            <div\n                v-if=\"hasSlot('filters')\"\n                ref=\"filtersRef\"\n                class=\"b-dashboard-template__filters\"\n                :class=\"dashboardFiltersConditionalClasses\"\n                data-testid=\"filters\"\n            >\n                <slot name=\"filters\" />\n            </div>\n\n            <bento-tabs\n                v-if=\"tabsSlots.length > 1\"\n                ref=\"tabsRef\"\n                :active-tab-index=\"tabs.activeTabIndex\"\n                class=\"b-dashboard-template__tabs\"\n                :class=\"dashboardTabsConditionalClasses\"\n                data-testid=\"tabs\"\n            >\n                <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                    <div class=\"b-dashboard-template__container b-dashboard-template__container--tabs\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </div>\n                </bento-tab>\n            </bento-tabs>\n            <div v-else class=\"b-dashboard-template__container\">\n                <slot />\n            </div>\n        </div>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onUnmounted, ref, useSlots, watch } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useWindowScroll } from '@vueuse/core';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';\n\n    const props = defineProps({\n  header: null,\n  tabs: { default: undefined },\n  stickyTabs: { type: Boolean, default: false },\n  stickyFilters: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const tabsRef = ref<InstanceType<typeof BentoTabs>>();\n    const filtersRef = ref<HTMLDivElement>(null);\n    const isFiltersPinned = ref(false);\n    let filtersElementObserver: ResizeObserver | null = null;\n    const isTabsPinned = ref(false);\n    const tabsPosition = ref(0);\n\n    const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters);\n    const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs);\n\n    const dashboardFiltersConditionalClasses = computed(() => ({\n        'b-dashboard-template__filters--sticky': props.stickyFilters,\n        'b-dashboard-template__filters--show-border':\n            hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value,\n    }));\n\n    const dashboardTabsConditionalClasses = computed(() => ({\n        'b-dashboard-template__tabs--sticky': props.stickyTabs,\n        'b-dashboard-template__tabs--show-border': props.stickyTabs && isTabsPinned.value,\n    }));\n\n    const dashboardTopSectionConditionalClasses = computed(() => ({\n        'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters,\n    }));\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const { y } = useWindowScroll();\n\n    watch(\n        () => filtersRef.value,\n        () => {\n            if (!filtersElementObserver && filtersRef.value) {\n                filtersElementObserver = observeSizeOfElement(filtersRef.value, () => {\n                    if (filtersRef.value && hasStickyTabs.value) {\n                        const filtersHeight = filtersRef.value.offsetHeight;\n                        tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0;\n                        (tabsRef.value.tablistwrapper.$el as HTMLDivElement).style.top = `${tabsPosition.value}px`;\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        () => y.value,\n        () => {\n            if (hasStickyFilters.value) {\n                isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0;\n            }\n            if (hasStickyTabs.value) {\n                isTabsPinned.value =\n                    (tabsRef.value.tablistwrapper.$el as HTMLDivElement)?.getBoundingClientRect().top ===\n                    tabsPosition.value;\n            }\n        }\n    );\n\n    onUnmounted(() => {\n        filtersElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.\n     *\n     * @example\n     * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardTemplate, BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-template :header=\"{ title: 'Dashboard'}\" :tabs=\"tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]\" sticky-tabs sticky-filters>\n     *              <template #tab-1>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      <template #controls>\n     *                          // Add your controls here\n     *                      </template>\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *              <template #tab-2>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *          </bento-dashboard-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-template.scss\" />\n","<template>\n    <div class=\"b-dashboard-section\" :class=\"conditionalClasses\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('controls')\" class=\"b-dashboard-section__controls\">\n            <slot name=\"controls\"></slot>\n        </div>\n        <div v-if=\"!hasSlot('content-col-1') && !hasSlot('content-col-2')\" class=\"b-dashboard-section__content\">\n            <slot name=\"default\"></slot>\n        </div>\n        <div v-else class=\"b-dashboard-section__columns\">\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-1\"></slot></div>\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-2\"></slot></div>\n        </div>\n        <bento-divider class=\"b-dashboard-section__divider\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoDivider } from '@/components/divider';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';\n\n    const props = defineProps({\n  header: null,\n  halfWidth: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClasses = computed(() => ({\n        'b-dashboard-section--half-width': props.halfWidth,\n    }));\n\n    onMounted(() => {\n        if ((hasSlot('content-col-1') || hasSlot('content-col-2')) && props.halfWidth) {\n            throw new Error('`content-col-1` and `content-col-2` cannot be used with half-width prop');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.\n     *\n     * @example\n     * import { BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-section :header=\"{ title: 'Section' }\" half-width>\n     *              <template #controls>\n     *                  // Add your controls here\n     *              </template>\n     *              // You can render content with two cols\n     *              <template #content-col-1>\n     *                  // Add your content here\n     *              </template>\n     *              <template #content-col-2>\n     *                  // Add your content here\n     *              </template>\n     *              // Or you can render full width content by using default slot\n     *              // Add your content here\n     *          </bento-dashboard-section>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-section.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","isTabsPinned","tabsPosition","hasStickyFilters","computed","props","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTabsConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;AAuJI,MAAAA,IAAA,CAAA;;;;;;;;;;iBAhGAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,EAAA,GACAK,IAAAL,EAAA,CAAA,GAEAM,IAAAC,EAAA,MAAAN,EAAA,SAAAO,EAAA,aAAA,GACAC,IAAAF,EAAA,MAAAR,EAAA,SAAAS,EAAA,UAAA,GAEAE,IAAAH,EAAA,OAAA;AAAA,MAA2D,yCAAAC,EAAA;AAAA,MACR,8CAAAF,EAAA,SAAA,CAAAG,EAAA,SAAAP,EAAA;AAAA,IAEuB,EAAA,GAG1ES,IAAAJ,EAAA,OAAA;AAAA,MAAwD,sCAAAC,EAAA;AAAA,MACR,2CAAAA,EAAA,cAAAJ,EAAA;AAAA,IACgC,EAAA,GAGhFQ,IAAAL,EAAA,OAAA;AAAA,MAA8D,6CAAAC,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EK,IAAAN,EAAA,MAAA,OAAA,KAAAZ,CAAA,EAAA,OAAA,CAAAmB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAV,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAU,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEA,EAAA,GAAAG,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAApB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAmB,EAAArB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAQ,EAAA,OAAA;AACI,kBAAAc,IAAAtB,EAAA,MAAA;AACA,YAAAI,EAAA,QAAAC,EAAA,QAAAiB,IAAA,GACAxB,EAAA,MAAA,eAAA,IAAA,MAAA,MAAA,GAAAM,EAAA,KAAA;AAAA,UAAsF;AAAA,QAC1F,CAAA;AAAA,MAER;AAAA,IACJ,GAGJgB;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAb,EAAA,UACIJ,EAAA,UAAAgB,IAAAjB,EAAA,UAAA,gBAAAiB,EAAA,wBAAA,SAAA,IAEJT,EAAA,UACIL,EAAA,UAAAa,IAAAlB,EAAA,MAAA,eAAA,QAAA,gBAAAkB,EAAA,wBAAA,SAAAZ,EAAA;AAAA,MAGJ;AAAA,IACJ,GAGJmB,EAAA,MAAA;AACI,MAAArB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;sBC7CvCsB,IAAA,CAAA;;;;;;;;iBAzCA9B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA+B,IAAAnB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAmB,EAAA,MAAA;AACI,WAAA9B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAW,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashboard-section.DUN8FB74.js","sources":["../../src/templates/dashboard-template/dashboard-template.vue","../../src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue"],"sourcesContent":["<template>\n    <main class=\"b-dashboard-template\">\n        <bento-header v-bind=\"header\" variant=\"page\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div class=\"b-dashboard-template__top-section\" :class=\"dashboardTopSectionConditionalClasses\">\n            <div\n                v-if=\"hasSlot('filters')\"\n                ref=\"filtersRef\"\n                class=\"b-dashboard-template__filters\"\n                :class=\"dashboardFiltersConditionalClasses\"\n                data-testid=\"filters\"\n            >\n                <slot name=\"filters\" />\n            </div>\n\n            <bento-tabs\n                v-if=\"tabsSlots.length > 1\"\n                ref=\"tabsRef\"\n                :active-tab-index=\"tabs.activeTabIndex\"\n                class=\"b-dashboard-template__tabs\"\n                :class=\"dashboardTabsConditionalClasses\"\n                data-testid=\"tabs\"\n            >\n                <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                    <div class=\"b-dashboard-template__container b-dashboard-template__container--tabs\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </div>\n                </bento-tab>\n            </bento-tabs>\n            <div v-else class=\"b-dashboard-template__container\">\n                <slot />\n            </div>\n        </div>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onUnmounted, ref, useSlots, watch } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useWindowScroll } from '@vueuse/core';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';\n\n    const props = defineProps({\n  header: null,\n  tabs: { default: undefined },\n  stickyTabs: { type: Boolean, default: false },\n  stickyFilters: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const tabsRef = ref<InstanceType<typeof BentoTabs>>();\n    const filtersRef = ref<HTMLDivElement>(null);\n    const isFiltersPinned = ref(false);\n    let filtersElementObserver: ResizeObserver | null = null;\n    const isTabsPinned = ref(false);\n    const tabsPosition = ref(0);\n\n    const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters);\n    const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs);\n\n    const dashboardFiltersConditionalClasses = computed(() => ({\n        'b-dashboard-template__filters--sticky': props.stickyFilters,\n        'b-dashboard-template__filters--show-border':\n            hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value,\n    }));\n\n    const dashboardTabsConditionalClasses = computed(() => ({\n        'b-dashboard-template__tabs--sticky': props.stickyTabs,\n        'b-dashboard-template__tabs--show-border': props.stickyTabs && isTabsPinned.value,\n    }));\n\n    const dashboardTopSectionConditionalClasses = computed(() => ({\n        'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters,\n    }));\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const { y } = useWindowScroll();\n\n    watch(\n        () => filtersRef.value,\n        () => {\n            if (!filtersElementObserver && filtersRef.value) {\n                filtersElementObserver = observeSizeOfElement(filtersRef.value, () => {\n                    if (filtersRef.value && hasStickyTabs.value) {\n                        const filtersHeight = filtersRef.value.offsetHeight;\n                        tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0;\n                        (tabsRef.value.tablistwrapper.$el as HTMLDivElement).style.top = `${tabsPosition.value}px`;\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        () => y.value,\n        () => {\n            if (hasStickyFilters.value) {\n                isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0;\n            }\n            if (hasStickyTabs.value) {\n                isTabsPinned.value =\n                    (tabsRef.value.tablistwrapper.$el as HTMLDivElement)?.getBoundingClientRect().top ===\n                    tabsPosition.value;\n            }\n        }\n    );\n\n    onUnmounted(() => {\n        filtersElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.\n     *\n     * @example\n     * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardTemplate, BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-template :header=\"{ title: 'Dashboard'}\" :tabs=\"tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]\" sticky-tabs sticky-filters>\n     *              <template #tab-1>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      <template #controls>\n     *                          // Add your controls here\n     *                      </template>\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *              <template #tab-2>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *          </bento-dashboard-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-template.scss\" />\n","<template>\n    <div class=\"b-dashboard-section\" :class=\"conditionalClasses\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('controls')\" class=\"b-dashboard-section__controls\">\n            <slot name=\"controls\"></slot>\n        </div>\n        <div v-if=\"!hasSlot('content-col-1') && !hasSlot('content-col-2')\" class=\"b-dashboard-section__content\">\n            <slot name=\"default\"></slot>\n        </div>\n        <div v-else class=\"b-dashboard-section__columns\">\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-1\"></slot></div>\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-2\"></slot></div>\n        </div>\n        <bento-divider class=\"b-dashboard-section__divider\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoDivider } from '@/components/divider';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';\n\n    const props = defineProps({\n  header: null,\n  halfWidth: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClasses = computed(() => ({\n        'b-dashboard-section--half-width': props.halfWidth,\n    }));\n\n    onMounted(() => {\n        if ((hasSlot('content-col-1') || hasSlot('content-col-2')) && props.halfWidth) {\n            throw new Error('`content-col-1` and `content-col-2` cannot be used with half-width prop');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.\n     *\n     * @example\n     * import { BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-section :header=\"{ title: 'Section' }\" half-width>\n     *              <template #controls>\n     *                  // Add your controls here\n     *              </template>\n     *              // You can render content with two cols\n     *              <template #content-col-1>\n     *                  // Add your content here\n     *              </template>\n     *              <template #content-col-2>\n     *                  // Add your content here\n     *              </template>\n     *              // Or you can render full width content by using default slot\n     *              // Add your content here\n     *          </bento-dashboard-section>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-section.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","isTabsPinned","tabsPosition","hasStickyFilters","computed","props","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTabsConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;AAuJI,MAAAA,IAAA,CAAA;;;;;;;;;;iBAhGAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,EAAA,GACAK,IAAAL,EAAA,CAAA,GAEAM,IAAAC,EAAA,MAAAN,EAAA,SAAAO,EAAA,aAAA,GACAC,IAAAF,EAAA,MAAAR,EAAA,SAAAS,EAAA,UAAA,GAEAE,IAAAH,EAAA,OAAA;AAAA,MAA2D,yCAAAC,EAAA;AAAA,MACR,8CAAAF,EAAA,SAAA,CAAAG,EAAA,SAAAP,EAAA;AAAA,IAEuB,EAAA,GAG1ES,IAAAJ,EAAA,OAAA;AAAA,MAAwD,sCAAAC,EAAA;AAAA,MACR,2CAAAA,EAAA,cAAAJ,EAAA;AAAA,IACgC,EAAA,GAGhFQ,IAAAL,EAAA,OAAA;AAAA,MAA8D,6CAAAC,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EK,IAAAN,EAAA,MAAA,OAAA,KAAAZ,CAAA,EAAA,OAAA,CAAAmB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAV,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAU,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEA,EAAA,GAAAG,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAApB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAmB,EAAArB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAQ,EAAA,OAAA;AACI,kBAAAc,IAAAtB,EAAA,MAAA;AACA,YAAAI,EAAA,QAAAC,EAAA,QAAAiB,IAAA,GACAxB,EAAA,MAAA,eAAA,IAAA,MAAA,MAAA,GAAAM,EAAA,KAAA;AAAA,UAAsF;AAAA,QAC1F,CAAA;AAAA,MAER;AAAA,IACJ,GAGJgB;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAb,EAAA,UACIJ,EAAA,UAAAgB,IAAAjB,EAAA,UAAA,gBAAAiB,EAAA,wBAAA,SAAA,IAEJT,EAAA,UACIL,EAAA,UAAAa,IAAAlB,EAAA,MAAA,eAAA,QAAA,gBAAAkB,EAAA,wBAAA,SAAAZ,EAAA;AAAA,MAGJ;AAAA,IACJ,GAGJmB,EAAA,MAAA;AACI,MAAArB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;sBC7CvCsB,IAAA,CAAA;;;;;;;;iBAzCA9B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA+B,IAAAnB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAmB,EAAA,MAAA;AACI,WAAA9B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAW,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dashed-underline.BvSZS1-m.js → dashed-underline.BDK3yEtw.js}

@@ -1,8 +1,8 @@
 import { defineComponent as h, useSlots as P, ref as p, computed as d, watch as T } from "vue";
-import { B as O } from "./popover.DsUymZWJ.js";
-import { B as x } from "./typography.J1v_SPG3.js";
+import { B as O } from "./popover.D8pR_dbl.js";
+import { B as x } from "./typography.Bu_WAKdf.js";
 import { u as B } from "./use-has-slot.C9lQZ6nz.js";
-import { B as g } from "./tooltip.R2sqydIE.js";
+import { B as g } from "./tooltip.CQGwmwt9.js";
 import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/dashed-underline.css";
 const b = {}, S = /* @__PURE__ */ h({
@@ -56,4 +56,4 @@ const U = C.exports;
 export {
   U as d
 };
-//# sourceMappingURL=dashed-underline.BvSZS1-m.js.map
+//# sourceMappingURL=dashed-underline.BDK3yEtw.js.map

package/dist/chunks/{dashed-underline.BvSZS1-m.js.map → dashed-underline.BDK3yEtw.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashed-underline.BvSZS1-m.js","sources":["../../src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"infoIconOnFocus\"\n        @focusout=\"infoIconOnFocusOut\"\n    >\n        <slot></slot>\n        <bento-popover\n            v-if=\"element && hasPopover\"\n            :open=\"isOpen\"\n            :target-element=\"element\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <slot name=\"popover-content\">\n                <bento-typography>\n                    {{ popoverText }}\n                </bento-typography>\n            </slot>\n        </bento-popover>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover, type BentoPopoverPositions } from '@/components/popover';\n    import {\n        type BentoTooltipPosition,\n        BentoTooltipDirective as vBentoTooltipDirective,\n    } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = defineProps({\n  popoverText: { default: null },\n  popoverPosition: { default: 'top' },\n  tooltipText: { default: null },\n  tooltipPosition: { default: 'top' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const element = ref<HTMLSpanElement>(null);\n    const isOpen = ref(false);\n\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\n        }\n    };\n\n    const closePopover = () => {\n        // We want to delay closing for a couple of seconds so\n        // it doesn't flicker if a user hovers over the icon and then inside the popover.\n        const timeOutId = setTimeout(() => {\n            isOpen.value = false;\n        }, CLOSING_POPOVER_DELAY_MS);\n        closingTimeOutId.value = timeOutId;\n    };\n\n    const infoIconOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const infoIconOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The dashed underline serves as a visual cue to indicate that additional information is available for\n     * a specific word or phrase without adding an icon.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *          <bento-dashed-underline>\n     *              annotated text\n     *          </bento-dashed-underline>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","CLOSING_POPOVER_DELAY_MS","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","infoIconOnFocus","infoIconOnFocusOut","e","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;AAyHI,MAAAA,IAAA,CAAA;;;;;;;;;;iBAjFAC,IAAA,KASAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GAEAE,IAAAF,EAAA,GAEAG,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAGJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAAP,CAAA;AAEnB,MAAAQ,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAC,EAAA,eAAAd,EAAA,iBAAA,CAAA,GAEAe,IAAAF,EAAA,MAAA,CAAAC,EAAA,eAAA,CAAAF,EAAA,KAAA;AAEA,WAAAI;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashed-underline.BDK3yEtw.js","sources":["../../src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"infoIconOnFocus\"\n        @focusout=\"infoIconOnFocusOut\"\n    >\n        <slot></slot>\n        <bento-popover\n            v-if=\"element && hasPopover\"\n            :open=\"isOpen\"\n            :target-element=\"element\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <slot name=\"popover-content\">\n                <bento-typography>\n                    {{ popoverText }}\n                </bento-typography>\n            </slot>\n        </bento-popover>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover, type BentoPopoverPositions } from '@/components/popover';\n    import {\n        type BentoTooltipPosition,\n        BentoTooltipDirective as vBentoTooltipDirective,\n    } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = defineProps({\n  popoverText: { default: null },\n  popoverPosition: { default: 'top' },\n  tooltipText: { default: null },\n  tooltipPosition: { default: 'top' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const element = ref<HTMLSpanElement>(null);\n    const isOpen = ref(false);\n\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\n        }\n    };\n\n    const closePopover = () => {\n        // We want to delay closing for a couple of seconds so\n        // it doesn't flicker if a user hovers over the icon and then inside the popover.\n        const timeOutId = setTimeout(() => {\n            isOpen.value = false;\n        }, CLOSING_POPOVER_DELAY_MS);\n        closingTimeOutId.value = timeOutId;\n    };\n\n    const infoIconOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const infoIconOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The dashed underline serves as a visual cue to indicate that additional information is available for\n     * a specific word or phrase without adding an icon.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *          <bento-dashed-underline>\n     *              annotated text\n     *          </bento-dashed-underline>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","CLOSING_POPOVER_DELAY_MS","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","infoIconOnFocus","infoIconOnFocusOut","e","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;AAyHI,MAAAA,IAAA,CAAA;;;;;;;;;;iBAjFAC,IAAA,KASAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GAEAE,IAAAF,EAAA,GAEAG,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAGJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAAP,CAAA;AAEnB,MAAAQ,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAC,EAAA,eAAAd,EAAA,iBAAA,CAAA,GAEAe,IAAAF,EAAA,MAAA,CAAAC,EAAA,eAAA,CAAAF,EAAA,KAAA;AAEA,WAAAI;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{data-grid-template.Du92TEFY.js → data-grid-template.BO2v-T1n.js}

@@ -1,6 +1,6 @@
 import { defineComponent as m, useSlots as u, ref as T, computed as b, provide as v, toRef as y } from "vue";
-import { B as C } from "./header.BvZxtIOD.js";
-import { a as g, B as R } from "./tabs.9kObZry9.js";
+import { B as C } from "./header.Bbwnv6Ei.js";
+import { B as g, a as R } from "./tabs.B0f1qiMR.js";
 import { u as I } from "./use-has-slot.C9lQZ6nz.js";
 import { D as S } from "./data-grid-template.keys.2_AkxuNT.js";
 import { n as h } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -44,7 +44,7 @@ const B = {}, k = /* @__PURE__ */ m({
       var n, r;
       return ((r = (n = e == null ? void 0 : e.tabs.tabs) == null ? void 0 : n[s]) == null ? void 0 : r.title) ?? `Tab ${s + 1}`;
     }, c = () => ({ isDataGridTemplate: !0, stickyTabs: y(e, "stickyTabs"), tabsRef: d });
-    return v(S, c), { __sfc: !0, props: e, slots: a, hasSlot: l, emit: t, tabsRef: o, computedTabsRef: d, tabsSlots: _, emitTabs: p, getTabTitle: f, registerDatagridInDataGridTemplate: c, BentoHeader: C, BentoTab: R, BentoTabs: g };
+    return v(S, c), { __sfc: !0, props: e, slots: a, hasSlot: l, emit: t, tabsRef: o, computedTabsRef: d, tabsSlots: _, emitTabs: p, getTabTitle: f, registerDatagridInDataGridTemplate: c, BentoHeader: C, BentoTab: g, BentoTabs: R };
   }
 });
 var D = function() {
@@ -66,4 +66,4 @@ const N = G.exports;
 export {
   N as d
 };
-//# sourceMappingURL=data-grid-template.Du92TEFY.js.map
+//# sourceMappingURL=data-grid-template.BO2v-T1n.js.map

package/dist/chunks/{data-grid-template.Du92TEFY.js.map → data-grid-template.BO2v-T1n.js.map}

@@ -1 +1 @@
-{"version":3,"file":"data-grid-template.Du92TEFY.js","sources":["../../src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template b-data-grid-template--sticky-tabs\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-data-grid-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('additionalContent')\" class=\"b-data-grid-template__additional-content\">\n            <slot name=\"additionalContent\" />\n        </div>\n        <bento-tabs\n            v-if=\"tabsSlots.length > 1\"\n            ref=\"tabsRef\"\n            :active-tab-index=\"tabs.activeTabIndex\"\n            class=\"b-data-grid-template__tabs\"\n            @update:active-tab-index=\"emitTabs\"\n        >\n            <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                <slot :name=\"`tab-${index + 1}`\" />\n            </bento-tab>\n        </bento-tabs>\n        <slot v-else />\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, Ref, ref, toRef, UnwrapRef, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useHasSlot } from '@/composables';\n    import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n    import type {\n        BentoDataGridTemplateDataGrid,\n        BentoDataGridTemplateHeader,\n        BentoDataGridTemplateTabs,\n    } from './data-grid-template.types';\n\n    const props = defineProps({\n        /**\n         * The header that goes to the top of the template\n         */\n        header: {\n            type: Object as PropType<BentoDataGridTemplateHeader>,\n            required: true,\n        },\n\n        /**\n         * All the tab properties that can be set on the inner tab components.\n         *  - tabs.activeTabIndex: the currently active tab index.\n         *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n         */\n        tabs: {\n            type: Object as PropType<BentoDataGridTemplateTabs>,\n            default: undefined,\n        },\n\n        /**\n         * Renders the tabs with a sticky positioning\n         */\n        stickyTabs: {\n            type: Boolean,\n            default: false,\n        },\n    });\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"update:tabs\"]);\n\n    const tabsRef = ref(null);\n\n    const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablist);\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const emitTabs = (newActiveTabIndex: number) => {\n        emit('update:tabs', { ...props.tabs, activeTabIndex: newActiveTabIndex });\n    };\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const registerDatagridInDataGridTemplate: BentoDataGridTemplateDataGrid = () => {\n        const isDataGridTemplate = true;\n        const stickyTabs: Ref<boolean> = toRef(props, 'stickyTabs');\n        const tabsRef: Ref<UnwrapRef<HTMLDivElement>> | null = computedTabsRef;\n\n        // return values to the Tab component\n        return { isDataGridTemplate, stickyTabs, tabsRef };\n    };\n\n    provide(DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY, registerDatagridInDataGridTemplate);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The data grid template is a restrictive, full-page data grid used to display information from a data set.\n     * You can use this data grid template when your user needs a clear overview of data or a way of organizing and analyzing the data in their own way.\n     * This data grid template shouldn’t be confused with the data grid.\n     *\n     * @example\n     * import { BentoDataGridTemplate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDataGridTemplate },\n     *     template: `\n     *          // If you want to display multiple data grids in the same page (they will be rendered in different tabs)\n     *          <bento-data-grid-template>\n     *              <template #tab-1><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 1\"/></template>\n     *              <template #tab-2><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 2\"/></template>\n     *          </bento-data-grid-template>\n     *          // Alternatively, if you only want to pass one data grid to your template:\n     *          <bento-data-grid-template>\n     *              <template #default><bento-data-grid v-bind=\"your-data-grid-args\"/></template>\n     *          </bento-data-grid-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./data-grid-template.scss\" />\n"],"names":["__default__","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","computedTabsRef","computed","_b","_a","tabsSlots","el","emitTabs","newActiveTabIndex","emit","props","getTabTitle","index","registerDatagridInDataGridTemplate","toRef","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":";;;;;;;AAqHI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArDAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAIAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MAAA;;AAAA,cAAAC,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAA,UAAA,gBAAAD,EAAA;AAAA,KAAA,GAEAE,IAAAH,EAAA,MAAA,OAAA,KAAAP,CAAA,EAAA,OAAA,CAAAW,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,MAAAC,EAAA,eAAA,EAAA,GAAAC,EAAA,MAAA,gBAAAF,EAAA,CAAA;AAAA,IAAwE,GAG5EG,IAAA,CAAAC,MAAA;;AAAA,eAAAT,KAAAC,IAAAM,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAN,EAAAQ,OAAA,gBAAAT,EAAA,UAAA,OAAAS,IAAA,CAAA;AAAA,OAEAC,IAAA,OAMI,EAAA,wBAAA,YAJAC,EAAAJ,GAAA,YAAA,GAIA,SAHAT,EAGA;AAGJ,WAAAc,EAAAC,GAAAH,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"data-grid-template.BO2v-T1n.js","sources":["../../src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template b-data-grid-template--sticky-tabs\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-data-grid-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('additionalContent')\" class=\"b-data-grid-template__additional-content\">\n            <slot name=\"additionalContent\" />\n        </div>\n        <bento-tabs\n            v-if=\"tabsSlots.length > 1\"\n            ref=\"tabsRef\"\n            :active-tab-index=\"tabs.activeTabIndex\"\n            class=\"b-data-grid-template__tabs\"\n            @update:active-tab-index=\"emitTabs\"\n        >\n            <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                <slot :name=\"`tab-${index + 1}`\" />\n            </bento-tab>\n        </bento-tabs>\n        <slot v-else />\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, Ref, ref, toRef, UnwrapRef, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useHasSlot } from '@/composables';\n    import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n    import type {\n        BentoDataGridTemplateDataGrid,\n        BentoDataGridTemplateHeader,\n        BentoDataGridTemplateTabs,\n    } from './data-grid-template.types';\n\n    const props = defineProps({\n        /**\n         * The header that goes to the top of the template\n         */\n        header: {\n            type: Object as PropType<BentoDataGridTemplateHeader>,\n            required: true,\n        },\n\n        /**\n         * All the tab properties that can be set on the inner tab components.\n         *  - tabs.activeTabIndex: the currently active tab index.\n         *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n         */\n        tabs: {\n            type: Object as PropType<BentoDataGridTemplateTabs>,\n            default: undefined,\n        },\n\n        /**\n         * Renders the tabs with a sticky positioning\n         */\n        stickyTabs: {\n            type: Boolean,\n            default: false,\n        },\n    });\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"update:tabs\"]);\n\n    const tabsRef = ref(null);\n\n    const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablist);\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const emitTabs = (newActiveTabIndex: number) => {\n        emit('update:tabs', { ...props.tabs, activeTabIndex: newActiveTabIndex });\n    };\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const registerDatagridInDataGridTemplate: BentoDataGridTemplateDataGrid = () => {\n        const isDataGridTemplate = true;\n        const stickyTabs: Ref<boolean> = toRef(props, 'stickyTabs');\n        const tabsRef: Ref<UnwrapRef<HTMLDivElement>> | null = computedTabsRef;\n\n        // return values to the Tab component\n        return { isDataGridTemplate, stickyTabs, tabsRef };\n    };\n\n    provide(DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY, registerDatagridInDataGridTemplate);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The data grid template is a restrictive, full-page data grid used to display information from a data set.\n     * You can use this data grid template when your user needs a clear overview of data or a way of organizing and analyzing the data in their own way.\n     * This data grid template shouldn’t be confused with the data grid.\n     *\n     * @example\n     * import { BentoDataGridTemplate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDataGridTemplate },\n     *     template: `\n     *          // If you want to display multiple data grids in the same page (they will be rendered in different tabs)\n     *          <bento-data-grid-template>\n     *              <template #tab-1><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 1\"/></template>\n     *              <template #tab-2><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 2\"/></template>\n     *          </bento-data-grid-template>\n     *          // Alternatively, if you only want to pass one data grid to your template:\n     *          <bento-data-grid-template>\n     *              <template #default><bento-data-grid v-bind=\"your-data-grid-args\"/></template>\n     *          </bento-data-grid-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./data-grid-template.scss\" />\n"],"names":["__default__","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","computedTabsRef","computed","_b","_a","tabsSlots","el","emitTabs","newActiveTabIndex","emit","props","getTabTitle","index","registerDatagridInDataGridTemplate","toRef","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":";;;;;;;AAqHI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArDAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAIAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MAAA;;AAAA,cAAAC,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAA,UAAA,gBAAAD,EAAA;AAAA,KAAA,GAEAE,IAAAH,EAAA,MAAA,OAAA,KAAAP,CAAA,EAAA,OAAA,CAAAW,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,MAAAC,EAAA,eAAA,EAAA,GAAAC,EAAA,MAAA,gBAAAF,EAAA,CAAA;AAAA,IAAwE,GAG5EG,IAAA,CAAAC,MAAA;;AAAA,eAAAT,KAAAC,IAAAM,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAN,EAAAQ,OAAA,gBAAAT,EAAA,UAAA,OAAAS,IAAA,CAAA;AAAA,OAEAC,IAAA,OAMI,EAAA,wBAAA,YAJAC,EAAAJ,GAAA,YAAA,GAIA,SAHAT,EAGA;AAGJ,WAAAc,EAAAC,GAAAH,CAAA;;;;;;;;;;;;;;;;;;;"}