@adyen/bento-vue3 1.7.0 → 1.8.0

package/dist/chunks/index.e9156fe3.js

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