npm - @adyen/bento-vue2 - Versions diffs - 1.102.0 → 1.103.0 - Mend

@adyen/bento-vue2 1.102.0 → 1.103.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 (399) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"selection-card-group.EGigQJOW.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 '../checkbox/checkbox.types';\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 { type BentoCheckboxType, type BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input';\n import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { generateUid } from '@/core/utils/ts';\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 '@/core/utils/ts';\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\", \"input\"]);\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(el => {\n if (el && (el < 2 \|\| el > 6)) {\n throw new Error(\n 'itemsPerRow values must have a value between 2 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' },\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","_b","_a","_d","_c","_f","_e","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","el"],"mappings":"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"}
1	+ {"version":3,"file":"selection-card-group.BaK3Rt4K.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 '../checkbox/checkbox.types';\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 { type BentoCheckboxType, type BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input';\n import { RadioInput, type RadioInputValue } from '../internal/radio-input';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { generateUid } from '@/core/utils/ts';\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 '@/core/utils/ts';\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\", \"input\"]);\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(el => {\n if (el && (el < 2 \|\| el > 6)) {\n throw new Error(\n 'itemsPerRow values must have a value between 2 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' },\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","el"],"mappings":"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"}

package/dist/chunks/set-time-in-date.BVfkl8K8.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { t as i } from "./en-US.BR6y7foR.js";
+function c(e, s, n) {
+  const t = i(e, n?.in);
+  return t.setHours(s), t;
+}
+function l(e, s, n) {
+  const t = i(e, n?.in);
+  return t.setMilliseconds(s), t;
+}
+function a(e, s, n) {
+  const t = i(e, n?.in);
+  return t.setMinutes(s), t;
+}
+function u(e, s, n) {
+  const t = i(e, n?.in);
+  return t.setSeconds(s), t;
+}
+const p = (e, s) => {
+  const [n = "0", t = "0", r = "0"] = s.split(":");
+  let o = new Date(e);
+  return o = c(o, parseInt(n, 10)), o = a(o, parseInt(t, 10)), o = u(o, parseInt(r, 10)), o;
+};
+export {
+  p as a,
+  l as s
+};
+//# sourceMappingURL=set-time-in-date.BVfkl8K8.js.map

package/dist/chunks/{set-time-in-date.CU7HeZLY.js.map → set-time-in-date.BVfkl8K8.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"set-time-in-date.~~CU7HeZLY~~.js","sources":["../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/setHours.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/setMilliseconds.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/setMinutes.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/setSeconds.js","../../src/utils/ts/format-date/set-time-in-date.ts"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/*\n The {@link setHours} function options.\n /\n\n/\n @name setHours\n * @category Hour Helpers\n * @summary Set the hours to the given date.\n \n @description\n * Set the hours to the given date.\n \n @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n \n @param date - The date to be changed\n * @param hours - The hours of the new date\n * @param options - An object with options\n \n @returns The new date with the hours set\n \n @example\n * // Set 4 hours to 1 September 2014 11:30:00:\n * const result = setHours(new Date(2014, 8, 1, 11, 30), 4)\n * //=> Mon Sep 01 2014 04:30:00\n /\nexport function setHours(date, hours, options) {\n const _date = toDate(date, options?.in);\n _date.setHours(hours);\n return _date;\n}\n\n// Fallback for modularized imports:\nexport default setHours;\n","import { toDate } from \"./toDate.js\";\n\n/\n The {@link setMilliseconds} function options.\n /\n\n/\n @name setMilliseconds\n * @category Millisecond Helpers\n * @summary Set the milliseconds to the given date.\n \n @description\n * Set the milliseconds to the given date.\n \n @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n \n @param date - The date to be changed\n * @param milliseconds - The milliseconds of the new date\n * @param options - The options\n \n @returns The new date with the milliseconds set\n \n @example\n * // Set 300 milliseconds to 1 September 2014 11:30:40.500:\n * const result = setMilliseconds(new Date(2014, 8, 1, 11, 30, 40, 500), 300)\n * //=> Mon Sep 01 2014 11:30:40.300\n /\nexport function setMilliseconds(date, milliseconds, options) {\n const _date = toDate(date, options?.in);\n _date.setMilliseconds(milliseconds);\n return _date;\n}\n\n// Fallback for modularized imports:\nexport default setMilliseconds;\n","import { toDate } from \"./toDate.js\";\n\n/\n The {@link setMinutes} function options.\n /\n\n/\n @name setMinutes\n * @category Minute Helpers\n * @summary Set the minutes to the given date.\n \n @description\n * Set the minutes to the given date.\n \n @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows using extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, returned from the context function, or inferred from the arguments.\n \n @param date - The date to be changed\n * @param minutes - The minutes of the new date\n * @param options - An object with options\n \n @returns The new date with the minutes set\n \n @example\n * // Set 45 minutes to 1 September 2014 11:30:40:\n * const result = setMinutes(new Date(2014, 8, 1, 11, 30, 40), 45)\n * //=> Mon Sep 01 2014 11:45:40\n /\nexport function setMinutes(date, minutes, options) {\n const date_ = toDate(date, options?.in);\n date_.setMinutes(minutes);\n return date_;\n}\n\n// Fallback for modularized imports:\nexport default setMinutes;\n","import { toDate } from \"./toDate.js\";\n\n/\n The {@link setSeconds} function options.\n /\n\n/\n @name setSeconds\n * @category Second Helpers\n * @summary Set the seconds to the given date, with context support.\n \n @description\n * Set the seconds to the given date, with an optional context for time zone specification.\n \n @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n \n @param date - The date to be changed\n * @param seconds - The seconds of the new date\n * @param options - An object with options\n \n @returns The new date with the seconds set\n \n @example\n * // Set 45 seconds to 1 September 2014 11:30:40:\n * const result = setSeconds(new Date(2014, 8, 1, 11, 30, 40), 45)\n * //=> Mon Sep 01 2014 11:30:45\n /\nexport function setSeconds(date, seconds, options) {\n const _date = toDate(date, options?.in);\n _date.setSeconds(seconds);\n return _date;\n}\n\n// Fallback for modularized imports:\nexport default setSeconds;\n","import { setHours } from 'date-fns/setHours';\nimport { setMinutes } from 'date-fns/setMinutes';\nimport { setSeconds } from 'date-fns/setSeconds';\n\n/\n Sets the time of a date object from a time string.\n * @param dateToSetTimeIn The date object to set the time in.\n * @param time The time string in HH:MM:SS format.\n * @returns A new Date object with the time set.\n */\nexport const setTimeInDateObject = (dateToSetTimeIn: Date, time: string): Date => {\n const [hours = '0', minutes = '0', seconds = '0'] = time.split(':');\n let dateWithTime = new Date(dateToSetTimeIn);\n\n dateWithTime = setHours(dateWithTime, parseInt(hours, 10));\n dateWithTime = setMinutes(dateWithTime, parseInt(minutes, 10));\n dateWithTime = setSeconds(dateWithTime, parseInt(seconds, 10));\n\n return dateWithTime;\n};\n"],"names":["setHours","date","hours","options","_date","toDate","setMilliseconds","milliseconds","setMinutes","minutes","date_","setSeconds","seconds","setTimeInDateObject","dateToSetTimeIn","time","dateWithTime"],"mappings":";AA4BO,SAASA,EAASC,GAAMC,GAAOC,GAAS;AAC7C,QAAMC,IAAQC,EAAOJ,GAAME,~~KAAA~~,~~gBAAAA,EAAS,~~EAAE;AACtC,SAAAC,EAAM,SAASF,CAAK,GACbE;AACT;ACJO,SAASE,EAAgBL,GAAMM,GAAcJ,GAAS;AAC3D,QAAMC,IAAQC,EAAOJ,GAAME,~~KAAA~~,~~gBAAAA,EAAS,~~EAAE;AACtC,SAAAC,EAAM,gBAAgBG,CAAY,GAC3BH;AACT;ACJO,SAASI,EAAWP,GAAMQ,GAASN,GAAS;AACjD,QAAMO,IAAQL,EAAOJ,GAAME,~~KAAA~~,~~gBAAAA,EAAS,~~EAAE;AACtC,SAAAO,EAAM,WAAWD,CAAO,GACjBC;AACT;ACJO,SAASC,EAAWV,GAAMW,GAAST,GAAS;AACjD,QAAMC,IAAQC,EAAOJ,GAAME,~~KAAA~~,~~gBAAAA,EAAS,~~EAAE;AACtC,SAAAC,EAAM,WAAWQ,CAAO,GACjBR;AACT;ACtBO,MAAMS,IAAsB,CAACC,GAAuBC,MAAuB;AAC9E,QAAM,CAACb,IAAQ,KAAKO,IAAU,KAAKG,IAAU,GAAG,IAAIG,EAAK,MAAM,GAAG;AAClE,MAAIC,IAAe,IAAI,KAAKF,CAAe;AAE3C,SAAAE,IAAehB,EAASgB,GAAc,SAASd,GAAO,EAAE,CAAC,GACzDc,IAAeR,EAAWQ,GAAc,SAASP,GAAS,EAAE,CAAC,GAC7DO,IAAeL,EAAWK,GAAc,SAASJ,GAAS,EAAE,CAAC,GAEtDI;AACX;","x_google_ignoreList":[0,1,2,3]}
1	+ {"version":3,"file":"set-time-in-date.BVfkl8K8.js","sources":["../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/setHours.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/setMilliseconds.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/setMinutes.js","../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/setSeconds.js","../../src/utils/ts/format-date/set-time-in-date.ts"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/*\n The {@link setHours} function options.\n /\n\n/\n @name setHours\n * @category Hour Helpers\n * @summary Set the hours to the given date.\n \n @description\n * Set the hours to the given date.\n \n @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n \n @param date - The date to be changed\n * @param hours - The hours of the new date\n * @param options - An object with options\n \n @returns The new date with the hours set\n \n @example\n * // Set 4 hours to 1 September 2014 11:30:00:\n * const result = setHours(new Date(2014, 8, 1, 11, 30), 4)\n * //=> Mon Sep 01 2014 04:30:00\n /\nexport function setHours(date, hours, options) {\n const _date = toDate(date, options?.in);\n _date.setHours(hours);\n return _date;\n}\n\n// Fallback for modularized imports:\nexport default setHours;\n","import { toDate } from \"./toDate.js\";\n\n/\n The {@link setMilliseconds} function options.\n /\n\n/\n @name setMilliseconds\n * @category Millisecond Helpers\n * @summary Set the milliseconds to the given date.\n \n @description\n * Set the milliseconds to the given date.\n \n @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n \n @param date - The date to be changed\n * @param milliseconds - The milliseconds of the new date\n * @param options - The options\n \n @returns The new date with the milliseconds set\n \n @example\n * // Set 300 milliseconds to 1 September 2014 11:30:40.500:\n * const result = setMilliseconds(new Date(2014, 8, 1, 11, 30, 40, 500), 300)\n * //=> Mon Sep 01 2014 11:30:40.300\n /\nexport function setMilliseconds(date, milliseconds, options) {\n const _date = toDate(date, options?.in);\n _date.setMilliseconds(milliseconds);\n return _date;\n}\n\n// Fallback for modularized imports:\nexport default setMilliseconds;\n","import { toDate } from \"./toDate.js\";\n\n/\n The {@link setMinutes} function options.\n /\n\n/\n @name setMinutes\n * @category Minute Helpers\n * @summary Set the minutes to the given date.\n \n @description\n * Set the minutes to the given date.\n \n @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows using extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, returned from the context function, or inferred from the arguments.\n \n @param date - The date to be changed\n * @param minutes - The minutes of the new date\n * @param options - An object with options\n \n @returns The new date with the minutes set\n \n @example\n * // Set 45 minutes to 1 September 2014 11:30:40:\n * const result = setMinutes(new Date(2014, 8, 1, 11, 30, 40), 45)\n * //=> Mon Sep 01 2014 11:45:40\n /\nexport function setMinutes(date, minutes, options) {\n const date_ = toDate(date, options?.in);\n date_.setMinutes(minutes);\n return date_;\n}\n\n// Fallback for modularized imports:\nexport default setMinutes;\n","import { toDate } from \"./toDate.js\";\n\n/\n The {@link setSeconds} function options.\n /\n\n/\n @name setSeconds\n * @category Second Helpers\n * @summary Set the seconds to the given date, with context support.\n \n @description\n * Set the seconds to the given date, with an optional context for time zone specification.\n \n @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n \n @param date - The date to be changed\n * @param seconds - The seconds of the new date\n * @param options - An object with options\n \n @returns The new date with the seconds set\n \n @example\n * // Set 45 seconds to 1 September 2014 11:30:40:\n * const result = setSeconds(new Date(2014, 8, 1, 11, 30, 40), 45)\n * //=> Mon Sep 01 2014 11:30:45\n /\nexport function setSeconds(date, seconds, options) {\n const _date = toDate(date, options?.in);\n _date.setSeconds(seconds);\n return _date;\n}\n\n// Fallback for modularized imports:\nexport default setSeconds;\n","import { setHours } from 'date-fns/setHours';\nimport { setMinutes } from 'date-fns/setMinutes';\nimport { setSeconds } from 'date-fns/setSeconds';\n\n/\n Sets the time of a date object from a time string.\n * @param dateToSetTimeIn The date object to set the time in.\n * @param time The time string in HH:MM:SS format.\n * @returns A new Date object with the time set.\n */\nexport const setTimeInDateObject = (dateToSetTimeIn: Date, time: string): Date => {\n const [hours = '0', minutes = '0', seconds = '0'] = time.split(':');\n let dateWithTime = new Date(dateToSetTimeIn);\n\n dateWithTime = setHours(dateWithTime, parseInt(hours, 10));\n dateWithTime = setMinutes(dateWithTime, parseInt(minutes, 10));\n dateWithTime = setSeconds(dateWithTime, parseInt(seconds, 10));\n\n return dateWithTime;\n};\n"],"names":["setHours","date","hours","options","_date","toDate","setMilliseconds","milliseconds","setMinutes","minutes","date_","setSeconds","seconds","setTimeInDateObject","dateToSetTimeIn","time","dateWithTime"],"mappings":";AA4BO,SAASA,EAASC,GAAMC,GAAOC,GAAS;AAC7C,QAAMC,IAAQC,EAAOJ,GAAME,GAAS,EAAE;AACtC,SAAAC,EAAM,SAASF,CAAK,GACbE;AACT;ACJO,SAASE,EAAgBL,GAAMM,GAAcJ,GAAS;AAC3D,QAAMC,IAAQC,EAAOJ,GAAME,GAAS,EAAE;AACtC,SAAAC,EAAM,gBAAgBG,CAAY,GAC3BH;AACT;ACJO,SAASI,EAAWP,GAAMQ,GAASN,GAAS;AACjD,QAAMO,IAAQL,EAAOJ,GAAME,GAAS,EAAE;AACtC,SAAAO,EAAM,WAAWD,CAAO,GACjBC;AACT;ACJO,SAASC,EAAWV,GAAMW,GAAST,GAAS;AACjD,QAAMC,IAAQC,EAAOJ,GAAME,GAAS,EAAE;AACtC,SAAAC,EAAM,WAAWQ,CAAO,GACjBR;AACT;ACtBO,MAAMS,IAAsB,CAACC,GAAuBC,MAAuB;AAC9E,QAAM,CAACb,IAAQ,KAAKO,IAAU,KAAKG,IAAU,GAAG,IAAIG,EAAK,MAAM,GAAG;AAClE,MAAIC,IAAe,IAAI,KAAKF,CAAe;AAE3C,SAAAE,IAAehB,EAASgB,GAAc,SAASd,GAAO,EAAE,CAAC,GACzDc,IAAeR,EAAWQ,GAAc,SAASP,GAAS,EAAE,CAAC,GAC7DO,IAAeL,EAAWK,GAAc,SAASJ,GAAS,EAAE,CAAC,GAEtDI;AACX;","x_google_ignoreList":[0,1,2,3]}

package/dist/chunks/{sidepanel.yB7YuzVt.js → sidepanel.DeIREn9l.js} RENAMED Viewed

@@ -1,19 +1,19 @@
-import { defineComponent as h, toRefs as N, ref as o, computed as P, onMounted as G, onUnmounted as F, watch as x, provide as g } from "vue";
-import { B as R, d as U } from "./typography.C8lPlsbD.js";
-import { F as L } from "./footer-actions.DXyJtVip.js";
-import { D as J } from "./dialog-page.B_LwIWgK.js";
+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.D1OZJbEa.js";
+import { F as U } from "./footer-actions.Dn9KYoqB.js";
+import { D as L } from "./dialog-page.CPorblJc.js";
 import { n as I } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as M } from "./button.CKS_V3p5.js";
-import { B as K } from "./focus-trap.oRKjDFzf.js";
-import { C as Y } from "./cross.CC_B-vG-.js";
-import { S as w } from "./button-actions.Dpbx0xf3.js";
-import { u as z } from "./index.B6WW_F-J.js";
-import { g as H } from "./generate-uid.NJ8tVoha.js";
-import { B as $, D as j, a as V } from "./dialog-page.keys.Dym9e6k3.js";
-import { B as X } from "./directive.BBWhsNtO.js";
+import { B as J } from "./button.C4kKejsg.js";
+import { B as M } from "./focus-trap.l-wwtCHi.js";
+import { C as K } from "./cross.CC_B-vG-.js";
+import { S as Y } from "./button-actions.CxX7lK7z.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";
+import { B as V } from "./directive.D1-d-C2K.js";
 import "../assets/sidepanel.css";
-const q = {}, Q = /* @__PURE__ */ h({
-  ...q,
+const X = {}, q = /* @__PURE__ */ h({
+  ...X,
   __name: "sidepanel-page",
   props: {
     /**
@@ -75,10 +75,10 @@ const q = {}, Q = /* @__PURE__ */ h({
     }
   },
   setup(a) {
-    return { __sfc: !0, BentoTypography: R, FooterActions: L, DialogPage: J };
+    return { __sfc: !0, BentoTypography: x, FooterActions: U, DialogPage: L };
   }
 });
-var W = function() {
+var Q = function() {
   var e = this, t = e._self._c, s = e._self._setupProxy;
   return t(s.DialogPage, { staticClass: "b-sidepanel-page", attrs: { "page-id": e.pageId, "previous-page": e.previousPage }, scopedSlots: e._u([{ key: "header", fn: function() {
     return [t("div", { staticClass: "b-sidepanel-page__header" }, [t(s.BentoTypography, { staticClass: "b-sidepanel-page__title", attrs: { el: "h2", variant: "title" } }, [e._v(" " + e._s(e.title) + " ")])], 1)];
@@ -87,54 +87,32 @@ var W = function() {
   }, proxy: !0 }, e.actions && e.actions.length > 0 ? { key: "footer", fn: function() {
     return [t("div", { staticClass: "b-sidepanel-page__actions" }, [t(s.FooterActions, { attrs: { actions: e.actions, "actions-label": e.actionsLabel, "destructive-actions": e.destructiveActions } })], 1)];
   }, proxy: !0 } : null], null, !0) });
-}, Z = [], ee = /* @__PURE__ */ I(
+}, W = [], Z = /* @__PURE__ */ I(
+  q,
   Q,
   W,
-  Z,
   !1,
   null,
   "12d4c262"
 );
-const Ee = ee.exports;
+const Ae = Z.exports;
 var f = /* @__PURE__ */ ((a) => (a.UPDATE_ACTIVE_PAGE = "update:active-page", a.UPDATE_IS_OPEN = "update:is-open", a))(f || {});
-const te = {
-  "de-DE": {
-    close: "Schließen"
-  },
-  "en-GB": {
-    close: "Close"
-  },
-  "en-US": {
-    close: "Close"
-  },
-  "es-419": {
-    close: "Cerrar"
-  },
-  "es-ES": {
-    close: "Cerrar"
-  },
-  "es-MX": {
-    close: "Cerrar"
-  },
-  "fr-FR": {
-    close: "Fermer"
-  },
-  "it-IT": {
-    close: "Chiudi"
-  },
-  "ja-JP": {
-    close: "閉じる"
-  },
-  "pt-BR": {
-    close: "Fechar"
-  },
-  "zh-CN": {
-    close: "关闭"
-  }
-}, se = {
-  i18n: { messages: te }
-}, ae = /* @__PURE__ */ h({
-  ...se,
+const ee = {
+  "de-DE": { close: "Schließen" },
+  "en-GB": { close: "Close" },
+  "en-US": { close: "Close" },
+  "es-419": { close: "Cerrar" },
+  "es-ES": { close: "Cerrar" },
+  "es-MX": { close: "Cerrar" },
+  "fr-FR": { close: "Fermer" },
+  "it-IT": { close: "Chiudi" },
+  "ja-JP": { close: "閉じる" },
+  "pt-BR": { close: "Fechar" },
+  "zh-CN": { close: "关闭" }
+}, te = {
+  i18n: { messages: ee }
+}, se = /* @__PURE__ */ h({
+  ...te,
   __name: "sidepanel",
   props: {
     /**
@@ -176,32 +154,31 @@ const te = {
   },
   emits: [],
   setup(a, { emit: e }) {
-    const t = a, { activePage: s, isOpen: n } = N(t), { t: D } = z(), c = o(null), u = o([]), l = o([]), C = o($.TRANSITION_LEVEL_DEEPER), p = o(!1), A = H("sidepanel"), d = o(!1), v = o(!1), _ = o(!1), b = 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 = () => {
-      p.value && c.value && (c.value.close(), l.value[0] && e(f.UPDATE_ACTIVE_PAGE, l.value[0]), l.value = [], p.value = !1, d.value = !1, e(f.UPDATE_IS_OPEN, !1));
+      p.value && r.value && (r.value.close(), l.value[0] && e(f.UPDATE_ACTIVE_PAGE, l.value[0]), l.value = [], p.value = !1, d.value = !1, e(f.UPDATE_IS_OPEN, !1));
     }, m = () => {
-      !c.value || !c.value.open || (p.value = !0);
+      !r.value || !r.value.open || (p.value = !0);
     }, S = () => {
       t.isDismissible && m();
     }, T = P(() => t.hideCloseButton !== null ? t.hideCloseButton : !t.isDismissible);
-    G(() => {
+    N(() => {
       _.value = !0;
-    }), F(() => {
+    }), G(() => {
       _.value = !1;
-    }), x(
-      [() => n.value, c],
-      ([i, r]) => {
-        !_.value || !r || (i ? (d.value = !0, r.open || r.showModal(), l.value.length || l.value.push(s.value)) : r.open && m());
+    }), F(
+      [() => n.value, r],
+      ([i, c]) => {
+        !_.value || !c || (i ? (d.value = !0, c.open || c.showModal(), l.value.length || l.value.push(s.value)) : c.open && m());
       },
       { immediate: !0, flush: "post" }
     );
     const E = (i) => e(f.UPDATE_ACTIVE_PAGE, i), y = (i) => () => {
-      var r;
-      u.value = (r = u.value) == null ? void 0 : r.filter((k) => k !== i);
+      u.value = u.value?.filter((c) => c !== i);
     }, B = (i) => (u.value.push(i), { unregisterPage: y(i) });
-    return g(j, {
+    return g($, {
       activePage: s,
       animation: C,
       isAnimationActive: v,
@@ -209,31 +186,31 @@ const te = {
       pages: u,
       previousPages: l,
       updatePage: E
-    }), g(V, B), g(w, A), !t.isDismissible && t.hideCloseButton === null && U(
+    }), g(j, B), g(Y, A), !t.isDismissible && t.hideCloseButton === null && R(
       'BentoSidepanel "isDismissible" property’s behavior',
       'BentoSidepanel "isDismissible" will no longer hide the close button. Use "hideCloseButton=true" instead.',
       "2.0.0"
-    ), { __sfc: !0, props: t, emit: e, activePage: s, isOpen: n, t: D, sidepanel: c, 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: M, BentoFocusTrap: K, CrossIcon: Y, vBentoClickOutsideDirective: X };
+    ), { __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 ie = function() {
+var ae = function() {
   var e = this, t = e._self._c, s = e._self._setupProxy;
   return t("dialog", { ref: "sidepanel", staticClass: "b-sidepanel", class: s.conditionalClasses, on: { animationend: s.closeSidepanelAfterAnimation, keydown: function(n) {
     if (!n.type.indexOf("key") && e._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"])) return null;
     n.preventDefault(), e.isDismissible && s.startCloseSidepanelAnimation;
   } } }, [t(s.BentoFocusTrap, { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: s.closeSidepanelOnClickOutside, expression: "closeSidepanelOnClickOutside" }], attrs: { id: s.sidepanelId } }, [s.computedHideCloseButton ? e._e() : t("div", { staticClass: "b-sidepanel__close-button" }, [t(s.BentoButton, { attrs: { variant: "tertiary" }, on: { click: s.startCloseSidepanelAnimation } }, [t(s.CrossIcon, { attrs: { "svg-title": s.t("close") } })], 1)], 1), e._t("default")], 2)], 1);
-}, oe = [], ne = /* @__PURE__ */ I(
+}, ie = [], oe = /* @__PURE__ */ I(
+  se,
   ae,
   ie,
-  oe,
   !1,
   null,
   "e2c7d722"
 );
-const ye = ne.exports;
+const Ee = oe.exports;
 export {
   f as B,
-  Ee as a,
-  ye as s
+  Ae as a,
+  Ee as s
 };
-//# sourceMappingURL=sidepanel.yB7YuzVt.js.map
+//# sourceMappingURL=sidepanel.DeIREn9l.js.map

package/dist/chunks/{sidepanel.yB7YuzVt.js.map → sidepanel.DeIREn9l.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidepanel.yB7YuzVt.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 '@/core/utils/ts';\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 v2.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 `true` when `isDimissible=true`.\n \n _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.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 '2.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 };\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","_a","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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"}
1	+ {"version":3,"file":"sidepanel.DeIREn9l.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 '@/core/utils/ts';\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 v2.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 `true` when `isDimissible=true`.\n \n _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.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 '2.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 };\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/startOfWeek.muMEhS7U.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { t as c, g as O } from "./en-US.BR6y7foR.js";
+function i(o, e) {
+  const s = O(), a = e?.weekStartsOn ?? e?.locale?.options?.weekStartsOn ?? s.weekStartsOn ?? s.locale?.options?.weekStartsOn ?? 0, t = c(o, e?.in), n = t.getDay(), r = (n < a ? 7 : 0) + n - a;
+  return t.setDate(t.getDate() - r), t.setHours(0, 0, 0, 0), t;
+}
+export {
+  i as s
+};
+//# sourceMappingURL=startOfWeek.muMEhS7U.js.map

package/dist/chunks/{startOfWeek.Br5KM4z_.js.map → startOfWeek.muMEhS7U.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"startOfWeek.~~Br5KM4z_~~.js","sources":["../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/startOfWeek.js"],"sourcesContent":["import { getDefaultOptions } from \"./_lib/defaultOptions.js\";\nimport { toDate } from \"./toDate.js\";\n\n/*\n The {@link startOfWeek} function options.\n /\n\n/\n @name startOfWeek\n * @category Week Helpers\n * @summary Return the start of a week for the given date.\n \n @description\n * Return the start of a week for the given date.\n * The result will be in the local timezone.\n \n @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n \n @param date - The original date\n * @param options - An object with options\n \n @returns The start of a week\n \n @example\n * // The start of a week for 2 September 2014 11:55:00:\n * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Sun Aug 31 2014 00:00:00\n \n @example\n * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00:\n * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })\n * //=> Mon Sep 01 2014 00:00:00\n */\nexport function startOfWeek(date, options) {\n const defaultOptions = getDefaultOptions();\n const weekStartsOn =\n options?.weekStartsOn ??\n options?.locale?.options?.weekStartsOn ??\n defaultOptions.weekStartsOn ??\n defaultOptions.locale?.options?.weekStartsOn ??\n 0;\n\n const _date = toDate(date, options?.in);\n const day = _date.getDay();\n const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;\n\n _date.setDate(_date.getDate() - diff);\n _date.setHours(0, 0, 0, 0);\n return _date;\n}\n\n// Fallback for modularized imports:\nexport default startOfWeek;\n"],"names":["startOfWeek","date","options","defaultOptions","getDefaultOptions","weekStartsOn","~~_b","_a","_d","_c","~~_date","toDate","day","diff"],"mappings":";AAkCO,SAASA,EAAYC,GAAMC,GAAS;;AACzC,QAAMC,IAAiBC,EAAiB,GAClCC,~~KACJH~~,~~KAAA~~,~~gBAAAA~~,~~EAAS~~,~~mBACTI~~,~~KAAAC~~,~~IAAAL~~,~~KAAA,gBAAAA,EAAS,WAAT,gBAAAK,EAAiB,YAAjB,gBAAAD,EAA0B,iBAC1BH,~~EAAe,~~kBACfK~~,~~KAAAC,IAAAN,~~EAAe,~~WAAf~~,~~gBAAAM~~,~~EAAuB~~,~~YAAvB~~,~~gBAAAD,EAAgC,iBAChC,GAEIE,~~IAAQC,~~EAAOV~~,GAAMC,~~KAAA~~,~~gBAAAA,EAAS,~~EAAE,~~GAChCU~~,IAAMF,EAAM,OAAM,GAClBG,KAAQD,~~IAAMP~~,IAAe,IAAI,~~KAAKO~~,~~IAAMP~~;AAElD,~~SAAAK~~,EAAM,QAAQA,EAAM,QAAO,IAAKG,CAAI,GACpCH,EAAM,SAAS,GAAG,GAAG,GAAG,CAAC,GAClBA;AACT;","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"startOfWeek.muMEhS7U.js","sources":["../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/startOfWeek.js"],"sourcesContent":["import { getDefaultOptions } from \"./_lib/defaultOptions.js\";\nimport { toDate } from \"./toDate.js\";\n\n/*\n The {@link startOfWeek} function options.\n /\n\n/\n @name startOfWeek\n * @category Week Helpers\n * @summary Return the start of a week for the given date.\n \n @description\n * Return the start of a week for the given date.\n * The result will be in the local timezone.\n \n @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n \n @param date - The original date\n * @param options - An object with options\n \n @returns The start of a week\n \n @example\n * // The start of a week for 2 September 2014 11:55:00:\n * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Sun Aug 31 2014 00:00:00\n \n @example\n * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00:\n * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })\n * //=> Mon Sep 01 2014 00:00:00\n */\nexport function startOfWeek(date, options) {\n const defaultOptions = getDefaultOptions();\n const weekStartsOn =\n options?.weekStartsOn ??\n options?.locale?.options?.weekStartsOn ??\n defaultOptions.weekStartsOn ??\n defaultOptions.locale?.options?.weekStartsOn ??\n 0;\n\n const _date = toDate(date, options?.in);\n const day = _date.getDay();\n const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;\n\n _date.setDate(_date.getDate() - diff);\n _date.setHours(0, 0, 0, 0);\n return _date;\n}\n\n// Fallback for modularized imports:\nexport default startOfWeek;\n"],"names":["startOfWeek","date","options","defaultOptions","getDefaultOptions","weekStartsOn","_date","toDate","day","diff"],"mappings":";AAkCO,SAASA,EAAYC,GAAMC,GAAS;AACzC,QAAMC,IAAiBC,EAAiB,GAClCC,IACJH,GAAS,gBACTA,GAAS,QAAQ,SAAS,gBAC1BC,EAAe,gBACfA,EAAe,QAAQ,SAAS,gBAChC,GAEIG,IAAQC,EAAON,GAAMC,GAAS,EAAE,GAChCM,IAAMF,EAAM,OAAM,GAClBG,KAAQD,IAAMH,IAAe,IAAI,KAAKG,IAAMH;AAElD,SAAAC,EAAM,QAAQA,EAAM,QAAO,IAAKG,CAAI,GACpCH,EAAM,SAAS,GAAG,GAAG,GAAG,CAAC,GAClBA;AACT;","x_google_ignoreList":[0]}

package/dist/chunks/{status.CKb07vxI.js → status.DJ1Dfh5s.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { defineComponent as r, computed as o } from "vue";
-import { B as e } from "./typography.C8lPlsbD.js";
+import { B as e } from "./typography.D1OZJbEa.js";
 import { n as _ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/status.css";
 const i = {
@@ -31,4 +31,4 @@ const v = u.exports;
 export {
   v as B
 };
-//# sourceMappingURL=status.CKb07vxI.js.map
+//# sourceMappingURL=status.DJ1Dfh5s.js.map

package/dist/chunks/{status.CKb07vxI.js.map → status.DJ1Dfh5s.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status.~~CKb07vxI~~.js","sources":["../../src/components/status/status.vue"],"sourcesContent":["<template>\n <div class=\"b-status\" role=\"status\">\n <div class=\"b-status__indicator-wrapper\">\n <span class=\"b-status__indicator\" :class=\"conditionalClass\" role=\"presentation\"></span>\n </div>\n <bento-typography class=\"b-status__label\" el=\"span\" variant=\"body\">\n <slot></slot>\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { type BentoStatusProps } from './status.types';\n\n const props = defineProps({\n variant: null\n});\n\n const conditionalClass = computed(() => ({\n [`b-status__indicator--${props.variant}`]: true,\n }));\n</script>\n\n<script lang=\"ts\">\n /*\n A Status component is used to indicate a\n * passage of time or a particular step of a process.\n \n @example\n * import { BentoStatus } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoStatus },\n * template: `\n * <bento-status variant=\"red\">\n * 1 week ago\n * </bento-status>\n * `\n * }\n */\n export default {\n name: 'bento-status',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./status.scss\" />\n"],"names":["__default__","conditionalClass","computed","props"],"mappings":";;;;AA0CI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;iBAxBAC,IAAAC,EAAA,OAAA;AAAA,MAAyC,CAAA,wBAAAC,EAAA,OAAA,EAAA,GAAA;AAAA,IACM,EAAA;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"status.DJ1Dfh5s.js","sources":["../../src/components/status/status.vue"],"sourcesContent":["<template>\n <div class=\"b-status\" role=\"status\">\n <div class=\"b-status__indicator-wrapper\">\n <span class=\"b-status__indicator\" :class=\"conditionalClass\" role=\"presentation\"></span>\n </div>\n <bento-typography class=\"b-status__label\" el=\"span\" variant=\"body\">\n <slot></slot>\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { type BentoStatusProps } from './status.types';\n\n const props = defineProps({\n variant: null\n});\n\n const conditionalClass = computed(() => ({\n [`b-status__indicator--${props.variant}`]: true,\n }));\n</script>\n\n<script lang=\"ts\">\n /*\n A Status component is used to indicate a\n * passage of time or a particular step of a process.\n \n @example\n * import { BentoStatus } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoStatus },\n * template: `\n * <bento-status variant=\"red\">\n * 1 week ago\n * </bento-status>\n * `\n * }\n */\n export default {\n name: 'bento-status',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./status.scss\" />\n"],"names":["__default__","conditionalClass","computed","props"],"mappings":";;;;AA0CI,MAAAA,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;iBAxBAC,IAAAC,EAAA,OAAA;AAAA,MAAyC,CAAA,wBAAAC,EAAA,OAAA,EAAA,GAAA;AAAA,IACM,EAAA;;;;;;;;;;;;;;;;"}