@adyen/bento-vue3 1.78.0 → 1.78.2

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
  1. package/dist/assets/accordion-item.css +1 -1
  2. package/dist/assets/action-bar.css +1 -1
  3. package/dist/assets/base-modal.css +1 -1
  4. package/dist/assets/button-actions.css +1 -1
  5. package/dist/assets/card.css +1 -1
  6. package/dist/assets/data-grid.css +1 -1
  7. package/dist/assets/dialog-page.css +1 -1
  8. package/dist/assets/file-uploader.css +1 -1
  9. package/dist/assets/inspector.css +1 -1
  10. package/dist/assets/modal-fullscreen.css +1 -1
  11. package/dist/assets/sidepanel.css +1 -1
  12. package/dist/chunks/{code-snippet.D1iNH2rn.js → code-snippet.B5NUDrZ-.js} +2 -2
  13. package/dist/chunks/{code-snippet.D1iNH2rn.js.map → code-snippet.B5NUDrZ-.js.map} +1 -1
  14. package/dist/chunks/{data-grid.D70AFJkA.js → data-grid.jC1eKDzq.js} +5 -5
  15. package/dist/chunks/{data-grid.D70AFJkA.js.map → data-grid.jC1eKDzq.js.map} +1 -1
  16. package/dist/chunks/{date-picker.De5ox4c1.js → date-picker.x9GeC_UO.js} +15 -15
  17. package/dist/chunks/{date-picker.De5ox4c1.js.map → date-picker.x9GeC_UO.js.map} +1 -1
  18. package/dist/chunks/{date-range-picker.qXIfFq69.js → date-range-picker.CXeFdxAA.js} +20 -20
  19. package/dist/chunks/{date-range-picker.qXIfFq69.js.map → date-range-picker.CXeFdxAA.js.map} +1 -1
  20. package/dist/chunks/{dropdown-tag.D63up7xm.js → dropdown-tag.DIlF7mOi.js} +3 -3
  21. package/dist/chunks/{dropdown-tag.D63up7xm.js.map → dropdown-tag.DIlF7mOi.js.map} +1 -1
  22. package/dist/chunks/{dropdown.cUORKsFC.js → dropdown.CdsjtT9_.js} +19 -19
  23. package/dist/chunks/{dropdown.cUORKsFC.js.map → dropdown.CdsjtT9_.js.map} +1 -1
  24. package/dist/chunks/{file-uploader.BDXQ7Ccv.js → file-uploader.R0NZXIsS.js} +2 -2
  25. package/dist/chunks/{file-uploader.BDXQ7Ccv.js.map → file-uploader.R0NZXIsS.js.map} +1 -1
  26. package/dist/chunks/{filter-bar.CnKxMs_L.js → filter-bar.DAYxD7wi.js} +538 -523
  27. package/dist/chunks/filter-bar.DAYxD7wi.js.map +1 -0
  28. package/dist/chunks/form-field.D_2g7vaP.js +10 -0
  29. package/dist/chunks/{form-field.BBqLu-vs.js.map → form-field.D_2g7vaP.js.map} +1 -1
  30. package/dist/chunks/{header-with-views.C773fdiL.js → header-with-views.CzLcYeW5.js} +2 -2
  31. package/dist/chunks/{header-with-views.C773fdiL.js.map → header-with-views.CzLcYeW5.js.map} +1 -1
  32. package/dist/chunks/{input-field-password.COET8hlJ.js → input-field-password.-xEY2VB8.js} +3 -3
  33. package/dist/chunks/{input-field-password.COET8hlJ.js.map → input-field-password.-xEY2VB8.js.map} +1 -1
  34. package/dist/chunks/{input-field-phone-number.rBDPxxxe.js → input-field-phone-number.DcxhP_qK.js} +3 -3
  35. package/dist/chunks/{input-field-phone-number.rBDPxxxe.js.map → input-field-phone-number.DcxhP_qK.js.map} +1 -1
  36. package/dist/chunks/{input-field.GEIdI0nu.js → input-field.B6nL7d8O.js} +2 -2
  37. package/dist/chunks/{input-field.GEIdI0nu.js.map → input-field.B6nL7d8O.js.map} +1 -1
  38. package/dist/chunks/{pagination.BZbMpRHw.js → pagination.DCn_tenp.js} +2 -2
  39. package/dist/chunks/{pagination.BZbMpRHw.js.map → pagination.DCn_tenp.js.map} +1 -1
  40. package/dist/chunks/{radio-group.D3GbOHUx.js → radio-group.Br-N309Y.js} +2 -2
  41. package/dist/chunks/{radio-group.D3GbOHUx.js.map → radio-group.Br-N309Y.js.map} +1 -1
  42. package/dist/chunks/{search-bar.eP4fk79T.js → search-bar.BmNEcy0L.js} +3 -3
  43. package/dist/chunks/{search-bar.eP4fk79T.js.map → search-bar.BmNEcy0L.js.map} +1 -1
  44. package/dist/chunks/{secondary-nav.CKA07_TU.js → secondary-nav.CPosCncv.js} +2 -2
  45. package/dist/chunks/{secondary-nav.CKA07_TU.js.map → secondary-nav.CPosCncv.js.map} +1 -1
  46. package/dist/chunks/{selection-card-group.B8Uoar3X.js → selection-card-group.DBdwqWsH.js} +2 -2
  47. package/dist/chunks/{selection-card-group.B8Uoar3X.js.map → selection-card-group.DBdwqWsH.js.map} +1 -1
  48. package/dist/chunks/{textarea.C_gnXj6b.js → textarea.XRETLCSj.js} +2 -2
  49. package/dist/chunks/{textarea.C_gnXj6b.js.map → textarea.XRETLCSj.js.map} +1 -1
  50. package/dist/chunks/{timeline-item.rSY0Xce3.js → timeline-item.19zg_gBi.js} +2 -2
  51. package/dist/chunks/{timeline-item.rSY0Xce3.js.map → timeline-item.19zg_gBi.js.map} +1 -1
  52. package/dist/code-snippet.js +1 -1
  53. package/dist/data-grid.js +1 -1
  54. package/dist/date-picker.js +1 -1
  55. package/dist/date-range-picker.js +1 -1
  56. package/dist/dropdown.js +2 -2
  57. package/dist/file-uploader.js +1 -1
  58. package/dist/filter-bar.js +1 -1
  59. package/dist/header-with-views.js +1 -1
  60. package/dist/index.js +19 -19
  61. package/dist/input-field-password.js +1 -1
  62. package/dist/input-field-phone-number.js +1 -1
  63. package/dist/input-field.js +1 -1
  64. package/dist/pagination.js +1 -1
  65. package/dist/radio-group.js +1 -1
  66. package/dist/search-bar.js +2 -2
  67. package/dist/secondary-nav.js +1 -1
  68. package/dist/selection-card.js +1 -1
  69. package/dist/textarea.js +1 -1
  70. package/dist/timeline.js +1 -1
  71. package/dist/web-types.json +1 -1
  72. package/package.json +3 -3
  73. package/dist/chunks/filter-bar.CnKxMs_L.js.map +0 -1
  74. package/dist/chunks/form-field.BBqLu-vs.js +0 -10
@@ -2,15 +2,15 @@ import { ref as u, computed as D, defineComponent as le, toRef as M, watch as U,
2
2
  import { f as K, s as q, b as ce } from "./calendar.Tm7Cvpwu.js";
3
3
  import { h as pe } from "./button-actions.BQ3AFQqt.js";
4
4
  import { d as fe, B as me } from "./typography.yBEME_Gu.js";
5
- import { d as ve } from "./debounce.DUTu11PS.js";
6
- import { D as T, v as De, f as be } from "./date-format.B8RU7D42.js";
5
+ import { D as ve } from "./dropdown-default-textbox._KEBXjKT.js";
6
+ import { d as De } from "./debounce.DUTu11PS.js";
7
+ import { D as T, v as be, f as ye } from "./date-format.B8RU7D42.js";
7
8
  import { g as E } from "./generate-uid.NJ8tVoha.js";
8
9
  import { u as W } from "./index.pdBj0KQU.js";
9
- import { u as ye } from "./form-field.BBqLu-vs.js";
10
- import { g as ke } from "./differenceInMonths.C8FyCrav.js";
11
- import { u as ge } from "./use-form-layout-loading.D3lALhtC.js";
12
- import { B as Ie } from "./directive.Cbdox5VL.js";
13
- import { D as Ce } from "./dropdown-default-textbox._KEBXjKT.js";
10
+ import { u as ke } from "./form-field.D_2g7vaP.js";
11
+ import { g as ge } from "./differenceInMonths.C8FyCrav.js";
12
+ import { u as Ie } from "./use-form-layout-loading.D3lALhtC.js";
13
+ import { B as Ce } from "./directive.Cbdox5VL.js";
14
14
  import { F as Ee, E as $ } from "./field-label.C97CrBI_.js";
15
15
  import { _ as Be } from "./_plugin-vue_export-helper.CHgC5LLL.js";
16
16
  import "../assets/date-picker.css";
@@ -37,7 +37,7 @@ const S = {
37
37
  placeholder: a
38
38
  }) => {
39
39
  var y;
40
- const { locale: w, t: b } = W({ messages: S }), o = ke(), c = u((y = d.value) == null ? void 0 : y.toDateString());
40
+ const { locale: w, t: b } = W({ messages: S }), o = ge(), c = u((y = d.value) == null ? void 0 : y.toDateString());
41
41
  return {
42
42
  // Values
43
43
  dateDisplayValue: D(() => {
@@ -89,7 +89,7 @@ const S = {
89
89
  },
90
90
  emits: ["update:model-value", "input"],
91
91
  setup(d, { emit: B }) {
92
- const a = d, w = B, { t: b } = W({ messages: S }), o = E("bento-date-picker-container"), c = E("bento-date-picker-label"), F = E("bento-date-picker-description"), P = E("bento-date-picker-error"), y = E("bento-date-picker-date-error"), r = D(() => a.label || b("datePicker", { name: o })), _ = u(null), p = u(null), i = u(!1), l = u(!1), N = u(void 0), f = u(a.modelValue), { isReadOnly: j } = ge(M(a, "readonly")), { emitValue: k } = ye(w);
92
+ const a = d, w = B, { t: b } = W({ messages: S }), o = E("bento-date-picker-container"), c = E("bento-date-picker-label"), F = E("bento-date-picker-description"), P = E("bento-date-picker-error"), y = E("bento-date-picker-date-error"), r = D(() => a.label || b("datePicker", { name: o })), _ = u(null), p = u(null), i = u(!1), l = u(!1), N = u(void 0), f = u(a.modelValue), { isReadOnly: j } = Ie(M(a, "readonly")), { emitValue: k } = ke(w);
93
93
  U(
94
94
  () => a.disabled,
95
95
  (e) => {
@@ -124,13 +124,13 @@ const S = {
124
124
  }, Z = async () => {
125
125
  i.value && (i.value = !1, s.value = null), k(null);
126
126
  }, ee = (e) => {
127
- De(e);
127
+ be(e);
128
128
  }, x = (e) => {
129
129
  if (e.length < 10)
130
130
  return;
131
131
  /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(e) && Q(new Date(e)) ? (i.value = !1, k(new Date(e))) : e && (i.value = !0, k(null));
132
- }, ae = ve(x, 1e3), te = (e) => {
133
- s.value = be(e), l.value ? ae(s.value) : x(s.value);
132
+ }, ae = De(x, 1e3), te = (e) => {
133
+ s.value = ye(e), l.value ? ae(s.value) : x(s.value);
134
134
  }, A = async (e) => {
135
135
  var m;
136
136
  l.value || (e.preventDefault(), h(), await de(), f.value || (V(/* @__PURE__ */ new Date()), k(/* @__PURE__ */ new Date())), N.value = ((m = _.value) == null ? void 0 : m.$refs.calendarRef[0].focusOnDate(
@@ -154,7 +154,7 @@ const S = {
154
154
  required: e.required
155
155
  }, null, 8, ["id", "label", "tooltip-text", "optional", "required"])) : C("", !0),
156
156
  ne("div", null, [
157
- L(t(Ce), {
157
+ L(t(ve), {
158
158
  ref_key: "inputContainerRef",
159
159
  ref: p,
160
160
  "always-combobox-is-input": "",
@@ -234,11 +234,11 @@ const S = {
234
234
  _: 1
235
235
  }, 8, ["id", "open", "target-element", "aria-label", "trap-all-options"])) : C("", !0)
236
236
  ], 32)), [
237
- [t(Ie), O]
237
+ [t(Ce), O]
238
238
  ]);
239
239
  }
240
240
  }), qe = /* @__PURE__ */ Be(Oe, [["__scopeId", "data-v-f0149332"]]);
241
241
  export {
242
242
  qe as B
243
243
  };
244
- //# sourceMappingURL=date-picker.De5ox4c1.js.map
244
+ //# sourceMappingURL=date-picker.x9GeC_UO.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.De5ox4c1.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 { DateFormat } from '@/types/date-format';\nimport { getDateLocale } from '@/utils/ts/get-date-locale/get-date-locale';\nimport { format } from 'date-fns/format';\nimport { startOfMonth } from 'date-fns/startOfMonth';\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 {Ref<Date>} option.datePickerValue Ref to the datePickerValue set in the DatePicker component\n * @param {Ref<boolean>} option.isDateIncorrect Indicates if the date is correct or not\n * @param {?Ref<boolean>} option.isMonthVariant Indicates if the date picker has variant \"month\"\n */\nexport const useDatePickerSingleCalendarText: UseDateDisplayText<Date> = ({\n datePickerValue,\n isDateIncorrect,\n isMonthVariant,\n placeholder,\n}) => {\n const { locale, t } = useI18n<{ message: MessageSchema }>({ messages });\n const locales = getDateLocale();\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 (isDateIncorrect.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 return format(\n datePickerValue.value,\n isMonthVariant?.value ? DateFormat.LONG_MONTH_YEAR : DateFormat.FULL_DATE,\n {\n locale: locales[locale.value?.substring(0, 2)] || locales.enUS,\n }\n );\n });\n\n /**\n * Formats the \"dateToFormat\" date value with the yyyy-MM-dd format and sets it as \"formatTextInputDisplayValue\" value\n * @param {Date} 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 (isDateIncorrect.value) {\n return;\n }\n\n const date = isMonthVariant?.value ? startOfMonth(dateToFormat) : dateToFormat;\n textInputValue.value = dateToFormat\n ? format(date, DateFormat.NUMERIC_DATE_YEAR_FIRST, {\n locale: locales[locale.value?.substring(0, 2)] || locales.enUS,\n })\n : null;\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 <dropdown-input-default\n ref=\"inputContainerRef\"\n always-combobox-is-input\n :ariaControls=\"datePickerContainerId\"\n :ariaExpanded=\"isDatePickerOpen\"\n :aria-labelledby=\"label ? labelId : null\"\n :aria-describedby=\"ariaDescribedBy\"\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\"\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\"\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 :trap-all-options=\"{\n initialFocus: initialFocusOnDatePickerOpen,\n }\"\n @keydown.esc.native=\"closeDatePicker\"\n >\n <calendar\n ref=\"calendarContainerRef\"\n :default-display-month=\"defaultDisplayMonth\"\n :first-day-of-week=\"firstDayOfWeek\"\n :is-date-disabled=\"isDateDisabled\"\n :number-of-months=\"1\"\n :value=\"internalModelValue\"\n :min=\"min\"\n :max=\"max\"\n :variant=\"variant\"\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\n // Utils\n import { debounce } from '@/utils/ts/debounce';\n import { formatDateInputValue, validateDateInput } from '@/utils/ts/date-input';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\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 { useFormLayoutFieldLoading } 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: 1, // Monday\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 });\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 isDateIncorrect = ref(false);\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\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 isDateIncorrect,\n isMonthVariant,\n placeholder: toRef(props, 'placeholder'),\n });\n\n const dateErrorText = computed(() => {\n if (\n props.isDateDisabled &&\n textInputValue.value &&\n props.isDateDisabled(new Date(textInputValue.value)) &&\n !isDatePickerOpen.value\n ) {\n return t('selectedDateIsNotAvailable');\n }\n\n return isDateIncorrect.value ? t('provideDateInAFormat') : null;\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 isDateEnabled = (date: Date) => {\n // Check if date is between min/max bounds, if there are any\n if ((props.min && date <= props.min) || (props.max && date >= props.max)) {\n return false;\n }\n\n // Check if function is set, otherwise all dates are enabled\n if (props.isDateDisabled) {\n return !props.isDateDisabled(date);\n }\n\n return true;\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 isDateIncorrect.value = false;\n\n closeDatePicker();\n emitValue(selectedDate);\n };\n\n const clearDatePickerValue = async () => {\n if (isDateIncorrect.value) {\n isDateIncorrect.value = false;\n textInputValue.value = null;\n }\n emitValue(null);\n };\n\n const onDateKeyDown = (event: KeyboardEvent) => {\n validateDateInput(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 // Checks for YYYY-MM-DD format\n const dateRegex = /^\\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/;\n const isValidDate = dateRegex.test(stringDate) && isDateEnabled(new Date(stringDate));\n if (isValidDate) {\n isDateIncorrect.value = false;\n emitValue(new Date(stringDate));\n } else if (stringDate) {\n // Only set to true if the value exists (not null/undefined)\n isDateIncorrect.value = true;\n emitValue(null);\n }\n };\n\n const validateDateDebounced = debounce(validateDate, DEBOUNCE_TIME);\n\n const onDateInputChange = (stringDate: string) => {\n textInputValue.value = formatDateInputValue(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 if (isDatePickerOpen.value) {\n validateDateDebounced(textInputValue.value);\n } else {\n validateDate(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","isDateIncorrect","isMonthVariant","placeholder","locale","t","useI18n","messages","locales","getDateLocale","textInputValue","ref","_a","computed","format","DateFormat","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","watch","disabled","newValue","newModelValue","deprecate","dateDisplayValue","formatTextInputDisplayValue","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","isDateEnabled","closeDatePicker","openDatePicker","onDateSelected","selectedDate","clearDatePickerValue","onDateKeyDown","event","validateDateInput","validateDate","stringDate","validateDateDebounced","debounce","onDateInputChange","formatDateInputValue","onSpaceBarOrEnter","nextTick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiBOA,KAAA,CAAA;AAAA,EAAmE,iBAAAC;AAAA,EACtE,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,aAAAC;AAEJ,MAAA;;AACI,QAAA,EAAA,QAAAC,GAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAC,EAAA,CAAA,GACAC,IAAAC,GAAA,GAEAC,IAAAC,GAAAC,IAAAZ,EAAA,UAAA,gBAAAY,EAAA,cAAA;AA0CA,SAAA;AAAA;AAAA,IAAO,kBAxCPC,EAAA,MAAA;;AAEI,aAAAZ,EAAA,QACIS,EAAA,QAIJV,EAAA,QAMAc;AAAA,QAAOd,EAAA;AAAA,QACaE,KAAA,QAAAA,EAAA,QAAAa,EAAA,kBAAAA,EAAA;AAAA,QACgD;AAAA,UAChE,QAAAP,GAAAI,IAAAR,EAAA,UAAA,gBAAAQ,EAAA,UAAA,GAAA,EAAA,KAAAJ,EAAA;AAAA,QAC8D;AAAA,MAC9D,KAVAL,KAAA,gBAAAA,EAAA,UAAAE,EAAA,YAAA;AAAA,IAWJ,CAAA;AAAA,IAuBA,gBAAAK;AAAA;AAAA,IACA,6BAjBJ,CAAAM,IAAAhB,EAAA,UAAA;;AAEI,UAAAC,EAAA;AACI;AAGJ,YAAAgB,IAAAf,KAAA,QAAAA,EAAA,QAAAgB,EAAAF,CAAA,IAAAA;AACA,MAAAN,EAAA,QAAAM,IAAAF,EAAAG,GAAAF,EAAA,yBAAA;AAAA,QACuD,QAAAP,GAAAI,IAAAR,EAAA,UAAA,gBAAAQ,EAAA,UAAA,GAAA,EAAA,KAAAJ,EAAA;AAAA,MACa,CAAA,IAAA;AAAA,IAE9D;AAAA,EASN;AAER,GCySIW,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAZ,EAAA;AAAA,EACM,MAAA;AAAA,EACX,OAAA,EAAA,MAAA,aAAA;AAEV;;;;;;;;;;;;;;;;;;;;;;;AAlPA,UAAAa,IAAAC,GAoBAC,IAAAC,GAEA,EAAA,GAAAlB,EAAA,IAAAC,EAAA,EAAA,UAAAC,EAAA,CAAA,GACAiB,IAAAC,EAAA,6BAAA,GACAC,IAAAD,EAAA,yBAAA,GACAE,IAAAF,EAAA,+BAAA,GACAG,IAAAH,EAAA,yBAAA,GACAI,IAAAJ,EAAA,8BAAA,GACAK,IAAAjB,EAAA,MAAAO,EAAA,SAAAf,EAAA,cAAA,EAAA,MAAAmB,EAAA,CAAA,CAAA,GAGAO,IAAApB,EAAA,IAAA,GACAqB,IAAArB,EAAA,IAAA,GAGAV,IAAAU,EAAA,EAAA,GACAsB,IAAAtB,EAAA,EAAA,GACAuB,IAAAvB,EAAA,MAAA,GACAwB,IAAAxB,EAAAS,EAAA,UAAA,GACA,EAAA,YAAAgB,EAAA,IAAAC,GAAAC,EAAAlB,GAAA,UAAA,CAAA,GACA,EAAA,WAAAmB,EAAA,IAAAC,GAAAlB,CAAA;AAEA,IAAAmB;AAAA,MAAA,MAAArB,EAAA;AAAA,MACgB,CAAAsB,MAAA;AAGR,QAAAA,KAAAT,EAAA,UACIA,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ,GAGJQ;AAAA,MAAA,CAAA,MAAArB,EAAA,OAAA,MAAAA,EAAA,UAAA;AAAA,MAC8C,CAAA,CAAAuB,GAAAC,CAAA,MAAA;AAEtC,QAAAD,KACIE;AAAA,UAAA;AAAA,UACI;AAAA,UACA;AAAA,QACA,GAIRV,EAAA,QAAAS,KAAAD;AAAA,MAA4C;AAAA,MAChD,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAzC,IAAAW,EAAA,MAAAO,EAAA,YAAA,OAAA,GAEA,EAAA,kBAAA0B,GAAA,gBAAApC,GAAA,6BAAAqC,EAAA,IAAAhD,GAAA;AAAA,MAA0G,iBAAAoC;AAAA,MACrF,iBAAAlC;AAAA,MACjB,gBAAAC;AAAA,MACA,aAAAoC,EAAAlB,GAAA,aAAA;AAAA,IACuC,CAAA,GAG3C4B,IAAAnC,EAAA,MACIO,EAAA,kBAAAV,EAAA,SAAAU,EAAA,eAAA,IAAA,KAAAV,EAAA,KAAA,CAAA,KAAA,CAAAuB,EAAA,QAMI5B,EAAA,4BAAA,IAGJJ,EAAA,QAAAI,EAAA,sBAAA,IAAA,IAA2D,GAG/D4C,IAAApC,EAAA,OAAA;AAAA,MAAsD,qCAAAO,EAAA,gBAAA4B,EAAA;AAAA,IACuB,EAAA,GAG7EE,IAAArC;AAAA,MAAwB,MAAA,GAAAO,EAAA,cAAAO,IAAA,EAAA,IAAAP,EAAA,eAAAQ,IAAA,EAAA,IAAAoB,EAAA,QAAAnB,IAAA,EAAA,GAAA,KAAA,KAAA;AAAA,IAIH,GAGrBsB,IAAA,CAAAlC,MAEIG,EAAA,OAAAH,KAAAG,EAAA,OAAAA,EAAA,OAAAH,KAAAG,EAAA,MACI,KAIJA,EAAA,iBACI,CAAAA,EAAA,eAAAH,CAAA,IAGJ,IAGJmC,IAAA,MAAA;AACI,MAAAnB,EAAA,QAAA;AAAA,IAAyB,GAG7BoB,IAAA,MAAA;AACI,MAAApB,EAAA,QAAA,IAEAc,EAAA;AAAA,IAA4B,GAGhCO,IAAA,CAAAC,MAAA;AAEI,MAAAtD,EAAA,QAAA,IAEAmD,EAAA,GACAb,EAAAgB,CAAA;AAAA,IAAsB,GAG1BC,IAAA,YAAA;AACI,MAAAvD,EAAA,UACIA,EAAA,QAAA,IACAS,EAAA,QAAA,OAEJ6B,EAAA,IAAA;AAAA,IAAc,GAGlBkB,KAAA,CAAAC,MAAA;AACI,MAAAC,GAAAD,CAAA;AAAA,IAAuB,GAG3BE,IAAA,CAAAC,MAAA;AAEI,UAAAA,EAAA,SAAA;AACI;AAMJ,MAFA,qDACA,KAAAA,CAAA,KAAAV,EAAA,IAAA,KAAAU,CAAA,CAAA,KAEI5D,EAAA,QAAA,IACAsC,EAAA,IAAA,KAAAsB,CAAA,CAAA,KAA8BA,MAG9B5D,EAAA,QAAA,IACAsC,EAAA,IAAA;AAAA,IACJ,GAGJuB,KAAAC,GAAAH,GAAA,GAAA,GAEAI,KAAA,CAAAH,MAAA;AACI,MAAAnD,EAAA,QAAAuD,GAAAJ,CAAA,GAEA5B,EAAA,QACI6B,GAAApD,EAAA,KAAA,IAEAkD,EAAAlD,EAAA,KAAA;AAAA,IACJ,GAUJwD,IAAA,OAAAR,MAAA;;AACI,MAAAzB,EAAA,UAGAyB,EAAA,eAAA,GAEAL,EAAA,GAGA,MAAAc,GAAA,GAGAhC,EAAA,UAEIY,EAAA,oBAAA,KAAA,CAAA,GACAR,EAAA,oBAAA,KAAA,CAAA,IAIJL,EAAA,UAAAtB,IAAAmB,EAAA,UAAA,gBAAAnB,EAAA,MAAA,YAAA,GAAA;AAAA,QACqDQ,EAAA,YAAA,UAAAF,EAAAiB,EAAA,KAAA,IAAAA,EAAA;AAAA,QAC2C;AAAA,YACxF;AAAA,IACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"date-picker.x9GeC_UO.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 { DateFormat } from '@/types/date-format';\nimport { getDateLocale } from '@/utils/ts/get-date-locale/get-date-locale';\nimport { format } from 'date-fns/format';\nimport { startOfMonth } from 'date-fns/startOfMonth';\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 {Ref<Date>} option.datePickerValue Ref to the datePickerValue set in the DatePicker component\n * @param {Ref<boolean>} option.isDateIncorrect Indicates if the date is correct or not\n * @param {?Ref<boolean>} option.isMonthVariant Indicates if the date picker has variant \"month\"\n */\nexport const useDatePickerSingleCalendarText: UseDateDisplayText<Date> = ({\n datePickerValue,\n isDateIncorrect,\n isMonthVariant,\n placeholder,\n}) => {\n const { locale, t } = useI18n<{ message: MessageSchema }>({ messages });\n const locales = getDateLocale();\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 (isDateIncorrect.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 return format(\n datePickerValue.value,\n isMonthVariant?.value ? DateFormat.LONG_MONTH_YEAR : DateFormat.FULL_DATE,\n {\n locale: locales[locale.value?.substring(0, 2)] || locales.enUS,\n }\n );\n });\n\n /**\n * Formats the \"dateToFormat\" date value with the yyyy-MM-dd format and sets it as \"formatTextInputDisplayValue\" value\n * @param {Date} 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 (isDateIncorrect.value) {\n return;\n }\n\n const date = isMonthVariant?.value ? startOfMonth(dateToFormat) : dateToFormat;\n textInputValue.value = dateToFormat\n ? format(date, DateFormat.NUMERIC_DATE_YEAR_FIRST, {\n locale: locales[locale.value?.substring(0, 2)] || locales.enUS,\n })\n : null;\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 <dropdown-input-default\n ref=\"inputContainerRef\"\n always-combobox-is-input\n :ariaControls=\"datePickerContainerId\"\n :ariaExpanded=\"isDatePickerOpen\"\n :aria-labelledby=\"label ? labelId : null\"\n :aria-describedby=\"ariaDescribedBy\"\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\"\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\"\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 :trap-all-options=\"{\n initialFocus: initialFocusOnDatePickerOpen,\n }\"\n @keydown.esc.native=\"closeDatePicker\"\n >\n <calendar\n ref=\"calendarContainerRef\"\n :default-display-month=\"defaultDisplayMonth\"\n :first-day-of-week=\"firstDayOfWeek\"\n :is-date-disabled=\"isDateDisabled\"\n :number-of-months=\"1\"\n :value=\"internalModelValue\"\n :min=\"min\"\n :max=\"max\"\n :variant=\"variant\"\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\n // Utils\n import { debounce } from '@/utils/ts/debounce';\n import { formatDateInputValue, validateDateInput } from '@/utils/ts/date-input';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\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 { useFormLayoutFieldLoading } 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: 1, // Monday\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 });\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 isDateIncorrect = ref(false);\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\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 isDateIncorrect,\n isMonthVariant,\n placeholder: toRef(props, 'placeholder'),\n });\n\n const dateErrorText = computed(() => {\n if (\n props.isDateDisabled &&\n textInputValue.value &&\n props.isDateDisabled(new Date(textInputValue.value)) &&\n !isDatePickerOpen.value\n ) {\n return t('selectedDateIsNotAvailable');\n }\n\n return isDateIncorrect.value ? t('provideDateInAFormat') : null;\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 isDateEnabled = (date: Date) => {\n // Check if date is between min/max bounds, if there are any\n if ((props.min && date <= props.min) || (props.max && date >= props.max)) {\n return false;\n }\n\n // Check if function is set, otherwise all dates are enabled\n if (props.isDateDisabled) {\n return !props.isDateDisabled(date);\n }\n\n return true;\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 isDateIncorrect.value = false;\n\n closeDatePicker();\n emitValue(selectedDate);\n };\n\n const clearDatePickerValue = async () => {\n if (isDateIncorrect.value) {\n isDateIncorrect.value = false;\n textInputValue.value = null;\n }\n emitValue(null);\n };\n\n const onDateKeyDown = (event: KeyboardEvent) => {\n validateDateInput(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 // Checks for YYYY-MM-DD format\n const dateRegex = /^\\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/;\n const isValidDate = dateRegex.test(stringDate) && isDateEnabled(new Date(stringDate));\n if (isValidDate) {\n isDateIncorrect.value = false;\n emitValue(new Date(stringDate));\n } else if (stringDate) {\n // Only set to true if the value exists (not null/undefined)\n isDateIncorrect.value = true;\n emitValue(null);\n }\n };\n\n const validateDateDebounced = debounce(validateDate, DEBOUNCE_TIME);\n\n const onDateInputChange = (stringDate: string) => {\n textInputValue.value = formatDateInputValue(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 if (isDatePickerOpen.value) {\n validateDateDebounced(textInputValue.value);\n } else {\n validateDate(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","isDateIncorrect","isMonthVariant","placeholder","locale","t","useI18n","messages","locales","getDateLocale","textInputValue","ref","_a","computed","format","DateFormat","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","watch","disabled","newValue","newModelValue","deprecate","dateDisplayValue","formatTextInputDisplayValue","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","isDateEnabled","closeDatePicker","openDatePicker","onDateSelected","selectedDate","clearDatePickerValue","onDateKeyDown","event","validateDateInput","validateDate","stringDate","validateDateDebounced","debounce","onDateInputChange","formatDateInputValue","onSpaceBarOrEnter","nextTick"],"mappings":"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"}
@@ -3,18 +3,18 @@ import { g as wa } from "./index.E60QniEu.js";
3
3
  import { B as Ma } from "./divider.DnKNNyWB.js";
4
4
  import { h as Oa, B as Fa } from "./button-actions.BQ3AFQqt.js";
5
5
  import { B as Ae, d as Qe } from "./typography.yBEME_Gu.js";
6
+ import { D as Ca } from "./dropdown-default-textbox._KEBXjKT.js";
6
7
  import { e as V, a as Ge, g as Ue } from "./differenceInMonths.C8FyCrav.js";
7
8
  import { g as ge } from "./generate-uid.NJ8tVoha.js";
8
9
  import { u as Ne } from "./index.pdBj0KQU.js";
9
- import { e as N, g as ia, h as We, i as x, j as Ca, k as Ke, l as Aa, s as ze, m as Ua, n as Te, o as Je, b as K, u as Na, f as ve } from "./calendar.Tm7Cvpwu.js";
10
- import { f as Xe, v as Ba, D as S } from "./date-format.B8RU7D42.js";
11
- import { t as Z, c as xa, n as qa } from "./getTimezoneOffsetInMilliseconds.BW7U6PxE.js";
12
- import { u as Pa } from "./use-form-layout-loading.D3lALhtC.js";
13
- import { B as $a } from "./directive.Cbdox5VL.js";
14
- import { u as Va } from "./form-field.BBqLu-vs.js";
15
- import { D as Ya } from "./dropdown-default-textbox._KEBXjKT.js";
16
- import { B as Ie } from "./input-field.GEIdI0nu.js";
17
- import { B as La } from "./dropdown.cUORKsFC.js";
10
+ import { e as N, g as ia, h as We, i as x, j as Aa, k as Ke, l as Ua, s as ze, m as Na, n as Te, o as Je, b as K, u as Ba, f as ve } from "./calendar.Tm7Cvpwu.js";
11
+ import { f as Xe, v as xa, D as S } from "./date-format.B8RU7D42.js";
12
+ import { t as Z, c as qa, n as Pa } from "./getTimezoneOffsetInMilliseconds.BW7U6PxE.js";
13
+ import { u as $a } from "./use-form-layout-loading.D3lALhtC.js";
14
+ import { B as Va } from "./directive.Cbdox5VL.js";
15
+ import { u as Ya } from "./form-field.D_2g7vaP.js";
16
+ import { B as Ie } from "./input-field.B6nL7d8O.js";
17
+ import { B as La } from "./dropdown.CdsjtT9_.js";
18
18
  import { B as ja } from "./segmented-control.BCHGDSrf.js";
19
19
  import { d as he } from "./debounce.DUTu11PS.js";
20
20
  import { u as Ha } from "./use-has-slot.B7eQSabc.js";
@@ -48,13 +48,13 @@ const za = ({
48
48
  d = N(e.earliest);
49
49
  else if (d) {
50
50
  const y = We(d, { weekStartsOn: t });
51
- x(d, y) || (d = N(Ca(Ke(d, { weekStartsOn: t }), 1)));
51
+ x(d, y) || (d = N(Aa(Ke(d, { weekStartsOn: t }), 1)));
52
52
  }
53
53
  if (e.latest)
54
54
  f = V(e.latest);
55
55
  else if (f) {
56
56
  const y = Ke(f, { weekStartsOn: t });
57
- x(f, y) || (f = V(Aa(We(f, { weekStartsOn: t }), 1)));
57
+ x(f, y) || (f = V(Ua(We(f, { weekStartsOn: t }), 1)));
58
58
  }
59
59
  }
60
60
  if ((e == null ? void 0 : e.type) === "monthly") {
@@ -68,7 +68,7 @@ const za = ({
68
68
  f = V(e.latest);
69
69
  else if (f) {
70
70
  const y = Ge(f);
71
- x(f, y) || (f = Ge(Ua(f, 1)));
71
+ x(f, y) || (f = Ge(Na(f, 1)));
72
72
  }
73
73
  }
74
74
  if ((e == null ? void 0 : e.type) === "quarterly") {
@@ -140,7 +140,7 @@ function Se(t, o) {
140
140
  }
141
141
  function st(t, o) {
142
142
  return x(
143
- xa(t, t),
143
+ qa(t, t),
144
144
  Qa(t)
145
145
  );
146
146
  }
@@ -350,7 +350,7 @@ const ca = {
350
350
  adjustEndDateInputForMonthly: M,
351
351
  adjustStartDateInputForQuarterly: j,
352
352
  adjustEndDateInputForQuarterly: fe
353
- } = Na(e.firstDayOfWeek), { savedRanges: H, saveRange: ae, resetSavedRanges: se } = Ja(), w = (a) => {
353
+ } = Ba(e.firstDayOfWeek), { savedRanges: H, saveRange: ae, resetSavedRanges: se } = Ja(), w = (a) => {
354
354
  var n;
355
355
  return a ? ve(a, S.NUMERIC_DATE_YEAR_FIRST, {
356
356
  locale: _[(n = ee.value) == null ? void 0 : n.substring(0, 2)] || _.enUS
@@ -505,7 +505,7 @@ const ca = {
505
505
  }, 300), va = (a) => {
506
506
  i.endDate = Xe(a), fa(i.endDate);
507
507
  }, xe = (a) => {
508
- Ba(a);
508
+ xa(a);
509
509
  }, pa = he((a) => {
510
510
  if (l(a, e.dateFormData.startDate)) {
511
511
  Q.value = !1, s.startDate = p(s.startDate, a);
@@ -735,7 +735,7 @@ function sa(t, o) {
735
735
  return Z(t, o == null ? void 0 : o.in).getFullYear();
736
736
  }
737
737
  function Dt(t, o, u) {
738
- const [r, e] = qa(
738
+ const [r, e] = Pa(
739
739
  u == null ? void 0 : u.in,
740
740
  t,
741
741
  o
@@ -878,7 +878,7 @@ const Be = {
878
878
  timeDifference: p
879
879
  }
880
880
  };
881
- })), g = A(!1), Y = A(null), R = A(!1), { isReadOnly: q } = Pa(je(r, "readonly")), { emitValue: L } = Va(u);
881
+ })), g = A(!1), Y = A(null), R = A(!1), { isReadOnly: q } = $a(je(r, "readonly")), { emitValue: L } = Ya(u);
882
882
  Fe(
883
883
  () => r.disabled,
884
884
  () => {
@@ -995,7 +995,7 @@ const Be = {
995
995
  ne("div", {
996
996
  onKeydown: He(G, ["enter"])
997
997
  }, [
998
- X(D(Ya), {
998
+ X(D(Ca), {
999
999
  ref_key: "inputContainerRef",
1000
1000
  ref: Y,
1001
1001
  "always-combobox-is-input": "",
@@ -1087,7 +1087,7 @@ const Be = {
1087
1087
  _: 1
1088
1088
  }, 8, ["id", "open", "target-element", "aria-label"])) : U("", !0)
1089
1089
  ])), [
1090
- [D($a), M]
1090
+ [D(Va), M]
1091
1091
  ]);
1092
1092
  }
1093
1093
  }), Lt = /* @__PURE__ */ ua(gt, [["__scopeId", "data-v-c4bf2c5f"]]);
@@ -1097,4 +1097,4 @@ export {
1097
1097
  st as a,
1098
1098
  Se as i
1099
1099
  };
1100
- //# sourceMappingURL=date-range-picker.qXIfFq69.js.map
1100
+ //# sourceMappingURL=date-range-picker.CXeFdxAA.js.map