@adyen/bento-vue2 0.10.0 → 0.10.1-2

package/dist/chunks/index.2e54c294.js

@@ -0,0 +1,801 @@
+import "../assets/index10.css";
+import { defineComponent as $, computed as f, reactive as F, watch as z, ref as C, toRef as X, onMounted as De } from "vue";
+import { BentoPopover as _e, BentoPopoverPositions as ve } from "../popover.js";
+import { g as re } from "./unique-id.a2a2b458.js";
+import { u as G } from "./i18n.8934ef6c.js";
+import { BentoTypography as ee, BentoTypographyElement as te, BentoTypographyVariant as de } from "../typography.js";
+import { t as x, B as fe, a as pe, f as L } from "./index.a7a22907.js";
+import { r as h, t as m, e as b, d as H, f as W } from "./index.f55fdc32.js";
+import { B as Ee, a as ye } from "./button.31b757d1.js";
+import { C as me, a as be } from "./chevron-left.e3a49e62.js";
+import { n as q } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { BentoInputField as Te } from "../input-field.js";
+import { d as se, D as ge } from "./dropdown.0d394d2f.js";
+import { h as Ie } from "./hasSlot.dceac207.js";
+import { B as Me } from "./directive.23e35ab0.js";
+var O = /* @__PURE__ */ ((t) => (t.DAY_OF_MONTH = "d", t.NUMERIC_DAY = "dd", t.SHORT_WEEKDAY = "EEE", t.NUMERIC_MONTH = "MM", t.SHORT_MONTH = "MMM", t.LONG_MONTH = "MMMM", t.LONG_MONTH_YEAR = "MMMM yyyy", t.FULL_YEAR = "yyyy", t.FULL_DATE = "d MMM, yyyy", t.FULL_DATE_MONTH_FIRST = "MMM dd, yyyy", t.NUMERIC_DATE_YEAR_FIRST = "yyyy-MM-dd", t.NUMERIC_DATE_DAY_FIRST = "yyyy-MM-dd", t))(O || {});
+function Ne(t, e) {
+  h(2, arguments);
+  var a = m(t), n = x(e);
+  return isNaN(n) ? /* @__PURE__ */ new Date(NaN) : (n && a.setDate(a.getDate() + n), a);
+}
+function Z(t, e) {
+  h(2, arguments);
+  var a = m(t), n = x(e);
+  if (isNaN(n))
+    return /* @__PURE__ */ new Date(NaN);
+  if (!n)
+    return a;
+  var s = a.getDate(), o = new Date(a.getTime());
+  o.setMonth(a.getMonth() + n + 1, 0);
+  var u = o.getDate();
+  return s >= u ? o : (a.setFullYear(o.getFullYear(), o.getMonth(), s), a);
+}
+function V(t) {
+  h(1, arguments);
+  var e = m(t);
+  return e.setHours(0, 0, 0, 0), e;
+}
+function Q(t, e) {
+  h(2, arguments);
+  var a = V(t), n = V(e);
+  return a.getTime() === n.getTime();
+}
+function he(t) {
+  h(1, arguments);
+  var e = m(t);
+  return e.setDate(1), e.setHours(0, 0, 0, 0), e;
+}
+function Re(t, e) {
+  h(2, arguments);
+  var a = x(e);
+  return Z(t, -a);
+}
+function Se(t, e) {
+  h(2, arguments);
+  var a = m(t), n = m(e);
+  return a.getTime() > n.getTime();
+}
+function Oe(t, e) {
+  h(2, arguments);
+  var a = m(t), n = m(e);
+  return a.getTime() < n.getTime();
+}
+function oe(t, e) {
+  h(2, arguments);
+  var a = m(t).getTime(), n = m(e.start).getTime(), s = m(e.end).getTime();
+  if (!(n <= s))
+    throw new RangeError("Invalid interval");
+  return a >= n && a <= s;
+}
+function ke(t, e, a) {
+  h(2, arguments);
+  var n = a || {}, s = n.locale, o = s && s.options && s.options.weekStartsOn, u = o == null ? 0 : x(o), c = n.weekStartsOn == null ? u : x(n.weekStartsOn);
+  if (!(c >= 0 && c <= 6))
+    throw new RangeError("weekStartsOn must be between 0 and 6 inclusively");
+  var r = m(t), l = x(e), D = r.getDay(), p = l % 7, P = (p + 7) % 7, k = 7 - c, _ = l < 0 || l > 6 ? l - (D + k) % 7 : (P + k) % 7 - (D + k) % 7;
+  return Ne(r, _);
+}
+var y = /* @__PURE__ */ ((t) => (t.SINGLE = "single", t.MIDDLE = "middle", t.BEGINNING = "beginning", t.END = "end", t))(y || {}), R = /* @__PURE__ */ ((t) => (t.SINGLE = "single", t.MIDDLE = "middle", t.BEGINNING = "beginning", t.END = "end", t.SELECTED = "selected", t.UNSELECTED = "unselected", t.CURRENT_DAY = "current-day", t.DISABLED = "disabled", t))(R || {}), Y = /* @__PURE__ */ ((t) => (t.CLICK = "click", t.MOUSE_OVER = "mouseover", t))(Y || {});
+const Ae = $({
+  name: "date-picker-calendar-day",
+  components: { BentoDate: fe },
+  inheritAttrs: !0,
+  props: {
+    /**
+     * Date to be displayed as the calendar day. From 1st to 31st (or end of the month defined in the date)
+     */
+    day: { type: Date, required: !0 },
+    /**
+     * Indicate if a date should be disabled or not
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Changes the state of the calendar day to selected.
+     */
+    selected: { type: Boolean, default: !1 },
+    /**
+     * When the day is selected, this indicates if the selection is a single date or part of a range.
+     * If it's a range it can be at the beginning, middle or end of the selection.
+     */
+    variant: {
+      type: String,
+      default: y.SINGLE,
+      validator: (t) => Object.values(y).includes(t)
+    }
+  },
+  emits: [Y.CLICK, Y.MOUSE_OVER],
+  setup(t, { emit: e }) {
+    const a = f(() => {
+      const o = /* @__PURE__ */ new Date();
+      return t.day.getDate() === o.getDate() && t.day.getMonth() === o.getMonth() && t.day.getFullYear() === o.getFullYear();
+    });
+    return {
+      // Values
+      conditionalClasses: f(() => ({
+        // Variants
+        [`b-date-picker-calendar-day--${R.BEGINNING}`]: t.variant === y.BEGINNING,
+        [`b-date-picker-calendar-day--${R.MIDDLE}`]: t.variant === y.MIDDLE,
+        [`b-date-picker-calendar-day--${R.END}`]: t.variant === y.END,
+        [`b-date-picker-calendar-day--${R.SINGLE}`]: t.variant === y.SINGLE,
+        // Selected
+        [`b-date-picker-calendar-day--${R.UNSELECTED}`]: !t.selected,
+        [`b-date-picker-calendar-day--${R.SELECTED}`]: t.selected,
+        // Current Day
+        [`b-date-picker-calendar-day--${R.CURRENT_DAY}`]: a.value,
+        // Disabled
+        [`b-date-picker-calendar-day--${R.DISABLED}`]: t.disabled
+      })),
+      // Enums
+      BentoDateFormat: pe,
+      DatePickerCalendarDayEvent: Y,
+      // Events
+      onClick: (o) => {
+        t.disabled || e(Y.CLICK, o, t.day);
+      }
+    };
+  }
+});
+var Ce = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("td", { staticClass: "b-date-picker-calendar-day", class: e.conditionalClasses, attrs: { tabindex: "-1" }, on: { click: () => e.onClick(e.day), mouseover: function(n) {
+    return e.$emit(e.DatePickerCalendarDayEvent.MOUSE_OVER);
+  } } }, [a("div", { staticClass: "b-date-picker-calendar-day__wrapper" }, [a("bento-date", { staticClass: "b-date-picker-calendar-day__label", attrs: { date: e.day, format: e.BentoDateFormat.DAY_OF_MONTH } })], 1)]);
+}, Ue = [], Le = /* @__PURE__ */ q(
+  Ae,
+  Ce,
+  Ue,
+  !1,
+  null,
+  "dd56f285",
+  null,
+  null
+);
+const Pe = Le.exports;
+var S = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.MOUSE_OVER = "mouseover", t.NEXT_MONTH = "nextMonth", t.PREVIOUS_MONTH = "previousMonth", t))(S || {}), M = /* @__PURE__ */ ((t) => (t.FIRST = "first", t.LAST = "last", t.MIDDLE = "middle", t.UNIQUE = "unique", t))(M || {}), U = /* @__PURE__ */ ((t) => (t[t.MONDAY = 1] = "MONDAY", t[t.SATURDAY = 6] = "SATURDAY", t[t.SUNDAY = 0] = "SUNDAY", t))(U || {});
+const le = {
+  "en-US": {
+    nextMonth: "Next month",
+    previousMonth: "Previous month"
+  }
+}, we = $({
+  i18n: { messages: le },
+  name: "date-picker-calendar",
+  components: {
+    BentoButton: Ee,
+    BentoTypography: ee,
+    DatePickerCalendarDay: Pe,
+    ChevronLeftIcon: me,
+    ChevronRightIcon: be
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * end of the selected range
+     */
+    endDate: { type: Date, default: null },
+    /**
+     * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     */
+    firstDayOfWeek: {
+      type: Number,
+      default: U.MONDAY,
+      validator: (t) => Object.values(U).includes(t)
+    },
+    /**
+     * Indicate if a date should be disabled or not
+     */
+    isDateDisabled: { type: Function, default: void 0 },
+    /**
+     * Indicates if the calendar is part of a range date picker or a sigle date picker
+     */
+    isRange: { type: Boolean, default: !1 },
+    /**
+     * Month of the year to be displayed in the calendar
+     */
+    month: { type: Date, required: !0 },
+    /**
+     * When rendering multiple calendars, this property allows to render the
+     * Next and Previous calendar buttons to the right, left or not at all
+     * depending on the position: Unique (only 1), First, Middle or Last
+     */
+    position: {
+      type: String,
+      default: M.UNIQUE,
+      validator: (t) => Object.values(M).includes(t)
+    },
+    /**
+     * start of the selected range
+     */
+    startDate: { type: Date, default: null }
+    // can be undefined, eslint complains without default
+  },
+  emits: [
+    S.INPUT,
+    S.NEXT_MONTH,
+    S.PREVIOUS_MONTH,
+    S.MOUSE_OVER
+  ],
+  setup(t, { emit: e }) {
+    const { locale: a } = G({ messages: le }), n = { de: H, enUS: b, fr: W }, s = f(
+      () => Object.values(U).includes(t.firstDayOfWeek) ? t.firstDayOfWeek : U.MONDAY
+    ), o = f(
+      () => [M.FIRST, M.UNIQUE].includes(t.position)
+    ), u = f(
+      () => [M.LAST, M.UNIQUE].includes(t.position)
+    ), c = f(
+      () => L(t.month, "MMMM yyyy", {
+        locale: n[a.value.substring(0, 2)] || b
+      })
+    ), r = f(
+      () => new Array(7).fill(/* @__PURE__ */ new Date()).map((d, T) => {
+        const N = ke(d, s.value + T);
+        return L(N, "EEE", {
+          locale: n[a.value.substring(0, 2)] || b
+        });
+      })
+    ), l = f(() => {
+      const d = [], T = he(t.month);
+      let N = d[d.push([]) - 1];
+      for (; T.getMonth() === t.month.getMonth(); )
+        T.getDay() - s.value === 0 && N.length > 0 && (N = d[d.push([]) - 1]), N.push(V(T)), T.setDate(T.getDate() + 1);
+      return d;
+    });
+    return {
+      // Values
+      daysOfWeek: r,
+      weeksOfMonth: l,
+      formattedMonthDate: c,
+      shouldShowNextMonthButton: u,
+      shouldShowPreviousMonthButton: o,
+      // Enums
+      BentoButtonVariant: ye,
+      BentoTypographyElement: te,
+      BentoTypographyVariant: de,
+      DatePickerCalendarDayVariant: y,
+      DatePickerCalendarEvent: S,
+      // Functions
+      isSelectedDate: (d) => t.startDate && Q(t.startDate, d) ? !0 : t.startDate && t.endDate && oe(d, { start: t.startDate, end: t.endDate }),
+      showNextMonth: () => {
+        e(S.NEXT_MONTH);
+      },
+      showPreviousMonth: () => {
+        e(S.PREVIOUS_MONTH);
+      },
+      dayVariant: (d) => {
+        if (!t.isRange || Q(t.startDate, t.endDate))
+          return y.SINGLE;
+        if (t.startDate && Q(t.startDate, d))
+          return y.BEGINNING;
+        if (t.endDate && Q(t.endDate, d))
+          return y.END;
+        if (t.startDate && t.endDate && oe(d, { start: t.startDate, end: t.endDate }))
+          return y.MIDDLE;
+      },
+      // Events
+      onDayClicked: (d) => {
+        e(S.INPUT, d);
+      }
+    };
+  }
+});
+var Be = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("div", { staticClass: "b-date-picker-calendar" }, [a("div", { staticClass: "b-date-picker-calendar__month-selector" }, [a("div", { staticClass: "b-date-picker-calendar__previous" }, [e.shouldShowPreviousMonthButton ? a("bento-button", { attrs: { variant: e.BentoButtonVariant.TERTIARY }, on: { click: e.showPreviousMonth }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [a("chevron-left-icon", { attrs: { "svg-title": e.$t("previousMonth") } })];
+  }, proxy: !0 }], null, !1, 351640624) }) : e._e()], 1), a("bento-typography", { attrs: { el: e.BentoTypographyElement.H2, variant: e.BentoTypographyVariant.SUBTITLE, "aria-live": "polite" } }, [e._v(" " + e._s(e.formattedMonthDate) + " ")]), a("div", { staticClass: "b-date-picker-calendar__next" }, [e.shouldShowNextMonthButton ? a("bento-button", { attrs: { variant: e.BentoButtonVariant.TERTIARY }, on: { click: e.showNextMonth }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [a("chevron-right-icon", { attrs: { "svg-title": e.$t("nextMonth") } })];
+  }, proxy: !0 }], null, !1, 1260976669) }) : e._e()], 1)], 1), a("table", { staticClass: "b-date-picker-calendar__month-calendar" }, [a("thead", [a("tr", { staticClass: "b-date-picker-calendar__week-header" }, e._l(e.daysOfWeek, function(n, s) {
+    return a("th", { key: s, staticClass: "b-date-picker-calendar__day-of-week" }, [a("bento-typography", { staticClass: "b-date-picker-calendar__day-of-week-font", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.CAPTION } }, [e._v(" " + e._s(n) + " ")])], 1);
+  }), 0)]), a("tbody", e._l(e.weeksOfMonth, function(n, s) {
+    return a("tr", { key: s }, [s === 0 && n.length < 7 ? a("td", { attrs: { colspan: 7 - n.length } }) : e._e(), e._l(n, function(o, u) {
+      return a("date-picker-calendar-day", { key: `data-picker-calendar-day-${u}`, attrs: { day: o, disabled: e.isDateDisabled ? e.isDateDisabled(o) : void 0, selected: e.isSelectedDate(o), variant: e.dayVariant(o) }, on: { click: e.onDayClicked, mouseover: function(c) {
+        return e.$emit(e.DatePickerCalendarEvent.MOUSE_OVER, o);
+      } } });
+    })], 2);
+  }), 0)])]);
+}, xe = [], Ye = /* @__PURE__ */ q(
+  we,
+  Be,
+  xe,
+  !1,
+  null,
+  "a312067c",
+  null,
+  null
+);
+const K = Ye.exports;
+var E = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.START_DATE_SELECTED = "start-date-selected", t.END_DATE_SELECTED = "end-date-selected", t))(E || {});
+const Fe = ({ selectedDate: t }, e) => {
+  const a = F({
+    startDate: null,
+    endDate: null
+  });
+  return z(
+    () => t.value,
+    () => {
+      a.startDate = t.value, a.endDate = void 0;
+    },
+    { immediate: !0 }
+  ), {
+    internalValue: a,
+    onDateInput: (s) => {
+      e(E.INPUT, s);
+    },
+    // Empty function to prevent the listeners from throwing a warning
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onMouseOver: () => {
+    }
+  };
+}, Ve = ({ selectedDate: t, isDateDisabled: e }, a) => {
+  const n = F({
+    startDate: null,
+    endDate: null
+  }), s = C(null);
+  z(
+    () => t.value,
+    () => {
+      let { startDate: r = null, endDate: l = null } = t.value || {};
+      r && (r = V(r)), l && (l = V(l)), !(r && e && e(r) || l && e && e(l) || r && l && Se(r, l)) && (n.startDate = r, n.endDate = l);
+    },
+    { immediate: !0 }
+  );
+  const o = (r, l) => {
+    n.startDate = r, n.endDate = l;
+  };
+  return {
+    internalValue: n,
+    onDateInput: (r) => {
+      s.value ? (s.value = null, o(n.startDate, r), a(E.INPUT, n)) : (s.value = r, o(r, r), a(E.START_DATE_SELECTED, r), a(E.END_DATE_SELECTED, r));
+    },
+    onMouseOver: (r) => {
+      !s.value || e && e(r) || (Oe(r, s.value) ? (o(r, s.value), a(E.START_DATE_SELECTED, r), a(E.END_DATE_SELECTED, s.value)) : (o(s.value, r), a(E.START_DATE_SELECTED, s.value), a(E.END_DATE_SELECTED, r)));
+    }
+  };
+}, $e = $({
+  name: "bento-date-picker-calendar-pane",
+  components: {
+    DatePickerCalendar: K
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     */
+    firstDayOfWeek: K.props.firstDayOfWeek,
+    /**
+     * Indicate if a date should be disabled or not
+     */
+    isDateDisabled: K.props.isDateDisabled,
+    /**
+     * Enables the Date Range calendar
+     */
+    isRange: K.props.isRange,
+    /**
+     * Number of months rendered on pane
+     */
+    numberOfMonths: {
+      type: Number,
+      default: 3,
+      validator: (t) => t >= 1
+    },
+    /**
+     * Selected date. Can be a single Date or a DatePickerCalendarPaneRangeDate
+     * instance that contains startDate and endDate attributes.
+     */
+    value: { type: [Date, Object], default: void 0 }
+  },
+  emit: [
+    E.INPUT,
+    E.START_DATE_SELECTED,
+    E.END_DATE_SELECTED
+  ],
+  setup(t, { emit: e }) {
+    const a = C();
+    z(
+      () => t.value,
+      () => {
+        t.isRange ? a.value = t.value.startDate || /* @__PURE__ */ new Date() : a.value = t.value || /* @__PURE__ */ new Date();
+      },
+      { immediate: !0 }
+    );
+    const n = f(() => ({
+      "b-date-picker-calendar-pane__range": t.isRange
+    })), {
+      internalValue: s,
+      onDateInput: o,
+      onMouseOver: u
+    } = t.isRange ? Ve(
+      {
+        selectedDate: X(t, "value"),
+        isDateDisabled: t.isDateDisabled
+      },
+      e
+    ) : Fe(
+      {
+        selectedDate: X(t, "value")
+      },
+      e
+    );
+    return {
+      // Values
+      baseDate: a,
+      conditionalClasses: n,
+      internalValue: s,
+      // Methods
+      calculateOffsetMonth: (p) => Z(a.value, p),
+      calendarPosition: (p) => t.numberOfMonths === 1 ? M.UNIQUE : p === 0 ? M.FIRST : p === t.numberOfMonths - 1 ? M.LAST : M.MIDDLE,
+      // Events
+      onDateInput: o,
+      onMouseOver: u,
+      calculateNextMonths: () => {
+        a.value = Z(a.value, 1);
+      },
+      calculatePreviousMonths: () => {
+        a.value = Re(a.value, 1);
+      }
+    };
+  }
+});
+var Ge = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("div", { staticClass: "b-date-picker-calendar-pane", class: e.conditionalClasses }, e._l(e.numberOfMonths, function(n, s) {
+    return a("date-picker-calendar", { key: `date-picker-calendar-range-${s}`, attrs: { "first-day-of-week": e.firstDayOfWeek, "is-date-disabled": e.isDateDisabled, month: e.calculateOffsetMonth(s), position: e.calendarPosition(s), "is-range": e.isRange, "start-date": e.internalValue.startDate, "end-date": e.internalValue.endDate }, on: { input: e.onDateInput, mouseover: e.onMouseOver, nextMonth: e.calculateNextMonths, previousMonth: e.calculatePreviousMonths } });
+  }), 1);
+}, He = [], We = /* @__PURE__ */ q(
+  $e,
+  Ge,
+  He,
+  !1,
+  null,
+  "07f9e235",
+  null,
+  null
+);
+const B = We.exports;
+var A = /* @__PURE__ */ ((t) => (t.INPUT = "input", t))(A || {}), w = /* @__PURE__ */ ((t) => (t.SINGLE_CALENDAR = "single-calendar", t.RANGE_CALENDAR = "range-calendar", t))(w || {}), I = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.ERROR = "error", t.FORM_DATE = "form-date", t))(I || {});
+const ie = 300, qe = $({
+  name: "date-picker-calendar-range",
+  components: {
+    BentoInputField: Te,
+    BentoTypography: ee,
+    DatePickerCalendarPane: B
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     */
+    firstDayOfWeek: B.props.firstDayOfWeek,
+    /**
+     * Indicate if a date should be disabled or not
+     */
+    isDateDisabled: B.props.isDateDisabled,
+    /**
+     * Number of months rendered on pane
+     */
+    numberOfMonths: B.props.numberOfMonths,
+    /**
+     * Ranges form persistance data
+     */
+    dateFormData: { type: Object, default: () => ({ startDate: void 0, endDate: void 0 }) },
+    /**
+     * Selected date
+     */
+    value: { type: Object, default: void 0 }
+  },
+  emits: [
+    I.INPUT,
+    I.ERROR,
+    I.FORM_DATE
+  ],
+  setup(t, { emit: e, slots: a }) {
+    var N, j;
+    const { locale: n } = G(void 0, !0), s = { de: H, enUS: b, fr: W }, o = F({
+      startDate: (N = t.value) == null ? void 0 : N.startDate,
+      endDate: (j = t.value) == null ? void 0 : j.endDate
+    }), u = (i) => i ? L(i, O.NUMERIC_DATE_YEAR_FIRST, {
+      locale: s[n.value.substring(0, 2)] || b
+    }) : "", c = C(!1), r = C(!1), l = F({
+      startDate: t.dateFormData.startDate,
+      endDate: t.dateFormData.endDate
+    }), D = (i) => {
+      e(I.INPUT, i);
+    }, p = (i) => {
+      const g = (ae) => t.isDateDisabled ? !t.isDateDisabled(ae) : !0;
+      return /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(i) && g(new Date(i));
+    };
+    De(() => {
+      t.dateFormData.startDate && !p(t.dateFormData.startDate) && (c.value = !0), t.dateFormData.endDate && !p(t.dateFormData.endDate) && (r.value = !0);
+    });
+    const P = (i) => {
+      l.startDate = u(i);
+    }, k = (i) => {
+      l.endDate = u(i);
+    }, _ = (i) => {
+      const g = t.value[i];
+      if (g)
+        return g;
+      if (t.dateFormData[i] && p(t.dateFormData[i]))
+        return new Date(t.dateFormData[i]);
+    }, d = se((i) => {
+      if (l.startDate = i, p(i)) {
+        c.value = !1, o.startDate = new Date(i);
+        const g = _("endDate");
+        e(I.FORM_DATE, {
+          startDate: new Date(i),
+          endDate: g
+        }), e(I.INPUT, {
+          startDate: new Date(i),
+          endDate: g
+        });
+      } else
+        c.value = !0, e(I.ERROR, { ...l });
+    }, ie), T = se((i) => {
+      if (l.endDate = i, p(i)) {
+        r.value = !1, o.endDate = new Date(i);
+        const g = _("startDate");
+        e(I.FORM_DATE, {
+          startDate: g,
+          endDate: new Date(i)
+        }), e(I.INPUT, {
+          startDate: g,
+          endDate: new Date(i)
+        });
+      } else
+        r.value = !0, e(I.ERROR, { ...l });
+    }, ie);
+    return {
+      // Values
+      dateTextInput: l,
+      endDateError: r,
+      startDateError: c,
+      // Enums
+      BentoTypographyElement: te,
+      // Methods
+      hasSlot: Ie(a),
+      // Events
+      onDateInput: D,
+      onStartDateSelected: P,
+      onEndDateSelected: k,
+      onStartDateInput: d,
+      onEndDateInput: T
+    };
+  }
+});
+var je = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("div", { staticClass: "b-date-picker-calendar-range" }, [a("div", { staticClass: "b-date-picker-calendar-range__form-container" }, [a("div", { staticClass: "b-date-picker-calendar-range__form" }, [e.hasSlot("title") ? [e._t("title")] : e._e(), a("div", [a("bento-typography", { staticClass: "b-date-picker-calendar-range__label", attrs: { stronger: "", el: e.BentoTypographyElement.SPAN } }, [e._v(" From ")]), a("div", [a("bento-input-field", { staticClass: "b-date-picker-calendar-range__form-input", attrs: { value: e.dateTextInput.startDate, error: e.startDateError }, on: { input: e.onStartDateInput }, scopedSlots: e._u([{ key: "description", fn: function() {
+    return [e._v("YYYY-MM-DD")];
+  }, proxy: !0 }]) })], 1)], 1), a("div", [a("bento-typography", { staticClass: "b-date-picker-calendar-range__label", attrs: { stronger: "", el: e.BentoTypographyElement.SPAN } }, [e._v(" To ")]), a("div", [a("bento-input-field", { staticClass: "b-date-picker-calendar-range__form-input", attrs: { value: e.dateTextInput.endDate, error: e.endDateError }, on: { input: e.onEndDateInput }, scopedSlots: e._u([{ key: "description", fn: function() {
+    return [e._v("YYYY-MM-DD")];
+  }, proxy: !0 }]) })], 1)], 1)], 2), e.hasSlot("actions") ? a("div", [e._t("actions")], 2) : e._e()]), a("div", { staticClass: "b-date-picker-calendar-range__calendars-container" }, [a("date-picker-calendar-pane", { attrs: { value: e.value, "first-day-of-week": e.firstDayOfWeek, "is-date-disabled": e.isDateDisabled, "number-of-months": e.numberOfMonths, "is-range": "" }, on: { input: e.onDateInput, "start-date-selected": e.onStartDateSelected, "end-date-selected": e.onEndDateSelected } })], 1)]);
+}, Qe = [], Ke = /* @__PURE__ */ q(
+  qe,
+  je,
+  Qe,
+  !1,
+  null,
+  "0f8d089a",
+  null,
+  null
+);
+const Xe = Ke.exports, ze = ({ datePickerValue: t, isDateIncorrect: e }) => {
+  const { locale: a, t: n } = G(), s = { de: H, enUS: b, fr: W }, o = C(null);
+  return {
+    // Values
+    dateDisplayValue: f(() => e.value ? o.value : t.value ? L(t.value, O.FULL_DATE, {
+      locale: s[a.value.substring(0, 2)] || b
+    }) : n("selectDate")),
+    textInputDisplayValue: o,
+    // Methods
+    formatTextInputDisplayValue: () => {
+      o.value = L(t.value, O.NUMERIC_DATE_YEAR_FIRST, {
+        locale: s[a.value.substring(0, 2)] || b
+      });
+    }
+  };
+}, Je = ({
+  datePickerValue: t,
+  isDateIncorrect: e
+}) => {
+  const { locale: a, t: n } = G(), s = { de: H, enUS: b, fr: W }, o = (l, D) => L(l, D, {
+    locale: s[a.value.substring(0, 2)] || b
+  }), u = F({
+    startDate: t.value.startDate ? o(t.value.startDate, O.NUMERIC_DATE_YEAR_FIRST) : void 0,
+    endDate: t.value.endDate ? o(t.value.endDate, O.NUMERIC_DATE_YEAR_FIRST) : void 0
+  });
+  return {
+    // Values
+    dateDisplayValue: f(() => {
+      if (e.value)
+        return `${u.startDate || ""} - ${u.endDate || ""}`;
+      if (!t.value || !t.value.startDate && !t.value.endDate)
+        return n("selectDateRange");
+      const { startDate: l, endDate: D } = u;
+      return `${o(new Date(l), O.FULL_DATE_MONTH_FIRST)} - ${o(
+        new Date(D),
+        O.FULL_DATE_MONTH_FIRST
+      )}`;
+    }),
+    textInputDisplayValue: u,
+    // Methods
+    formatTextInputDisplayValue: () => ""
+  };
+}, ue = {
+  "en-US": {
+    optional: "optional",
+    required: "required",
+    provideDateInAFormat: "Provide date in a YYYY-MM-DD format",
+    selectDate: "Select a date",
+    selectDateRange: "Select a date range",
+    selectedDateIsNotAvailable: "Selected date is not available"
+  }
+}, Ze = $({
+  i18n: { messages: ue },
+  name: "bento-date-picker",
+  components: {
+    BentoTypography: ee,
+    BentoPopover: _e,
+    DatePickerCalendarPane: B,
+    DatePickerCalendarRange: Xe,
+    DropdownInputDefault: ge
+  },
+  directives: { BentoClickOutsideDirective: Me },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Descriptive supporting text visbile underneath the dropdown.
+     */
+    description: { type: String, default: void 0 },
+    /**
+     * Disables dropdown functionality.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     */
+    firstDayOfWeek: {
+      type: Number,
+      default: U.MONDAY,
+      validator: (t) => Object.values(U).includes(t)
+    },
+    /**
+     * Indicate if a date should be disabled or not
+     */
+    isDateDisabled: { type: Function, default: void 0 },
+    /**
+     * 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 },
+    /**
+     * Highlights the dropdown is required.
+     */
+    required: { type: Boolean, default: !1 },
+    /**
+     * Number of months rendered on pane
+     */
+    numberOfMonths: B.props.numberOfMonths,
+    /**
+     * Selected date
+     */
+    value: { type: [Date, Object], default: null },
+    /**
+     * Allows to render a single date calendar or a range calendar
+     */
+    variant: {
+      type: String,
+      default: w.SINGLE_CALENDAR,
+      validator: (t) => Object.values(w).includes(t)
+    }
+  },
+  emits: [A.INPUT],
+  setup(t, { emit: e }) {
+    const { locale: a, t: n } = G({ messages: ue }), s = { de: H, enUS: b, fr: W }, o = re("bento-date-picker-container"), u = re("bento-date-picker-label"), c = f(() => t.label || n("datePicker", { name: o })), r = C(!1), l = C(null), D = C(!1);
+    z(
+      () => t.disabled,
+      () => {
+        t.disabled && D.value && (D.value = !1);
+      }
+    );
+    const p = f(() => ({
+      "b-date-picker__description--error": r.value
+    })), P = f(() => ({
+      "b-date-picker__container-range": t.variant === w.RANGE_CALENDAR
+    })), { dateDisplayValue: k, textInputDisplayValue: _, formatTextInputDisplayValue: d } = t.variant === "single-calendar" ? ze({
+      datePickerValue: X(t, "value"),
+      isDateIncorrect: r
+    }) : Je({
+      datePickerValue: X(t, "value"),
+      isDateIncorrect: r
+    }), T = f(
+      () => t.variant === w.SINGLE_CALENDAR ? _.value : void 0
+    ), N = f(() => t.isDateDisabled && t.isDateDisabled(new Date(_.value)) ? n("selectedDateIsNotAvailable") : r.value ? n("provideDateInAFormat") : t.description), j = (v) => t.isDateDisabled ? !t.isDateDisabled(v) : !0, i = () => {
+      D.value = !1, r.value || (_.value = null);
+    };
+    return {
+      // Refs
+      inputContainerRef: l,
+      // Values,
+      dateDisplayValue: k,
+      datePickerContainerId: o,
+      descriptionConditionalClasses: p,
+      dropdownValue: T,
+      isDateIncorrect: r,
+      isDatePickerOpen: D,
+      labelId: u,
+      popoverAriaLabel: c,
+      popoverConditionalClasses: P,
+      supportDescriptionText: N,
+      textInputDisplayValue: _,
+      // Enums
+      BentoTypographyElement: te,
+      BentoTypographyVariant: de,
+      BentoPopoverPositions: ve,
+      BentoDatePickerVariant: w,
+      // Events
+      closeDatePicker: i,
+      clearDatePickerValue: async () => {
+        r.value && (r.value = !1, _.value = null), e(A.INPUT, null);
+      },
+      onDateSelected: (v) => {
+        r.value = !1, i(), e(A.INPUT, v);
+      },
+      openDatePicker: () => {
+        D.value = !0, d();
+      },
+      onDateInputChange: (v) => {
+        _.value = v, /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(v) && j(new Date(v)) ? (r.value = !1, e(A.INPUT, new Date(v))) : v && (r.value = !0, e(A.INPUT, null));
+      },
+      onEnterPressedOverInput: () => {
+        r.value || (D.value = !1);
+      },
+      onDatePickerRangeInput: (v) => {
+        const J = (ne) => L(ne, O.NUMERIC_DATE_YEAR_FIRST, {
+          locale: s[a.value.substring(0, 2)] || b
+        });
+        _.startDate = J(
+          v.startDate
+        ), _.endDate = J(
+          v.endDate
+        ), e(A.INPUT, v);
+      },
+      onDatePickerRangeError: (v) => {
+        r.value = !0, _.startDate = v.startDate, _.endDate = v.endDate, e(A.INPUT, { startDate: null, endDate: null });
+      },
+      onDatePickerRangeFormDateInputUpdate: () => {
+        r.value = !1;
+      }
+    };
+  }
+});
+var et = function() {
+  var e = this, a = e._self._c;
+  return e._self._setupProxy, a("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.closeDatePicker, expression: "closeDatePicker" }], staticClass: "b-date-picker" }, [e.label ? a("div", { staticClass: "b-date-picker__label", attrs: { id: e.labelId } }, [a("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN, stronger: "" } }, [e._v(e._s(e.label))]), e.optional ? a("bento-typography", { staticClass: "b-date-picker__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("optional")) + ") ")]) : e._e(), e.required ? a("bento-typography", { staticClass: "b-date-picker__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("required")) + ") ")]) : e._e()], 1) : e._e(), a("div", { on: { keydown: function(n) {
+    return !n.type.indexOf("key") && e._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : e.onEnterPressedOverInput.apply(null, arguments);
+  } } }, [a("dropdown-input-default", { ref: "inputContainerRef", attrs: { ariaControls: e.datePickerContainerId, ariaExpanded: e.isDatePickerOpen, "aria-labelledby": e.label ? e.labelId : null, disabled: e.disabled, "dynamic-filtering": e.variant === "single-calendar", "is-invalid": e.isDateIncorrect, open: e.isDatePickerOpen, value: e.dropdownValue, "display-value": e.dateDisplayValue }, on: { input: e.onDateInputChange, open: e.openDatePicker, clear: e.clearDatePickerValue, close: e.closeDatePicker } })], 1), e.description ? a("bento-typography", { staticClass: "b-date-picker__description", class: e.descriptionConditionalClasses, attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.supportDescriptionText) + " ")]) : e._e(), e.inputContainerRef ? a("bento-popover", { staticClass: "b-date-picker__container", class: e.popoverConditionalClasses, attrs: { open: e.isDatePickerOpen, "target-element": e.inputContainerRef, "disable-focus-trap": !0, "aria-label": e.popoverAriaLabel, position: e.BentoPopoverPositions.BOTTOM_START, "without-space": e.variant === e.BentoDatePickerVariant.RANGE_CALENDAR, "fit-content": "" } }, [e.variant === e.BentoDatePickerVariant.SINGLE_CALENDAR ? a("date-picker-calendar-pane", { attrs: { "first-day-of-week": e.firstDayOfWeek, "is-date-disabled": e.isDateDisabled, "number-of-months": 1, value: e.value }, on: { input: e.onDateSelected } }) : e._e(), e.variant === e.BentoDatePickerVariant.RANGE_CALENDAR ? a("date-picker-calendar-range", { attrs: { value: e.value, "first-day-of-week": e.firstDayOfWeek, "is-date-disabled": e.isDateDisabled, "number-of-months": e.numberOfMonths, "date-form-data": e.textInputDisplayValue }, on: { input: e.onDatePickerRangeInput, error: e.onDatePickerRangeError, "form-date": e.onDatePickerRangeFormDateInputUpdate } }) : e._e()], 1) : e._e()], 1);
+}, tt = [], at = /* @__PURE__ */ q(
+  Ze,
+  et,
+  tt,
+  !1,
+  null,
+  "36fed905",
+  null,
+  null
+);
+const It = at.exports;
+export {
+  It as B,
+  U as D,
+  A as a,
+  w as b,
+  O as c,
+  B as d,
+  Xe as e
+};
+//# sourceMappingURL=index.2e54c294.js.map