@adyen/bento-vue2 1.63.2 → 1.64.0

package/dist/chunks/{summary-grid.types.BgFtV5Qh.js.map → summary-grid.types.CkUIw703.js.map}

@@ -1 +1 @@
-{"version":3,"file":"summary-grid.types.BgFtV5Qh.js","sources":["../../src/components/summary-grid/summary-grid.vue","../../src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue","../../src/components/summary-grid/summary-grid.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { onMounted, provide, toRef, useSlots } from 'vue';\n    import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal';\n    import { useHasSlot } from '@/composables';\n    import {\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        SUMMARY_GRID_SLASHED_ZERO,\n    } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = defineProps({\n  columnWidth: { default: null },\n  slashedZero: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    let numberOfRows = 1;\n    if (slots) {\n        const slotRows = Object.keys(slots)\n            ?.filter(slotName => slotName.includes('cell-'))\n            ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n        numberOfRows = Math.max(...slotRows);\n    }\n\n    onMounted(() => {\n        if (numberOfRows > 3) {\n            throw new Error(\n                'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n            );\n        }\n    });\n\n    const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => {\n        const isSummaryGridLayout = true;\n        return { isSummaryGridLayout };\n    };\n\n    provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid);\n    provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","<template>\n    <div class=\"b-summary-grid-item\" :class=\"conditionalClasses\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography class=\"b-summary-grid-item__title\" el=\"span\" variant=\"body\">\n                <bento-dashed-underline\n                    v-if=\"withUnderline\"\n                    :tooltip-text=\"underlineTooltipText\"\n                    :popover-size=\"underlinePopoverSize\"\n                >\n                    {{ title }}\n                    <template v-if=\"hasSlot('dashed-underline')\" #popover-content>\n                        <slot name=\"dashed-underline\"></slot>\n                    </template>\n                </bento-dashed-underline>\n                <template v-else>\n                    {{ title }}\n                </template>\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    tooltip-position=\"top\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                />\n            </div>\n        </div>\n        <bento-typography\n            data-testid=\"summary-grid-item-content-typography\"\n            class=\"b-summary-grid-item__title\"\n            v-bind=\"typographyProps\"\n            el=\"span\"\n        >\n            <slot />\n            <bento-tag\n                v-if=\"trend && itemType !== 'text'\"\n                :variant=\"trendVariant\"\n                :label=\"trend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n        <bento-typography\n            v-if=\"hasSlot('secondary')\"\n            class=\"b-summary-grid-item__title\"\n            data-testid=\"summary-grid-item-secondary-metric-typography\"\n            el=\"span\"\n            variant=\"caption\"\n            stronger\n        >\n            <slot name=\"secondary\" />\n            <bento-tag\n                v-if=\"secondaryTrend\"\n                :variant=\"secondaryTrendVariant\"\n                :label=\"secondaryTrend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, toRefs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDashedUnderline } from '@/components/dashed-underline';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys';\n    import type { BentoSummaryGridItemTrendDirection } from '@/components/summary-grid/summary-grid.types';\n    import type { BentoSummaryGridItemProps } from './summary-grid-item.types';\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  itemType: { default: 'custom' }\n});\n\n    const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n    const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false));\n\n    const tagVariantColor = (direction: `${BentoSummaryGridItemTrendDirection}`): `${BentoTagVariant}` => {\n        switch (direction) {\n            case 'positive':\n                return 'green';\n            case 'negative':\n                return 'red';\n            default:\n                return 'blue';\n        }\n    };\n\n    // TODO implement plus or minus symbol logic\n    const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n    const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n    const typographyContentElement = computed<`${BentoTypographyVariant}`>(() => {\n        if (size.value === 'small') {\n            return 'body';\n        }\n        if (itemType.value !== 'text') {\n            return 'title';\n        }\n\n        return null;\n    });\n\n    const typographyProps = computed(() => ({\n        medium: size.value === 'large',\n        strongest: size.value === 'small',\n        wide: size.value === 'small',\n        variant: typographyContentElement.value,\n    }));\n\n    const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n    const conditionalClasses = computed(() => ({ 'b-summary-grid-item--slashed-zero': hasSlashedZero.value }));\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const withUnderline = computed(() => props.underlineTooltipText || hasSlot('dashed-underline'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"amount\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-amount\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <div v-if=\"secondaryLabel\" class=\"b-summary-grid-item-amount__secondary-label\">{{ secondaryLabel }}</div>\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryLabel: { default: null },\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"numeric\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-numeric\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"percentage\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-percentage\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}%\n        <template v-if=\"secondaryMetric\" #secondary> {{ secondaryMetric }}% </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"text\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-text\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n\n    import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  label: null,\n  title: null,\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import SummaryGridItem from '../summary-grid-item/summary-grid-item.vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n    defineProps({\n  copy: { default: undefined },\n  infoIconTooltipText: { default: null },\n  title: null,\n  fitContent: { type: Boolean, default: false },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","import { GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: GridLayoutColumnWidths;\n    row2?: GridLayoutColumnWidths;\n    row3?: GridLayoutColumnWidths;\n}\n\nexport type BentoSummaryGridLayout = () => {\n    isSummaryGridLayout: boolean;\n};\n\nexport interface BentoSummaryGridProps {\n    /**\n     * Sets the responsive columns widths values for 1 of the 3 rows.\n     */\n    columnWidth?: BentoSummaryGridColumnWidth;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n}\n"],"names":["__default__$6","slots","useSlots","hasSlot","useHasSlot","numberOfRows","slotRows","_b","_a","slotName","onMounted","registerComponentsInSummaryGrid","provide","SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO","toRef","props","__default__$5","trendDirection","secondaryTrendDirection","itemType","size","toRefs","hasSlashedZero","inject","ref","tagVariantColor","direction","trendVariant","computed","secondaryTrendVariant","typographyContentElement","typographyProps","computedStyles","conditionalClasses","withUnderline","__default__$4","__default__$3","__default__$2","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":"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"}
+{"version":3,"file":"summary-grid.types.CkUIw703.js","sources":["../../src/components/summary-grid/summary-grid.vue","../../src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue","../../src/components/summary-grid/summary-grid.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { onMounted, provide, toRef, useSlots } from 'vue';\n    import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal';\n    import { useHasSlot } from '@/composables';\n    import {\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        SUMMARY_GRID_SLASHED_ZERO,\n    } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = defineProps({\n  columnWidth: { default: null },\n  slashedZero: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    let numberOfRows = 1;\n    if (slots) {\n        const slotRows = Object.keys(slots)\n            ?.filter(slotName => slotName.includes('cell-'))\n            ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n        numberOfRows = Math.max(...slotRows);\n    }\n\n    onMounted(() => {\n        if (numberOfRows > 3) {\n            throw new Error(\n                'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n            );\n        }\n    });\n\n    const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => {\n        const isSummaryGridLayout = true;\n        return { isSummaryGridLayout };\n    };\n\n    provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid);\n    provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","<template>\n    <div class=\"b-summary-grid-item\" :class=\"conditionalClasses\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography class=\"b-summary-grid-item__title\" el=\"span\" variant=\"body\">\n                <bento-dashed-underline\n                    v-if=\"withUnderline\"\n                    :tooltip-text=\"underlineTooltipText\"\n                    :popover-size=\"underlinePopoverSize\"\n                >\n                    {{ title }}\n                    <template v-if=\"hasSlot('dashed-underline')\" #popover-content>\n                        <slot name=\"dashed-underline\"></slot>\n                    </template>\n                </bento-dashed-underline>\n                <template v-else>\n                    {{ title }}\n                </template>\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    tooltip-position=\"top\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                />\n            </div>\n        </div>\n        <bento-typography\n            data-testid=\"summary-grid-item-content-typography\"\n            class=\"b-summary-grid-item__title\"\n            v-bind=\"typographyProps\"\n            el=\"span\"\n        >\n            <slot />\n            <bento-tag\n                v-if=\"trend && itemType !== 'text'\"\n                :variant=\"trendVariant\"\n                :label=\"trend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n        <bento-typography\n            v-if=\"hasSlot('secondary')\"\n            class=\"b-summary-grid-item__title\"\n            data-testid=\"summary-grid-item-secondary-metric-typography\"\n            el=\"span\"\n            variant=\"caption\"\n            stronger\n        >\n            <slot name=\"secondary\" />\n            <bento-tag\n                v-if=\"secondaryTrend\"\n                :variant=\"secondaryTrendVariant\"\n                :label=\"secondaryTrend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, toRefs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDashedUnderline } from '@/components/dashed-underline';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys';\n    import type { BentoSummaryGridItemTrendDirection } from '@/components/summary-grid/summary-grid.types';\n    import type { BentoSummaryGridItemProps } from './summary-grid-item.types';\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  itemType: { default: 'custom' }\n});\n\n    const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n    const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false));\n\n    const tagVariantColor = (direction: `${BentoSummaryGridItemTrendDirection}`): `${BentoTagVariant}` => {\n        switch (direction) {\n            case 'positive':\n                return 'green';\n            case 'negative':\n                return 'red';\n            default:\n                return 'blue';\n        }\n    };\n\n    // TODO implement plus or minus symbol logic\n    const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n    const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n    const typographyContentElement = computed<`${BentoTypographyVariant}`>(() => {\n        if (size.value === 'small') {\n            return 'body';\n        }\n        if (itemType.value !== 'text') {\n            return 'title';\n        }\n\n        return null;\n    });\n\n    const typographyProps = computed(() => ({\n        medium: size.value === 'large',\n        strongest: size.value === 'small',\n        wide: size.value === 'small',\n        variant: typographyContentElement.value,\n    }));\n\n    const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n    const conditionalClasses = computed(() => ({ 'b-summary-grid-item--slashed-zero': hasSlashedZero.value }));\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const withUnderline = computed(() => props.underlineTooltipText || hasSlot('dashed-underline'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"amount\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-amount\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <div v-if=\"secondaryLabel\" class=\"b-summary-grid-item-amount__secondary-label\">{{ secondaryLabel }}</div>\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryLabel: { default: null },\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"numeric\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-numeric\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"percentage\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-percentage\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}%\n        <template v-if=\"secondaryMetric\" #secondary> {{ secondaryMetric }}% </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"text\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-text\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n\n    import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types';\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  label: null,\n  title: null,\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import SummaryGridItem from '../summary-grid-item/summary-grid-item.vue';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n    defineProps({\n  copy: { default: undefined },\n  infoIconTooltipText: { default: null },\n  title: null,\n  fitContent: { type: Boolean, default: false },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","import { GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: GridLayoutColumnWidths;\n    row2?: GridLayoutColumnWidths;\n    row3?: GridLayoutColumnWidths;\n}\n\nexport type BentoSummaryGridLayout = () => {\n    isSummaryGridLayout: boolean;\n};\n\nexport interface BentoSummaryGridProps {\n    /**\n     * Sets the responsive columns widths values for 1 of the 3 rows.\n     */\n    columnWidth?: BentoSummaryGridColumnWidth;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n}\n"],"names":["__default__$6","slots","useSlots","hasSlot","useHasSlot","numberOfRows","slotRows","_b","_a","slotName","onMounted","registerComponentsInSummaryGrid","provide","SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO","toRef","props","__default__$5","trendDirection","secondaryTrendDirection","itemType","size","toRefs","hasSlashedZero","inject","ref","tagVariantColor","direction","trendVariant","computed","secondaryTrendVariant","typographyContentElement","typographyProps","computedStyles","conditionalClasses","withUnderline","__default__$4","__default__$3","__default__$2","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":"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"}

package/dist/chunks/{tag.BaSi2GVV.js → tag.CGkclKVL.js}

@@ -2,7 +2,7 @@ import { defineComponent as p, useSlots as m, computed as r } from "vue";
 import { B as d } from "./typography.J1v_SPG3.js";
 import { u as _ } from "./aria-label.CaUURpnB.js";
 import { g as n } from "./get-slot-text.BQS5Olxm.js";
-import { B as f } from "./tooltip.DyZIyMZN.js";
+import { B as f } from "./tooltip.wQsyAwkC.js";
 import { n as v } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/tag.css";
 var i = /* @__PURE__ */ ((e) => (e.GREY = "grey", e.BLUE = "blue", e.GREEN = "green", e.ORANGE = "orange", e.RED = "red", e.WHITE = "white", e))(i || {});
@@ -41,4 +41,4 @@ export {
   F as B,
   i as a
 };
-//# sourceMappingURL=tag.BaSi2GVV.js.map
+//# sourceMappingURL=tag.CGkclKVL.js.map

package/dist/chunks/{tag.BaSi2GVV.js.map → tag.CGkclKVL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tag.BaSi2GVV.js","sources":["../../../core/src/components/tag/tag.types.ts","../../src/components/tag/tag.vue"],"sourcesContent":["export interface BentoTagProps {\n    /**\n     * The label text content of the Tag.\n     */\n    label?: string;\n\n    /**\n     * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n     */\n    truncate?: number;\n\n    /**\n     * The variant variant of tag\n     */\n    variant?: BentoTagVariant | `${BentoTagVariant}`;\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        data-testid=\"tag\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n    >\n        <bento-typography class=\"b-tag__label\" el=\"span\" variant=\"caption\" stronger>\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    // Use relative paths otherwise the interface won't be correctly detected\n    // TODO: Use alias once the support is added to work with the betterDefine macro\n    import { BentoTagProps, BentoTagVariant } from '../../../../core/src/components/tag/tag.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    const props = defineProps({\n  label: { default: null },\n  truncate: { default: null },\n  variant: { default: BentoTagVariant.GREY }\n});\n\n    const slots = useSlots();\n\n    const computedAriaLabel = useAriaLabel({\n        label: props.label || getSlotText(slots)('default'),\n        defaultFallback: 'tag',\n    });\n\n    const tagConditionalClasses = computed(() => ({\n        [`b-tag--${props.variant}`]: props.variant,\n    }));\n\n    const textFromSlot = computed(() => props.label ?? getSlotText(slots)('default') ?? 'tag');\n    const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n    const formattedText = computed(() => {\n        if (!props.truncate) {\n            return textFromSlot.value;\n        }\n\n        return shouldShowTooltip.value ? `${textFromSlot.value.slice(0, props.truncate)}...` : textFromSlot.value;\n    });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        name: 'bento-tag',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/tag/tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","__default__","slots","useSlots","computedAriaLabel","useAriaLabel","props","getSlotText","tagConditionalClasses","computed","textFromSlot","shouldShowTooltip","formattedText"],"mappings":";;;;;;;AAoBY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;ACkCR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1BAC,IAAAC,EAAA,GAEAC,IAAAC,EAAA;AAAA,MAAuC,OAAAC,EAAA,SAAAC,EAAAL,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBM,IAAAC,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAH,EAAA,OAAA,EAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCI,IAAAD,EAAA,MAAAH,EAAA,SAAAC,EAAAL,CAAA,EAAA,SAAA,KAAA,KAAA,GACAS,IAAAF,EAAA,MAAAH,EAAA,YAAAI,EAAA,MAAA,SAAAJ,EAAA,QAAA,GAEAM,IAAAH,EAAA,MACIH,EAAA,YAIAK,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAJ,EAAA,QAAA,CAAA,QAHII,EAAA,KAGgG;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tag.CGkclKVL.js","sources":["../../../core/src/components/tag/tag.types.ts","../../src/components/tag/tag.vue"],"sourcesContent":["export interface BentoTagProps {\n    /**\n     * The label text content of the Tag.\n     */\n    label?: string;\n\n    /**\n     * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n     */\n    truncate?: number;\n\n    /**\n     * The variant variant of tag\n     */\n    variant?: BentoTagVariant | `${BentoTagVariant}`;\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        data-testid=\"tag\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n    >\n        <bento-typography class=\"b-tag__label\" el=\"span\" variant=\"caption\" stronger>\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    // Use relative paths otherwise the interface won't be correctly detected\n    // TODO: Use alias once the support is added to work with the betterDefine macro\n    import { BentoTagProps, BentoTagVariant } from '../../../../core/src/components/tag/tag.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    const props = defineProps({\n  label: { default: null },\n  truncate: { default: null },\n  variant: { default: BentoTagVariant.GREY }\n});\n\n    const slots = useSlots();\n\n    const computedAriaLabel = useAriaLabel({\n        label: props.label || getSlotText(slots)('default'),\n        defaultFallback: 'tag',\n    });\n\n    const tagConditionalClasses = computed(() => ({\n        [`b-tag--${props.variant}`]: props.variant,\n    }));\n\n    const textFromSlot = computed(() => props.label ?? getSlotText(slots)('default') ?? 'tag');\n    const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n    const formattedText = computed(() => {\n        if (!props.truncate) {\n            return textFromSlot.value;\n        }\n\n        return shouldShowTooltip.value ? `${textFromSlot.value.slice(0, props.truncate)}...` : textFromSlot.value;\n    });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        name: 'bento-tag',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/tag/tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","__default__","slots","useSlots","computedAriaLabel","useAriaLabel","props","getSlotText","tagConditionalClasses","computed","textFromSlot","shouldShowTooltip","formattedText"],"mappings":";;;;;;;AAoBY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;ACkCR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1BAC,IAAAC,EAAA,GAEAC,IAAAC,EAAA;AAAA,MAAuC,OAAAC,EAAA,SAAAC,EAAAL,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBM,IAAAC,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAH,EAAA,OAAA,EAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCI,IAAAD,EAAA,MAAAH,EAAA,SAAAC,EAAAL,CAAA,EAAA,SAAA,KAAA,KAAA,GACAS,IAAAF,EAAA,MAAAH,EAAA,YAAAI,EAAA,MAAA,SAAAJ,EAAA,QAAA,GAEAM,IAAAH,EAAA,MACIH,EAAA,YAIAK,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAJ,EAAA,QAAA,CAAA,QAHII,EAAA,KAGgG;;;;;;;;;;;;;;;;"}

package/dist/chunks/{textarea.D7M7Jerq.js → textarea.BPeDUAPL.js}

@@ -7,7 +7,7 @@ import { o as F } from "./resize.Bqks3WUm.js";
 import { u as ue } from "./aria-label.CaUURpnB.js";
 import { u as ce } from "./i18n.BQkEbtPM.js";
 import { u as de } from "./use-form-layout-loading.D3lALhtC.js";
-import { F as pe, E as fe } from "./error-message.BeExHHgv.js";
+import { F as pe, E as fe } from "./error-message.1Em7Lis3.js";
 import { n as be } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/textarea.css";
 var A = /* @__PURE__ */ ((t) => (t.HORIZONTAL = "horizontal", t.VERTICAL = "vertical", t.BOTH = "both", t.NONE = "none", t))(A || {}), f = /* @__PURE__ */ ((t) => (t.CLEARABLE = "clearable", t.DISABLED = "disabled", t.ERROR = "error", t.READONLY = "readonly", t))(f || {}), i = /* @__PURE__ */ ((t) => (t.BLUR = "blur", t.CHANGE = "change", t.CLEAR = "clear", t.ESCAPE_PRESSED = "escape-pressed", t.FOCUS = "focus", t.INPUT = "input", t.KEYDOWN = "keydown", t.KEYUP = "keyup", t))(i || {});
@@ -197,4 +197,4 @@ const Pe = ge.exports;
 export {
   Pe as B
 };
-//# sourceMappingURL=textarea.D7M7Jerq.js.map
+//# sourceMappingURL=textarea.BPeDUAPL.js.map

package/dist/chunks/{textarea.D7M7Jerq.js.map → textarea.BPeDUAPL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea.D7M7Jerq.js","sources":["../../src/components/textarea/textarea.types.ts","../../src/components/textarea/textarea.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTextareaResizeOption {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n    BOTH = 'both',\n    NONE = 'none',\n}\n\nexport enum BentoTextareaStateClass {\n    CLEARABLE = 'clearable',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum BentoTextareaEvent {\n    BLUR = 'blur',\n    CHANGE = 'change',\n    CLEAR = 'clear',\n    ESCAPE_PRESSED = 'escape-pressed',\n    FOCUS = 'focus',\n    INPUT = 'input',\n    KEYDOWN = 'keydown',\n    KEYUP = 'keyup',\n}\n","<template>\n    <div ref=\"textareaComponent\" class=\"b-textarea\" :class=\"conditionalClasses\">\n        <div :style=\"{ width: textareaWrapperWidth }\">\n            <div class=\"b-textarea__label-box\" :class=\"conditionalClassesLabelBox\">\n                <field-label\n                    v-if=\"label\"\n                    :for=\"textareaId\"\n                    :label=\"label\"\n                    :tooltip-text=\"tooltipText\"\n                    :optional=\"optional\"\n                    :required=\"required\"\n                />\n                <bento-typography\n                    v-if=\"characterLimit\"\n                    el=\"span\"\n                    class=\"b-textarea__label-item\"\n                    :class=\"conditionalClassesLabelItem\"\n                >\n                    {{ counter }}\n                </bento-typography>\n            </div>\n            <bento-typography el=\"div\" class=\"b-textarea__input-box\" :aria-disabled=\"disabled\">\n                <textarea\n                    :id=\"textareaId\"\n                    ref=\"textareaElement\"\n                    :value=\"textareaValue\"\n                    class=\"b-textarea__input\"\n                    :class=\"conditionalClassesInput\"\n                    :aria-label=\"computedAriaLabel\"\n                    :aria-invalid=\"invalidInput\"\n                    :readonly=\"isReadOnly\"\n                    :disabled=\"disabled\"\n                    :placeholder=\"placeholder\"\n                    :style=\"{ resize: resizable, height: textareaHeight }\"\n                    @blur=\"onBlur\"\n                    @change=\"onChange\"\n                    @focus=\"onFocus\"\n                    @input=\"onInput\"\n                    @keydown.esc=\"onPressEscape\"\n                    @keydown=\"onKeyDown\"\n                    @keyup=\"onKeyUp\"\n                >\n                </textarea>\n\n                <div v-if=\"showClearButton\" class=\"b-textarea__clear-button\">\n                    <bento-button\n                        variant=\"tertiary\"\n                        :disabled=\"disabled\"\n                        @click=\"onClear\"\n                        @keypress.enter=\"onClear\"\n                        @keyup.space=\"onClear\"\n                    >\n                        <template #iconLeft>\n                            <cross-circle-fill-small-icon :svg-title=\"t('clearText')\" />\n                        </template>\n                    </bento-button>\n                </div>\n            </bento-typography>\n\n            <error-message v-if=\"isOverCharacterLimit\" :error-message=\"counterErrorText\" />\n\n            <error-message v-if=\"errorMessage\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"description\" class=\"b-textarea__description\" el=\"span\">\n                {{ description }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, onMounted, onUnmounted, PropType, ref, toRef, toRefs, useAttrs, watch } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n\n    // Utils\n    import { generateUid } from '@/core/utils/ts';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Composables\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    // Types\n    import { BentoTextareaEvent, BentoTextareaResizeOption, BentoTextareaStateClass } from './textarea.types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n\n    const props = defineProps({\n        /**\n         * Text that labels an the input element\n         */\n        ariaLabel: { type: String, default: undefined },\n\n        /**\n         * Text that shows number of characters in textarea\n         */\n        characterLimit: { type: Number, default: undefined },\n\n        /**\n         * Text displayed as the help text of the textarea\n         */\n        description: { type: String, default: '' },\n\n        /**\n         * Disables the possibility of changing value in the textarea\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * If set to true, shows a button to clear all the text\n         */\n        clearable: { type: Boolean, default: false },\n\n        /**\n         * Adds error text\n         */\n        errorMessage: { type: String, default: '' },\n\n        /**\n         * Sets the height of the textarea, e.g 200px OR 20vh\n         */\n        height: { type: String, default: null },\n\n        /**\n         * Text displayed as the label of the textarea\n         */\n        label: { type: String, default: '' },\n\n        /**\n         * Highlights the textarea is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Text displayed as the placeholder of the textarea\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Set the textarea to read only state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Indicates the possibility of resize the textarea\n         */\n        resizable: {\n            type: String as PropType<BentoTextareaResizeOption | `${BentoTextareaResizeOption}`>,\n            default: BentoTextareaResizeOption.BOTH,\n            validator: (value: BentoTextareaResizeOption) => Object.values(BentoTextareaResizeOption).includes(value),\n        },\n\n        /**\n         * Highlights the textarea is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * Text displayed as the value of the textarea\n         */\n        value: { type: String, default: '' },\n    });\n\n    const emit = defineEmits([]);\n\n    const { height } = toRefs(props);\n\n    const textareaId = generateUid('textarea');\n    const textareaElement = ref<HTMLTextAreaElement>(null);\n    const textareaComponent = ref<HTMLDivElement>(null);\n    const textareaValue = ref(props.value);\n    const defaultTextareaHeight = 44;\n    const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`);\n    const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description\n    let textareaElementObserver: ResizeObserver | null = null;\n    let textareaComponentObserver: ResizeObserver | null = null;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const counter = computed(() => `${textareaValue.value.length} / ${props.characterLimit}`);\n    const isOverCharacterLimit = computed(\n        () => props.characterLimit && textareaValue.value.length > props.characterLimit\n    );\n\n    const calculateHeight = () => {\n        const borderWidth = 3;\n        if (textareaElement.value && textareaElement.value.scrollHeight > defaultTextareaHeight) {\n            textareaHeight.value = `${textareaElement.value.scrollHeight + borderWidth}px`;\n        }\n    };\n\n    watch(height, () => {\n        if (!height.value) {\n            calculateHeight();\n        } else {\n            textareaHeight.value = height.value;\n        }\n    });\n\n    watch(\n        () => props.value,\n        () => {\n            textareaValue.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        () => textareaValue.value,\n        async () => {\n            // Auto-adjust height if the text area is overflowing\n            if (\n                !height.value &&\n                (!textareaElement.value || textareaElement.value?.scrollHeight > textareaElement.value?.clientHeight)\n            ) {\n                // Hack to make the textarea calculate its height properly\n                // Set the textarea back to the original value before calculating the height\n                textareaHeight.value = `${defaultTextareaHeight}px`;\n                if (!textareaValue.value) {\n                    return;\n                }\n\n                await nextTick();\n                calculateHeight();\n            }\n        },\n        { immediate: true }\n    );\n\n    const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value);\n\n    const conditionalClasses = computed(() => ({\n        [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled,\n    }));\n\n    const conditionalClassesInput = computed(() => ({\n        [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable,\n        [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value,\n        [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n        [`b-textarea__input--dynamic-height`]: !height.value,\n    }));\n\n    const conditionalClassesLabelBox = computed(() => ({\n        [`b-textarea__label-box--no-label`]: !props.label,\n    }));\n\n    const conditionalClassesLabelItem = computed(() => ({\n        [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value,\n    }));\n\n    const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit }));\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, label } = 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        defaultFallback: label,\n    });\n\n    const showClearButton = computed(\n        () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value\n    );\n\n    const onClear = () => {\n        textareaValue.value = '';\n        emit(BentoTextareaEvent.CLEAR);\n        emit(BentoTextareaEvent.INPUT, '');\n    };\n\n    const onInput = (event: InputEvent) => {\n        event.stopImmediatePropagation();\n\n        if (!props.disabled && !isReadOnly.value) {\n            textareaValue.value = (event.target as HTMLInputElement).value;\n            /**\n             * Triggered when input value is changed\n             *\n             * @event input\n             * @property {String} inputValue - the updated textarea value\n             */\n            emit(BentoTextareaEvent.INPUT, textareaValue.value);\n        }\n    };\n\n    const onBlur = () => {\n        textareaElement.value.scrollTop = 0;\n        emit(BentoTextareaEvent.BLUR);\n    };\n\n    const onFocus = () => {\n        textareaElement.value.focus();\n        emit(BentoTextareaEvent.FOCUS);\n    };\n\n    const onChange = () => {\n        emit(BentoTextareaEvent.CHANGE);\n    };\n\n    const onPressEscape = () => {\n        emit(BentoTextareaEvent.ESCAPE_PRESSED);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYDOWN, event);\n    };\n\n    const onKeyUp = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYUP, event);\n    };\n\n    /**\n     * Updates the textarea width depending if the container or the user update its size.\n     * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element.\n     */\n    const resizeTextareaWrapper = (isTextareaElement = false) => {\n        // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`.\n        const textareaStyleWidth = textareaElement.value.style.width;\n\n        // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea\n        if (textareaElement.value.style.height) {\n            textareaHeight.value = textareaElement.value.style.height;\n        }\n\n        // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet\n        // The component wrapper will handle the resizing logic instead\n        if (isTextareaElement && !textareaStyleWidth) {\n            return;\n        }\n\n        // Width of the whole bento-textarea component\n        const textareaComponentWidth = textareaComponent?.value?.offsetWidth;\n\n        // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container\n        if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) {\n            textareaWrapperWidth.value = '100%';\n        } else {\n            // Else the wrapper should always be as wide as the textarea element itself\n            textareaWrapperWidth.value = textareaStyleWidth;\n        }\n    };\n\n    const focus = () => {\n        textareaElement.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n\n    onMounted(() => {\n        textareaElementObserver = observeSizeOfElement(textareaElement.value, () => {\n            resizeTextareaWrapper(true);\n        });\n\n        textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => {\n            resizeTextareaWrapper();\n        });\n\n        if (!height.value) {\n            calculateHeight();\n        }\n    });\n\n    onUnmounted(() => {\n        textareaElementObserver?.disconnect();\n        textareaComponentObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n        name: 'bento-textarea',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaResizeOption","BentoTextareaResizeOption2","BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","__default__","messages","attrs","useAttrs","height","toRefs","props","textareaId","generateUid","textareaElement","ref","textareaComponent","textareaValue","defaultTextareaHeight","textareaHeight","textareaWrapperWidth","textareaElementObserver","textareaComponentObserver","t","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","counter","computed","isOverCharacterLimit","calculateHeight","watch","_a","_b","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","emit","onInput","event","onBlur","onFocus","onChange","onPressEscape","onKeyDown","onKeyUp","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","focus","expose","onMounted","observeSizeOfElement","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"textarea.BPeDUAPL.js","sources":["../../src/components/textarea/textarea.types.ts","../../src/components/textarea/textarea.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTextareaResizeOption {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n    BOTH = 'both',\n    NONE = 'none',\n}\n\nexport enum BentoTextareaStateClass {\n    CLEARABLE = 'clearable',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum BentoTextareaEvent {\n    BLUR = 'blur',\n    CHANGE = 'change',\n    CLEAR = 'clear',\n    ESCAPE_PRESSED = 'escape-pressed',\n    FOCUS = 'focus',\n    INPUT = 'input',\n    KEYDOWN = 'keydown',\n    KEYUP = 'keyup',\n}\n","<template>\n    <div ref=\"textareaComponent\" class=\"b-textarea\" :class=\"conditionalClasses\">\n        <div :style=\"{ width: textareaWrapperWidth }\">\n            <div class=\"b-textarea__label-box\" :class=\"conditionalClassesLabelBox\">\n                <field-label\n                    v-if=\"label\"\n                    :for=\"textareaId\"\n                    :label=\"label\"\n                    :tooltip-text=\"tooltipText\"\n                    :optional=\"optional\"\n                    :required=\"required\"\n                />\n                <bento-typography\n                    v-if=\"characterLimit\"\n                    el=\"span\"\n                    class=\"b-textarea__label-item\"\n                    :class=\"conditionalClassesLabelItem\"\n                >\n                    {{ counter }}\n                </bento-typography>\n            </div>\n            <bento-typography el=\"div\" class=\"b-textarea__input-box\" :aria-disabled=\"disabled\">\n                <textarea\n                    :id=\"textareaId\"\n                    ref=\"textareaElement\"\n                    :value=\"textareaValue\"\n                    class=\"b-textarea__input\"\n                    :class=\"conditionalClassesInput\"\n                    :aria-label=\"computedAriaLabel\"\n                    :aria-invalid=\"invalidInput\"\n                    :readonly=\"isReadOnly\"\n                    :disabled=\"disabled\"\n                    :placeholder=\"placeholder\"\n                    :style=\"{ resize: resizable, height: textareaHeight }\"\n                    @blur=\"onBlur\"\n                    @change=\"onChange\"\n                    @focus=\"onFocus\"\n                    @input=\"onInput\"\n                    @keydown.esc=\"onPressEscape\"\n                    @keydown=\"onKeyDown\"\n                    @keyup=\"onKeyUp\"\n                >\n                </textarea>\n\n                <div v-if=\"showClearButton\" class=\"b-textarea__clear-button\">\n                    <bento-button\n                        variant=\"tertiary\"\n                        :disabled=\"disabled\"\n                        @click=\"onClear\"\n                        @keypress.enter=\"onClear\"\n                        @keyup.space=\"onClear\"\n                    >\n                        <template #iconLeft>\n                            <cross-circle-fill-small-icon :svg-title=\"t('clearText')\" />\n                        </template>\n                    </bento-button>\n                </div>\n            </bento-typography>\n\n            <error-message v-if=\"isOverCharacterLimit\" :error-message=\"counterErrorText\" />\n\n            <error-message v-if=\"errorMessage\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"description\" class=\"b-textarea__description\" el=\"span\">\n                {{ description }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, onMounted, onUnmounted, PropType, ref, toRef, toRefs, useAttrs, watch } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n\n    // Utils\n    import { generateUid } from '@/core/utils/ts';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Composables\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    // Types\n    import { BentoTextareaEvent, BentoTextareaResizeOption, BentoTextareaStateClass } from './textarea.types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n\n    const props = defineProps({\n        /**\n         * Text that labels an the input element\n         */\n        ariaLabel: { type: String, default: undefined },\n\n        /**\n         * Text that shows number of characters in textarea\n         */\n        characterLimit: { type: Number, default: undefined },\n\n        /**\n         * Text displayed as the help text of the textarea\n         */\n        description: { type: String, default: '' },\n\n        /**\n         * Disables the possibility of changing value in the textarea\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * If set to true, shows a button to clear all the text\n         */\n        clearable: { type: Boolean, default: false },\n\n        /**\n         * Adds error text\n         */\n        errorMessage: { type: String, default: '' },\n\n        /**\n         * Sets the height of the textarea, e.g 200px OR 20vh\n         */\n        height: { type: String, default: null },\n\n        /**\n         * Text displayed as the label of the textarea\n         */\n        label: { type: String, default: '' },\n\n        /**\n         * Highlights the textarea is optional.\n         */\n        optional: { type: Boolean, default: false },\n\n        /**\n         * Text displayed as the placeholder of the textarea\n         */\n        placeholder: { type: String, default: '' },\n\n        /**\n         * Set the textarea to read only state.\n         */\n        readonly: { type: Boolean, default: false },\n\n        /**\n         * Indicates the possibility of resize the textarea\n         */\n        resizable: {\n            type: String as PropType<BentoTextareaResizeOption | `${BentoTextareaResizeOption}`>,\n            default: BentoTextareaResizeOption.BOTH,\n            validator: (value: BentoTextareaResizeOption) => Object.values(BentoTextareaResizeOption).includes(value),\n        },\n\n        /**\n         * Highlights the textarea is required.\n         */\n        required: { type: Boolean, default: false },\n\n        /**\n         * Adds a info icon next to the label to display the passed tooltip message.\n         */\n        tooltipText: { type: String, default: null },\n\n        /**\n         * Text displayed as the value of the textarea\n         */\n        value: { type: String, default: '' },\n    });\n\n    const emit = defineEmits([]);\n\n    const { height } = toRefs(props);\n\n    const textareaId = generateUid('textarea');\n    const textareaElement = ref<HTMLTextAreaElement>(null);\n    const textareaComponent = ref<HTMLDivElement>(null);\n    const textareaValue = ref(props.value);\n    const defaultTextareaHeight = 44;\n    const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`);\n    const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description\n    let textareaElementObserver: ResizeObserver | null = null;\n    let textareaComponentObserver: ResizeObserver | null = null;\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const counter = computed(() => `${textareaValue.value.length} / ${props.characterLimit}`);\n    const isOverCharacterLimit = computed(\n        () => props.characterLimit && textareaValue.value.length > props.characterLimit\n    );\n\n    const calculateHeight = () => {\n        const borderWidth = 3;\n        if (textareaElement.value && textareaElement.value.scrollHeight > defaultTextareaHeight) {\n            textareaHeight.value = `${textareaElement.value.scrollHeight + borderWidth}px`;\n        }\n    };\n\n    watch(height, () => {\n        if (!height.value) {\n            calculateHeight();\n        } else {\n            textareaHeight.value = height.value;\n        }\n    });\n\n    watch(\n        () => props.value,\n        () => {\n            textareaValue.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        () => textareaValue.value,\n        async () => {\n            // Auto-adjust height if the text area is overflowing\n            if (\n                !height.value &&\n                (!textareaElement.value || textareaElement.value?.scrollHeight > textareaElement.value?.clientHeight)\n            ) {\n                // Hack to make the textarea calculate its height properly\n                // Set the textarea back to the original value before calculating the height\n                textareaHeight.value = `${defaultTextareaHeight}px`;\n                if (!textareaValue.value) {\n                    return;\n                }\n\n                await nextTick();\n                calculateHeight();\n            }\n        },\n        { immediate: true }\n    );\n\n    const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value);\n\n    const conditionalClasses = computed(() => ({\n        [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled,\n    }));\n\n    const conditionalClassesInput = computed(() => ({\n        [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable,\n        [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value,\n        [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n        [`b-textarea__input--dynamic-height`]: !height.value,\n    }));\n\n    const conditionalClassesLabelBox = computed(() => ({\n        [`b-textarea__label-box--no-label`]: !props.label,\n    }));\n\n    const conditionalClassesLabelItem = computed(() => ({\n        [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value,\n    }));\n\n    const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit }));\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, label } = 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        defaultFallback: label,\n    });\n\n    const showClearButton = computed(\n        () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value\n    );\n\n    const onClear = () => {\n        textareaValue.value = '';\n        emit(BentoTextareaEvent.CLEAR);\n        emit(BentoTextareaEvent.INPUT, '');\n    };\n\n    const onInput = (event: InputEvent) => {\n        event.stopImmediatePropagation();\n\n        if (!props.disabled && !isReadOnly.value) {\n            textareaValue.value = (event.target as HTMLInputElement).value;\n            /**\n             * Triggered when input value is changed\n             *\n             * @event input\n             * @property {String} inputValue - the updated textarea value\n             */\n            emit(BentoTextareaEvent.INPUT, textareaValue.value);\n        }\n    };\n\n    const onBlur = () => {\n        textareaElement.value.scrollTop = 0;\n        emit(BentoTextareaEvent.BLUR);\n    };\n\n    const onFocus = () => {\n        textareaElement.value.focus();\n        emit(BentoTextareaEvent.FOCUS);\n    };\n\n    const onChange = () => {\n        emit(BentoTextareaEvent.CHANGE);\n    };\n\n    const onPressEscape = () => {\n        emit(BentoTextareaEvent.ESCAPE_PRESSED);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYDOWN, event);\n    };\n\n    const onKeyUp = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYUP, event);\n    };\n\n    /**\n     * Updates the textarea width depending if the container or the user update its size.\n     * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element.\n     */\n    const resizeTextareaWrapper = (isTextareaElement = false) => {\n        // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`.\n        const textareaStyleWidth = textareaElement.value.style.width;\n\n        // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea\n        if (textareaElement.value.style.height) {\n            textareaHeight.value = textareaElement.value.style.height;\n        }\n\n        // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet\n        // The component wrapper will handle the resizing logic instead\n        if (isTextareaElement && !textareaStyleWidth) {\n            return;\n        }\n\n        // Width of the whole bento-textarea component\n        const textareaComponentWidth = textareaComponent?.value?.offsetWidth;\n\n        // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container\n        if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) {\n            textareaWrapperWidth.value = '100%';\n        } else {\n            // Else the wrapper should always be as wide as the textarea element itself\n            textareaWrapperWidth.value = textareaStyleWidth;\n        }\n    };\n\n    const focus = () => {\n        textareaElement.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n\n    onMounted(() => {\n        textareaElementObserver = observeSizeOfElement(textareaElement.value, () => {\n            resizeTextareaWrapper(true);\n        });\n\n        textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => {\n            resizeTextareaWrapper();\n        });\n\n        if (!height.value) {\n            calculateHeight();\n        }\n    });\n\n    onUnmounted(() => {\n        textareaElementObserver?.disconnect();\n        textareaComponentObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        i18n: { messages },\n        name: 'bento-textarea',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaResizeOption","BentoTextareaResizeOption2","BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","__default__","messages","attrs","useAttrs","height","toRefs","props","textareaId","generateUid","textareaElement","ref","textareaComponent","textareaValue","defaultTextareaHeight","textareaHeight","textareaWrapperWidth","textareaElementObserver","textareaComponentObserver","t","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","counter","computed","isOverCharacterLimit","calculateHeight","watch","_a","_b","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","emit","onInput","event","onBlur","onFocus","onChange","onPressEscape","onKeyDown","onKeyUp","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","focus","expose","onMounted","observeSizeOfElement","onUnmounted"],"mappings":"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"}

package/dist/chunks/{timeline-item.njO0X8KL.js → timeline-item.CS9ZDOsm.js}

@@ -1,14 +1,14 @@
 import { defineComponent as P, computed as r, ref as T, toRefs as Z, provide as R, nextTick as G, inject as D, onUnmounted as Q } from "vue";
 import { B as z } from "./button.hF-nD1Og.js";
-import { B as X } from "./textarea.D7M7Jerq.js";
+import { B as X } from "./textarea.BPeDUAPL.js";
 import { u as H } from "./i18n.BQkEbtPM.js";
 import { B as ee } from "./button-actions._OIvTdKt.js";
 import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as te } from "./date.dYFFEunA.js";
 import { B as ie } from "./link.CXy_LoFI.js";
-import { B as ae } from "./tag.BaSi2GVV.js";
+import { B as ae } from "./tag.CGkclKVL.js";
 import { B as se, d as ne } from "./typography.J1v_SPG3.js";
-import { a as oe, B as re, S as le } from "./structured-list-item.DKEwF8n7.js";
+import { a as oe, B as re, S as le } from "./structured-list-item.tox2Kcb6.js";
 /* empty css              */
 import { g as me } from "./generate-uid.NJ8tVoha.js";
 import { u as ce } from "./use-has-slot.C9lQZ6nz.js";
@@ -383,4 +383,4 @@ export {
   q as d,
   Ve as t
 };
-//# sourceMappingURL=timeline-item.njO0X8KL.js.map
+//# sourceMappingURL=timeline-item.CS9ZDOsm.js.map

package/dist/chunks/{timeline-item.njO0X8KL.js.map → timeline-item.CS9ZDOsm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"timeline-item.njO0X8KL.js","sources":["../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/formatDistanceStrict/index.js","../../src/components/timeline/timeline.types.ts","../../src/components/timeline/timeline.keys.ts","../../src/components/timeline/timeline.vue","../../../ui-assets/icons-16/dist/vue/square-small-fill.vue","../../src/components/timeline/components/timeline-item/timeline-item.vue"],"sourcesContent":["import getTimezoneOffsetInMilliseconds from \"../_lib/getTimezoneOffsetInMilliseconds/index.js\";\nimport compareAsc from \"../compareAsc/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport cloneObject from \"../_lib/cloneObject/index.js\";\nimport defaultLocale from \"../locale/en-US/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nvar MILLISECONDS_IN_MINUTE = 1000 * 60;\nvar MINUTES_IN_DAY = 60 * 24;\nvar MINUTES_IN_MONTH = MINUTES_IN_DAY * 30;\nvar MINUTES_IN_YEAR = MINUTES_IN_DAY * 365;\n/**\n * @name formatDistanceStrict\n * @category Common Helpers\n * @summary Return the distance between the given dates in words.\n *\n * @description\n * Return the distance between the given dates in words, using strict units.\n * This is like `formatDistance`, but does not use helpers like 'almost', 'over',\n * 'less than' and the like.\n *\n * | Distance between dates | Result              |\n * |------------------------|---------------------|\n * | 0 ... 59 secs          | [0..59] seconds     |\n * | 1 ... 59 mins          | [1..59] minutes     |\n * | 1 ... 23 hrs           | [1..23] hours       |\n * | 1 ... 29 days          | [1..29] days        |\n * | 1 ... 11 months        | [1..11] months      |\n * | 1 ... N years          | [1..N]  years       |\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * - The function was renamed from `distanceInWordsStrict` to `formatDistanceStrict`\n *   to make its name consistent with `format` and `formatRelative`.\n *\n * - The order of arguments is swapped to make the function\n *   consistent with `differenceIn...` functions.\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWordsStrict(\n *     new Date(2015, 0, 2),\n *     new Date(2014, 6, 2)\n *   ) //=> '6 months'\n *\n *   // v2.0.0 onward\n *\n *   formatDistanceStrict(\n *     new Date(2014, 6, 2),\n *     new Date(2015, 0, 2)\n *   ) //=> '6 months'\n *   ```\n *\n * - `partialMethod` option is renamed to `roundingMethod`.\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWordsStrict(\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     new Date(1986, 3, 4, 10, 33, 1),\n *     { partialMethod: 'ceil' }\n *   ) //=> '2 minutes'\n *\n *   // v2.0.0 onward\n *\n *   formatDistanceStrict(\n *     new Date(1986, 3, 4, 10, 33, 1),\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     { roundingMethod: 'ceil' }\n *   ) //=> '2 minutes'\n *   ```\n *\n * - If `roundingMethod` is not specified, it now defaults to `round` instead of `floor`.\n *\n * - `unit` option now accepts one of the strings:\n *   'second', 'minute', 'hour', 'day', 'month' or 'year' instead of 's', 'm', 'h', 'd', 'M' or 'Y'\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWordsStrict(\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     new Date(1986, 3, 4, 10, 33, 1),\n *     { unit: 'm' }\n *   )\n *\n *   // v2.0.0 onward\n *\n *   formatDistanceStrict(\n *     new Date(1986, 3, 4, 10, 33, 1),\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     { unit: 'minute' }\n *   )\n *   ```\n *\n * @param {Date|Number} date - the date\n * @param {Date|Number} baseDate - the date to compare with\n * @param {Object} [options] - an object with options.\n * @param {Boolean} [options.addSuffix=false] - result indicates if the second date is earlier or later than the first\n * @param {'second'|'minute'|'hour'|'day'|'month'|'year'} [options.unit] - if specified, will force a unit\n * @param {'floor'|'ceil'|'round'} [options.roundingMethod='round'] - which way to round partial units\n * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}\n * @returns {String} the distance in words\n * @throws {TypeError} 2 arguments required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `baseDate` must not be Invalid Date\n * @throws {RangeError} `options.roundingMethod` must be 'floor', 'ceil' or 'round'\n * @throws {RangeError} `options.unit` must be 'second', 'minute', 'hour', 'day', 'month' or 'year'\n * @throws {RangeError} `options.locale` must contain `formatDistance` property\n *\n * @example\n * // What is the distance between 2 July 2014 and 1 January 2015?\n * const result = formatDistanceStrict(new Date(2014, 6, 2), new Date(2015, 0, 2))\n * //=> '6 months'\n *\n * @example\n * // What is the distance between 1 January 2015 00:00:15\n * // and 1 January 2015 00:00:00?\n * const result = formatDistanceStrict(\n *   new Date(2015, 0, 1, 0, 0, 15),\n *   new Date(2015, 0, 1, 0, 0, 0)\n * )\n * //=> '15 seconds'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, with a suffix?\n * const result = formatDistanceStrict(new Date(2015, 0, 1), new Date(2016, 0, 1), {\n *   addSuffix: true\n * })\n * //=> '1 year ago'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, in minutes?\n * const result = formatDistanceStrict(new Date(2016, 0, 1), new Date(2015, 0, 1), {\n *   unit: 'minute'\n * })\n * //=> '525600 minutes'\n *\n * @example\n * // What is the distance from 1 January 2015\n * // to 28 January 2015, in months, rounded up?\n * const result = formatDistanceStrict(new Date(2015, 0, 28), new Date(2015, 0, 1), {\n *   unit: 'month',\n *   roundingMethod: 'ceil'\n * })\n * //=> '1 month'\n *\n * @example\n * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?\n * import { eoLocale } from 'date-fns/locale/eo'\n * const result = formatDistanceStrict(new Date(2016, 7, 1), new Date(2015, 0, 1), {\n *   locale: eoLocale\n * })\n * //=> '1 jaro'\n */\n\nexport default function formatDistanceStrict(dirtyDate, dirtyBaseDate) {\n  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n  requiredArgs(2, arguments);\n  var locale = options.locale || defaultLocale;\n\n  if (!locale.formatDistance) {\n    throw new RangeError('locale must contain localize.formatDistance property');\n  }\n\n  var comparison = compareAsc(dirtyDate, dirtyBaseDate);\n\n  if (isNaN(comparison)) {\n    throw new RangeError('Invalid time value');\n  }\n\n  var localizeOptions = cloneObject(options);\n  localizeOptions.addSuffix = Boolean(options.addSuffix);\n  localizeOptions.comparison = comparison;\n  var dateLeft;\n  var dateRight;\n\n  if (comparison > 0) {\n    dateLeft = toDate(dirtyBaseDate);\n    dateRight = toDate(dirtyDate);\n  } else {\n    dateLeft = toDate(dirtyDate);\n    dateRight = toDate(dirtyBaseDate);\n  }\n\n  var roundingMethod = options.roundingMethod == null ? 'round' : String(options.roundingMethod);\n  var roundingMethodFn;\n\n  if (roundingMethod === 'floor') {\n    roundingMethodFn = Math.floor;\n  } else if (roundingMethod === 'ceil') {\n    roundingMethodFn = Math.ceil;\n  } else if (roundingMethod === 'round') {\n    roundingMethodFn = Math.round;\n  } else {\n    throw new RangeError(\"roundingMethod must be 'floor', 'ceil' or 'round'\");\n  }\n\n  var milliseconds = dateRight.getTime() - dateLeft.getTime();\n  var minutes = milliseconds / MILLISECONDS_IN_MINUTE;\n  var timezoneOffset = getTimezoneOffsetInMilliseconds(dateRight) - getTimezoneOffsetInMilliseconds(dateLeft); // Use DST-normalized difference in minutes for years, months and days;\n  // use regular difference in minutes for hours, minutes and seconds.\n\n  var dstNormalizedMinutes = (milliseconds - timezoneOffset) / MILLISECONDS_IN_MINUTE;\n  var unit;\n\n  if (options.unit == null) {\n    if (minutes < 1) {\n      unit = 'second';\n    } else if (minutes < 60) {\n      unit = 'minute';\n    } else if (minutes < MINUTES_IN_DAY) {\n      unit = 'hour';\n    } else if (dstNormalizedMinutes < MINUTES_IN_MONTH) {\n      unit = 'day';\n    } else if (dstNormalizedMinutes < MINUTES_IN_YEAR) {\n      unit = 'month';\n    } else {\n      unit = 'year';\n    }\n  } else {\n    unit = String(options.unit);\n  } // 0 up to 60 seconds\n\n\n  if (unit === 'second') {\n    var seconds = roundingMethodFn(milliseconds / 1000);\n    return locale.formatDistance('xSeconds', seconds, localizeOptions); // 1 up to 60 mins\n  } else if (unit === 'minute') {\n    var roundedMinutes = roundingMethodFn(minutes);\n    return locale.formatDistance('xMinutes', roundedMinutes, localizeOptions); // 1 up to 24 hours\n  } else if (unit === 'hour') {\n    var hours = roundingMethodFn(minutes / 60);\n    return locale.formatDistance('xHours', hours, localizeOptions); // 1 up to 30 days\n  } else if (unit === 'day') {\n    var days = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_DAY);\n    return locale.formatDistance('xDays', days, localizeOptions); // 1 up to 12 months\n  } else if (unit === 'month') {\n    var months = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_MONTH);\n    return months === 12 && options.unit !== 'month' ? locale.formatDistance('xYears', 1, localizeOptions) : locale.formatDistance('xMonths', months, localizeOptions); // 1 year up to max Date\n  } else if (unit === 'year') {\n    var years = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_YEAR);\n    return locale.formatDistance('xYears', years, localizeOptions);\n  }\n\n  throw new RangeError(\"unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'\");\n}","import { BentoDateFormat } from '@/components/date/date.types';\nimport { BentoTag } from '@/components/tag';\nimport { Ref } from 'vue';\nimport type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n\nexport enum BentoTimelineShowMorePlacement {\n    BOTTOM = 'bottom',\n    AFTER_FIRST = 'after-first',\n    BEFORE_LAST = 'before-last',\n}\n\nexport interface BentoTimelineShowMoreObject {\n    limit: number;\n    placement?: BentoTimelineShowMorePlacement;\n}\n\nexport enum BentoTimelineGapUnit {\n    SECOND = 'second',\n    MINUTE = 'minute',\n    HOUR = 'hour',\n    DAY = 'day',\n    MONTH = 'month',\n    YEAR = 'year',\n}\n\nexport interface BentoTimelineGapObject {\n    amount: number;\n    unit: BentoTimelineGapUnit;\n}\n\n/**\n * @deprecated \"variant\" prop was deprecated. Use \"status\" modifier instead.\n */\nexport enum BentoTimelineItemVariant {\n    DEFAULT = 'SquareSmallIcon',\n    SUCCESS = 'CheckedCircleIcon',\n    CRITICAL = 'CrossCircleIcon',\n}\n\nexport enum BentoTimelineStatus {\n    BLACK = 'black',\n    BLUE = 'blue',\n    GREEN = 'green',\n    GREY = 'grey',\n    ORANGE = 'orange',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n\nexport interface BentoTimelineItemTitle extends RouterLinkProps {\n    /**\n     * Link label.\n     */\n    title: string;\n    /**\n     * Set the rendered link to a regular external anchor link.\n     */\n    external?: boolean;\n\n    /**\n     * Sets the target of the rendered link.\n     */\n    target?: string;\n\n    // This has been added to allow users to add HTML and Aria attribute\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    [name: string]: any;\n}\n\nexport interface BentoTimelineTimestamp {\n    date: Date | number;\n    format?: BentoDateFormat;\n    value?: string;\n}\n\nexport interface BentoTimelineDataListObject {\n    label: string;\n    value: string;\n}\n\nexport type BentoTimelineDataList = Array<BentoTimelineDataListObject>;\n\nexport type BentoTimelineTagProps = InstanceType<typeof BentoTag>['$props'];\n\nexport interface BentoTimelineEntry {\n    title?: string | BentoTimelineItemTitle;\n    description?: string;\n    date: Date | number;\n}\n\nexport type BentoTimelineRegisterEntry = (props: {\n    title?: string | BentoTimelineItemTitle;\n    description?: string;\n    date: Date | number;\n}) => { timelineEntries: Ref<BentoTimelineEntry[]>; index: number; unregisterTimelineEntry: () => void };\n\nexport interface BentoTimelineConfigData {\n    showAll: Ref<boolean>;\n    showMoreIndex: Ref<number>;\n    hiddenItems: Ref<number>;\n    visibleIndexes: Ref<number[]>;\n    timegapLimit: Ref<BentoTimelineGapObject>;\n}\n","export const TIMELINE_REGISTER_ENTRY_INJECTION_KEY = Symbol('timeline register entry injection key');\nexport const TIMELINE_CONFIG_INJECTION_KEY = Symbol('timeline config obj injection key');\n","<template>\n    <div class=\"b-timeline\">\n        <div v-if=\"addNote\" class=\"b-timeline__add-note-section\">\n            <bento-button\n                v-if=\"!showAddNoteTextArea\"\n                ref=\"addNoteButtonRef\"\n                variant=\"tertiary\"\n                @click=\"toggleAddNote\"\n                >{{ addNoteLabel }}</bento-button\n            >\n            <div v-if=\"showAddNoteTextArea\">\n                <bento-textarea\n                    ref=\"addNoteTextareaRef\"\n                    :label=\"addNoteLabel\"\n                    :character-limit=\"150\"\n                    resizable=\"vertical\"\n                    @input=\"updateNoteContent\"\n                />\n                <bento-button-actions\n                    :actions=\"[\n                        { title: addNoteLabel, event: addNoteToTimeline },\n                        { title: cancelLabel, event: toggleAddNote },\n                    ]\"\n                />\n            </div>\n        </div>\n        <ol class=\"b-timeline__items\">\n            <slot />\n        </ol>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, nextTick, PropType, provide, ref, Ref, toRefs } from 'vue';\n    import { BentoButton, BentoButtonActions } from '@/components/button';\n    import { BentoTextarea } from '@/components/textarea';\n    import {\n        BentoTimelineConfigData,\n        BentoTimelineEntry,\n        BentoTimelineGapObject,\n        BentoTimelineRegisterEntry,\n        BentoTimelineShowMoreObject,\n        BentoTimelineShowMorePlacement,\n    } from './timeline.types';\n    import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from './timeline.keys';\n    import messages from './messages.json';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Timeline displays a collection of events in a reverse chronological order (newest event is displayed on the top).\n     *\n     * @example\n     * import { BentoDateFormat, BentoTimeline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTimeline },\n     *     template: `\n     *          <bento-timeline>\n     *              <bento-timeline-item\n     *                  title=\"Milestone 1\"\n     *                  :timestamp=\"{ date: new Date(), value: 'Created at' }\"\n     *                  :additional-timestamp=\"{ date: new Date(), value: 'Modified at' }\"\n     *                  description=\"Milestone description\"\n     *                  :tag=\"{ label: 'Tag'}\"\n     *              />\n     *              <bento-timeline-item\n     *                  title=\"Milestone 2\"\n     *                  :timestamp=\"{\n     *                      date: new Date(),\n     *                      value: 'Created at',\n     *                      format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD\n     *                  }\"\n     *                  description=\"Milestone description\"\n     *                  :data-list=\"[\n     *                      { label: 'Label', value: 'Value' },\n     *                      { label: 'Label', value: 'Value' },\n     *                  ]\"\n     *              />\n     *          </bento-timeline>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-timeline',\n        components: { BentoButton, BentoButtonActions, BentoTextarea },\n        props: {\n            /**\n             * If set to true, gives the possibility to manually add notes to the timeline via a textarea\n             */\n            addNote: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Object that determines the max number of items to show without clicking the show more button\n             * and where in the timeline is the show more button placed\n             */\n            showMore: {\n                type: Object as PropType<BentoTimelineShowMoreObject>,\n                default: null,\n            },\n            /**\n             * Object that determines minimum amount of time for the automatic timegap indicator;\n             * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }).\n             * If null, automatic timegap detection will be turned off\n             */\n            timegapLimit: {\n                type: Object as PropType<BentoTimelineGapObject>,\n                default: null,\n            },\n        },\n\n        emits: ['add-timeline-note'],\n\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const addNoteLabel = computed(() => t('addNote') as string);\n            const cancelLabel = computed(() => t('cancel') as string);\n\n            const newNoteContent: Ref<string> = ref();\n            const updateNoteContent = (newTimelineNoteContent: string): void => {\n                newNoteContent.value = newTimelineNoteContent;\n            };\n\n            const addNoteTextareaRef: Ref<InstanceType<typeof BentoTextarea>> = ref(null);\n            const addNoteButtonRef: Ref<InstanceType<typeof BentoButton>> = ref(null);\n            const showAddNoteTextArea = ref(false);\n            const toggleAddNote = async () => {\n                showAddNoteTextArea.value = !showAddNoteTextArea.value;\n\n                await nextTick();\n\n                if (showAddNoteTextArea.value) {\n                    (addNoteTextareaRef.value.$refs.textareaElement as HTMLTextAreaElement)?.focus();\n                } else {\n                    (addNoteButtonRef.value.$el as HTMLButtonElement)?.focus();\n                }\n            };\n            const addNoteToTimeline = () => {\n                emit('add-timeline-note', {\n                    description: newNoteContent.value,\n                    timestamp: { date: new Date() },\n                    type: 'note',\n                });\n                toggleAddNote();\n            };\n\n            const timelineEntries = ref<BentoTimelineEntry[]>([]);\n            const hiddenItems = computed(() =>\n                props.showMore && timelineEntries.value.length > props.showMore.limit\n                    ? timelineEntries.value.length - props.showMore.limit\n                    : null\n            );\n            const showAll = ref(false);\n            const { timegapLimit } = toRefs(props);\n\n            const visibleIndexes = computed(() => {\n                if (!props.showMore) {\n                    return null;\n                }\n\n                const timelineIndexes = Array.from(timelineEntries.value.keys());\n\n                if (props.showMore.placement === BentoTimelineShowMorePlacement.BEFORE_LAST) {\n                    return [\n                        ...timelineIndexes.slice(0, props.showMore.limit - 1),\n                        timelineIndexes[timelineIndexes.length - 1],\n                    ];\n                }\n\n                if (props.showMore.placement === BentoTimelineShowMorePlacement.AFTER_FIRST) {\n                    return [timelineIndexes[0], ...timelineIndexes.slice(-(props.showMore.limit - 1))];\n                }\n\n                return timelineIndexes.slice(0, props.showMore.limit);\n            });\n\n            const showMoreIndex = computed(() => {\n                if (!props.showMore) {\n                    return null;\n                }\n\n                switch (props.showMore.placement) {\n                    case BentoTimelineShowMorePlacement.BEFORE_LAST:\n                        return props.showMore.limit - 2;\n                    case BentoTimelineShowMorePlacement.AFTER_FIRST:\n                        return 0;\n                    case BentoTimelineShowMorePlacement.BOTTOM:\n                    default:\n                        return props.showMore.limit - 1;\n                }\n            });\n\n            // unregister timeline item if removed / destroyed\n            const unregisterTimelineEntry = (tabIndexToRemove: number) => () => {\n                timelineEntries.value = timelineEntries.value?.filter((_item, index) => index !== tabIndexToRemove);\n            };\n\n            const registerTimelineEntry: BentoTimelineRegisterEntry = ({ title, description, date }) => {\n                // item index is the same as the length of the array BEFORE the item gets added\n                // e.g. if the array is empty, length is 0 and the index of the item will also be 0\n                const index = timelineEntries.value.length;\n\n                // add entry to timeline entries\n                timelineEntries.value.push({ title, description, date });\n\n                // return values to the Timeline-Item component\n                return { timelineEntries, index, unregisterTimelineEntry: unregisterTimelineEntry(index) };\n            };\n\n            const configData: BentoTimelineConfigData = {\n                showAll,\n                showMoreIndex,\n                hiddenItems,\n                visibleIndexes,\n                timegapLimit,\n            };\n\n            // provide register timeline entry and config data timeline items\n            provide(TIMELINE_REGISTER_ENTRY_INJECTION_KEY, registerTimelineEntry);\n            provide(TIMELINE_CONFIG_INJECTION_KEY, configData);\n\n            return {\n                addNoteLabel,\n                cancelLabel,\n                toggleAddNote,\n                updateNoteContent,\n                addNoteToTimeline,\n                showAddNoteTextArea,\n\n                // refs\n                addNoteTextareaRef,\n                addNoteButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./timeline.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=\"M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V10.5C3.25 11.7426 4.25736 12.75 5.5 12.75H10.5C11.7426 12.75 12.75 11.7426 12.75 10.5V5.5C12.75 4.25736 11.7426 3.25 10.5 3.25H5.5Z\"/></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    <li v-if=\"isVisible\" class=\"b-timeline-item\" :class=\"conditionalClasses\">\n        <div v-if=\"timegap\" class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <div class=\"b-timeline-item__icon b-timeline-item__icon--timegap\"></div>\n                <div class=\"b-timeline-item__separator\"></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-typography class=\"b-timeline-item__timegap\" :aria-label=\"timegapAriaLabel\">\n                    {{ timegap }}\n                </bento-typography>\n            </div>\n        </div>\n        <div class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <square-small-icon class=\"b-timeline-item__icon\" :class=\"iconConditionalClasses\" />\n                <div\n                    v-if=\"!isLastItem\"\n                    class=\"b-timeline-item__separator\"\n                    data-testid=\"last-timeline-item-separator\"\n                ></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-typography\n                    v-if=\"!isNoteType\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    class=\"b-timeline-item__title\"\n                    role=\"heading\"\n                    aria-level=\"2\"\n                >\n                    <bento-link v-if=\"isLinkTitle\" v-bind=\"linkTitleProps\" disable-typography>{{\n                        linkTitleProps.title\n                    }}</bento-link>\n                    <span v-else>{{ title }}</span>\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"isNoteType && (description || hasSlot('default'))\"\n                    el=\"div\"\n                    variant=\"body\"\n                    class=\"b-timeline-item__description\"\n                >\n                    <slot>{{ description }}</slot>\n                </bento-typography>\n\n                <bento-typography v-if=\"timestamp\" class=\"b-timeline-item__timestamp\" el=\"div\" variant=\"caption\">\n                    <bento-date :date=\"timestamp.date\" :format=\"timestamp.format\" disable-typography />\n                    {{ timestamp.value }}\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"!isNoteType && additionalTimestamp\"\n                    class=\"b-timeline-item__timestamp\"\n                    el=\"div\"\n                    variant=\"caption\"\n                >\n                    <bento-date\n                        :date=\"additionalTimestamp.date\"\n                        :format=\"additionalTimestamp.format\"\n                        disable-typography\n                    />\n                    {{ additionalTimestamp.value }}\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"!isNoteType && (description || hasSlot('default'))\"\n                    el=\"div\"\n                    variant=\"body\"\n                    class=\"b-timeline-item__description\"\n                >\n                    <slot>{{ description }}</slot>\n                </bento-typography>\n\n                <div v-if=\"!isNoteType && dataList\" class=\"b-timeline-item__data-list\">\n                    <bento-structured-list>\n                        <bento-structured-list-item\n                            v-for=\"entry in dataList\"\n                            :key=\"generateUid(entry.label)\"\n                            :label=\"entry.label\"\n                        >\n                            <bento-typography variant=\"caption\">{{ entry.value }}</bento-typography>\n                        </bento-structured-list-item>\n                    </bento-structured-list>\n                </div>\n                <bento-tag v-if=\"!isNoteType && tag\" v-bind=\"tag\" class=\"b-timeline-item__tag\" />\n            </div>\n        </div>\n        <div v-if=\"displayShowMoreButton\" class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <div class=\"b-timeline-item__separator\"></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-button class=\"b-timeline__show-more\" variant=\"tertiary\" @click=\"showAll = !showAll\">\n                    <template v-if=\"!showAll\">{{ t('showMore', { items: hiddenItems }) }}</template>\n                    <template v-else>{{ t('showLess') }}</template>\n                </bento-button>\n            </div>\n        </div>\n    </li>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, PropType, provide } from 'vue';\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoDate } from '@/components/date';\n    import { BentoLink } from '@/components/link';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list';\n    import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill';\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useHasSlot } from '@/composables';\n    import formatDistanceStrict from 'date-fns/formatDistanceStrict';\n    // Types\n    import {\n        BentoTimelineConfigData,\n        BentoTimelineDataList,\n        BentoTimelineItemTitle,\n        BentoTimelineItemVariant,\n        BentoTimelineRegisterEntry,\n        BentoTimelineStatus,\n        BentoTimelineTagProps,\n        BentoTimelineTimestamp,\n    } from '../../timeline.types';\n    // Keys\n    import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys';\n    import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    /**\n     * TimelineItem renders each event in the Timeline component\n     *\n     * @example\n     * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTimelineItem },\n     *     template: `\n     *          <bento-timeline-item\n     *              title=\"Milestone\"\n     *              :timestamp=\"{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }\"\n     *              :additional-timestamp=\"{ date: new Date(), value: 'Modified at' }\"\n     *              description=\"Milestone description\"\n     *              :data-list=\"[\n     *                 { label: 'Label', value: 'Value' },\n     *                 { label: 'Label', value: 'Value' },\n     *              ]\"\n     *              :tag=\"{ label: 'Tag'}\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-timeline-item',\n        components: {\n            BentoButton,\n            BentoDate,\n            BentoLink,\n            BentoTag,\n            BentoTypography,\n            BentoStructuredList,\n            BentoStructuredListItem,\n            SquareSmallIcon,\n        },\n        i18n: { messages },\n        props: {\n            /**\n             * Additional timestamp of the event\n             */\n            additionalTimestamp: {\n                type: Object as PropType<BentoTimelineTimestamp>,\n                default: null,\n            },\n            /**\n             * Relevant key-value pair data to display in the event\n             */\n            dataList: {\n                type: Array as PropType<BentoTimelineDataList>,\n                default: null,\n            },\n            /**\n             * Description of the event\n             */\n            description: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Modifier that changes the color of the timeline icon\n             * @values blue, black, green, grey, orange, red, yellow\n             */\n            status: {\n                type: String as PropType<`${BentoTimelineStatus}`>,\n                default: 'black',\n                validator: (value: BentoTimelineStatus) => Object.values(BentoTimelineStatus).includes(value),\n            },\n            /**\n             * Tag props that will be passed down to inner tag component\n             */\n            tag: {\n                type: Object as PropType<BentoTimelineTagProps>,\n                default: undefined,\n            },\n            /**\n             * Main timestamp of the event. Used for timegap detection.\n             */\n            timestamp: {\n                type: Object as PropType<BentoTimelineTimestamp>,\n                required: true,\n            },\n            /**\n             * Title of the event\n             */\n            title: {\n                type: [Object, String] as PropType<BentoTimelineItemTitle | string>,\n                default: null,\n            },\n            /**\n             * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'.\n             * @values milestone, note\n             */\n            type: {\n                type: String,\n                default: 'milestone',\n                validator: (value: string) => ['milestone', 'note'].includes(value),\n            },\n            /**\n             * Variant for the timeline item\n             * @values DEFAULT, SUCCESS, CRITICAL\n             *\n             * @deprecated Use \"status\" prop instead\n             */\n            variant: {\n                type: String as PropType<BentoTimelineItemVariant | `${BentoTimelineItemVariant}`>,\n                default: null,\n                validator: (value: BentoTimelineItemVariant) => Object.values(BentoTimelineItemVariant).includes(value),\n            },\n        },\n        setup(props, { slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const isNoteType = computed(() => props.type === 'note');\n\n            // Handle variant deprecation, by setting `critical` and `success` variants to their respective colors\n            const computedStatus = computed(() => {\n                if (props.variant === BentoTimelineItemVariant.CRITICAL) {\n                    return 'red';\n                }\n\n                if (props.variant === BentoTimelineItemVariant.SUCCESS) {\n                    return 'green';\n                }\n\n                return props.status;\n            });\n\n            if (props.variant) {\n                deprecate(\n                    'BentoTimelineItem \"variant\" property',\n                    `Use the BentoTimelineItem \"status\" modifier instead to modify the color of the timeline icon.\n                    <bento-timeline-item status=\"red\" />`,\n                    '2.0.0'\n                );\n            }\n\n            const iconConditionalClasses = computed(() => ({\n                [`b-timeline-item__icon--${computedStatus.value}`]: computedStatus.value && !isNoteType.value,\n            }));\n            const conditionalClasses = computed(() => ({\n                'b-timeline-item--note': isNoteType.value,\n            }));\n\n            // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp\n            provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true);\n\n            // Register timeline entry to the timeline entries array\n            const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY);\n            const { timelineEntries, index, unregisterTimelineEntry } = registerTimelineEntry({\n                title: props.title,\n                date: props.timestamp.date,\n            });\n\n            // On unmounting timeline item, unregister it from the parent timeline component\n            onUnmounted(() => unregisterTimelineEntry());\n\n            // Get timeline config data from the parent Timeline comp\n            const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData =\n                inject(TIMELINE_CONFIG_INJECTION_KEY);\n            const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value);\n            const isVisible = computed(() => (allItemsShowing.value ? true : visibleIndexes.value.includes(index)));\n            const isLinkTitle = computed(() => typeof props.title === 'object');\n            const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle);\n            const timegap = computed(() => {\n                if (!timegapLimit.value) {\n                    return null;\n                }\n                const previousDate = timelineEntries.value[index - 1]?.date;\n                const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index - 1);\n                if (!previousDate || !isPreviousItemVisible) {\n                    return null;\n                }\n                const { date } = timelineEntries.value[index];\n                const timegapInSelectedUnit = parseInt(\n                    formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }),\n                    10\n                );\n                return timegapLimit.value.amount < timegapInSelectedUnit\n                    ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' })\n                    : null;\n            });\n            const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : ''));\n            const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index);\n            const isLastItem = computed(() => index === timelineEntries.value.length - 1);\n\n            return {\n                // Values\n                isNoteType,\n                iconConditionalClasses,\n                conditionalClasses,\n                displayShowMoreButton,\n                showAll,\n                hiddenItems,\n                isVisible,\n                isLinkTitle,\n                linkTitleProps,\n                timegap,\n                timegapAriaLabel,\n                isLastItem,\n                // Methods\n                generateUid,\n                hasSlot: useHasSlot(slots),\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./timeline-item.scss\" />\n"],"names":["MILLISECONDS_IN_MINUTE","MINUTES_IN_DAY","MINUTES_IN_MONTH","MINUTES_IN_YEAR","formatDistanceStrict","dirtyDate","dirtyBaseDate","options","requiredArgs","locale$1","locale","comparison","compareAsc","localizeOptions","cloneObject","dateLeft","dateRight","toDate","roundingMethod","roundingMethodFn","milliseconds","minutes","timezoneOffset","getTimezoneOffsetInMilliseconds","dstNormalizedMinutes","unit","seconds","roundedMinutes","hours","days","months","years","BentoTimelineShowMorePlacement","BentoTimelineShowMorePlacement2","BentoTimelineGapUnit","BentoTimelineGapUnit2","BentoTimelineItemVariant","BentoTimelineItemVariant2","BentoTimelineStatus","BentoTimelineStatus2","TIMELINE_REGISTER_ENTRY_INJECTION_KEY","TIMELINE_CONFIG_INJECTION_KEY","_sfc_main$2","defineComponent","messages$1","BentoButton","BentoButtonActions","BentoTextarea","props","emit","t","useI18n","addNoteLabel","computed","cancelLabel","newNoteContent","ref","updateNoteContent","newTimelineNoteContent","addNoteTextareaRef","addNoteButtonRef","showAddNoteTextArea","toggleAddNote","nextTick","_a","_b","addNoteToTimeline","timelineEntries","hiddenItems","showAll","timegapLimit","toRefs","visibleIndexes","timelineIndexes","showMoreIndex","unregisterTimelineEntry","tabIndexToRemove","_item","index","registerTimelineEntry","title","description","date","configData","provide","uuid","_sfc_main$1","_sfc_main","BentoDate","BentoLink","BentoTag","BentoTypography","BentoStructuredList","BentoStructuredListItem","SquareSmallIcon","messages","value","slots","isNoteType","computedStatus","deprecate","iconConditionalClasses","conditionalClasses","STRUCTURED_LIST_CONDENSED_INJECTION_KEY","inject","onUnmounted","allItemsShowing","isVisible","isLinkTitle","linkTitleProps","timegap","previousDate","isPreviousItemVisible","timegapInSelectedUnit","timegapAriaLabel","displayShowMoreButton","isLastItem","generateUid","useHasSlot"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"timeline-item.CS9ZDOsm.js","sources":["../../../../node_modules/.pnpm/date-fns@2.28.0/node_modules/date-fns/esm/formatDistanceStrict/index.js","../../src/components/timeline/timeline.types.ts","../../src/components/timeline/timeline.keys.ts","../../src/components/timeline/timeline.vue","../../../ui-assets/icons-16/dist/vue/square-small-fill.vue","../../src/components/timeline/components/timeline-item/timeline-item.vue"],"sourcesContent":["import getTimezoneOffsetInMilliseconds from \"../_lib/getTimezoneOffsetInMilliseconds/index.js\";\nimport compareAsc from \"../compareAsc/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport cloneObject from \"../_lib/cloneObject/index.js\";\nimport defaultLocale from \"../locale/en-US/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nvar MILLISECONDS_IN_MINUTE = 1000 * 60;\nvar MINUTES_IN_DAY = 60 * 24;\nvar MINUTES_IN_MONTH = MINUTES_IN_DAY * 30;\nvar MINUTES_IN_YEAR = MINUTES_IN_DAY * 365;\n/**\n * @name formatDistanceStrict\n * @category Common Helpers\n * @summary Return the distance between the given dates in words.\n *\n * @description\n * Return the distance between the given dates in words, using strict units.\n * This is like `formatDistance`, but does not use helpers like 'almost', 'over',\n * 'less than' and the like.\n *\n * | Distance between dates | Result              |\n * |------------------------|---------------------|\n * | 0 ... 59 secs          | [0..59] seconds     |\n * | 1 ... 59 mins          | [1..59] minutes     |\n * | 1 ... 23 hrs           | [1..23] hours       |\n * | 1 ... 29 days          | [1..29] days        |\n * | 1 ... 11 months        | [1..11] months      |\n * | 1 ... N years          | [1..N]  years       |\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * - The function was renamed from `distanceInWordsStrict` to `formatDistanceStrict`\n *   to make its name consistent with `format` and `formatRelative`.\n *\n * - The order of arguments is swapped to make the function\n *   consistent with `differenceIn...` functions.\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWordsStrict(\n *     new Date(2015, 0, 2),\n *     new Date(2014, 6, 2)\n *   ) //=> '6 months'\n *\n *   // v2.0.0 onward\n *\n *   formatDistanceStrict(\n *     new Date(2014, 6, 2),\n *     new Date(2015, 0, 2)\n *   ) //=> '6 months'\n *   ```\n *\n * - `partialMethod` option is renamed to `roundingMethod`.\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWordsStrict(\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     new Date(1986, 3, 4, 10, 33, 1),\n *     { partialMethod: 'ceil' }\n *   ) //=> '2 minutes'\n *\n *   // v2.0.0 onward\n *\n *   formatDistanceStrict(\n *     new Date(1986, 3, 4, 10, 33, 1),\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     { roundingMethod: 'ceil' }\n *   ) //=> '2 minutes'\n *   ```\n *\n * - If `roundingMethod` is not specified, it now defaults to `round` instead of `floor`.\n *\n * - `unit` option now accepts one of the strings:\n *   'second', 'minute', 'hour', 'day', 'month' or 'year' instead of 's', 'm', 'h', 'd', 'M' or 'Y'\n *\n *   ```javascript\n *   // Before v2.0.0\n *\n *   distanceInWordsStrict(\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     new Date(1986, 3, 4, 10, 33, 1),\n *     { unit: 'm' }\n *   )\n *\n *   // v2.0.0 onward\n *\n *   formatDistanceStrict(\n *     new Date(1986, 3, 4, 10, 33, 1),\n *     new Date(1986, 3, 4, 10, 32, 0),\n *     { unit: 'minute' }\n *   )\n *   ```\n *\n * @param {Date|Number} date - the date\n * @param {Date|Number} baseDate - the date to compare with\n * @param {Object} [options] - an object with options.\n * @param {Boolean} [options.addSuffix=false] - result indicates if the second date is earlier or later than the first\n * @param {'second'|'minute'|'hour'|'day'|'month'|'year'} [options.unit] - if specified, will force a unit\n * @param {'floor'|'ceil'|'round'} [options.roundingMethod='round'] - which way to round partial units\n * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale}\n * @returns {String} the distance in words\n * @throws {TypeError} 2 arguments required\n * @throws {RangeError} `date` must not be Invalid Date\n * @throws {RangeError} `baseDate` must not be Invalid Date\n * @throws {RangeError} `options.roundingMethod` must be 'floor', 'ceil' or 'round'\n * @throws {RangeError} `options.unit` must be 'second', 'minute', 'hour', 'day', 'month' or 'year'\n * @throws {RangeError} `options.locale` must contain `formatDistance` property\n *\n * @example\n * // What is the distance between 2 July 2014 and 1 January 2015?\n * const result = formatDistanceStrict(new Date(2014, 6, 2), new Date(2015, 0, 2))\n * //=> '6 months'\n *\n * @example\n * // What is the distance between 1 January 2015 00:00:15\n * // and 1 January 2015 00:00:00?\n * const result = formatDistanceStrict(\n *   new Date(2015, 0, 1, 0, 0, 15),\n *   new Date(2015, 0, 1, 0, 0, 0)\n * )\n * //=> '15 seconds'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, with a suffix?\n * const result = formatDistanceStrict(new Date(2015, 0, 1), new Date(2016, 0, 1), {\n *   addSuffix: true\n * })\n * //=> '1 year ago'\n *\n * @example\n * // What is the distance from 1 January 2016\n * // to 1 January 2015, in minutes?\n * const result = formatDistanceStrict(new Date(2016, 0, 1), new Date(2015, 0, 1), {\n *   unit: 'minute'\n * })\n * //=> '525600 minutes'\n *\n * @example\n * // What is the distance from 1 January 2015\n * // to 28 January 2015, in months, rounded up?\n * const result = formatDistanceStrict(new Date(2015, 0, 28), new Date(2015, 0, 1), {\n *   unit: 'month',\n *   roundingMethod: 'ceil'\n * })\n * //=> '1 month'\n *\n * @example\n * // What is the distance between 1 August 2016 and 1 January 2015 in Esperanto?\n * import { eoLocale } from 'date-fns/locale/eo'\n * const result = formatDistanceStrict(new Date(2016, 7, 1), new Date(2015, 0, 1), {\n *   locale: eoLocale\n * })\n * //=> '1 jaro'\n */\n\nexport default function formatDistanceStrict(dirtyDate, dirtyBaseDate) {\n  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n  requiredArgs(2, arguments);\n  var locale = options.locale || defaultLocale;\n\n  if (!locale.formatDistance) {\n    throw new RangeError('locale must contain localize.formatDistance property');\n  }\n\n  var comparison = compareAsc(dirtyDate, dirtyBaseDate);\n\n  if (isNaN(comparison)) {\n    throw new RangeError('Invalid time value');\n  }\n\n  var localizeOptions = cloneObject(options);\n  localizeOptions.addSuffix = Boolean(options.addSuffix);\n  localizeOptions.comparison = comparison;\n  var dateLeft;\n  var dateRight;\n\n  if (comparison > 0) {\n    dateLeft = toDate(dirtyBaseDate);\n    dateRight = toDate(dirtyDate);\n  } else {\n    dateLeft = toDate(dirtyDate);\n    dateRight = toDate(dirtyBaseDate);\n  }\n\n  var roundingMethod = options.roundingMethod == null ? 'round' : String(options.roundingMethod);\n  var roundingMethodFn;\n\n  if (roundingMethod === 'floor') {\n    roundingMethodFn = Math.floor;\n  } else if (roundingMethod === 'ceil') {\n    roundingMethodFn = Math.ceil;\n  } else if (roundingMethod === 'round') {\n    roundingMethodFn = Math.round;\n  } else {\n    throw new RangeError(\"roundingMethod must be 'floor', 'ceil' or 'round'\");\n  }\n\n  var milliseconds = dateRight.getTime() - dateLeft.getTime();\n  var minutes = milliseconds / MILLISECONDS_IN_MINUTE;\n  var timezoneOffset = getTimezoneOffsetInMilliseconds(dateRight) - getTimezoneOffsetInMilliseconds(dateLeft); // Use DST-normalized difference in minutes for years, months and days;\n  // use regular difference in minutes for hours, minutes and seconds.\n\n  var dstNormalizedMinutes = (milliseconds - timezoneOffset) / MILLISECONDS_IN_MINUTE;\n  var unit;\n\n  if (options.unit == null) {\n    if (minutes < 1) {\n      unit = 'second';\n    } else if (minutes < 60) {\n      unit = 'minute';\n    } else if (minutes < MINUTES_IN_DAY) {\n      unit = 'hour';\n    } else if (dstNormalizedMinutes < MINUTES_IN_MONTH) {\n      unit = 'day';\n    } else if (dstNormalizedMinutes < MINUTES_IN_YEAR) {\n      unit = 'month';\n    } else {\n      unit = 'year';\n    }\n  } else {\n    unit = String(options.unit);\n  } // 0 up to 60 seconds\n\n\n  if (unit === 'second') {\n    var seconds = roundingMethodFn(milliseconds / 1000);\n    return locale.formatDistance('xSeconds', seconds, localizeOptions); // 1 up to 60 mins\n  } else if (unit === 'minute') {\n    var roundedMinutes = roundingMethodFn(minutes);\n    return locale.formatDistance('xMinutes', roundedMinutes, localizeOptions); // 1 up to 24 hours\n  } else if (unit === 'hour') {\n    var hours = roundingMethodFn(minutes / 60);\n    return locale.formatDistance('xHours', hours, localizeOptions); // 1 up to 30 days\n  } else if (unit === 'day') {\n    var days = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_DAY);\n    return locale.formatDistance('xDays', days, localizeOptions); // 1 up to 12 months\n  } else if (unit === 'month') {\n    var months = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_MONTH);\n    return months === 12 && options.unit !== 'month' ? locale.formatDistance('xYears', 1, localizeOptions) : locale.formatDistance('xMonths', months, localizeOptions); // 1 year up to max Date\n  } else if (unit === 'year') {\n    var years = roundingMethodFn(dstNormalizedMinutes / MINUTES_IN_YEAR);\n    return locale.formatDistance('xYears', years, localizeOptions);\n  }\n\n  throw new RangeError(\"unit must be 'second', 'minute', 'hour', 'day', 'month' or 'year'\");\n}","import { BentoDateFormat } from '@/components/date/date.types';\nimport { BentoTag } from '@/components/tag';\nimport { Ref } from 'vue';\nimport type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n\nexport enum BentoTimelineShowMorePlacement {\n    BOTTOM = 'bottom',\n    AFTER_FIRST = 'after-first',\n    BEFORE_LAST = 'before-last',\n}\n\nexport interface BentoTimelineShowMoreObject {\n    limit: number;\n    placement?: BentoTimelineShowMorePlacement;\n}\n\nexport enum BentoTimelineGapUnit {\n    SECOND = 'second',\n    MINUTE = 'minute',\n    HOUR = 'hour',\n    DAY = 'day',\n    MONTH = 'month',\n    YEAR = 'year',\n}\n\nexport interface BentoTimelineGapObject {\n    amount: number;\n    unit: BentoTimelineGapUnit;\n}\n\n/**\n * @deprecated \"variant\" prop was deprecated. Use \"status\" modifier instead.\n */\nexport enum BentoTimelineItemVariant {\n    DEFAULT = 'SquareSmallIcon',\n    SUCCESS = 'CheckedCircleIcon',\n    CRITICAL = 'CrossCircleIcon',\n}\n\nexport enum BentoTimelineStatus {\n    BLACK = 'black',\n    BLUE = 'blue',\n    GREEN = 'green',\n    GREY = 'grey',\n    ORANGE = 'orange',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n\nexport interface BentoTimelineItemTitle extends RouterLinkProps {\n    /**\n     * Link label.\n     */\n    title: string;\n    /**\n     * Set the rendered link to a regular external anchor link.\n     */\n    external?: boolean;\n\n    /**\n     * Sets the target of the rendered link.\n     */\n    target?: string;\n\n    // This has been added to allow users to add HTML and Aria attribute\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    [name: string]: any;\n}\n\nexport interface BentoTimelineTimestamp {\n    date: Date | number;\n    format?: BentoDateFormat;\n    value?: string;\n}\n\nexport interface BentoTimelineDataListObject {\n    label: string;\n    value: string;\n}\n\nexport type BentoTimelineDataList = Array<BentoTimelineDataListObject>;\n\nexport type BentoTimelineTagProps = InstanceType<typeof BentoTag>['$props'];\n\nexport interface BentoTimelineEntry {\n    title?: string | BentoTimelineItemTitle;\n    description?: string;\n    date: Date | number;\n}\n\nexport type BentoTimelineRegisterEntry = (props: {\n    title?: string | BentoTimelineItemTitle;\n    description?: string;\n    date: Date | number;\n}) => { timelineEntries: Ref<BentoTimelineEntry[]>; index: number; unregisterTimelineEntry: () => void };\n\nexport interface BentoTimelineConfigData {\n    showAll: Ref<boolean>;\n    showMoreIndex: Ref<number>;\n    hiddenItems: Ref<number>;\n    visibleIndexes: Ref<number[]>;\n    timegapLimit: Ref<BentoTimelineGapObject>;\n}\n","export const TIMELINE_REGISTER_ENTRY_INJECTION_KEY = Symbol('timeline register entry injection key');\nexport const TIMELINE_CONFIG_INJECTION_KEY = Symbol('timeline config obj injection key');\n","<template>\n    <div class=\"b-timeline\">\n        <div v-if=\"addNote\" class=\"b-timeline__add-note-section\">\n            <bento-button\n                v-if=\"!showAddNoteTextArea\"\n                ref=\"addNoteButtonRef\"\n                variant=\"tertiary\"\n                @click=\"toggleAddNote\"\n                >{{ addNoteLabel }}</bento-button\n            >\n            <div v-if=\"showAddNoteTextArea\">\n                <bento-textarea\n                    ref=\"addNoteTextareaRef\"\n                    :label=\"addNoteLabel\"\n                    :character-limit=\"150\"\n                    resizable=\"vertical\"\n                    @input=\"updateNoteContent\"\n                />\n                <bento-button-actions\n                    :actions=\"[\n                        { title: addNoteLabel, event: addNoteToTimeline },\n                        { title: cancelLabel, event: toggleAddNote },\n                    ]\"\n                />\n            </div>\n        </div>\n        <ol class=\"b-timeline__items\">\n            <slot />\n        </ol>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, nextTick, PropType, provide, ref, Ref, toRefs } from 'vue';\n    import { BentoButton, BentoButtonActions } from '@/components/button';\n    import { BentoTextarea } from '@/components/textarea';\n    import {\n        BentoTimelineConfigData,\n        BentoTimelineEntry,\n        BentoTimelineGapObject,\n        BentoTimelineRegisterEntry,\n        BentoTimelineShowMoreObject,\n        BentoTimelineShowMorePlacement,\n    } from './timeline.types';\n    import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from './timeline.keys';\n    import messages from './messages.json';\n    import { useI18n } from '@/utils/ts/i18n';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * Timeline displays a collection of events in a reverse chronological order (newest event is displayed on the top).\n     *\n     * @example\n     * import { BentoDateFormat, BentoTimeline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTimeline },\n     *     template: `\n     *          <bento-timeline>\n     *              <bento-timeline-item\n     *                  title=\"Milestone 1\"\n     *                  :timestamp=\"{ date: new Date(), value: 'Created at' }\"\n     *                  :additional-timestamp=\"{ date: new Date(), value: 'Modified at' }\"\n     *                  description=\"Milestone description\"\n     *                  :tag=\"{ label: 'Tag'}\"\n     *              />\n     *              <bento-timeline-item\n     *                  title=\"Milestone 2\"\n     *                  :timestamp=\"{\n     *                      date: new Date(),\n     *                      value: 'Created at',\n     *                      format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD\n     *                  }\"\n     *                  description=\"Milestone description\"\n     *                  :data-list=\"[\n     *                      { label: 'Label', value: 'Value' },\n     *                      { label: 'Label', value: 'Value' },\n     *                  ]\"\n     *              />\n     *          </bento-timeline>\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-timeline',\n        components: { BentoButton, BentoButtonActions, BentoTextarea },\n        props: {\n            /**\n             * If set to true, gives the possibility to manually add notes to the timeline via a textarea\n             */\n            addNote: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Object that determines the max number of items to show without clicking the show more button\n             * and where in the timeline is the show more button placed\n             */\n            showMore: {\n                type: Object as PropType<BentoTimelineShowMoreObject>,\n                default: null,\n            },\n            /**\n             * Object that determines minimum amount of time for the automatic timegap indicator;\n             * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }).\n             * If null, automatic timegap detection will be turned off\n             */\n            timegapLimit: {\n                type: Object as PropType<BentoTimelineGapObject>,\n                default: null,\n            },\n        },\n\n        emits: ['add-timeline-note'],\n\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const addNoteLabel = computed(() => t('addNote') as string);\n            const cancelLabel = computed(() => t('cancel') as string);\n\n            const newNoteContent: Ref<string> = ref();\n            const updateNoteContent = (newTimelineNoteContent: string): void => {\n                newNoteContent.value = newTimelineNoteContent;\n            };\n\n            const addNoteTextareaRef: Ref<InstanceType<typeof BentoTextarea>> = ref(null);\n            const addNoteButtonRef: Ref<InstanceType<typeof BentoButton>> = ref(null);\n            const showAddNoteTextArea = ref(false);\n            const toggleAddNote = async () => {\n                showAddNoteTextArea.value = !showAddNoteTextArea.value;\n\n                await nextTick();\n\n                if (showAddNoteTextArea.value) {\n                    (addNoteTextareaRef.value.$refs.textareaElement as HTMLTextAreaElement)?.focus();\n                } else {\n                    (addNoteButtonRef.value.$el as HTMLButtonElement)?.focus();\n                }\n            };\n            const addNoteToTimeline = () => {\n                emit('add-timeline-note', {\n                    description: newNoteContent.value,\n                    timestamp: { date: new Date() },\n                    type: 'note',\n                });\n                toggleAddNote();\n            };\n\n            const timelineEntries = ref<BentoTimelineEntry[]>([]);\n            const hiddenItems = computed(() =>\n                props.showMore && timelineEntries.value.length > props.showMore.limit\n                    ? timelineEntries.value.length - props.showMore.limit\n                    : null\n            );\n            const showAll = ref(false);\n            const { timegapLimit } = toRefs(props);\n\n            const visibleIndexes = computed(() => {\n                if (!props.showMore) {\n                    return null;\n                }\n\n                const timelineIndexes = Array.from(timelineEntries.value.keys());\n\n                if (props.showMore.placement === BentoTimelineShowMorePlacement.BEFORE_LAST) {\n                    return [\n                        ...timelineIndexes.slice(0, props.showMore.limit - 1),\n                        timelineIndexes[timelineIndexes.length - 1],\n                    ];\n                }\n\n                if (props.showMore.placement === BentoTimelineShowMorePlacement.AFTER_FIRST) {\n                    return [timelineIndexes[0], ...timelineIndexes.slice(-(props.showMore.limit - 1))];\n                }\n\n                return timelineIndexes.slice(0, props.showMore.limit);\n            });\n\n            const showMoreIndex = computed(() => {\n                if (!props.showMore) {\n                    return null;\n                }\n\n                switch (props.showMore.placement) {\n                    case BentoTimelineShowMorePlacement.BEFORE_LAST:\n                        return props.showMore.limit - 2;\n                    case BentoTimelineShowMorePlacement.AFTER_FIRST:\n                        return 0;\n                    case BentoTimelineShowMorePlacement.BOTTOM:\n                    default:\n                        return props.showMore.limit - 1;\n                }\n            });\n\n            // unregister timeline item if removed / destroyed\n            const unregisterTimelineEntry = (tabIndexToRemove: number) => () => {\n                timelineEntries.value = timelineEntries.value?.filter((_item, index) => index !== tabIndexToRemove);\n            };\n\n            const registerTimelineEntry: BentoTimelineRegisterEntry = ({ title, description, date }) => {\n                // item index is the same as the length of the array BEFORE the item gets added\n                // e.g. if the array is empty, length is 0 and the index of the item will also be 0\n                const index = timelineEntries.value.length;\n\n                // add entry to timeline entries\n                timelineEntries.value.push({ title, description, date });\n\n                // return values to the Timeline-Item component\n                return { timelineEntries, index, unregisterTimelineEntry: unregisterTimelineEntry(index) };\n            };\n\n            const configData: BentoTimelineConfigData = {\n                showAll,\n                showMoreIndex,\n                hiddenItems,\n                visibleIndexes,\n                timegapLimit,\n            };\n\n            // provide register timeline entry and config data timeline items\n            provide(TIMELINE_REGISTER_ENTRY_INJECTION_KEY, registerTimelineEntry);\n            provide(TIMELINE_CONFIG_INJECTION_KEY, configData);\n\n            return {\n                addNoteLabel,\n                cancelLabel,\n                toggleAddNote,\n                updateNoteContent,\n                addNoteToTimeline,\n                showAddNoteTextArea,\n\n                // refs\n                addNoteTextareaRef,\n                addNoteButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./timeline.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=\"M5.5 3.25C4.25736 3.25 3.25 4.25736 3.25 5.5V10.5C3.25 11.7426 4.25736 12.75 5.5 12.75H10.5C11.7426 12.75 12.75 11.7426 12.75 10.5V5.5C12.75 4.25736 11.7426 3.25 10.5 3.25H5.5Z\"/></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    <li v-if=\"isVisible\" class=\"b-timeline-item\" :class=\"conditionalClasses\">\n        <div v-if=\"timegap\" class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <div class=\"b-timeline-item__icon b-timeline-item__icon--timegap\"></div>\n                <div class=\"b-timeline-item__separator\"></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-typography class=\"b-timeline-item__timegap\" :aria-label=\"timegapAriaLabel\">\n                    {{ timegap }}\n                </bento-typography>\n            </div>\n        </div>\n        <div class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <square-small-icon class=\"b-timeline-item__icon\" :class=\"iconConditionalClasses\" />\n                <div\n                    v-if=\"!isLastItem\"\n                    class=\"b-timeline-item__separator\"\n                    data-testid=\"last-timeline-item-separator\"\n                ></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-typography\n                    v-if=\"!isNoteType\"\n                    el=\"div\"\n                    variant=\"body\"\n                    strongest\n                    class=\"b-timeline-item__title\"\n                    role=\"heading\"\n                    aria-level=\"2\"\n                >\n                    <bento-link v-if=\"isLinkTitle\" v-bind=\"linkTitleProps\" disable-typography>{{\n                        linkTitleProps.title\n                    }}</bento-link>\n                    <span v-else>{{ title }}</span>\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"isNoteType && (description || hasSlot('default'))\"\n                    el=\"div\"\n                    variant=\"body\"\n                    class=\"b-timeline-item__description\"\n                >\n                    <slot>{{ description }}</slot>\n                </bento-typography>\n\n                <bento-typography v-if=\"timestamp\" class=\"b-timeline-item__timestamp\" el=\"div\" variant=\"caption\">\n                    <bento-date :date=\"timestamp.date\" :format=\"timestamp.format\" disable-typography />\n                    {{ timestamp.value }}\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"!isNoteType && additionalTimestamp\"\n                    class=\"b-timeline-item__timestamp\"\n                    el=\"div\"\n                    variant=\"caption\"\n                >\n                    <bento-date\n                        :date=\"additionalTimestamp.date\"\n                        :format=\"additionalTimestamp.format\"\n                        disable-typography\n                    />\n                    {{ additionalTimestamp.value }}\n                </bento-typography>\n\n                <bento-typography\n                    v-if=\"!isNoteType && (description || hasSlot('default'))\"\n                    el=\"div\"\n                    variant=\"body\"\n                    class=\"b-timeline-item__description\"\n                >\n                    <slot>{{ description }}</slot>\n                </bento-typography>\n\n                <div v-if=\"!isNoteType && dataList\" class=\"b-timeline-item__data-list\">\n                    <bento-structured-list>\n                        <bento-structured-list-item\n                            v-for=\"entry in dataList\"\n                            :key=\"generateUid(entry.label)\"\n                            :label=\"entry.label\"\n                        >\n                            <bento-typography variant=\"caption\">{{ entry.value }}</bento-typography>\n                        </bento-structured-list-item>\n                    </bento-structured-list>\n                </div>\n                <bento-tag v-if=\"!isNoteType && tag\" v-bind=\"tag\" class=\"b-timeline-item__tag\" />\n            </div>\n        </div>\n        <div v-if=\"displayShowMoreButton\" class=\"b-timeline-item__row\">\n            <div class=\"b-timeline-item__marker\" aria-hidden=\"true\">\n                <div class=\"b-timeline-item__separator\"></div>\n            </div>\n            <div class=\"b-timeline-item__content\">\n                <bento-button class=\"b-timeline__show-more\" variant=\"tertiary\" @click=\"showAll = !showAll\">\n                    <template v-if=\"!showAll\">{{ t('showMore', { items: hiddenItems }) }}</template>\n                    <template v-else>{{ t('showLess') }}</template>\n                </bento-button>\n            </div>\n        </div>\n    </li>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, inject, onUnmounted, PropType, provide } from 'vue';\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoDate } from '@/components/date';\n    import { BentoLink } from '@/components/link';\n    import { BentoTag } from '@/components/tag';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list';\n    import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill';\n    // Utils\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { useHasSlot } from '@/composables';\n    import formatDistanceStrict from 'date-fns/formatDistanceStrict';\n    // Types\n    import {\n        BentoTimelineConfigData,\n        BentoTimelineDataList,\n        BentoTimelineItemTitle,\n        BentoTimelineItemVariant,\n        BentoTimelineRegisterEntry,\n        BentoTimelineStatus,\n        BentoTimelineTagProps,\n        BentoTimelineTimestamp,\n    } from '../../timeline.types';\n    // Keys\n    import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys';\n    import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n    /**\n     * TimelineItem renders each event in the Timeline component\n     *\n     * @example\n     * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoTimelineItem },\n     *     template: `\n     *          <bento-timeline-item\n     *              title=\"Milestone\"\n     *              :timestamp=\"{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }\"\n     *              :additional-timestamp=\"{ date: new Date(), value: 'Modified at' }\"\n     *              description=\"Milestone description\"\n     *              :data-list=\"[\n     *                 { label: 'Label', value: 'Value' },\n     *                 { label: 'Label', value: 'Value' },\n     *              ]\"\n     *              :tag=\"{ label: 'Tag'}\"\n     *          />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-timeline-item',\n        components: {\n            BentoButton,\n            BentoDate,\n            BentoLink,\n            BentoTag,\n            BentoTypography,\n            BentoStructuredList,\n            BentoStructuredListItem,\n            SquareSmallIcon,\n        },\n        i18n: { messages },\n        props: {\n            /**\n             * Additional timestamp of the event\n             */\n            additionalTimestamp: {\n                type: Object as PropType<BentoTimelineTimestamp>,\n                default: null,\n            },\n            /**\n             * Relevant key-value pair data to display in the event\n             */\n            dataList: {\n                type: Array as PropType<BentoTimelineDataList>,\n                default: null,\n            },\n            /**\n             * Description of the event\n             */\n            description: {\n                type: String,\n                default: null,\n            },\n            /**\n             * Modifier that changes the color of the timeline icon\n             * @values blue, black, green, grey, orange, red, yellow\n             */\n            status: {\n                type: String as PropType<`${BentoTimelineStatus}`>,\n                default: 'black',\n                validator: (value: BentoTimelineStatus) => Object.values(BentoTimelineStatus).includes(value),\n            },\n            /**\n             * Tag props that will be passed down to inner tag component\n             */\n            tag: {\n                type: Object as PropType<BentoTimelineTagProps>,\n                default: undefined,\n            },\n            /**\n             * Main timestamp of the event. Used for timegap detection.\n             */\n            timestamp: {\n                type: Object as PropType<BentoTimelineTimestamp>,\n                required: true,\n            },\n            /**\n             * Title of the event\n             */\n            title: {\n                type: [Object, String] as PropType<BentoTimelineItemTitle | string>,\n                default: null,\n            },\n            /**\n             * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'.\n             * @values milestone, note\n             */\n            type: {\n                type: String,\n                default: 'milestone',\n                validator: (value: string) => ['milestone', 'note'].includes(value),\n            },\n            /**\n             * Variant for the timeline item\n             * @values DEFAULT, SUCCESS, CRITICAL\n             *\n             * @deprecated Use \"status\" prop instead\n             */\n            variant: {\n                type: String as PropType<BentoTimelineItemVariant | `${BentoTimelineItemVariant}`>,\n                default: null,\n                validator: (value: BentoTimelineItemVariant) => Object.values(BentoTimelineItemVariant).includes(value),\n            },\n        },\n        setup(props, { slots }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            const isNoteType = computed(() => props.type === 'note');\n\n            // Handle variant deprecation, by setting `critical` and `success` variants to their respective colors\n            const computedStatus = computed(() => {\n                if (props.variant === BentoTimelineItemVariant.CRITICAL) {\n                    return 'red';\n                }\n\n                if (props.variant === BentoTimelineItemVariant.SUCCESS) {\n                    return 'green';\n                }\n\n                return props.status;\n            });\n\n            if (props.variant) {\n                deprecate(\n                    'BentoTimelineItem \"variant\" property',\n                    `Use the BentoTimelineItem \"status\" modifier instead to modify the color of the timeline icon.\n                    <bento-timeline-item status=\"red\" />`,\n                    '2.0.0'\n                );\n            }\n\n            const iconConditionalClasses = computed(() => ({\n                [`b-timeline-item__icon--${computedStatus.value}`]: computedStatus.value && !isNoteType.value,\n            }));\n            const conditionalClasses = computed(() => ({\n                'b-timeline-item--note': isNoteType.value,\n            }));\n\n            // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp\n            provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true);\n\n            // Register timeline entry to the timeline entries array\n            const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY);\n            const { timelineEntries, index, unregisterTimelineEntry } = registerTimelineEntry({\n                title: props.title,\n                date: props.timestamp.date,\n            });\n\n            // On unmounting timeline item, unregister it from the parent timeline component\n            onUnmounted(() => unregisterTimelineEntry());\n\n            // Get timeline config data from the parent Timeline comp\n            const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData =\n                inject(TIMELINE_CONFIG_INJECTION_KEY);\n            const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value);\n            const isVisible = computed(() => (allItemsShowing.value ? true : visibleIndexes.value.includes(index)));\n            const isLinkTitle = computed(() => typeof props.title === 'object');\n            const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle);\n            const timegap = computed(() => {\n                if (!timegapLimit.value) {\n                    return null;\n                }\n                const previousDate = timelineEntries.value[index - 1]?.date;\n                const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index - 1);\n                if (!previousDate || !isPreviousItemVisible) {\n                    return null;\n                }\n                const { date } = timelineEntries.value[index];\n                const timegapInSelectedUnit = parseInt(\n                    formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }),\n                    10\n                );\n                return timegapLimit.value.amount < timegapInSelectedUnit\n                    ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' })\n                    : null;\n            });\n            const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : ''));\n            const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index);\n            const isLastItem = computed(() => index === timelineEntries.value.length - 1);\n\n            return {\n                // Values\n                isNoteType,\n                iconConditionalClasses,\n                conditionalClasses,\n                displayShowMoreButton,\n                showAll,\n                hiddenItems,\n                isVisible,\n                isLinkTitle,\n                linkTitleProps,\n                timegap,\n                timegapAriaLabel,\n                isLastItem,\n                // Methods\n                generateUid,\n                hasSlot: useHasSlot(slots),\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./timeline-item.scss\" />\n"],"names":["MILLISECONDS_IN_MINUTE","MINUTES_IN_DAY","MINUTES_IN_MONTH","MINUTES_IN_YEAR","formatDistanceStrict","dirtyDate","dirtyBaseDate","options","requiredArgs","locale$1","locale","comparison","compareAsc","localizeOptions","cloneObject","dateLeft","dateRight","toDate","roundingMethod","roundingMethodFn","milliseconds","minutes","timezoneOffset","getTimezoneOffsetInMilliseconds","dstNormalizedMinutes","unit","seconds","roundedMinutes","hours","days","months","years","BentoTimelineShowMorePlacement","BentoTimelineShowMorePlacement2","BentoTimelineGapUnit","BentoTimelineGapUnit2","BentoTimelineItemVariant","BentoTimelineItemVariant2","BentoTimelineStatus","BentoTimelineStatus2","TIMELINE_REGISTER_ENTRY_INJECTION_KEY","TIMELINE_CONFIG_INJECTION_KEY","_sfc_main$2","defineComponent","messages$1","BentoButton","BentoButtonActions","BentoTextarea","props","emit","t","useI18n","addNoteLabel","computed","cancelLabel","newNoteContent","ref","updateNoteContent","newTimelineNoteContent","addNoteTextareaRef","addNoteButtonRef","showAddNoteTextArea","toggleAddNote","nextTick","_a","_b","addNoteToTimeline","timelineEntries","hiddenItems","showAll","timegapLimit","toRefs","visibleIndexes","timelineIndexes","showMoreIndex","unregisterTimelineEntry","tabIndexToRemove","_item","index","registerTimelineEntry","title","description","date","configData","provide","uuid","_sfc_main$1","_sfc_main","BentoDate","BentoLink","BentoTag","BentoTypography","BentoStructuredList","BentoStructuredListItem","SquareSmallIcon","messages","value","slots","isNoteType","computedStatus","deprecate","iconConditionalClasses","conditionalClasses","STRUCTURED_LIST_CONDENSED_INJECTION_KEY","inject","onUnmounted","allItemsShowing","isVisible","isLinkTitle","linkTitleProps","timegap","previousDate","isPreviousItemVisible","timegapInSelectedUnit","timegapAriaLabel","displayShowMoreButton","isLastItem","generateUid","useHasSlot"],"mappings":"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","x_google_ignoreList":[0]}