npm - @adyen/bento-vue3 - Versions diffs - 1.98.0 → 1.99.0 - Mend

@adyen/bento-vue3 1.98.0 → 1.99.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 (74) hide show

package/dist/chunks/{date-picker.DhtLcpyr.js → date-picker.ClFHuglH.js} RENAMED Viewed

@@ -1,13 +1,13 @@
 import { ref as p, computed as i, defineComponent as me, toRef as T, watch as w, withDirectives as fe, openBlock as u, createElementBlock as De, withKeys as O, createBlock as v, unref as t, createCommentVNode as k, createElementVNode as be, normalizeClass as ye, withCtx as _, createTextVNode as ge, toDisplayString as ke, createVNode as he, nextTick as Ie } from "vue";
-import { g as Fe, f as H, b as Se, h as Ce, i as Ne, p as Be } from "./calendar.D0RdoofE.js";
+import { g as Fe, f as H, b as Se, h as Ce, i as Ne, p as Be } from "./calendar.B0XfOj2I.js";
 import { h as Re } from "./button-actions.CgZbPzhi.js";
 import { d as Pe, B as Ee } from "./typography.B3J6_tYk.js";
-import { B as Me } from "./input-field.lSSH5S7P.js";
-import { D as Te, g as we } from "./dropdown.CGUBk0iO.js";
+import { D as Me, g as Te } from "./dropdown.DpqCHfi-.js";
+import { B as we } from "./input-field.Cox9LW4Z.js";
 import { g as h } from "./generate-uid.DBWe4g6T.js";
 import { u as Q } from "./index.B875RXHM.js";
 import { u as Oe } from "./form-field.D_2g7vaP.js";
-import { u as Y, a as Ve } from "./use-date-input-formatter.S-t29v8i.js";
+import { u as Y, a as Ve } from "./use-date-input-formatter.ovThcj9h.js";
 import { u as Ae } from "./use-form-layout-loading.CWbjZiwP.js";
 import { u as qe } from "./use-touch-device.DTqFAbXh.js";
 import { B as ze } from "./directive.D1-d-C2K.js";
@@ -146,7 +146,7 @@ const V = {
         return;
       const r = $(e) ? K(e) : null, X = M(r);
       !X && r ? (l.value = null, d(r)) : e && (l.value = X || "invalidDateFormat", d(null));
-    }, ve = we(G, 1e3), pe = (e) => {
+    }, ve = Te(G, 1e3), pe = (e) => {
       l.value = null, f.value = ae(e), o.value || P.value ? G(f.value) : ve(f.value);
     }, J = async (e) => {
       o.value || (e.preventDefault(), j(), await Ie(), c.value || (U(/* @__PURE__ */ new Date()), d(/* @__PURE__ */ new Date())), z.value = q.value?.$refs.calendarRef[0].focusOnDate(
@@ -170,7 +170,7 @@ const V = {
         required: e.required
       }, null, 8, ["id", "label", "tooltip-text", "optional", "required"])) : k("", !0),
       be("div", null, [
-        t(P) ? (u(), v(t(Me), {
+        t(P) ? (u(), v(t(we), {
           key: 0,
           ref_key: "inputContainerRef",
           ref: g,
@@ -186,7 +186,7 @@ const V = {
           min: ie.value,
           max: ne.value,
           "onUpdate:modelValue": oe
-        }, null, 8, ["type", "aria-labelledby", "aria-label", "aria-describedby", "aria-required", "disabled", "error", "model-value", "readonly", "min", "max"])) : (u(), v(t(Te), {
+        }, null, 8, ["type", "aria-labelledby", "aria-label", "aria-describedby", "aria-required", "disabled", "error", "model-value", "readonly", "min", "max"])) : (u(), v(t(Me), {
           key: 1,
           ref_key: "inputContainerRef",
           ref: g,
@@ -276,4 +276,4 @@ const V = {
 export {
   ia as B
 };
-//# sourceMappingURL=date-picker.DhtLcpyr.js.map
+//# sourceMappingURL=date-picker.ClFHuglH.js.map

package/dist/chunks/{date-picker.DhtLcpyr.js.map → date-picker.ClFHuglH.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-picker.DhtLcpyr.js","sources":["../../../vue2/src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../../vue2/src/components/date-picker/date-picker.vue"],"sourcesContent":["import { computed, ref } from 'vue';\nimport { useI18n } from '@/utils/ts/i18n';\nimport { type UseDateDisplayText } from './use-date-picker-single-calendar-text.types';\nimport { startOfMonth } from 'date-fns/startOfMonth';\nimport { getDateTimeFormatter } from '@/utils/ts/format-date/format-date';\nimport { useDateInputFormatter } from '@/composables/use-date-input-formatter/use-date-input-formatter';\nimport messages from '../messages.json';\n\ntype MessageSchema = (typeof messages)['en-US'];\n\n/*\n Composable that sets and formats the date to be displayed in the input box of a Single Date Picker\n * @param option.datePickerValue Ref to the datePickerValue set in the DatePicker component\n * @param option.dateError The i18n message key for the current error, or null if valid\n * @param option.isMonthVariant Indicates if the date picker has variant \"month\"\n /\nexport const useDatePickerSingleCalendarText: UseDateDisplayText<Date> = ({\n datePickerValue,\n dateError,\n isMonthVariant,\n placeholder,\n}) => {\n const { locale, t } = useI18n<{ message: MessageSchema }>({ messages });\n const { formatDate } = useDateInputFormatter();\n\n const textInputValue = ref(datePickerValue.value?.toDateString());\n\n const dateDisplayValue = computed(() => {\n // Display incorrect date when there's an error with the input\n if (dateError.value) {\n return textInputValue.value;\n }\n\n // Display \"Select a date\" when there's no date selected or input\n if (!datePickerValue.value) {\n return placeholder?.value \|\| (t('selectDate') as string);\n }\n\n // Display the date in format \"dd MMM, yyyy (25 Jun, 2023)\" or \"MMMM yyyy (June 2023)\"\n // if there's a valid date selected\n const dateFormatOptions: Intl.DateTimeFormatOptions = isMonthVariant?.value\n ? { month: 'long', year: 'numeric' }\n : { day: 'numeric', month: 'short', year: 'numeric' };\n\n return getDateTimeFormatter(locale.value, dateFormatOptions).format(datePickerValue.value);\n });\n\n /\n Formats the \"dateToFormat\" date value with the current format and sets it as \"formatTextInputDisplayValue\" value\n * @param dateToFormat - Date to be assigned and formatted\n /\n const formatTextInputDisplayValue = (dateToFormat: Date = datePickerValue.value) => {\n // If date is incorrect, leave the textInputValue intact\n if (dateError.value) {\n return;\n }\n\n if (!dateToFormat) {\n textInputValue.value = '';\n return;\n }\n\n const date = isMonthVariant?.value ? startOfMonth(dateToFormat) : dateToFormat;\n textInputValue.value = formatDate(date);\n };\n\n return {\n // Values\n dateDisplayValue,\n textInputValue,\n\n // Methods\n formatTextInputDisplayValue,\n };\n};\n","<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts -->\n<!-- eslint-disable vue/attribute-hyphenation -->\n<template>\n <div\n v-bento-click-outside-directive=\"closeDatePicker\"\n class=\"b-date-picker\"\n @keydown.space.capture=\"onSpaceBarOrEnter\"\n @keydown.enter.capture=\"onSpaceBarOrEnter\"\n >\n <!-- Label -->\n <field-label\n v-if=\"label\"\n :id=\"labelId\"\n :label=\"label\"\n :tooltip-text=\"tooltipText\"\n :optional=\"optional\"\n :required=\"required\"\n />\n\n <!-- Input -->\n <div>\n <bento-input-field\n v-if=\"isTouchDevice\"\n ref=\"inputContainerRef\"\n :type=\"isMonthVariant ? 'month' : 'date'\"\n :aria-labelledby=\"label ? labelId : $attrs?.['aria-labelledby']\"\n :aria-label=\"label \|\| $attrs?.['aria-labelledby'] ? null : popoverAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"required\"\n :disabled=\"disabled\"\n :error=\"!!errorMessage \|\| !!dateErrorText\"\n :model-value=\"nativeValue\"\n :readonly=\"isReadOnly\"\n :min=\"formattedMin\"\n :max=\"formattedMax\"\n @update:model-value=\"onNativeDateInput\"\n />\n <dropdown-input-default\n v-else\n ref=\"inputContainerRef\"\n always-combobox-is-input\n :ariaControls=\"datePickerContainerId\"\n :ariaExpanded=\"isDatePickerOpen\"\n :aria-labelledby=\"label ? labelId : $attrs?.['aria-labelledby']\"\n :aria-label=\"label ? null : popoverAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"required\"\n :disabled=\"disabled\"\n dynamic-filtering\n :is-invalid=\"!!errorMessage \|\| !!dateErrorText\"\n :open=\"isDatePickerOpen\"\n :value=\"textInputValue\"\n :display-value=\"dateDisplayValue\"\n :debounce-time=\"0\"\n :readonly=\"isReadOnly\"\n @input=\"onDateInputChange\"\n @open=\"openDatePicker\"\n @keydown=\"onDateKeyDown\"\n @clear=\"clearDatePickerValue\"\n @close=\"closeDatePicker\"\n />\n </div>\n\n <!-- Error Messages -->\n <error-message\n v-if=\"dateErrorText && !errorMessage\"\n :id=\"dateErrorId\"\n :error-message=\"dateErrorText\"\n class=\"b-date-picker__error-message\"\n />\n <error-message\n v-if=\"errorMessage\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-date-picker__error-message\"\n />\n\n <!-- Description -->\n <bento-typography\n v-if=\"description\"\n class=\"b-date-picker__description\"\n :class=\"descriptionConditionalClasses\"\n el=\"span\"\n >\n {{ description }}\n </bento-typography>\n\n <!-- Calendar container -->\n <bento-popover\n v-if=\"inputContainerRef && !isTouchDevice\"\n :id=\"datePickerContainerId\"\n class=\"b-date-picker__container\"\n role=\"dialog\"\n :open=\"isDatePickerOpen\"\n :target-element=\"inputContainerRef\"\n :aria-label=\"popoverAriaLabel\"\n :aria-modal=\"true\"\n position=\"bottom-start\"\n fit-content\n trap-all\n overflow-visible\n :trap-all-options=\"computedTrapAllOptions\"\n @keydown.esc.native=\"closeDatePicker\"\n >\n <calendar\n ref=\"calendarContainerRef\"\n :default-display-month=\"defaultDisplayMonth\"\n :first-day-of-week=\"resolvedFirstDayOfWeek\"\n :is-date-disabled=\"isDateDisabled\"\n :number-of-months=\"1\"\n :value=\"internalModelValue\"\n :min=\"min\"\n :max=\"max\"\n :variant=\"variant\"\n :year-range=\"yearRange\"\n @input=\"onDateSelected\"\n />\n </bento-popover>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref, toRef, watch } from 'vue';\n import { startOfMonth } from 'date-fns/startOfMonth';\n\n // Components\n import { BentoPopover } from '@/components/popover';\n import { BentoTypography } from '../typography';\n import { Calendar, type CalendarSingleDateValue, ErrorMessage, FieldLabel } from '@/internal';\n import { DropdownInputDefault } from '@/components/dropdown/components';\n import { BentoInputField } from '@/components/input-field';\n\n // Utils\n import { debounce } from '@/utils/ts/debounce';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\n import { dateToNativeDateString, dateToNativeMonthString, parseNativeDateString } from '@/utils/ts/format-date';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n // Composables\n import { useDatePickerSingleCalendarText } from './composables/use-date-picker-single-calendar-text';\n import { useDateInputFormatter, useFirstDayOfWeek, useFormLayoutFieldLoading, useTouchDevice } from '@/composables';\n\n // Directive\n import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives';\n\n // Types\n import { type BentoDatePickerEmits, type BentoDatePickerProps } from './date-picker.types';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n const DEBOUNCE_TIME = 1000;\n\n const props = withDefaults(defineProps<BentoDatePickerProps>(), {\n defaultDisplayMonth: null,\n description: undefined,\n disabled: false,\n errorMessage: null,\n firstDayOfWeek: undefined,\n isDateDisabled: undefined,\n label: undefined,\n max: null,\n min: null,\n modelValue: null,\n optional: false,\n placeholder: null,\n readonly: false,\n required: false,\n tooltipText: null,\n value: null,\n variant: undefined, // Default will be set by @/internal/calendar\n yearRange: undefined,\n });\n\n const emit = defineEmits<BentoDatePickerEmits>();\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const datePickerContainerId = generateUid('bento-date-picker-container');\n const labelId = generateUid('bento-date-picker-label');\n const descriptionId = generateUid('bento-date-picker-description');\n const errorId = generateUid('bento-date-picker-error');\n const dateErrorId = generateUid('bento-date-picker-date-error');\n const popoverAriaLabel = computed(() => props.label \|\| t('datePicker', { name: datePickerContainerId }));\n\n // Refs\n const calendarContainerRef = ref(null);\n const inputContainerRef = ref(null);\n\n // Values\n const dateError = ref<keyof MessageSchema \| null>(null);\n const isDatePickerOpen = ref(false);\n const initialFocusOnDatePickerOpen = ref(undefined);\n const internalModelValue = ref<CalendarSingleDateValue \| null>(props.modelValue); // to be removed when `props.value` is removed\n const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n const { emitValue } = useFormFieldEmits<CalendarSingleDateValue>(emit);\n const { resolvedFirstDayOfWeek } = useFirstDayOfWeek(toRef(props, 'firstDayOfWeek'));\n const { isFormatValid, parseDate, onKeyDown, autoFormat } = useDateInputFormatter();\n const { isTouchDevice } = useTouchDevice();\n\n const computedTrapAllOptions = computed(() => ({\n initialFocus: initialFocusOnDatePickerOpen.value,\n additionalContainers: [inputContainerRef.value.$el],\n }));\n\n watch(\n () => props.disabled,\n disabled => {\n // Close date picker popover if it's opened when it's disabled\n if (disabled && isDatePickerOpen.value) {\n isDatePickerOpen.value = false;\n }\n }\n );\n\n watch(\n [() => props.value, () => props.modelValue],\n ([newValue, newModelValue]) => {\n if (newValue) {\n deprecate(\n 'BentoDatePicker \"value\" property',\n `The use of \"value\" prop in \"BentoDatePicker\" is no longer supported. Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n\n internalModelValue.value = newModelValue ?? newValue;\n },\n { immediate: true }\n );\n\n const isMonthVariant = computed(() => props.variant === 'month');\n\n const { dateDisplayValue, textInputValue, formatTextInputDisplayValue } = useDatePickerSingleCalendarText({\n datePickerValue: internalModelValue,\n dateError,\n isMonthVariant,\n placeholder: toRef(props, 'placeholder'),\n });\n\n const formatNativeDate = (date: Date): string => {\n if (!date) {\n return '';\n }\n return isMonthVariant.value ? dateToNativeMonthString(date) : dateToNativeDateString(date);\n };\n\n const nativeValue = computed(() => formatNativeDate(internalModelValue.value));\n\n const onNativeDateInput = (value: string) => {\n if (!value) {\n dateError.value = null;\n emitValue(null);\n return;\n }\n\n const date = parseNativeDateString(value, isMonthVariant.value ? 'month' : 'date');\n dateError.value = getDateErrorReason(date);\n\n if (dateError.value) {\n // Emit null to match the non-touch validation behavior.\n // Note: on repeated invalid selections, the native input may still display\n // the selected date because Vue skips re-rendering when the model stays null.\n emitValue(null);\n return;\n }\n\n emitValue(date);\n };\n\n const formattedMin = computed(() => formatNativeDate(props.min));\n const formattedMax = computed(() => formatNativeDate(props.max));\n\n const getDateErrorReason = (date: Date \| null): keyof MessageSchema \| null => {\n if (!date \|\| isNaN(date.getTime())) {\n return 'invalidDateFormat';\n }\n\n // Check if date is between min/max bounds, if there are any (inclusive)\n if ((props.min && date < props.min) \|\| (props.max && date > props.max)) {\n return 'invalidDateFormat';\n }\n\n // Check if function is set, otherwise all dates are enabled\n if (props.isDateDisabled && props.isDateDisabled(date)) {\n return 'selectedDateIsNotAvailable';\n }\n\n return null;\n };\n\n const dateErrorText = computed(() => (dateError.value ? t(dateError.value) : null));\n\n watch(\n [isDatePickerOpen, textInputValue, () => props.isDateDisabled, () => props.min, () => props.max],\n ([isOpen, textValue]) => {\n // Re-validate the current input when the picker closes, validation props change or text input change\n if (!isOpen && textValue && isFormatValid(textValue)) {\n dateError.value = getDateErrorReason(parseDate(textValue));\n }\n }\n );\n\n const descriptionConditionalClasses = computed(() => ({\n 'b-date-picker__description--error': props.errorMessage \|\| dateErrorText.value,\n }));\n\n const ariaDescribedBy = computed(\n () =>\n `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''} ${\n dateErrorText.value ? dateErrorId : ''\n }`.trim() \|\| null\n );\n\n const closeDatePicker = () => {\n isDatePickerOpen.value = false;\n };\n\n const openDatePicker = () => {\n isDatePickerOpen.value = true;\n\n formatTextInputDisplayValue();\n };\n\n const onDateSelected = (selectedDate: Date) => {\n // Reset the error state when a valid date is selected\n dateError.value = null;\n\n closeDatePicker();\n emitValue(selectedDate);\n };\n\n const clearDatePickerValue = async () => {\n if (dateError.value) {\n dateError.value = null;\n textInputValue.value = null;\n }\n emitValue(null);\n };\n\n const onDateKeyDown = (event: KeyboardEvent) => {\n onKeyDown(event);\n };\n\n const validateDate = (stringDate: string) => {\n // Validate only if the date is complete\n if (stringDate.length < 10) {\n return;\n }\n\n const parsedDate = isFormatValid(stringDate) ? parseDate(stringDate) : null;\n const errorKey = getDateErrorReason(parsedDate);\n\n if (!errorKey && parsedDate) {\n dateError.value = null;\n emitValue(parsedDate);\n } else if (stringDate) {\n dateError.value = errorKey \|\| 'invalidDateFormat';\n emitValue(null);\n }\n };\n\n const validateDateDebounced = debounce(validateDate, DEBOUNCE_TIME);\n\n const onDateInputChange = (stringDate: string) => {\n dateError.value = null;\n textInputValue.value = autoFormat(stringDate);\n // If we are closing the date picker, we should validate (and emit date inputs) immediately so the user doesn't have to wait for the debounce time.\n // On touch devices with native input, we also want immediate feedback.\n if (isDatePickerOpen.value \|\| isTouchDevice.value) {\n validateDate(textInputValue.value);\n } else {\n validateDateDebounced(textInputValue.value);\n }\n };\n\n /\n Space bar and Enter keyDown event handler.\n \n * Opens the date picker dialog on the first keydown.\n * * Move focus to selected date, i.e., the date displayed in the date input text field. If no date has been selected, places focus on the current date.\n * @param {KeyboardEvent} event Event being triggered\n /\n const onSpaceBarOrEnter = async (event: KeyboardEvent) => {\n if (isDatePickerOpen.value) {\n return;\n }\n event.preventDefault();\n\n openDatePicker();\n\n // Wait for the date picker dialog to open\n await nextTick();\n\n // Set current date (today) if no date is selected\n if (!internalModelValue.value) {\n // Format the opened date picker date to YYYY-MM-DD\n formatTextInputDisplayValue(new Date());\n emitValue(new Date());\n }\n\n // Set initial focus\n initialFocusOnDatePickerOpen.value =\n calendarContainerRef.value?.$refs.calendarRef[0].focusOnDate(\n props.variant === 'month' ? startOfMonth(internalModelValue.value) : internalModelValue.value,\n true\n ) ?? undefined;\n };\n</script>\n\n<script lang=\"ts\">\n /\n Date picker selector.\n \n @example\n * import { BentoDatePicker } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoDatePicker },\n * template: `\n * <bento-date-picker\n * label=\"Label\"\n * description=\"Supporting text\"\n * required\n * optional\n * disabled\n * @input=\"onDateChanged\"\n * v-model=\"selectedDate\"\n * />\n * `,\n * setup() {\n * const selectedDate = ref(new Date()); // reactive({ startDate: new Date(), endDate: new Date() })\n * return {\n * selectedDate,\n * }\n * }\n * }\n */\n export default {\n i18n: { messages },\n name: 'bento-date-picker',\n model: { prop: 'modelValue' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-picker.scss\" />\n"],"names":["useDatePickerSingleCalendarText","datePickerValue","dateError","isMonthVariant","placeholder","locale","t","useI18n","messages","formatDate","useDateInputFormatter","textInputValue","ref","computed","dateFormatOptions","getDateTimeFormatter","dateToFormat","date","startOfMonth","__default__","props","__props","emit","__emit","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","calendarContainerRef","inputContainerRef","isDatePickerOpen","initialFocusOnDatePickerOpen","internalModelValue","isReadOnly","useFormLayoutFieldLoading","toRef","emitValue","useFormFieldEmits","resolvedFirstDayOfWeek","useFirstDayOfWeek","isFormatValid","parseDate","onKeyDown","autoFormat","isTouchDevice","useTouchDevice","computedTrapAllOptions","watch","disabled","newValue","newModelValue","deprecate","dateDisplayValue","formatTextInputDisplayValue","formatNativeDate","dateToNativeMonthString","dateToNativeDateString","nativeValue","onNativeDateInput","value","parseNativeDateString","getDateErrorReason","formattedMin","formattedMax","dateErrorText","isOpen","textValue","descriptionConditionalClasses","ariaDescribedBy","closeDatePicker","openDatePicker","onDateSelected","selectedDate","clearDatePickerValue","onDateKeyDown","event","validateDate","stringDate","parsedDate","errorKey","validateDateDebounced","debounce","onDateInputChange","onSpaceBarOrEnter","nextTick"],"mappings":"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"}
1	+ {"version":3,"file":"date-picker.ClFHuglH.js","sources":["../../../vue2/src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../../vue2/src/components/date-picker/date-picker.vue"],"sourcesContent":["import { computed, ref } from 'vue';\nimport { useI18n } from '@/utils/ts/i18n';\nimport { type UseDateDisplayText } from './use-date-picker-single-calendar-text.types';\nimport { startOfMonth } from 'date-fns/startOfMonth';\nimport { getDateTimeFormatter } from '@/utils/ts/format-date/format-date';\nimport { useDateInputFormatter } from '@/composables/use-date-input-formatter/use-date-input-formatter';\nimport messages from '../messages.json';\n\ntype MessageSchema = (typeof messages)['en-US'];\n\n/*\n Composable that sets and formats the date to be displayed in the input box of a Single Date Picker\n * @param option.datePickerValue Ref to the datePickerValue set in the DatePicker component\n * @param option.dateError The i18n message key for the current error, or null if valid\n * @param option.isMonthVariant Indicates if the date picker has variant \"month\"\n /\nexport const useDatePickerSingleCalendarText: UseDateDisplayText<Date> = ({\n datePickerValue,\n dateError,\n isMonthVariant,\n placeholder,\n}) => {\n const { locale, t } = useI18n<{ message: MessageSchema }>({ messages });\n const { formatDate } = useDateInputFormatter();\n\n const textInputValue = ref(datePickerValue.value?.toDateString());\n\n const dateDisplayValue = computed(() => {\n // Display incorrect date when there's an error with the input\n if (dateError.value) {\n return textInputValue.value;\n }\n\n // Display \"Select a date\" when there's no date selected or input\n if (!datePickerValue.value) {\n return placeholder?.value \|\| (t('selectDate') as string);\n }\n\n // Display the date in format \"dd MMM, yyyy (25 Jun, 2023)\" or \"MMMM yyyy (June 2023)\"\n // if there's a valid date selected\n const dateFormatOptions: Intl.DateTimeFormatOptions = isMonthVariant?.value\n ? { month: 'long', year: 'numeric' }\n : { day: 'numeric', month: 'short', year: 'numeric' };\n\n return getDateTimeFormatter(locale.value, dateFormatOptions).format(datePickerValue.value);\n });\n\n /\n Formats the \"dateToFormat\" date value with the current format and sets it as \"formatTextInputDisplayValue\" value\n * @param dateToFormat - Date to be assigned and formatted\n /\n const formatTextInputDisplayValue = (dateToFormat: Date = datePickerValue.value) => {\n // If date is incorrect, leave the textInputValue intact\n if (dateError.value) {\n return;\n }\n\n if (!dateToFormat) {\n textInputValue.value = '';\n return;\n }\n\n const date = isMonthVariant?.value ? startOfMonth(dateToFormat) : dateToFormat;\n textInputValue.value = formatDate(date);\n };\n\n return {\n // Values\n dateDisplayValue,\n textInputValue,\n\n // Methods\n formatTextInputDisplayValue,\n };\n};\n","<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts -->\n<!-- eslint-disable vue/attribute-hyphenation -->\n<template>\n <div\n v-bento-click-outside-directive=\"closeDatePicker\"\n class=\"b-date-picker\"\n @keydown.space.capture=\"onSpaceBarOrEnter\"\n @keydown.enter.capture=\"onSpaceBarOrEnter\"\n >\n <!-- Label -->\n <field-label\n v-if=\"label\"\n :id=\"labelId\"\n :label=\"label\"\n :tooltip-text=\"tooltipText\"\n :optional=\"optional\"\n :required=\"required\"\n />\n\n <!-- Input -->\n <div>\n <bento-input-field\n v-if=\"isTouchDevice\"\n ref=\"inputContainerRef\"\n :type=\"isMonthVariant ? 'month' : 'date'\"\n :aria-labelledby=\"label ? labelId : $attrs?.['aria-labelledby']\"\n :aria-label=\"label \|\| $attrs?.['aria-labelledby'] ? null : popoverAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"required\"\n :disabled=\"disabled\"\n :error=\"!!errorMessage \|\| !!dateErrorText\"\n :model-value=\"nativeValue\"\n :readonly=\"isReadOnly\"\n :min=\"formattedMin\"\n :max=\"formattedMax\"\n @update:model-value=\"onNativeDateInput\"\n />\n <dropdown-input-default\n v-else\n ref=\"inputContainerRef\"\n always-combobox-is-input\n :ariaControls=\"datePickerContainerId\"\n :ariaExpanded=\"isDatePickerOpen\"\n :aria-labelledby=\"label ? labelId : $attrs?.['aria-labelledby']\"\n :aria-label=\"label ? null : popoverAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-required=\"required\"\n :disabled=\"disabled\"\n dynamic-filtering\n :is-invalid=\"!!errorMessage \|\| !!dateErrorText\"\n :open=\"isDatePickerOpen\"\n :value=\"textInputValue\"\n :display-value=\"dateDisplayValue\"\n :debounce-time=\"0\"\n :readonly=\"isReadOnly\"\n @input=\"onDateInputChange\"\n @open=\"openDatePicker\"\n @keydown=\"onDateKeyDown\"\n @clear=\"clearDatePickerValue\"\n @close=\"closeDatePicker\"\n />\n </div>\n\n <!-- Error Messages -->\n <error-message\n v-if=\"dateErrorText && !errorMessage\"\n :id=\"dateErrorId\"\n :error-message=\"dateErrorText\"\n class=\"b-date-picker__error-message\"\n />\n <error-message\n v-if=\"errorMessage\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-date-picker__error-message\"\n />\n\n <!-- Description -->\n <bento-typography\n v-if=\"description\"\n class=\"b-date-picker__description\"\n :class=\"descriptionConditionalClasses\"\n el=\"span\"\n >\n {{ description }}\n </bento-typography>\n\n <!-- Calendar container -->\n <bento-popover\n v-if=\"inputContainerRef && !isTouchDevice\"\n :id=\"datePickerContainerId\"\n class=\"b-date-picker__container\"\n role=\"dialog\"\n :open=\"isDatePickerOpen\"\n :target-element=\"inputContainerRef\"\n :aria-label=\"popoverAriaLabel\"\n :aria-modal=\"true\"\n position=\"bottom-start\"\n fit-content\n trap-all\n overflow-visible\n :trap-all-options=\"computedTrapAllOptions\"\n @keydown.esc.native=\"closeDatePicker\"\n >\n <calendar\n ref=\"calendarContainerRef\"\n :default-display-month=\"defaultDisplayMonth\"\n :first-day-of-week=\"resolvedFirstDayOfWeek\"\n :is-date-disabled=\"isDateDisabled\"\n :number-of-months=\"1\"\n :value=\"internalModelValue\"\n :min=\"min\"\n :max=\"max\"\n :variant=\"variant\"\n :year-range=\"yearRange\"\n @input=\"onDateSelected\"\n />\n </bento-popover>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref, toRef, watch } from 'vue';\n import { startOfMonth } from 'date-fns/startOfMonth';\n\n // Components\n import { BentoPopover } from '@/components/popover';\n import { BentoTypography } from '../typography';\n import { Calendar, type CalendarSingleDateValue, ErrorMessage, FieldLabel } from '@/internal';\n import { DropdownInputDefault } from '@/components/dropdown/components';\n import { BentoInputField } from '@/components/input-field';\n\n // Utils\n import { debounce } from '@/utils/ts/debounce';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\n import { dateToNativeDateString, dateToNativeMonthString, parseNativeDateString } from '@/utils/ts/format-date';\n import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n import { deprecate } from '@/utils/ts/deprecate';\n\n // Composables\n import { useDatePickerSingleCalendarText } from './composables/use-date-picker-single-calendar-text';\n import { useDateInputFormatter, useFirstDayOfWeek, useFormLayoutFieldLoading, useTouchDevice } from '@/composables';\n\n // Directive\n import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives';\n\n // Types\n import { type BentoDatePickerEmits, type BentoDatePickerProps } from './date-picker.types';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n const DEBOUNCE_TIME = 1000;\n\n const props = withDefaults(defineProps<BentoDatePickerProps>(), {\n defaultDisplayMonth: null,\n description: undefined,\n disabled: false,\n errorMessage: null,\n firstDayOfWeek: undefined,\n isDateDisabled: undefined,\n label: undefined,\n max: null,\n min: null,\n modelValue: null,\n optional: false,\n placeholder: null,\n readonly: false,\n required: false,\n tooltipText: null,\n value: null,\n variant: undefined, // Default will be set by @/internal/calendar\n yearRange: undefined,\n });\n\n const emit = defineEmits<BentoDatePickerEmits>();\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const datePickerContainerId = generateUid('bento-date-picker-container');\n const labelId = generateUid('bento-date-picker-label');\n const descriptionId = generateUid('bento-date-picker-description');\n const errorId = generateUid('bento-date-picker-error');\n const dateErrorId = generateUid('bento-date-picker-date-error');\n const popoverAriaLabel = computed(() => props.label \|\| t('datePicker', { name: datePickerContainerId }));\n\n // Refs\n const calendarContainerRef = ref(null);\n const inputContainerRef = ref(null);\n\n // Values\n const dateError = ref<keyof MessageSchema \| null>(null);\n const isDatePickerOpen = ref(false);\n const initialFocusOnDatePickerOpen = ref(undefined);\n const internalModelValue = ref<CalendarSingleDateValue \| null>(props.modelValue); // to be removed when `props.value` is removed\n const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n const { emitValue } = useFormFieldEmits<CalendarSingleDateValue>(emit);\n const { resolvedFirstDayOfWeek } = useFirstDayOfWeek(toRef(props, 'firstDayOfWeek'));\n const { isFormatValid, parseDate, onKeyDown, autoFormat } = useDateInputFormatter();\n const { isTouchDevice } = useTouchDevice();\n\n const computedTrapAllOptions = computed(() => ({\n initialFocus: initialFocusOnDatePickerOpen.value,\n additionalContainers: [inputContainerRef.value.$el],\n }));\n\n watch(\n () => props.disabled,\n disabled => {\n // Close date picker popover if it's opened when it's disabled\n if (disabled && isDatePickerOpen.value) {\n isDatePickerOpen.value = false;\n }\n }\n );\n\n watch(\n [() => props.value, () => props.modelValue],\n ([newValue, newModelValue]) => {\n if (newValue) {\n deprecate(\n 'BentoDatePicker \"value\" property',\n `The use of \"value\" prop in \"BentoDatePicker\" is no longer supported. Use the \"v-model\" or \"model-value\" property instead.`,\n '2.0.0'\n );\n }\n\n internalModelValue.value = newModelValue ?? newValue;\n },\n { immediate: true }\n );\n\n const isMonthVariant = computed(() => props.variant === 'month');\n\n const { dateDisplayValue, textInputValue, formatTextInputDisplayValue } = useDatePickerSingleCalendarText({\n datePickerValue: internalModelValue,\n dateError,\n isMonthVariant,\n placeholder: toRef(props, 'placeholder'),\n });\n\n const formatNativeDate = (date: Date): string => {\n if (!date) {\n return '';\n }\n return isMonthVariant.value ? dateToNativeMonthString(date) : dateToNativeDateString(date);\n };\n\n const nativeValue = computed(() => formatNativeDate(internalModelValue.value));\n\n const onNativeDateInput = (value: string) => {\n if (!value) {\n dateError.value = null;\n emitValue(null);\n return;\n }\n\n const date = parseNativeDateString(value, isMonthVariant.value ? 'month' : 'date');\n dateError.value = getDateErrorReason(date);\n\n if (dateError.value) {\n // Emit null to match the non-touch validation behavior.\n // Note: on repeated invalid selections, the native input may still display\n // the selected date because Vue skips re-rendering when the model stays null.\n emitValue(null);\n return;\n }\n\n emitValue(date);\n };\n\n const formattedMin = computed(() => formatNativeDate(props.min));\n const formattedMax = computed(() => formatNativeDate(props.max));\n\n const getDateErrorReason = (date: Date \| null): keyof MessageSchema \| null => {\n if (!date \|\| isNaN(date.getTime())) {\n return 'invalidDateFormat';\n }\n\n // Check if date is between min/max bounds, if there are any (inclusive)\n if ((props.min && date < props.min) \|\| (props.max && date > props.max)) {\n return 'invalidDateFormat';\n }\n\n // Check if function is set, otherwise all dates are enabled\n if (props.isDateDisabled && props.isDateDisabled(date)) {\n return 'selectedDateIsNotAvailable';\n }\n\n return null;\n };\n\n const dateErrorText = computed(() => (dateError.value ? t(dateError.value) : null));\n\n watch(\n [isDatePickerOpen, textInputValue, () => props.isDateDisabled, () => props.min, () => props.max],\n ([isOpen, textValue]) => {\n // Re-validate the current input when the picker closes, validation props change or text input change\n if (!isOpen && textValue && isFormatValid(textValue)) {\n dateError.value = getDateErrorReason(parseDate(textValue));\n }\n }\n );\n\n const descriptionConditionalClasses = computed(() => ({\n 'b-date-picker__description--error': props.errorMessage \|\| dateErrorText.value,\n }));\n\n const ariaDescribedBy = computed(\n () =>\n `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''} ${\n dateErrorText.value ? dateErrorId : ''\n }`.trim() \|\| null\n );\n\n const closeDatePicker = () => {\n isDatePickerOpen.value = false;\n };\n\n const openDatePicker = () => {\n isDatePickerOpen.value = true;\n\n formatTextInputDisplayValue();\n };\n\n const onDateSelected = (selectedDate: Date) => {\n // Reset the error state when a valid date is selected\n dateError.value = null;\n\n closeDatePicker();\n emitValue(selectedDate);\n };\n\n const clearDatePickerValue = async () => {\n if (dateError.value) {\n dateError.value = null;\n textInputValue.value = null;\n }\n emitValue(null);\n };\n\n const onDateKeyDown = (event: KeyboardEvent) => {\n onKeyDown(event);\n };\n\n const validateDate = (stringDate: string) => {\n // Validate only if the date is complete\n if (stringDate.length < 10) {\n return;\n }\n\n const parsedDate = isFormatValid(stringDate) ? parseDate(stringDate) : null;\n const errorKey = getDateErrorReason(parsedDate);\n\n if (!errorKey && parsedDate) {\n dateError.value = null;\n emitValue(parsedDate);\n } else if (stringDate) {\n dateError.value = errorKey \|\| 'invalidDateFormat';\n emitValue(null);\n }\n };\n\n const validateDateDebounced = debounce(validateDate, DEBOUNCE_TIME);\n\n const onDateInputChange = (stringDate: string) => {\n dateError.value = null;\n textInputValue.value = autoFormat(stringDate);\n // If we are closing the date picker, we should validate (and emit date inputs) immediately so the user doesn't have to wait for the debounce time.\n // On touch devices with native input, we also want immediate feedback.\n if (isDatePickerOpen.value \|\| isTouchDevice.value) {\n validateDate(textInputValue.value);\n } else {\n validateDateDebounced(textInputValue.value);\n }\n };\n\n /\n Space bar and Enter keyDown event handler.\n \n * Opens the date picker dialog on the first keydown.\n * * Move focus to selected date, i.e., the date displayed in the date input text field. If no date has been selected, places focus on the current date.\n * @param {KeyboardEvent} event Event being triggered\n /\n const onSpaceBarOrEnter = async (event: KeyboardEvent) => {\n if (isDatePickerOpen.value) {\n return;\n }\n event.preventDefault();\n\n openDatePicker();\n\n // Wait for the date picker dialog to open\n await nextTick();\n\n // Set current date (today) if no date is selected\n if (!internalModelValue.value) {\n // Format the opened date picker date to YYYY-MM-DD\n formatTextInputDisplayValue(new Date());\n emitValue(new Date());\n }\n\n // Set initial focus\n initialFocusOnDatePickerOpen.value =\n calendarContainerRef.value?.$refs.calendarRef[0].focusOnDate(\n props.variant === 'month' ? startOfMonth(internalModelValue.value) : internalModelValue.value,\n true\n ) ?? undefined;\n };\n</script>\n\n<script lang=\"ts\">\n /\n Date picker selector.\n \n @example\n * import { BentoDatePicker } from '@adyen/bento-vue2';\n \n export default {\n * components: { BentoDatePicker },\n * template: `\n * <bento-date-picker\n * label=\"Label\"\n * description=\"Supporting text\"\n * required\n * optional\n * disabled\n * @input=\"onDateChanged\"\n * v-model=\"selectedDate\"\n * />\n * `,\n * setup() {\n * const selectedDate = ref(new Date()); // reactive({ startDate: new Date(), endDate: new Date() })\n * return {\n * selectedDate,\n * }\n * }\n * }\n */\n export default {\n i18n: { messages },\n name: 'bento-date-picker',\n model: { prop: 'modelValue' },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-picker.scss\" />\n"],"names":["useDatePickerSingleCalendarText","datePickerValue","dateError","isMonthVariant","placeholder","locale","t","useI18n","messages","formatDate","useDateInputFormatter","textInputValue","ref","computed","dateFormatOptions","getDateTimeFormatter","dateToFormat","date","startOfMonth","__default__","props","__props","emit","__emit","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","calendarContainerRef","inputContainerRef","isDatePickerOpen","initialFocusOnDatePickerOpen","internalModelValue","isReadOnly","useFormLayoutFieldLoading","toRef","emitValue","useFormFieldEmits","resolvedFirstDayOfWeek","useFirstDayOfWeek","isFormatValid","parseDate","onKeyDown","autoFormat","isTouchDevice","useTouchDevice","computedTrapAllOptions","watch","disabled","newValue","newModelValue","deprecate","dateDisplayValue","formatTextInputDisplayValue","formatNativeDate","dateToNativeMonthString","dateToNativeDateString","nativeValue","onNativeDateInput","value","parseNativeDateString","getDateErrorReason","formattedMin","formattedMax","dateErrorText","isOpen","textValue","descriptionConditionalClasses","ariaDescribedBy","closeDatePicker","openDatePicker","onDateSelected","selectedDate","clearDatePickerValue","onDateKeyDown","event","validateDate","stringDate","parsedDate","errorKey","validateDateDebounced","debounce","onDateInputChange","onSpaceBarOrEnter","nextTick"],"mappings":"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"}

package/dist/chunks/{date-range-picker.CChROXhw.js → date-range-picker.D3iAZN20.js} RENAMED Viewed

@@ -3,15 +3,15 @@ import { b as _a } from "./index.DtuWfdhd.js";
 import { B as La } from "./divider.BIY84UH7.js";
 import { h as Ua, B as Qa } from "./button-actions.CgZbPzhi.js";
 import { B as Oe, d as He } from "./typography.B3J6_tYk.js";
+import { B as ja, g as Ke, D as Wa } from "./dropdown.DpqCHfi-.js";
 import { g as oe } from "./generate-uid.DBWe4g6T.js";
 import { u as xe } from "./index.B875RXHM.js";
-import { j as le, k as B, s as F, l as ja, m as Ke, n as Wa, f as Xe, o as Ga, q as $a, r as Ja, t as Ze, u as Ha, b as C, v as Ka, h as Xa, i as Za, e as N, w as ea, x as aa, g as et } from "./calendar.D0RdoofE.js";
-import { u as Ne, a as at } from "./use-date-input-formatter.S-t29v8i.js";
-import { t as Re, n as tt, c as nt } from "./en-US.BR6y7foR.js";
-import { u as rt } from "./use-form-layout-loading.CWbjZiwP.js";
-import { B as st } from "./directive.D1-d-C2K.js";
-import { u as ot } from "./form-field.D_2g7vaP.js";
-import { B as lt, g as ta, D as it } from "./dropdown.CGUBk0iO.js";
+import { j as le, k as B, s as F, l as Ga, m as Xe, n as $a, f as Ze, o as Ja, q as Ha, r as Ka, t as ea, u as Xa, b as C, v as Za, h as et, i as at, e as N, w as aa, x as ta, g as tt } from "./calendar.B0XfOj2I.js";
+import { u as Ne, a as nt } from "./use-date-input-formatter.ovThcj9h.js";
+import { t as Re, n as rt, c as st } from "./en-US.BR6y7foR.js";
+import { u as ot } from "./use-form-layout-loading.CWbjZiwP.js";
+import { B as lt } from "./directive.D1-d-C2K.js";
+import { u as it } from "./form-field.D_2g7vaP.js";
 import { B as ut } from "./alert.V1imvtyI.js";
 import { B as dt } from "./segmented-control.CDV9IQDC.js";
 import { u as ct } from "./use-has-slot.CyMiImRQ.js";
@@ -20,8 +20,8 @@ import { e as U, a as na } from "./differenceInMonths.yz4Dfe-b.js";
 import { s as ra } from "./startOfWeek.muMEhS7U.js";
 import { c as Dt } from "./constructNow.DyOJDyZZ.js";
 import { a as ge, s as sa } from "./set-time-in-date.9-8WOiMT.js";
-import { B as vt, i as oa } from "./input-time.nwnBuzgX.js";
-import { B as pt } from "./input-field.lSSH5S7P.js";
+import { B as vt, i as oa } from "./input-time.bHFZRv6T.js";
+import { B as pt } from "./input-field.Cox9LW4Z.js";
 import { B as ft } from "./form-layout-group.08QuvVmC.js";
 import { _ as va } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { F as gt } from "./field-label.yQ_2Qg88.js";
@@ -35,7 +35,7 @@ function Ee(s, v) {
   return +Re(s) == +Re(v);
 }
 function Mt(s, v, h) {
-  const [i, d] = tt(
+  const [i, d] = rt(
     h?.in,
     s,
     v
@@ -51,7 +51,7 @@ function Fe(s, v) {
 }
 function ht(s, v) {
   return B(
-    nt(s, s),
+    st(s, s),
     Dt(s)
   );
 }
@@ -109,27 +109,27 @@ const Tt = {
       a = F(d.earliest);
     else if (a) {
       const f = ra(a, { weekStartsOn: s });
-      B(a, f) || (a = F(ja(Ke(a, { weekStartsOn: s }), 1)));
+      B(a, f) || (a = F(Ga(Xe(a, { weekStartsOn: s }), 1)));
     }
     if (d.latest)
       o = U(d.latest);
     else if (o) {
-      const f = Ke(o, { weekStartsOn: s });
-      B(o, f) || (o = U(Wa(ra(o, { weekStartsOn: s }), 1)));
+      const f = Xe(o, { weekStartsOn: s });
+      B(o, f) || (o = U($a(ra(o, { weekStartsOn: s }), 1)));
     }
   }
   if (d?.type === "monthly") {
     if (d.earliest)
       a = F(d.earliest);
     else if (a) {
-      const f = Xe(a);
-      B(a, f) || (a = Xe(Ga(a, 1)));
+      const f = Ze(a);
+      B(a, f) || (a = Ze(Ja(a, 1)));
     }
     if (d.latest)
       o = U(d.latest);
     else if (o) {
       const f = na(o);
-      B(o, f) || (o = na($a(o, 1)));
+      B(o, f) || (o = na(Ha(o, 1)));
     }
   }
   if (d?.type === "quarterly") {
@@ -137,13 +137,13 @@ const Tt = {
       a = le(d.earliest);
     else if (a) {
       const f = le(a);
-      B(a, f) || (a = le(Ja(a, 1)));
+      B(a, f) || (a = le(Ka(a, 1)));
     }
     if (d.latest)
       o = U(d.latest);
     else if (o) {
-      const f = Ze(o);
-      B(o, f) || (o = Ze(Ha(o, 1)));
+      const f = ea(o);
+      B(o, f) || (o = ea(Xa(o, 1)));
     }
   }
   return { min: a, max: o };
@@ -330,7 +330,7 @@ const pa = {
       adjustEndDateInputForMonthly: de,
       adjustStartDateInputForQuarterly: $,
       adjustEndDateInputForQuarterly: Z
-    } = Ka(a.firstDayOfWeek), { savedRanges: J, saveRange: Ie, resetSavedRanges: ce } = bt(), w = (e) => e ? re(e) : "", y = z(null), M = z(null), me = m(() => y.value ? T(y.value) : null), De = m(() => M.value ? T(M.value) : null), ve = m(
+    } = Za(a.firstDayOfWeek), { savedRanges: J, saveRange: Ie, resetSavedRanges: ce } = bt(), w = (e) => e ? re(e) : "", y = z(null), M = z(null), me = m(() => y.value ? T(y.value) : null), De = m(() => M.value ? T(M.value) : null), ve = m(
       () => y.value === "invalidDateFormat" ? null : me.value
     ), l = m(() => M.value === "invalidDateFormat" ? null : De.value), A = (e, n, c, p) => {
       if (!e || !Y(e))
@@ -359,7 +359,7 @@ const pa = {
         return !0;
       };
       return oa(e) && c();
-    }, ee = m(() => a.variant === "month"), Ce = (e) => e ? ee.value ? Xa(e) : Za(e) : "", fa = m(() => Ce(t.startDate)), ga = m(() => Ce(t.endDate)), ze = m(() => S.value ? ee.value ? "month" : "date" : "text"), ya = m(() => S.value ? fa.value : r.startDate), Ma = m(() => S.value ? ga.value : r.endDate), V = (e, n) => !n || !oa(n) || a.variant === "month" ? e : sa(new Date(e), n), ha = (e) => {
+    }, ee = m(() => a.variant === "month"), Ce = (e) => e ? ee.value ? et(e) : at(e) : "", fa = m(() => Ce(t.startDate)), ga = m(() => Ce(t.endDate)), ze = m(() => S.value ? ee.value ? "month" : "date" : "text"), ya = m(() => S.value ? fa.value : r.startDate), Ma = m(() => S.value ? ga.value : r.endDate), V = (e, n) => !n || !oa(n) || a.variant === "month" ? e : sa(new Date(e), n), ha = (e) => {
       r.startTime = N(
         a.min && a.allowTimeInput && B(a.min, e.startDate) ? a.min : F(e.startDate)
       ), r.endTime = N(
@@ -435,10 +435,10 @@ const pa = {
         });
       } else
         y.value = A(e), o(D.ERROR, { ...r });
-    }, ba = ta(_e, 300), Ya = (e) => {
+    }, ba = Ke(_e, 300), Ya = (e) => {
       if (r.startDate = S.value && ee.value ? e : G(e), S.value)
         if (ee.value && e) {
-          const n = ea(e);
+          const n = aa(e);
           t.startDate = V(n, r.startTime), t.range = null, o(D.INPUT, {
             ...t,
             range: q.value
@@ -499,10 +499,10 @@ const pa = {
         });
       } else
         M.value = A(e), o(D.ERROR, { ...r });
-    }, ka = ta(Le, 300), Aa = (e) => {
+    }, ka = Ke(Le, 300), Aa = (e) => {
       if (r.endDate = S.value && ee.value ? e : G(e), S.value)
         if (ee.value && e) {
-          const n = ea(e);
+          const n = aa(e);
           t.endDate = V(n, r.endTime), t.range = null, o(D.INPUT, {
             ...t,
             range: q.value
@@ -645,7 +645,7 @@ const pa = {
       }, [
         te("div", kt, [
           u(W)("title") ? $e(e.$slots, "title", { key: 0 }, void 0, !0) : x("", !0),
-          s.quickSelectRanges ? (P(), _(lt, {
+          s.quickSelectRanges ? (P(), _(ja, {
             key: 1,
             "aria-label": u(T)("customRange"),
             items: ie.value,
@@ -806,10 +806,10 @@ const pa = {
           return b.label;
       }
       if (s.value.granularity === "quarterly") {
-        const { startDate: b, endDate: Q } = s.value, G = f("quarter", { quarter: aa(b), year: ia(b) });
+        const { startDate: b, endDate: Q } = s.value, G = f("quarter", { quarter: ta(b), year: ia(b) });
         if (Mt(b, Q))
           return G;
-        const re = f("quarter", { quarter: aa(Q), year: ia(Q) });
+        const re = f("quarter", { quarter: ta(Q), year: ia(Q) });
         return `${G} - ${re}`;
       }
       if (!T(s.value.startDate) || !T(s.value.endDate))
@@ -821,7 +821,7 @@ const pa = {
         minute: "numeric",
         second: "numeric",
         hour12: !1
-      }), et(o.value, Y).formatRange(
+      }), tt(o.value, Y).formatRange(
         s.value.startDate,
         s.value.endDate
       );
@@ -864,7 +864,7 @@ const pa = {
   },
   emits: ["update:model-value", "input"],
   setup(s, { emit: v }) {
-    const h = v, i = s, d = Va(), { t: a } = xe({ messages: Be }), { dateToInputDateString: o } = Ne(), f = oe("bento-date-range-picker-container"), W = oe("bento-date-range-picker-label"), T = oe("bento-date-range-picker-description"), I = oe("bento-date-range-picker-error"), S = oe("bento-date-range-picker-date-error"), ne = m(() => i.label || a("dateRangePicker", { name: f })), { resolvedFirstDayOfWeek: Y } = at(we(i, "firstDayOfWeek")), b = _a({
+    const h = v, i = s, d = Va(), { t: a } = xe({ messages: Be }), { dateToInputDateString: o } = Ne(), f = oe("bento-date-range-picker-container"), W = oe("bento-date-range-picker-label"), T = oe("bento-date-range-picker-description"), I = oe("bento-date-range-picker-error"), S = oe("bento-date-range-picker-date-error"), ne = m(() => i.label || a("dateRangePicker", { name: f })), { resolvedFirstDayOfWeek: Y } = nt(we(i, "firstDayOfWeek")), b = _a({
       none: 0,
       one: 710,
       // width of date range picker with one panes
@@ -893,7 +893,7 @@ const pa = {
           timeDifference: A
         }
       };
-    })), re = m(() => i.label ? W : d?.["aria-labelledby"] ?? null), k = z(!1), X = z(null), O = z(!1), { isReadOnly: t } = rt(we(i, "readonly")), { emitValue: q } = ot(h);
+    })), re = m(() => i.label ? W : d?.["aria-labelledby"] ?? null), k = z(!1), X = z(null), O = z(!1), { isReadOnly: t } = ot(we(i, "readonly")), { emitValue: q } = it(h);
     he(
       () => i.disabled,
       () => {
@@ -987,7 +987,7 @@ const pa = {
       te("div", {
         onKeydown: Je(M, ["enter"])
       }, [
-        L(u(it), {
+        L(u(Wa), {
           ref_key: "inputContainerRef",
           ref: X,
           "always-combobox-is-input": "",
@@ -1082,7 +1082,7 @@ const pa = {
         _: 1
       }, 8, ["id", "open", "target-element", "aria-label"])) : x("", !0)
     ])), [
-      [u(st), H]
+      [u(lt), H]
     ]);
   }
 }), Dn = /* @__PURE__ */ va(xt, [["__scopeId", "data-v-e9cefb1f"]]);
@@ -1092,4 +1092,4 @@ export {
   ht as a,
   Ee as i
 };
-//# sourceMappingURL=date-range-picker.CChROXhw.js.map
+//# sourceMappingURL=date-range-picker.D3iAZN20.js.map