@adyen/bento-vue3 1.44.0 → 1.45.0

package/dist/chunks/date-range-picker.Bna_2pBL.js

@@ -0,0 +1,1038 @@
+import { reactive as ue, defineComponent as Ve, computed as R, ref as _, onMounted as Ye, toRaw as ce, resolveComponent as k, createElementBlock as pe, openBlock as w, createElementVNode as N, createCommentVNode as F, renderSlot as Se, createBlock as L, createVNode as V, withCtx as $, createTextVNode as J, normalizeClass as fe, toRef as De, watch as Ee, resolveDirective as ta, withDirectives as na, withKeys as ra, toDisplayString as oa, createSlots as sa } from "vue";
+import { B as la } from "./divider.DwBC4bpr.js";
+import { B as ia } from "./popover.3KG1IoYE.js";
+import { B as Ke, d as da } from "./typography.DN5eC5ch.js";
+import { r as te, t as ae, g as ve } from "./get-date-locale.BN8xEjY0.js";
+import { g as re } from "./generate-uid.NJ8tVoha.js";
+import { u as ge } from "./i18n.WMYWtwxB.js";
+import { t as ye, f as se } from "./date.DeaBl297.js";
+import { f as he, v as ua, D as S } from "./date-input.BqBdAO1E.js";
+import { u as ma } from "./use-form-layout-loading.D3lALhtC.js";
+import { B as Da } from "./directive.O3yEdalv.js";
+import "./events.FNmSWp_P.js";
+import { B as ca } from "./input-field.3PUv6XC3.js";
+import { B as pa } from "./dropdown.CZDXXpKe.js";
+import { B as fa } from "./segmented-control.BIwBQ8i3.js";
+import { d as ie } from "./debounce.DUTu11PS.js";
+import { u as va } from "./use-has-slot.B7eQSabc.js";
+import { s as oe, c as we, i as ee, d as ga, e as Oe, f as ya, g as Me, h as Ta, j as ba, a as z, u as Ra } from "./calendar.1qqtC8ba.js";
+import { e as H } from "./index.DPafeRJa.js";
+import { e as Ae } from "./index.CrhTVr5J.js";
+import { _ as qe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { D as Ia } from "./dropdown-default-textbox.ipIFhyWZ.js";
+import { F as ka, E as Sa } from "./error-message.BVE3JdTq.js";
+import { B as Ea, c as ha } from "./button-actions.CShVMUOC.js";
+import "../assets/date-range-picker.css";
+function Ce(e, t) {
+  te(2, arguments);
+  var l = ae(e), u = ae(t);
+  return l.getTime() === u.getTime();
+}
+function _e(e) {
+  te(1, arguments);
+  var t = ae(e);
+  return t.setMilliseconds(0), t;
+}
+function Fe(e, t) {
+  te(2, arguments);
+  var l = _e(e), u = _e(t);
+  return l.getTime() === u.getTime();
+}
+function wa(e, t) {
+  te(2, arguments);
+  var l = ae(e), u = ye(t);
+  return l.setHours(u), l;
+}
+function Oa(e, t) {
+  te(2, arguments);
+  var l = ae(e), u = ye(t);
+  return l.setMinutes(u), l;
+}
+function Ma(e, t) {
+  te(2, arguments);
+  var l = ae(e), u = ye(t);
+  return l.setSeconds(u), l;
+}
+const Aa = ({
+  firstDayOfWeek: e,
+  min: t,
+  max: l
+}) => ({ getGranularCalendarLimits: (i) => {
+  let c = oe(t), n = H(l);
+  if ((i == null ? void 0 : i.type) === "weekly") {
+    if (i.earliest)
+      c = oe(i.earliest);
+    else {
+      const d = we(c, { weekStartsOn: e });
+      ee(c, d) || (c = oe(ga(Oe(c, { weekStartsOn: e }), 1)));
+    }
+    if (i.latest)
+      n = H(i.latest);
+    else {
+      const d = Oe(n, { weekStartsOn: e });
+      ee(n, d) || (n = H(ya(we(n, { weekStartsOn: e }), 1)));
+    }
+  }
+  if ((i == null ? void 0 : i.type) === "monthly") {
+    if (i.earliest)
+      c = oe(i.earliest);
+    else {
+      const d = Me(c);
+      ee(c, d) || (c = Me(Ta(c, 1)));
+    }
+    if (i.latest)
+      n = H(i.latest);
+    else {
+      const d = Ae(n);
+      ee(n, d) || (n = Ae(ba(n, 1)));
+    }
+  }
+  return { min: c, max: n };
+} }), Ca = () => {
+  const e = ue({
+    daily: null,
+    weekly: null,
+    monthly: null
+  });
+  return {
+    savedRanges: e,
+    saveRange: (u, i) => {
+      e[u] = i;
+    },
+    resetSavedRanges: () => {
+      e.daily = null, e.weekly = null, e.monthly = null;
+    }
+  };
+};
+var f = /* @__PURE__ */ ((e) => (e.CUSTOM_RANGE = "custom-range", e.INPUT = "input", e.ERROR = "error", e.FORM_DATE = "form-date", e.START_DATE_SELECTED = "start-date-selected", e))(f || {});
+const _a = /[\d]/, Fa = /^\d{2}$/, Ua = /^\d{2}:\d{2}$/, Ba = (e) => {
+  const { selectionStart: t } = e.target, l = _a.test(e.key) || e.key === "Backspace", u = [1, 2, 4, 5].includes(t) && e.key === ":";
+  !l && !u && e.preventDefault();
+}, Ue = (e) => {
+  if (!e)
+    return e;
+  let t = e;
+  if (t.length === 1 && parseInt(e, 10) > 2)
+    return `0${t}:`;
+  const [l, u] = t.slice(-2);
+  return [2, 5].includes(t.length) && u === ":" && (t = `${t.slice(0, t.length - 2)}0${l}`), (Fa.test(t) || Ua.test(t)) && (t += ":"), t;
+}, Be = {
+  "en-US": {
+    customRange: "Custom range",
+    daily: "Daily",
+    dateFrom: "Date from",
+    dateTo: "Date to",
+    lastMonth: "Last month",
+    lastSevenDays: "Last 7 days",
+    lastThreeMonths: "Last three months",
+    monthly: "Monthly",
+    timeFrom: "Time from",
+    timeTo: "Time to",
+    weekly: "Weekly"
+  },
+  "pt-BR": {
+    customRange: "Selecione um intervalo personalizado",
+    daily: "Diário",
+    lastMonth: "Último mês",
+    lastSevenDays: "Últimos 7 dias",
+    monthly: "Mensal",
+    weekly: "Semanal"
+  },
+  "ja-JP": {
+    customRange: "カスタム範囲を選択",
+    daily: "毎日",
+    lastMonth: "先月",
+    lastSevenDays: "過去7日間",
+    monthly: "毎月",
+    weekly: "毎週"
+  }
+}, Pe = 300, Ne = "customRange", $e = "daily", Pa = Ve({
+  i18n: { messages: Be },
+  name: "date-range-picker-calendar",
+  components: {
+    BentoDropdown: pa,
+    BentoInputField: ca,
+    BentoSegmentedControl: fa,
+    BentoTypography: Ke,
+    Calendar: z
+  },
+  props: {
+    /**
+     * Allows user to enter time values in the form
+     */
+    allowTimeInput: { type: Boolean, default: !1 },
+    /**
+     * Ranges form persistance data
+     */
+    dateFormData: {
+      type: Object,
+      default: () => ({ startDate: void 0, endDate: void 0, startTime: void 0, endTime: void 0 })
+    },
+    /**
+     * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     */
+    firstDayOfWeek: z.props.firstDayOfWeek,
+    /**
+     * A list of available granularities.
+     * If present, the date picker will display a segmented control to change granularity.
+     */
+    granularities: {
+      type: Array,
+      default: null
+    },
+    /**
+     * Indicate if a date should be disabled or not
+     */
+    isDateDisabled: z.props.isDateDisabled,
+    /**
+     * Set a maximum number of dates to be selectable by the range.
+     */
+    maxRange: z.props.maxRange,
+    /**
+     * Sets a minimum limit for selectable dates - dates before `min` will not be selectable
+     */
+    min: z.props.min,
+    /**
+     * Sets a maximum limit for selectable dates - dates after `max` will not be selectable
+     */
+    max: z.props.max,
+    /**
+     * Number of months rendered on pane
+     */
+    numberOfMonths: z.props.numberOfMonths,
+    /**
+     * Displays the end date's month when the calendar is opened. Defaults to false i.e. the start date's month is displayed.
+     */
+    showEndDateOnOpen: { type: Boolean, default: !1 },
+    /**
+     * Enables the custom range selector.
+     * If provided, must be an array that sets the custom range dropdown items. Items are of the structure:
+     * `label` - label of custom range item.
+     * `value` - a unique key of the custom range item.
+     * `data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.
+     */
+    quickSelectRanges: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * Selected date
+     */
+    value: { type: Object, default: void 0 }
+  },
+  emits: [
+    f.CUSTOM_RANGE,
+    f.INPUT,
+    f.ERROR,
+    f.FORM_DATE,
+    f.START_DATE_SELECTED
+  ],
+  setup(e, { emit: t, slots: l }) {
+    var Re, Ie, ke;
+    const { locale: u, t: i } = ge({ messages: Be }), c = ve(), n = ue({
+      startDate: (Re = e.value) == null ? void 0 : Re.startDate,
+      endDate: (Ie = e.value) == null ? void 0 : Ie.endDate,
+      ...e.granularities ? {
+        granularity: ((ke = e.value) == null ? void 0 : ke.granularity) || $e
+      } : {}
+    }), d = R(
+      () => {
+        var a, r;
+        return ((r = (a = e == null ? void 0 : e.quickSelectRanges) == null ? void 0 : a.find(({ data: o }) => e.allowTimeInput ? Fe(o.startDate, n.startDate) && Fe(o.endDate, n.endDate) : ee(o.startDate, n.startDate) && ee(o.endDate, n.endDate))) == null ? void 0 : r.value) ?? Ne;
+      }
+    ), T = R(() => ({
+      "b-date-range-picker-calendar__form-input-wrapper": e.allowTimeInput
+    })), E = R(() => [
+      { label: i("customRange"), value: Ne },
+      ...e.quickSelectRanges ? e.quickSelectRanges : []
+    ]), O = R(
+      () => {
+        var a;
+        return ((a = e.granularities) == null ? void 0 : a.find(({ type: r }) => r === n.granularity)) || null;
+      }
+    ), v = R(
+      () => {
+        var a;
+        return ((a = e.granularities) == null ? void 0 : a.map(({ type: r, disabled: o }) => ({
+          label: i(r),
+          value: r,
+          disabled: o
+        }))) ?? [];
+      }
+    ), { getGranularCalendarLimits: Y } = Aa(e), m = R(
+      () => e.granularities ? Y(O.value) : { min: oe(e.min), max: H(e.max) }
+    ), {
+      adjustDateForMonthly: K,
+      adjustDateForWeekly: b,
+      adjustStartDateInputForWeekly: j,
+      adjustEndDateInputForWeekly: B,
+      adjustStartDateInputForMonthly: g,
+      adjustEndDateInputForMonthly: U
+    } = Ra(e.firstDayOfWeek), { savedRanges: y, saveRange: Q, resetSavedRanges: ne } = Ca(), I = (a) => a ? se(a, S.NUMERIC_DATE_YEAR_FIRST, {
+      locale: c[u.value.substring(0, 2)] || c.enUS
+    }) : "", M = (a) => a ? se(a, S.HOUR_MINUTE_SECONDS, {
+      locale: c[u.value.substring(0, 2)] || c.enUS
+    }) : "", A = _(!1), q = _(!1), G = _(!1), W = _(!1), s = ue({
+      startDate: e.dateFormData.startDate,
+      endDate: e.dateFormData.endDate,
+      startTime: e.dateFormData.startTime,
+      endTime: e.dateFormData.endTime
+    }), le = (a) => /^(?:[01]\d|2[01234]):(?:[012345]\d):(?:[012345]\d)$/.test(a), C = (a, r) => {
+      if (!r || !le(r))
+        return a;
+      let o = new Date(a);
+      const [D, ea, aa] = r.split(":");
+      return o = wa(o, parseInt(D, 10)), o = Oa(o, parseInt(ea, 10)), o = Ma(o, parseInt(aa, 10)), o;
+    }, Te = (a) => {
+      n.startDate = C(a.startDate, s.startTime), n.endDate = C(a.endDate, s.endTime), e.granularities && ne(), t(f.INPUT, {
+        ...n,
+        range: d.value
+      });
+    }, X = (a) => {
+      const r = (D) => e.min && D <= e.min || e.max && D >= e.max ? !1 : e.isDateDisabled ? !e.isDateDisabled(D) : !0;
+      return /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(a) && r(new Date(a));
+    };
+    Ye(() => {
+      e.dateFormData.startDate && !X(e.dateFormData.startDate) ? A.value = !0 : (A.value = !1, G.value = !1), e.dateFormData.endDate && !X(e.dateFormData.endDate) ? q.value = !0 : (q.value = !1, W.value = !1);
+    });
+    const be = (a) => {
+      var r;
+      s.startDate = I(a), s.startTime ? G.value && (s.startTime = (r = e.dateFormData) == null ? void 0 : r.startTime) : s.startTime = M(a), A.value = !1, G.value = !1, t(f.START_DATE_SELECTED, a);
+    }, p = (a) => {
+      var r;
+      s.endDate = I(a), s.endTime ? W.value && (s.endTime = (r = e.dateFormData) == null ? void 0 : r.endTime) : s.endTime = M(H(a)), q.value = !1, W.value = !1;
+    }, h = (a) => {
+      const r = e.value[a];
+      if (r)
+        return r;
+      if (e.dateFormData[a] && X(e.dateFormData[a]))
+        return new Date(e.dateFormData[a]);
+    }, Z = ie((a) => {
+      var r;
+      if (X(a)) {
+        let o = a;
+        switch (A.value = !1, (r = O.value) == null ? void 0 : r.type) {
+          case "weekly":
+            o = j(
+              a,
+              I,
+              m.value.min,
+              m.value.max
+            ), s.startDate = o;
+            break;
+          case "monthly":
+            o = g(
+              a,
+              I,
+              m.value.min,
+              m.value.max
+            ), s.startDate = o;
+            break;
+        }
+        n.startDate = C(new Date(o), s.startTime);
+        const D = h("endDate");
+        t(f.FORM_DATE, {
+          startDate: new Date(o),
+          endDate: D
+        }), t(f.INPUT, {
+          startDate: new Date(o),
+          endDate: D,
+          range: d.value
+        });
+      } else
+        A.value = !0, t(f.ERROR, { ...s });
+    }, Pe), me = (a) => {
+      s.startDate = he(a), Z(s.startDate);
+    }, Ge = ie((a) => {
+      var r;
+      if (X(a)) {
+        let o = a;
+        switch (q.value = !1, (r = O.value) == null ? void 0 : r.type) {
+          case "weekly":
+            o = B(
+              a,
+              I,
+              m.value.min,
+              m.value.max
+            ), s.endDate = o;
+            break;
+          case "monthly":
+            o = U(
+              a,
+              I,
+              m.value.min,
+              m.value.max
+            ), s.endDate = o;
+            break;
+        }
+        n.endDate = C(new Date(o), s.endTime);
+        const D = h("startDate");
+        t(f.FORM_DATE, {
+          startDate: D,
+          endDate: new Date(a)
+        }), t(f.INPUT, {
+          startDate: D,
+          endDate: new Date(a),
+          range: d.value
+        });
+      } else
+        q.value = !0, t(f.ERROR, { ...s });
+    }, Pe), We = (a) => {
+      s.endDate = he(a), Ge(s.endDate);
+    }, He = (a) => {
+      ua(a);
+    }, je = ie((a) => {
+      if (le(a)) {
+        G.value = !1, n.startDate = C(n.startDate, a);
+        const r = h("endDate");
+        t(f.FORM_DATE, {
+          startDate: new Date(n.startDate),
+          endDate: C(new Date(r), e.dateFormData.endTime),
+          startTime: a,
+          endTime: e.dateFormData.endTime
+        }), t(f.INPUT, {
+          startDate: new Date(n.startDate),
+          endDate: C(new Date(r), e.dateFormData.endTime),
+          range: d.value
+        });
+      } else
+        G.value = !0, t(f.ERROR, { ...s });
+    }), ze = ie((a) => {
+      if (le(a)) {
+        W.value = !1, n.endDate = C(n.endDate, a);
+        const r = h("startDate");
+        t(f.FORM_DATE, {
+          startDate: C(new Date(r), e.dateFormData.startTime),
+          endDate: new Date(n.endDate),
+          startTime: e.dateFormData.startTime,
+          endTime: a
+        }), t(f.INPUT, {
+          startDate: C(new Date(r), e.dateFormData.startTime),
+          endDate: new Date(n.endDate),
+          range: d.value
+        });
+      } else
+        W.value = !0, t(f.ERROR, { ...s });
+    }), Je = (a) => {
+      s.startTime = Ue(a), je(s.startTime);
+    }, Qe = (a) => {
+      s.endTime = Ue(a), ze(s.endTime);
+    }, Xe = (a) => {
+      Ba(a);
+    }, x = (a, r, o) => {
+      n.startDate = a, n.endDate = r, o && (n.granularity = o);
+    }, Ze = (a) => {
+      var o;
+      const r = (o = e.quickSelectRanges) == null ? void 0 : o.find(({ value: D }) => D === a);
+      if (r) {
+        ne();
+        const D = r.data;
+        s.startDate = I(D.startDate), s.endDate = I(D.endDate), x(D.startDate, D.endDate), e.granularities && (n.granularity = D.granularity || $e), s.startTime || (s.startTime = M(H(D.startDate))), s.endTime || (s.endTime = M(H(D.endDate))), t(f.CUSTOM_RANGE, { ...r.data, range: r.value });
+      }
+    }, xe = (a) => {
+      const r = n.granularity;
+      if (n.granularity = a, r && Q(r, structuredClone(ce(n))), n.startDate && n.endDate) {
+        switch (a) {
+          case "monthly": {
+            if (y.monthly) {
+              x(y.monthly.startDate, y.monthly.endDate, a);
+              break;
+            }
+            const { startDate: o, endDate: D } = K(
+              n.startDate,
+              n.endDate,
+              m.value.min,
+              m.value.max
+            );
+            x(o, D, a);
+            break;
+          }
+          case "weekly": {
+            if (y.weekly) {
+              x(y.weekly.startDate, y.weekly.endDate, a);
+              break;
+            }
+            const { startDate: o, endDate: D } = b(
+              n.startDate,
+              n.endDate,
+              m.value.min,
+              m.value.max
+            );
+            x(o, D, a);
+            break;
+          }
+          case "daily":
+            y.daily && x(y.daily.startDate, y.daily.endDate, a);
+            break;
+        }
+        s.startDate = I(n.startDate), s.endDate = I(n.endDate), t(f.INPUT, {
+          ...n,
+          range: d.value
+        });
+      }
+    };
+    return {
+      // Values
+      internalRangeDate: n,
+      dateTextInput: s,
+      endDateError: q,
+      endTimeError: W,
+      granularityItems: v,
+      selectedGranularity: O,
+      computedMinMax: m,
+      selectedRangeSelectorValue: d,
+      startDateError: A,
+      startTimeError: G,
+      quickSelectRangeDefaultItems: E,
+      formInputWrapperConditionalClasses: T,
+      // Methods
+      hasSlot: va(l),
+      t: i,
+      // Events
+      onDateInput: Te,
+      onDateInputKeyDown: He,
+      onEndDateInput: We,
+      onEndDateSelected: p,
+      onEndTimeInput: Qe,
+      onGranularityInput: xe,
+      onRangeSelectorInput: Ze,
+      onStartDateInput: me,
+      onStartDateSelected: be,
+      onStartTimeInput: Je,
+      onTimeInputKeyDown: Xe
+    };
+  }
+}), Na = { class: "b-date-range-picker-calendar" }, $a = { class: "b-date-range-picker-calendar__form-container" }, La = { class: "b-date-range-picker-calendar__form" }, Va = { key: 0 }, Ya = { class: "b-date-range-picker-calendar__calendars-container" };
+function Ka(e, t, l, u, i, c) {
+  const n = k("bento-dropdown"), d = k("bento-segmented-control"), T = k("bento-typography"), E = k("bento-input-field"), O = k("calendar");
+  return w(), pe("div", Na, [
+    N("div", $a, [
+      N("div", La, [
+        e.hasSlot("title") ? Se(e.$slots, "title", { key: 0 }, void 0, !0) : F("", !0),
+        e.quickSelectRanges ? (w(), L(n, {
+          key: 1,
+          "aria-label": e.t("customRange"),
+          items: e.quickSelectRangeDefaultItems,
+          value: e.selectedRangeSelectorValue,
+          onInput: e.onRangeSelectorInput
+        }, null, 8, ["aria-label", "items", "value", "onInput"])) : F("", !0),
+        e.granularities ? (w(), L(d, {
+          key: 2,
+          items: e.granularityItems,
+          "model-value": e.internalRangeDate.granularity,
+          "full-width": "",
+          "onUpdate:modelValue": e.onGranularityInput
+        }, null, 8, ["items", "model-value", "onUpdate:modelValue"])) : F("", !0),
+        N("div", null, [
+          V(T, {
+            stronger: "",
+            el: "span",
+            class: "b-date-range-picker-calendar__label"
+          }, {
+            default: $(() => t[0] || (t[0] = [
+              J(" From ")
+            ])),
+            _: 1
+          }),
+          N("div", {
+            class: fe(e.formInputWrapperConditionalClasses)
+          }, [
+            V(E, {
+              "aria-label": e.t("dateFrom"),
+              value: e.dateTextInput.startDate,
+              error: e.startDateError,
+              class: "b-date-range-picker-calendar__form-input",
+              onInput: e.onStartDateInput,
+              onKeydown: e.onDateInputKeyDown
+            }, {
+              description: $(() => t[1] || (t[1] = [
+                J("YYYY-MM-DD")
+              ])),
+              _: 1
+            }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"]),
+            e.allowTimeInput ? (w(), L(E, {
+              key: 0,
+              "aria-label": e.t("timeFrom"),
+              value: e.dateTextInput.startTime,
+              error: e.startTimeError,
+              class: "b-date-range-picker-calendar__form-input",
+              onInput: e.onStartTimeInput,
+              onKeydown: e.onTimeInputKeyDown
+            }, {
+              description: $(() => t[2] || (t[2] = [
+                J("HH:MM:SS")
+              ])),
+              _: 1
+            }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"])) : F("", !0)
+          ], 2)
+        ]),
+        N("div", null, [
+          V(T, {
+            stronger: "",
+            el: "span",
+            class: "b-date-range-picker-calendar__label"
+          }, {
+            default: $(() => t[3] || (t[3] = [
+              J(" To ")
+            ])),
+            _: 1
+          }),
+          N("div", {
+            class: fe(e.formInputWrapperConditionalClasses)
+          }, [
+            V(E, {
+              class: "b-date-range-picker-calendar__form-input",
+              "aria-label": e.t("dateTo"),
+              value: e.dateTextInput.endDate,
+              error: e.endDateError,
+              onInput: e.onEndDateInput,
+              onKeydown: e.onDateInputKeyDown
+            }, {
+              description: $(() => t[4] || (t[4] = [
+                J("YYYY-MM-DD")
+              ])),
+              _: 1
+            }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"]),
+            e.allowTimeInput ? (w(), L(E, {
+              key: 0,
+              "aria-label": e.t("timeTo"),
+              value: e.dateTextInput.endTime,
+              error: e.endTimeError,
+              class: "b-date-range-picker-calendar__form-input",
+              onInput: e.onEndTimeInput,
+              onKeydown: e.onTimeInputKeyDown
+            }, {
+              description: $(() => t[5] || (t[5] = [
+                J("HH:MM:SS")
+              ])),
+              _: 1
+            }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"])) : F("", !0)
+          ], 2)
+        ])
+      ]),
+      e.hasSlot("actions") ? (w(), pe("div", Va, [
+        Se(e.$slots, "actions", {}, void 0, !0)
+      ])) : F("", !0)
+    ]),
+    N("div", Ya, [
+      V(O, {
+        value: e.value,
+        "first-day-of-week": e.firstDayOfWeek,
+        "is-date-disabled": e.isDateDisabled,
+        "max-range": e.maxRange,
+        min: e.computedMinMax.min,
+        max: e.computedMinMax.max,
+        "number-of-months": e.numberOfMonths,
+        "show-end-date-on-open": e.showEndDateOnOpen,
+        granularity: e.selectedGranularity,
+        "is-range": "",
+        onInput: e.onDateInput,
+        onStartDateSelected: e.onStartDateSelected,
+        onEndDateSelected: e.onEndDateSelected
+      }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "max-range", "min", "max", "number-of-months", "show-end-date-on-open", "granularity", "onInput", "onStartDateSelected", "onEndDateSelected"])
+    ])
+  ]);
+}
+const P = /* @__PURE__ */ qe(Pa, [["render", Ka], ["__scopeId", "data-v-8b5ccd44"]]), qa = ({
+  datePickerValue: e,
+  isDateIncorrect: t,
+  quickSelectRanges: l
+}) => {
+  var v, Y, m, K;
+  const { locale: u, t: i } = ge(), c = ve(), n = (b) => !!b && !isNaN(b.getTime()), d = (b, j) => n(b) ? se(b, j, {
+    locale: c[u.value.substring(0, 2)] || c.enUS
+  }) : void 0, T = ue({
+    startDate: d((v = e.value) == null ? void 0 : v.startDate, S.NUMERIC_DATE_YEAR_FIRST),
+    endDate: d((Y = e.value) == null ? void 0 : Y.endDate, S.NUMERIC_DATE_YEAR_FIRST),
+    startTime: d((m = e.value) == null ? void 0 : m.startDate, S.HOUR_MINUTE_SECONDS),
+    endTime: d((K = e.value) == null ? void 0 : K.endDate, S.HOUR_MINUTE_SECONDS)
+  });
+  return {
+    // Values
+    dateDisplayValue: R(() => {
+      var B;
+      if (t.value)
+        return `${T.startDate || ""} - ${T.endDate || ""}`;
+      if (!e.value || !e.value.startDate && !e.value.endDate)
+        return i("selectDateRange");
+      if ((B = l.value) != null && B.length) {
+        const g = l.value.find(
+          ({ data: U }) => {
+            var y, Q;
+            return Ce(U == null ? void 0 : U.startDate, (y = e.value) == null ? void 0 : y.startDate) && Ce(U == null ? void 0 : U.endDate, (Q = e.value) == null ? void 0 : Q.endDate);
+          }
+        );
+        if (g)
+          return g.label;
+      }
+      const { startDate: b, endDate: j } = T;
+      return `${d(new Date(b), S.FULL_DATE_MONTH_FIRST)} - ${d(
+        new Date(j),
+        S.FULL_DATE_MONTH_FIRST
+      )}`;
+    }),
+    textInputDisplayValue: T,
+    // Methods
+    formatTextInputDisplayValue: () => ""
+  };
+};
+var de = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(de || {});
+const Le = {
+  "en-US": {
+    apply: "Apply",
+    cancel: "Cancel",
+    dateRangePicker: "Date range picker {name}",
+    provideDateInAFormat: "Provide date in a YYYY-MM-DD format",
+    selectDate: "Select a date",
+    selectDateRange: "Select a date range",
+    selectedDateIsNotAvailable: "Selected date is not available"
+  },
+  "pt-BR": {
+    apply: "Aplicar",
+    cancel: "Cancelar",
+    selectDate: "Selecione uma data"
+  },
+  "ja-JP": {
+    apply: "適用",
+    cancel: "キャンセル",
+    selectDate: "日付を選択"
+  }
+}, Ga = Ve({
+  i18n: { messages: Le },
+  name: "bento-date-range-picker",
+  components: {
+    BentoButtonActions: Ea,
+    BentoDivider: la,
+    BentoTypography: Ke,
+    BentoPopover: ia,
+    DateRangePickerCalendar: P,
+    DropdownInputDefault: Ia,
+    ErrorMessage: Sa,
+    FieldLabel: ka
+  },
+  directives: { BentoClickOutsideDirective: Da },
+  props: {
+    /**
+     * Allows user to enter time values in the form
+     */
+    allowTimeInput: { type: Boolean, default: !1 },
+    /**
+     * Descriptive supporting text visbile underneath the dropdown.
+     */
+    description: { type: String, default: void 0 },
+    /**
+     * Disables dropdown functionality.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Displays component in an error state with an error message
+     */
+    errorMessage: { type: String, default: null },
+    /**
+     * Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     */
+    firstDayOfWeek: P.props.firstDayOfWeek,
+    /**
+     * A list of available granularities.
+     * If present, the date picker will display a segmented control to change granularity.
+     */
+    granularities: P.props.granularities,
+    /**
+     * Indicate if a date should be disabled or not
+     */
+    isDateDisabled: P.props.isDateDisabled,
+    /**
+     * Text that is displayed as a label above the element.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * Upon opening date range picker, end date's month will be pre-selected.
+     */
+    showEndDateOnOpen: { type: Boolean, default: !1 },
+    /**
+     * Highlights the dropdown is optional.
+     */
+    optional: { type: Boolean, default: !1 },
+    /**
+     * The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date range picker.
+     */
+    readonly: { type: Boolean, default: !1 },
+    /**
+     * Highlights the dropdown is required.
+     */
+    required: { type: Boolean, default: !1 },
+    /**
+     * Adds a info icon next to the label to display the passed tooltip message.
+     */
+    tooltipText: { type: String, default: null },
+    /**
+     * Enables the range selector.
+     * If provided, must be an array that sets the custom range dropdown items. Items are of the structure:
+     * `label` - label of custom range item.
+     * `value` - a unique key of the custom range item.
+     * `data` - an object `{ startDate: Date; endDate: Date }` to set the date picker range to upon selecting.
+     */
+    quickSelectRanges: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * Set a maximum number of dates to be selectable by the range.
+     */
+    maxRange: P.props.maxRange,
+    /**
+     * Sets a minimum limit for selectable dates - dates before `min` will not be selectable
+     */
+    min: P.props.min,
+    /**
+     * Sets a maximum limit for selectable dates - dates after `max` will not be selectable
+     */
+    max: P.props.max,
+    /**
+     * Number of months rendered on pane
+     */
+    numberOfMonths: P.props.numberOfMonths,
+    /**
+     * Selected date
+     */
+    value: P.props.value,
+    /**
+     * Enables the date picker selection to persist until it is explicitly applied.
+     * Displays a set of buttons: Apply and Cancel.
+     *
+     * @deprecated This will be the default behaviour in v2.0.0.
+     */
+    hasActions: { type: Boolean, default: !1 }
+  },
+  emits: [de.INPUT],
+  setup(e, { emit: t }) {
+    const { locale: l, t: u } = ge({ messages: Le }), i = ve(), c = re("bento-date-range-picker-container"), n = re("bento-date-range-picker-label"), d = re("bento-date-range-picker-description"), T = re("bento-date-range-picker-error"), E = re("bento-date-range-picker-date-error"), O = R(
+      () => e.label || u("dateRangePicker", { name: c })
+    ), v = _(!1), Y = _(null), m = _(!1), { isReadOnly: K } = ma(De(e, "readonly"));
+    Ee(
+      () => e.disabled,
+      () => {
+        e.disabled && m.value && (m.value = !1);
+      }
+    );
+    const b = R(() => e.hasActions ? !A.value && v.value : v.value), j = R(() => ({
+      "b-date-range-picker__description--error": !!e.errorMessage || b.value
+    })), { dateDisplayValue: B, textInputDisplayValue: g } = qa({
+      datePickerValue: De(e, "value"),
+      isDateIncorrect: v,
+      quickSelectRanges: De(e, "quickSelectRanges")
+    }), U = R(
+      () => `${e.description ? d : ""} ${e.errorMessage ? T : ""} ${v.value ? E : ""}`.trim() || null
+    ), y = () => {
+      m.value = !1;
+    }, Q = () => {
+      m.value = !0;
+    }, ne = _(B.value), I = _(
+      // textInputDisplayValue is a reactive object
+      structuredClone(ce(g))
+    ), M = _(e.value), A = _(!0), q = R(
+      () => e.hasActions ? I.value : g
+    ), G = R(
+      () => e.hasActions ? ne.value : B.value
+    );
+    Ye(() => {
+      e.hasActions || da(
+        'BentoDateRangePicker "hasActions" property',
+        `Set the BentoDateRangePicker "hasActions" property true which will display the "Apply" and "Cancel" buttons.
+                        This will be the default behavior in the v2 and "hasActions" will be removed.`,
+        "2.0.0"
+      );
+    });
+    const W = R(() => [
+      {
+        title: u("apply"),
+        event: () => {
+          ne.value = B.value, I.value = structuredClone(ce(g)), t(de.INPUT, M.value), y(), A.value = !0;
+        },
+        disabled: A.value
+      },
+      {
+        title: u("cancel"),
+        event: y
+      }
+    ]);
+    return Ee(M, (p) => {
+      if (e.hasActions) {
+        A.value = v.value;
+        return;
+      }
+      t(de.INPUT, p);
+    }), {
+      // Refs
+      inputContainerRef: Y,
+      // Values,
+      dateDisplayValue: B,
+      datePickerContainerId: c,
+      descriptionConditionalClasses: j,
+      displayedTextInputValue: q,
+      displayedDateValue: G,
+      isDateIncorrect: v,
+      isDateRangePickerOpen: m,
+      isReadOnly: K,
+      labelId: n,
+      descriptionId: d,
+      dateErrorId: E,
+      errorId: T,
+      popoverAriaLabel: O,
+      shouldDisplayError: b,
+      ariaDescribedBy: U,
+      textInputDisplayValue: g,
+      rangePickerButtonActions: W,
+      BentoButtonActionsLayout: ha,
+      // Events
+      closeDateRangePicker: y,
+      clearDateRangePickerValue: async () => {
+        v.value && (v.value = !1), M.value = null;
+      },
+      openDateRangePicker: Q,
+      onRangeSelectorInput: (p) => {
+        if (p) {
+          const h = (Z) => se(Z, S.NUMERIC_DATE_YEAR_FIRST, {
+            locale: i[l.value.substring(0, 2)] || i.enUS
+          });
+          g.startDate = h(p.startDate), g.endDate = h(p.endDate), M.value = p;
+        }
+      },
+      onEnterPressedOverInput: () => {
+        v.value || (m.value = !1);
+      },
+      onDateRangePickerInput: (p) => {
+        v.value = !1;
+        const h = (Z, me) => Z ? se(Z, me, {
+          locale: i[l.value.substring(0, 2)] || i.enUS
+        }) : void 0;
+        g.startDate = h(
+          p.startDate,
+          S.NUMERIC_DATE_YEAR_FIRST
+        ), g.endDate = h(p.endDate, S.NUMERIC_DATE_YEAR_FIRST), g.startTime = h(p.startDate, S.HOUR_MINUTE_SECONDS), g.endTime = h(p.endDate, S.HOUR_MINUTE_SECONDS), M.value = p;
+      },
+      onDateRangePickerError: (p) => {
+        v.value = !0, g.startDate = p.startDate, g.endDate = p.endDate, M.value = { startDate: null, endDate: null };
+      },
+      onDateRangePickerFormDateInputUpdate: (p) => {
+        v.value = !1, p.startTime && (g.startTime = p.startTime), p.endTime && (g.endTime = p.endTime);
+      },
+      // Translations
+      t: u
+    };
+  }
+}), Wa = { class: "b-date-range-picker" }, Ha = { class: "b-date-range-picker__footer" };
+function ja(e, t, l, u, i, c) {
+  const n = k("field-label"), d = k("dropdown-input-default"), T = k("error-message"), E = k("bento-typography"), O = k("bento-divider"), v = k("bento-button-actions"), Y = k("date-range-picker-calendar"), m = k("bento-popover"), K = ta("bento-click-outside-directive");
+  return na((w(), pe("div", Wa, [
+    e.label ? (w(), L(n, {
+      key: 0,
+      id: e.labelId,
+      label: e.label,
+      "tooltip-text": e.tooltipText,
+      optional: e.optional,
+      required: e.required
+    }, null, 8, ["id", "label", "tooltip-text", "optional", "required"])) : F("", !0),
+    N("div", {
+      onKeydown: t[0] || (t[0] = ra((...b) => e.onEnterPressedOverInput && e.onEnterPressedOverInput(...b), ["enter"]))
+    }, [
+      V(d, {
+        ref: "inputContainerRef",
+        "always-combobox-is-input": "",
+        ariaControls: e.datePickerContainerId,
+        ariaExpanded: e.isDateRangePickerOpen,
+        "aria-labelledby": e.label ? e.labelId : null,
+        "aria-describedby": e.ariaDescribedBy,
+        disabled: e.disabled,
+        "is-invalid": !!e.errorMessage || e.shouldDisplayError,
+        open: e.isDateRangePickerOpen,
+        "display-value": e.displayedDateValue,
+        readonly: e.isReadOnly,
+        onOpen: e.openDateRangePicker,
+        onClear: e.clearDateRangePickerValue,
+        onClose: e.closeDateRangePicker
+      }, null, 8, ["ariaControls", "ariaExpanded", "aria-labelledby", "aria-describedby", "disabled", "is-invalid", "open", "display-value", "readonly", "onOpen", "onClear", "onClose"])
+    ], 32),
+    e.shouldDisplayError ? (w(), L(T, {
+      key: 1,
+      id: e.dateErrorId,
+      "error-message": e.t("provideDateInAFormat"),
+      class: "b-date-range-picker__error-message"
+    }, null, 8, ["id", "error-message"])) : F("", !0),
+    e.errorMessage ? (w(), L(T, {
+      key: 2,
+      id: e.errorId,
+      "error-message": e.errorMessage,
+      class: "b-date-range-picker__error-message"
+    }, null, 8, ["id", "error-message"])) : F("", !0),
+    e.description ? (w(), L(E, {
+      key: 3,
+      id: e.descriptionId,
+      class: fe(["b-date-range-picker__description", e.descriptionConditionalClasses]),
+      el: "span"
+    }, {
+      default: $(() => [
+        J(oa(e.description), 1)
+      ]),
+      _: 1
+    }, 8, ["id", "class"])) : F("", !0),
+    e.inputContainerRef ? (w(), L(m, {
+      key: 4,
+      id: e.datePickerContainerId,
+      class: "b-date-range-picker__container",
+      open: e.isDateRangePickerOpen,
+      "target-element": e.inputContainerRef,
+      "disable-focus-trap": !0,
+      "aria-label": e.popoverAriaLabel,
+      position: "bottom-start",
+      "without-space": "",
+      "fit-content": ""
+    }, {
+      default: $(() => [
+        V(Y, {
+          "allow-time-input": e.allowTimeInput,
+          "quick-select-ranges": e.quickSelectRanges,
+          value: e.value,
+          "first-day-of-week": e.firstDayOfWeek,
+          granularities: e.granularities,
+          "is-date-disabled": e.isDateDisabled,
+          "max-range": e.maxRange,
+          min: e.min,
+          max: e.max,
+          "number-of-months": e.numberOfMonths,
+          "show-end-date-on-open": e.showEndDateOnOpen,
+          "date-form-data": e.displayedTextInputValue,
+          onCustomRange: e.onRangeSelectorInput,
+          onInput: e.onDateRangePickerInput,
+          onError: e.onDateRangePickerError,
+          onFormDate: e.onDateRangePickerFormDateInputUpdate
+        }, sa({ _: 2 }, [
+          e.hasActions ? {
+            name: "actions",
+            fn: $(() => [
+              V(O),
+              N("div", Ha, [
+                V(v, {
+                  actions: e.rangePickerButtonActions,
+                  layout: e.BentoButtonActionsLayout.SPACE_BETWEEN
+                }, null, 8, ["actions", "layout"])
+              ])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["allow-time-input", "quick-select-ranges", "value", "first-day-of-week", "granularities", "is-date-disabled", "max-range", "min", "max", "number-of-months", "show-end-date-on-open", "date-form-data", "onCustomRange", "onInput", "onError", "onFormDate"])
+      ]),
+      _: 1
+    }, 8, ["id", "open", "target-element", "aria-label"])) : F("", !0)
+  ])), [
+    [K, e.closeDateRangePicker]
+  ]);
+}
+const yt = /* @__PURE__ */ qe(Ga, [["render", ja], ["__scopeId", "data-v-7d8fe1da"]]);
+export {
+  yt as B,
+  P as D,
+  de as a,
+  Ce as i
+};
+//# sourceMappingURL=date-range-picker.Bna_2pBL.js.map