@adyen/bento-vue2 1.97.0 → 1.98.0

package/dist/chunks/{date-time-picker.DT54TiG4.js → date-time-picker.CP-IrUwY.js}

@@ -1,10 +1,10 @@
 import { defineComponent as x, ref as d, computed as o, watch as E, nextTick as G } from "vue";
 import { s as B, a as h } from "./set-time-in-date.CU7HeZLY.js";
-import { e as I, s as S } from "./calendar.BckAv9N_.js";
-import { B as q } from "./date-picker.CsFSskqf.js";
-import { B as R, i as y } from "./input-time.Bf-ZrCPX.js";
+import { e as I, s as S } from "./calendar.B0GnBaAW.js";
+import { B as q } from "./date-picker.CCJtLnE4.js";
+import { B as R, i as y } from "./input-time.C5qQ6S8d.js";
 import "./index.Cl4_42j5.js";
-import { u as j } from "./use-date-input-formatter.Dq9C0nc9.js";
+import { u as j } from "./use-date-input-formatter.BMciZYTp.js";
 import { u as z } from "./use-touch-device.DTqFAbXh.js";
 import { u as L } from "./index.B6WW_F-J.js";
 import { B as O } from "./form-layout-group.zE6TNlzD.js";
@@ -174,4 +174,4 @@ const ue = Q.exports;
 export {
   ue as d
 };
-//# sourceMappingURL=date-time-picker.DT54TiG4.js.map
+//# sourceMappingURL=date-time-picker.CP-IrUwY.js.map

package/dist/chunks/{date-time-picker.DT54TiG4.js.map → date-time-picker.CP-IrUwY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker.DT54TiG4.js","sources":["../../src/components/date-time-picker/date-time-picker.vue"],"sourcesContent":["<template>\n    <div class=\"b-date-time-picker\">\n        <bento-form-layout-group class=\"b-date-time-picker__inputs\" layout=\"50-50\" :error-message=\"props.errorMessage\">\n            <bento-date-picker\n                class=\"b-date-time-picker__date-input\"\n                v-bind=\"resolvedDateProps\"\n                :model-value=\"dateValue\"\n                @update:model-value=\"onDateChanged\"\n            />\n            <bento-input-time\n                class=\"b-date-time-picker__time-input\"\n                v-bind=\"resolvedTimeProps\"\n                :model-value=\"timeValue\"\n                @update:model-value=\"onTimeChanged\"\n            />\n        </bento-form-layout-group>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import { setMilliseconds } from 'date-fns/setMilliseconds';\n    import { startOfDay } from 'date-fns/startOfDay';\n\n    // Components\n    import { BentoDatePicker } from '@/components/date-picker';\n    import { BentoFormLayoutGroup } from '@/components/form-layout';\n    import { BentoInputTime } from '@/components/input-time';\n\n    // Utils\n    import { useDateInputFormatter, useTouchDevice } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { dateToTimeInputString, setTimeInDateObject } from '@/utils/ts/format-date';\n    import { isValidTimeString } from '@/utils/ts/time-input';\n\n    // Types\n    import type {\n        BentoDateTimePickerEmits,\n        BentoDateTimePickerProps,\n        BentoDateTimePickerValue,\n    } from './date-time-picker.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  modelValue: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  isDateDisabled: { default: undefined },\n  max: { default: null },\n  min: { default: null },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  dateProps: { default: () => ({}) },\n  timeProps: { default: () => ({}) }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"input:valid\", \"input:error\"]);\n    const currentDate = ref<Date | null>(null);\n    const currentTimeText = ref('');\n    const dateError = ref<keyof MessageSchema | null>(null);\n    const timeError = ref<keyof MessageSchema | null>(null);\n    const { dateFormat } = useDateInputFormatter();\n    const { isTouchDevice } = useTouchDevice();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const dateValue = computed(() => currentDate.value);\n    const timeValue = computed(() => currentTimeText.value);\n    const resolvedIsDateDisabled = computed(() => props.dateProps?.isDateDisabled ?? props.isDateDisabled);\n    const dateDescription = computed(() => {\n        if (isTouchDevice.value) {\n            return props.dateProps?.description;\n        } else {\n            return props.dateProps?.description\n                ? `${props.dateProps.description} ${t(dateFormat.value)}`\n                : t(dateFormat.value);\n        }\n    });\n\n    const isMergedDateInBounds = (date: Date) => {\n        if (resolvedIsDateDisabled.value?.(startOfDay(date))) {\n            return false;\n        }\n\n        if (props.min && date < setMilliseconds(props.min, 0)) {\n            return false;\n        }\n\n        if (props.max && date > setMilliseconds(props.max, 0)) {\n            return false;\n        }\n\n        return true;\n    };\n\n    const resolvedDateProps = computed(() => ({\n        disabled: props.disabled,\n        isDateDisabled: props.isDateDisabled,\n        max: props.max,\n        min: props.min,\n        readonly: props.readonly,\n        required: props.required,\n        errorMessage: dateErrorMessage.value,\n        ...props.dateProps,\n        description: dateDescription.value,\n    }));\n\n    const resolvedTimeProps = computed(() => ({\n        disabled: props.disabled,\n        errorMessage: timeErrorMessage.value,\n        readonly: props.readonly,\n        required: props.required,\n        ...props.timeProps,\n    }));\n\n    const dateErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return dateError.value ? t(dateError.value) : null;\n    });\n\n    const timeErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return timeError.value ? t(timeError.value) : null;\n    });\n\n    const clearErrors = () => {\n        dateError.value = null;\n        timeError.value = null;\n    };\n\n    /**\n     * Guards the modelValue watcher from clearing user input when the null was emitted\n     * by our own validation logic (e.g. partial/invalid input). Without this flag,\n     * the parent's v-model round-trip would trigger the watcher and wipe the fields.\n     * Reset on nextTick so that genuine external resets (e.g. a form clear button)\n     * still clear the UI.\n     */\n    const isSelfEmittedUpdate = ref(false);\n\n    watch(\n        () => props.modelValue,\n        newValue => {\n            if (isSelfEmittedUpdate.value) {\n                return;\n            }\n\n            if (newValue) {\n                // Sync internal state when a valid Date is set (e.g. programmatic update from parent)\n                currentDate.value = newValue;\n                currentTimeText.value = dateToTimeInputString(newValue);\n            } else {\n                // External reset (e.g. parent sets modelValue to null via a form clear button):\n                // clear all internal state so the UI resets fully.\n                currentDate.value = null;\n                currentTimeText.value = '';\n                clearErrors();\n            }\n        },\n        { immediate: true }\n    );\n\n    const validateBounds = (value: BentoDateTimePickerValue) => !value || isMergedDateInBounds(value);\n\n    const emitValidationState = (isValid: boolean) => {\n        if (isValid) {\n            emit('input:valid');\n        } else {\n            emit('input:error');\n        }\n    };\n\n    const emitModelValue = (value: BentoDateTimePickerValue) => {\n        isSelfEmittedUpdate.value = true;\n        emit('update:model-value', value);\n        nextTick(() => {\n            isSelfEmittedUpdate.value = false;\n        });\n    };\n\n    const emitValidatedValue = (value: BentoDateTimePickerValue) => {\n        emitModelValue(value);\n        emitValidationState(validateBounds(value));\n    };\n\n    const emitInvalidModelValue = (value: BentoDateTimePickerValue) => {\n        emitModelValue(value);\n        emitValidationState(false);\n    };\n\n    const onDateChanged = (date: Date | null) => {\n        currentDate.value = date;\n\n        // Date invalid/cleared: error if time is populated, valid if both empty\n        if (!date) {\n            if (currentTimeText.value) {\n                dateError.value = 'invalidDateFormat';\n                emitInvalidModelValue(null);\n            } else {\n                clearErrors();\n                emitValidatedValue(null);\n            }\n            return;\n        }\n\n        clearErrors();\n\n        // Prefill time with midnight when empty so the user sees a value\n        if (!currentTimeText.value) {\n            currentTimeText.value = '00:00:00';\n        }\n\n        const time = currentTimeText.value;\n\n        // Date valid but time invalid: preserve date, signal error\n        if (!isValidTimeString(time)) {\n            emitInvalidModelValue(null);\n            return;\n        }\n\n        // Both valid: merge and emit\n        emitValidatedValue(setTimeInDateObject(date, time));\n    };\n\n    const onTimeChanged = (time: string) => {\n        currentTimeText.value = time;\n\n        // Time cleared: error if date is set (time is required once prefilled), valid-null if both empty\n        if (!time) {\n            if (currentDate.value) {\n                timeError.value = 'enterTimeForDate';\n                emitInvalidModelValue(null);\n            } else {\n                clearErrors();\n                emitValidatedValue(null);\n            }\n            return;\n        }\n\n        timeError.value = null;\n\n        // Time invalid: preserve date, signal error\n        if (!isValidTimeString(time)) {\n            emitInvalidModelValue(null);\n            return;\n        }\n\n        // Time valid but no date: signal error\n        if (!currentDate.value) {\n            dateError.value = 'invalidDateFormat';\n            emitInvalidModelValue(null);\n            return;\n        }\n\n        // Both valid: merge and emit\n        emitValidatedValue(setTimeInDateObject(currentDate.value, time));\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Date time picker that combines a date picker (single date) with a time input.\n     *\n     * @example\n     * import { BentoDateTimePicker } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDateTimePicker },\n     *     template: `\n     *         <bento-date-time-picker\n     *             :date-props=\"{ label: 'Date' }\"\n     *             :time-props=\"{ label: 'Time' }\"\n     *             required\n     *             :model-value=\"dateTimeValue\"\n     *             @update:model-value=\"newValue => dateTimeValue = newValue\"\n     *         />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-date-time-picker',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-time-picker.scss\" />\n"],"names":["__default__","messages","currentDate","ref","currentTimeText","dateError","timeError","dateFormat","useDateInputFormatter","isTouchDevice","useTouchDevice","t","useI18n","dateValue","computed","timeValue","resolvedIsDateDisabled","_a","props","dateDescription","_b","isMergedDateInBounds","date","startOfDay","setMilliseconds","resolvedDateProps","dateErrorMessage","resolvedTimeProps","timeErrorMessage","clearErrors","isSelfEmittedUpdate","watch","newValue","dateToTimeInputString","validateBounds","value","emitValidationState","isValid","emit","emitModelValue","nextTick","emitValidatedValue","emitInvalidModelValue","time","isValidTimeString","setTimeInDateObject"],"mappings":"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"}
+{"version":3,"file":"date-time-picker.CP-IrUwY.js","sources":["../../src/components/date-time-picker/date-time-picker.vue"],"sourcesContent":["<template>\n    <div class=\"b-date-time-picker\">\n        <bento-form-layout-group class=\"b-date-time-picker__inputs\" layout=\"50-50\" :error-message=\"props.errorMessage\">\n            <bento-date-picker\n                class=\"b-date-time-picker__date-input\"\n                v-bind=\"resolvedDateProps\"\n                :model-value=\"dateValue\"\n                @update:model-value=\"onDateChanged\"\n            />\n            <bento-input-time\n                class=\"b-date-time-picker__time-input\"\n                v-bind=\"resolvedTimeProps\"\n                :model-value=\"timeValue\"\n                @update:model-value=\"onTimeChanged\"\n            />\n        </bento-form-layout-group>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, ref, watch } from 'vue';\n    import { setMilliseconds } from 'date-fns/setMilliseconds';\n    import { startOfDay } from 'date-fns/startOfDay';\n\n    // Components\n    import { BentoDatePicker } from '@/components/date-picker';\n    import { BentoFormLayoutGroup } from '@/components/form-layout';\n    import { BentoInputTime } from '@/components/input-time';\n\n    // Utils\n    import { useDateInputFormatter, useTouchDevice } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { dateToTimeInputString, setTimeInDateObject } from '@/utils/ts/format-date';\n    import { isValidTimeString } from '@/utils/ts/time-input';\n\n    // Types\n    import type {\n        BentoDateTimePickerEmits,\n        BentoDateTimePickerProps,\n        BentoDateTimePickerValue,\n    } from './date-time-picker.types';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n  modelValue: { default: null },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: null },\n  isDateDisabled: { default: undefined },\n  max: { default: null },\n  min: { default: null },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  dateProps: { default: () => ({}) },\n  timeProps: { default: () => ({}) }\n});\n\n    const emit = defineEmits([\"update:model-value\", \"input:valid\", \"input:error\"]);\n    const currentDate = ref<Date | null>(null);\n    const currentTimeText = ref('');\n    const dateError = ref<keyof MessageSchema | null>(null);\n    const timeError = ref<keyof MessageSchema | null>(null);\n    const { dateFormat } = useDateInputFormatter();\n    const { isTouchDevice } = useTouchDevice();\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const dateValue = computed(() => currentDate.value);\n    const timeValue = computed(() => currentTimeText.value);\n    const resolvedIsDateDisabled = computed(() => props.dateProps?.isDateDisabled ?? props.isDateDisabled);\n    const dateDescription = computed(() => {\n        if (isTouchDevice.value) {\n            return props.dateProps?.description;\n        } else {\n            return props.dateProps?.description\n                ? `${props.dateProps.description} ${t(dateFormat.value)}`\n                : t(dateFormat.value);\n        }\n    });\n\n    const isMergedDateInBounds = (date: Date) => {\n        if (resolvedIsDateDisabled.value?.(startOfDay(date))) {\n            return false;\n        }\n\n        if (props.min && date < setMilliseconds(props.min, 0)) {\n            return false;\n        }\n\n        if (props.max && date > setMilliseconds(props.max, 0)) {\n            return false;\n        }\n\n        return true;\n    };\n\n    const resolvedDateProps = computed(() => ({\n        disabled: props.disabled,\n        isDateDisabled: props.isDateDisabled,\n        max: props.max,\n        min: props.min,\n        readonly: props.readonly,\n        required: props.required,\n        errorMessage: dateErrorMessage.value,\n        ...props.dateProps,\n        description: dateDescription.value,\n    }));\n\n    const resolvedTimeProps = computed(() => ({\n        disabled: props.disabled,\n        errorMessage: timeErrorMessage.value,\n        readonly: props.readonly,\n        required: props.required,\n        ...props.timeProps,\n    }));\n\n    const dateErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return dateError.value ? t(dateError.value) : null;\n    });\n\n    const timeErrorMessage = computed(() => {\n        if (props.errorMessage) {\n            return props.errorMessage;\n        }\n        return timeError.value ? t(timeError.value) : null;\n    });\n\n    const clearErrors = () => {\n        dateError.value = null;\n        timeError.value = null;\n    };\n\n    /**\n     * Guards the modelValue watcher from clearing user input when the null was emitted\n     * by our own validation logic (e.g. partial/invalid input). Without this flag,\n     * the parent's v-model round-trip would trigger the watcher and wipe the fields.\n     * Reset on nextTick so that genuine external resets (e.g. a form clear button)\n     * still clear the UI.\n     */\n    const isSelfEmittedUpdate = ref(false);\n\n    watch(\n        () => props.modelValue,\n        newValue => {\n            if (isSelfEmittedUpdate.value) {\n                return;\n            }\n\n            if (newValue) {\n                // Sync internal state when a valid Date is set (e.g. programmatic update from parent)\n                currentDate.value = newValue;\n                currentTimeText.value = dateToTimeInputString(newValue);\n            } else {\n                // External reset (e.g. parent sets modelValue to null via a form clear button):\n                // clear all internal state so the UI resets fully.\n                currentDate.value = null;\n                currentTimeText.value = '';\n                clearErrors();\n            }\n        },\n        { immediate: true }\n    );\n\n    const validateBounds = (value: BentoDateTimePickerValue) => !value || isMergedDateInBounds(value);\n\n    const emitValidationState = (isValid: boolean) => {\n        if (isValid) {\n            emit('input:valid');\n        } else {\n            emit('input:error');\n        }\n    };\n\n    const emitModelValue = (value: BentoDateTimePickerValue) => {\n        isSelfEmittedUpdate.value = true;\n        emit('update:model-value', value);\n        nextTick(() => {\n            isSelfEmittedUpdate.value = false;\n        });\n    };\n\n    const emitValidatedValue = (value: BentoDateTimePickerValue) => {\n        emitModelValue(value);\n        emitValidationState(validateBounds(value));\n    };\n\n    const emitInvalidModelValue = (value: BentoDateTimePickerValue) => {\n        emitModelValue(value);\n        emitValidationState(false);\n    };\n\n    const onDateChanged = (date: Date | null) => {\n        currentDate.value = date;\n\n        // Date invalid/cleared: error if time is populated, valid if both empty\n        if (!date) {\n            if (currentTimeText.value) {\n                dateError.value = 'invalidDateFormat';\n                emitInvalidModelValue(null);\n            } else {\n                clearErrors();\n                emitValidatedValue(null);\n            }\n            return;\n        }\n\n        clearErrors();\n\n        // Prefill time with midnight when empty so the user sees a value\n        if (!currentTimeText.value) {\n            currentTimeText.value = '00:00:00';\n        }\n\n        const time = currentTimeText.value;\n\n        // Date valid but time invalid: preserve date, signal error\n        if (!isValidTimeString(time)) {\n            emitInvalidModelValue(null);\n            return;\n        }\n\n        // Both valid: merge and emit\n        emitValidatedValue(setTimeInDateObject(date, time));\n    };\n\n    const onTimeChanged = (time: string) => {\n        currentTimeText.value = time;\n\n        // Time cleared: error if date is set (time is required once prefilled), valid-null if both empty\n        if (!time) {\n            if (currentDate.value) {\n                timeError.value = 'enterTimeForDate';\n                emitInvalidModelValue(null);\n            } else {\n                clearErrors();\n                emitValidatedValue(null);\n            }\n            return;\n        }\n\n        timeError.value = null;\n\n        // Time invalid: preserve date, signal error\n        if (!isValidTimeString(time)) {\n            emitInvalidModelValue(null);\n            return;\n        }\n\n        // Time valid but no date: signal error\n        if (!currentDate.value) {\n            dateError.value = 'invalidDateFormat';\n            emitInvalidModelValue(null);\n            return;\n        }\n\n        // Both valid: merge and emit\n        emitValidatedValue(setTimeInDateObject(currentDate.value, time));\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Date time picker that combines a date picker (single date) with a time input.\n     *\n     * @example\n     * import { BentoDateTimePicker } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDateTimePicker },\n     *     template: `\n     *         <bento-date-time-picker\n     *             :date-props=\"{ label: 'Date' }\"\n     *             :time-props=\"{ label: 'Time' }\"\n     *             required\n     *             :model-value=\"dateTimeValue\"\n     *             @update:model-value=\"newValue => dateTimeValue = newValue\"\n     *         />\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-date-time-picker',\n        inheritAttrs: false,\n        model: { prop: 'modelValue', event: 'update:model-value' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-time-picker.scss\" />\n"],"names":["__default__","messages","currentDate","ref","currentTimeText","dateError","timeError","dateFormat","useDateInputFormatter","isTouchDevice","useTouchDevice","t","useI18n","dateValue","computed","timeValue","resolvedIsDateDisabled","_a","props","dateDescription","_b","isMergedDateInBounds","date","startOfDay","setMilliseconds","resolvedDateProps","dateErrorMessage","resolvedTimeProps","timeErrorMessage","clearErrors","isSelfEmittedUpdate","watch","newValue","dateToTimeInputString","validateBounds","value","emitValidationState","isValid","emit","emitModelValue","nextTick","emitValidatedValue","emitInvalidModelValue","time","isValidTimeString","setTimeInDateObject"],"mappings":"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"}

package/dist/chunks/{date.B0m0sFP6.js → date.C1HnIyOv.js}

@@ -1,10 +1,10 @@
-import { defineComponent as o, computed as s } from "vue";
-import { u as t } from "./index.B6WW_F-J.js";
-import { B as c } from "./typography.C8lPlsbD.js";
+import { defineComponent as a, computed as i } from "vue";
+import { u as c } from "./index.B6WW_F-J.js";
+import { B as d } from "./typography.C8lPlsbD.js";
 import { n as y } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/date.css";
-var i = /* @__PURE__ */ ((_) => (_.SHORT_MONTH = "LLL", _.DAY_OF_MONTH = "d", _.LONG_WEEKDAY = "EEEE", _.SHORT_TIME_WITH_PERIOD = "h:mm aa", _.SHORT_TIME_WITHOUT_PERIOD = "H:mm", _.EXACT_TIME_WITH_PERIOD = "h:mm:ss aa", _.EXACT_TIME_WITHOUT_PERIOD = "H:mm:ss", _.LONG_DATE = "LLLL dd, yyyy", _.SHORT_DATE = "LLL dd, yyyy", _.FULL_DATE_EXACT_TIME_WITH_PERIOD = "LLL dd, yyyy, h:mm:ss aa", _.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm:ss", _.FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD = "LLL dd, yyyy, h:mm:ss aa O", _.FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm:ss O", _.FULL_DATE_TIME_WITH_PERIOD = "LLL dd, yyyy, h:mm aa", _.FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD = "LLL dd, yyyy, h:mm aa O", _.FULL_DATE_TIME_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm", _.FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm O", _))(i || {});
-const T = {
+var t = /* @__PURE__ */ ((_) => (_.SHORT_MONTH = "LLL", _.DAY_OF_MONTH = "d", _.LONG_WEEKDAY = "EEEE", _.SHORT_TIME_WITH_PERIOD = "h:mm aa", _.SHORT_TIME_WITHOUT_PERIOD = "H:mm", _.EXACT_TIME_WITH_PERIOD = "h:mm:ss aa", _.EXACT_TIME_WITHOUT_PERIOD = "H:mm:ss", _.LONG_DATE = "LLLL dd, yyyy", _.SHORT_DATE = "LLL dd, yyyy", _.FULL_DATE_EXACT_TIME_WITH_PERIOD = "LLL dd, yyyy, h:mm:ss aa", _.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm:ss", _.FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD = "LLL dd, yyyy, h:mm:ss aa O", _.FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm:ss O", _.FULL_DATE_TIME_WITH_PERIOD = "LLL dd, yyyy, h:mm aa", _.FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD = "LLL dd, yyyy, h:mm aa O", _.FULL_DATE_TIME_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm", _.FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = "LLL dd, yyyy, H:mm O", _))(t || {});
+const m = {
   SHORT_MONTH: {
     month: "short"
   },
@@ -120,41 +120,43 @@ const T = {
   }
 }, L = {
   name: "bento-date"
-}, d = /* @__PURE__ */ o({
+}, O = /* @__PURE__ */ a({
   ...L,
   props: {
     date: { default: null },
-    format: { default: i.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD },
+    format: { default: t.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD },
     disableTypography: { type: Boolean, default: !1 }
   },
   setup(_) {
-    const r = _, { locale: n } = t(void 0, !0), e = Object.entries(i).reduce(
-      (m, [u, E]) => (m[E.toString()] = u, m),
+    const e = _, { locale: T } = c(void 0, !0), r = Object.entries(t).reduce(
+      (n, [E, o]) => (n[o.toString()] = E, n),
       {}
-    ), I = s(() => {
-      if (!r.date)
+    ), u = i(() => e.date ? e.date instanceof Date ? e.date : new Date(e.date) : null), I = i(
+      () => u.value && !Number.isNaN(u.value.getTime()) ? u.value.toISOString() : void 0
+    ), s = i(() => {
+      if (!u.value || Number.isNaN(u.value.getTime()))
         return "";
-      const m = typeof r.date == "string" ? new Date(r.date) : r.date, u = e == null ? void 0 : e[r.format];
+      const n = r == null ? void 0 : r[e.format];
       let E;
-      return u && (T != null && T[u]) && (E = T == null ? void 0 : T[u]), new Intl.DateTimeFormat(n.value, E).format(m);
+      return n && (m != null && m[n]) && (E = m == null ? void 0 : m[n]), new Intl.DateTimeFormat(T.value, E).format(u.value);
     });
-    return { __sfc: !0, BentoDateFormatPresets: T, props: r, locale: n, bentoDateFormatKeyValuePairs: e, formattedDate: I, BentoTypography: c };
+    return { __sfc: !0, BentoDateFormatPresets: m, props: e, locale: T, bentoDateFormatKeyValuePairs: r, datePropAsDateObject: u, dateTime: I, formattedDate: s, BentoTypography: d };
   }
 });
-var O = function() {
-  var r = this, n = r._self._c, e = r._self._setupProxy;
-  return n("div", { staticClass: "b-date" }, [r.disableTypography ? [r._v(r._s(e.formattedDate))] : n(e.BentoTypography, { staticClass: "b-date__label", attrs: { el: "span", variant: "body", strong: "" } }, [r._v(" " + r._s(e.formattedDate) + " ")])], 2);
-}, a = [], h = /* @__PURE__ */ y(
-  d,
+var h = function() {
+  var e = this, T = e._self._c, r = e._self._setupProxy;
+  return T("div", { staticClass: "b-date" }, [e.disableTypography ? T("time", { attrs: { datetime: r.dateTime } }, [e._v(e._s(r.formattedDate))]) : T(r.BentoTypography, { staticClass: "b-date__label", attrs: { el: "span", variant: "body", strong: "" } }, [T("time", { attrs: { datetime: r.dateTime } }, [e._v(e._s(r.formattedDate))])])], 1);
+}, A = [], H = /* @__PURE__ */ y(
   O,
-  a,
+  h,
+  A,
   !1,
   null,
-  "02030534"
+  "94029391"
 );
-const f = h.exports;
+const N = H.exports;
 export {
-  f as B,
-  i as a
+  N as B,
+  t as a
 };
-//# sourceMappingURL=date.B0m0sFP6.js.map
+//# sourceMappingURL=date.C1HnIyOv.js.map

package/dist/chunks/date.C1HnIyOv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.C1HnIyOv.js","sources":["../../src/components/date/date.types.ts","../../src/components/date/date.vue"],"sourcesContent":["export enum BentoDateFormat {\n    // MONTH\n    SHORT_MONTH = 'LLL', // Jun\n\n    // DAY\n    DAY_OF_MONTH = 'd', // 1, 2, ..., 31,\n    LONG_WEEKDAY = 'EEEE', // Friday\n\n    // TIME\n    SHORT_TIME_WITH_PERIOD = `h:mm aa`, // 2:44 PM\n    SHORT_TIME_WITHOUT_PERIOD = 'H:mm', // 14:45\n    EXACT_TIME_WITH_PERIOD = 'h:mm:ss aa', // 2:05:11 PM\n    EXACT_TIME_WITHOUT_PERIOD = 'H:mm:ss', // 14:05:11\n\n    // DATE\n    LONG_DATE = 'LLLL dd, yyyy', // June 30, 2023\n    SHORT_DATE = 'LLL dd, yyyy', // Jun 30, 2023\n    FULL_DATE_EXACT_TIME_WITH_PERIOD = `${SHORT_DATE}, h:mm:ss aa`, // June 30, 2023, 2:54:10 PM\n    FULL_DATE_EXACT_TIME_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm:ss`, // June 30, 2023, 14:54:42\n    FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD = `${SHORT_DATE}, h:mm:ss aa O`, // June 30, 2023, 2:56:07 PM GMT+2\n    FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm:ss O`, // June 30, 2023, 14:56:28 GMT+2\n    FULL_DATE_TIME_WITH_PERIOD = `${SHORT_DATE}, h:mm aa`, // Jun 30, 2023, 2:48 PM\n    FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD = `${SHORT_DATE}, h:mm aa O`, // Jun 30, 2023, 2:44 PM GMT+2\n    FULL_DATE_TIME_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm`, // Jun 30, 2023, 14:48\n    FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD = `${SHORT_DATE}, H:mm O`, // Jun 30, 2023, 14:43 GMT+2\n}\n\nexport interface BentoDateProps {\n    /**\n     * The date to format. The data can be supplied as:\n     * - a Date object.\n     * - a number of milliseconds elapsed since the epoch.\n     * - a date string e.g. '2023-07-31T10:55:22+02:00'.\n     */\n    date?: Date | number | string | null;\n    /**\n     * The string format of the date to be displayed\n     */\n    format?: BentoDateFormat | `${BentoDateFormat}`;\n    /**\n     * Disable the default typography for the component. Only use this when the component is inside another typography\n     */\n    disableTypography?: boolean;\n}\n","<template>\n    <div class=\"b-date\">\n        <bento-typography v-if=\"!disableTypography\" class=\"b-date__label\" el=\"span\" variant=\"body\" strong>\n            <time :datetime=\"dateTime\">{{ formattedDate }}</time>\n        </bento-typography>\n        <time v-else :datetime=\"dateTime\">{{ formattedDate }}</time>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed } from 'vue';\n    import { BentoDateFormat, type BentoDateProps } from './date.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoTypography } from '@/components/typography';\n\n    const props = defineProps({\n  date: { default: null },\n  format: { default: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD },\n  disableTypography: { type: Boolean, default: false }\n});\n\n    const { locale } = useI18n(undefined, true);\n\n    /**\n     * This is a reverse mapping of the BentoDateFormat enum.\n     * It allows us to get the key of the enum by its value, which is then used to look up the\n     * corresponding formatting options in `BentoDateFormatPresets`.\n     */\n    const bentoDateFormatKeyValuePairs = Object.entries(BentoDateFormat).reduce<\n        Record<BentoDateFormat, keyof typeof BentoDateFormat>\n    >(\n        (acc, [key, value]) => {\n            acc[value.toString()] = key;\n            return acc;\n        },\n        {} as Record<BentoDateFormat, keyof typeof BentoDateFormat>\n    );\n\n    const datePropAsDateObject = computed(() => {\n        if (!props.date) {\n            return null;\n        }\n\n        return props.date instanceof Date ? props.date : new Date(props.date);\n    });\n\n    const dateTime = computed(() =>\n        datePropAsDateObject.value && !Number.isNaN(datePropAsDateObject.value.getTime())\n            ? datePropAsDateObject.value.toISOString()\n            : undefined\n    );\n\n    const formattedDate = computed(() => {\n        if (!datePropAsDateObject.value || Number.isNaN(datePropAsDateObject.value.getTime())) {\n            return '';\n        }\n\n        const formatKeyEntry = bentoDateFormatKeyValuePairs?.[props.format];\n\n        let dateFormat: Intl.DateTimeFormatOptions | undefined = undefined;\n        // Translate the key of the enum to the Intl.DateTimeFormatOptions configuration object\n        if (formatKeyEntry && BentoDateFormatPresets?.[formatKeyEntry]) {\n            dateFormat = BentoDateFormatPresets?.[formatKeyEntry];\n        }\n        return new Intl.DateTimeFormat(locale.value, dateFormat).format(datePropAsDateObject.value);\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The format presets to use when being supplied with a key name in BentoDateFormat.\n     * They translate to configuration options that are used in the Intl.DateTimeFormat function\n     *\n     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n     */\n    const BentoDateFormatPresets: { [key in keyof typeof BentoDateFormat]: Intl.DateTimeFormatOptions } = {\n        SHORT_MONTH: {\n            month: 'short',\n        },\n        DAY_OF_MONTH: {\n            day: 'numeric',\n        },\n        LONG_WEEKDAY: {\n            weekday: 'long',\n        },\n        SHORT_TIME_WITH_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n        },\n        SHORT_TIME_WITHOUT_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n        },\n        EXACT_TIME_WITH_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n        },\n        EXACT_TIME_WITHOUT_PERIOD: {\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: false,\n        },\n        LONG_DATE: {\n            year: 'numeric',\n            month: 'long',\n            day: 'numeric',\n        },\n        SHORT_DATE: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n        },\n        FULL_DATE_TIME_WITH_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n        },\n        FULL_DATE_TIME_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n        },\n        FULL_DATE_EXACT_TIME_WITH_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n        },\n        FULL_DATE_EXACT_TIME_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: '2-digit',\n            minute: '2-digit',\n            second: '2-digit',\n            hour12: false,\n        },\n        FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: true,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            hour12: false,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: true,\n            timeZoneName: 'short',\n        },\n        FULL_DATE_EXACT_TIME_WITH_TIMEZONE_AND_WITHOUT_PERIOD: {\n            year: 'numeric',\n            month: 'short',\n            day: 'numeric',\n            hour: 'numeric',\n            minute: 'numeric',\n            second: 'numeric',\n            hour12: false,\n            timeZoneName: 'short',\n        },\n    };\n\n    /**\n     * A Date component is used to display a formatted date value.\n     *\n     * @example\n     * import { BentoDate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDate },\n     *     template: `\n     *          <bento-date :date=\"dateObject\" :format=\"BentoDateFormat.LONG_DATE\"/>\n     *     `\n     * }\n     */\n    export default {\n        name: 'bento-date',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date.scss\" />\n"],"names":["BentoDateFormat","BentoDateFormat2","BentoDateFormatPresets","__default__","locale","useI18n","bentoDateFormatKeyValuePairs","acc","key","value","datePropAsDateObject","computed","props","dateTime","formattedDate","formatKeyEntry","dateFormat"],"mappings":";;;;;AAAO,IAAAA,IAAA,kBAAAC,OAEHA,EAAA,cAAA,OAGAA,EAAA,eAAA,KACAA,EAAA,eAAA,QAGAA,EAAA,yBAAA,WACAA,EAAA,4BAAA,QACAA,EAAA,yBAAA,cACAA,EAAA,4BAAA,WAGAA,EAAA,YAAA,iBACAA,EAAA,aAAA,gBACAA,EAAA,mCAAA,4BACAA,EAAA,sCAAA,yBACAA,EAAA,gDAAA,8BACAA,EAAA,wDAAA,2BACAA,EAAA,6BAAA,yBACAA,EAAA,0CAAA,2BACAA,EAAA,gCAAA,sBACAA,EAAA,kDAAA,wBAxBQA,IAAAD,KAAA,CAAA,CAAA;AC2ER,MAAAE,IAAA;AAAA,EAAsG,aAAA;AAAA,IACrF,OAAA;AAAA,EACF;AAAA,EACX,cAAA;AAAA,IACc,KAAA;AAAA,EACL;AAAA,EACT,cAAA;AAAA,IACc,SAAA;AAAA,EACD;AAAA,EACb,wBAAA;AAAA,IACwB,MAAA;AAAA,IACd,QAAA;AAAA,IACE,QAAA;AAAA,EACA;AAAA,EACZ,2BAAA;AAAA,IAC2B,MAAA;AAAA,IACjB,QAAA;AAAA,IACE,QAAA;AAAA,EACA;AAAA,EACZ,wBAAA;AAAA,IACwB,MAAA;AAAA,IACd,QAAA;AAAA,IACE,QAAA;AAAA,IACA,QAAA;AAAA,EACA;AAAA,EACZ,2BAAA;AAAA,IAC2B,MAAA;AAAA,IACjB,QAAA;AAAA,IACE,QAAA;AAAA,IACA,QAAA;AAAA,EACA;AAAA,EACZ,WAAA;AAAA,IACW,MAAA;AAAA,IACD,OAAA;AAAA,IACC,KAAA;AAAA,EACF;AAAA,EACT,YAAA;AAAA,IACY,MAAA;AAAA,IACF,OAAA;AAAA,IACC,KAAA;AAAA,EACF;AAAA,EACT,4BAAA;AAAA,IAC4B,MAAA;AAAA,IAClB,OAAA;AAAA,IACC,KAAA;AAAA,IACF,MAAA;AAAA,IACC,QAAA;AAAA,IACE,QAAA;AAAA,EACA;AAAA,EACZ,+BAAA;AAAA,IAC+B,MAAA;AAAA,IACrB,OAAA;AAAA,IACC,KAAA;AAAA,IACF,MAAA;AAAA,IACC,QAAA;AAAA,IACE,QAAA;AAAA,EACA;AAAA,EACZ,kCAAA;AAAA,IACkC,MAAA;AAAA,IACxB,OAAA;AAAA,IACC,KAAA;AAAA,IACF,MAAA;AAAA,IACC,QAAA;AAAA,IACE,QAAA;AAAA,IACA,QAAA;AAAA,EACA;AAAA,EACZ,qCAAA;AAAA,IACqC,MAAA;AAAA,IAC3B,OAAA;AAAA,IACC,KAAA;AAAA,IACF,MAAA;AAAA,IACC,QAAA;AAAA,IACE,QAAA;AAAA,IACA,QAAA;AAAA,EACA;AAAA,EACZ,yCAAA;AAAA,IACyC,MAAA;AAAA,IAC/B,OAAA;AAAA,IACC,KAAA;AAAA,IACF,MAAA;AAAA,IACC,QAAA;AAAA,IACE,QAAA;AAAA,IACA,cAAA;AAAA,EACM;AAAA,EAClB,iDAAA;AAAA,IACiD,MAAA;AAAA,IACvC,OAAA;AAAA,IACC,KAAA;AAAA,IACF,MAAA;AAAA,IACC,QAAA;AAAA,IACE,QAAA;AAAA,IACA,cAAA;AAAA,EACM;AAAA,EAClB,+CAAA;AAAA,IAC+C,MAAA;AAAA,IACrC,OAAA;AAAA,IACC,KAAA;AAAA,IACF,MAAA;AAAA,IACC,QAAA;AAAA,IACE,QAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,EACM;AAAA,EAClB,uDAAA;AAAA,IACuD,MAAA;AAAA,IAC7C,OAAA;AAAA,IACC,KAAA;AAAA,IACF,MAAA;AAAA,IACC,QAAA;AAAA,IACE,QAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA;AAAA,EACM;AAEtB,GAeAC,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBAzLA,EAAA,QAAAC,EAAA,IAAAC,EAAA,QAAA,EAAA,GAOAC,IAAA,OAAA,QAAAN,CAAA,EAAA;AAAA,MAAqE,CAAAO,GAAA,CAAAC,GAAAC,CAAA,OAI7DF,EAAAE,EAAA,SAAA,CAAA,IAAAD,GACAD;AAAA,MACJ,CAAA;AAAA,IACC,GAGLG,IAAAC,EAAA,MACIC,EAAA,OAIAA,EAAA,gBAAA,OAAAA,EAAA,OAAA,IAAA,KAAAA,EAAA,IAAA,IAHI,IAGgE,GAGxEC,IAAAF;AAAA,MAAiB,MAAAD,EAAA,SAAA,CAAA,OAAA,MAAAA,EAAA,MAAA,QAAA,CAAA,IAAAA,EAAA,MAAA,YAAA,IAAA;AAAA,IAGP,GAGVI,IAAAH,EAAA,MAAA;AACI,UAAA,CAAAD,EAAA,SAAA,OAAA,MAAAA,EAAA,MAAA,QAAA,CAAA;AACI,eAAA;AAGJ,YAAAK,IAAAT,KAAA,gBAAAA,EAAAM,EAAA;AAEA,UAAAI;AAEA,aAAAD,MAAAb,KAAA,QAAAA,EAAAa,QACIC,IAAAd,KAAA,gBAAAA,EAAAa,KAEJ,IAAA,KAAA,eAAAX,EAAA,OAAAY,CAAA,EAAA,OAAAN,EAAA,KAAA;AAAA,IAA0F,CAAA;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dialog-page.DYWnKdnP.js → dialog-page.BendBRv6.js}

@@ -4,7 +4,7 @@ import { A as z } from "./arrow-left.CRREfabP.js";
 import { u as K } from "./use-has-slot.C9lQZ6nz.js";
 import { u as Y } from "./index.B6WW_F-J.js";
 import { i as $ } from "./typography.C8lPlsbD.js";
-import { e as X } from "./index.CJYgd0QI.js";
+import { g as X } from "./index.BPUMyryR.js";
 import { n as Z } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/dialog-page.css";
 var E = /* @__PURE__ */ ((r) => (r.TRANSITION_LEVEL_DEEPER = "b-dialog-page__animation--level-deeper", r.TRANSITION_LEVEL_UPPER = "b-dialog-page__animation--level-upper", r))(E || {});
@@ -75,20 +75,20 @@ const q = /* @__PURE__ */ Symbol("dialog registerPage injection key"), Q = /* @_
   },
   emits: ["animationend"],
   setup(r, { emit: t }) {
-    const a = r, e = F(), T = K(e), { t: O } = Y(), l = P(null), g = P(!1), u = P(!1), { arrivedState: c } = X(l), d = n(() => s.value ? s.value === a.pageId : !0), R = n(() => ({
-      "b-dialog-page__header--with-border": a.alwaysShowBorder || g.value && !c.top
+    const a = r, e = F(), T = K(e), { t: O } = Y(), l = P(null), v = P(!1), u = P(!1), { arrivedState: c } = X(l), d = n(() => s.value ? s.value === a.pageId : !0), R = n(() => ({
+      "b-dialog-page__header--with-border": a.alwaysShowBorder || v.value && !c.top
     })), L = n(() => ({
-      "b-dialog-page__footer--with-border": a.alwaysShowBorder || g.value && !c.bottom
+      "b-dialog-page__footer--with-border": a.alwaysShowBorder || v.value && !c.bottom
     })), k = n(() => !(c.bottom && c.top)), G = () => {
       l.value;
     }, p = async (i) => {
-      i && (await S(), u.value && (g.value = l.value && l.value.scrollHeight > l.value.clientHeight));
-    }, { activePage: s, animation: _, isAnimationActive: v, isOpen: f, pages: b, previousPages: o, updatePage: I } = N(Q);
+      i && (await S(), u.value && (v.value = l.value && l.value.scrollHeight > l.value.clientHeight));
+    }, { activePage: s, animation: _, isAnimationActive: g, isOpen: f, pages: b, previousPages: o, updatePage: I } = N(Q);
     h(() => f.value, p, { immediate: !0 }), h(() => d.value, p, { immediate: !0 });
     const x = n(() => a.previousPage ? !0 : a.previousPage === null ? !1 : y.value && d.value), D = () => {
-      _.value = E.TRANSITION_LEVEL_DEEPER, v && (v.value = !1), t("animationend");
+      _.value = E.TRANSITION_LEVEL_DEEPER, g && (g.value = !1), t("animationend");
     }, V = () => {
-      v && (v.value = !0);
+      g && (g.value = !0);
     }, y = n(() => o.value.length > 1), m = n(() => o.value[o.value.length - 1]), A = n(() => b.value.some((i) => i === s.value)), j = async (i) => {
       if (i) {
         const B = o.value.indexOf(i);
@@ -117,7 +117,7 @@ const q = /* @__PURE__ */ Symbol("dialog registerPage injection key"), Q = /* @_
       u.value = !0;
     }), J(() => {
       u.value = !1, w();
-    }), { __sfc: !0, props: a, emit: t, slots: e, hasSlot: T, t: O, contentElement: l, hasScroll: g, isMounted: u, arrivedState: c, showPage: d, headerConditionalClasses: R, footerConditionalClasses: L, isScrollable: k, onScroll: G, calculateScroll: p, activePage: s, animation: _, isAnimationActive: v, isOpen: f, pages: b, previousPages: o, updatePage: I, showBackButton: x, updateAnimation: D, startAnimation: V, hasPreviousPages: y, lastPage: m, isActivePageValid: A, goToPreviousPage: j, registerPage: C, unregisterPage: w, BentoButton: M, ArrowLeftIcon: z };
+    }), { __sfc: !0, props: a, emit: t, slots: e, hasSlot: T, t: O, contentElement: l, hasScroll: v, isMounted: u, arrivedState: c, showPage: d, headerConditionalClasses: R, footerConditionalClasses: L, isScrollable: k, onScroll: G, calculateScroll: p, activePage: s, animation: _, isAnimationActive: g, isOpen: f, pages: b, previousPages: o, updatePage: I, showBackButton: x, updateAnimation: D, startAnimation: V, hasPreviousPages: y, lastPage: m, isActivePageValid: A, goToPreviousPage: j, registerPage: C, unregisterPage: w, BentoButton: M, ArrowLeftIcon: z };
   }
 });
 var te = function() {
@@ -140,4 +140,4 @@ export {
   q as a,
   de as b
 };
-//# sourceMappingURL=dialog-page.DYWnKdnP.js.map
+//# sourceMappingURL=dialog-page.BendBRv6.js.map

package/dist/chunks/{dialog-page.DYWnKdnP.js.map → dialog-page.BendBRv6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-page.DYWnKdnP.js","sources":["../../src/components/internal/dialog-page/dialog-page.types.ts","../../src/components/internal/dialog-page/dialog-page.keys.ts","../../src/components/internal/dialog-page/dialog-page.vue"],"sourcesContent":["import { type Ref } from 'vue';\n\nexport enum BentoDialogPageAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-dialog-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-dialog-page__animation--level-upper',\n}\n\nexport interface BentoDialogPageConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    isAnimationActive?: Ref<boolean>;\n    isOpen: Ref<boolean>;\n    pages: Ref<Array<string>>;\n    previousPages: Ref<Array<string>>;\n    updatePage: (page: string) => void;\n}\n\nexport type BentoDialogPageRegisterPage = (pageId: string) => { unregisterPage: () => void };\n","export const DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY = Symbol('dialog registerPage injection key');\nexport const DIALOG_PAGE_CONFIG_INJECTION_KEY = Symbol('dialog page config data injection key');\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\" @leave=\"startAnimation\">\n        <div v-if=\"isOpen && showPage\" class=\"b-dialog-page\">\n            <div v-if=\"hasSlot('header')\" class=\"b-dialog-page__header\" :class=\"headerConditionalClasses\">\n                <div\n                    v-if=\"showBackButton\"\n                    class=\"b-dialog-page__back-button\"\n                    :style=\"backButtonStyling\"\n                    data-testid=\"back-button\"\n                >\n                    <bento-button variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n                        <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                    </bento-button>\n                </div>\n                <slot name=\"header\"></slot>\n            </div>\n            <div\n                v-if=\"hasSlot('content')\"\n                ref=\"contentElement\"\n                class=\"b-dialog-page__content\"\n                :tabindex=\"isScrollable ? 0 : null\"\n                @scroll=\"onScroll\"\n            >\n                <slot name=\"content\" />\n            </div>\n            <div v-if=\"hasSlot('footer')\" class=\"b-dialog-page__footer\" :class=\"footerConditionalClasses\">\n                <slot name=\"footer\" />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onMounted, onUnmounted, type PropType, ref, useSlots, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n    import {\n        BentoDialogPageAnimation,\n        type BentoDialogPageConfigData,\n        type BentoDialogPageRegisterPage,\n    } from './dialog-page.types';\n    import type { CSSProperties } from 'vue/types/jsx.d.ts';\n\n    import { DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY } from './dialog-page.keys';\n\n    import messages from './messages.json';\n    import { useScroll } from '@vueuse/core';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Identifier of the page, used with activePage prop to handle navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Show header and actions border\n         */\n        alwaysShowBorder: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Pass custom styling to the back button to position it correctly with the header slot\n         */\n        backButtonStyling: { type: Object as PropType<CSSProperties>, default: null },\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    const emit = defineEmits([\"animationend\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n    const isMounted = ref(false);\n\n    const { arrivedState } = useScroll(contentElement);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-dialog-page__header--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.top),\n    }));\n\n    const footerConditionalClasses = computed(() => ({\n        'b-dialog-page__footer--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.bottom),\n    }));\n\n    const isScrollable = computed(() => !(arrivedState.bottom && arrivedState.top));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        if (!isMounted.value) {\n            return;\n        }\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    const { activePage, animation, isAnimationActive, isOpen, pages, previousPages, updatePage } =\n        inject<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY);\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Animation\n    const updateAnimation = () => {\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER;\n        if (isAnimationActive) {\n            isAnimationActive.value = false;\n        }\n\n        emit('animationend');\n    };\n\n    const startAnimation = () => {\n        if (isAnimationActive) {\n            isAnimationActive.value = true;\n        }\n    };\n\n    // Previous page logic\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page === activePage.value));\n\n    const goToPreviousPage = async (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_UPPER;\n        await nextTick();\n        if (!isMounted.value) {\n            return;\n        }\n        updatePage(lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n            if (!isMounted.value || !isOpen.value) {\n                return;\n            }\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                if (isDevelopmentEnviroment) {\n                    // eslint-disable-next-line no-console\n                    console.error(\n                        `The activePage passed \"${activePage.value}\" does not match the id of any of the pages`\n                    );\n                    return;\n                }\n            }\n\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoDialogPageRegisterPage>(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY);\n    const { unregisterPage } = registerPage(props.pageId);\n\n    onMounted(() => {\n        isMounted.value = true;\n    });\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => {\n        isMounted.value = false;\n        unregisterPage();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * DialogPage is an internal component used to render different pages of dialog components (Modal, ModalFullscreen and Sidepanel)\n     *\n     * @example\n     * import { DialogPage } from '@/internal';\n     *\n     * export default {\n     *     components: { DialogPage },\n     *     template: `\n     *          <dialog-page pageId='step1' always-show-border>\n     *              <template #header>Header</template>\n     *              <template #content>Content</template>\n     *              <template #footer>Footer</template>\n     *          </dialog-page>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./dialog-page.scss\" />\n"],"names":["BentoDialogPageAnimation","BentoDialogPageAnimation2","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","DIALOG_PAGE_CONFIG_INJECTION_KEY","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","contentElement","ref","hasScroll","isMounted","arrivedState","useScroll","showPage","computed","activePage","props","headerConditionalClasses","footerConditionalClasses","isScrollable","onScroll","calculateScroll","watchedValue","nextTick","animation","isAnimationActive","isOpen","pages","previousPages","updatePage","inject","watch","showBackButton","hasPreviousPages","updateAnimation","emit","startAnimation","lastPage","isActivePageValid","page","goToPreviousPage","index","isDevelopmentEnviroment","registerPage","unregisterPage","onMounted","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"dialog-page.BendBRv6.js","sources":["../../src/components/internal/dialog-page/dialog-page.types.ts","../../src/components/internal/dialog-page/dialog-page.keys.ts","../../src/components/internal/dialog-page/dialog-page.vue"],"sourcesContent":["import { type Ref } from 'vue';\n\nexport enum BentoDialogPageAnimation {\n    TRANSITION_LEVEL_DEEPER = 'b-dialog-page__animation--level-deeper',\n    TRANSITION_LEVEL_UPPER = 'b-dialog-page__animation--level-upper',\n}\n\nexport interface BentoDialogPageConfigData {\n    activePage: Ref<string>;\n    animation: Ref<string>;\n    isAnimationActive?: Ref<boolean>;\n    isOpen: Ref<boolean>;\n    pages: Ref<Array<string>>;\n    previousPages: Ref<Array<string>>;\n    updatePage: (page: string) => void;\n}\n\nexport type BentoDialogPageRegisterPage = (pageId: string) => { unregisterPage: () => void };\n","export const DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY = Symbol('dialog registerPage injection key');\nexport const DIALOG_PAGE_CONFIG_INJECTION_KEY = Symbol('dialog page config data injection key');\n","<template>\n    <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\" @leave=\"startAnimation\">\n        <div v-if=\"isOpen && showPage\" class=\"b-dialog-page\">\n            <div v-if=\"hasSlot('header')\" class=\"b-dialog-page__header\" :class=\"headerConditionalClasses\">\n                <div\n                    v-if=\"showBackButton\"\n                    class=\"b-dialog-page__back-button\"\n                    :style=\"backButtonStyling\"\n                    data-testid=\"back-button\"\n                >\n                    <bento-button variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n                        <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n                    </bento-button>\n                </div>\n                <slot name=\"header\"></slot>\n            </div>\n            <div\n                v-if=\"hasSlot('content')\"\n                ref=\"contentElement\"\n                class=\"b-dialog-page__content\"\n                :tabindex=\"isScrollable ? 0 : null\"\n                @scroll=\"onScroll\"\n            >\n                <slot name=\"content\" />\n            </div>\n            <div v-if=\"hasSlot('footer')\" class=\"b-dialog-page__footer\" :class=\"footerConditionalClasses\">\n                <slot name=\"footer\" />\n            </div>\n        </div>\n    </Transition>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, nextTick, onMounted, onUnmounted, type PropType, ref, useSlots, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n    import {\n        BentoDialogPageAnimation,\n        type BentoDialogPageConfigData,\n        type BentoDialogPageRegisterPage,\n    } from './dialog-page.types';\n    import type { CSSProperties } from 'vue/types/jsx.d.ts';\n\n    import { DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY } from './dialog-page.keys';\n\n    import messages from './messages.json';\n    import { useScroll } from '@vueuse/core';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Identifier of the page, used with activePage prop to handle navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Show header and actions border\n         */\n        alwaysShowBorder: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Pass custom styling to the back button to position it correctly with the header slot\n         */\n        backButtonStyling: { type: Object as PropType<CSSProperties>, default: null },\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    const emit = defineEmits([\"animationend\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    // Refs\n    const contentElement = ref<HTMLDivElement>(null);\n    const hasScroll = ref(false);\n    const isMounted = ref(false);\n\n    const { arrivedState } = useScroll(contentElement);\n\n    // Logic to choose which page is active/shown\n    const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n    // Scrolling styling logic\n    const headerConditionalClasses = computed(() => ({\n        'b-dialog-page__header--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.top),\n    }));\n\n    const footerConditionalClasses = computed(() => ({\n        'b-dialog-page__footer--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.bottom),\n    }));\n\n    const isScrollable = computed(() => !(arrivedState.bottom && arrivedState.top));\n\n    const onScroll = () => {\n        if (!contentElement.value) {\n            return;\n        }\n    };\n\n    const calculateScroll = async watchedValue => {\n        if (!watchedValue) {\n            return;\n        }\n        // Wait for content to be rendered to be able to calculate the height\n        await nextTick();\n        if (!isMounted.value) {\n            return;\n        }\n        hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n    };\n\n    const { activePage, animation, isAnimationActive, isOpen, pages, previousPages, updatePage } =\n        inject<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY);\n\n    watch(() => isOpen.value, calculateScroll, { immediate: true });\n    watch(() => showPage.value, calculateScroll, { immediate: true });\n\n    // Logic to determine whether the back button should be shown on the page\n    const showBackButton = computed(() => {\n        if (props.previousPage) {\n            return true;\n        }\n        if (props.previousPage === null) {\n            return false;\n        }\n        return hasPreviousPages.value && showPage.value;\n    });\n\n    // Animation\n    const updateAnimation = () => {\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER;\n        if (isAnimationActive) {\n            isAnimationActive.value = false;\n        }\n\n        emit('animationend');\n    };\n\n    const startAnimation = () => {\n        if (isAnimationActive) {\n            isAnimationActive.value = true;\n        }\n    };\n\n    // Previous page logic\n    const hasPreviousPages = computed(() => previousPages.value.length > 1);\n    const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n    const isActivePageValid = computed(() => pages.value.some(page => page === activePage.value));\n\n    const goToPreviousPage = async (page: string) => {\n        if (page) {\n            const index = previousPages.value.indexOf(page);\n            if (index !== -1) {\n                previousPages.value = previousPages.value.slice(0, index + 1);\n            } else {\n                previousPages.value = [page];\n            }\n        } else {\n            previousPages.value.pop();\n        }\n\n        animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_UPPER;\n        await nextTick();\n        if (!isMounted.value) {\n            return;\n        }\n        updatePage(lastPage.value);\n    };\n\n    // Add new page to the previousPage array to keep track of user navigation\n    watch(\n        () => activePage.value,\n        async () => {\n            await nextTick();\n            if (!isMounted.value || !isOpen.value) {\n                return;\n            }\n\n            if (!!activePage.value && !isActivePageValid.value) {\n                if (isDevelopmentEnviroment) {\n                    // eslint-disable-next-line no-console\n                    console.error(\n                        `The activePage passed \"${activePage.value}\" does not match the id of any of the pages`\n                    );\n                    return;\n                }\n            }\n\n            if (activePage.value !== lastPage.value) {\n                previousPages.value.push(activePage.value);\n            }\n        },\n        { immediate: true }\n    );\n\n    // Register page to parent component and inject data from parent component\n    const registerPage = inject<BentoDialogPageRegisterPage>(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY);\n    const { unregisterPage } = registerPage(props.pageId);\n\n    onMounted(() => {\n        isMounted.value = true;\n    });\n\n    // Unregister page on unmounting the page\n    onUnmounted(() => {\n        isMounted.value = false;\n        unregisterPage();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * DialogPage is an internal component used to render different pages of dialog components (Modal, ModalFullscreen and Sidepanel)\n     *\n     * @example\n     * import { DialogPage } from '@/internal';\n     *\n     * export default {\n     *     components: { DialogPage },\n     *     template: `\n     *          <dialog-page pageId='step1' always-show-border>\n     *              <template #header>Header</template>\n     *              <template #content>Content</template>\n     *              <template #footer>Footer</template>\n     *          </dialog-page>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./dialog-page.scss\" />\n"],"names":["BentoDialogPageAnimation","BentoDialogPageAnimation2","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","DIALOG_PAGE_CONFIG_INJECTION_KEY","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","contentElement","ref","hasScroll","isMounted","arrivedState","useScroll","showPage","computed","activePage","props","headerConditionalClasses","footerConditionalClasses","isScrollable","onScroll","calculateScroll","watchedValue","nextTick","animation","isAnimationActive","isOpen","pages","previousPages","updatePage","inject","watch","showBackButton","hasPreviousPages","updateAnimation","emit","startAnimation","lastPage","isActivePageValid","page","goToPreviousPage","index","isDevelopmentEnviroment","registerPage","unregisterPage","onMounted","onUnmounted"],"mappings":"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"}