@adyen/bento-vue2 1.74.0 → 1.75.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/dist/@types/index.d.ts +1693 -616
  2. package/dist/assets/accordion-item.css +1 -1
  3. package/dist/assets/action-bar.css +1 -1
  4. package/dist/assets/base-modal.css +1 -1
  5. package/dist/assets/button-actions.css +1 -1
  6. package/dist/assets/card.css +1 -1
  7. package/dist/assets/data-grid-template.css +1 -1
  8. package/dist/assets/data-grid.css +1 -1
  9. package/dist/assets/dialog-page.css +1 -1
  10. package/dist/assets/dropdown-tag.css +1 -1
  11. package/dist/assets/file-uploader.css +1 -1
  12. package/dist/assets/filter-bar.css +1 -1
  13. package/dist/assets/input-field-password.css +1 -1
  14. package/dist/assets/input-field.css +1 -1
  15. package/dist/assets/inspector.css +1 -1
  16. package/dist/assets/modal-fullscreen.css +1 -1
  17. package/dist/assets/selection-card-group.css +1 -1
  18. package/dist/assets/sidepanel.css +1 -1
  19. package/dist/assets/use-cached-selected-values.css +1 -1
  20. package/dist/checkbox.js +2 -2
  21. package/dist/chunks/{checkbox-group.DETXTJqI.js → checkbox-group.CtNVRcmP.js} +2 -2
  22. package/dist/chunks/{checkbox-group.DETXTJqI.js.map → checkbox-group.CtNVRcmP.js.map} +1 -1
  23. package/dist/chunks/{checkbox.BPtHAAEa.js → checkbox.nyUc0gLb.js} +18 -18
  24. package/dist/chunks/{checkbox.BPtHAAEa.js.map → checkbox.nyUc0gLb.js.map} +1 -1
  25. package/dist/chunks/{code-snippet.VtrsOTEC.js → code-snippet.DFf3KMSi.js} +2 -2
  26. package/dist/chunks/{code-snippet.VtrsOTEC.js.map → code-snippet.DFf3KMSi.js.map} +1 -1
  27. package/dist/chunks/{currency.DDB4G_A8.js → currency.AvvbekWO.js} +15 -14
  28. package/dist/chunks/{currency.DDB4G_A8.js.map → currency.AvvbekWO.js.map} +1 -1
  29. package/dist/chunks/{data-grid.DN9xml8y.js → data-grid.D5fTwSvx.js} +1249 -1212
  30. package/dist/chunks/data-grid.D5fTwSvx.js.map +1 -0
  31. package/dist/chunks/{date-picker.DoYYzWcA.js → date-picker.BLii86mM.js} +12 -12
  32. package/dist/chunks/{date-picker.DoYYzWcA.js.map → date-picker.BLii86mM.js.map} +1 -1
  33. package/dist/chunks/{date-range-picker.C_pJ8yH5.js → date-range-picker.Btgdly1q.js} +14 -14
  34. package/dist/chunks/{date-range-picker.C_pJ8yH5.js.map → date-range-picker.Btgdly1q.js.map} +1 -1
  35. package/dist/chunks/dropdown-tag.CpvU8eSZ.js +260 -0
  36. package/dist/chunks/dropdown-tag.CpvU8eSZ.js.map +1 -0
  37. package/dist/chunks/{dropdown.BOvtYKXS.js → dropdown.RxD2TqnP.js} +14 -14
  38. package/dist/chunks/{dropdown.BOvtYKXS.js.map → dropdown.RxD2TqnP.js.map} +1 -1
  39. package/dist/chunks/es6.MoTTyETW.js.map +1 -1
  40. package/dist/chunks/{filter-bar.DzHJi42d.js → filter-bar.DfTOz6xI.js} +9 -9
  41. package/dist/chunks/filter-bar.DfTOz6xI.js.map +1 -0
  42. package/dist/chunks/{header-with-views.t5Fr63SD.js → header-with-views.AKprhFPj.js} +3 -3
  43. package/dist/chunks/{header-with-views.t5Fr63SD.js.map → header-with-views.AKprhFPj.js.map} +1 -1
  44. package/dist/chunks/{input-field-password.Dm3HYonF.js → input-field-password.CSfXqEbT.js} +47 -38
  45. package/dist/chunks/input-field-password.CSfXqEbT.js.map +1 -0
  46. package/dist/chunks/{input-field-phone-number.bZauIuHJ.js → input-field-phone-number.oa4hXQdK.js} +3 -3
  47. package/dist/chunks/{input-field-phone-number.bZauIuHJ.js.map → input-field-phone-number.oa4hXQdK.js.map} +1 -1
  48. package/dist/chunks/input-field.DdQu3b1-.js +161 -0
  49. package/dist/chunks/input-field.DdQu3b1-.js.map +1 -0
  50. package/dist/chunks/{pagination.CKD9FDrA.js → pagination.C0YW_A_o.js} +2 -2
  51. package/dist/chunks/{pagination.CKD9FDrA.js.map → pagination.C0YW_A_o.js.map} +1 -1
  52. package/dist/chunks/radio-group.AcYMFudv.js.map +1 -1
  53. package/dist/chunks/{rich-text-editor.BZgQ578S.js → rich-text-editor.CKWtFjkF.js} +2 -2
  54. package/dist/chunks/{rich-text-editor.BZgQ578S.js.map → rich-text-editor.CKWtFjkF.js.map} +1 -1
  55. package/dist/chunks/{search-bar.c-w7Uky2.js → search-bar.DJVfPz-f.js} +3 -3
  56. package/dist/chunks/{search-bar.c-w7Uky2.js.map → search-bar.DJVfPz-f.js.map} +1 -1
  57. package/dist/chunks/{secondary-nav.D69COlqF.js → secondary-nav.BFiTQaag.js} +2 -2
  58. package/dist/chunks/{secondary-nav.D69COlqF.js.map → secondary-nav.BFiTQaag.js.map} +1 -1
  59. package/dist/chunks/{selection-card-group.8UIir78G.js → selection-card-group.D4rcUyvV.js} +58 -120
  60. package/dist/chunks/{selection-card-group.8UIir78G.js.map → selection-card-group.D4rcUyvV.js.map} +1 -1
  61. package/dist/chunks/textarea.CIQuLWQ8.js.map +1 -1
  62. package/dist/chunks/{use-cached-selected-values.IsfhJHxQ.js → use-cached-selected-values.BZd3CTeP.js} +334 -314
  63. package/dist/chunks/use-cached-selected-values.BZd3CTeP.js.map +1 -0
  64. package/dist/code-snippet.js +1 -1
  65. package/dist/currency.js +1 -1
  66. package/dist/data-grid.js +1 -1
  67. package/dist/date-picker.js +1 -1
  68. package/dist/date-range-picker.js +1 -1
  69. package/dist/dropdown.js +3 -3
  70. package/dist/filter-bar.js +1 -1
  71. package/dist/header-with-views.js +1 -1
  72. package/dist/index.js +221 -220
  73. package/dist/input-field-password.js +1 -1
  74. package/dist/input-field-phone-number.js +1 -1
  75. package/dist/input-field.js +1 -1
  76. package/dist/internal.js +1 -1
  77. package/dist/pagination.js +1 -1
  78. package/dist/rich-text-editor.js +1 -1
  79. package/dist/search-bar.js +2 -2
  80. package/dist/secondary-nav.js +1 -1
  81. package/dist/selection-card.js +1 -1
  82. package/dist/styles/bento-dark.css +1 -1
  83. package/dist/styles/bento-light.css +1 -1
  84. package/dist/styles/bento.css +1 -1
  85. package/dist/styles/legacy.css +1 -1
  86. package/dist/styles/styleguide.css +1 -1
  87. package/dist/web-types.json +686 -1392
  88. package/package.json +6 -6
  89. package/dist/chunks/data-grid.DN9xml8y.js.map +0 -1
  90. package/dist/chunks/dropdown-tag.DBnurtCQ.js +0 -245
  91. package/dist/chunks/dropdown-tag.DBnurtCQ.js.map +0 -1
  92. package/dist/chunks/filter-bar.DzHJi42d.js.map +0 -1
  93. package/dist/chunks/input-field-password.Dm3HYonF.js.map +0 -1
  94. package/dist/chunks/input-field.D52XYEzU.js +0 -157
  95. package/dist/chunks/input-field.D52XYEzU.js.map +0 -1
  96. package/dist/chunks/use-cached-selected-values.IsfhJHxQ.js.map +0 -1
@@ -2,14 +2,14 @@ import { ref as f, computed as D, defineComponent as K, toRef as x, watch as W,
2
2
  import { f as N, s as U, b as z } from "./calendar.EfqJlztU.js";
3
3
  import { h as G } from "./button-actions.B81vY51z.js";
4
4
  import { B as H } from "./typography.hlOAxsEn.js";
5
- import { D as J } from "./dropdown-default-textbox.yLeN0E2z.js";
6
- import { d as Q } from "./debounce.DUTu11PS.js";
7
- import { D as E, v as X, f as Z } from "./date-format.B8RU7D42.js";
5
+ import { d as J } from "./debounce.DUTu11PS.js";
6
+ import { D as E, v as Q, f as X } from "./date-format.B8RU7D42.js";
8
7
  import { g as v } from "./generate-uid.NJ8tVoha.js";
9
8
  import { u as F } from "./index.B6WW_F-J.js";
10
- import { g as $ } from "./get-date-locale.CAyOIbcp.js";
11
- import { u as ee } from "./use-form-layout-loading.D3lALhtC.js";
9
+ import { g as Z } from "./get-date-locale.CAyOIbcp.js";
10
+ import { u as $ } from "./use-form-layout-loading.D3lALhtC.js";
12
11
  import "./index.Cl4_42j5.js";
12
+ import { D as ee } from "./dropdown-default-textbox.yLeN0E2z.js";
13
13
  import { B as ae } from "./directive.Cbdox5VL.js";
14
14
  import { F as te, E as re } from "./field-label.Auq-Pzho.js";
15
15
  import { n as le } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -37,7 +37,7 @@ const ne = {
37
37
  placeholder: e
38
38
  }) => {
39
39
  var b;
40
- const { locale: r, t: m } = F(), c = $(), p = f((b = o.value) == null ? void 0 : b.toDateString());
40
+ const { locale: r, t: m } = F(), c = Z(), p = f((b = o.value) == null ? void 0 : b.toDateString());
41
41
  return {
42
42
  // Values
43
43
  dateDisplayValue: D(() => {
@@ -89,7 +89,7 @@ const ie = {
89
89
  },
90
90
  emits: [d.INPUT],
91
91
  setup(o, { emit: a }) {
92
- const t = o, e = 1e3, { t: r } = F(), m = v("bento-date-picker-container"), c = v("bento-date-picker-label"), p = v("bento-date-picker-description"), k = v("bento-date-picker-error"), y = v("bento-date-picker-date-error"), b = D(() => t.label || r("datePicker", { name: m })), i = f(null), _ = f(null), n = f(!1), s = f(!1), O = f(void 0), { isReadOnly: A } = ee(x(t, "readonly"));
92
+ const t = o, e = 1e3, { t: r } = F(), m = v("bento-date-picker-container"), c = v("bento-date-picker-label"), p = v("bento-date-picker-description"), k = v("bento-date-picker-error"), y = v("bento-date-picker-date-error"), b = D(() => t.label || r("datePicker", { name: m })), i = f(null), _ = f(null), n = f(!1), s = f(!1), O = f(void 0), { isReadOnly: A } = $(x(t, "readonly"));
93
93
  W(
94
94
  () => t.disabled,
95
95
  (l) => {
@@ -114,21 +114,21 @@ const ie = {
114
114
  }, V = async () => {
115
115
  n.value && (n.value = !1, u.value = null), a(d.INPUT, null);
116
116
  }, q = (l) => {
117
- X(l);
117
+ Q(l);
118
118
  }, C = (l) => {
119
119
  if (l.length < 10)
120
120
  return;
121
121
  /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(l) && B(new Date(l)) ? (n.value = !1, a(d.INPUT, new Date(l))) : l && (n.value = !0, a(d.INPUT, null));
122
- }, w = Q(C, e);
122
+ }, w = J(C, e);
123
123
  return { __sfc: !0, DEBOUNCE_TIME: e, props: t, emit: a, t: r, datePickerContainerId: m, labelId: c, descriptionId: p, errorId: k, dateErrorId: y, popoverAriaLabel: b, calendarContainerRef: i, inputContainerRef: _, isDateIncorrect: n, isDatePickerOpen: s, initialFocusOnDatePickerOpen: O, isReadOnly: A, isMonthVariant: T, dateDisplayValue: L, textInputValue: u, formatTextInputDisplayValue: I, dateErrorText: g, descriptionConditionalClasses: M, ariaDescribedBy: h, isDateEnabled: B, closeDatePicker: R, openDatePicker: S, onDateSelected: Y, clearDatePickerValue: V, onDateKeyDown: q, validateDate: C, validateDateDebounced: w, onDateInputChange: (l) => {
124
- u.value = Z(l), s.value ? w(u.value) : C(u.value);
124
+ u.value = X(l), s.value ? w(u.value) : C(u.value);
125
125
  }, onSpaceBarOrEnter: async (l) => {
126
126
  var P;
127
127
  s.value || (l.preventDefault(), S(), await j(), t.value || (I(/* @__PURE__ */ new Date()), a(d.INPUT, /* @__PURE__ */ new Date())), O.value = ((P = i.value) == null ? void 0 : P.$refs.calendarRef[0].focusOnDate(
128
128
  t.variant === "month" ? U(t.value) : t.value,
129
129
  !0
130
130
  )) ?? void 0);
131
- }, BentoPopover: G, BentoTypography: H, Calendar: z, ErrorMessage: re, FieldLabel: te, DropdownInputDefault: J, vBentoClickOutsideDirective: ae };
131
+ }, BentoPopover: G, BentoTypography: H, Calendar: z, ErrorMessage: re, FieldLabel: te, DropdownInputDefault: ee, vBentoClickOutsideDirective: ae };
132
132
  }
133
133
  });
134
134
  var ue = function() {
@@ -155,4 +155,4 @@ export {
155
155
  Re as B,
156
156
  d as a
157
157
  };
158
- //# sourceMappingURL=date-picker.DoYYzWcA.js.map
158
+ //# sourceMappingURL=date-picker.BLii86mM.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.DoYYzWcA.js","sources":["../../src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../src/components/date-picker/date-picker.types.ts","../../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 = defineProps({\n description: { default: undefined },\n disabled: { type: Boolean, default: false },\n errorMessage: { default: null },\n label: { default: undefined },\n optional: { type: Boolean, default: false },\n placeholder: { default: null },\n readonly: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n tooltipText: { default: null },\n defaultDisplayMonth: { default: null },\n firstDayOfWeek: { default: 1 },\n isDateDisabled: { default: undefined },\n min: { default: null },\n max: { default: null },\n value: { default: null },\n variant: { default: undefined }\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","locales","getDateLocale","textInputValue","ref","_a","computed","format","DateFormat","dateToFormat","date","startOfMonth","BentoDatePickerEvent","BentoDatePickerEvent2","__default__","messages","DEBOUNCE_TIME","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","props","calendarContainerRef","inputContainerRef","isDatePickerOpen","initialFocusOnDatePickerOpen","isReadOnly","useFormLayoutFieldLoading","toRef","watch","disabled","dateDisplayValue","formatTextInputDisplayValue","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","isDateEnabled","closeDatePicker","openDatePicker","onDateSelected","selectedDate","emit","clearDatePickerValue","onDateKeyDown","event","validateDateInput","validateDate","stringDate","validateDateDebounced","debounce","formatDateInputValue","nextTick"],"mappings":"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"}
1
+ {"version":3,"file":"date-picker.BLii86mM.js","sources":["../../src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../src/components/date-picker/date-picker.types.ts","../../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 = defineProps({\n description: { default: undefined },\n disabled: { type: Boolean, default: false },\n errorMessage: { default: null },\n label: { default: undefined },\n optional: { type: Boolean, default: false },\n placeholder: { default: null },\n readonly: { type: Boolean, default: false },\n required: { type: Boolean, default: false },\n tooltipText: { default: null },\n defaultDisplayMonth: { default: null },\n firstDayOfWeek: { default: 1 },\n isDateDisabled: { default: undefined },\n min: { default: null },\n max: { default: null },\n value: { default: null },\n variant: { default: undefined }\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","locales","getDateLocale","textInputValue","ref","_a","computed","format","DateFormat","dateToFormat","date","startOfMonth","BentoDatePickerEvent","BentoDatePickerEvent2","__default__","messages","DEBOUNCE_TIME","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","props","calendarContainerRef","inputContainerRef","isDatePickerOpen","initialFocusOnDatePickerOpen","isReadOnly","useFormLayoutFieldLoading","toRef","watch","disabled","dateDisplayValue","formatTextInputDisplayValue","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","isDateEnabled","closeDatePicker","openDatePicker","onDateSelected","selectedDate","emit","clearDatePickerValue","onDateKeyDown","event","validateDateInput","validateDate","stringDate","validateDateDebounced","debounce","formatDateInputValue","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,GACAC,IAAAC,EAAA,GAEAC,IAAAC,GAAAC,IAAAX,EAAA,UAAA,gBAAAW,EAAA,cAAA;AA0CA,SAAA;AAAA;AAAA,IAAO,kBAxCPC,EAAA,MAAA;;AAEI,aAAAX,EAAA,QACIQ,EAAA,QAIJT,EAAA,QAMAa;AAAA,QAAOb,EAAA;AAAA,QACaE,KAAA,QAAAA,EAAA,QAAAY,EAAA,kBAAAA,EAAA;AAAA,QACgD;AAAA,UAChE,QAAAP,GAAAI,IAAAP,EAAA,UAAA,gBAAAO,EAAA,UAAA,GAAA,EAAA,KAAAJ,EAAA;AAAA,QAC8D;AAAA,MAC9D,KAVAJ,KAAA,gBAAAA,EAAA,UAAAE,EAAA,YAAA;AAAA,IAWJ,CAAA;AAAA,IAuBA,gBAAAI;AAAA;AAAA,IACA,6BAjBJ,CAAAM,IAAAf,EAAA,UAAA;;AAEI,UAAAC,EAAA;AACI;AAGJ,YAAAe,IAAAd,KAAA,QAAAA,EAAA,QAAAe,EAAAF,CAAA,IAAAA;AACA,MAAAN,EAAA,QAAAM,IAAAF,EAAAG,GAAAF,EAAA,yBAAA;AAAA,QACuD,QAAAP,GAAAI,IAAAP,EAAA,UAAA,gBAAAO,EAAA,UAAA,GAAA,EAAA,KAAAJ,EAAA;AAAA,MACa,CAAA,IAAA;AAAA,IAE9D;AAAA,EASN;AAER;AC7DY,IAAAW,IAAA,kBAAAC,OACRA,EAAA,QAAA,SADQA,IAAAD,KAAA,CAAA,CAAA;ACiVR,MAAAE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;;;;;;;;;;iBAhOAC,IAAA,KAuBA,EAAA,GAAAjB,EAAA,IAAAC,EAAA,GACAiB,IAAAC,EAAA,6BAAA,GACAC,IAAAD,EAAA,yBAAA,GACAE,IAAAF,EAAA,+BAAA,GACAG,IAAAH,EAAA,yBAAA,GACAI,IAAAJ,EAAA,8BAAA,GACAK,IAAAjB,EAAA,MAAAkB,EAAA,SAAAzB,EAAA,cAAA,EAAA,MAAAkB,EAAA,CAAA,CAAA,GAGAQ,IAAArB,EAAA,IAAA,GACAsB,IAAAtB,EAAA,IAAA,GAGAT,IAAAS,EAAA,EAAA,GACAuB,IAAAvB,EAAA,EAAA,GACAwB,IAAAxB,EAAA,MAAA,GACA,EAAA,YAAAyB,EAAA,IAAAC,EAAAC,EAAAP,GAAA,UAAA,CAAA;AAEA,IAAAQ;AAAA,MAAA,MAAAR,EAAA;AAAA,MACgB,CAAAS,MAAA;AAGR,QAAAA,KAAAN,EAAA,UACIA,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAGJ,UAAA/B,IAAAU,EAAA,MAAAkB,EAAA,YAAA,OAAA,GAEA,EAAA,kBAAAU,GAAA,gBAAA/B,GAAA,6BAAAgC,EAAA,IAAA1C,GAAA;AAAA,MAA0G,iBAAAsC,EAAAP,GAAA,OAAA;AAAA,MACjE,iBAAA7B;AAAA,MACrC,gBAAAC;AAAA,MACA,aAAAmC,EAAAP,GAAA,aAAA;AAAA,IACuC,CAAA,GAG3CY,IAAA9B,EAAA,MACIkB,EAAA,kBAAArB,EAAA,SAAAqB,EAAA,eAAA,IAAA,KAAArB,EAAA,KAAA,CAAA,KAAA,CAAAwB,EAAA,QAMI5B,EAAA,4BAAA,IAGJJ,EAAA,QAAAI,EAAA,sBAAA,IAAA,IAA2D,GAG/DsC,IAAA/B,EAAA,OAAA;AAAA,MAAsD,qCAAAkB,EAAA,gBAAAY,EAAA;AAAA,IACuB,EAAA,GAG7EE,IAAAhC;AAAA,MAAwB,MAAA,GAAAkB,EAAA,cAAAJ,IAAA,EAAA,IAAAI,EAAA,eAAAH,IAAA,EAAA,IAAAe,EAAA,QAAAd,IAAA,EAAA,GAAA,KAAA,KAAA;AAAA,IAIH,GAGrBiB,IAAA,CAAA7B,MAEIc,EAAA,OAAAd,KAAAc,EAAA,OAAAA,EAAA,OAAAd,KAAAc,EAAA,MACI,KAIJA,EAAA,iBACI,CAAAA,EAAA,eAAAd,CAAA,IAGJ,IAGJ8B,IAAA,MAAA;AACI,MAAAb,EAAA,QAAA;AAAA,IAAyB,GAG7Bc,IAAA,MAAA;AACI,MAAAd,EAAA,QAAA,IAEAQ,EAAA;AAAA,IAA4B,GAGhCO,IAAA,CAAAC,MAAA;AAEI,MAAAhD,EAAA,QAAA,IAEA6C,EAAA,GACAI,EAAAhC,EAAA,OAAA+B,CAAA;AAAA,IAA6C,GAGjDE,IAAA,YAAA;AACI,MAAAlD,EAAA,UACIA,EAAA,QAAA,IACAQ,EAAA,QAAA,OAEJyC,EAAAhC,EAAA,OAAA,IAAA;AAAA,IAAqC,GAGzCkC,IAAA,CAAAC,MAAA;AACI,MAAAC,EAAAD,CAAA;AAAA,IAAuB,GAG3BE,IAAA,CAAAC,MAAA;AAEI,UAAAA,EAAA,SAAA;AACI;AAMJ,MAFA,qDACA,KAAAA,CAAA,KAAAX,EAAA,IAAA,KAAAW,CAAA,CAAA,KAEIvD,EAAA,QAAA,IACAiD,EAAAhC,EAAA,OAAA,IAAA,KAAAsC,CAAA,CAAA,KAAqDA,MAGrDvD,EAAA,QAAA,IACAiD,EAAAhC,EAAA,OAAA,IAAA;AAAA,IACJ,GAGJuC,IAAAC,EAAAH,GAAAjC,CAAA;4oBAEA,CAAAkC,MAAA;AACI,MAAA/C,EAAA,QAAAkD,EAAAH,CAAA,GAEAvB,EAAA,QACIwB,EAAAhD,EAAA,KAAA,IAEA8C,EAAA9C,EAAA,KAAA;AAAA,IACJ,sBAUJ,OAAA4C,MAAA;;AACI,MAAApB,EAAA,UAGAoB,EAAA,eAAA,GAEAN,EAAA,GAGA,MAAAa,EAAA,GAGA9B,EAAA,UAEIW,EAAA,oBAAA,KAAA,CAAA,GACAS,EAAAhC,EAAA,OAAA,oBAAA,KAAA,CAAA,IAIJgB,EAAA,UAAAvB,IAAAoB,EAAA,UAAA,gBAAApB,EAAA,MAAA,YAAA,GAAA;AAAA,QACqDmB,EAAA,YAAA,UAAAb,EAAAa,EAAA,KAAA,IAAAA,EAAA;AAAA,QACiB;AAAA,YAC9D;AAAA,IACC;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -2,17 +2,17 @@ import { reactive as ve, defineComponent as Ye, ref as C, computed as b, onMount
2
2
  import { B as st } from "./divider.CFbtmKeQ.js";
3
3
  import { h as it, B as lt } from "./button-actions.B81vY51z.js";
4
4
  import { B as Qe, d as ot } from "./typography.hlOAxsEn.js";
5
- import { D as ut } from "./dropdown-default-textbox.yLeN0E2z.js";
6
5
  import { e as N, a as he, g as Re } from "./get-date-locale.CAyOIbcp.js";
7
6
  import { g as oe } from "./generate-uid.NJ8tVoha.js";
8
7
  import { u as Ie } from "./index.B6WW_F-J.js";
9
- import { e as $e, t as se, g as ue, i as U, h as F, j as Oe, k as dt, l as we, m as ct, s as Me, n as Dt, o as Ce, b as K, u as mt, f as re } from "./calendar.EfqJlztU.js";
10
- import { f as Fe, v as ft, D as E } from "./date-format.B8RU7D42.js";
8
+ import { e as $e, t as se, g as ue, i as U, h as F, j as Oe, k as ut, l as we, m as dt, s as Me, n as ct, o as Ce, b as K, u as Dt, f as re } from "./calendar.EfqJlztU.js";
9
+ import { f as Fe, v as mt, D as E } from "./date-format.B8RU7D42.js";
11
10
  import { r as M, t as j } from "./index.BrH1t1iu.js";
12
- import { u as vt } from "./use-form-layout-loading.D3lALhtC.js";
11
+ import { u as ft } from "./use-form-layout-loading.D3lALhtC.js";
13
12
  import "./index.Cl4_42j5.js";
14
- import { B as gt } from "./input-field.D52XYEzU.js";
15
- import { B as pt } from "./dropdown.BOvtYKXS.js";
13
+ import { D as vt } from "./dropdown-default-textbox.yLeN0E2z.js";
14
+ import { B as gt } from "./input-field.DdQu3b1-.js";
15
+ import { B as pt } from "./dropdown.RxD2TqnP.js";
16
16
  import { B as yt } from "./segmented-control.Cma_nu0G.js";
17
17
  import { d as De } from "./debounce.DUTu11PS.js";
18
18
  import { u as Tt } from "./use-has-slot.C9lQZ6nz.js";
@@ -99,13 +99,13 @@ const Mt = ({
99
99
  c = F(o.earliest);
100
100
  else {
101
101
  const p = Oe(c, { weekStartsOn: t });
102
- U(c, p) || (c = F(dt(we(c, { weekStartsOn: t }), 1)));
102
+ U(c, p) || (c = F(ut(we(c, { weekStartsOn: t }), 1)));
103
103
  }
104
104
  if (o.latest)
105
105
  f = N(o.latest);
106
106
  else {
107
107
  const p = we(f, { weekStartsOn: t });
108
- U(f, p) || (f = N(ct(Oe(f, { weekStartsOn: t }), 1)));
108
+ U(f, p) || (f = N(dt(Oe(f, { weekStartsOn: t }), 1)));
109
109
  }
110
110
  }
111
111
  if ((o == null ? void 0 : o.type) === "monthly") {
@@ -119,7 +119,7 @@ const Mt = ({
119
119
  f = N(o.latest);
120
120
  else {
121
121
  const p = he(f);
122
- U(f, p) || (f = he(Dt(f, 1)));
122
+ U(f, p) || (f = he(ct(f, 1)));
123
123
  }
124
124
  }
125
125
  if ((o == null ? void 0 : o.type) === "quarterly") {
@@ -374,7 +374,7 @@ const Ft = /[\d]/, At = /^\d{2}$/, xt = /^\d{2}:\d{2}$/, Ut = (t) => {
374
374
  adjustEndDateInputForMonthly: ae,
375
375
  adjustStartDateInputForQuarterly: ne,
376
376
  adjustEndDateInputForQuarterly: J
377
- } = mt(t.firstDayOfWeek), { savedRanges: B, saveRange: H, resetSavedRanges: O } = Ct(), m = (a) => {
377
+ } = Dt(t.firstDayOfWeek), { savedRanges: B, saveRange: H, resetSavedRanges: O } = Ct(), m = (a) => {
378
378
  var i;
379
379
  return a ? re(a, E.NUMERIC_DATE_YEAR_FIRST, {
380
380
  locale: c[(i = r.value) == null ? void 0 : i.substring(0, 2)] || c.enUS
@@ -529,7 +529,7 @@ const Ft = /[\d]/, At = /^\d{2}$/, xt = /^\d{2}:\d{2}$/, Ut = (t) => {
529
529
  }, qe), Ke = (a) => {
530
530
  l.endDate = Fe(a), We(l.endDate);
531
531
  }, ze = (a) => {
532
- ft(a);
532
+ mt(a);
533
533
  }, Je = De((a) => {
534
534
  if (le(a, t.dateFormData.startDate)) {
535
535
  Y.value = !1, s.startDate = P(s.startDate, a);
@@ -784,7 +784,7 @@ const $t = {
784
784
  timeDifference: I
785
785
  }
786
786
  };
787
- })), _ = C(!1), te = C(null), h = C(!1), { isReadOnly: y } = vt(ye(n, "readonly"));
787
+ })), _ = C(!1), te = C(null), h = C(!1), { isReadOnly: y } = ft(ye(n, "readonly"));
788
788
  Te(
789
789
  () => n.disabled,
790
790
  () => {
@@ -886,7 +886,7 @@ const $t = {
886
886
  E.HOUR_MINUTE_SECONDS
887
887
  ), g.endTime = I(D.endDate, E.HOUR_MINUTE_SECONDS), m.value = D;
888
888
  }
889
- }, BentoButtonActions: lt, BentoButtonActionsLayout: bt, BentoDivider: st, BentoPopover: it, BentoTypography: Qe, DateRangePickerCalendar: Yt, DropdownInputDefault: ut, ErrorMessage: It, FieldLabel: Rt, vBentoClickOutsideDirective: _t };
889
+ }, BentoButtonActions: lt, BentoButtonActionsLayout: bt, BentoDivider: st, BentoPopover: it, BentoTypography: Qe, DateRangePickerCalendar: Yt, DropdownInputDefault: vt, ErrorMessage: It, FieldLabel: Rt, vBentoClickOutsideDirective: _t };
890
890
  }
891
891
  });
892
892
  var Ht = function() {
@@ -914,4 +914,4 @@ export {
914
914
  St as b,
915
915
  me as i
916
916
  };
917
- //# sourceMappingURL=date-range-picker.C_pJ8yH5.js.map
917
+ //# sourceMappingURL=date-range-picker.Btgdly1q.js.map