@adyen/bento-vue2 1.99.0 → 1.100.0

package/dist/chunks/{pagination.CxW1zuWi.js → pagination.9fxG-UWo.js}

@@ -1,10 +1,10 @@
 import { defineComponent as d, computed as g, watch as w, useSlots as L, useAttrs as B, ref as $, toRefs as z } from "vue";
 import { p as F, B as f } from "./typography.C8lPlsbD.js";
-import { B as N } from "./dropdown.B21PZqp4.js";
+import { B as N } from "./dropdown.CLHXtH0r.js";
 import { g as S } from "./generate-uid.NJ8tVoha.js";
 import { u as h, g as x, a as y } from "./index.B6WW_F-J.js";
 import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as R } from "./button.DITA6YtS.js";
+import { B as R } from "./button.Df_UH5wZ.js";
 /* empty css              */
 import { C as k } from "./chevron-right-small.BKeb_dRX.js";
 import { u as O } from "./aria-label.CaUURpnB.js";
@@ -393,4 +393,4 @@ const Oe = Se.exports;
 export {
   Oe as B
 };
-//# sourceMappingURL=pagination.CxW1zuWi.js.map
+//# sourceMappingURL=pagination.9fxG-UWo.js.map

package/dist/chunks/{pagination.CxW1zuWi.js.map → pagination.9fxG-UWo.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pagination.CxW1zuWi.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template v-if=\"hidePageSizeSelection\" #itemCount>{{ itemsPerPage }}</template>\n\n                <template v-else #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"predefinedDropdownOptions\"\n                        :model-value=\"itemsPerPage\"\n                        @update:model-value=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/core/utils/ts';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  hidePageSizeSelection: { type: Boolean, default: false },\n  itemsPerPage: { default: 50 },\n  totalCount: { default: null },\n  pageSizeItems: { default: () => [10, 20, 50, 75, 100] }\n});\n\n    const emit = defineEmits([\"select\"]);\n\n    const isValid = computed(\n        () => Array.isArray(props.pageSizeItems) && props.pageSizeItems.every(option => Number.isInteger(option))\n    );\n\n    watch(\n        isValid,\n        valid => {\n            if (!valid) {\n                printDevelopmentWarning('BentoPagination: pageSizeItems must be an array of integers.');\n            }\n        },\n        { immediate: true }\n    );\n\n    const dropdownId = generateUid('b-pagination-context-number-elements');\n    const predefinedDropdownOptions = computed(() =>\n        props.pageSizeItems.map(option => ({\n            label: n(option),\n            value: option,\n        }))\n    );\n    const i18nComponent = getI18nComponent();\n\n    const onSelectChange = (selectedNumberOfResults: number) => {\n        emit('select', selectedNumberOfResults);\n    };\n\n    const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1 && !hidePageSelection\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageNumber')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageNumber', { page: n(page) })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :model-value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @update:model-value=\"onPageSelectChange\"\n                    />\n                </template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"showPageNumberOfTotal\" el=\"span\">\n            {{ t('pageNumberOfTotal', { page: n(page), totalPages: n(totalPages) }) }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page: n(page) }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hidePageSelection: { type: Boolean, default: false },\n  page: { default: 1 },\n  totalPages: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n    const emit = defineEmits([\"page-selected\"]);\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('bento-pagination-context-current-page');\n    const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n    const i18nComponent = getI18nComponent();\n\n    // Generate a list of pages from 1 to \"totalPages\"\n    const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n        label: n(value),\n        value,\n    });\n    const transformToPageNumber = (_, index) => index + 1;\n    const listOfAvailablePages = computed(() =>\n        Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n    );\n    const showPageNumberOfTotal = computed(\n        () => props.totalPages === 1 || (props.hidePageSelection && props.page <= props.totalPages)\n    );\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#001222\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hasNext: { type: Boolean, default: null },\n  page: null,\n  totalPages: { default: null }\n});\n\n    const emit = defineEmits([\"navigate\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isCurrentPageFirst = computed(() => props.page === 1);\n    const isCurrentPageLast = computed(() => props.page === props.totalPages);\n    const isNextButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        return hasNoNextPage || isCurrentPageLast.value;\n    });\n    const isLastPageButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        const hasNoTotalPagesNumber = !props.totalPages;\n\n        return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n    });\n\n    const navigate = (pageArg: number) => {\n        emit('navigate', pageArg);\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :hide-page-size-selection=\"hidePageSizeSelection\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                :page-size-items=\"pageSizeItems\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :virtual-scroll=\"virtualScroll\"\n                    :hide-page-selection=\"hidePageSelection\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRefs, useAttrs, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = defineProps({\n  ariaLabel: { default: null },\n  hasNext: { type: Boolean, default: null },\n  hidePageSize: { type: Boolean, default: false },\n  hidePageSelection: { type: Boolean, default: false },\n  hidePageSizeSelection: { type: Boolean, default: false },\n  page: { default: 1 },\n  size: { default: 20 },\n  totalCount: { default: null },\n  virtualScroll: { type: Boolean, default: false },\n  pageSizeItems: { default: undefined }\n});\n\n    const emit = defineEmits([\"navigate\", \"items-page\", \"update:page\", \"update:size\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const attrs = useAttrs();\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n    });\n\n    const totalPages = computed(() =>\n        !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n    );\n\n    const navigate = (pageArg: number, itemsPerPage?: number) => {\n        if (props.hidePageSize) {\n            emit('navigate', pageArg);\n        } else {\n            emit('navigate', pageArg, itemsPerPage ?? props?.size);\n        }\n        emit('update:page', pageArg);\n    };\n\n    const onPageSelected = (pageNumber: number) => {\n        navigate(pageNumber);\n    };\n\n    const onItemsPerPageChange = (elements: number) => {\n        emit('items-page', elements);\n        emit('update:size', elements);\n\n        // Always go to first page when the\n        // number of items page changes\n        navigate(1, elements);\n    };\n\n    const navigationConditionalClasses = () => ({\n        'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","t","n","useI18n","isValid","computed","props","option","watch","valid","printDevelopmentWarning","dropdownId","generateUid","predefinedDropdownOptions","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","emit","translationPathKey","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","showPageNumberOfTotal","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ref","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":"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"}
+{"version":3,"file":"pagination.9fxG-UWo.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n    <div class=\"b-pagination-results-per-page\">\n        <bento-typography el=\"div\">\n            <component\n                :is=\"i18nComponent\"\n                v-bind=\"getI18nProps(translationPathKey)\"\n                class=\"b-pagination-results-per-page__dropdown-container\"\n                tag=\"div\"\n                :plural=\"totalCount\"\n            >\n                <template v-if=\"hidePageSizeSelection\" #itemCount>{{ itemsPerPage }}</template>\n\n                <template v-else #itemCount>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n                        class=\"b-pagination-results-per-page__dropdown\"\n                        condensed\n                        :items=\"predefinedDropdownOptions\"\n                        :model-value=\"itemsPerPage\"\n                        @update:model-value=\"onSelectChange\"\n                    />\n                </template>\n                <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n            </component>\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, watch } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { generateUid } from '@/core/utils/ts';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n    import { printDevelopmentWarning } from '@/utils/ts/print-development-warning';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  hidePageSizeSelection: { type: Boolean, default: false },\n  itemsPerPage: { default: 50 },\n  totalCount: { default: null },\n  pageSizeItems: { default: () => [10, 20, 50, 75, 100] }\n});\n\n    const emit = defineEmits([\"select\"]);\n\n    const isValid = computed(\n        () => Array.isArray(props.pageSizeItems) && props.pageSizeItems.every(option => Number.isInteger(option))\n    );\n\n    watch(\n        isValid,\n        valid => {\n            if (!valid) {\n                printDevelopmentWarning('BentoPagination: pageSizeItems must be an array of integers.');\n            }\n        },\n        { immediate: true }\n    );\n\n    const dropdownId = generateUid('b-pagination-context-number-elements');\n    const predefinedDropdownOptions = computed(() =>\n        props.pageSizeItems.map(option => ({\n            label: n(option),\n            value: option,\n        }))\n    );\n    const i18nComponent = getI18nComponent();\n\n    const onSelectChange = (selectedNumberOfResults: number) => {\n        emit('select', selectedNumberOfResults);\n    };\n\n    const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n    <div class=\"b-pagination-context\">\n        <bento-typography v-if=\"totalPages > 1 && !hidePageSelection\" el=\"div\">\n            <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageNumber')\" tag=\"div\">\n                <template #page>\n                    <bento-dropdown\n                        :id=\"dropdownId\"\n                        :aria-label=\"t('pageNumber', { page: n(page) })\"\n                        class=\"b-pagination-context__dropdown\"\n                        condensed\n                        :items=\"listOfAvailablePages\"\n                        :model-value=\"page\"\n                        :virtual-scroll=\"virtualScroll\"\n                        @update:model-value=\"onPageSelectChange\"\n                    />\n                </template>\n            </component>\n        </bento-typography>\n        <bento-typography v-else-if=\"showPageNumberOfTotal\" el=\"span\">\n            {{ t('pageNumberOfTotal', { page: n(page), totalPages: n(totalPages) }) }}\n        </bento-typography>\n        <bento-typography v-else el=\"span\">\n            {{ t('pageNumber', { page: n(page) }) }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { type BentoListboxOptionItem } from '@/types/listbox';\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n    import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hidePageSelection: { type: Boolean, default: false },\n  page: { default: 1 },\n  totalPages: { default: null },\n  virtualScroll: { type: Boolean, default: false }\n});\n    const emit = defineEmits([\"page-selected\"]);\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n    const dropdownId = generateUid('bento-pagination-context-current-page');\n    const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n    const i18nComponent = getI18nComponent();\n\n    // Generate a list of pages from 1 to \"totalPages\"\n    const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n        label: n(value),\n        value,\n    });\n    const transformToPageNumber = (_, index) => index + 1;\n    const listOfAvailablePages = computed(() =>\n        Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n    );\n    const showPageNumberOfTotal = computed(\n        () => props.totalPages === 1 || (props.hidePageSelection && props.page <= props.totalPages)\n    );\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#001222\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <ul class=\"b-pagination-controls\">\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the first page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n                <template #iconLeft>\n                    <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the previous page -->\n            <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n                <template #iconLeft>\n                    <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the next page -->\n            <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n                <template #iconLeft>\n                    <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n                </template>\n            </bento-button>\n        </li>\n        <li class=\"b-pagination-controls__item\">\n            <!-- Navigate to the last page -->\n            <bento-button\n                :disabled=\"isLastPageButtonDisabled\"\n                variant=\"tertiary\"\n                condensed\n                @click=\"navigate(totalPages)\"\n            >\n                <template #iconLeft>\n                    <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n                </template>\n            </bento-button>\n        </li>\n    </ul>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { useI18n } from '@/utils/ts/i18n';\n    import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n    import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n    import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n    import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  hasNext: { type: Boolean, default: null },\n  page: null,\n  totalPages: { default: null }\n});\n\n    const emit = defineEmits([\"navigate\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const isCurrentPageFirst = computed(() => props.page === 1);\n    const isCurrentPageLast = computed(() => props.page === props.totalPages);\n    const isNextButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        return hasNoNextPage || isCurrentPageLast.value;\n    });\n    const isLastPageButtonDisabled = computed(() => {\n        const hasNoNextPage = !props.hasNext;\n        const hasNoTotalPagesNumber = !props.totalPages;\n\n        return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n    });\n\n    const navigate = (pageArg: number) => {\n        emit('navigate', pageArg);\n    };\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n    <div class=\"b-pagination\">\n        <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\n            <bento-pagination-results-per-page\n                v-if=\"!hidePageSize\"\n                class=\"b-pagination__results-per-page\"\n                :hide-page-size-selection=\"hidePageSizeSelection\"\n                :items-per-page=\"size\"\n                :total-count=\"totalCount\"\n                :page-size-items=\"pageSizeItems\"\n                @select=\"onItemsPerPageChange\"\n            />\n            <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n            <div class=\"b-pagination__page-navigator\">\n                <bento-pagination-context\n                    class=\"b-pagination__context\"\n                    :total-pages=\"totalPages\"\n                    :page=\"page\"\n                    :virtual-scroll=\"virtualScroll\"\n                    :hide-page-selection=\"hidePageSelection\"\n                    @page-selected=\"onPageSelected\"\n                />\n\n                <div class=\"b-pagination__divider\"></div>\n\n                <bento-pagination-controls\n                    class=\"b-pagination__controls\"\n                    :has-next=\"hasNext\"\n                    :page=\"page\"\n                    :total-pages=\"totalPages\"\n                    @navigate=\"navigate\"\n                />\n            </div>\n        </nav>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, toRefs, useAttrs, useSlots } from 'vue';\n    import { BentoTypography } from '@/components/typography';\n    import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n    import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n    import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useHasSlot } from '@/composables';\n    import type { BentoPaginationProps } from './pagination.types';\n\n    const props = defineProps({\n  ariaLabel: { default: null },\n  hasNext: { type: Boolean, default: null },\n  hidePageSize: { type: Boolean, default: false },\n  hidePageSelection: { type: Boolean, default: false },\n  hidePageSizeSelection: { type: Boolean, default: false },\n  page: { default: 1 },\n  size: { default: 20 },\n  totalCount: { default: null },\n  virtualScroll: { type: Boolean, default: false },\n  pageSizeItems: { default: undefined }\n});\n\n    const emit = defineEmits([\"navigate\", \"items-page\", \"update:page\", \"update:size\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const attrs = useAttrs();\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n    });\n\n    const totalPages = computed(() =>\n        !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n    );\n\n    const navigate = (pageArg: number, itemsPerPage?: number) => {\n        if (props.hidePageSize) {\n            emit('navigate', pageArg);\n        } else {\n            emit('navigate', pageArg, itemsPerPage ?? props?.size);\n        }\n        emit('update:page', pageArg);\n    };\n\n    const onPageSelected = (pageNumber: number) => {\n        navigate(pageNumber);\n    };\n\n    const onItemsPerPageChange = (elements: number) => {\n        emit('items-page', elements);\n        emit('update:size', elements);\n\n        // Always go to first page when the\n        // number of items page changes\n        navigate(1, elements);\n    };\n\n    const navigationConditionalClasses = () => ({\n        'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Paginiation component to help users page through data sets.\n     *\n     * There are two ways of doing navigation in this component:\n     *      1. (Basic) You tell the component if there is a next page (hasNext)\n     *      2. (Enhanced) You tell the component:\n     *          - How many total items exist (totalCount)\n     *          - The max number of items that you show/fetch per page (size)\n     *          - In this case you should not set the hasNext props\n     *\n     * If you have the data available and opt to use the Enhanced way you get extra controls:\n     *      - Page dropdown selector\n     *      - Last page button\n     *      - \"Showing 10 of 200 items\" text\n     *\n     * @usage\n     * import { BentoPagination } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPagination },\n     *     template: `\n     *         <bento-pagination :has-next=\"isNextPage\" />\n     *     `,\n     * }\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","t","n","useI18n","isValid","computed","props","option","watch","valid","printDevelopmentWarning","dropdownId","generateUid","predefinedDropdownOptions","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","emit","translationPathKey","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","showPageNumberOfTotal","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ref","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":"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"}

package/dist/chunks/{promo-banner.BVBt9w4u.js → promo-banner.eVbU1xqj.js}

@@ -1,6 +1,6 @@
 import { defineComponent as v, ref as B, computed as o } from "vue";
 import { f as y } from "./index.BPUMyryR.js";
-import { B as R } from "./button.DITA6YtS.js";
+import { B as R } from "./button.Df_UH5wZ.js";
 import { a as l, b as I, B as T } from "./image.C2D2hKat.js";
 import { B as b } from "./typography.C8lPlsbD.js";
 import { u as C } from "./index.B6WW_F-J.js";
@@ -88,4 +88,4 @@ export {
   c as a,
   V as p
 };
-//# sourceMappingURL=promo-banner.BVBt9w4u.js.map
+//# sourceMappingURL=promo-banner.eVbU1xqj.js.map

package/dist/chunks/{promo-banner.BVBt9w4u.js.map → promo-banner.eVbU1xqj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"promo-banner.BVBt9w4u.js","sources":["../../src/components/promo-banner/promo-banner.types.ts","../../src/components/promo-banner/promo-banner.vue"],"sourcesContent":["import { type BentoButtonActionObject } from '@/components/button';\nimport { type BentoButtonVariant } from '../button';\nimport { type BentoImageAspectRatio, type BentoImageProps } from '../image';\n\nexport interface BentoPromoBannerProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     *\n     * Each object in the list should have a `title`, an `event` and a `variant`.\n     *\n     * `title`: Button's text.\n     * `event`: Event triggered when clicking the Button.\n     * `variant`: Button's style.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   variant: 'primary'\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   variant: 'secondary'\n     * }]\n     * ```\n     */\n    actions?: Array<BentoPromoBannerAction>;\n\n    /**\n     * Defines the color of banner's background\n     */\n    color?: `${BentoPromoBannerColor}`;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    isDismissible?: boolean;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    dismissButtonText?: string;\n\n    /**\n     * Defines the image used in the banner.\n     *\n     * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\n     * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n     *\n     * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n     *  - `./1-1.png` with an aspect ratio of `1:1`\n     *  - `./2-1.png` with an aspect ratio of `2:1`\n     *  - `./16-9.png` with an aspect ratio of `16:9`\n     */\n    image: BentoPromoBannerImage;\n\n    /**\n     * Defines style of the banner.\n     *\n     * The horizontal layout is responsive to the container size and\n     * changes depending on the image aspect ratio.\n     *\n     * The vertical layout remains the same regardless of container size.\n     */\n    layout?: `${BentoPromoBannerLayout}`;\n\n    /**\n     * Defines the title text to be shown on the banner\n     */\n    title: string;\n}\n\nexport type BentoPromoBannerImageAspectRatio = `${\n    | BentoImageAspectRatio.P16_9\n    | BentoImageAspectRatio.P2_1\n    | BentoImageAspectRatio.P1_1}`;\n\nexport type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`;\n\n/**\n * @deprecated Since v2.0.0. Use `BentoPromoBannerAction` without the generic instead.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & {\n    variant: BentoPromoBannerButtonVariant;\n};\n\nexport interface BentoPromoBannerImage {\n    src: BentoImageProps['src'];\n    alt?: BentoImageProps['alt'];\n    aspectRatio: BentoPromoBannerImageAspectRatio;\n}\n\nexport enum BentoPromoBannerColor {\n    BLUE = 'blue',\n    GREY = 'grey',\n    GREEN = 'green',\n}\n\nexport enum BentoPromoBannerLayout {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n","<template>\n    <section\n        ref=\"promoBannerRef\"\n        class=\"b-promo-banner\"\n        :class=\"bannerConditionalClass\"\n        :aria-labelledby=\"promoBannerTitleId\"\n    >\n        <div class=\"b-promo-banner__content\">\n            <div class=\"b-promo-banner__content-header\">\n                <bento-typography :id=\"promoBannerTitleId\" variant=\"title\" large>\n                    {{ title }}\n                </bento-typography>\n\n                <slot name=\"description\" />\n            </div>\n\n            <div class=\"b-promo-banner__content-actions\">\n                <template v-if=\"actions\">\n                    <bento-button\n                        v-for=\"(button, index) in actions\"\n                        :key=\"index\"\n                        :variant=\"button.variant\"\n                        :critical=\"button.critical\"\n                        :disabled=\"button.disabled\"\n                        :inverse=\"button.inverse\"\n                        :icon-only=\"button.iconOnly\"\n                        :link=\"button.link\"\n                        @click=\"button.event\"\n                    >\n                        <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                            <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                        </template>\n\n                        <template v-if=\"!isIconOnly(button)\" #default>\n                            {{ button.title }}\n                        </template>\n\n                        <template v-if=\"button.iconRight\" #iconRight>\n                            <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                        </template>\n                    </bento-button>\n                </template>\n\n                <bento-button v-if=\"isDismissible\" variant=\"secondary\" @click=\"emit('dismiss')\">\n                    {{ computedDismissButtonText }}\n                </bento-button>\n            </div>\n        </div>\n\n        <div class=\"b-promo-banner__image\">\n            <bento-image\n                class=\"b-promo-banner__image-item\"\n                :src=\"image.src\"\n                :alt=\"image.alt ?? ''\"\n                :aspect-ratio=\"image.aspectRatio\"\n                :object-fit=\"BentoImageObjectFit.CONTAIN\"\n            ></bento-image>\n        </div>\n    </section>\n</template>\n\n<script setup lang=\"ts\">\n    import { useElementSize } from '@vueuse/core';\n    import { computed, ref } from 'vue';\n\n    // Components\n    import { BentoButton, type BentoButtonActionObject } from '@/components/button';\n    import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoPromoBannerColor, BentoPromoBannerLayout, type BentoPromoBannerProps } from './promo-banner.types';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  actions: { default: null },\n  color: { default: BentoPromoBannerColor.GREY },\n  isDismissible: { type: Boolean, default: true },\n  dismissButtonText: { default: null },\n  image: null,\n  layout: { default: BentoPromoBannerLayout.HORIZONTAL },\n  title: null\n});\n\n    const emit = defineEmits([\"dismiss\"]);\n\n    const promoBannerRef = ref(null);\n    const promoBannerSize = useElementSize(promoBannerRef);\n    const promoBannerTitleId = generateUid('promoBannerTitle');\n\n    const horizontalLayoutBreakpoint = computed(() => {\n        if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) {\n            return 800;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) {\n            return 850;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) {\n            return 623;\n        }\n\n        return 0;\n    });\n\n    const bannerLayoutClass = computed(() => {\n        // only horizontal layout is responsive and, by design, follows the container size\n        if (\n            props.layout === BentoPromoBannerLayout.HORIZONTAL &&\n            promoBannerSize.width.value <= horizontalLayoutBreakpoint.value\n        ) {\n            return BentoPromoBannerLayout.VERTICAL;\n        }\n\n        return props.layout;\n    });\n\n    const bannerConditionalClass = computed(() =>\n        [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ')\n    );\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n\n    const computedDismissButtonText = computed(() => props.dismissButtonText || t('dismiss'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Promotional Banner highlights important information, announcements, or promotions.\n     *\n     * @example\n     * import { BentoPromoBanner } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPromoBanner },\n     *     template: `\n     *         <bento-promo-banner\n     *              title=\"Title\"\n     *              description=\"Brief description explaining and giving more information about the title\"\n     *              :image=\"{ src: '16-1.png', aspectRatio: '16:9' }\"\n     *              :actions=\"[{ title: 'Primary', event: () => {} }]\"\n     *         >\n     *         </bento-promo-banner>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-promo-banner',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./promo-banner.scss\" />\n"],"names":["BentoPromoBannerColor","BentoPromoBannerColor2","BentoPromoBannerLayout","BentoPromoBannerLayout2","__default__","messages","t","useI18n","promoBannerRef","ref","promoBannerSize","useElementSize","promoBannerTitleId","generateUid","horizontalLayoutBreakpoint","computed","props","BentoImageAspectRatio","bannerLayoutClass","bannerConditionalClass","isIconOnly","button","computedDismissButtonText"],"mappings":";;;;;;;;;AA6FO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMLE,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCoDRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;iBA3EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAcAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAA,kBAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,MAAA,gBAAAC,EAAA,QACI,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAGJ,CAAO,GAGXC,IAAAH,EAAA,MAEIC,EAAA,WAAAd,EAAA,cAAAQ,EAAA,MAAA,SAAAI,EAAA,QAIIZ,EAAA,WAGJc,EAAA,MAAa,GAGjBG,IAAAJ;AAAA,MAA+B,MAAA,CAAA,mBAAAG,EAAA,KAAA,IAAA,mBAAAF,EAAA,KAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAC8D,GAG7FI,IAAA,CAAAC,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA,OAGAC,IAAAP,EAAA,MAAAC,EAAA,qBAAAV,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"promo-banner.eVbU1xqj.js","sources":["../../src/components/promo-banner/promo-banner.types.ts","../../src/components/promo-banner/promo-banner.vue"],"sourcesContent":["import { type BentoButtonActionObject } from '@/components/button';\nimport { type BentoButtonVariant } from '../button';\nimport { type BentoImageAspectRatio, type BentoImageProps } from '../image';\n\nexport interface BentoPromoBannerProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     *\n     * Each object in the list should have a `title`, an `event` and a `variant`.\n     *\n     * `title`: Button's text.\n     * `event`: Event triggered when clicking the Button.\n     * `variant`: Button's style.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   variant: 'primary'\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   variant: 'secondary'\n     * }]\n     * ```\n     */\n    actions?: Array<BentoPromoBannerAction>;\n\n    /**\n     * Defines the color of banner's background\n     */\n    color?: `${BentoPromoBannerColor}`;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    isDismissible?: boolean;\n\n    /**\n     * Defines whether the banner has a `Dismiss` button\n     */\n    dismissButtonText?: string;\n\n    /**\n     * Defines the image used in the banner.\n     *\n     * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\n     * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n     *\n     * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n     *  - `./1-1.png` with an aspect ratio of `1:1`\n     *  - `./2-1.png` with an aspect ratio of `2:1`\n     *  - `./16-9.png` with an aspect ratio of `16:9`\n     */\n    image: BentoPromoBannerImage;\n\n    /**\n     * Defines style of the banner.\n     *\n     * The horizontal layout is responsive to the container size and\n     * changes depending on the image aspect ratio.\n     *\n     * The vertical layout remains the same regardless of container size.\n     */\n    layout?: `${BentoPromoBannerLayout}`;\n\n    /**\n     * Defines the title text to be shown on the banner\n     */\n    title: string;\n}\n\nexport type BentoPromoBannerImageAspectRatio = `${\n    | BentoImageAspectRatio.P16_9\n    | BentoImageAspectRatio.P2_1\n    | BentoImageAspectRatio.P1_1}`;\n\nexport type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`;\n\n/**\n * @deprecated Since v2.0.0. Use `BentoPromoBannerAction` without the generic instead.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & {\n    variant: BentoPromoBannerButtonVariant;\n};\n\nexport interface BentoPromoBannerImage {\n    src: BentoImageProps['src'];\n    alt?: BentoImageProps['alt'];\n    aspectRatio: BentoPromoBannerImageAspectRatio;\n}\n\nexport enum BentoPromoBannerColor {\n    BLUE = 'blue',\n    GREY = 'grey',\n    GREEN = 'green',\n}\n\nexport enum BentoPromoBannerLayout {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n}\n","<template>\n    <section\n        ref=\"promoBannerRef\"\n        class=\"b-promo-banner\"\n        :class=\"bannerConditionalClass\"\n        :aria-labelledby=\"promoBannerTitleId\"\n    >\n        <div class=\"b-promo-banner__content\">\n            <div class=\"b-promo-banner__content-header\">\n                <bento-typography :id=\"promoBannerTitleId\" variant=\"title\" large>\n                    {{ title }}\n                </bento-typography>\n\n                <slot name=\"description\" />\n            </div>\n\n            <div class=\"b-promo-banner__content-actions\">\n                <template v-if=\"actions\">\n                    <bento-button\n                        v-for=\"(button, index) in actions\"\n                        :key=\"index\"\n                        :variant=\"button.variant\"\n                        :critical=\"button.critical\"\n                        :disabled=\"button.disabled\"\n                        :inverse=\"button.inverse\"\n                        :icon-only=\"button.iconOnly\"\n                        :link=\"button.link\"\n                        @click=\"button.event\"\n                    >\n                        <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                            <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                        </template>\n\n                        <template v-if=\"!isIconOnly(button)\" #default>\n                            {{ button.title }}\n                        </template>\n\n                        <template v-if=\"button.iconRight\" #iconRight>\n                            <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                        </template>\n                    </bento-button>\n                </template>\n\n                <bento-button v-if=\"isDismissible\" variant=\"secondary\" @click=\"emit('dismiss')\">\n                    {{ computedDismissButtonText }}\n                </bento-button>\n            </div>\n        </div>\n\n        <div class=\"b-promo-banner__image\">\n            <bento-image\n                class=\"b-promo-banner__image-item\"\n                :src=\"image.src\"\n                :alt=\"image.alt ?? ''\"\n                :aspect-ratio=\"image.aspectRatio\"\n                :object-fit=\"BentoImageObjectFit.CONTAIN\"\n            ></bento-image>\n        </div>\n    </section>\n</template>\n\n<script setup lang=\"ts\">\n    import { useElementSize } from '@vueuse/core';\n    import { computed, ref } from 'vue';\n\n    // Components\n    import { BentoButton, type BentoButtonActionObject } from '@/components/button';\n    import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoPromoBannerColor, BentoPromoBannerLayout, type BentoPromoBannerProps } from './promo-banner.types';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import { generateUid } from '@/core/utils/ts';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  actions: { default: null },\n  color: { default: BentoPromoBannerColor.GREY },\n  isDismissible: { type: Boolean, default: true },\n  dismissButtonText: { default: null },\n  image: null,\n  layout: { default: BentoPromoBannerLayout.HORIZONTAL },\n  title: null\n});\n\n    const emit = defineEmits([\"dismiss\"]);\n\n    const promoBannerRef = ref(null);\n    const promoBannerSize = useElementSize(promoBannerRef);\n    const promoBannerTitleId = generateUid('promoBannerTitle');\n\n    const horizontalLayoutBreakpoint = computed(() => {\n        if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) {\n            return 800;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) {\n            return 850;\n        } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) {\n            return 623;\n        }\n\n        return 0;\n    });\n\n    const bannerLayoutClass = computed(() => {\n        // only horizontal layout is responsive and, by design, follows the container size\n        if (\n            props.layout === BentoPromoBannerLayout.HORIZONTAL &&\n            promoBannerSize.width.value <= horizontalLayoutBreakpoint.value\n        ) {\n            return BentoPromoBannerLayout.VERTICAL;\n        }\n\n        return props.layout;\n    });\n\n    const bannerConditionalClass = computed(() =>\n        [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ')\n    );\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n\n    const computedDismissButtonText = computed(() => props.dismissButtonText || t('dismiss'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Promotional Banner highlights important information, announcements, or promotions.\n     *\n     * @example\n     * import { BentoPromoBanner } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoPromoBanner },\n     *     template: `\n     *         <bento-promo-banner\n     *              title=\"Title\"\n     *              description=\"Brief description explaining and giving more information about the title\"\n     *              :image=\"{ src: '16-1.png', aspectRatio: '16:9' }\"\n     *              :actions=\"[{ title: 'Primary', event: () => {} }]\"\n     *         >\n     *         </bento-promo-banner>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-promo-banner',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./promo-banner.scss\" />\n"],"names":["BentoPromoBannerColor","BentoPromoBannerColor2","BentoPromoBannerLayout","BentoPromoBannerLayout2","__default__","messages","t","useI18n","promoBannerRef","ref","promoBannerSize","useElementSize","promoBannerTitleId","generateUid","horizontalLayoutBreakpoint","computed","props","BentoImageAspectRatio","bannerLayoutClass","bannerConditionalClass","isIconOnly","button","computedDismissButtonText"],"mappings":";;;;;;;;;AA6FO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMLE,IAAA,kBAAAC,OACHA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCoDRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;iBA3EA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GAcAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAA,kBAAA,GAEAC,IAAAC,EAAA,MACIC,EAAA,MAAA,gBAAAC,EAAA,QACI,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAAOD,EAAA,MAAA,gBAAAC,EAAA,OAEP,MAGJ,CAAO,GAGXC,IAAAH,EAAA,MAEIC,EAAA,WAAAd,EAAA,cAAAQ,EAAA,MAAA,SAAAI,EAAA,QAIIZ,EAAA,WAGJc,EAAA,MAAa,GAGjBG,IAAAJ;AAAA,MAA+B,MAAA,CAAA,mBAAAG,EAAA,KAAA,IAAA,mBAAAF,EAAA,KAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAC8D,GAG7FI,IAAA,CAAAC,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA,OAGAC,IAAAP,EAAA,MAAAC,EAAA,qBAAAV,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{rich-text-editor.VWCBSRmM.js → rich-text-editor.DYfdUHI6.js}

@@ -1,7 +1,7 @@
 import { defineComponent as At, ref as xt, onMounted as Yn, watch as le, computed as dt, h as Q, useAttrs as Jn } from "vue";
 import { B as Xn } from "./typography.C8lPlsbD.js";
 import { B as Kn } from "./segmented-control.BOyYIUEp.js";
-import { B as tr } from "./alert.BDkEbdf4.js";
+import { B as tr } from "./alert.DP17WjNE.js";
 import { n as yt } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "./index.Cl4_42j5.js";
 import { B as er } from "./link.BpuCRgok.js";
@@ -6245,4 +6245,4 @@ const Do = ko.exports;
 export {
   Do as r
 };
-//# sourceMappingURL=rich-text-editor.VWCBSRmM.js.map
+//# sourceMappingURL=rich-text-editor.DYfdUHI6.js.map