@adyen/bento-vue2 1.2.0 → 1.3.0

package/dist/chunks/{index.f0d99471.js → index.10aaf539.js}

@@ -1,23 +1,24 @@
-import { defineComponent as oe, reactive as L, ref as y, computed as O, onMounted as ge, watch as ve, toRef as Te } from "vue";
-import { c as Re } from "./dropdown-default-textbox.a5eca928.js";
-import { BentoPopover as Ie, BentoPopoverPositions as be } from "../popover.js";
-import { g as N } from "./unique-id.a2a2b458.js";
+import { defineComponent as le, reactive as H, ref as b, computed as O, onMounted as ve, toRef as re, watch as Te } from "vue";
+import { c as Re } from "./dropdown-default-textbox.819e43f7.js";
+import { BentoPopover as Ie, BentoPopoverPositions as ye } from "../popover.js";
+import { g as B } from "./unique-id.a2a2b458.js";
 import { u as W } from "./i18n.155748d6.js";
-import { B as ie, a as le, b as ye } from "./index.175f9e2d.js";
-import { t as K, f as M } from "./index.d07f9800.js";
+import { B as de, a as ce, b as be } from "./index.56858f4e.js";
+import { t as K, f as M } from "./index.73d50fa6.js";
 import { r as G, t as j, e as I, d as z, f as J } from "./index.f55fdc32.js";
-import { f as ne, v as ke, D as R } from "./date-input.9186a0bf.js";
-import { BentoInputField as Ee } from "../input-field.js";
-import { B as Se } from "./dropdown.368486b1.js";
+import { f as se, v as ke, D as R } from "./date-input.9186a0bf.js";
+import { u as Ee } from "./use-form-layout-loading.d03e5d48.js";
+import { BentoInputField as Se } from "../input-field.js";
+import { B as Ce } from "./dropdown.c05678d0.js";
 import { d as $ } from "./debounce.f8d92e44.js";
-import { u as Ce } from "./use-has-slot.068222e6.js";
-import { e as V } from "./index.fdf12170.js";
-import { C as x } from "./calendar.8f50a65a.js";
-import { n as de } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { E as Pe } from "./error-message.a581a172.js";
-import { B as Oe } from "./directive.0408e565.js";
-import "../assets/index25.css";
-function Me(t, e) {
+import { u as Pe } from "./use-has-slot.068222e6.js";
+import { e as L } from "./index.fdf12170.js";
+import { C as x } from "./calendar.0ae43a96.js";
+import { n as ue } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { E as Oe } from "./error-message.0433b539.js";
+import { B as Me } from "./directive.0408e565.js";
+import "../assets/index9.css";
+function Fe(t, e) {
   G(2, arguments);
   var n = j(t), o = K(e);
   return n.setHours(o), n;
@@ -27,23 +28,23 @@ function he(t, e) {
   var n = j(t), o = K(e);
   return n.setMinutes(o), n;
 }
-function Fe(t, e) {
+function we(t, e) {
   G(2, arguments);
   var n = j(t), o = K(e);
   return n.setSeconds(o), n;
 }
-var l = /* @__PURE__ */ ((t) => (t.CUSTOM_RANGE = "custom-range", t.INPUT = "input", t.ERROR = "error", t.FORM_DATE = "form-date", t))(l || {});
-const we = /[\d]/, Ae = /^\d{2}$/, Ue = /^\d{2}:\d{2}$/, Ne = (t) => {
-  const { selectionStart: e } = t.target, n = we.test(t.key) || t.key === "Backspace", o = [1, 2, 4, 5].includes(e) && t.key === ":";
+var i = /* @__PURE__ */ ((t) => (t.CUSTOM_RANGE = "custom-range", t.INPUT = "input", t.ERROR = "error", t.FORM_DATE = "form-date", t))(i || {});
+const Ae = /[\d]/, Ue = /^\d{2}$/, Ne = /^\d{2}:\d{2}$/, Be = (t) => {
+  const { selectionStart: e } = t.target, n = Ae.test(t.key) || t.key === "Backspace", o = [1, 2, 4, 5].includes(e) && t.key === ":";
   !n && !o && t.preventDefault();
-}, re = (t) => {
+}, oe = (t) => {
   if (!t)
     return t;
   let e = t;
   if (e.length === 1 && parseInt(t, 10) > 2)
     return `0${e}:`;
   const [n, o] = e.slice(-2);
-  return [2, 5].includes(e.length) && o === ":" && (e = `${e.slice(0, e.length - 2)}0${n}`), (Ae.test(e) || Ue.test(e)) && (e += ":"), e;
+  return [2, 5].includes(e.length) && o === ":" && (e = `${e.slice(0, e.length - 2)}0${n}`), (Ue.test(e) || Ne.test(e)) && (e += ":"), e;
 }, xe = {
   "en-US": {
     customRange: "Custom range",
@@ -55,13 +56,13 @@ const we = /[\d]/, Ae = /^\d{2}$/, Ue = /^\d{2}:\d{2}$/, Ne = (t) => {
     timeFrom: "Time from",
     timeTo: "Time to"
   }
-}, se = 300, H = "customRange", Be = oe({
+}, ie = 300, V = "customRange", $e = le({
   i18n: { messages: xe },
   name: "date-range-picker-calendar",
   components: {
-    BentoDropdown: Se,
-    BentoInputField: Ee,
-    BentoTypography: ie,
+    BentoDropdown: Ce,
+    BentoInputField: Se,
+    BentoTypography: de,
     Calendar: x
   },
   props: {
@@ -109,165 +110,165 @@ const we = /[\d]/, Ae = /^\d{2}$/, Ue = /^\d{2}:\d{2}$/, Ne = (t) => {
     value: { type: Object, default: void 0 }
   },
   emits: [
-    l.CUSTOM_RANGE,
-    l.INPUT,
-    l.ERROR,
-    l.FORM_DATE
+    i.CUSTOM_RANGE,
+    i.INPUT,
+    i.ERROR,
+    i.FORM_DATE
   ],
   setup(t, { emit: e, slots: n }) {
-    var te, ae;
-    const { locale: o, t: b } = W(), g = { de: z, enUS: I, fr: J }, u = L({
-      startDate: (te = t.value) == null ? void 0 : te.startDate,
-      endDate: (ae = t.value) == null ? void 0 : ae.endDate
-    }), m = y(H), h = O(() => ({
+    var ae, ne;
+    const { locale: o, t: y } = W(), g = { de: z, enUS: I, fr: J }, c = H({
+      startDate: (ae = t.value) == null ? void 0 : ae.startDate,
+      endDate: (ne = t.value) == null ? void 0 : ne.endDate
+    }), m = b(V), F = O(() => ({
       "b-date-range-picker-calendar__form-input-wrapper": t.allowTimeInput
-    })), F = O(() => t.quickSelectRanges ? [
-      { label: b("customRange"), value: H },
+    })), h = O(() => t.quickSelectRanges ? [
+      { label: y("customRange"), value: V },
       ...t.quickSelectRanges
     ] : []), v = () => {
-      t != null && t.quickSelectRanges && (m.value = H);
-    }, d = (a) => a ? M(a, R.NUMERIC_DATE_YEAR_FIRST, {
+      t != null && t.quickSelectRanges && (m.value = V);
+    }, l = (a) => a ? M(a, R.NUMERIC_DATE_YEAR_FIRST, {
       locale: g[o.value.substring(0, 2)] || I
     }) : "", T = (a) => a ? M(a, R.HOUR_MINUTE_SECONDS, {
       locale: g[o.value.substring(0, 2)] || I
-    }) : "", D = y(!1), f = y(!1), p = y(!1), i = y(!1), s = L({
+    }) : "", u = b(!1), f = b(!1), D = b(!1), p = b(!1), r = H({
       startDate: t.dateFormData.startDate,
       endDate: t.dateFormData.endDate,
       startTime: t.dateFormData.startTime,
       endTime: t.dateFormData.endTime
     }), Y = (a) => {
-      e(l.INPUT, a);
-    }, B = (a) => /^(?:[01]\d|2[01234]):(?:[012345]\d):(?:[012345]\d)$/.test(a), w = (a, r) => {
-      if (!r || !B(r))
+      e(i.INPUT, a);
+    }, w = (a) => /^(?:[01]\d|2[01234]):(?:[012345]\d):(?:[012345]\d)$/.test(a), A = (a, s) => {
+      if (!s || !w(s))
         return a;
       let _ = new Date(a);
-      const [S, q, _e] = r.split(":");
-      return _ = Me(_, parseInt(S, 10)), _ = he(_, parseInt(q, 10)), _ = Fe(_, parseInt(_e, 10)), _;
+      const [S, q, ge] = s.split(":");
+      return _ = Fe(_, parseInt(S, 10)), _ = he(_, parseInt(q, 10)), _ = we(_, parseInt(ge, 10)), _;
     }, E = (a) => {
-      const r = (S) => t.isDateDisabled ? !t.isDateDisabled(S) : !0;
-      return /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(a) && r(new Date(a));
+      const s = (S) => t.isDateDisabled ? !t.isDateDisabled(S) : !0;
+      return /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(a) && s(new Date(a));
     };
-    ge(() => {
-      t.dateFormData.startDate && !E(t.dateFormData.startDate) ? D.value = !0 : (D.value = !1, p.value = !1), t.dateFormData.endDate && !E(t.dateFormData.endDate) ? f.value = !0 : (f.value = !1, i.value = !1);
+    ve(() => {
+      t.dateFormData.startDate && !E(t.dateFormData.startDate) ? u.value = !0 : (u.value = !1, D.value = !1), t.dateFormData.endDate && !E(t.dateFormData.endDate) ? f.value = !0 : (f.value = !1, p.value = !1);
     });
     const Q = (a) => {
-      var r;
-      v(), s.startDate = d(a), s.startTime ? p.value && (s.startTime = (r = t.dateFormData) == null ? void 0 : r.startTime) : s.startTime = T(a), D.value = !1, p.value = !1;
+      var s;
+      v(), r.startDate = l(a), r.startTime ? D.value && (r.startTime = (s = t.dateFormData) == null ? void 0 : s.startTime) : r.startTime = T(a), u.value = !1, D.value = !1;
     }, X = (a) => {
-      var r;
-      s.endDate = d(a), s.endTime ? i.value && (s.endTime = (r = t.dateFormData) == null ? void 0 : r.endTime) : s.endTime = T(V(a)), f.value = !1, i.value = !1;
-    }, A = (a) => {
-      const r = t.value[a];
-      if (r)
-        return r;
+      var s;
+      r.endDate = l(a), r.endTime ? p.value && (r.endTime = (s = t.dateFormData) == null ? void 0 : s.endTime) : r.endTime = T(L(a)), f.value = !1, p.value = !1;
+    }, U = (a) => {
+      const s = t.value[a];
+      if (s)
+        return s;
       if (t.dateFormData[a] && E(t.dateFormData[a]))
         return new Date(t.dateFormData[a]);
     }, Z = $((a) => {
       if (E(a)) {
-        D.value = !1, u.startDate = w(new Date(a), s.startTime);
-        const r = A("endDate");
-        e(l.FORM_DATE, {
+        u.value = !1, c.startDate = A(new Date(a), r.startTime);
+        const s = U("endDate");
+        e(i.FORM_DATE, {
           startDate: new Date(a),
-          endDate: r
-        }), e(l.INPUT, {
+          endDate: s
+        }), e(i.INPUT, {
           startDate: new Date(a),
-          endDate: r
+          endDate: s
         });
       } else
-        D.value = !0, e(l.ERROR, { ...s });
-    }, se), ee = (a) => {
-      v(), s.startDate = ne(a), Z(s.startDate);
-    }, c = $((a) => {
+        u.value = !0, e(i.ERROR, { ...r });
+    }, ie), ee = (a) => {
+      v(), r.startDate = se(a), Z(r.startDate);
+    }, te = $((a) => {
       if (E(a)) {
-        f.value = !1, u.endDate = w(new Date(a), s.endTime);
-        const r = A("startDate");
-        e(l.FORM_DATE, {
-          startDate: r,
-          endDate: new Date(u.endDate),
+        f.value = !1, c.endDate = A(new Date(a), r.endTime);
+        const s = U("startDate");
+        e(i.FORM_DATE, {
+          startDate: s,
+          endDate: new Date(c.endDate),
           startTime: t.dateFormData.endTime,
           endTime: a
-        }), e(l.INPUT, {
-          startDate: r,
-          endDate: new Date(u.endDate)
+        }), e(i.INPUT, {
+          startDate: s,
+          endDate: new Date(c.endDate)
         });
       } else
-        f.value = !0, e(l.ERROR, { ...s });
-    }, se), k = (a) => {
-      v(), s.endDate = ne(a), c(s.endDate);
-    }, U = (a) => {
+        f.value = !0, e(i.ERROR, { ...r });
+    }, ie), d = (a) => {
+      v(), r.endDate = se(a), te(r.endDate);
+    }, k = (a) => {
       ke(a);
-    }, ce = $((a) => {
-      if (B(a)) {
-        p.value = !1, u.startDate = w(u.startDate, a);
-        const r = A("endDate");
-        e(l.FORM_DATE, {
-          startDate: new Date(u.startDate),
-          endDate: r,
+    }, N = $((a) => {
+      if (w(a)) {
+        D.value = !1, c.startDate = A(c.startDate, a);
+        const s = U("endDate");
+        e(i.FORM_DATE, {
+          startDate: new Date(c.startDate),
+          endDate: s,
           startTime: a,
           endTime: t.dateFormData.endTime
-        }), e(l.INPUT, {
-          startDate: new Date(u.startDate),
-          endDate: r
+        }), e(i.INPUT, {
+          startDate: new Date(c.startDate),
+          endDate: s
         });
       } else
-        p.value = !0, e(l.ERROR, { ...s });
-    }), ue = $((a) => {
-      if (B(a)) {
-        i.value = !1, u.endDate = w(u.endDate, a);
-        const r = A("startDate");
-        e(l.FORM_DATE, {
-          startDate: r,
-          endDate: new Date(u.endDate),
+        D.value = !0, e(i.ERROR, { ...r });
+    }), De = $((a) => {
+      if (w(a)) {
+        p.value = !1, c.endDate = A(c.endDate, a);
+        const s = U("startDate");
+        e(i.FORM_DATE, {
+          startDate: s,
+          endDate: new Date(c.endDate),
           startTime: t.dateFormData.startTime,
           endTime: a
-        }), e(l.INPUT, {
-          startDate: r,
-          endDate: new Date(u.endDate)
+        }), e(i.INPUT, {
+          startDate: s,
+          endDate: new Date(c.endDate)
         });
       } else
-        i.value = !0, e(l.ERROR, { ...s });
-    }), De = (a) => {
-      v(), s.startTime = re(a), ce(s.startTime);
-    }, pe = (a) => {
-      v(), s.endTime = re(a), ue(s.endTime);
+        p.value = !0, e(i.ERROR, { ...r });
+    }), pe = (a) => {
+      v(), r.startTime = oe(a), N(r.startTime);
     }, me = (a) => {
-      Ne(a);
+      v(), r.endTime = oe(a), De(r.endTime);
     }, fe = (a) => {
+      Be(a);
+    }, _e = (a) => {
       var _, S;
       m.value = a;
-      const r = (S = (_ = t.quickSelectRanges) == null ? void 0 : _.find(({ value: q }) => q === a)) == null ? void 0 : S.data;
-      r && (s.startDate = d(r.startDate), s.endDate = d(r.endDate), s.startTime || (s.startTime = T(V(r.startDate))), s.endTime || (s.endTime = T(V(r.endDate))), e(l.CUSTOM_RANGE, r));
+      const s = (S = (_ = t.quickSelectRanges) == null ? void 0 : _.find(({ value: q }) => q === a)) == null ? void 0 : S.data;
+      s && (r.startDate = l(s.startDate), r.endDate = l(s.endDate), r.startTime || (r.startTime = T(L(s.startDate))), r.endTime || (r.endTime = T(L(s.endDate))), e(i.CUSTOM_RANGE, s));
     };
     return {
       // Values
-      dateTextInput: s,
+      dateTextInput: r,
       endDateError: f,
-      endTimeError: i,
+      endTimeError: p,
       selectedRangeSelectorValue: m,
-      startDateError: D,
-      startTimeError: p,
-      quickSelectRangeDefaultItems: F,
-      formInputWrapperConditionalClasses: h,
+      startDateError: u,
+      startTimeError: D,
+      quickSelectRangeDefaultItems: h,
+      formInputWrapperConditionalClasses: F,
       // Enums
-      BentoTypographyElement: le,
+      BentoTypographyElement: ce,
       // Methods
-      hasSlot: Ce(n),
-      t: b,
+      hasSlot: Pe(n),
+      t: y,
       // Events
-      onRangeSelectorInput: fe,
+      onRangeSelectorInput: _e,
       onDateInput: Y,
-      onDateInputKeyDown: U,
-      onEndDateInput: k,
+      onDateInputKeyDown: k,
+      onEndDateInput: d,
       onEndDateSelected: X,
-      onEndTimeInput: pe,
+      onEndTimeInput: me,
       onStartDateSelected: Q,
       onStartDateInput: ee,
-      onStartTimeInput: De,
-      onTimeInputKeyDown: me
+      onStartTimeInput: pe,
+      onTimeInputKeyDown: fe
     };
   }
 });
-var $e = function() {
+var Ye = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n("div", { staticClass: "b-date-range-picker-calendar" }, [n("div", { staticClass: "b-date-range-picker-calendar__form-container" }, [n("div", { staticClass: "b-date-range-picker-calendar__form" }, [e.quickSelectRanges ? n("bento-dropdown", { attrs: { "aria-label": e.t("customRange"), items: e.quickSelectRangeDefaultItems, value: e.selectedRangeSelectorValue }, on: { input: e.onRangeSelectorInput } }) : e._e(), e.hasSlot("title") ? [e._t("title")] : e._e(), n("div", [n("bento-typography", { staticClass: "b-date-range-picker-calendar__label", attrs: { stronger: "", el: e.BentoTypographyElement.SPAN } }, [e._v(" From ")]), n("div", { class: e.formInputWrapperConditionalClasses }, [n("bento-input-field", { staticClass: "b-date-range-picker-calendar__form-input", attrs: { "aria-label": e.$t("dateFrom"), value: e.dateTextInput.startDate, error: e.startDateError }, on: { input: e.onStartDateInput, keydown: e.onDateInputKeyDown }, scopedSlots: e._u([{ key: "description", fn: function() {
     return [e._v("YYYY-MM-DD")];
@@ -278,33 +279,33 @@ var $e = function() {
   }, proxy: !0 }]) }), e.allowTimeInput ? n("bento-input-field", { staticClass: "b-date-range-picker-calendar__form-input", attrs: { "aria-label": e.t("timeTo"), value: e.dateTextInput.endTime, error: e.endTimeError }, on: { input: e.onEndTimeInput, keydown: e.onTimeInputKeyDown }, scopedSlots: e._u([{ key: "description", fn: function() {
     return [e._v("HH:MM:SS")];
   }, proxy: !0 }], null, !1, 3442289499) }) : e._e()], 1)], 1)], 2), e.hasSlot("actions") ? n("div", [e._t("actions")], 2) : e._e()]), n("div", { staticClass: "b-date-range-picker-calendar__calendars-container" }, [n("calendar", { attrs: { value: e.value, "first-day-of-week": e.firstDayOfWeek, "is-date-disabled": e.isDateDisabled, "max-range": e.maxRange, "number-of-months": e.numberOfMonths, "is-range": "" }, on: { input: e.onDateInput, "start-date-selected": e.onStartDateSelected, "end-date-selected": e.onEndDateSelected } })], 1)]);
-}, Ye = [], qe = /* @__PURE__ */ de(
-  Be,
+}, qe = [], Le = /* @__PURE__ */ ue(
   $e,
   Ye,
+  qe,
   !1,
   null,
   "2a027317",
   null,
   null
 );
-const C = qe.exports;
+const C = Le.exports;
 var P = /* @__PURE__ */ ((t) => (t.INPUT = "input", t))(P || {});
 const Ve = ({
   datePickerValue: t,
   isDateIncorrect: e
 }) => {
-  var v, d, T, D, f;
-  const { locale: n, t: o } = W(), b = { de: z, enUS: I, fr: J }, g = (p, i) => M(p, i, {
-    locale: b[n.value.substring(0, 2)] || I
-  }), u = (p) => M(p, R.HOUR_MINUTE_SECONDS, {
-    locale: b[n.value.substring(0, 2)] || I
-  }), m = L({
+  var v, l, T, u, f;
+  const { locale: n, t: o } = W(), y = { de: z, enUS: I, fr: J }, g = (D, p) => M(D, p, {
+    locale: y[n.value.substring(0, 2)] || I
+  }), c = (D) => M(D, R.HOUR_MINUTE_SECONDS, {
+    locale: y[n.value.substring(0, 2)] || I
+  }), m = H({
     startDate: (v = t.value) != null && v.startDate ? g(t.value.startDate, R.NUMERIC_DATE_YEAR_FIRST) : void 0,
-    endDate: (d = t.value) != null && d.endDate ? g(t.value.endDate, R.NUMERIC_DATE_YEAR_FIRST) : void 0,
+    endDate: (l = t.value) != null && l.endDate ? g(t.value.endDate, R.NUMERIC_DATE_YEAR_FIRST) : void 0,
     // Set time if the startDate/endDate are set
-    startTime: (T = t.value) != null && T.startDate ? u((D = t.value) == null ? void 0 : D.startDate) : void 0,
-    endTime: (f = t.value) != null && f.endDate ? u(t.value.endDate) : void 0
+    startTime: (T = t.value) != null && T.startDate ? c((u = t.value) == null ? void 0 : u.startDate) : void 0,
+    endTime: (f = t.value) != null && f.endDate ? c(t.value.endDate) : void 0
   });
   return {
     // Values
@@ -313,9 +314,9 @@ const Ve = ({
         return `${m.startDate || ""} - ${m.endDate || ""}`;
       if (!t.value || !t.value.startDate && !t.value.endDate)
         return o("selectDateRange");
-      const { startDate: p, endDate: i } = m;
-      return `${g(new Date(p), R.FULL_DATE_MONTH_FIRST)} - ${g(
-        new Date(i),
+      const { startDate: D, endDate: p } = m;
+      return `${g(new Date(D), R.FULL_DATE_MONTH_FIRST)} - ${g(
+        new Date(p),
         R.FULL_DATE_MONTH_FIRST
       )}`;
     }),
@@ -333,17 +334,17 @@ const Ve = ({
     selectDateRange: "Select a date range",
     selectedDateIsNotAvailable: "Selected date is not available"
   }
-}, Le = oe({
+}, We = le({
   i18n: { messages: He },
   name: "bento-date-range-picker",
   components: {
-    BentoTypography: ie,
+    BentoTypography: de,
     BentoPopover: Ie,
     DateRangePickerCalendar: C,
     DropdownInputDefault: Re,
-    ErrorMessage: Pe
+    ErrorMessage: Oe
   },
-  directives: { BentoClickOutsideDirective: Oe },
+  directives: { BentoClickOutsideDirective: Me },
   props: {
     /**
      * Allows user to enter time values in the form
@@ -377,6 +378,10 @@ const Ve = ({
      * 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.
      */
@@ -407,22 +412,22 @@ const Ve = ({
   },
   emits: [P.INPUT],
   setup(t, { emit: e }) {
-    const { locale: n, t: o } = W(), b = { de: z, enUS: I, fr: J }, g = N("bento-date-range-picker-container"), u = N("bento-date-range-picker-label"), m = N("bento-date-range-picker-description"), h = N("bento-date-range-picker-error"), F = N("bento-date-range-picker-date-error"), v = O(
+    const { locale: n, t: o } = W(), y = { de: z, enUS: I, fr: J }, g = B("bento-date-range-picker-container"), c = B("bento-date-range-picker-label"), m = B("bento-date-range-picker-description"), F = B("bento-date-range-picker-error"), h = B("bento-date-range-picker-date-error"), v = O(
       () => t.label || o("dateRangePicker", { name: g })
-    ), d = y(!1), T = y(null), D = y(!1);
-    ve(
+    ), l = b(!1), T = b(null), u = b(!1), { isReadOnly: f } = Ee(re(t, "readonly"));
+    Te(
       () => t.disabled,
       () => {
-        t.disabled && D.value && (D.value = !1);
+        t.disabled && u.value && (u.value = !1);
       }
     );
-    const f = O(() => ({
-      "b-date-range-picker__description--error": !!t.errorMessage || d.value
-    })), { dateDisplayValue: p, textInputDisplayValue: i, formatTextInputDisplayValue: s } = Ve({
-      datePickerValue: Te(t, "value"),
-      isDateIncorrect: d
-    }), Y = O(
-      () => `${t.description ? m : ""} ${t.errorMessage ? h : ""} ${d.value ? F : ""}`.trim() || null
+    const D = O(() => ({
+      "b-date-range-picker__description--error": !!t.errorMessage || l.value
+    })), { dateDisplayValue: p, textInputDisplayValue: r, formatTextInputDisplayValue: Y } = Ve({
+      datePickerValue: re(t, "value"),
+      isDateIncorrect: l
+    }), w = O(
+      () => `${t.description ? m : ""} ${t.errorMessage ? F : ""} ${l.value ? h : ""}`.trim() || null
     );
     return {
       // Refs
@@ -430,76 +435,77 @@ const Ve = ({
       // Values,
       dateDisplayValue: p,
       datePickerContainerId: g,
-      descriptionConditionalClasses: f,
-      isDateIncorrect: d,
-      isDateRangePickerOpen: D,
-      labelId: u,
+      descriptionConditionalClasses: D,
+      isDateIncorrect: l,
+      isDateRangePickerOpen: u,
+      isReadOnly: f,
+      labelId: c,
       descriptionId: m,
-      dateErrorId: F,
-      errorId: h,
+      dateErrorId: h,
+      errorId: F,
       popoverAriaLabel: v,
-      ariaDescribedBy: Y,
-      textInputDisplayValue: i,
+      ariaDescribedBy: w,
+      textInputDisplayValue: r,
       // Enums
-      BentoTypographyElement: le,
-      BentoTypographyVariant: ye,
-      BentoPopoverPositions: be,
+      BentoTypographyElement: ce,
+      BentoTypographyVariant: be,
+      BentoPopoverPositions: ye,
       // Events
       closeDateRangePicker: () => {
-        D.value = !1;
+        u.value = !1;
       },
       clearDateRangePickerValue: async () => {
-        d.value && (d.value = !1), e(P.INPUT, null);
+        l.value && (l.value = !1), e(P.INPUT, null);
       },
       openDateRangePicker: () => {
-        D.value = !0, s();
+        u.value = !0, Y();
       },
-      onRangeSelectorInput: (c) => {
-        if (c) {
-          const k = (U) => M(U, R.NUMERIC_DATE_YEAR_FIRST, {
-            locale: b[n.value.substring(0, 2)] || I
+      onRangeSelectorInput: (d) => {
+        if (d) {
+          const k = (N) => M(N, R.NUMERIC_DATE_YEAR_FIRST, {
+            locale: y[n.value.substring(0, 2)] || I
           });
-          i.startDate = k(c.startDate), i.endDate = k(c.endDate), e(P.INPUT, c);
+          r.startDate = k(d.startDate), r.endDate = k(d.endDate), e(P.INPUT, d);
         }
       },
       onEnterPressedOverInput: () => {
-        d.value || (D.value = !1);
+        l.value || (u.value = !1);
       },
-      onDateRangePickerInput: (c) => {
-        d.value = !1;
-        const k = (U) => M(U, R.NUMERIC_DATE_YEAR_FIRST, {
-          locale: b[n.value.substring(0, 2)] || I
+      onDateRangePickerInput: (d) => {
+        l.value = !1;
+        const k = (N) => M(N, R.NUMERIC_DATE_YEAR_FIRST, {
+          locale: y[n.value.substring(0, 2)] || I
         });
-        i.startDate = k(c.startDate), i.endDate = k(c.endDate), e(P.INPUT, c);
+        r.startDate = k(d.startDate), r.endDate = k(d.endDate), e(P.INPUT, d);
       },
-      onDateRangePickerError: (c) => {
-        d.value = !0, i.startDate = c.startDate, i.endDate = c.endDate, e(P.INPUT, { startDate: null, endDate: null });
+      onDateRangePickerError: (d) => {
+        l.value = !0, r.startDate = d.startDate, r.endDate = d.endDate, e(P.INPUT, { startDate: null, endDate: null });
       },
-      onDateRangePickerFormDateInputUpdate: (c) => {
-        d.value = !1, c.startTime && (i.startTime = c.startTime), c.endTime && (i.endTime = c.endTime);
+      onDateRangePickerFormDateInputUpdate: (d) => {
+        l.value = !1, d.startTime && (r.startTime = d.startTime), d.endTime && (r.endTime = d.endTime);
       }
     };
   }
 });
-var We = function() {
+var Ke = function() {
   var e = this, n = e._self._c;
   return e._self._setupProxy, n("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.closeDateRangePicker, expression: "closeDateRangePicker" }], staticClass: "b-date-range-picker" }, [e.label ? n("div", { staticClass: "b-date-range-picker__label", attrs: { id: e.labelId } }, [n("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN, stronger: "" } }, [e._v(e._s(e.label))]), e.optional ? n("bento-typography", { staticClass: "b-date-range-picker__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("optional")) + ") ")]) : e._e(), e.required ? n("bento-typography", { staticClass: "b-date-range-picker__label-requirement", attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" (" + e._s(e.$t("required")) + ") ")]) : e._e()], 1) : e._e(), n("div", { on: { keydown: function(o) {
     return !o.type.indexOf("key") && e._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : e.onEnterPressedOverInput.apply(null, arguments);
-  } } }, [n("dropdown-input-default", { ref: "inputContainerRef", attrs: { 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 }, on: { open: e.openDateRangePicker, clear: e.clearDateRangePickerValue, close: e.closeDateRangePicker } })], 1), e.isDateIncorrect ? n("error-message", { staticClass: "b-date-range-picker__error-message", attrs: { id: e.dateErrorId, "error-message": e.$t("provideDateInAFormat").toString() } }) : e._e(), e.errorMessage ? n("error-message", { staticClass: "b-date-range-picker__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.description ? n("bento-typography", { staticClass: "b-date-range-picker__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.description) + " ")]) : e._e(), e.inputContainerRef ? n("bento-popover", { staticClass: "b-date-range-picker__container", attrs: { id: e.datePickerContainerId, open: e.isDateRangePickerOpen, "target-element": e.inputContainerRef, "disable-focus-trap": !0, "aria-label": e.popoverAriaLabel, position: e.BentoPopoverPositions.BOTTOM_START, "without-space": "", "fit-content": "" } }, [n("date-range-picker-calendar", { attrs: { "allow-time-input": e.allowTimeInput, "quick-select-ranges": e.quickSelectRanges, value: e.value, "first-day-of-week": e.firstDayOfWeek, "is-date-disabled": e.isDateDisabled, "max-range": e.maxRange, "number-of-months": e.numberOfMonths, "date-form-data": e.textInputDisplayValue }, on: { "custom-range": e.onRangeSelectorInput, input: e.onDateRangePickerInput, error: e.onDateRangePickerError, "form-date": e.onDateRangePickerFormDateInputUpdate } })], 1) : e._e()], 1);
-}, Ke = [], Ge = /* @__PURE__ */ de(
-  Le,
+  } } }, [n("dropdown-input-default", { ref: "inputContainerRef", attrs: { 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 }, on: { open: e.openDateRangePicker, clear: e.clearDateRangePickerValue, close: e.closeDateRangePicker } })], 1), e.isDateIncorrect ? n("error-message", { staticClass: "b-date-range-picker__error-message", attrs: { id: e.dateErrorId, "error-message": e.$t("provideDateInAFormat").toString() } }) : e._e(), e.errorMessage ? n("error-message", { staticClass: "b-date-range-picker__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.description ? n("bento-typography", { staticClass: "b-date-range-picker__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.description) + " ")]) : e._e(), e.inputContainerRef ? n("bento-popover", { staticClass: "b-date-range-picker__container", attrs: { id: e.datePickerContainerId, open: e.isDateRangePickerOpen, "target-element": e.inputContainerRef, "disable-focus-trap": !0, "aria-label": e.popoverAriaLabel, position: e.BentoPopoverPositions.BOTTOM_START, "without-space": "", "fit-content": "" } }, [n("date-range-picker-calendar", { attrs: { "allow-time-input": e.allowTimeInput, "quick-select-ranges": e.quickSelectRanges, value: e.value, "first-day-of-week": e.firstDayOfWeek, "is-date-disabled": e.isDateDisabled, "max-range": e.maxRange, "number-of-months": e.numberOfMonths, "date-form-data": e.textInputDisplayValue }, on: { "custom-range": e.onRangeSelectorInput, input: e.onDateRangePickerInput, error: e.onDateRangePickerError, "form-date": e.onDateRangePickerFormDateInputUpdate } })], 1) : e._e()], 1);
+}, Ge = [], je = /* @__PURE__ */ ue(
   We,
   Ke,
+  Ge,
   !1,
   null,
-  "d74b3f5c",
+  "62056f46",
   null,
   null
 );
-const Dt = Ge.exports;
+const mt = je.exports;
 export {
-  Dt as B,
+  mt as B,
   C as D,
   P as a
 };
-//# sourceMappingURL=index.f0d99471.js.map
+//# sourceMappingURL=index.10aaf539.js.map