@adyen/bento-vue3 1.40.0 → 1.41.0

package/dist/chunks/{code-snippet.DqTEK8cz.js.map → code-snippet.Dp_tDJ-S.js.map}

@@ -1 +1 @@
-{"version":3,"file":"code-snippet.DqTEK8cz.js","sources":["../../../vue2/src/components/code-snippet/highlight.ts","../../../vue2/src/components/code-snippet/code-snippet.types.ts","../../../vue2/src/components/code-snippet/utils/get-lang-loader.ts","../../../vue2/src/components/code-snippet/utils/indent-same-as-line-before-extension.ts","../../../vue2/src/components/code-snippet/code-snippet.vue"],"sourcesContent":["import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { tags as t } from '@lezer/highlight';\nimport {\n    BCodeSnippetCodeAreaHighlightBlue,\n    BCodeSnippetCodeAreaHighlightGreen,\n    BCodeSnippetCodeAreaHighlightOrange,\n    BCodeSnippetCodeAreaHighlightRed,\n} from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoCodeSnippetSupportedLanguage } from './code-snippet.types';\n\nconst lightThemeColors = {\n    red: BCodeSnippetCodeAreaHighlightRed,\n    orange: BCodeSnippetCodeAreaHighlightOrange,\n    green: BCodeSnippetCodeAreaHighlightGreen,\n    blue: BCodeSnippetCodeAreaHighlightBlue,\n    invalid: '#ffffff',\n};\n\nconst highlightStyle = (colors, language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) =>\n    HighlightStyle.define([\n        {\n            tag: t.keyword,\n            color: colors.red,\n        },\n        {\n            tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],\n            color: colors.green,\n        },\n        {\n            tag: [t.function(t.variableName), t.labelName],\n            color: colors.blue,\n        },\n        {\n            tag: [t.color, t.constant(t.name), t.standard(t.name)],\n            color: colors.red,\n        },\n        {\n            tag: [t.definition(t.name), ...(language !== 'json' ? [t.separator] : [])],\n            color: colors.red,\n        },\n        {\n            tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],\n            color: colors.orange,\n        },\n        {\n            tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],\n            color: colors.blue,\n        },\n        {\n            tag: [t.meta, t.comment],\n            color: colors.orange,\n        },\n        {\n            tag: t.strong,\n            fontWeight: 'bold',\n        },\n        {\n            tag: t.emphasis,\n            fontStyle: 'italic',\n        },\n        {\n            tag: t.strikethrough,\n            textDecoration: 'line-through',\n        },\n        {\n            tag: t.link,\n            color: colors.orange,\n            textDecoration: 'underline',\n        },\n        {\n            tag: t.heading,\n            fontWeight: 'bold',\n            color: colors.blue,\n        },\n        {\n            tag: [t.atom, t.bool, t.special(t.variableName)],\n            color: colors.red,\n        },\n        {\n            tag: [t.processingInstruction, t.string, t.inserted],\n            color: colors.blue,\n        },\n        {\n            tag: t.invalid,\n            color: colors.invalid,\n        },\n    ]);\n\nexport const lightThemeHighlight = (\n    language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`\n) => syntaxHighlighting(highlightStyle(lightThemeColors, language));\n","/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetVariant {\n    INLINE = 'inline',\n    SINGLELINE = 'singleline',\n    MULTILINE = 'multiline',\n}\n\n// These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/composables/useLanguage.ts function and vice-versa\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetSupportedLanguage {\n    JSON = 'json',\n    XML = 'xml',\n    JAVA = 'java',\n    JAVASCRIPT = 'javascript',\n    PYTHON = 'python',\n}\n\nexport enum BentoCodeSnippetEvent {\n    ACTION = 'action',\n    CHANGE = 'change',\n}\n","import { BentoCodeSnippetSupportedLanguage } from '@/components/code-snippet/code-snippet.types';\nimport { json } from '@codemirror/lang-json';\nimport { xml } from '@codemirror/lang-xml';\nimport { javascript } from '@codemirror/lang-javascript';\nimport { java } from '@codemirror/lang-java';\nimport { python } from '@codemirror/lang-python';\n\n/**\n * TODO: This should be handled with dynamic imports,\n * without relying on importing every single language/package available.\n * These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/code-snippet.types.ts enum\n */\nconst importsMap = {\n    [BentoCodeSnippetSupportedLanguage.JSON]: json,\n    [BentoCodeSnippetSupportedLanguage.XML]: xml,\n    [BentoCodeSnippetSupportedLanguage.JAVASCRIPT]: javascript,\n    [BentoCodeSnippetSupportedLanguage.JAVA]: java,\n    [BentoCodeSnippetSupportedLanguage.PYTHON]: python,\n};\n\n/**\n * Returns a language loder for `CodeMirror`.\n * Supported languages: json, xml, javascript & java\n *\n * @param language Language to be used\n * @returns Language configuration loader to be used in codemirror\n */\nexport const getLangLoader = (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => {\n    const loadLang = async () => importsMap[language];\n\n    return loadLang;\n};\n","import { EditorSelection, type EditorState, type SelectionRange } from '@codemirror/state';\n\n/**\n * Calculate indentation for a new line based on line before it.\n * @param state - The editor state\n * @param line - the selection range, in this case one line\n * @returns the indentation string to be pre-pended on a new line.\n */\nconst getIndentation = (state: EditorState, line: SelectionRange) => {\n    const currentLine = state.doc.lineAt(line.from);\n    const indentMatch = /^\\s*/.exec(currentLine.text);\n    return indentMatch ? indentMatch[0] : '';\n};\n\n/**\n * This extension to codemirror will, upon pressing the 'Enter' key, indent the new line\n * the same as the line before it.\n */\nexport const INDENT_SAME_AS_LINE_BEFORE = {\n    key: 'Enter',\n    run: ({ state, dispatch }) => {\n        const changes = state.changeByRange(range => {\n            const indentation = getIndentation(state, range);\n            const newText = `\\n${indentation}`;\n            return {\n                changes: { from: range.from, to: range.to, insert: newText },\n                range: EditorSelection.cursor(range.from + newText.length),\n            };\n        });\n        dispatch(state.update(changes, { scrollIntoView: true, userEvent: 'input' }));\n        return true;\n    },\n};\n\nexport default INDENT_SAME_AS_LINE_BEFORE;\n","<template>\n    <div class=\"b-code-snippet\" :class=\"conditionalClasses\">\n        <section v-if=\"!isInlineVariant\" class=\"b-code-snippet__action-bar\">\n            <div class=\"b-code-snippet__action-bar--start\">\n                <bento-dropdown\n                    v-if=\"availableLanguages.length > 0\"\n                    v-model=\"selectedLanguage\"\n                    v-bind=\"$props\"\n                    :disabled=\"availableLanguages.length === 1\"\n                    :items=\"availableLanguages\"\n                    class=\"b-code-snippet__language-picker\"\n                    @input=\"handleChangeLanguage\"\n                />\n                <bento-typography el=\"span\" stronger>\n                    {{ displayedLang }}\n                </bento-typography>\n            </div>\n            <div class=\"b-code-snippet__action-bar--end\">\n                <bento-loading-indicator v-if=\"loading\" />\n                <copy v-if=\"currentContents !== null\" class=\"b-structured-list__icon\" :text=\"currentContents\" />\n                <bento-button\n                    v-if=\"expandable\"\n                    variant=\"tertiary\"\n                    condensed\n                    :aria-label=\"t('expand')\"\n                    @click=\"showModal = true\"\n                >\n                    <template #iconLeft>\n                        <expand-icon />\n                    </template>\n                </bento-button>\n                <bento-button v-if=\"actionable\" variant=\"primary\" tertiary condensed @click=\"onActionClicked\">\n                    <template #iconLeft>\n                        <bento-typography el=\"span\" class=\"b-code-snippet__action-button\">\n                            {{ runText }}\n                        </bento-typography>\n                    </template>\n                </bento-button>\n            </div>\n        </section>\n        <code v-if=\"content || editable\" class=\"b-code-snippet__code-area\">\n            <div ref=\"container\" class=\"b-code-snippet__code-area-content\" :class=\"codeAreaContentConditionalClasses\" />\n        </code>\n        <section v-else>\n            <slot name=\"empty-state\">\n                <!-- TODO: switch with empty-state component when ready -->\n                <div class=\"b-code-snippet__empty-state\">{{ t('nothingToDisplay') }}</div>\n            </slot>\n        </section>\n        <base-modal\n            v-if=\"expandable\"\n            class=\"b-code-snippet__modal\"\n            :hide-close-button=\"true\"\n            :custom-padding=\"'0px'\"\n            :is-dismissible=\"true\"\n            :is-open=\"showModal\"\n            size=\"large\"\n            @close-modal=\"showModal = false\"\n        >\n            <template #content>\n                <bento-code-snippet v-bind=\"{ ...$props, expandable: false }\" />\n            </template>\n        </base-modal>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, shallowRef, watch, watchEffect } from 'vue';\n    import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';\n    import { Compartment, EditorState } from '@codemirror/state';\n    import { history, indentWithTab } from '@codemirror/commands';\n    import { lightThemeHighlight } from './highlight';\n    import { getLangLoader, INDENT_SAME_AS_LINE_BEFORE } from './utils';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective } from '@/directives';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { Copy } from '@/internal';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import {\n        BentoCodeSnippetEvent,\n        BentoCodeSnippetSupportedLanguage,\n        BentoCodeSnippetVariant,\n    } from '@/components/code-snippet/code-snippet.types';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * A code-snippet is a container to display code in a readable way.\n     * Come with added functionalities like syntax highlighting, editing and actioning the code\n     *\n     * @example\n     * import { BentoCodeSnippet } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCodeSnippet },\n     *     template: `\n     *          <bento-code-snippet :variant=\"BentoCodeSnippetVariant.MULTILINE\" content=\"{ example: 1234 }\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-code-snippet',\n        components: {\n            BentoTypography,\n            BentoButton,\n            BentoDropdown,\n            Copy,\n            BaseModal,\n            BentoLoadingIndicator,\n            ExpandIcon,\n        },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Defines the variant of code-snippet\n             */\n            variant: {\n                type: String as PropType<BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`>,\n                default: BentoCodeSnippetVariant.MULTILINE,\n                validator: (value: BentoCodeSnippetVariant) => Object.values(BentoCodeSnippetVariant).includes(value),\n            },\n            /**\n             * Language name for syntax highlighting rules\n             */\n            lang: {\n                type: String as PropType<BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`>,\n                default: BentoCodeSnippetSupportedLanguage.JSON,\n                validator: (value: BentoCodeSnippetSupportedLanguage) =>\n                    Object.values(BentoCodeSnippetSupportedLanguage).includes(value),\n            },\n            /**\n             * Label to show in the action-bar, describing the language\n             */\n            langLabel: {\n                type: String,\n                default: null,\n            },\n            /**\n             * The code content\n             */\n            content: {\n                type: String,\n                default: '',\n            },\n            /**\n             * Allows editing of the code-snippet content by the user\n             */\n            editable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that when clicked will emit an action event\n             * Leaves to the parent component the logic of what to do with it\n             */\n            actionable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that can expand the codeblock into a modal to easily\n             * view large blocks of code.\n             */\n            expandable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that when clicked will emit a run event\n             * Leaves to the parent component the logic of what to do with it\n             */\n            actionableText: {\n                type: String,\n                default: 'run',\n            },\n            /**\n             * Toggles the loading indicator within the action bar\n             */\n            loading: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: [BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            // language\n            const selectedLanguage = ref<string | null>(null);\n            const availableLanguages = []; // TODO: implement\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            const handleChangeLanguage = () => {};\n            const displayedLang = computed(() => props.langLabel ?? props.lang.toUpperCase());\n\n            const isInlineVariant = computed(() => props.variant === BentoCodeSnippetVariant.INLINE);\n\n            const conditionalClasses = computed(() => ({\n                'b-code-snippet--inline': isInlineVariant.value,\n                'b-code-snippet--scrollable': !isInlineVariant.value,\n            }));\n\n            const codeAreaContentConditionalClasses = computed(() => ({\n                'b-code-snippet__code-area-content--editable': props.editable,\n            }));\n\n            const loadLang = getLangLoader(props.lang);\n\n            const container = shallowRef<HTMLDivElement>();\n            const editor = shallowRef<EditorView>();\n            const languageConf = new Compartment();\n            const editorTheme = new Compartment();\n            const editorReadOnly = new Compartment();\n\n            const currentContents = ref(null);\n            const contentLength = ref(0);\n\n            onMounted(async () => {\n                const language = await loadLang();\n\n                // alongside the updateListener plugin it acts as a watcher of changes to the editor state\n                currentContents.value = props.content;\n                const updateCurrentContents = ({ state }) => {\n                    currentContents.value = state.doc.toString();\n                };\n\n                const extensions = [\n                    highlightActiveLine(),\n                    keymap.of([indentWithTab, INDENT_SAME_AS_LINE_BEFORE]),\n                    languageConf.of(language()),\n                    editorTheme.of(lightThemeHighlight(props.lang)),\n\n                    editorReadOnly.of(EditorState.readOnly.of(!props.editable)),\n                    EditorView.updateListener.of(content => updateCurrentContents(content)),\n                ];\n\n                if (props.variant === 'multiline') {\n                    extensions.push([lineNumbers(), history()]);\n                }\n\n                const state = EditorState.create({\n                    doc: props.content,\n                    extensions: [...extensions],\n                });\n                contentLength.value = state.doc.length;\n\n                editor.value = new EditorView({\n                    state,\n                    parent: container.value,\n                });\n            });\n            watch(\n                () => props.content,\n                () => {\n                    if (props.content !== currentContents.value) {\n                        const upcomingContentLength = props.content.length;\n                        editor.value.dispatch({\n                            changes: {\n                                from: 0,\n                                to: contentLength.value,\n                                insert: props.content,\n                            },\n                        });\n                        contentLength.value = upcomingContentLength;\n                    }\n                }\n            );\n\n            const runText = computed(() => t(props.actionableText as 'run'));\n            const onActionClicked = () => {\n                emit(BentoCodeSnippetEvent.ACTION, currentContents.value);\n            };\n\n            watchEffect(() => {\n                if (currentContents.value !== null) {\n                    emit(BentoCodeSnippetEvent.CHANGE, currentContents.value);\n                }\n            });\n\n            const showModal = ref(false);\n\n            return {\n                // Values\n                availableLanguages,\n                codeAreaContentConditionalClasses,\n                conditionalClasses,\n                container,\n                currentContents,\n                displayedLang,\n                editor,\n                selectedLanguage,\n                showModal,\n                isInlineVariant,\n\n                // Methods\n                handleChangeLanguage,\n                onActionClicked,\n                runText,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./code-snippet.scss\"></style>\n"],"names":["lightThemeColors","BCodeSnippetCodeAreaHighlightRed","BCodeSnippetCodeAreaHighlightOrange","BCodeSnippetCodeAreaHighlightGreen","BCodeSnippetCodeAreaHighlightBlue","highlightStyle","colors","language","HighlightStyle","tags","lightThemeHighlight","syntaxHighlighting","BentoCodeSnippetVariant","BentoCodeSnippetVariant2","BentoCodeSnippetSupportedLanguage","BentoCodeSnippetSupportedLanguage2","BentoCodeSnippetEvent","BentoCodeSnippetEvent2","importsMap","json","xml","javascript","java","python","getLangLoader","getIndentation","state","line","currentLine","indentMatch","INDENT_SAME_AS_LINE_BEFORE","dispatch","changes","range","newText","EditorSelection","_sfc_main","defineComponent","messages","BentoTypography","BentoButton","BentoDropdown","Copy","BaseModal","BentoLoadingIndicator","ExpandIcon","BentoTooltipDirective","value","props","emit","t","useI18n","selectedLanguage","ref","availableLanguages","handleChangeLanguage","displayedLang","computed","isInlineVariant","conditionalClasses","codeAreaContentConditionalClasses","loadLang","container","shallowRef","editor","languageConf","Compartment","editorTheme","editorReadOnly","currentContents","contentLength","onMounted","updateCurrentContents","state2","extensions","highlightActiveLine","keymap","indentWithTab","EditorState","EditorView","content","lineNumbers","history","watch","upcomingContentLength","runText","onActionClicked","watchEffect","showModal","_hoisted_3","_ctx","createCommentVNode","openBlock","createElementBlock","_hoisted_1","createElementVNode","_hoisted_2","createBlock","_component_bento_dropdown","mergeProps","_cache","$event","createVNode","_component_bento_typography","createTextVNode","toDisplayString","_component_bento_loading_indicator","_component_copy","_component_bento_button","_component_expand_icon","_hoisted_4","renderSlot","expandable","_component_base_modal","_component_bento_code_snippet","normalizeProps","guardReactiveProps"],"mappings":"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"}
+{"version":3,"file":"code-snippet.Dp_tDJ-S.js","sources":["../../../vue2/src/components/code-snippet/highlight.ts","../../../vue2/src/components/code-snippet/code-snippet.types.ts","../../../vue2/src/components/code-snippet/utils/get-lang-loader.ts","../../../vue2/src/components/code-snippet/utils/indent-same-as-line-before-extension.ts","../../../vue2/src/components/code-snippet/code-snippet.vue"],"sourcesContent":["import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { tags as t } from '@lezer/highlight';\nimport {\n    BCodeSnippetCodeAreaHighlightBlue,\n    BCodeSnippetCodeAreaHighlightGreen,\n    BCodeSnippetCodeAreaHighlightOrange,\n    BCodeSnippetCodeAreaHighlightRed,\n} from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoCodeSnippetSupportedLanguage } from './code-snippet.types';\n\nconst lightThemeColors = {\n    red: BCodeSnippetCodeAreaHighlightRed,\n    orange: BCodeSnippetCodeAreaHighlightOrange,\n    green: BCodeSnippetCodeAreaHighlightGreen,\n    blue: BCodeSnippetCodeAreaHighlightBlue,\n    invalid: '#ffffff',\n};\n\nconst highlightStyle = (colors, language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) =>\n    HighlightStyle.define([\n        {\n            tag: t.keyword,\n            color: colors.red,\n        },\n        {\n            tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],\n            color: colors.green,\n        },\n        {\n            tag: [t.function(t.variableName), t.labelName],\n            color: colors.blue,\n        },\n        {\n            tag: [t.color, t.constant(t.name), t.standard(t.name)],\n            color: colors.red,\n        },\n        {\n            tag: [t.definition(t.name), ...(language !== 'json' ? [t.separator] : [])],\n            color: colors.red,\n        },\n        {\n            tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],\n            color: colors.orange,\n        },\n        {\n            tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],\n            color: colors.blue,\n        },\n        {\n            tag: [t.meta, t.comment],\n            color: colors.orange,\n        },\n        {\n            tag: t.strong,\n            fontWeight: 'bold',\n        },\n        {\n            tag: t.emphasis,\n            fontStyle: 'italic',\n        },\n        {\n            tag: t.strikethrough,\n            textDecoration: 'line-through',\n        },\n        {\n            tag: t.link,\n            color: colors.orange,\n            textDecoration: 'underline',\n        },\n        {\n            tag: t.heading,\n            fontWeight: 'bold',\n            color: colors.blue,\n        },\n        {\n            tag: [t.atom, t.bool, t.special(t.variableName)],\n            color: colors.red,\n        },\n        {\n            tag: [t.processingInstruction, t.string, t.inserted],\n            color: colors.blue,\n        },\n        {\n            tag: t.invalid,\n            color: colors.invalid,\n        },\n    ]);\n\nexport const lightThemeHighlight = (\n    language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`\n) => syntaxHighlighting(highlightStyle(lightThemeColors, language));\n","/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetVariant {\n    INLINE = 'inline',\n    SINGLELINE = 'singleline',\n    MULTILINE = 'multiline',\n}\n\n// These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/composables/useLanguage.ts function and vice-versa\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetSupportedLanguage {\n    JSON = 'json',\n    XML = 'xml',\n    JAVA = 'java',\n    JAVASCRIPT = 'javascript',\n    PYTHON = 'python',\n}\n\nexport enum BentoCodeSnippetEvent {\n    ACTION = 'action',\n    CHANGE = 'change',\n}\n","import { BentoCodeSnippetSupportedLanguage } from '@/components/code-snippet/code-snippet.types';\nimport { json } from '@codemirror/lang-json';\nimport { xml } from '@codemirror/lang-xml';\nimport { javascript } from '@codemirror/lang-javascript';\nimport { java } from '@codemirror/lang-java';\nimport { python } from '@codemirror/lang-python';\n\n/**\n * TODO: This should be handled with dynamic imports,\n * without relying on importing every single language/package available.\n * These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/code-snippet.types.ts enum\n */\nconst importsMap = {\n    [BentoCodeSnippetSupportedLanguage.JSON]: json,\n    [BentoCodeSnippetSupportedLanguage.XML]: xml,\n    [BentoCodeSnippetSupportedLanguage.JAVASCRIPT]: javascript,\n    [BentoCodeSnippetSupportedLanguage.JAVA]: java,\n    [BentoCodeSnippetSupportedLanguage.PYTHON]: python,\n};\n\n/**\n * Returns a language loder for `CodeMirror`.\n * Supported languages: json, xml, javascript & java\n *\n * @param language Language to be used\n * @returns Language configuration loader to be used in codemirror\n */\nexport const getLangLoader = (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => {\n    const loadLang = async () => importsMap[language];\n\n    return loadLang;\n};\n","import { EditorSelection, type EditorState, type SelectionRange } from '@codemirror/state';\n\n/**\n * Calculate indentation for a new line based on line before it.\n * @param state - The editor state\n * @param line - the selection range, in this case one line\n * @returns the indentation string to be pre-pended on a new line.\n */\nconst getIndentation = (state: EditorState, line: SelectionRange) => {\n    const currentLine = state.doc.lineAt(line.from);\n    const indentMatch = /^\\s*/.exec(currentLine.text);\n    return indentMatch ? indentMatch[0] : '';\n};\n\n/**\n * This extension to codemirror will, upon pressing the 'Enter' key, indent the new line\n * the same as the line before it.\n */\nexport const INDENT_SAME_AS_LINE_BEFORE = {\n    key: 'Enter',\n    run: ({ state, dispatch }) => {\n        const changes = state.changeByRange(range => {\n            const indentation = getIndentation(state, range);\n            const newText = `\\n${indentation}`;\n            return {\n                changes: { from: range.from, to: range.to, insert: newText },\n                range: EditorSelection.cursor(range.from + newText.length),\n            };\n        });\n        dispatch(state.update(changes, { scrollIntoView: true, userEvent: 'input' }));\n        return true;\n    },\n};\n\nexport default INDENT_SAME_AS_LINE_BEFORE;\n","<template>\n    <div class=\"b-code-snippet\" :class=\"conditionalClasses\">\n        <section v-if=\"!isInlineVariant\" class=\"b-code-snippet__action-bar\">\n            <div class=\"b-code-snippet__action-bar--start\">\n                <bento-dropdown\n                    v-if=\"availableLanguages.length > 0\"\n                    v-model=\"selectedLanguage\"\n                    v-bind=\"$props\"\n                    :disabled=\"availableLanguages.length === 1\"\n                    :items=\"availableLanguages\"\n                    class=\"b-code-snippet__language-picker\"\n                    @input=\"handleChangeLanguage\"\n                />\n                <bento-typography el=\"span\" stronger>\n                    {{ displayedLang }}\n                </bento-typography>\n            </div>\n            <div class=\"b-code-snippet__action-bar--end\">\n                <bento-loading-indicator v-if=\"loading\" />\n                <copy v-if=\"currentContents !== null\" class=\"b-structured-list__icon\" :text=\"currentContents\" />\n                <bento-button\n                    v-if=\"expandable\"\n                    variant=\"tertiary\"\n                    condensed\n                    :aria-label=\"t('expand')\"\n                    @click=\"showModal = true\"\n                >\n                    <template #iconLeft>\n                        <expand-icon />\n                    </template>\n                </bento-button>\n                <bento-button v-if=\"actionable\" variant=\"primary\" tertiary condensed @click=\"onActionClicked\">\n                    <template #iconLeft>\n                        <bento-typography el=\"span\" class=\"b-code-snippet__action-button\">\n                            {{ runText }}\n                        </bento-typography>\n                    </template>\n                </bento-button>\n            </div>\n        </section>\n        <code v-if=\"content || editable\" class=\"b-code-snippet__code-area\">\n            <div ref=\"container\" class=\"b-code-snippet__code-area-content\" :class=\"codeAreaContentConditionalClasses\" />\n        </code>\n        <section v-else>\n            <slot name=\"empty-state\">\n                <!-- TODO: switch with empty-state component when ready -->\n                <div class=\"b-code-snippet__empty-state\">{{ t('nothingToDisplay') }}</div>\n            </slot>\n        </section>\n        <base-modal\n            v-if=\"expandable\"\n            class=\"b-code-snippet__modal\"\n            :hide-close-button=\"true\"\n            :custom-padding=\"'0px'\"\n            :is-dismissible=\"true\"\n            :is-open=\"showModal\"\n            size=\"large\"\n            @close-modal=\"showModal = false\"\n        >\n            <template #content>\n                <bento-code-snippet v-bind=\"{ ...$props, expandable: false }\" />\n            </template>\n        </base-modal>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, shallowRef, watch, watchEffect } from 'vue';\n    import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';\n    import { Compartment, EditorState } from '@codemirror/state';\n    import { history, indentWithTab } from '@codemirror/commands';\n    import { lightThemeHighlight } from './highlight';\n    import { getLangLoader, INDENT_SAME_AS_LINE_BEFORE } from './utils';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective } from '@/directives';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { Copy } from '@/internal';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import {\n        BentoCodeSnippetEvent,\n        BentoCodeSnippetSupportedLanguage,\n        BentoCodeSnippetVariant,\n    } from '@/components/code-snippet/code-snippet.types';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * A code-snippet is a container to display code in a readable way.\n     * Come with added functionalities like syntax highlighting, editing and actioning the code\n     *\n     * @example\n     * import { BentoCodeSnippet } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCodeSnippet },\n     *     template: `\n     *          <bento-code-snippet :variant=\"BentoCodeSnippetVariant.MULTILINE\" content=\"{ example: 1234 }\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-code-snippet',\n        components: {\n            BentoTypography,\n            BentoButton,\n            BentoDropdown,\n            Copy,\n            BaseModal,\n            BentoLoadingIndicator,\n            ExpandIcon,\n        },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Defines the variant of code-snippet\n             */\n            variant: {\n                type: String as PropType<BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`>,\n                default: BentoCodeSnippetVariant.MULTILINE,\n                validator: (value: BentoCodeSnippetVariant) => Object.values(BentoCodeSnippetVariant).includes(value),\n            },\n            /**\n             * Language name for syntax highlighting rules\n             */\n            lang: {\n                type: String as PropType<BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`>,\n                default: BentoCodeSnippetSupportedLanguage.JSON,\n                validator: (value: BentoCodeSnippetSupportedLanguage) =>\n                    Object.values(BentoCodeSnippetSupportedLanguage).includes(value),\n            },\n            /**\n             * Label to show in the action-bar, describing the language\n             */\n            langLabel: {\n                type: String,\n                default: null,\n            },\n            /**\n             * The code content\n             */\n            content: {\n                type: String,\n                default: '',\n            },\n            /**\n             * Allows editing of the code-snippet content by the user\n             */\n            editable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that when clicked will emit an action event\n             * Leaves to the parent component the logic of what to do with it\n             */\n            actionable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that can expand the codeblock into a modal to easily\n             * view large blocks of code.\n             */\n            expandable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that when clicked will emit a run event\n             * Leaves to the parent component the logic of what to do with it\n             */\n            actionableText: {\n                type: String,\n                default: 'run',\n            },\n            /**\n             * Toggles the loading indicator within the action bar\n             */\n            loading: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: [BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            // language\n            const selectedLanguage = ref<string | null>(null);\n            const availableLanguages = []; // TODO: implement\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            const handleChangeLanguage = () => {};\n            const displayedLang = computed(() => props.langLabel ?? props.lang.toUpperCase());\n\n            const isInlineVariant = computed(() => props.variant === BentoCodeSnippetVariant.INLINE);\n\n            const conditionalClasses = computed(() => ({\n                'b-code-snippet--inline': isInlineVariant.value,\n                'b-code-snippet--scrollable': !isInlineVariant.value,\n            }));\n\n            const codeAreaContentConditionalClasses = computed(() => ({\n                'b-code-snippet__code-area-content--editable': props.editable,\n            }));\n\n            const loadLang = getLangLoader(props.lang);\n\n            const container = shallowRef<HTMLDivElement>();\n            const editor = shallowRef<EditorView>();\n            const languageConf = new Compartment();\n            const editorTheme = new Compartment();\n            const editorReadOnly = new Compartment();\n\n            const currentContents = ref(null);\n            const contentLength = ref(0);\n\n            onMounted(async () => {\n                const language = await loadLang();\n\n                // alongside the updateListener plugin it acts as a watcher of changes to the editor state\n                currentContents.value = props.content;\n                const updateCurrentContents = ({ state }) => {\n                    currentContents.value = state.doc.toString();\n                };\n\n                const extensions = [\n                    highlightActiveLine(),\n                    keymap.of([indentWithTab, INDENT_SAME_AS_LINE_BEFORE]),\n                    languageConf.of(language()),\n                    editorTheme.of(lightThemeHighlight(props.lang)),\n\n                    editorReadOnly.of(EditorState.readOnly.of(!props.editable)),\n                    EditorView.updateListener.of(content => updateCurrentContents(content)),\n                ];\n\n                if (props.variant === 'multiline') {\n                    extensions.push([lineNumbers(), history()]);\n                }\n\n                const state = EditorState.create({\n                    doc: props.content,\n                    extensions: [...extensions],\n                });\n                contentLength.value = state.doc.length;\n\n                editor.value = new EditorView({\n                    state,\n                    parent: container.value,\n                });\n            });\n            watch(\n                () => props.content,\n                () => {\n                    if (props.content !== currentContents.value) {\n                        const upcomingContentLength = props.content.length;\n                        editor.value.dispatch({\n                            changes: {\n                                from: 0,\n                                to: contentLength.value,\n                                insert: props.content,\n                            },\n                        });\n                        contentLength.value = upcomingContentLength;\n                    }\n                }\n            );\n\n            const runText = computed(() => t(props.actionableText as 'run'));\n            const onActionClicked = () => {\n                emit(BentoCodeSnippetEvent.ACTION, currentContents.value);\n            };\n\n            watchEffect(() => {\n                if (currentContents.value !== null) {\n                    emit(BentoCodeSnippetEvent.CHANGE, currentContents.value);\n                }\n            });\n\n            const showModal = ref(false);\n\n            return {\n                // Values\n                availableLanguages,\n                codeAreaContentConditionalClasses,\n                conditionalClasses,\n                container,\n                currentContents,\n                displayedLang,\n                editor,\n                selectedLanguage,\n                showModal,\n                isInlineVariant,\n\n                // Methods\n                handleChangeLanguage,\n                onActionClicked,\n                runText,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./code-snippet.scss\"></style>\n"],"names":["lightThemeColors","BCodeSnippetCodeAreaHighlightRed","BCodeSnippetCodeAreaHighlightOrange","BCodeSnippetCodeAreaHighlightGreen","BCodeSnippetCodeAreaHighlightBlue","highlightStyle","colors","language","HighlightStyle","tags","lightThemeHighlight","syntaxHighlighting","BentoCodeSnippetVariant","BentoCodeSnippetVariant2","BentoCodeSnippetSupportedLanguage","BentoCodeSnippetSupportedLanguage2","BentoCodeSnippetEvent","BentoCodeSnippetEvent2","importsMap","json","xml","javascript","java","python","getLangLoader","getIndentation","state","line","currentLine","indentMatch","INDENT_SAME_AS_LINE_BEFORE","dispatch","changes","range","newText","EditorSelection","_sfc_main","defineComponent","messages","BentoTypography","BentoButton","BentoDropdown","Copy","BaseModal","BentoLoadingIndicator","ExpandIcon","BentoTooltipDirective","value","props","emit","t","useI18n","selectedLanguage","ref","availableLanguages","handleChangeLanguage","displayedLang","computed","isInlineVariant","conditionalClasses","codeAreaContentConditionalClasses","loadLang","container","shallowRef","editor","languageConf","Compartment","editorTheme","editorReadOnly","currentContents","contentLength","onMounted","updateCurrentContents","state2","extensions","highlightActiveLine","keymap","indentWithTab","EditorState","EditorView","content","lineNumbers","history","watch","upcomingContentLength","runText","onActionClicked","watchEffect","showModal","_hoisted_3","_ctx","createCommentVNode","openBlock","createElementBlock","_hoisted_1","createElementVNode","_hoisted_2","createBlock","_component_bento_dropdown","mergeProps","_cache","$event","createVNode","_component_bento_typography","createTextVNode","toDisplayString","_component_bento_loading_indicator","_component_copy","_component_bento_button","_component_expand_icon","_hoisted_4","renderSlot","expandable","_component_base_modal","_component_bento_code_snippet","normalizeProps","guardReactiveProps"],"mappings":"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"}

package/dist/chunks/{currency.BGrGBnhm.js → currency.Dz2x17_Q.js}

@@ -1,9 +1,9 @@
-import { defineComponent as i, computed as U, resolveComponent as f, openBlock as T, createElementBlock as A, createBlock as p, withCtx as H, createTextVNode as l, toDisplayString as N, Fragment as Y } from "vue";
-import { B as Z } from "./typography.DNzU41ah.js";
-import { g as W } from "./get-slot-text.D5WBGjic.js";
-import { _ as V } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { defineComponent as U, useSlots as f, computed as p, onMounted as H, openBlock as L, createElementBlock as P, createBlock as Y, unref as Z, withCtx as W, createTextVNode as T, toDisplayString as K, Fragment as V } from "vue";
+import { d as v, B as X } from "./typography.DNzU41ah.js";
+import { g as A } from "./get-slot-text.D5WBGjic.js";
+import { _ as g } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/currency.css";
-const g = [
+const J = [
   {
     exponent: 0,
     currencies: [
@@ -34,89 +34,76 @@ const g = [
   }
 ], F = (D) => {
   var a;
-  return ((a = g.find((R) => R.currencies.includes(D))) == null ? void 0 : a.exponent) ?? 2;
-}, X = (D) => {
+  return ((a = J.find((R) => R.currencies.includes(D))) == null ? void 0 : a.exponent) ?? 2;
+}, _ = (D) => {
   const a = F(D.currency), R = Number(D.value);
   return Math.round(R * 10 ** a);
-}, v = (D, a) => (
+}, x = (D, a) => (
   // Amount is in minor units and have to be converted to number with fraction digits
   // return (amount.value * 100) / 10 ** exp;
   D.value / 10 ** a
 );
-function J(D, a = {}, R = !1) {
-  const K = (a == null ? void 0 : a.exponent) ?? F(D.currency), M = R ? X(D) : D.value, P = { ...D, value: M }, L = v(P, K), m = L < 0 ? "decimal" : (a == null ? void 0 : a.style) || "currency", G = a != null && a.optionalFractions ? 0 : K, E = a != null && a.highPrecision ? 10 : K;
+function b(D, a = {}, R = !1) {
+  const l = (a == null ? void 0 : a.exponent) ?? F(D.currency), s = R ? _(D) : D.value, M = { ...D, value: s }, N = x(M, l), m = N < 0 ? "decimal" : (a == null ? void 0 : a.style) || "currency", i = a != null && a.optionalFractions ? 0 : l, E = a != null && a.highPrecision ? 10 : l;
   return {
-    value: L,
+    value: N,
     format: {
       style: m,
       currency: D.currency,
       currencyDisplay: "symbol",
-      minimumFractionDigits: G,
+      minimumFractionDigits: i,
       maximumFractionDigits: E
     }
   };
 }
-const b = (D, a, R) => {
-  const K = { value: parseFloat(D), currency: a }, M = J(K, { style: "decimal" }, R);
-  return new Intl.NumberFormat("en-US", M.format).format(M.value);
+const h = (D, a, R) => {
+  const l = { value: parseFloat(D), currency: a }, s = b(l, { style: "decimal" }, R);
+  return new Intl.NumberFormat("en-US", s.format).format(s.value);
 };
-var s = /* @__PURE__ */ ((D) => (D.AFA = "AFA", D.ALL = "ALL", D.DZD = "DZD", D.AOA = "AOA", D.ARS = "ARS", D.AMD = "AMD", D.AWG = "AWG", D.AUD = "AUD", D.AZN = "AZN", D.BSD = "BSD", D.BHD = "BHD", D.BDT = "BDT", D.BBD = "BBD", D.BYR = "BYR", D.BEF = "BEF", D.BZD = "BZD", D.BMD = "BMD", D.BTN = "BTN", D.BTC = "BTC", D.BOB = "BOB", D.BAM = "BAM", D.BWP = "BWP", D.BRL = "BRL", D.GBP = "GBP", D.BND = "BND", D.BGN = "BGN", D.BIF = "BIF", D.KHR = "KHR", D.CAD = "CAD", D.CVE = "CVE", D.KYD = "KYD", D.XOF = "XOF", D.XAF = "XAF", D.XPF = "XPF", D.CLP = "CLP", D.CLF = "CLF", D.CNY = "CNY", D.COP = "COP", D.KMF = "KMF", D.CDF = "CDF", D.CRC = "CRC", D.HRK = "HRK", D.CUC = "CUC", D.CZK = "CZK", D.DKK = "DKK", D.DJF = "DJF", D.DOP = "DOP", D.XCD = "XCD", D.EGP = "EGP", D.ERN = "ERN", D.EEK = "EEK", D.ETB = "ETB", D.EUR = "EUR", D.FKP = "FKP", D.FJD = "FJD", D.GMD = "GMD", D.GEL = "GEL", D.DEM = "DEM", D.GHS = "GHS", D.GIP = "GIP", D.GRD = "GRD", D.GTQ = "GTQ", D.GNF = "GNF", D.GYD = "GYD", D.HTG = "HTG", D.HNL = "HNL", D.HKD = "HKD", D.HUF = "HUF", D.ISK = "ISK", D.INR = "INR", D.IDR = "IDR", D.IRR = "IRR", D.IQD = "IQD", D.ILS = "ILS", D.ITL = "ITL", D.JMD = "JMD", D.JPY = "JPY", D.JOD = "JOD", D.KZT = "KZT", D.KES = "KES", D.KWD = "KWD", D.KGS = "KGS", D.LAK = "LAK", D.LVL = "LVL", D.LBP = "LBP", D.LSL = "LSL", D.LRD = "LRD", D.LYD = "LYD", D.LTC = "LTC", D.LTL = "LTL", D.MOP = "MOP", D.MKD = "MKD", D.MGA = "MGA", D.MWK = "MWK", D.MYR = "MYR", D.MVR = "MVR", D.MRO = "MRO", D.MUR = "MUR", D.MXN = "MXN", D.MDL = "MDL", D.MNT = "MNT", D.MAD = "MAD", D.MZM = "MZM", D.MMK = "MMK", D.NAD = "NAD", D.NPR = "NPR", D.ANG = "ANG", D.TWD = "TWD", D.NZD = "NZD", D.NIO = "NIO", D.NGN = "NGN", D.KPW = "KPW", D.NOK = "NOK", D.OMR = "OMR", D.PKR = "PKR", D.PAB = "PAB", D.PGK = "PGK", D.PYG = "PYG", D.PEN = "PEN", D.PHP = "PHP", D.PLN = "PLN", D.QAR = "QAR", D.RON = "RON", D.RUB = "RUB", D.RWF = "RWF", D.SVC = "SVC", D.WST = "WST", D.STD = "STD", D.SAR = "SAR", D.RSD = "RSD", D.SCR = "SCR", D.SLL = "SLL", D.SGD = "SGD", D.SKK = "SKK", D.SBD = "SBD", D.SOS = "SOS", D.ZAR = "ZAR", D.KRW = "KRW", D.SSP = "SSP", D.XDR = "XDR", D.LKR = "LKR", D.SHP = "SHP", D.SDG = "SDG", D.SRD = "SRD", D.SZL = "SZL", D.SEK = "SEK", D.CHF = "CHF", D.SYP = "SYP", D.TJS = "TJS", D.TZS = "TZS", D.THB = "THB", D.TOP = "TOP", D.TTD = "TTD", D.TND = "TND", D.TRY = "TRY", D.TMT = "TMT", D.UGX = "UGX", D.UAH = "UAH", D.AED = "AED", D.UYU = "UYU", D.USD = "USD", D.UZS = "UZS", D.VUV = "VUV", D.VEF = "VEF", D.VND = "VND", D.YER = "YER", D.ZMK = "ZMK", D.ZWL = "ZWL", D))(s || {});
-const _ = i({
-  name: "bento-currency",
-  components: { BentoTypography: Z },
+var G = /* @__PURE__ */ ((D) => (D.AFA = "AFA", D.ALL = "ALL", D.DZD = "DZD", D.AOA = "AOA", D.ARS = "ARS", D.AMD = "AMD", D.AWG = "AWG", D.AUD = "AUD", D.AZN = "AZN", D.BSD = "BSD", D.BHD = "BHD", D.BDT = "BDT", D.BBD = "BBD", D.BYR = "BYR", D.BEF = "BEF", D.BZD = "BZD", D.BMD = "BMD", D.BTN = "BTN", D.BTC = "BTC", D.BOB = "BOB", D.BAM = "BAM", D.BWP = "BWP", D.BRL = "BRL", D.GBP = "GBP", D.BND = "BND", D.BGN = "BGN", D.BIF = "BIF", D.KHR = "KHR", D.CAD = "CAD", D.CVE = "CVE", D.KYD = "KYD", D.XOF = "XOF", D.XAF = "XAF", D.XPF = "XPF", D.CLP = "CLP", D.CLF = "CLF", D.CNY = "CNY", D.COP = "COP", D.KMF = "KMF", D.CDF = "CDF", D.CRC = "CRC", D.HRK = "HRK", D.CUC = "CUC", D.CZK = "CZK", D.DKK = "DKK", D.DJF = "DJF", D.DOP = "DOP", D.XCD = "XCD", D.EGP = "EGP", D.ERN = "ERN", D.EEK = "EEK", D.ETB = "ETB", D.EUR = "EUR", D.FKP = "FKP", D.FJD = "FJD", D.GMD = "GMD", D.GEL = "GEL", D.DEM = "DEM", D.GHS = "GHS", D.GIP = "GIP", D.GRD = "GRD", D.GTQ = "GTQ", D.GNF = "GNF", D.GYD = "GYD", D.HTG = "HTG", D.HNL = "HNL", D.HKD = "HKD", D.HUF = "HUF", D.ISK = "ISK", D.INR = "INR", D.IDR = "IDR", D.IRR = "IRR", D.IQD = "IQD", D.ILS = "ILS", D.ITL = "ITL", D.JMD = "JMD", D.JPY = "JPY", D.JOD = "JOD", D.KZT = "KZT", D.KES = "KES", D.KWD = "KWD", D.KGS = "KGS", D.LAK = "LAK", D.LVL = "LVL", D.LBP = "LBP", D.LSL = "LSL", D.LRD = "LRD", D.LYD = "LYD", D.LTC = "LTC", D.LTL = "LTL", D.MOP = "MOP", D.MKD = "MKD", D.MGA = "MGA", D.MWK = "MWK", D.MYR = "MYR", D.MVR = "MVR", D.MRO = "MRO", D.MUR = "MUR", D.MXN = "MXN", D.MDL = "MDL", D.MNT = "MNT", D.MAD = "MAD", D.MZM = "MZM", D.MMK = "MMK", D.NAD = "NAD", D.NPR = "NPR", D.ANG = "ANG", D.TWD = "TWD", D.NZD = "NZD", D.NIO = "NIO", D.NGN = "NGN", D.KPW = "KPW", D.NOK = "NOK", D.OMR = "OMR", D.PKR = "PKR", D.PAB = "PAB", D.PGK = "PGK", D.PYG = "PYG", D.PEN = "PEN", D.PHP = "PHP", D.PLN = "PLN", D.QAR = "QAR", D.RON = "RON", D.RUB = "RUB", D.RWF = "RWF", D.SVC = "SVC", D.WST = "WST", D.STD = "STD", D.SAR = "SAR", D.RSD = "RSD", D.SCR = "SCR", D.SLL = "SLL", D.SGD = "SGD", D.SKK = "SKK", D.SBD = "SBD", D.SOS = "SOS", D.ZAR = "ZAR", D.KRW = "KRW", D.SSP = "SSP", D.XDR = "XDR", D.LKR = "LKR", D.SHP = "SHP", D.SDG = "SDG", D.SRD = "SRD", D.SZL = "SZL", D.SEK = "SEK", D.CHF = "CHF", D.SYP = "SYP", D.TJS = "TJS", D.TZS = "TZS", D.THB = "THB", D.TOP = "TOP", D.TTD = "TTD", D.TND = "TND", D.TRY = "TRY", D.TMT = "TMT", D.UGX = "UGX", D.UAH = "UAH", D.AED = "AED", D.UYU = "UYU", D.USD = "USD", D.UZS = "UZS", D.VUV = "VUV", D.VEF = "VEF", D.VND = "VND", D.YER = "YER", D.ZMK = "ZMK", D.ZWL = "ZWL", D))(G || {});
+const Q = { class: "b-currency" }, k = {
+  name: "bento-currency"
+}, j = /* @__PURE__ */ U({
+  ...k,
   props: {
-    currency: {
-      type: String,
-      default: s.EUR,
-      validator: (D) => Object.values(s).includes(D)
-    },
-    /**
-     * Accepts currency value in major units instead of minor ones
-     */
-    majorUnits: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Disable the default typography for the component. Only use this when the component is inside another typography component.
-     */
-    disableTypography: {
-      type: Boolean,
-      default: !1
-    }
+    currency: { default: G.EUR },
+    disableTypography: { type: Boolean, default: !1 },
+    majorUnits: { type: Boolean, default: !1 },
+    value: { default: void 0 }
   },
-  setup(D, { slots: a }) {
-    return {
-      // Values
-      formattedCurrency: U(() => {
-        const K = a.default ? W(a)("default") : null;
-        return b(K, D.currency, D.majorUnits);
-      })
-    };
+  setup(D) {
+    const a = f(), R = D, l = p(() => {
+      const s = R.value || A(a)("default");
+      return h(s, R.currency, R.majorUnits);
+    });
+    return H(() => {
+      A(a)("default") && v(
+        'BentoCurrency "default" slot',
+        `The use of "default" slot in "BentoCurrency" is no longer supported as it causes issues with dynamic content.
+                Use the "value" property instead.
+                <bento-currency :value="12345.67" currency="USD" major-units="false" />`,
+        "2.0.0"
+      );
+    }), (s, M) => (L(), P("div", Q, [
+      s.disableTypography ? (L(), P(V, { key: 1 }, [
+        T(K(l.value) + " " + K(s.currency), 1)
+      ], 64)) : (L(), Y(Z(X), {
+        key: 0,
+        class: "b-currency__amount",
+        el: "span",
+        variant: "body",
+        strong: ""
+      }, {
+        default: W(() => [
+          T(K(l.value) + " " + K(s.currency), 1)
+        ]),
+        _: 1
+      }))
+    ]));
   }
-}), h = { class: "b-currency" };
-function x(D, a, R, K, M, P) {
-  const L = f("bento-typography");
-  return T(), A("div", h, [
-    D.disableTypography ? (T(), A(Y, { key: 1 }, [
-      l(N(D.formattedCurrency) + " " + N(D.currency), 1)
-    ], 64)) : (T(), p(L, {
-      key: 0,
-      class: "b-currency__amount",
-      el: "span",
-      variant: "body",
-      strong: ""
-    }, {
-      default: H(() => [
-        l(N(D.formattedCurrency) + " " + N(D.currency), 1)
-      ]),
-      _: 1
-    }))
-  ]);
-}
-const w = /* @__PURE__ */ V(_, [["render", x], ["__scopeId", "data-v-2d20f925"]]);
+}), t = /* @__PURE__ */ g(j, [["__scopeId", "data-v-86f88f54"]]);
 export {
-  s as B,
-  w as c
+  G as B,
+  t as c
 };
-//# sourceMappingURL=currency.BGrGBnhm.js.map
+//# sourceMappingURL=currency.Dz2x17_Q.js.map

package/dist/chunks/currency.Dz2x17_Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"currency.Dz2x17_Q.js","sources":["../../../vue2/src/utils/ts/currency/countries-list.ts","../../../vue2/src/utils/ts/currency/currency.ts","../../../vue2/src/components/currency/currency.types.ts","../../../vue2/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 = withDefaults(defineProps<BentoCurrencyProps>(), {\n        currency: BentoCurrencyISOCode.EUR,\n        disableTypography: false,\n        majorUnits: false,\n        value: 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","props","__props","formattedCurrency","computed","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;mCCuCRE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;AA9CA,UAAAC,IAAAC,EAAA,GAEAC,IAAAC,GAOAC,IAAAC,EAAA,MAAA;AACI,YAAAvB,IAAAoB,EAAA,SAAAI,EAAAN,CAAA,EAAA,SAAA;AACA,aAAAP,EAAAX,GAAAoB,EAAA,UAAAA,EAAA,UAAA;AAAA,IAAkF,CAAA;AAGtF,WAAAK,EAAA,MAAA;AACI,MAAAD,EAAAN,CAAA,EAAA,SAAA,KACIQ;AAAA,QAAA;AAAA,QACI;AAAA;AAAA;AAAA,QACA;AAAA,MAGA;AAAA,IAER,CAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dashboard-section.rv0r2_-a.js → dashboard-section.BdRXcY4u.js}

@@ -1,7 +1,7 @@
 import { defineComponent as F, useSlots as R, ref as _, computed as d, watch as g, onUnmounted as O, openBlock as a, createElementBlock as i, createVNode as B, unref as s, mergeProps as H, createSlots as P, withCtx as h, renderSlot as l, createElementVNode as p, normalizeClass as f, createCommentVNode as W, createBlock as I, Fragment as U, renderList as q, onMounted as A } from "vue";
 import { B as E } from "./header.DQmnYarZ.js";
 import { a as G, B as J } from "./tabs.B3DGxpmI.js";
-import { a as K } from "./index.DKQuLmwu.js";
+import { b as K } from "./index.ChdIlujs.js";
 import { o as Q } from "./resize.Bqks3WUm.js";
 import { u as N } from "./use-has-slot.B7eQSabc.js";
 import { _ as V } from "./_plugin-vue_export-helper.CHgC5LLL.js";
@@ -164,4 +164,4 @@ export {
   mt as a,
   vt as d
 };
-//# sourceMappingURL=dashboard-section.rv0r2_-a.js.map
+//# sourceMappingURL=dashboard-section.BdRXcY4u.js.map

package/dist/chunks/{dashboard-section.rv0r2_-a.js.map → dashboard-section.BdRXcY4u.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashboard-section.rv0r2_-a.js","sources":["../../../vue2/src/templates/dashboard-template/dashboard-template.vue","../../../vue2/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 = withDefaults(\n        defineProps<{\n            /**\n             * The header that goes to the top of the template\n             */\n            header: BentoDashboardTemplateHeader;\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?: BentoDashboardTemplateTabs;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyTabs?: boolean;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyFilters?: boolean;\n        }>(),\n        {\n            tabs: undefined,\n            stickyTabs: false,\n            stickyFilters: false,\n        }\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 = withDefaults(\n        defineProps<{\n            /**\n             * The header of the section\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * Renders the section to take only half of the page\n             */\n            halfWidth?: boolean;\n        }>(),\n        {\n            halfWidth: false,\n        }\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","props","__props","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","isTabsPinned","tabsPosition","hasStickyFilters","computed","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTabsConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;;;;GA+KIA,KAAA,CAAA;;;;;;;;;;AA/HA,UAAAC,IAAAC,GA+BAC,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,SAAAR,EAAA,aAAA,GACAe,IAAAD,EAAA,MAAAR,EAAA,SAAAN,EAAA,UAAA,GAEAgB,IAAAF,EAAA,OAAA;AAAA,MAA2D,yCAAAd,EAAA;AAAA,MACR,8CAAAa,EAAA,SAAA,CAAAE,EAAA,SAAAN,EAAA;AAAA,IAEuB,EAAA,GAG1EQ,IAAAH,EAAA,OAAA;AAAA,MAAwD,sCAAAd,EAAA;AAAA,MACR,2CAAAA,EAAA,cAAAW,EAAA;AAAA,IACgC,EAAA,GAGhFO,IAAAJ,EAAA,OAAA;AAAA,MAA8D,6CAAAd,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EmB,IAAAL,EAAA,MAAA,OAAA,KAAAZ,CAAA,EAAA,OAAA,CAAAkB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAxB,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAwB,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEA,EAAA,GAAAG,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAkB,EAAApB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAc,IAAArB,EAAA,MAAA;AACA,YAAAI,EAAA,QAAAC,EAAA,QAAAgB,IAAA,GACAvB,EAAA,MAAA,eAAA,IAAA,MAAA,MAAA,GAAAM,EAAA,KAAA;AAAA,UAAsF;AAAA,QAC1F,CAAA;AAAA,MAER;AAAA,IACJ,GAGJe;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAZ,EAAA,UACIJ,EAAA,UAAAe,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,wBAAA,SAAA,IAEJT,EAAA,UACIJ,EAAA,UAAAY,IAAAjB,EAAA,MAAA,eAAA,QAAA,gBAAAiB,EAAA,wBAAA,SAAAX,EAAA;AAAA,MAGJ;AAAA,IACJ,GAGJkB,EAAA,MAAA;AACI,MAAApB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGCzDvCqB,KAAA,CAAA;;;;;;;;AA1DA,UAAA/B,IAAAC,GAiBAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA8B,IAAAlB,EAAA,OAAA;AAAA,MAA2C,mCAAAd,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAiC,EAAA,MAAA;AACI,WAAA7B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAJ,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashboard-section.BdRXcY4u.js","sources":["../../../vue2/src/templates/dashboard-template/dashboard-template.vue","../../../vue2/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 = withDefaults(\n        defineProps<{\n            /**\n             * The header that goes to the top of the template\n             */\n            header: BentoDashboardTemplateHeader;\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?: BentoDashboardTemplateTabs;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyTabs?: boolean;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyFilters?: boolean;\n        }>(),\n        {\n            tabs: undefined,\n            stickyTabs: false,\n            stickyFilters: false,\n        }\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 = withDefaults(\n        defineProps<{\n            /**\n             * The header of the section\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * Renders the section to take only half of the page\n             */\n            halfWidth?: boolean;\n        }>(),\n        {\n            halfWidth: false,\n        }\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","props","__props","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","isTabsPinned","tabsPosition","hasStickyFilters","computed","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTabsConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;;;;GA+KIA,KAAA,CAAA;;;;;;;;;;AA/HA,UAAAC,IAAAC,GA+BAC,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,SAAAR,EAAA,aAAA,GACAe,IAAAD,EAAA,MAAAR,EAAA,SAAAN,EAAA,UAAA,GAEAgB,IAAAF,EAAA,OAAA;AAAA,MAA2D,yCAAAd,EAAA;AAAA,MACR,8CAAAa,EAAA,SAAA,CAAAE,EAAA,SAAAN,EAAA;AAAA,IAEuB,EAAA,GAG1EQ,IAAAH,EAAA,OAAA;AAAA,MAAwD,sCAAAd,EAAA;AAAA,MACR,2CAAAA,EAAA,cAAAW,EAAA;AAAA,IACgC,EAAA,GAGhFO,IAAAJ,EAAA,OAAA;AAAA,MAA8D,6CAAAd,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EmB,IAAAL,EAAA,MAAA,OAAA,KAAAZ,CAAA,EAAA,OAAA,CAAAkB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAxB,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAwB,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEA,EAAA,GAAAG,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAkB,EAAApB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAc,IAAArB,EAAA,MAAA;AACA,YAAAI,EAAA,QAAAC,EAAA,QAAAgB,IAAA,GACAvB,EAAA,MAAA,eAAA,IAAA,MAAA,MAAA,GAAAM,EAAA,KAAA;AAAA,UAAsF;AAAA,QAC1F,CAAA;AAAA,MAER;AAAA,IACJ,GAGJe;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAZ,EAAA,UACIJ,EAAA,UAAAe,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,wBAAA,SAAA,IAEJT,EAAA,UACIJ,EAAA,UAAAY,IAAAjB,EAAA,MAAA,eAAA,QAAA,gBAAAiB,EAAA,wBAAA,SAAAX,EAAA;AAAA,MAGJ;AAAA,IACJ,GAGJkB,EAAA,MAAA;AACI,MAAApB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGCzDvCqB,KAAA,CAAA;;;;;;;;AA1DA,UAAA/B,IAAAC,GAiBAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA8B,IAAAlB,EAAA,OAAA;AAAA,MAA2C,mCAAAd,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAiC,EAAA,MAAA;AACI,WAAA7B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAJ,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}