npm - @adyen/bento-vue2 - Versions diffs - 2.1.1 → 2.2.0 - Mend

@adyen/bento-vue2 2.1.1 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/dist/chunks/select-tag-filter.CTiPiXzG.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"select-tag-filter.CTiPiXzG.js","sources":["../../src/components/filter-bar/components/select-filter/variants/select-tag-filter/select-tag-filter.vue"],"sourcesContent":["<template>\n <bento-select-filter\n v-slot=\"{ label: slotLabel, data }\"\n v-bind=\"$props\"\n :field=\"field\"\n :label=\"label\"\n :options=\"countryOptions\"\n @update=\"onUpdate\"\n @input=\"e => $emit(BentoFilterEvent.INPUT, e)\"\n >\n <listbox-option-tag :option=\"{ value: slotLabel, data, label: '' }\" />\n </bento-select-filter>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, type PropType } from 'vue';\n import { type BentoListboxSelectedValue } from '@/types/listbox';\n import { BentoSelectFilter } from '../../index';\n import { BentoFilterEvent, type BentoSelectTagFilterOptions } from '@/components/filter-bar/filter-bar.types';\n import { ListboxOptionTag } from '@/internal';\n import SelectFilterProps from '@/components/filter-bar/components/select-filter/select-filter.props';\n\n /**\n * The Select Tag filter displays a listbox of tag items\n * passed in the \"options.listboxItems\" property.\n *\n * @example\n * import { BentoSelectTagFilter } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoSelectTagFilter },\n * template: `\n * <bento-select-tag-filter\n * :field=\"tag\"\n * :label=\"Tag\"\n * :options=\"{\n * listboxItems: [\n * { label: 'Offline', value: 'unique-id-1', variant: 'red' },\n * { label: 'Online', value: 'unique-id-2', variant: 'green' },\n * { label: 'Standby', value: 'unique-id-3', variant: 'orange' },\n * { label: 'Busy with things', value: 'unique-id-4', variant: 'blue' },\n * ]\n * }\"\n * :value=\"'unique-id-4'\"\n * @update=\"updateFilterHandler\"\n * >\n * `\n * }\n */\n export default defineComponent({\n name: 'bento-select-country-filter',\n components: {\n BentoSelectFilter,\n ListboxOptionTag,\n },\n props: {\n ...SelectFilterProps,\n\n /**\n * List of options that are needed to setup the tag filter\n * Available options:\n * - multiple: If \"true\", the user will be able to select multiple items.\n * - listboxItems: The option elements to populate the filter with {@see BentoSelectTagFilterOptions}\n */\n options: {\n type: Object as PropType<BentoSelectTagFilterOptions>,\n default: undefined,\n },\n },\n emits: [BentoFilterEvent.INPUT, BentoFilterEvent.UPDATE],\n setup(props, { emit }) {\n const onUpdate = (selectedValue: BentoListboxSelectedValue) => emit(BentoFilterEvent.UPDATE, selectedValue);\n\n const tagItems = computed(() =>\n props?.options?.listboxItems?.map(({ label, value, variant }) => ({ label, value, data: variant }))\n );\n const countryOptions = computed(() => ({\n ...props.options,\n listboxItems: tagItems.value,\n }));\n\n return {\n // Values\n countryOptions,\n\n // Methods\n onUpdate,\n\n // Enums\n BentoFilterEvent,\n };\n },\n });\n</script>\n"],"names":["_sfc_main","defineComponent","BentoSelectFilter","ListboxOptionTag","SelectFilterProps","BentoFilterEvent","props","emit","onUpdate","selectedValue","tagItems","computed","label","value","variant"],"mappings":";;;;AAiDA,MAAAA,IAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,mBAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA;AAAA,EAEA,OAAA;AAAA,IACA,GAAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IAAA;AAAA,EACA;AAAA,EAEA,OAAA,CAAAC,EAAA,OAAAA,EAAA,MAAA;AAAA,EACA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AACA,UAAAC,IAAA,CAAAC,MAAAF,EAAAF,EAAA,QAAAI,CAAA,GAEAC,IAAAC;AAAA,MAAA,MACAL,GAAA,SAAA,cAAA,IAAA,CAAA,EAAA,OAAAM,GAAA,OAAAC,GAAA,SAAAC,EAAA,OAAA,EAAA,OAAAF,GAAA,OAAAC,GAAA,MAAAC,IAAA;AAAA,IAAA;AAOA,WAAA;AAAA;AAAA,MAEA,gBAPAH,EAAA,OAAA;AAAA,QACA,GAAAL,EAAA;AAAA,QACA,cAAAI,EAAA;AAAA,MAAA,EACA;AAAA;AAAA,MAOA,UAAAF;AAAA;AAAA,MAGA,kBAAAH;AAAA,IAAA;AAAA,EAEA;AACA,CAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{selection-card-group.BYBAG8ig.js → selection-card-group.BhbzoA3X.js} RENAMED Viewed

@@ -9,9 +9,9 @@ import { u as Y } from "./use-has-slot.C9lQZ6nz.js";
 import { a as Q } from "./radio-input.CLlYadKI.js";
 import { n as T } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as U } from "./form-field.B60VsF8d.js";
-import { G as H } from "./grid-layout.BeCrjPgT.js";
+import { G as H } from "./grid-layout.m-5ySv9K.js";
 import { E as J } from "./error-message.B-n8wzFo.js";
-import { C as K } from "./controls-group.Bku83Fm_.js";
+import { C as K } from "./controls-group.Bj-gJZ6W.js";
 import "../assets/selection-card-group.css";
 var S = /* @__PURE__ */ ((i) => (i.DISABLED = "disabled", i.READONLY = "readonly", i.ERROR = "error", i))(S || {});
 const P = /* @__PURE__ */ Symbol("selection card radio input injection key"), X = {
@@ -233,4 +233,4 @@ export {
   S as a,
   Re as s
 };
-//# sourceMappingURL=selection-card-group.BYBAG8ig.js.map
+//# sourceMappingURL=selection-card-group.BhbzoA3X.js.map

package/dist/chunks/{selection-card-group.BYBAG8ig.js.map → selection-card-group.BhbzoA3X.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"selection-card-group.BYBAG8ig.js","sources":["../../src/components/selection-card/selection-card.types.ts","../../src/components/selection-card/selection-card.keys.ts","../../src/components/selection-card/selection-card.vue","../../src/components/selection-card/components/selection-card-group/selection-card-group.vue"],"sourcesContent":["import { type RadioInputValue } from '@/components/internal/radio-input';\nimport { type BentoCheckboxType } from '@/types/checkbox';\nimport { type VueNodeElement } from '@/types/elements';\n\nexport enum BentoSelectionCardState {\n DISABLED = 'disabled',\n READONLY = 'readonly',\n ERROR = 'error',\n}\n\nexport type BentoSelectionCardValue = string \| number;\n\nexport type BentoSelectionCardModelValue = BentoCheckboxType \| RadioInputValue;\n\nexport interface BentoSelectionCardItem {\n content?: string \| object;\n description?: string;\n disabled?: boolean;\n dynamicContent?: string \| object;\n fullyClickable?: boolean;\n hasError?: boolean;\n icon?: VueNodeElement;\n readonly?: boolean;\n subtitle?: string;\n title: string;\n value: BentoSelectionCardValue;\n}\n","export const SELECTION_CARD_RADIO_INPUT_INJECTION_KEY = Symbol('selection card radio input injection key');\n","<template>\n <div class=\"b-selection-card\" :class=\"conditionalClasses\" @click=\"handleCardClick\">\n <div class=\"b-selection-card__container\" :class=\"containerConditionalClasses\">\n <div class=\"b-selection-card__checkbox-container\" :class=\"checkboxContainerConditionalClasses\">\n <div class=\"b-selection-card__checkbox-container-text\" :class=\"checkboxContainerTextConditionalClasses\">\n <div v-if=\"hasSlot('icon')\" class=\"b-selection-card__icon\" role=\"presentation\" aria-hidden=\"true\">\n <slot name=\"icon\" />\n </div>\n <label :for=\"inputId\" class=\"b-selection-card__text\" @click.stop.prevent=\"handleCardClick\">\n <bento-typography\n v-if=\"subtitle\"\n class=\"b-selection-card__description\"\n el=\"span\"\n variant=\"caption\"\n >\n {{ subtitle }}\n </bento-typography>\n <bento-typography el=\"span\" variant=\"title\">{{ title }}</bento-typography>\n <bento-typography\n v-if=\"description\"\n id=\"descriptionId\"\n class=\"b-selection-card__description\"\n el=\"span\"\n variant=\"body\"\n >\n {{ description }}\n </bento-typography>\n </label>\n </div>\n <radio-input\n v-if=\"isRadioInput\"\n :id=\"inputId\"\n ref=\"inputRef\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"description ? descriptionId : undefined\"\n :disabled=\"disabled\"\n :has-error=\"hasError\"\n :aria-readonly=\"readonly ?? undefined\"\n :value=\"value\"\n :readonly=\"readonly\"\n :model-value=\"computedRadioInputModelValue\"\n />\n <checkbox-input\n v-else\n :id=\"inputId\"\n ref=\"inputRef\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"description ? descriptionId : undefined\"\n :disabled=\"disabled\"\n :has-error=\"hasError\"\n :aria-readonly=\"readonly ?? undefined\"\n :value=\"value\"\n :readonly=\"readonly\"\n :model-value=\"computedCheckboxInputModelValue\"\n />\n </div>\n <bento-typography\n v-if=\"hasSlot('content')\"\n ref=\"slotRef\"\n el=\"div\"\n class=\"b-selection-card__slot\"\n :class=\"slotConditionalClasses\"\n >\n <slot name=\"content\" />\n </bento-typography>\n <bento-typography\n v-if=\"hasSlot('dynamicContent') && isChecked\"\n ref=\"dynamicSlotRef\"\n el=\"div\"\n class=\"b-selection-card__slot\"\n :class=\"slotConditionalClasses\"\n >\n <slot name=\"dynamicContent\" />\n </bento-typography>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTypography } from '@/components/typography';\n import { CheckboxInput } from '../internal/checkbox-input';\n import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n import { type BentoCheckboxType, type BentoMultiCheckboxType } from '@/types/checkbox';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue';\n import { useHasSlot } from '@/composables';\n import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types';\n import { BentoSelectionCardState } from './selection-card.types';\n import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys';\n\n const props = defineProps({\n /*\n The description of the selection card\n /\n description: {\n type: String,\n default: undefined,\n },\n\n /\n Disables the selection card\n /\n disabled: { type: Boolean, default: false },\n\n /\n Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.\n /\n fullyClickable: { type: Boolean, default: false },\n\n /\n Shows the selection card in error state\n /\n hasError: { type: Boolean, default: false },\n\n /\n This property should not be used directly.\n * It will be used by v-model directive on selection card component.\n \n When handling a single input, use a string or a number.\n \n When handling multiple inputs, use an array of keys.\n * These keys exist as a set \"value\" prop for each input.\n /\n modelValue: {\n type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>,\n default: null,\n },\n\n /\n Sets the selection card to readonly\n /\n readonly: { type: Boolean, default: false },\n\n /\n The subtitle of the selection card\n /\n subtitle: {\n type: String,\n default: undefined,\n },\n\n /\n The title of the selection card\n /\n title: {\n type: String,\n required: true,\n },\n\n /\n Indicates the value of the input that will be returned when it's checked.\n /\n value: {\n type: [String, Number] as PropType<BentoSelectionCardValue>,\n required: true,\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const inputId = generateUid('selection-card-input-id');\n const descriptionId = generateUid('selection-card-description');\n\n const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n () => props.modelValue as RadioInputValue\n );\n const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n () => props.modelValue as BentoCheckboxType\n );\n\n const conditionalClasses = computed(() => ({\n 'b-selection-card--checked': isChecked.value,\n 'b-selection-card--fully-clickable': props.fullyClickable,\n }));\n\n const containerConditionalClasses = computed(() => ({\n [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n 'b-selection-card--center-aligned': isTitleOnly.value,\n }));\n\n const checkboxContainerConditionalClasses = computed(() => ({\n 'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n }));\n\n const checkboxContainerTextConditionalClasses = computed(() => ({\n 'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n }));\n\n const slotConditionalClasses = computed(() => ({\n 'b-selection-card__slot--with-icon': hasSlot('icon'),\n }));\n\n const ariaLabel = useAriaLabel({\n ariaLabel: props.title,\n label: props.value as string,\n });\n\n const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n const isChecked: ComputedRef<boolean> = computed(() => {\n if (isRadioInput.value) {\n return props.value === props.modelValue;\n }\n if (!isCheckboxGroup.value) {\n return props.modelValue as boolean;\n }\n\n return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n });\n\n const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n const inputRef = ref<InstanceType<typeof RadioInput> \| InstanceType<typeof CheckboxInput>>(null);\n const slotRef = ref(null);\n const dynamicSlotRef = ref(null);\n\n // Handle click on the whole card area\n const handleCardClick = (event: Event) => {\n if (inputRef.value.$refs.inputRef === event.target) {\n const newValue = toggleInput();\n onChange(newValue);\n return;\n }\n\n // Do nothing if disabled or readonly\n if (props.disabled && props.readonly) {\n return;\n }\n\n // If it's not fully clickable prevent selecting the card if the click\n // originated in a slot\n if (!props.fullyClickable) {\n // Check if the click originated from the slot - in that case, do nothng\n if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n return;\n }\n // Check if the click originated from the dynamic slot - in that case, do nothng\n if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n return;\n }\n // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) {\n return;\n }\n }\n\n // If the click originated outside of these two areas, emit the change event\n const newValue = toggleInput();\n\n onChange(newValue);\n };\n\n const toggleInput = (): BentoSelectionCardModelValue => {\n const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n if (isCheckboxGroup.value) {\n const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n const index = newCheckedList.indexOf(props.value);\n\n if (index === -1) {\n newCheckedList.push(props.value);\n } else {\n newCheckedList.splice(index, 1);\n }\n return newCheckedList;\n }\n\n if (isRadioInput.value) {\n return props.value;\n }\n return currentValue;\n };\n\n const onChange = newValue => {\n if (!props.disabled && !props.readonly) {\n emit('update:model-value', newValue);\n emit('input', newValue);\n }\n };\n</script>\n\n<script lang=\"ts\">\n /\n Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n \n @example\n * import { BentoSelectionCard } from '@adyen/bento-vue2';\n * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n \n export default {\n * components: { BentoSelectionCard, EmoticonHappyIcon },\n * template: `\n * <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n * <template #icon>\n * <emoticon-happy-icon />\n * </template>\n * </bento-selection-card>\n * `\n * }\n /\n export default {\n name: 'bento-selection-card',\n };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n <controls-group\n ref=\"containerRef\"\n :aria-describedby=\"shouldShowGroupError ? errorMessageId : null\"\n :aria-required=\"required\"\n :label=\"label\"\n :hide-label=\"hideLabel\"\n :description=\"description\"\n :disabled=\"disabled\"\n :tooltip-text=\"tooltipText\"\n :readonly=\"readonly\"\n :required=\"required\"\n :optional=\"optional\"\n class=\"b-selection-card-group\"\n component-name=\"selection-card-group\"\n >\n <div\n v-if=\"!itemsPerRow \|\| layout === 'vertical'\"\n class=\"b-selection-card-group__items\"\n :class=\"conditionalItemsClasses\"\n >\n <bento-selection-card\n v-for=\"item in items\"\n :key=\"`selection-card-${item.value}`\"\n class=\"b-selection-card-group__item\"\n v-bind=\"item\"\n :model-value=\"inputValue\"\n :readonly=\"readonly \|\| item.readonly\"\n :has-error=\"shouldShowGroupError\"\n :disabled=\"disabled \|\| item.disabled\"\n @update:model-value=\"onInput\"\n >\n <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n <slot name=\"icon\" v-bind=\"item\"></slot>\n </template>\n <template v-if=\"hasSlot('content') && item.content\" #content>\n <slot name=\"content\" v-bind=\"item\"></slot>\n </template>\n <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n </template>\n </bento-selection-card>\n </div>\n <template v-else>\n <div :key=\"`selection-card-group-layout-breakpoint-${currentBreakpoint}`\">\n <grid-layout\n v-for=\"(row, rowIndex) in computedRows\"\n :key=\"`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`\"\n class=\"b-selection-card-group__items--wrap\"\n :column-width=\"computedColumnWidth\"\n >\n <template v-for=\"(item, columnIndex) in row\" #[`col-${Number(columnIndex)+1}`]>\n <bento-selection-card\n :key=\"`selection-card-${item.value}`\"\n class=\"b-selection-card-group__item b-selection-card-group__item--full-height\"\n v-bind=\"item\"\n :model-value=\"inputValue\"\n :readonly=\"readonly \|\| item.readonly\"\n :has-error=\"shouldShowGroupError\"\n :disabled=\"disabled \|\| item.disabled\"\n @update:model-value=\"onInput\"\n >\n <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n <slot name=\"icon\" v-bind=\"item\"></slot>\n </template>\n <template v-if=\"hasSlot('content') && item.content\" #content>\n <slot name=\"content\" v-bind=\"item\"></slot>\n </template>\n <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n </template>\n </bento-selection-card>\n </template>\n </grid-layout>\n </div>\n </template>\n <error-message\n v-if=\"shouldShowGroupError\"\n :id=\"errorMessageId\"\n :error-message=\"errorMessage\"\n class=\"b-selection-card-group__error-message\"\n />\n </controls-group>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onMounted, provide, ref, useSlots, watch } from 'vue';\n import { useElementSize } from '@vueuse/core';\n import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types';\n import BentoSelectionCard from '../../selection-card.vue';\n import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal';\n import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = defineProps({\n description: { default: null },\n disabled: { type: Boolean, default: false },\n errorMessage: { default: null },\n label: { default: null },\n optional: { type: Boolean, default: false },\n placeholder: null,\n readonly: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n tooltipText: { default: null },\n formId: { default: null },\n hideLabel: { type: Boolean, default: null },\n layout: { default: 'vertical' },\n items: null,\n itemsPerRow: { default: undefined },\n modelValue: { default: null },\n variant: { default: 'checkbox' }\n});\n\n const emit = defineEmits([\"update:model-value\"]);\n\n const { emitValue } = useFormFieldEmits(emit);\n\n const slots = useSlots();\n // Slots logic\n // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n // We do the same in bento-checkbox-group\n const hasSlot = name => !!slots[name];\n\n const conditionalItemsClasses = computed(() => ({\n 'b-selection-card-group__items--horizontal': props.layout === 'horizontal',\n }));\n\n const inputValue = ref(props.modelValue);\n watch(\n () => props.modelValue,\n () => {\n inputValue.value = props.modelValue;\n }\n );\n\n // Error message logic\n const errorMessageId = generateUid('error');\n const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n // itemsPerRow logic\n const containerRef = ref<HTMLElement \| null>(null);\n const { width } = useElementSize(containerRef);\n\n const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]);\n const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]);\n\n const currentBreakpoint = computed(() => {\n if (width.value < smallBreakpoint.value) {\n return 'small';\n }\n if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) {\n return 'medium';\n }\n return 'large';\n });\n\n const computedItemsPerRow = computed(() => {\n return (props.itemsPerRow?.[currentBreakpoint?.value] as number) \|\| props.items.length;\n });\n\n const computedRows = computed(() => {\n if (!props.itemsPerRow) {\n return [];\n }\n const rows = [];\n for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) {\n rows.push(props.items.slice(i, i + computedItemsPerRow?.value));\n }\n return rows;\n });\n\n // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic\n const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value);\n\n /\n Filling the columnWidth array with the same parameters per item to pass\n * to the `grid-layout` layout so the each card can have\n * the same width according to the screen size.\n /\n const computedColumnWidth = computed(() => {\n return computedItemsPerRow?.value\n ? new Array(computedItemsPerRow?.value).fill({\n // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy\n small: itemColumnWidth.value,\n medium: itemColumnWidth.value,\n large: itemColumnWidth.value,\n })\n : [];\n });\n\n const onInput = value => {\n inputValue.value = value;\n emitValue(value);\n };\n\n const isRadioVariant = computed(() => props.variant === 'radio');\n\n provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant);\n\n onMounted(() => {\n if (props.itemsPerRow) {\n Object.values(props.itemsPerRow).forEach(value => {\n const numericValue = Number(value);\n if (!Number.isInteger(numericValue) \|\| numericValue < 1 \|\| numericValue > 6) {\n throw new Error(\n 'itemsPerRow values must have a value between 1 and 6 items per row. Read the documentation for more information.'\n );\n }\n });\n }\n });\n</script>\n\n<script lang=\"ts\">\n /\n Group of bento-selection-cards.\n \n @example\n * import { BentoSelectionCardGroup } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoSelectionCardGroup },\n * template: `\n * <bento-selection-card-group\n * :items=\"[\n * {\n * title: 'Card 1',\n * value: 'card-1',\n * content: 'Slot content 1',\n * icon: RetailIcon,\n * },\n * {\n * title: 'Card 2',\n * value: 'card-2',\n * content: 'Slot content 2',\n * icon: LeafIcon,\n * },\n * ]\"\n * >\n * <template #icon=\"{ icon }\">\n * <component :is=\"icon\"/>\n * </template>\n * <template #content=\"{ content }\">\n * <div>{{ content }}</div>\n * </template>\n * </bento-selection-card-group>\n * `,\n * }\n */\n export default {\n model: { prop: 'modelValue', event: 'update:model-value' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./selection-card-group.scss\" />\n"],"names":["BentoSelectionCardState","BentoSelectionCardState2","SELECTION_CARD_RADIO_INPUT_INJECTION_KEY","__default__$1","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","newValue","currentValue","newCheckedList","index","emit","__default__","emitValue","useFormFieldEmits","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","containerRef","width","useElementSize","smallBreakpoint","BMediaQuerySMax","mediumBreakpoint","BMediaQueryMMax","currentBreakpoint","computedItemsPerRow","computedRows","rows","i","itemColumnWidth","computedColumnWidth","onInput","value","isRadioVariant","provide","onMounted","numericValue"],"mappings":"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"}
1	+ {"version":3,"file":"selection-card-group.BhbzoA3X.js","sources":["../../src/components/selection-card/selection-card.types.ts","../../src/components/selection-card/selection-card.keys.ts","../../src/components/selection-card/selection-card.vue","../../src/components/selection-card/components/selection-card-group/selection-card-group.vue"],"sourcesContent":["import { type RadioInputValue } from '@/components/internal/radio-input';\nimport { type BentoCheckboxType } from '@/types/checkbox';\nimport { type VueNodeElement } from '@/types/elements';\n\nexport enum BentoSelectionCardState {\n DISABLED = 'disabled',\n READONLY = 'readonly',\n ERROR = 'error',\n}\n\nexport type BentoSelectionCardValue = string \| number;\n\nexport type BentoSelectionCardModelValue = BentoCheckboxType \| RadioInputValue;\n\nexport interface BentoSelectionCardItem {\n content?: string \| object;\n description?: string;\n disabled?: boolean;\n dynamicContent?: string \| object;\n fullyClickable?: boolean;\n hasError?: boolean;\n icon?: VueNodeElement;\n readonly?: boolean;\n subtitle?: string;\n title: string;\n value: BentoSelectionCardValue;\n}\n","export const SELECTION_CARD_RADIO_INPUT_INJECTION_KEY = Symbol('selection card radio input injection key');\n","<template>\n <div class=\"b-selection-card\" :class=\"conditionalClasses\" @click=\"handleCardClick\">\n <div class=\"b-selection-card__container\" :class=\"containerConditionalClasses\">\n <div class=\"b-selection-card__checkbox-container\" :class=\"checkboxContainerConditionalClasses\">\n <div class=\"b-selection-card__checkbox-container-text\" :class=\"checkboxContainerTextConditionalClasses\">\n <div v-if=\"hasSlot('icon')\" class=\"b-selection-card__icon\" role=\"presentation\" aria-hidden=\"true\">\n <slot name=\"icon\" />\n </div>\n <label :for=\"inputId\" class=\"b-selection-card__text\" @click.stop.prevent=\"handleCardClick\">\n <bento-typography\n v-if=\"subtitle\"\n class=\"b-selection-card__description\"\n el=\"span\"\n variant=\"caption\"\n >\n {{ subtitle }}\n </bento-typography>\n <bento-typography el=\"span\" variant=\"title\">{{ title }}</bento-typography>\n <bento-typography\n v-if=\"description\"\n id=\"descriptionId\"\n class=\"b-selection-card__description\"\n el=\"span\"\n variant=\"body\"\n >\n {{ description }}\n </bento-typography>\n </label>\n </div>\n <radio-input\n v-if=\"isRadioInput\"\n :id=\"inputId\"\n ref=\"inputRef\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"description ? descriptionId : undefined\"\n :disabled=\"disabled\"\n :has-error=\"hasError\"\n :aria-readonly=\"readonly ?? undefined\"\n :value=\"value\"\n :readonly=\"readonly\"\n :model-value=\"computedRadioInputModelValue\"\n />\n <checkbox-input\n v-else\n :id=\"inputId\"\n ref=\"inputRef\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"description ? descriptionId : undefined\"\n :disabled=\"disabled\"\n :has-error=\"hasError\"\n :aria-readonly=\"readonly ?? undefined\"\n :value=\"value\"\n :readonly=\"readonly\"\n :model-value=\"computedCheckboxInputModelValue\"\n />\n </div>\n <bento-typography\n v-if=\"hasSlot('content')\"\n ref=\"slotRef\"\n el=\"div\"\n class=\"b-selection-card__slot\"\n :class=\"slotConditionalClasses\"\n >\n <slot name=\"content\" />\n </bento-typography>\n <bento-typography\n v-if=\"hasSlot('dynamicContent') && isChecked\"\n ref=\"dynamicSlotRef\"\n el=\"div\"\n class=\"b-selection-card__slot\"\n :class=\"slotConditionalClasses\"\n >\n <slot name=\"dynamicContent\" />\n </bento-typography>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoTypography } from '@/components/typography';\n import { CheckboxInput } from '../internal/checkbox-input';\n import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n import { type BentoCheckboxType, type BentoMultiCheckboxType } from '@/types/checkbox';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue';\n import { useHasSlot } from '@/composables';\n import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types';\n import { BentoSelectionCardState } from './selection-card.types';\n import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys';\n\n const props = defineProps({\n /*\n The description of the selection card\n /\n description: {\n type: String,\n default: undefined,\n },\n\n /\n Disables the selection card\n /\n disabled: { type: Boolean, default: false },\n\n /\n Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible.\n /\n fullyClickable: { type: Boolean, default: false },\n\n /\n Shows the selection card in error state\n /\n hasError: { type: Boolean, default: false },\n\n /\n This property should not be used directly.\n * It will be used by v-model directive on selection card component.\n \n When handling a single input, use a string or a number.\n \n When handling multiple inputs, use an array of keys.\n * These keys exist as a set \"value\" prop for each input.\n /\n modelValue: {\n type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>,\n default: null,\n },\n\n /\n Sets the selection card to readonly\n /\n readonly: { type: Boolean, default: false },\n\n /\n The subtitle of the selection card\n /\n subtitle: {\n type: String,\n default: undefined,\n },\n\n /\n The title of the selection card\n /\n title: {\n type: String,\n required: true,\n },\n\n /\n Indicates the value of the input that will be returned when it's checked.\n /\n value: {\n type: [String, Number] as PropType<BentoSelectionCardValue>,\n required: true,\n },\n });\n\n const emit = defineEmits([\"input\", \"update:model-value\"]);\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const inputId = generateUid('selection-card-input-id');\n const descriptionId = generateUid('selection-card-description');\n\n const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed(\n () => props.modelValue as RadioInputValue\n );\n const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed(\n () => props.modelValue as BentoCheckboxType\n );\n\n const conditionalClasses = computed(() => ({\n 'b-selection-card--checked': isChecked.value,\n 'b-selection-card--fully-clickable': props.fullyClickable,\n }));\n\n const containerConditionalClasses = computed(() => ({\n [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled,\n [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError,\n [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly,\n 'b-selection-card--center-aligned': isTitleOnly.value,\n }));\n\n const checkboxContainerConditionalClasses = computed(() => ({\n 'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value,\n }));\n\n const checkboxContainerTextConditionalClasses = computed(() => ({\n 'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value,\n }));\n\n const slotConditionalClasses = computed(() => ({\n 'b-selection-card__slot--with-icon': hasSlot('icon'),\n }));\n\n const ariaLabel = useAriaLabel({\n ariaLabel: props.title,\n label: props.value as string,\n });\n\n const isCheckboxGroup = computed(() => Array.isArray(props.modelValue));\n\n const isChecked: ComputedRef<boolean> = computed(() => {\n if (isRadioInput.value) {\n return props.value === props.modelValue;\n }\n if (!isCheckboxGroup.value) {\n return props.modelValue as boolean;\n }\n\n return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value);\n });\n\n const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false));\n\n const isTitleOnly = computed(() => !props.subtitle && !props.description);\n\n const inputRef = ref<InstanceType<typeof RadioInput> \| InstanceType<typeof CheckboxInput>>(null);\n const slotRef = ref(null);\n const dynamicSlotRef = ref(null);\n\n // Handle click on the whole card area\n const handleCardClick = (event: Event) => {\n if (inputRef.value.$refs.inputRef === event.target) {\n const newValue = toggleInput();\n onChange(newValue);\n return;\n }\n\n // Do nothing if disabled or readonly\n if (props.disabled && props.readonly) {\n return;\n }\n\n // If it's not fully clickable prevent selecting the card if the click\n // originated in a slot\n if (!props.fullyClickable) {\n // Check if the click originated from the slot - in that case, do nothng\n if (slotRef.value && slotRef.value?.$el?.contains(event.target)) {\n return;\n }\n // Check if the click originated from the dynamic slot - in that case, do nothng\n if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) {\n return;\n }\n // Check if the click originated from the input - in that case do nothing, as the input will emit the event already\n if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) {\n return;\n }\n }\n\n // If the click originated outside of these two areas, emit the change event\n const newValue = toggleInput();\n\n onChange(newValue);\n };\n\n const toggleInput = (): BentoSelectionCardModelValue => {\n const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked;\n\n if (isCheckboxGroup.value) {\n const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)];\n const index = newCheckedList.indexOf(props.value);\n\n if (index === -1) {\n newCheckedList.push(props.value);\n } else {\n newCheckedList.splice(index, 1);\n }\n return newCheckedList;\n }\n\n if (isRadioInput.value) {\n return props.value;\n }\n return currentValue;\n };\n\n const onChange = newValue => {\n if (!props.disabled && !props.readonly) {\n emit('update:model-value', newValue);\n emit('input', newValue);\n }\n };\n</script>\n\n<script lang=\"ts\">\n /\n Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component.\n \n @example\n * import { BentoSelectionCard } from '@adyen/bento-vue2';\n * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n \n export default {\n * components: { BentoSelectionCard, EmoticonHappyIcon },\n * template: `\n * <bento-selection-card title=\"Card title\" :model-value.sync=\"yourModelValue\">\n * <template #icon>\n * <emoticon-happy-icon />\n * </template>\n * </bento-selection-card>\n * `\n * }\n /\n export default {\n name: 'bento-selection-card',\n };\n</script>\n<style lang=\"scss\" scoped src=\"./selection-card.scss\" />\n","<template>\n <controls-group\n ref=\"containerRef\"\n :aria-describedby=\"shouldShowGroupError ? errorMessageId : null\"\n :aria-required=\"required\"\n :label=\"label\"\n :hide-label=\"hideLabel\"\n :description=\"description\"\n :disabled=\"disabled\"\n :tooltip-text=\"tooltipText\"\n :readonly=\"readonly\"\n :required=\"required\"\n :optional=\"optional\"\n class=\"b-selection-card-group\"\n component-name=\"selection-card-group\"\n >\n <div\n v-if=\"!itemsPerRow \|\| layout === 'vertical'\"\n class=\"b-selection-card-group__items\"\n :class=\"conditionalItemsClasses\"\n >\n <bento-selection-card\n v-for=\"item in items\"\n :key=\"`selection-card-${item.value}`\"\n class=\"b-selection-card-group__item\"\n v-bind=\"item\"\n :model-value=\"inputValue\"\n :readonly=\"readonly \|\| item.readonly\"\n :has-error=\"shouldShowGroupError\"\n :disabled=\"disabled \|\| item.disabled\"\n @update:model-value=\"onInput\"\n >\n <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n <slot name=\"icon\" v-bind=\"item\"></slot>\n </template>\n <template v-if=\"hasSlot('content') && item.content\" #content>\n <slot name=\"content\" v-bind=\"item\"></slot>\n </template>\n <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n </template>\n </bento-selection-card>\n </div>\n <template v-else>\n <div :key=\"`selection-card-group-layout-breakpoint-${currentBreakpoint}`\">\n <grid-layout\n v-for=\"(row, rowIndex) in computedRows\"\n :key=\"`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`\"\n class=\"b-selection-card-group__items--wrap\"\n :column-width=\"computedColumnWidth\"\n >\n <template v-for=\"(item, columnIndex) in row\" #[`col-${Number(columnIndex)+1}`]>\n <bento-selection-card\n :key=\"`selection-card-${item.value}`\"\n class=\"b-selection-card-group__item b-selection-card-group__item--full-height\"\n v-bind=\"item\"\n :model-value=\"inputValue\"\n :readonly=\"readonly \|\| item.readonly\"\n :has-error=\"shouldShowGroupError\"\n :disabled=\"disabled \|\| item.disabled\"\n @update:model-value=\"onInput\"\n >\n <template v-if=\"hasSlot('icon') && item.icon\" #icon>\n <slot name=\"icon\" v-bind=\"item\"></slot>\n </template>\n <template v-if=\"hasSlot('content') && item.content\" #content>\n <slot name=\"content\" v-bind=\"item\"></slot>\n </template>\n <template v-if=\"hasSlot('dynamicContent') && item.dynamicContent\" #dynamicContent>\n <slot name=\"dynamicContent\" v-bind=\"item\"></slot>\n </template>\n </bento-selection-card>\n </template>\n </grid-layout>\n </div>\n </template>\n <error-message\n v-if=\"shouldShowGroupError\"\n :id=\"errorMessageId\"\n :error-message=\"errorMessage\"\n class=\"b-selection-card-group__error-message\"\n />\n </controls-group>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onMounted, provide, ref, useSlots, watch } from 'vue';\n import { useElementSize } from '@vueuse/core';\n import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types';\n import BentoSelectionCard from '../../selection-card.vue';\n import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal';\n import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n const props = defineProps({\n description: { default: null },\n disabled: { type: Boolean, default: false },\n errorMessage: { default: null },\n label: { default: null },\n optional: { type: Boolean, default: false },\n placeholder: null,\n readonly: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n tooltipText: { default: null },\n formId: { default: null },\n hideLabel: { type: Boolean, default: null },\n layout: { default: 'vertical' },\n items: null,\n itemsPerRow: { default: undefined },\n modelValue: { default: null },\n variant: { default: 'checkbox' }\n});\n\n const emit = defineEmits([\"update:model-value\"]);\n\n const { emitValue } = useFormFieldEmits(emit);\n\n const slots = useSlots();\n // Slots logic\n // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n // We do the same in bento-checkbox-group\n const hasSlot = name => !!slots[name];\n\n const conditionalItemsClasses = computed(() => ({\n 'b-selection-card-group__items--horizontal': props.layout === 'horizontal',\n }));\n\n const inputValue = ref(props.modelValue);\n watch(\n () => props.modelValue,\n () => {\n inputValue.value = props.modelValue;\n }\n );\n\n // Error message logic\n const errorMessageId = generateUid('error');\n const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n // itemsPerRow logic\n const containerRef = ref<HTMLElement \| null>(null);\n const { width } = useElementSize(containerRef);\n\n const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]);\n const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]);\n\n const currentBreakpoint = computed(() => {\n if (width.value < smallBreakpoint.value) {\n return 'small';\n }\n if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) {\n return 'medium';\n }\n return 'large';\n });\n\n const computedItemsPerRow = computed(() => {\n return (props.itemsPerRow?.[currentBreakpoint?.value] as number) \|\| props.items.length;\n });\n\n const computedRows = computed(() => {\n if (!props.itemsPerRow) {\n return [];\n }\n const rows = [];\n for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) {\n rows.push(props.items.slice(i, i + computedItemsPerRow?.value));\n }\n return rows;\n });\n\n // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic\n const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value);\n\n /\n Filling the columnWidth array with the same parameters per item to pass\n * to the `grid-layout` layout so the each card can have\n * the same width according to the screen size.\n /\n const computedColumnWidth = computed(() => {\n return computedItemsPerRow?.value\n ? new Array(computedItemsPerRow?.value).fill({\n // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy\n small: itemColumnWidth.value,\n medium: itemColumnWidth.value,\n large: itemColumnWidth.value,\n })\n : [];\n });\n\n const onInput = value => {\n inputValue.value = value;\n emitValue(value);\n };\n\n const isRadioVariant = computed(() => props.variant === 'radio');\n\n provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant);\n\n onMounted(() => {\n if (props.itemsPerRow) {\n Object.values(props.itemsPerRow).forEach(value => {\n const numericValue = Number(value);\n if (!Number.isInteger(numericValue) \|\| numericValue < 1 \|\| numericValue > 6) {\n throw new Error(\n 'itemsPerRow values must have a value between 1 and 6 items per row. Read the documentation for more information.'\n );\n }\n });\n }\n });\n</script>\n\n<script lang=\"ts\">\n /\n Group of bento-selection-cards.\n \n @example\n * import { BentoSelectionCardGroup } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoSelectionCardGroup },\n * template: `\n * <bento-selection-card-group\n * :items=\"[\n * {\n * title: 'Card 1',\n * value: 'card-1',\n * content: 'Slot content 1',\n * icon: RetailIcon,\n * },\n * {\n * title: 'Card 2',\n * value: 'card-2',\n * content: 'Slot content 2',\n * icon: LeafIcon,\n * },\n * ]\"\n * >\n * <template #icon=\"{ icon }\">\n * <component :is=\"icon\"/>\n * </template>\n * <template #content=\"{ content }\">\n * <div>{{ content }}</div>\n * </template>\n * </bento-selection-card-group>\n * `,\n * }\n */\n export default {\n model: { prop: 'modelValue', event: 'update:model-value' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./selection-card-group.scss\" />\n"],"names":["BentoSelectionCardState","BentoSelectionCardState2","SELECTION_CARD_RADIO_INPUT_INJECTION_KEY","__default__$1","slots","useSlots","hasSlot","useHasSlot","inputId","generateUid","descriptionId","computedRadioInputModelValue","computed","props","computedCheckboxInputModelValue","conditionalClasses","isChecked","containerConditionalClasses","isTitleOnly","checkboxContainerConditionalClasses","checkboxContainerTextConditionalClasses","slotConditionalClasses","ariaLabel","useAriaLabel","isCheckboxGroup","isRadioInput","item","inject","ref","inputRef","slotRef","dynamicSlotRef","handleCardClick","event","newValue2","toggleInput","onChange","newValue","currentValue","newCheckedList","index","emit","__default__","emitValue","useFormFieldEmits","name","conditionalItemsClasses","inputValue","watch","errorMessageId","shouldShowGroupError","containerRef","width","useElementSize","smallBreakpoint","BMediaQuerySMax","mediumBreakpoint","BMediaQueryMMax","currentBreakpoint","computedItemsPerRow","computedRows","rows","i","itemColumnWidth","computedColumnWidth","onInput","value","isRadioVariant","provide","onMounted","numericValue"],"mappings":"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"}

package/dist/chunks/{sidepanel.CLbVkH7v.js → sidepanel.CbFGBFMX.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import { defineComponent as h, toRefs as k, ref as o, computed as P, onMounted as N, onUnmounted as G, watch as F, provide as g } from "vue";
 import { B as x, d as R } from "./typography.Cd386LC_.js";
-import { F as U } from "./footer-actions.B8f-gEQV.js";
+import { F as U } from "./footer-actions.CQYJ8Xvw.js";
 import { D as L } from "./dialog-page.DORdXmEm.js";
 import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as J } from "./button.tsTeQRcP.js";
-import { B as M } from "./focus-trap.fd6_d2EW.js";
+import { B as M } from "./focus-trap.BDpcWIxI.js";
 import { C as K } from "./cross.szJ_ZUTI.js";
-import { S as Y } from "./button-actions.CdetBz3J.js";
+import { S as Y } from "./button-actions.B332AjJp.js";
 import { u as w } from "./index.CPOlyau9.js";
 import { g as z } from "./generate-uid.DBWe4g6T.js";
 import { B as H, D as $, a as j } from "./dialog-page.keys.Dym9e6k3.js";
@@ -143,7 +143,7 @@ const ee = {
     },
     /**
      * Controls the visibility of close button on the sidepanel.
-     * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`.
+     * Defaults to `true` when `isDismissible=false`, and `false` when `isDismissible=true`.
      *
      * _Note: This property will be set to `false` by default, independent of `isDismissible` in v3.0.0_
      */
@@ -154,7 +154,7 @@ const ee = {
   },
   emits: [],
   setup(a, { emit: e }) {
-    const t = a, { activePage: s, isOpen: n } = k(t), { t: b } = w(), r = o(null), u = o([]), l = o([]), C = o(H.TRANSITION_LEVEL_DEEPER), p = o(!1), A = z("sidepanel"), d = o(!1), v = o(!1), _ = o(!1), D = P(() => ({
+    const t = a, { activePage: s, isOpen: n } = k(t), { t: D } = w(), r = o(null), u = o([]), l = o([]), C = o(H.TRANSITION_LEVEL_DEEPER), p = o(!1), A = z("sidepanel"), d = o(!1), v = o(!1), _ = o(!1), b = P(() => ({
       "b-sidepanel--hide": p.value,
       "b-sidepanel--animation": v.value
     })), O = () => {
@@ -190,7 +190,7 @@ const ee = {
       'BentoSidepanel "isDismissible" property’s behavior',
       'BentoSidepanel "isDismissible" will no longer hide the close button. Use "hideCloseButton=true" instead.',
       "3.0.0"
-    ), { __sfc: !0, props: t, emit: e, activePage: s, isOpen: n, t: b, sidepanel: r, pages: u, previousPages: l, animation: C, isClosing: p, sidepanelId: A, internalIsOpen: d, isAnimationActive: v, isMounted: _, conditionalClasses: D, closeSidepanelAfterAnimation: O, startCloseSidepanelAnimation: m, closeSidepanelOnClickOutside: S, computedHideCloseButton: T, updatePage: E, unregisterPage: y, registerPage: B, BentoButton: J, BentoFocusTrap: M, CrossIcon: K, vBentoClickOutsideDirective: V };
+    ), { __sfc: !0, props: t, emit: e, activePage: s, isOpen: n, t: D, sidepanel: r, pages: u, previousPages: l, animation: C, isClosing: p, sidepanelId: A, internalIsOpen: d, isAnimationActive: v, isMounted: _, conditionalClasses: b, closeSidepanelAfterAnimation: O, startCloseSidepanelAnimation: m, closeSidepanelOnClickOutside: S, computedHideCloseButton: T, updatePage: E, unregisterPage: y, registerPage: B, BentoButton: J, BentoFocusTrap: M, CrossIcon: K, vBentoClickOutsideDirective: V };
   }
 });
 var ae = function() {
@@ -205,7 +205,7 @@ var ae = function() {
   ie,
   !1,
   null,
-  "1b728c73"
+  "06088a46"
 );
 const Ee = oe.exports;
 export {
@@ -213,4 +213,4 @@ export {
   Ae as a,
   Ee as s
 };
-//# sourceMappingURL=sidepanel.CLbVkH7v.js.map
+//# sourceMappingURL=sidepanel.CbFGBFMX.js.map

package/dist/chunks/sidepanel.CbFGBFMX.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sidepanel.CbFGBFMX.js","sources":["../../src/components/sidepanel/components/sidepanel-page.vue","../../src/components/sidepanel/sidepanel.types.ts","../../src/components/sidepanel/sidepanel.vue"],"sourcesContent":["<template>\n <dialog-page class=\"b-sidepanel-page\" :page-id=\"pageId\" :previous-page=\"previousPage\">\n <template #header>\n <div class=\"b-sidepanel-page__header\">\n <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n {{ title }}\n </bento-typography>\n </div>\n </template>\n <template #content>\n <div class=\"b-sidepanel-page__content\">\n <bento-typography el=\"div\" variant=\"body\">\n <slot />\n </bento-typography>\n </div>\n </template>\n <template v-if=\"actions && actions.length > 0\" #footer>\n <div class=\"b-sidepanel-page__actions\">\n <footer-actions\n :actions=\"actions\"\n :actions-label=\"actionsLabel\"\n :destructive-actions=\"destructiveActions\"\n />\n </div>\n </template>\n </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n import { type PropType } from 'vue';\n\n import { type BentoButtonActionsList } from '@/components/button';\n import { BentoTypography } from '@/components/typography';\n import { FooterActions } from '@/components/internal/footer-actions';\n import { DialogPage } from '@/internal';\n\n defineProps({\n /**\n * List of actions that will be used to render the buttons.\n * First element in the list will be rendered as \"primary\".\n * All elements after the first will be rendered as \"secondary\".\n *\n * ```\n * [{\n * title: 'Primary',\n * event: () => { ... },\n * icon: FourPeopleIcon\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * }]\n * ```\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /**\n * Text label that is displayed left to the action buttons\n */\n actionsLabel: {\n type: String,\n default: null,\n },\n\n /**\n * If passed - sets first button color to red\n */\n destructiveActions: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Identifier of the page, used with activePage prop to handle sidepanel navigation\n */\n pageId: {\n type: String,\n default: undefined,\n },\n\n /**\n * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n * Used when the back button should not take the user to the natural previous page\n * Set to `null` to hide back button in the page\n */\n previousPage: {\n type: String,\n default: undefined,\n },\n\n /**\n * Title of the sidepanel page\n */\n title: {\n type: String,\n default: null,\n },\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * SidepanelPage is used to render different pages of Sidepanel component\n *\n * @example\n * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoSidepanel, BentoSidepanelPage },\n * template: `\n * <bento-sidepanel active-page='step1' is-open='true'>\n * <bento-sidepanel-page\n * title='Step 1'\n * pageId='step1'\n * :actions=\"[\n * {\n * title: 'Next step',\n * event: () => {\n * activePage.value = 'step2';\n * },\n * }]\">\n * Step 1 info\n * </bento-sidepanel-page>\n * <bento-sidepanel-page\n * title='Step 2'\n * pageId='step2'\n * :actions=\"[\n * {\n * title: 'Save',\n * event: () => {},\n * }]\">\n * Step 2 info\n * </bento-sidepanel-page>\n * </bento-sidepanel>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","export enum BentoSidepanelEvent {\n UPDATE_ACTIVE_PAGE = 'update:active-page',\n UPDATE_IS_OPEN = 'update:is-open',\n}\n","<template>\n <dialog\n ref=\"sidepanel\"\n class=\"b-sidepanel\"\n :class=\"conditionalClasses\"\n @animationend=\"closeSidepanelAfterAnimation\"\n @keydown.esc.prevent=\"isDismissible && startCloseSidepanelAnimation\"\n >\n <bento-focus-trap :id=\"sidepanelId\" v-bento-click-outside-directive=\"closeSidepanelOnClickOutside\">\n <div v-if=\"!computedHideCloseButton\" class=\"b-sidepanel__close-button\">\n <bento-button variant=\"tertiary\" @click=\"startCloseSidepanelAnimation\">\n <cross-icon :svg-title=\"t('close')\" />\n </bento-button>\n </div>\n <slot />\n </bento-focus-trap>\n </dialog>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, onMounted, onUnmounted, provide, ref, toRefs, watch } from 'vue';\n\n import { BentoButton } from '@/components/button';\n import { BentoFocusTrap } from '@/components/focus-trap';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n import { BentoSidepanelEvent } from './sidepanel.types';\n import {\n BentoDialogPageAnimation,\n type BentoDialogPageConfigData,\n type BentoDialogPageRegisterPage,\n DIALOG_PAGE_CONFIG_INJECTION_KEY,\n DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n } from '@/internal';\n\n import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys';\n\n import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n\n import { useI18n } from '@/utils/ts/i18n';\n\n import messages from './messages.json';\n import { generateUid } from '@/utils/ts/generate-uid';\n import { deprecate } from '@/utils/ts/deprecate';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n /**\n * The id of the current active page\n * Should be the same id as the BentoSidepanelPage to be displayed\n * If the component only has one page, it can be left null/undefined.\n */\n activePage: {\n type: String,\n default: null,\n },\n\n /**\n * If set to true, it allows the sidepanel to be closed.\n * Shows close button when `true` and hides close button when `false`.\n *\n * _Note: This property will not set the visibility of the close button in v3.0.0_\n */\n isDismissible: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel.\n */\n isOpen: {\n type: Boolean,\n default: null,\n },\n\n /**\n * Controls the visibility of close button on the sidepanel.\n * Defaults to `true` when `isDismissible=false`, and `false` when `isDismissible=true`.\n *\n * _Note: This property will be set to `false` by default, independent of `isDismissible` in v3.0.0_\n */\n hideCloseButton: {\n type: Boolean,\n default: null,\n },\n });\n\n const emit = defineEmits([]);\n\n // Refs\n const { activePage, isOpen } = toRefs(props);\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const sidepanel = ref(null);\n const pages = ref<Array<string>>([]);\n const previousPages = ref([]);\n const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n const isClosing = ref(false);\n const sidepanelId = generateUid('sidepanel');\n const internalIsOpen = ref(false);\n const isAnimationActive = ref(false);\n const isMounted = ref(false);\n\n // Animation styling\n const conditionalClasses = computed(() => ({\n 'b-sidepanel--hide': isClosing.value,\n 'b-sidepanel--animation': isAnimationActive.value,\n }));\n\n // Handle closing and closing animation for dialog element\n const closeSidepanelAfterAnimation = () => {\n if (isClosing.value && sidepanel.value) {\n sidepanel.value.close();\n if (previousPages.value[0]) {\n emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n }\n previousPages.value = [];\n isClosing.value = false;\n internalIsOpen.value = false;\n emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n }\n };\n\n const startCloseSidepanelAnimation = () => {\n if (!sidepanel.value || !sidepanel.value.open) {\n return;\n }\n isClosing.value = true;\n };\n\n const closeSidepanelOnClickOutside = () => {\n if (props.isDismissible) {\n startCloseSidepanelAnimation();\n }\n };\n\n // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`.\n const computedHideCloseButton = computed(() => {\n if (props.hideCloseButton !== null) {\n return props.hideCloseButton;\n }\n\n return !props.isDismissible;\n });\n\n onMounted(() => {\n isMounted.value = true;\n });\n\n onUnmounted(() => {\n isMounted.value = false;\n });\n\n // Watching isOpen prop to toggle open/close the dialog element\n watch(\n [() => isOpen.value, sidepanel],\n ([newIsOpen, newSidepanelValue]) => {\n if (!isMounted.value || !newSidepanelValue) {\n return;\n }\n\n if (newIsOpen) {\n internalIsOpen.value = true;\n if (!newSidepanelValue.open) {\n newSidepanelValue.showModal();\n }\n if (!previousPages.value.length) {\n previousPages.value.push(activePage.value);\n }\n } else if (newSidepanelValue.open) {\n startCloseSidepanelAnimation();\n }\n },\n { immediate: true, flush: 'post' }\n );\n\n // Pages\n const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page);\n\n // unregister page if removed / destroyed\n const unregisterPage = (pageIdToRemove: string) => () => {\n pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n };\n\n // Provide data and function to register page to subcomponent\n const registerPage: BentoDialogPageRegisterPage = pageId => {\n pages.value.push(pageId);\n\n return { unregisterPage: unregisterPage(pageId) };\n };\n\n provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n activePage,\n animation,\n isAnimationActive,\n isOpen: internalIsOpen,\n pages,\n previousPages,\n updatePage,\n });\n provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n\n // Let's Children components know they are inside a SidePanel (dialog element)\n provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId);\n\n if (!props.isDismissible && props.hideCloseButton === null) {\n deprecate(\n 'BentoSidepanel \"isDismissible\" property’s behavior',\n 'BentoSidepanel \"isDismissible\" will no longer hide the close button. Use \"hideCloseButton=true\" instead.',\n '3.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /**\n * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen.\n *\n * @example\n * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoSidepanel, BentoSidepanelPage },\n * template: `\n * <bento-sidepanel active-page='step1' is-open='true'>\n * <bento-sidepanel-page\n * title='Step 1'\n * pageId='step1'\n * :actions=\"[\n * {\n * title: 'Next step',\n * event: () => {\n * activePage.value = 'step2';\n * },\n * }]\">\n * Step 1 info\n * </bento-sidepanel-page>\n * <bento-sidepanel-page\n * title='Step 2'\n * pageId='step2'\n * :actions=\"[\n * {\n * title: 'Save',\n * event: () => {},\n * }]\">\n * Step 2 info\n * </bento-sidepanel-page>\n * </bento-sidepanel>\n * `\n * }\n */\n export default {\n i18n: { messages },\n name: 'bento-sidepanel',\n };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["__default__$1","BentoSidepanelEvent","BentoSidepanelEvent2","__default__","messages","activePage","isOpen","toRefs","props","t","useI18n","sidepanel","ref","pages","previousPages","animation","BentoDialogPageAnimation","isClosing","sidepanelId","generateUid","internalIsOpen","isAnimationActive","isMounted","conditionalClasses","computed","closeSidepanelAfterAnimation","emit","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","computedHideCloseButton","onMounted","onUnmounted","watch","newIsOpen","newSidepanelValue","updatePage","page","unregisterPage","pageIdToRemove","pageId","registerPage","provide","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_DIALOG_ID_INJECTION_KEY","deprecate"],"mappings":"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"}

package/dist/chunks/{structured-list-item.BgcR0XlO.js → structured-list-item.C-9xk326.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import { defineComponent as i, inject as n, computed as o, provide as b, ref as v } from "vue";
 import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as C } from "./button.tsTeQRcP.js";
-import { B } from "./info-icon.D11usblr.js";
+import { B } from "./info-icon.D_VTjUV3.js";
 import { B as S } from "./typography.Cd386LC_.js";
-import { C as T } from "./copy.B12-P_8A.js";
+import { C as T } from "./copy.Cmu6Z-5X.js";
 import { S as I } from "./search.Bzm6F8rR.js";
 import { u as L } from "./index.CPOlyau9.js";
-import { b as E } from "./tooltip.BOe7LOfD.js";
+import { b as E } from "./tooltip.BeDzwoCN.js";
 import "../assets/structured-list-item.css";
 const _ = /* @__PURE__ */ Symbol("structured list condensed style injection key"), p = /* @__PURE__ */ Symbol("structured list labels width injection key"), x = ["25-75", "33-66", "42-58", "50-50", "75-25", "66-33", "58-42"], D = {
   name: "bento-structured-list"
@@ -90,4 +90,4 @@ export {
   _ as S,
   M as a
 };
-//# sourceMappingURL=structured-list-item.BgcR0XlO.js.map
+//# sourceMappingURL=structured-list-item.C-9xk326.js.map

package/dist/chunks/{structured-list-item.BgcR0XlO.js.map → structured-list-item.C-9xk326.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"structured-list-item.~~BgcR0XlO~~.js","sources":["../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/structured-list.types.ts","../../src/components/structured-list/structured-list.vue","../../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' \| '33-66' \| '42-58' \| '50-50' \| '75-25' \| '66-33' \| '58-42';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50', '75-25', '66-33', '58-42'];\n","<template>\n <dl class=\"b-structured-list\">\n <slot />\n </dl>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, provide } from 'vue';\n import {\n STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n } from '@/components/structured-list/structured-list.keys';\n import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n const props = defineProps({\n labelsWidth: { default: null },\n layout: { default: '33-66' }\n});\n\n const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n const computedLayout = computed(() =>\n BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n );\n\n const computedLabelsWidth = computed(() => {\n if (isCondensed) {\n return '130px';\n }\n\n if (props.labelsWidth) {\n return `${props.labelsWidth}px`;\n }\n\n return `${computedLayout.value.split('-')[0]}%`;\n });\n\n provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n /*\n This is a list used to display pairs of information in a clear and organized manner.\n * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n \n @example\n * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoStructuredList, BentoStructuredListItem },\n * template: `\n * <bento-structured-list>\n * <bento-structured-list-item label=\"Payment\">\n * <bento-payment-method label=\"Klarna\" type=\"Klarna\" />\n * </bento-structured-list-item>\n * <bento-structured-list-item label=\"Amount\">\n * <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n * </bento-structured-list-item>\n * </bento-structured-list>\n * `\n * }\n /\n export default {\n name: 'bento-structured-list',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n <dt class=\"b-structured-list-item__label\" :style=\"computedLabelStyle\">\n <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n </dt>\n <dd class=\"b-structured-list-item__value\" :class=\"valueConditionalClasses\">\n <slot />\n <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" @click=\"emitCopy\" />\n <bento-button\n v-if=\"search\"\n v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : t('search')\"\n class=\"b-structured-list-item__icon\"\n variant=\"tertiary\"\n @click=\"search\"\n >\n <template #iconLeft>\n <search-icon :svg-title=\"t('search')\" />\n </template>\n </bento-button>\n </dd>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, ref, type Ref } from 'vue';\n\n // Components\n import { BentoButton } from '@/components/button';\n import { BentoInfoIcon } from '@/components/info-icon';\n import { BentoTypography } from '@/components/typography';\n import Copy from '@/components/internal/copy/copy.vue';\n import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n // Utils\n import { useI18n } from '@/utils/ts/i18n';\n\n // Directives\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n // Keys\n import {\n STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n } from '../../structured-list.keys';\n\n import messages from '../../messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const DEFAULT_LABELS_WIDTH = '33%';\n\n const props = defineProps({\n label: null,\n labelInfo: null,\n copy: null,\n search: { type: Function },\n searchTooltip: null,\n truncate: { type: Boolean }\n});\n\n const emit = defineEmits([\"copy\"]);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n const labelsWidth = inject<Ref<string>>(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, ref(DEFAULT_LABELS_WIDTH));\n const computedLabelStyle = computed(() => `flex-basis:${labelsWidth.value}`);\n const conditionalClasses = computed(() => ({\n 'b-structured-list-item--condensed': isCondensed,\n }));\n\n const valueConditionalClasses = computed(() => ({\n 'b-structured-list-item__value--truncate': props.truncate,\n }));\n\n const emitCopy = () => {\n emit('copy', props.copy);\n };\n\n const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n</script>\n\n<script lang=\"ts\">\n /\n This is an item of the `BentoStructuredList` meant to be used only with that component.\n * It consists of a label/value pair, and also the optional copy and search modifiers.\n \n @example\n * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoStructuredListItem, BentoStructuredListItem },\n * template: `\n * <bento-structured-list>\n * <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n * <bento-typography>\n * 143442642\n * </bento-status>\n * </bento-structured-list-item>\n * <bento-structured-list-item label=\"Amount\" copy='123456'>\n * <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n * </bento-structured-list-item>\n * </bento-structured-list>\n * `\n * }\n */\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__$1","isCondensed","inject","computedLayout","computed","props","computedLabelsWidth","provide","__default__","messages","DEFAULT_LABELS_WIDTH","t","useI18n","labelsWidth","ref","computedLabelStyle","conditionalClasses","valueConditionalClasses","emitCopy","emit","labelTypographyVariant"],"mappings":";;;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,+CAAA,GACAC,IAAA,uBAAA,4CAAA,GCAAC,IAAA,CAAA,SAAA,SAAA,SAAA,SAAA,SAAA,SAAA,OAAA,GC6DHC,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;iBA7CAC,IAAAC,EAAAL,GAAA,EAAA,GAEAM,IAAAC;AAAA,MAAuB,MAAAL,EAAA,SAAAM,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EC,IAAAF,EAAA,MACIH,IACI,UAGJI,EAAA,cACI,GAAAA,EAAA,WAAA,OAGJ,GAAAF,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA4C;AAGhD,WAAAI,EAAAT,GAAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GCqEAE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;iBA1DAC,IAAA,OAaA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAX,IAAAC,EAAAL,GAAA,EAAA,GACAgB,IAAAX,EAAAJ,GAAAgB,EAAAJ,CAAA,CAAA,GACAK,IAAAX,EAAA,MAAA,cAAAS,EAAA,KAAA,EAAA,GACAG,IAAAZ,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCgB,IAAAb,EAAA,OAAA;AAAA,MAAgD,2CAAAC,EAAA;AAAA,IACK,EAAA,GAGrDa,IAAA,MAAA;AACI,MAAAC,EAAA,QAAAd,EAAA,IAAA;AAAA,IAAuB,GAG3Be,IAAAhB,EAAA,MAAAH,IAAA,YAAA,MAAA;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"structured-list-item.C-9xk326.js","sources":["../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/structured-list.types.ts","../../src/components/structured-list/structured-list.vue","../../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' \| '33-66' \| '42-58' \| '50-50' \| '75-25' \| '66-33' \| '58-42';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50', '75-25', '66-33', '58-42'];\n","<template>\n <dl class=\"b-structured-list\">\n <slot />\n </dl>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, provide } from 'vue';\n import {\n STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n } from '@/components/structured-list/structured-list.keys';\n import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n const props = defineProps({\n labelsWidth: { default: null },\n layout: { default: '33-66' }\n});\n\n const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n const computedLayout = computed(() =>\n BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n );\n\n const computedLabelsWidth = computed(() => {\n if (isCondensed) {\n return '130px';\n }\n\n if (props.labelsWidth) {\n return `${props.labelsWidth}px`;\n }\n\n return `${computedLayout.value.split('-')[0]}%`;\n });\n\n provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n /*\n This is a list used to display pairs of information in a clear and organized manner.\n * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n \n @example\n * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoStructuredList, BentoStructuredListItem },\n * template: `\n * <bento-structured-list>\n * <bento-structured-list-item label=\"Payment\">\n * <bento-payment-method label=\"Klarna\" type=\"Klarna\" />\n * </bento-structured-list-item>\n * <bento-structured-list-item label=\"Amount\">\n * <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n * </bento-structured-list-item>\n * </bento-structured-list>\n * `\n * }\n /\n export default {\n name: 'bento-structured-list',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n <dt class=\"b-structured-list-item__label\" :style=\"computedLabelStyle\">\n <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n </dt>\n <dd class=\"b-structured-list-item__value\" :class=\"valueConditionalClasses\">\n <slot />\n <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" @click=\"emitCopy\" />\n <bento-button\n v-if=\"search\"\n v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : t('search')\"\n class=\"b-structured-list-item__icon\"\n variant=\"tertiary\"\n @click=\"search\"\n >\n <template #iconLeft>\n <search-icon :svg-title=\"t('search')\" />\n </template>\n </bento-button>\n </dd>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, ref, type Ref } from 'vue';\n\n // Components\n import { BentoButton } from '@/components/button';\n import { BentoInfoIcon } from '@/components/info-icon';\n import { BentoTypography } from '@/components/typography';\n import Copy from '@/components/internal/copy/copy.vue';\n import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n // Utils\n import { useI18n } from '@/utils/ts/i18n';\n\n // Directives\n import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n // Keys\n import {\n STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n } from '../../structured-list.keys';\n\n import messages from '../../messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const DEFAULT_LABELS_WIDTH = '33%';\n\n const props = defineProps({\n label: null,\n labelInfo: null,\n copy: null,\n search: { type: Function },\n searchTooltip: null,\n truncate: { type: Boolean }\n});\n\n const emit = defineEmits([\"copy\"]);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n const labelsWidth = inject<Ref<string>>(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, ref(DEFAULT_LABELS_WIDTH));\n const computedLabelStyle = computed(() => `flex-basis:${labelsWidth.value}`);\n const conditionalClasses = computed(() => ({\n 'b-structured-list-item--condensed': isCondensed,\n }));\n\n const valueConditionalClasses = computed(() => ({\n 'b-structured-list-item__value--truncate': props.truncate,\n }));\n\n const emitCopy = () => {\n emit('copy', props.copy);\n };\n\n const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n</script>\n\n<script lang=\"ts\">\n /\n This is an item of the `BentoStructuredList` meant to be used only with that component.\n * It consists of a label/value pair, and also the optional copy and search modifiers.\n \n @example\n * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoStructuredListItem, BentoStructuredListItem },\n * template: `\n * <bento-structured-list>\n * <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n * <bento-typography>\n * 143442642\n * </bento-status>\n * </bento-structured-list-item>\n * <bento-structured-list-item label=\"Amount\" copy='123456'>\n * <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n * </bento-structured-list-item>\n * </bento-structured-list>\n * `\n * }\n */\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__$1","isCondensed","inject","computedLayout","computed","props","computedLabelsWidth","provide","__default__","messages","DEFAULT_LABELS_WIDTH","t","useI18n","labelsWidth","ref","computedLabelStyle","conditionalClasses","valueConditionalClasses","emitCopy","emit","labelTypographyVariant"],"mappings":";;;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,+CAAA,GACAC,IAAA,uBAAA,4CAAA,GCAAC,IAAA,CAAA,SAAA,SAAA,SAAA,SAAA,SAAA,SAAA,OAAA,GC6DHC,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;iBA7CAC,IAAAC,EAAAL,GAAA,EAAA,GAEAM,IAAAC;AAAA,MAAuB,MAAAL,EAAA,SAAAM,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EC,IAAAF,EAAA,MACIH,IACI,UAGJI,EAAA,cACI,GAAAA,EAAA,WAAA,OAGJ,GAAAF,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA4C;AAGhD,WAAAI,EAAAT,GAAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GCqEAE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;iBA1DAC,IAAA,OAaA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAX,IAAAC,EAAAL,GAAA,EAAA,GACAgB,IAAAX,EAAAJ,GAAAgB,EAAAJ,CAAA,CAAA,GACAK,IAAAX,EAAA,MAAA,cAAAS,EAAA,KAAA,EAAA,GACAG,IAAAZ,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCgB,IAAAb,EAAA,OAAA;AAAA,MAAgD,2CAAAC,EAAA;AAAA,IACK,EAAA,GAGrDa,IAAA,MAAA;AACI,MAAAC,EAAA,QAAAd,EAAA,IAAA;AAAA,IAAuB,GAG3Be,IAAAhB,EAAA,MAAAH,IAAA,YAAA,MAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{summary-grid.types.Do2PZQGm.js → summary-grid.types.C4-lY9Xr.js} RENAMED Viewed

@@ -1,14 +1,14 @@
 import { defineComponent as c, useSlots as d, onMounted as k, provide as h, toRef as z, toRefs as P, inject as B, ref as D, computed as a } from "vue";
 import { u as p } from "./use-has-slot.C9lQZ6nz.js";
 import { S as M, a as x } from "./summary-grid.keys.Xx-W5a2w.js";
-import { G as R } from "./grid-layout.BeCrjPgT.js";
+import { G as R } from "./grid-layout.m-5ySv9K.js";
 import { n as m } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as g } from "./typography.Cd386LC_.js";
 import { u as G } from "./index.CPOlyau9.js";
-import { B as w } from "./dashed-underline.RcRbre03.js";
-import { B as L } from "./info-icon.D11usblr.js";
-import { B as E } from "./tag.CgsX8v2m.js";
-import { C as N } from "./copy.B12-P_8A.js";
+import { B as w } from "./dashed-underline.CCGmjCty.js";
+import { B as L } from "./info-icon.D_VTjUV3.js";
+import { B as E } from "./tag.DSyMRETc.js";
+import { C as N } from "./copy.Cmu6Z-5X.js";
 import "../assets/summary-grid.css";
 const A = {}, F = /* @__PURE__ */ c({
   ...A,
@@ -329,4 +329,4 @@ export {
   ge as f,
   Re as s
 };
-//# sourceMappingURL=summary-grid.types.Do2PZQGm.js.map
+//# sourceMappingURL=summary-grid.types.C4-lY9Xr.js.map

package/dist/chunks/{summary-grid.types.Do2PZQGm.js.map → summary-grid.types.C4-lY9Xr.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"summary-grid.types.Do2PZQGm.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/grid-layout';\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\" @click=\"$emit('copy-click', $event)\" />\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 @mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 @copy-click=\"$emit('copy-click', $event)\"\n @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 <bento-typography\n v-if=\"secondaryLabel\"\n variant=\"caption\"\n class=\"b-summary-grid-item-amount__secondary-label\"\n >{{ secondaryLabel }}</bento-typography\n >\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 { BentoTypography } from '@/components/typography';\n import { SummaryGridItem } from '../summary-grid-item';\n import { useHasSlot } from '@/composables';\n import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 @copy-click=\"$emit('copy-click', $event)\"\n @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 @copy-click=\"$emit('copy-click', $event)\"\n @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n >\n <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n <slot name=\"dashed-underline\" />\n </template>\n {{ computedLabelPercentage }}\n <template v-if=\"secondaryMetric\" #secondary> {{ computedSecondaryMetricPercentage }} </template>\n </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, useSlots } from 'vue';\n import { SummaryGridItem } from '../summary-grid-item';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n import type { NumberFormatOptions } from 'vue-i18n';\n\n const { locale } = useI18n();\n\n defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 label: null,\n secondaryMetric: { default: null }\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const percentageArgs: NumberFormatOptions = {\n style: 'percent',\n maximumFractionDigits: 2,\n };\n\n const isNumeric = (value: string \| number) => value != null && value !== '' && !isNaN(Number(value));\n const convertToPercentIfNumber = (value: string \| number) => {\n if (value && isNumeric(value)) {\n return new Intl.NumberFormat(locale.value, percentageArgs).format(Number(value) / 100);\n }\n return value;\n };\n\n const computedLabelPercentage = computed(() => convertToPercentIfNumber(props.label));\n const computedSecondaryMetricPercentage = computed(() => convertToPercentIfNumber(props.secondaryMetric));\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 i18n: {},\n };\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 @copy-click=\"$emit('copy-click', $event)\"\n @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 @copy-click=\"$emit('copy-click', $event)\"\n @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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';\n import { useHasSlot } from '@/composables';\n import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 { type GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/\n @deprecated Since v3.0.0. Use string literal instead.\n /\nexport enum BentoSummaryGridItemSize {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\n/\n @deprecated Since v3.0.0. Use 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","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","locale","useI18n","percentageArgs","isNumeric","value","convertToPercentIfNumber","computedLabelPercentage","computedSecondaryMetricPercentage","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":"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"}
1	+ {"version":3,"file":"summary-grid.types.C4-lY9Xr.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/grid-layout';\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\" @click=\"$emit('copy-click', $event)\" />\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 @mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 @copy-click=\"$emit('copy-click', $event)\"\n @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 <bento-typography\n v-if=\"secondaryLabel\"\n variant=\"caption\"\n class=\"b-summary-grid-item-amount__secondary-label\"\n >{{ secondaryLabel }}</bento-typography\n >\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 { BentoTypography } from '@/components/typography';\n import { SummaryGridItem } from '../summary-grid-item';\n import { useHasSlot } from '@/composables';\n import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 @copy-click=\"$emit('copy-click', $event)\"\n @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 @copy-click=\"$emit('copy-click', $event)\"\n @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n >\n <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n <slot name=\"dashed-underline\" />\n </template>\n {{ computedLabelPercentage }}\n <template v-if=\"secondaryMetric\" #secondary> {{ computedSecondaryMetricPercentage }} </template>\n </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, useSlots } from 'vue';\n import { SummaryGridItem } from '../summary-grid-item';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n import type { NumberFormatOptions } from 'vue-i18n';\n\n const { locale } = useI18n();\n\n defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 label: null,\n secondaryMetric: { default: null }\n});\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const percentageArgs: NumberFormatOptions = {\n style: 'percent',\n maximumFractionDigits: 2,\n };\n\n const isNumeric = (value: string \| number) => value != null && value !== '' && !isNaN(Number(value));\n const convertToPercentIfNumber = (value: string \| number) => {\n if (value && isNumeric(value)) {\n return new Intl.NumberFormat(locale.value, percentageArgs).format(Number(value) / 100);\n }\n return value;\n };\n\n const computedLabelPercentage = computed(() => convertToPercentIfNumber(props.label));\n const computedSecondaryMetricPercentage = computed(() => convertToPercentIfNumber(props.secondaryMetric));\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 i18n: {},\n };\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 @copy-click=\"$emit('copy-click', $event)\"\n @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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 defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 @copy-click=\"$emit('copy-click', $event)\"\n @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\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';\n import { useHasSlot } from '@/composables';\n import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\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 { type GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/\n @deprecated Since v3.0.0. Use string literal instead.\n /\nexport enum BentoSummaryGridItemSize {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\n/\n @deprecated Since v3.0.0. Use 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","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","locale","useI18n","percentageArgs","isNumeric","value","convertToPercentIfNumber","computedLabelPercentage","computedSecondaryMetricPercentage","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":"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"}

package/dist/chunks/{tab.zeRxc-3T.js → tab.BHaKwojJ.js} RENAMED Viewed

@@ -1,11 +1,11 @@
 import { defineComponent as B, ref as f, provide as h, watch as E, nextTick as x, computed as m, unref as $, onUnmounted as N, toRefs as j, inject as k } from "vue";
 import { B as G } from "./typography.Cd386LC_.js";
-import { B as J } from "./tag.CgsX8v2m.js";
+import { B as J } from "./tag.DSyMRETc.js";
 import { C as U } from "./cross-circle-fill.D3dEmLeQ.js";
 import { u as z } from "./index.CPOlyau9.js";
 import { g as M } from "./generate-uid.DBWe4g6T.js";
 import { T as A, a as R, E as q } from "./tabs.keys.B4qGhjp2.js";
-import { F as H } from "./fixed-scroller.CHmrgoTQ.js";
+import { F as H } from "./fixed-scroller.CkoOFRzH.js";
 import { n as O } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/tab.css";
 const S = (r, e) => {
@@ -227,4 +227,4 @@ export {
   Te as B,
   ve as a
 };
-//# sourceMappingURL=tab.zeRxc-3T.js.map
+//# sourceMappingURL=tab.BHaKwojJ.js.map