@adyen/bento-vue3 1.32.0 → 1.33.0

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

@@ -0,0 +1,942 @@
+import { reactive as ie, defineComponent as Ne, computed as h, ref as W, onMounted as aa, toRaw as ta, resolveComponent as O, openBlock as b, createElementBlock as De, createElementVNode as N, renderSlot as Te, createCommentVNode as w, createBlock as F, createVNode as H, withCtx as P, createTextVNode as q, normalizeClass as me, toRef as ue, watch as na, resolveDirective as ra, withDirectives as oa, withKeys as sa, toDisplayString as la } from "vue";
+import { B as ia } from "./popover.CczC6Fhk.js";
+import { B as Pe } from "./typography.z9P0Ec3Q.js";
+import { D as da } from "./dropdown-default-textbox.Bu4bpNGU.js";
+import { g as ne } from "./unique-id.XFfoKuc2.js";
+import { u as ce } from "./i18n.DL9GT2-k.js";
+import { t as fe, f as oe } from "./date.D8rQMzMG.js";
+import { f as Re, v as ua, D as T } from "./date-input.BqBdAO1E.js";
+import { r as x, t as Z, l as B, a as pe, b as ge } from "./index.B_UZQ6qF.js";
+import { u as Da } from "./use-form-layout-loading.D3lALhtC.js";
+import { B as ma } from "./directive.O3yEdalv.js";
+import { B as ca } from "./input-field.f4lqnh2q.js";
+import { B as fa } from "./dropdown.DQpKDlC-.js";
+import { B as pa } from "./segmented-control.DbR5NYWR.js";
+import { d as le } from "./debounce.DUTu11PS.js";
+import { u as ga } from "./use-has-slot.B7eQSabc.js";
+import { s as re, c as be, i as X, d as va, e as ke, f as Ia, g as Ee, h as ya, j as Ta, a as G, u as Ra } from "./calendar.D--sOCBT.js";
+import { e as $ } from "./index.B_EJflcs.js";
+import { e as Se } from "./index.Z84QE0E2.js";
+import { _ as $e } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { E as ba, F as ka } from "./error-message.BfOmvPPb.js";
+import "../assets/date-range-picker.css";
+function Oe(e, t) {
+  x(2, arguments);
+  var l = Z(e), u = Z(t);
+  return l.getTime() === u.getTime();
+}
+function we(e) {
+  x(1, arguments);
+  var t = Z(e);
+  return t.setMilliseconds(0), t;
+}
+function Me(e, t) {
+  x(2, arguments);
+  var l = we(e), u = we(t);
+  return l.getTime() === u.getTime();
+}
+function Ea(e, t) {
+  x(2, arguments);
+  var l = Z(e), u = fe(t);
+  return l.setHours(u), l;
+}
+function Sa(e, t) {
+  x(2, arguments);
+  var l = Z(e), u = fe(t);
+  return l.setMinutes(u), l;
+}
+function Oa(e, t) {
+  x(2, arguments);
+  var l = Z(e), u = fe(t);
+  return l.setSeconds(u), l;
+}
+const wa = ({
+  firstDayOfWeek: e,
+  min: t,
+  max: l
+}) => ({ getGranularCalendarLimits: (d) => {
+  let p = re(t), n = $(l);
+  if ((d == null ? void 0 : d.type) === "weekly") {
+    if (d.earliest)
+      p = re(d.earliest);
+    else {
+      const i = be(p, { weekStartsOn: e });
+      X(p, i) || (p = re(va(ke(p, { weekStartsOn: e }), 1)));
+    }
+    if (d.latest)
+      n = $(d.latest);
+    else {
+      const i = ke(n, { weekStartsOn: e });
+      X(n, i) || (n = $(Ia(be(n, { weekStartsOn: e }), 1)));
+    }
+  }
+  if ((d == null ? void 0 : d.type) === "monthly") {
+    if (d.earliest)
+      p = re(d.earliest);
+    else {
+      const i = Ee(p);
+      X(p, i) || (p = Ee(ya(p, 1)));
+    }
+    if (d.latest)
+      n = $(d.latest);
+    else {
+      const i = Se(n);
+      X(n, i) || (n = Se(Ta(n, 1)));
+    }
+  }
+  return { min: p, max: n };
+} }), Ma = () => {
+  const e = ie({
+    daily: null,
+    weekly: null,
+    monthly: null
+  });
+  return {
+    savedRanges: e,
+    saveRange: (u, d) => {
+      e[u] = d;
+    },
+    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 ha = /[\d]/, Ca = /^\d{2}$/, Fa = /^\d{2}:\d{2}$/, Ua = (e) => {
+  const { selectionStart: t } = e.target, l = ha.test(e.key) || e.key === "Backspace", u = [1, 2, 4, 5].includes(t) && e.key === ":";
+  !l && !u && e.preventDefault();
+}, he = (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}`), (Ca.test(t) || Fa.test(t)) && (t += ":"), t;
+}, Ce = {
+  "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"
+  }
+}, Fe = 300, Ue = "customRange", _e = "daily", _a = Ne({
+  i18n: { messages: Ce },
+  name: "date-range-picker-calendar",
+  components: {
+    BentoDropdown: fa,
+    BentoInputField: ca,
+    BentoSegmentedControl: pa,
+    BentoTypography: Pe,
+    Calendar: G
+  },
+  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: G.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: G.props.isDateDisabled,
+    /**
+     * Set a maximum number of dates to be selectable by the range.
+     */
+    maxRange: G.props.maxRange,
+    /**
+     * Sets a minimum limit for selectable dates - dates before `min` will not be selectable
+     */
+    min: G.props.min,
+    /**
+     * Sets a maximum limit for selectable dates - dates after `max` will not be selectable
+     */
+    max: G.props.max,
+    /**
+     * Number of months rendered on pane
+     */
+    numberOfMonths: G.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 ve, Ie, ye;
+    const { locale: u, t: d } = ce({ messages: Ce }), p = { de: pe, enUS: B, fr: ge }, n = ie({
+      startDate: (ve = e.value) == null ? void 0 : ve.startDate,
+      endDate: (Ie = e.value) == null ? void 0 : Ie.endDate,
+      ...e.granularities ? {
+        granularity: ((ye = e.value) == null ? void 0 : ye.granularity) || _e
+      } : {}
+    }), i = h(
+      () => {
+        var a, o;
+        return ((o = (a = e == null ? void 0 : e.quickSelectRanges) == null ? void 0 : a.find(({ data: s }) => e.allowTimeInput ? Me(s.startDate, n.startDate) && Me(s.endDate, n.endDate) : X(s.startDate, n.startDate) && X(s.endDate, n.endDate))) == null ? void 0 : o.value) ?? Ue;
+      }
+    ), I = h(() => ({
+      "b-date-range-picker-calendar__form-input-wrapper": e.allowTimeInput
+    })), R = h(() => [
+      { label: d("customRange"), value: Ue },
+      ...e.quickSelectRanges
+    ]), k = h(
+      () => {
+        var a;
+        return ((a = e.granularities) == null ? void 0 : a.find(({ type: o }) => o === n.granularity)) || null;
+      }
+    ), g = h(
+      () => e.granularities.map(({ type: a, disabled: o }) => ({
+        label: d(a),
+        value: a,
+        disabled: o
+      }))
+    ), { getGranularCalendarLimits: U } = wa(e), D = h(
+      () => e.granularities ? U(k.value) : { min: re(e.min), max: $(e.max) }
+    ), {
+      adjustDateForMonthly: j,
+      adjustDateForWeekly: E,
+      adjustStartDateInputForWeekly: L,
+      adjustEndDateInputForWeekly: v,
+      adjustStartDateInputForMonthly: z,
+      adjustEndDateInputForMonthly: M
+    } = Ra(e.firstDayOfWeek), { savedRanges: y, saveRange: ee, resetSavedRanges: de } = Ma(), S = (a) => a ? oe(a, T.NUMERIC_DATE_YEAR_FIRST, {
+      locale: p[u.value.substring(0, 2)] || B
+    }) : "", ae = (a) => a ? oe(a, T.HOUR_MINUTE_SECONDS, {
+      locale: p[u.value.substring(0, 2)] || B
+    }) : "", V = W(!1), Y = W(!1), K = W(!1), m = W(!1), r = ie({
+      startDate: e.dateFormData.startDate,
+      endDate: e.dateFormData.endDate,
+      startTime: e.dateFormData.startTime,
+      endTime: e.dateFormData.endTime
+    }), _ = (a) => /^(?:[01]\d|2[01234]):(?:[012345]\d):(?:[012345]\d)$/.test(a), A = (a, o) => {
+      if (!o || !_(o))
+        return a;
+      let s = new Date(a);
+      const [c, xe, ea] = o.split(":");
+      return s = Ea(s, parseInt(c, 10)), s = Sa(s, parseInt(xe, 10)), s = Oa(s, parseInt(ea, 10)), s;
+    }, Be = (a) => {
+      n.startDate = A(a.startDate, r.startTime), n.endDate = A(a.endDate, r.endTime), e.granularities && de(), t(f.INPUT, {
+        ...n,
+        range: i.value
+      });
+    }, te = (a) => {
+      const o = (c) => e.min && c <= e.min || e.max && c >= e.max ? !1 : e.isDateDisabled ? !e.isDateDisabled(c) : !0;
+      return /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(a) && o(new Date(a));
+    };
+    aa(() => {
+      e.dateFormData.startDate && !te(e.dateFormData.startDate) ? V.value = !0 : (V.value = !1, K.value = !1), e.dateFormData.endDate && !te(e.dateFormData.endDate) ? Y.value = !0 : (Y.value = !1, m.value = !1);
+    });
+    const Le = (a) => {
+      var o;
+      r.startDate = S(a), r.startTime ? K.value && (r.startTime = (o = e.dateFormData) == null ? void 0 : o.startTime) : r.startTime = ae(a), V.value = !1, K.value = !1, t(f.START_DATE_SELECTED, a);
+    }, Ve = (a) => {
+      var o;
+      r.endDate = S(a), r.endTime ? m.value && (r.endTime = (o = e.dateFormData) == null ? void 0 : o.endTime) : r.endTime = ae($(a)), Y.value = !1, m.value = !1;
+    }, se = (a) => {
+      const o = e.value[a];
+      if (o)
+        return o;
+      if (e.dateFormData[a] && te(e.dateFormData[a]))
+        return new Date(e.dateFormData[a]);
+    }, Ye = le((a) => {
+      var o;
+      if (te(a)) {
+        let s = a;
+        switch (V.value = !1, (o = k.value) == null ? void 0 : o.type) {
+          case "weekly":
+            s = L(
+              a,
+              S,
+              D.value.min,
+              D.value.max
+            ), r.startDate = s;
+            break;
+          case "monthly":
+            s = z(
+              a,
+              S,
+              D.value.min,
+              D.value.max
+            ), r.startDate = s;
+            break;
+        }
+        n.startDate = A(new Date(s), r.startTime);
+        const c = se("endDate");
+        t(f.FORM_DATE, {
+          startDate: new Date(s),
+          endDate: c
+        }), t(f.INPUT, {
+          startDate: new Date(s),
+          endDate: c,
+          range: i.value
+        });
+      } else
+        V.value = !0, t(f.ERROR, { ...r });
+    }, Fe), Ke = (a) => {
+      r.startDate = Re(a), Ye(r.startDate);
+    }, Ge = le((a) => {
+      var o;
+      if (te(a)) {
+        let s = a;
+        switch (Y.value = !1, (o = k.value) == null ? void 0 : o.type) {
+          case "weekly":
+            s = v(
+              a,
+              S,
+              D.value.min,
+              D.value.max
+            ), r.endDate = s;
+            break;
+          case "monthly":
+            s = M(
+              a,
+              S,
+              D.value.min,
+              D.value.max
+            ), r.endDate = s;
+            break;
+        }
+        n.endDate = A(new Date(s), r.endTime);
+        const c = se("startDate");
+        t(f.FORM_DATE, {
+          startDate: c,
+          endDate: new Date(a)
+        }), t(f.INPUT, {
+          startDate: c,
+          endDate: new Date(a),
+          range: i.value
+        });
+      } else
+        Y.value = !0, t(f.ERROR, { ...r });
+    }, Fe), qe = (a) => {
+      r.endDate = Re(a), Ge(r.endDate);
+    }, He = (a) => {
+      ua(a);
+    }, We = le((a) => {
+      if (_(a)) {
+        K.value = !1, n.startDate = A(n.startDate, a);
+        const o = se("endDate");
+        t(f.FORM_DATE, {
+          startDate: new Date(n.startDate),
+          endDate: o,
+          startTime: a,
+          endTime: e.dateFormData.endTime
+        }), t(f.INPUT, {
+          startDate: new Date(n.startDate),
+          endDate: o,
+          range: i.value
+        });
+      } else
+        K.value = !0, t(f.ERROR, { ...r });
+    }), je = le((a) => {
+      if (_(a)) {
+        m.value = !1, n.endDate = A(n.endDate, a);
+        const o = se("startDate");
+        t(f.FORM_DATE, {
+          startDate: o,
+          endDate: new Date(n.endDate),
+          startTime: e.dateFormData.startTime,
+          endTime: a
+        }), t(f.INPUT, {
+          startDate: o,
+          endDate: new Date(n.endDate),
+          range: i.value
+        });
+      } else
+        m.value = !0, t(f.ERROR, { ...r });
+    }), ze = (a) => {
+      r.startTime = he(a), We(r.startTime);
+    }, Je = (a) => {
+      r.endTime = he(a), je(r.endTime);
+    }, Qe = (a) => {
+      Ua(a);
+    }, J = (a, o, s) => {
+      n.startDate = a, n.endDate = o, s && (n.granularity = s);
+    }, Xe = (a) => {
+      var s;
+      const o = (s = e.quickSelectRanges) == null ? void 0 : s.find(({ value: c }) => c === a);
+      if (o) {
+        de();
+        const c = o.data;
+        r.startDate = S(c.startDate), r.endDate = S(c.endDate), J(c.startDate, c.endDate), e.granularities && (n.granularity = c.granularity || _e), r.startTime || (r.startTime = ae($(c.startDate))), r.endTime || (r.endTime = ae($(c.endDate))), t(f.CUSTOM_RANGE, { ...o.data, range: o.value });
+      }
+    }, Ze = (a) => {
+      const o = n.granularity;
+      if (n.granularity = a, o && ee(o, structuredClone(ta(n))), n.startDate && n.endDate) {
+        switch (a) {
+          case "monthly": {
+            if (y.monthly) {
+              J(y.monthly.startDate, y.monthly.endDate, a);
+              break;
+            }
+            const { startDate: s, endDate: c } = j(
+              n.startDate,
+              n.endDate,
+              D.value.min,
+              D.value.max
+            );
+            J(s, c, a);
+            break;
+          }
+          case "weekly": {
+            if (y.weekly) {
+              J(y.weekly.startDate, y.weekly.endDate, a);
+              break;
+            }
+            const { startDate: s, endDate: c } = E(
+              n.startDate,
+              n.endDate,
+              D.value.min,
+              D.value.max
+            );
+            J(s, c, a);
+            break;
+          }
+          case "daily":
+            y.daily && J(y.daily.startDate, y.daily.endDate, a);
+            break;
+        }
+        r.startDate = S(n.startDate), r.endDate = S(n.endDate), t(f.INPUT, {
+          ...n,
+          range: i.value
+        });
+      }
+    };
+    return {
+      // Values
+      internalRangeDate: n,
+      dateTextInput: r,
+      endDateError: Y,
+      endTimeError: m,
+      granularityItems: g,
+      selectedGranularity: k,
+      computedMinMax: D,
+      selectedRangeSelectorValue: i,
+      startDateError: V,
+      startTimeError: K,
+      quickSelectRangeDefaultItems: R,
+      formInputWrapperConditionalClasses: I,
+      // Methods
+      hasSlot: ga(l),
+      t: d,
+      // Events
+      onDateInput: Be,
+      onDateInputKeyDown: He,
+      onEndDateInput: qe,
+      onEndDateSelected: Ve,
+      onEndTimeInput: Je,
+      onGranularityInput: Ze,
+      onRangeSelectorInput: Xe,
+      onStartDateInput: Ke,
+      onStartDateSelected: Le,
+      onStartTimeInput: ze,
+      onTimeInputKeyDown: Qe
+    };
+  }
+}), Aa = { class: "b-date-range-picker-calendar" }, Na = { class: "b-date-range-picker-calendar__form-container" }, Pa = { class: "b-date-range-picker-calendar__form" }, $a = { key: 0 }, Ba = { class: "b-date-range-picker-calendar__calendars-container" };
+function La(e, t, l, u, d, p) {
+  const n = O("bento-dropdown"), i = O("bento-segmented-control"), I = O("bento-typography"), R = O("bento-input-field"), k = O("calendar");
+  return b(), De("div", Aa, [
+    N("div", Na, [
+      N("div", Pa, [
+        e.hasSlot("title") ? Te(e.$slots, "title", { key: 0 }, void 0, !0) : w("", !0),
+        e.quickSelectRanges ? (b(), F(n, {
+          key: 1,
+          "aria-label": e.t("customRange"),
+          items: e.quickSelectRangeDefaultItems,
+          value: e.selectedRangeSelectorValue,
+          onInput: e.onRangeSelectorInput
+        }, null, 8, ["aria-label", "items", "value", "onInput"])) : w("", !0),
+        e.granularities ? (b(), F(i, {
+          key: 2,
+          items: e.granularityItems,
+          "model-value": e.internalRangeDate.granularity,
+          "full-width": "",
+          "onUpdate:modelValue": e.onGranularityInput
+        }, null, 8, ["items", "model-value", "onUpdate:modelValue"])) : w("", !0),
+        N("div", null, [
+          H(I, {
+            stronger: "",
+            el: "span",
+            class: "b-date-range-picker-calendar__label"
+          }, {
+            default: P(() => t[0] || (t[0] = [
+              q(" From ")
+            ])),
+            _: 1
+          }),
+          N("div", {
+            class: me(e.formInputWrapperConditionalClasses)
+          }, [
+            H(R, {
+              "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: P(() => t[1] || (t[1] = [
+                q("YYYY-MM-DD")
+              ])),
+              _: 1
+            }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"]),
+            e.allowTimeInput ? (b(), F(R, {
+              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: P(() => t[2] || (t[2] = [
+                q("HH:MM:SS")
+              ])),
+              _: 1
+            }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"])) : w("", !0)
+          ], 2)
+        ]),
+        N("div", null, [
+          H(I, {
+            stronger: "",
+            el: "span",
+            class: "b-date-range-picker-calendar__label"
+          }, {
+            default: P(() => t[3] || (t[3] = [
+              q(" To ")
+            ])),
+            _: 1
+          }),
+          N("div", {
+            class: me(e.formInputWrapperConditionalClasses)
+          }, [
+            H(R, {
+              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: P(() => t[4] || (t[4] = [
+                q("YYYY-MM-DD")
+              ])),
+              _: 1
+            }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"]),
+            e.allowTimeInput ? (b(), F(R, {
+              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: P(() => t[5] || (t[5] = [
+                q("HH:MM:SS")
+              ])),
+              _: 1
+            }, 8, ["aria-label", "value", "error", "onInput", "onKeydown"])) : w("", !0)
+          ], 2)
+        ])
+      ]),
+      e.hasSlot("actions") ? (b(), De("div", $a, [
+        Te(e.$slots, "actions", {}, void 0, !0)
+      ])) : w("", !0)
+    ]),
+    N("div", Ba, [
+      H(k, {
+        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 C = /* @__PURE__ */ $e(_a, [["render", La], ["__scopeId", "data-v-78a26328"]]), Va = ({
+  datePickerValue: e,
+  isDateIncorrect: t,
+  quickSelectRanges: l
+}) => {
+  var g, U, D, j;
+  const { locale: u, t: d } = ce(), p = { de: pe, enUS: B, fr: ge }, n = (E) => !!E && !isNaN(E.getTime()), i = (E, L) => n(E) ? oe(E, L, {
+    locale: p[u.value.substring(0, 2)] || B
+  }) : void 0, I = ie({
+    startDate: i((g = e.value) == null ? void 0 : g.startDate, T.NUMERIC_DATE_YEAR_FIRST),
+    endDate: i((U = e.value) == null ? void 0 : U.endDate, T.NUMERIC_DATE_YEAR_FIRST),
+    startTime: i((D = e.value) == null ? void 0 : D.startDate, T.HOUR_MINUTE_SECONDS),
+    endTime: i((j = e.value) == null ? void 0 : j.endDate, T.HOUR_MINUTE_SECONDS)
+  });
+  return {
+    // Values
+    dateDisplayValue: h(() => {
+      var v;
+      if (t.value)
+        return `${I.startDate || ""} - ${I.endDate || ""}`;
+      if (!e.value || !e.value.startDate && !e.value.endDate)
+        return d("selectDateRange");
+      if ((v = l.value) != null && v.length) {
+        const z = l.value.find(
+          ({ data: M }) => {
+            var y, ee;
+            return Oe(M == null ? void 0 : M.startDate, (y = e.value) == null ? void 0 : y.startDate) && Oe(M == null ? void 0 : M.endDate, (ee = e.value) == null ? void 0 : ee.endDate);
+          }
+        );
+        if (z)
+          return z.label;
+      }
+      const { startDate: E, endDate: L } = I;
+      return `${i(new Date(E), T.FULL_DATE_MONTH_FIRST)} - ${i(
+        new Date(L),
+        T.FULL_DATE_MONTH_FIRST
+      )}`;
+    }),
+    textInputDisplayValue: I,
+    // Methods
+    formatTextInputDisplayValue: () => ""
+  };
+};
+var Q = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(Q || {});
+const Ae = {
+  "en-US": {
+    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"
+  }
+}, Ya = Ne({
+  i18n: { messages: Ae },
+  name: "bento-date-range-picker",
+  components: {
+    BentoTypography: Pe,
+    BentoPopover: ia,
+    DateRangePickerCalendar: C,
+    DropdownInputDefault: da,
+    ErrorMessage: ba,
+    FieldLabel: ka
+  },
+  directives: { BentoClickOutsideDirective: ma },
+  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: C.props.firstDayOfWeek,
+    /**
+     * A list of available granularities.
+     * If present, the date picker will display a segmented control to change granularity.
+     */
+    granularities: C.props.granularities,
+    /**
+     * Indicate if a date should be disabled or not
+     */
+    isDateDisabled: C.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: C.props.maxRange,
+    /**
+     * Sets a minimum limit for selectable dates - dates before `min` will not be selectable
+     */
+    min: C.props.min,
+    /**
+     * Sets a maximum limit for selectable dates - dates after `max` will not be selectable
+     */
+    max: C.props.max,
+    /**
+     * Number of months rendered on pane
+     */
+    numberOfMonths: C.props.numberOfMonths,
+    /**
+     * Selected date
+     */
+    value: C.props.value
+  },
+  emits: [Q.INPUT],
+  setup(e, { emit: t }) {
+    const { locale: l, t: u } = ce({ messages: Ae }), d = { de: pe, enUS: B, fr: ge }, p = ne("bento-date-range-picker-container"), n = ne("bento-date-range-picker-label"), i = ne("bento-date-range-picker-description"), I = ne("bento-date-range-picker-error"), R = ne("bento-date-range-picker-date-error"), k = h(
+      () => e.label || u("dateRangePicker", { name: p })
+    ), g = W(!1), U = W(null), D = W(!1), { isReadOnly: j } = Da(ue(e, "readonly"));
+    na(
+      () => e.disabled,
+      () => {
+        e.disabled && D.value && (D.value = !1);
+      }
+    );
+    const E = h(() => ({
+      "b-date-range-picker__description--error": !!e.errorMessage || g.value
+    })), { dateDisplayValue: L, textInputDisplayValue: v, formatTextInputDisplayValue: z } = Va({
+      datePickerValue: ue(e, "value"),
+      isDateIncorrect: g,
+      quickSelectRanges: ue(e, "quickSelectRanges")
+    }), M = h(
+      () => `${e.description ? i : ""} ${e.errorMessage ? I : ""} ${g.value ? R : ""}`.trim() || null
+    );
+    return {
+      // Refs
+      inputContainerRef: U,
+      // Values,
+      dateDisplayValue: L,
+      datePickerContainerId: p,
+      descriptionConditionalClasses: E,
+      isDateIncorrect: g,
+      isDateRangePickerOpen: D,
+      isReadOnly: j,
+      labelId: n,
+      descriptionId: i,
+      dateErrorId: R,
+      errorId: I,
+      popoverAriaLabel: k,
+      ariaDescribedBy: M,
+      textInputDisplayValue: v,
+      // Events
+      closeDateRangePicker: () => {
+        D.value = !1;
+      },
+      clearDateRangePickerValue: async () => {
+        g.value && (g.value = !1), t(Q.INPUT, null);
+      },
+      openDateRangePicker: () => {
+        D.value = !0, z();
+      },
+      onRangeSelectorInput: (m) => {
+        if (m) {
+          const r = (_) => oe(_, T.NUMERIC_DATE_YEAR_FIRST, {
+            locale: d[l.value.substring(0, 2)] || B
+          });
+          v.startDate = r(m.startDate), v.endDate = r(m.endDate), t(Q.INPUT, m);
+        }
+      },
+      onEnterPressedOverInput: () => {
+        g.value || (D.value = !1);
+      },
+      onDateRangePickerInput: (m) => {
+        g.value = !1;
+        const r = (_, A) => _ ? oe(_, A, {
+          locale: d[l.value.substring(0, 2)] || B
+        }) : void 0;
+        v.startDate = r(
+          m.startDate,
+          T.NUMERIC_DATE_YEAR_FIRST
+        ), v.endDate = r(m.endDate, T.NUMERIC_DATE_YEAR_FIRST), v.startTime = r(m.startDate, T.HOUR_MINUTE_SECONDS), v.endTime = r(m.endDate, T.HOUR_MINUTE_SECONDS), t(Q.INPUT, m);
+      },
+      onDateRangePickerError: (m) => {
+        g.value = !0, v.startDate = m.startDate, v.endDate = m.endDate, t(Q.INPUT, { startDate: null, endDate: null });
+      },
+      onDateRangePickerFormDateInputUpdate: (m) => {
+        g.value = !1, m.startTime && (v.startTime = m.startTime), m.endTime && (v.endTime = m.endTime);
+      },
+      // Translations
+      t: u
+    };
+  }
+}), Ka = { class: "b-date-range-picker" };
+function Ga(e, t, l, u, d, p) {
+  const n = O("field-label"), i = O("dropdown-input-default"), I = O("error-message"), R = O("bento-typography"), k = O("date-range-picker-calendar"), g = O("bento-popover"), U = ra("bento-click-outside-directive");
+  return oa((b(), De("div", Ka, [
+    e.label ? (b(), F(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"])) : w("", !0),
+    N("div", {
+      onKeydown: t[0] || (t[0] = sa((...D) => e.onEnterPressedOverInput && e.onEnterPressedOverInput(...D), ["enter"]))
+    }, [
+      H(i, {
+        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.isDateIncorrect,
+        open: e.isDateRangePickerOpen,
+        "display-value": e.dateDisplayValue,
+        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.isDateIncorrect ? (b(), F(I, {
+      key: 1,
+      id: e.dateErrorId,
+      "error-message": e.t("provideDateInAFormat"),
+      class: "b-date-range-picker__error-message"
+    }, null, 8, ["id", "error-message"])) : w("", !0),
+    e.errorMessage ? (b(), F(I, {
+      key: 2,
+      id: e.errorId,
+      "error-message": e.errorMessage,
+      class: "b-date-range-picker__error-message"
+    }, null, 8, ["id", "error-message"])) : w("", !0),
+    e.description ? (b(), F(R, {
+      key: 3,
+      id: e.descriptionId,
+      class: me(["b-date-range-picker__description", e.descriptionConditionalClasses]),
+      el: "span"
+    }, {
+      default: P(() => [
+        q(la(e.description), 1)
+      ]),
+      _: 1
+    }, 8, ["id", "class"])) : w("", !0),
+    e.inputContainerRef ? (b(), F(g, {
+      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: P(() => [
+        H(k, {
+          "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.textInputDisplayValue,
+          onCustomRange: e.onRangeSelectorInput,
+          onInput: e.onDateRangePickerInput,
+          onError: e.onDateRangePickerError,
+          onFormDate: e.onDateRangePickerFormDateInputUpdate
+        }, null, 8, ["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"])) : w("", !0)
+  ])), [
+    [U, e.closeDateRangePicker]
+  ]);
+}
+const Dt = /* @__PURE__ */ $e(Ya, [["render", Ga], ["__scopeId", "data-v-63af5169"]]);
+export {
+  Dt as B,
+  C as D,
+  Q as a,
+  Oe as i
+};
+//# sourceMappingURL=date-range-picker.rytlJBZs.js.map