@adyen/bento-vue3 1.76.0 → 1.76.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 (68) 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/input-field.css +1 -1
  10. package/dist/assets/inspector.css +1 -1
  11. package/dist/assets/modal-fullscreen.css +1 -1
  12. package/dist/assets/sidepanel.css +1 -1
  13. package/dist/checkbox.js +2 -2
  14. package/dist/chunks/{checkbox-group.8J29fVna.js → checkbox-group.8ebmaHsA.js} +2 -2
  15. package/dist/chunks/{checkbox-group.8J29fVna.js.map → checkbox-group.8ebmaHsA.js.map} +1 -1
  16. package/dist/chunks/{checkbox.CfNYUty6.js → checkbox.BI0dqARY.js} +18 -18
  17. package/dist/chunks/{checkbox.CfNYUty6.js.map → checkbox.BI0dqARY.js.map} +1 -1
  18. package/dist/chunks/{code-snippet.EeIcRV20.js → code-snippet.Bjf1ma1L.js} +2 -2
  19. package/dist/chunks/{code-snippet.EeIcRV20.js.map → code-snippet.Bjf1ma1L.js.map} +1 -1
  20. package/dist/chunks/{data-grid.DJIxBwCa.js → data-grid.VBEJO94f.js} +8 -8
  21. package/dist/chunks/{data-grid.DJIxBwCa.js.map → data-grid.VBEJO94f.js.map} +1 -1
  22. package/dist/chunks/{date-picker.CobmiKaJ.js → date-picker.OI-sQ232.js} +14 -14
  23. package/dist/chunks/{date-picker.CobmiKaJ.js.map → date-picker.OI-sQ232.js.map} +1 -1
  24. package/dist/chunks/{date-range-picker.B6UKl1_N.js → date-range-picker.D7IwIR5V.js} +19 -19
  25. package/dist/chunks/{date-range-picker.B6UKl1_N.js.map → date-range-picker.D7IwIR5V.js.map} +1 -1
  26. package/dist/chunks/{dropdown-tag.CMjilUQb.js → dropdown-tag.DFeoXIgH.js} +2 -2
  27. package/dist/chunks/{dropdown-tag.CMjilUQb.js.map → dropdown-tag.DFeoXIgH.js.map} +1 -1
  28. package/dist/chunks/{dropdown.DG_EnV8g.js → dropdown.KStrJVoP.js} +18 -18
  29. package/dist/chunks/{dropdown.DG_EnV8g.js.map → dropdown.KStrJVoP.js.map} +1 -1
  30. package/dist/chunks/{filter-bar.dmC284Po.js → filter-bar.JXmlFnHV.js} +6 -6
  31. package/dist/chunks/{filter-bar.dmC284Po.js.map → filter-bar.JXmlFnHV.js.map} +1 -1
  32. package/dist/chunks/{header-with-views.BZ16v5-m.js → header-with-views.Dg2usaMY.js} +3 -3
  33. package/dist/chunks/{header-with-views.BZ16v5-m.js.map → header-with-views.Dg2usaMY.js.map} +1 -1
  34. package/dist/chunks/{input-field-password.BVnZWBAV.js → input-field-password.B6nJ7ygZ.js} +3 -3
  35. package/dist/chunks/{input-field-password.BVnZWBAV.js.map → input-field-password.B6nJ7ygZ.js.map} +1 -1
  36. package/dist/chunks/{input-field-phone-number.CWhPGQ1U.js → input-field-phone-number.D_UBAN2s.js} +3 -3
  37. package/dist/chunks/{input-field-phone-number.CWhPGQ1U.js.map → input-field-phone-number.D_UBAN2s.js.map} +1 -1
  38. package/dist/chunks/{input-field.A-dEZZfC.js → input-field.C29FCI4j.js} +62 -62
  39. package/dist/chunks/input-field.C29FCI4j.js.map +1 -0
  40. package/dist/chunks/{pagination.B4qBK4pM.js → pagination.BaBWNlIF.js} +2 -2
  41. package/dist/chunks/{pagination.B4qBK4pM.js.map → pagination.BaBWNlIF.js.map} +1 -1
  42. package/dist/chunks/{rich-text-editor.BA6_k4Vv.js → rich-text-editor.Bh7KS617.js} +2 -2
  43. package/dist/chunks/{rich-text-editor.BA6_k4Vv.js.map → rich-text-editor.Bh7KS617.js.map} +1 -1
  44. package/dist/chunks/{search-bar.dZ7UCMxb.js → search-bar.RS02IcLc.js} +3 -3
  45. package/dist/chunks/{search-bar.dZ7UCMxb.js.map → search-bar.RS02IcLc.js.map} +1 -1
  46. package/dist/chunks/{secondary-nav.CE082cQ_.js → secondary-nav.DXsgUTqk.js} +2 -2
  47. package/dist/chunks/{secondary-nav.CE082cQ_.js.map → secondary-nav.DXsgUTqk.js.map} +1 -1
  48. package/dist/chunks/{selection-card-group.NnTbPQjj.js → selection-card-group.F8alOPtl.js} +9 -9
  49. package/dist/chunks/{selection-card-group.NnTbPQjj.js.map → selection-card-group.F8alOPtl.js.map} +1 -1
  50. package/dist/code-snippet.js +1 -1
  51. package/dist/data-grid.js +1 -1
  52. package/dist/date-picker.js +1 -1
  53. package/dist/date-range-picker.js +1 -1
  54. package/dist/dropdown.js +2 -2
  55. package/dist/filter-bar.js +1 -1
  56. package/dist/header-with-views.js +1 -1
  57. package/dist/index.js +18 -18
  58. package/dist/input-field-password.js +1 -1
  59. package/dist/input-field-phone-number.js +1 -1
  60. package/dist/input-field.js +1 -1
  61. package/dist/pagination.js +1 -1
  62. package/dist/rich-text-editor.js +1 -1
  63. package/dist/search-bar.js +2 -2
  64. package/dist/secondary-nav.js +1 -1
  65. package/dist/selection-card.js +1 -1
  66. package/dist/web-types.json +1 -1
  67. package/package.json +5 -5
  68. package/dist/chunks/input-field.A-dEZZfC.js.map +0 -1
@@ -2,14 +2,14 @@ import { ref as m, computed as D, defineComponent as ae, toRef as N, watch as te
2
2
  import { f as V, s as K, b as de } from "./calendar.Tm7Cvpwu.js";
3
3
  import { h as ce } from "./button-actions.BQ3AFQqt.js";
4
4
  import { B as pe } from "./typography.yBEME_Gu.js";
5
- import { d as fe } from "./debounce.DUTu11PS.js";
6
- import { D as O, v as ve, f as me } from "./date-format.B8RU7D42.js";
5
+ import { D as fe } from "./dropdown-default-textbox.MkU0tMf1.js";
6
+ import { d as ve } from "./debounce.DUTu11PS.js";
7
+ import { D as O, v as me, f as De } from "./date-format.B8RU7D42.js";
7
8
  import { g as C } from "./generate-uid.NJ8tVoha.js";
8
9
  import { u as $ } from "./index.pdBj0KQU.js";
9
- import { g as De } from "./differenceInMonths.C8FyCrav.js";
10
- import { u as be } from "./use-form-layout-loading.D3lALhtC.js";
11
- import { B as ye } from "./directive.Cbdox5VL.js";
12
- import { D as ke } from "./dropdown-default-textbox.MkU0tMf1.js";
10
+ import { g as be } from "./differenceInMonths.C8FyCrav.js";
11
+ import { u as ye } from "./use-form-layout-loading.D3lALhtC.js";
12
+ import { B as ke } from "./directive.Cbdox5VL.js";
13
13
  import { F as Ie, E as Y } from "./field-label.C97CrBI_.js";
14
14
  import { _ as ge } from "./_plugin-vue_export-helper.CHgC5LLL.js";
15
15
  import "../assets/date-picker.css";
@@ -36,7 +36,7 @@ const R = {
36
36
  placeholder: a
37
37
  }) => {
38
38
  var y;
39
- const { locale: o, t: b } = $({ messages: R }), n = De(), p = m((y = r.value) == null ? void 0 : y.toDateString());
39
+ const { locale: o, t: b } = $({ messages: R }), n = be(), p = m((y = r.value) == null ? void 0 : y.toDateString());
40
40
  return {
41
41
  // Values
42
42
  dateDisplayValue: D(() => {
@@ -88,7 +88,7 @@ const Ee = {
88
88
  },
89
89
  emits: [c.INPUT],
90
90
  setup(r, { emit: E }) {
91
- const a = r, o = E, { t: b } = $({ messages: R }), n = C("bento-date-picker-container"), p = C("bento-date-picker-label"), U = C("bento-date-picker-description"), w = C("bento-date-picker-error"), y = C("bento-date-picker-date-error"), i = D(() => a.label || b("datePicker", { name: n })), T = m(null), f = m(null), u = m(!1), l = m(!1), S = m(void 0), { isReadOnly: q } = be(N(a, "readonly"));
91
+ const a = r, o = E, { t: b } = $({ messages: R }), n = C("bento-date-picker-container"), p = C("bento-date-picker-label"), U = C("bento-date-picker-description"), w = C("bento-date-picker-error"), y = C("bento-date-picker-date-error"), i = D(() => a.label || b("datePicker", { name: n })), T = m(null), f = m(null), u = m(!1), l = m(!1), S = m(void 0), { isReadOnly: q } = ye(N(a, "readonly"));
92
92
  te(
93
93
  () => a.disabled,
94
94
  (e) => {
@@ -113,13 +113,13 @@ const Ee = {
113
113
  }, Q = async () => {
114
114
  u.value && (u.value = !1, d.value = null), o(c.INPUT, null);
115
115
  }, X = (e) => {
116
- ve(e);
116
+ me(e);
117
117
  }, F = (e) => {
118
118
  if (e.length < 10)
119
119
  return;
120
120
  /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(e) && H(new Date(e)) ? (u.value = !1, o(c.INPUT, new Date(e))) : e && (u.value = !0, o(c.INPUT, null));
121
- }, Z = fe(F, 1e3), ee = (e) => {
122
- d.value = me(e), l.value ? Z(d.value) : F(d.value);
121
+ }, Z = ve(F, 1e3), ee = (e) => {
122
+ d.value = De(e), l.value ? Z(d.value) : F(d.value);
123
123
  }, h = async (e) => {
124
124
  var B;
125
125
  l.value || (e.preventDefault(), A(), await ue(), a.value || (x(/* @__PURE__ */ new Date()), o(c.INPUT, /* @__PURE__ */ new Date())), S.value = ((B = T.value) == null ? void 0 : B.$refs.calendarRef[0].focusOnDate(
@@ -143,7 +143,7 @@ const Ee = {
143
143
  required: e.required
144
144
  }, null, 8, ["id", "label", "tooltip-text", "optional", "required"])) : g("", !0),
145
145
  oe("div", null, [
146
- L(t(ke), {
146
+ L(t(fe), {
147
147
  ref_key: "inputContainerRef",
148
148
  ref: f,
149
149
  "always-combobox-is-input": "",
@@ -223,7 +223,7 @@ const Ee = {
223
223
  _: 1
224
224
  }, 8, ["id", "open", "target-element", "aria-label", "trap-all-options"])) : g("", !0)
225
225
  ], 32)), [
226
- [t(ye), P]
226
+ [t(ke), P]
227
227
  ]);
228
228
  }
229
229
  }), Ve = /* @__PURE__ */ ge(Te, [["__scopeId", "data-v-726bce96"]]);
@@ -231,4 +231,4 @@ export {
231
231
  Ve as B,
232
232
  c as a
233
233
  };
234
- //# sourceMappingURL=date-picker.CobmiKaJ.js.map
234
+ //# sourceMappingURL=date-picker.OI-sQ232.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.CobmiKaJ.js","sources":["../../../vue2/src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../../vue2/src/components/date-picker/date-picker.types.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","import type { FormField } from '../../types/form-field';\nimport {\n CalendarFirstDayOfWeek as BentoDatePickerFirstDayOfWeek,\n type CalendarIsDateDisabled as BentoDatePickerIsDateDisabled,\n type CalendarSingleDateValue as BentoDatePickerValue,\n CalendarVariant as BentoDatePickerVariant,\n} from '@/internal';\n\nexport {\n BentoDatePickerFirstDayOfWeek,\n type BentoDatePickerIsDateDisabled,\n type BentoDatePickerValue,\n BentoDatePickerVariant,\n};\n\nexport enum BentoDatePickerEvent {\n INPUT = 'input',\n}\n\nexport interface BentoDatePickerProps extends FormField {\n /**\n * Default start date for the calendar pane.\n * Expected format: YYYY-MM-DD\n * @default null\n */\n defaultDisplayMonth?: string | null;\n\n /**\n * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n * @default 1\n */\n firstDayOfWeek?: BentoDatePickerFirstDayOfWeek;\n\n /**\n * Indicate if a date should be disabled or not\n */\n isDateDisabled?: BentoDatePickerIsDateDisabled;\n\n /**\n * Sets a minimum limit for selectable dates - dates before `min` will not be selectable\n * @default null\n */\n min?: Date | null;\n\n /**\n * Sets a maximum limit for selectable dates - dates after `max` will not be selectable\n * @default null\n */\n max?: Date | null;\n\n /**\n * Selected date\n * @default null\n */\n value?: BentoDatePickerValue | null;\n\n /**\n * The type of calendar to display. Defaults to showing days.\n */\n variant?: `${BentoDatePickerVariant}`;\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=\"value\"\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, type Ref, 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, 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\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 { BentoDatePickerEvent, 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 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([BentoDatePickerEvent.INPUT]);\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 { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\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 const isMonthVariant = computed(() => props.variant === 'month');\n\n const { dateDisplayValue, textInputValue, formatTextInputDisplayValue } = useDatePickerSingleCalendarText({\n datePickerValue: toRef(props, 'value') as Ref<Date>,\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 emit(BentoDatePickerEvent.INPUT, selectedDate);\n };\n\n const clearDatePickerValue = async () => {\n if (isDateIncorrect.value) {\n isDateIncorrect.value = false;\n textInputValue.value = null;\n }\n emit(BentoDatePickerEvent.INPUT, 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 emit(BentoDatePickerEvent.INPUT, new Date(stringDate));\n } else if (stringDate) {\n // Only set to true if the value exists (not null/undefined)\n isDateIncorrect.value = true;\n emit(BentoDatePickerEvent.INPUT, 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 (!props.value) {\n // Format the opened date picker date to YYYY-MM-DD\n formatTextInputDisplayValue(new Date());\n emit(BentoDatePickerEvent.INPUT, new Date());\n }\n\n // Set initial focus\n initialFocusOnDatePickerOpen.value =\n calendarContainerRef.value?.$refs.calendarRef[0].focusOnDate(\n props.variant === 'month' ? startOfMonth(props.value) : props.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 };\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","BentoDatePickerEvent","BentoDatePickerEvent2","__default__","props","__props","emit","__emit","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","calendarContainerRef","inputContainerRef","isDatePickerOpen","initialFocusOnDatePickerOpen","isReadOnly","useFormLayoutFieldLoading","toRef","watch","disabled","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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"}
1
+ {"version":3,"file":"date-picker.OI-sQ232.js","sources":["../../../vue2/src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../../vue2/src/components/date-picker/date-picker.types.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","import type { FormField } from '../../types/form-field';\nimport {\n CalendarFirstDayOfWeek as BentoDatePickerFirstDayOfWeek,\n type CalendarIsDateDisabled as BentoDatePickerIsDateDisabled,\n type CalendarSingleDateValue as BentoDatePickerValue,\n CalendarVariant as BentoDatePickerVariant,\n} from '@/internal';\n\nexport {\n BentoDatePickerFirstDayOfWeek,\n type BentoDatePickerIsDateDisabled,\n type BentoDatePickerValue,\n BentoDatePickerVariant,\n};\n\nexport enum BentoDatePickerEvent {\n INPUT = 'input',\n}\n\nexport interface BentoDatePickerProps extends FormField {\n /**\n * Default start date for the calendar pane.\n * Expected format: YYYY-MM-DD\n * @default null\n */\n defaultDisplayMonth?: string | null;\n\n /**\n * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n * @default 1\n */\n firstDayOfWeek?: BentoDatePickerFirstDayOfWeek;\n\n /**\n * Indicate if a date should be disabled or not\n */\n isDateDisabled?: BentoDatePickerIsDateDisabled;\n\n /**\n * Sets a minimum limit for selectable dates - dates before `min` will not be selectable\n * @default null\n */\n min?: Date | null;\n\n /**\n * Sets a maximum limit for selectable dates - dates after `max` will not be selectable\n * @default null\n */\n max?: Date | null;\n\n /**\n * Selected date\n * @default null\n */\n value?: BentoDatePickerValue | null;\n\n /**\n * The type of calendar to display. Defaults to showing days.\n */\n variant?: `${BentoDatePickerVariant}`;\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=\"value\"\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, type Ref, 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, 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\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 { BentoDatePickerEvent, 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 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([BentoDatePickerEvent.INPUT]);\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 { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\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 const isMonthVariant = computed(() => props.variant === 'month');\n\n const { dateDisplayValue, textInputValue, formatTextInputDisplayValue } = useDatePickerSingleCalendarText({\n datePickerValue: toRef(props, 'value') as Ref<Date>,\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 emit(BentoDatePickerEvent.INPUT, selectedDate);\n };\n\n const clearDatePickerValue = async () => {\n if (isDateIncorrect.value) {\n isDateIncorrect.value = false;\n textInputValue.value = null;\n }\n emit(BentoDatePickerEvent.INPUT, 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 emit(BentoDatePickerEvent.INPUT, new Date(stringDate));\n } else if (stringDate) {\n // Only set to true if the value exists (not null/undefined)\n isDateIncorrect.value = true;\n emit(BentoDatePickerEvent.INPUT, 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 (!props.value) {\n // Format the opened date picker date to YYYY-MM-DD\n formatTextInputDisplayValue(new Date());\n emit(BentoDatePickerEvent.INPUT, new Date());\n }\n\n // Set initial focus\n initialFocusOnDatePickerOpen.value =\n calendarContainerRef.value?.$refs.calendarRef[0].focusOnDate(\n props.variant === 'month' ? startOfMonth(props.value) : props.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 };\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","BentoDatePickerEvent","BentoDatePickerEvent2","__default__","props","__props","emit","__emit","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","calendarContainerRef","inputContainerRef","isDatePickerOpen","initialFocusOnDatePickerOpen","isReadOnly","useFormLayoutFieldLoading","toRef","watch","disabled","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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"}
@@ -2,17 +2,17 @@ import { reactive as Ee, defineComponent as tt, ref as F, computed as S, onMount
2
2
  import { B as Rt } from "./divider.DnKNNyWB.js";
3
3
  import { h as St, B as Et } from "./button-actions.BQ3AFQqt.js";
4
4
  import { B as nt, d as wt } from "./typography.yBEME_Gu.js";
5
+ import { D as kt } from "./dropdown-default-textbox.MkU0tMf1.js";
5
6
  import { e as P, a as Pe, g as _e } from "./differenceInMonths.C8FyCrav.js";
6
7
  import { g as fe } from "./generate-uid.NJ8tVoha.js";
7
8
  import { u as Fe } from "./index.pdBj0KQU.js";
8
- import { e as C, g as rt, h as Ye, i as q, j as kt, k as Le, l as ht, s as je, m as Mt, n as ve, o as Ke, b as te, u as Ot, f as me } from "./calendar.Tm7Cvpwu.js";
9
- import { f as Ge, v as _t, D as h } from "./date-format.B8RU7D42.js";
10
- import { t as z, c as Ft, n as Ct } from "./getTimezoneOffsetInMilliseconds.BW7U6PxE.js";
11
- import { u as At } from "./use-form-layout-loading.D3lALhtC.js";
12
- import { B as Ut } from "./directive.Cbdox5VL.js";
13
- import { D as Nt } from "./dropdown-default-textbox.MkU0tMf1.js";
14
- import { B as Bt } from "./input-field.A-dEZZfC.js";
15
- import { B as qt } from "./dropdown.DG_EnV8g.js";
9
+ import { e as C, g as rt, h as Ye, i as q, j as ht, k as Le, l as Mt, s as je, m as Ot, n as ve, o as Ke, b as te, u as _t, f as me } from "./calendar.Tm7Cvpwu.js";
10
+ import { f as Ge, v as Ft, D as h } from "./date-format.B8RU7D42.js";
11
+ import { t as z, c as Ct, n as At } from "./getTimezoneOffsetInMilliseconds.BW7U6PxE.js";
12
+ import { u as Ut } from "./use-form-layout-loading.D3lALhtC.js";
13
+ import { B as Nt } from "./directive.Cbdox5VL.js";
14
+ import { B as Bt } from "./input-field.C29FCI4j.js";
15
+ import { B as qt } from "./dropdown.KStrJVoP.js";
16
16
  import { B as $t } from "./segmented-control.BCHGDSrf.js";
17
17
  import { d as Ie } from "./debounce.DUTu11PS.js";
18
18
  import { u as Pt } from "./use-has-slot.B7eQSabc.js";
@@ -46,13 +46,13 @@ const Gt = ({
46
46
  m = C(d.earliest);
47
47
  else if (m) {
48
48
  const y = Ye(m, { weekStartsOn: e });
49
- q(m, y) || (m = C(kt(Le(m, { weekStartsOn: e }), 1)));
49
+ q(m, y) || (m = C(ht(Le(m, { weekStartsOn: e }), 1)));
50
50
  }
51
51
  if (d.latest)
52
52
  D = P(d.latest);
53
53
  else if (D) {
54
54
  const y = Le(D, { weekStartsOn: e });
55
- q(D, y) || (D = P(ht(Ye(D, { weekStartsOn: e }), 1)));
55
+ q(D, y) || (D = P(Mt(Ye(D, { weekStartsOn: e }), 1)));
56
56
  }
57
57
  }
58
58
  if ((d == null ? void 0 : d.type) === "monthly") {
@@ -66,7 +66,7 @@ const Gt = ({
66
66
  D = P(d.latest);
67
67
  else if (D) {
68
68
  const y = Pe(D);
69
- q(D, y) || (D = Pe(Mt(D, 1)));
69
+ q(D, y) || (D = Pe(Ot(D, 1)));
70
70
  }
71
71
  }
72
72
  if ((d == null ? void 0 : d.type) === "quarterly") {
@@ -138,7 +138,7 @@ function Re(e, a) {
138
138
  }
139
139
  function xt(e, a) {
140
140
  return q(
141
- Ft(e, e),
141
+ Ct(e, e),
142
142
  Yt(e)
143
143
  );
144
144
  }
@@ -354,7 +354,7 @@ const Je = {
354
354
  adjustEndDateInputForMonthly: p,
355
355
  adjustStartDateInputForQuarterly: de,
356
356
  adjustEndDateInputForQuarterly: L
357
- } = Ot(e.firstDayOfWeek), { savedRanges: $, saveRange: ne, resetSavedRanges: _ } = Ht(), v = (t) => {
357
+ } = _t(e.firstDayOfWeek), { savedRanges: $, saveRange: ne, resetSavedRanges: _ } = Ht(), v = (t) => {
358
358
  var s;
359
359
  return t ? me(t, h.NUMERIC_DATE_YEAR_FIRST, {
360
360
  locale: m[(s = r.value) == null ? void 0 : s.substring(0, 2)] || m.enUS
@@ -509,7 +509,7 @@ const Je = {
509
509
  }, Xe), ut = (t) => {
510
510
  o.endDate = Ge(t), it(o.endDate);
511
511
  }, dt = (t) => {
512
- _t(t);
512
+ Ft(t);
513
513
  }, ct = Ie((t) => {
514
514
  if (ce(t, e.dateFormData.startDate)) {
515
515
  K.value = !1, n.startDate = U(n.startDate, t);
@@ -768,7 +768,7 @@ function et(e, a) {
768
768
  return z(e, a == null ? void 0 : a.in).getFullYear();
769
769
  }
770
770
  function ia(e, a, i) {
771
- const [r, d] = Ct(
771
+ const [r, d] = At(
772
772
  i == null ? void 0 : i.in,
773
773
  e,
774
774
  a
@@ -892,7 +892,7 @@ const da = { class: "b-date-range-picker" }, ca = { class: "b-date-range-picker_
892
892
  timeDifference: R
893
893
  }
894
894
  };
895
- })), w = F(!1), X = F(null), f = F(!1), { isReadOnly: ie } = At(we(r, "readonly"));
895
+ })), w = F(!1), X = F(null), f = F(!1), { isReadOnly: ie } = Ut(we(r, "readonly"));
896
896
  ke(
897
897
  () => r.disabled,
898
898
  () => {
@@ -1008,7 +1008,7 @@ const da = { class: "b-date-range-picker" }, ca = { class: "b-date-range-picker_
1008
1008
  H("div", {
1009
1009
  onKeydown: $e(Te, ["enter"])
1010
1010
  }, [
1011
- W(b(Nt), {
1011
+ W(b(kt), {
1012
1012
  ref_key: "inputContainerRef",
1013
1013
  ref: X,
1014
1014
  "always-combobox-is-input": "",
@@ -1100,7 +1100,7 @@ const da = { class: "b-date-range-picker" }, ca = { class: "b-date-range-picker_
1100
1100
  _: 1
1101
1101
  }, 8, ["id", "open", "target-element", "aria-label"])) : B("", !0)
1102
1102
  ])), [
1103
- [b(Ut), L]
1103
+ [b(Nt), L]
1104
1104
  ]);
1105
1105
  }
1106
1106
  }), Ba = /* @__PURE__ */ lt(Da, [["__scopeId", "data-v-09f3b2b1"]]);
@@ -1111,4 +1111,4 @@ export {
1111
1111
  xt as b,
1112
1112
  Re as i
1113
1113
  };
1114
- //# sourceMappingURL=date-range-picker.B6UKl1_N.js.map
1114
+ //# sourceMappingURL=date-range-picker.D7IwIR5V.js.map