@dialpad/dialtone 9.123.2 → 9.125.0

package/dist/vue2/lib/datepicker/datepicker.js

@@ -1,48 +1,26 @@
-import { DtIconChevronLeft as f, DtIconChevronsLeft as p, DtIconChevronRight as y, DtIconChevronsRight as m } from "@dialpad/dialtone-icons/vue2";
-import { getMonth as i, getYear as l, getDate as D, set as k, addMonths as _, subMonths as b, format as $ } from "date-fns";
-import { getCalendarDays as g, formatMonth as v, getWeekDayNames as M, calculateNextFocusDate as x, calculatePrevFocusDate as R } from "./utils.js";
-import { INTL_MONTH_FORMAT as L, WEEK_START as Y, MONTH_FORMAT as w } from "./datepicker-constants.js";
-import u from "../stack/stack.js";
-import T from "../tooltip/tooltip.js";
-import d from "../button/button.js";
+import { DtIconChevronLeft as D, DtIconChevronsLeft as _, DtIconChevronRight as y, DtIconChevronsRight as m } from "@dialpad/dialtone-icons/vue2";
+import { getMonth as o, getYear as l, getDate as k, set as $, addMonths as v, subMonths as R } from "date-fns";
+import { getCalendarDays as E, formatMonth as b, getWeekDayNames as T, formatDate as g, calculateNextFocusDate as A, calculatePrevFocusDate as M } from "./utils.js";
+import { INTL_MONTH_FORMAT as d, WEEK_START as C } from "./datepicker-constants.js";
 import { n as h } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import { warnIfUnmounted as C } from "../../common/utils/index.js";
-const P = {
+import u from "../button/button.js";
+import P from "../tooltip/tooltip.js";
+import f from "../stack/stack.js";
+import p from "../../common/mixins/localization.js";
+import { warnIfUnmounted as x } from "../../common/utils/index.js";
+const I = {
   name: "DtDatepickerMonthYearPicker",
   components: {
-    DtButton: d,
-    DtTooltip: T,
-    DtStack: u,
-    DtIconChevronLeft: f,
-    DtIconChevronsLeft: p,
+    DtButton: u,
+    DtTooltip: P,
+    DtStack: f,
+    DtIconChevronLeft: D,
+    DtIconChevronsLeft: _,
     DtIconChevronRight: y,
     DtIconChevronsRight: m
   },
+  mixins: [p],
   props: {
-    locale: {
-      type: String,
-      required: !0
-    },
-    prevMonthLabel: {
-      type: String,
-      required: !0
-    },
-    nextMonthLabel: {
-      type: String,
-      required: !0
-    },
-    prevYearLabel: {
-      type: String,
-      required: !0
-    },
-    nextYearLabel: {
-      type: String,
-      required: !0
-    },
-    changeToLabel: {
-      type: String,
-      required: !0
-    },
     selectedDate: {
       type: Date,
       required: !0
@@ -77,7 +55,7 @@ const P = {
   ],
   data() {
     return {
-      selectMonth: i(this.selectedDate),
+      selectMonth: o(this.selectedDate),
       selectYear: l(this.selectedDate),
       highlightedDay: null,
       focusPicker: 0,
@@ -88,10 +66,22 @@ const P = {
   computed: {
     // Get days for the currently selected month and year and highlight the selected day
     calendarDays() {
-      return g(this.selectMonth, this.selectYear, this.highlightedDay);
+      return E(this.selectMonth, this.selectYear, this.highlightedDay);
     },
     formattedMonth() {
-      return (a) => v(a, L, this.locale);
+      return (s) => b(s, d, this.i18n.currentLocale);
+    },
+    previousYearAriaLabel() {
+      return `${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${this.selectYear - 1}`;
+    },
+    previousMonthAriaLabel() {
+      return `${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${this.formattedMonth(this.selectMonth - 1)}`;
+    },
+    nextYearAriaLabel() {
+      return `${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${this.selectYear + 1}`;
+    },
+    nextMonthAriaLabel() {
+      return `${this.i18n.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${this.i18n.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${this.formattedMonth(this.selectMonth + 1)}`;
     }
   },
   watch: {
@@ -113,24 +103,24 @@ const P = {
   },
   methods: {
     setButtonsRef() {
-      this.focusRefs = this.refNames.map((a) => this.$refs[a]);
+      this.focusRefs = this.refNames.map((s) => this.$refs[s]);
     },
     focusMonthYearPicker() {
       this.focusPicker = 0, this.focusRefs[0].$el.focus();
     },
-    handleKeyDown(a) {
-      switch (a.key) {
+    handleKeyDown(s) {
+      switch (s.key) {
         case "ArrowLeft":
-          a.preventDefault(), this.focusPicker === 0 ? (this.focusPicker = 3, this.focusRefs[this.focusPicker].$el.focus()) : (this.focusPicker--, this.focusRefs[this.focusPicker].$el.focus());
+          s.preventDefault(), this.focusPicker === 0 ? (this.focusPicker = 3, this.focusRefs[this.focusPicker].$el.focus()) : (this.focusPicker--, this.focusRefs[this.focusPicker].$el.focus());
           break;
         case "ArrowRight":
-          a.preventDefault(), this.focusPicker === 3 ? (this.focusPicker = 0, this.focusRefs[this.focusPicker].$el.focus()) : (this.focusPicker++, this.focusRefs[this.focusPicker].$el.focus());
+          s.preventDefault(), this.focusPicker === 3 ? (this.focusPicker = 0, this.focusRefs[this.focusPicker].$el.focus()) : (this.focusPicker++, this.focusRefs[this.focusPicker].$el.focus());
           break;
         case "ArrowDown":
-          a.preventDefault(), this.$emit("focus-first-day");
+          s.preventDefault(), this.$emit("focus-first-day");
           break;
         case "Tab":
-          a.preventDefault(), this.$emit("focus-first-day");
+          s.preventDefault(), this.$emit("focus-first-day");
           break;
         case "Escape":
           this.$emit("close-datepicker");
@@ -138,16 +128,16 @@ const P = {
       }
     },
     highlightDay() {
-      const a = l(this.selectedDate), e = i(this.selectedDate);
-      a !== this.selectYear || e !== this.selectMonth ? this.highlightedDay = null : this.highlightedDay = D(this.selectedDate);
+      const s = l(this.selectedDate), t = o(this.selectedDate);
+      s !== this.selectYear || t !== this.selectMonth ? this.highlightedDay = null : this.highlightedDay = k(this.selectedDate);
     },
-    changeMonth(a) {
-      (this.selectMonth === 0 && a === -1 || this.selectMonth === 11 && a === 1) && (this.selectYear += a);
-      const e = k(this.selectedDate, { month: this.selectMonth, year: this.selectYear }), t = a === 1 ? _(e, 1) : b(e, 1);
-      this.selectMonth = i(t);
+    changeMonth(s) {
+      (this.selectMonth === 0 && s === -1 || this.selectMonth === 11 && s === 1) && (this.selectYear += s);
+      const t = $(this.selectedDate, { month: this.selectMonth, year: this.selectYear }), e = s === 1 ? v(t, 1) : R(t, 1);
+      this.selectMonth = o(e);
     },
-    changeYear(a) {
-      this.selectYear = this.selectYear + a;
+    changeYear(s) {
+      this.selectYear = this.selectYear + s;
     },
     goToNextMonth() {
       this.changeMonth(1);
@@ -157,53 +147,46 @@ const P = {
     }
   }
 };
-var S = function() {
-  var e = this, t = e._self._c;
-  return t("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { direction: "row", gap: "300" } }, [t("dt-stack", { staticClass: "d-datepicker__nav", attrs: { as: "nav", direction: "row", gap: "200" } }, [t("dt-tooltip", { attrs: { message: e.prevYearLabel, placement: "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [t("dt-button", { ref: e.refNames[0], staticClass: "d-datepicker__nav-btn", attrs: { id: "prevYearButton", size: "xs", importance: "clear", kind: "muted", circle: !0, type: "button", "aria-label": `${e.changeToLabel} ${e.prevYearLabel} ${e.selectYear - 1}` }, on: { click: function(s) {
-      return e.changeYear(-1);
-    }, keydown: function(s) {
-      return e.handleKeyDown(s);
-    } } }, [t("dt-icon-chevrons-left", { attrs: { size: "200" } })], 1)];
-  }, proxy: !0 }]) }), t("dt-tooltip", { attrs: { message: e.prevMonthLabel, placement: "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [t("dt-button", { ref: e.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { id: "prevMonthButton", size: "xs", importance: "clear", kind: "muted", circle: !0, type: "button", "aria-label": `${e.changeToLabel} ${e.prevMonthLabel} ${e.formattedMonth(e.selectMonth - 1)}` }, on: { click: function(s) {
-      return e.changeMonth(-1);
-    }, keydown: function(s) {
-      return e.handleKeyDown(s);
-    } } }, [t("dt-icon-chevron-left", { attrs: { size: "200" } })], 1)];
-  }, proxy: !0 }]) })], 1), t("div", { staticClass: "d-datepicker__month-year-title", attrs: { id: "calendar-heading" } }, [e._v(" " + e._s(e.formattedMonth(e.selectMonth)) + " " + e._s(e.selectYear) + " ")]), t("dt-stack", { staticClass: "d-datepicker__nav", attrs: { as: "nav", direction: "row", gap: "200" } }, [t("dt-tooltip", { attrs: { message: e.nextMonthLabel, placement: "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [t("dt-button", { ref: e.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { id: "nextMonthButton", size: "xs", importance: "clear", circle: !0, kind: "muted", type: "button", "aria-label": `${e.changeToLabel} ${e.nextMonthLabel} ${e.formattedMonth(e.selectMonth + 1)}` }, on: { click: function(s) {
-      return e.changeMonth(1);
-    }, keydown: function(s) {
-      return e.handleKeyDown(s);
-    } } }, [t("dt-icon-chevron-right", { attrs: { size: "200" } })], 1)];
-  }, proxy: !0 }]) }), t("dt-tooltip", { attrs: { message: e.nextYearLabel, placement: "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [t("dt-button", { ref: e.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { id: "nextYearButton", size: "xs", kind: "muted", circle: !0, importance: "clear", type: "button", "aria-label": `${e.changeToLabel} ${e.nextYearLabel} ${e.selectYear + 1}` }, on: { click: function(s) {
-      return e.changeYear(1);
-    }, keydown: function(s) {
-      return e.handleKeyDown(s);
-    } } }, [t("dt-icon-chevrons-right", { attrs: { size: "200" } })], 1)];
+var N = function() {
+  var t = this, e = t._self._c;
+  return e("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { direction: "row", gap: "300" } }, [e("dt-stack", { staticClass: "d-datepicker__nav", attrs: { as: "nav", direction: "row", gap: "200" } }, [e("dt-tooltip", { attrs: { "fallback-placements": ["top-start", "auto"], message: t.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"), placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
+    return [e("dt-button", { ref: t.refNames[0], staticClass: "d-datepicker__nav-btn", attrs: { id: "prevYearButton", "aria-label": t.previousYearAriaLabel, circle: "", importance: "clear", kind: "muted", size: "xs", type: "button" }, on: { click: function(a) {
+      return t.changeYear(-1);
+    }, keydown: function(a) {
+      return t.handleKeyDown(a);
+    } } }, [e("dt-icon-chevrons-left", { attrs: { size: "200" } })], 1)];
+  }, proxy: !0 }]) }), e("dt-tooltip", { attrs: { "fallback-placements": ["top-start", "auto"], message: t.i18n.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"), placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
+    return [e("dt-button", { ref: t.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { id: "prevMonthButton", "aria-label": t.previousMonthAriaLabel, circle: "", importance: "clear", kind: "muted", size: "xs", type: "button" }, on: { click: function(a) {
+      return t.changeMonth(-1);
+    }, keydown: function(a) {
+      return t.handleKeyDown(a);
+    } } }, [e("dt-icon-chevron-left", { attrs: { size: "200" } })], 1)];
+  }, proxy: !0 }]) })], 1), e("div", { staticClass: "d-datepicker__month-year-title", attrs: { id: "calendar-heading" } }, [t._v(" " + t._s(t.formattedMonth(t.selectMonth)) + " " + t._s(t.selectYear) + " ")]), e("dt-stack", { staticClass: "d-datepicker__nav", attrs: { as: "nav", direction: "row", gap: "200" } }, [e("dt-tooltip", { attrs: { "fallback-placements": ["top-end", "auto"], message: t.i18n.$t("DIALTONE_DATEPICKER_NEXT_MONTH"), placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
+    return [e("dt-button", { ref: t.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { id: "nextMonthButton", "aria-label": t.nextMonthAriaLabel, circle: "", importance: "clear", kind: "muted", size: "xs", type: "button" }, on: { click: function(a) {
+      return t.changeMonth(1);
+    }, keydown: function(a) {
+      return t.handleKeyDown(a);
+    } } }, [e("dt-icon-chevron-right", { attrs: { size: "200" } })], 1)];
+  }, proxy: !0 }]) }), e("dt-tooltip", { attrs: { "fallback-placements": ["top-end", "auto"], message: t.i18n.$t("DIALTONE_DATEPICKER_NEXT_YEAR"), placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
+    return [e("dt-button", { ref: t.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { id: "nextYearButton", "aria-label": t.nextYearAriaLabel, circle: "", importance: "clear", kind: "muted", size: "xs", type: "button" }, on: { click: function(a) {
+      return t.changeYear(1);
+    }, keydown: function(a) {
+      return t.handleKeyDown(a);
+    } } }, [e("dt-icon-chevrons-right", { attrs: { size: "200" } })], 1)];
   }, proxy: !0 }]) })], 1)], 1);
-}, q = [], A = /* @__PURE__ */ h(
-  P,
-  S,
-  q
+}, Y = [], L = /* @__PURE__ */ h(
+  I,
+  N,
+  Y
 );
-const F = A.exports, N = {
+const w = L.exports, O = {
   name: "DtDatepickerCalendar",
-  components: { DtButton: d },
+  components: { DtButton: u },
+  mixins: [p],
   props: {
     calendarDays: {
       type: Array,
       required: !0
-    },
-    locale: {
-      type: String,
-      required: !0
-    },
-    selectDayLabel: {
-      type: String,
-      required: !0
     }
   },
   emits: [
@@ -237,7 +220,7 @@ const F = A.exports, N = {
   },
   computed: {
     weekDays() {
-      return M(this.locale, Y);
+      return T(this.i18n.currentLocale, C);
     }
   },
   watch: {
@@ -248,53 +231,53 @@ const F = A.exports, N = {
     }
   },
   methods: {
-    dayAriaLabel(a) {
-      return `${this.selectDayLabel} ${a.text} ${$(a.value, w)} ${l(a.value)}`;
+    dayAriaLabel(s) {
+      return this.i18n.$t("DIALTONE_DATEPICKER_SELECT_DAY") + ` ${g(s.value, d, this.i18n.currentLocale)}`;
     },
-    setDayRef(a, e) {
-      this.calendarDays.forEach((t, s) => {
-        t.days.forEach((n, r) => {
-          const o = `buttonRef_${s}_${r}`, c = this.$refs[o];
+    setDayRef(s, t) {
+      this.calendarDays.forEach((e, a) => {
+        e.days.forEach((n, r) => {
+          const i = `buttonRef_${a}_${r}`, c = this.$refs[i];
           c && n.currentMonth && this.daysRef.push({ el: c[0], day: n });
         });
       });
     },
-    handleKeyDown(a) {
-      switch (a.key) {
+    handleKeyDown(s) {
+      switch (s.key) {
         case "ArrowUp":
-          a.preventDefault(), this.focusDay -= 7;
+          s.preventDefault(), this.focusDay -= 7;
           try {
             this.daysRef[this.focusDay].el.$el.focus();
           } catch {
-            const t = R(this.daysRef[this.focusDay + 7].day.value);
+            const e = M(this.daysRef[this.focusDay + 7].day.value);
             this.$emit("go-to-prev-month"), this.$nextTick(() => {
-              this.setDayRef(), this.daysRef[t - 1].el.$el.focus(), this.focusDay += t - 1;
+              this.setDayRef(), this.daysRef[e - 1].el.$el.focus(), this.focusDay += e - 1;
             });
           }
           break;
         case "ArrowDown":
-          a.preventDefault(), this.focusDay += 7;
+          s.preventDefault(), this.focusDay += 7;
           try {
             this.daysRef[this.focusDay].el.$el.focus();
           } catch {
-            const t = x(this.daysRef[this.focusDay - 7].day.value);
+            const e = A(this.daysRef[this.focusDay - 7].day.value);
             this.$emit("go-to-next-month"), this.$nextTick(() => {
-              this.setDayRef(), this.daysRef[t - 1].el.$el.focus(), this.focusDay += t - 1;
+              this.setDayRef(), this.daysRef[e - 1].el.$el.focus(), this.focusDay += e - 1;
             });
           }
           break;
         case "ArrowLeft":
-          a.preventDefault(), this.focusDay > 0 ? (this.focusDay -= 1, this.daysRef[this.focusDay].el.$el.focus()) : (this.$emit("go-to-prev-month"), this.$nextTick(() => {
+          s.preventDefault(), this.focusDay > 0 ? (this.focusDay -= 1, this.daysRef[this.focusDay].el.$el.focus()) : (this.$emit("go-to-prev-month"), this.$nextTick(() => {
             this.focusLastDay();
           }));
           break;
         case "ArrowRight":
-          a.preventDefault(), this.focusDay < this.daysRef.length - 1 ? (this.focusDay += 1, this.daysRef[this.focusDay].el.$el.focus()) : (this.$emit("go-to-next-month"), this.$nextTick(() => {
+          s.preventDefault(), this.focusDay < this.daysRef.length - 1 ? (this.focusDay += 1, this.daysRef[this.focusDay].el.$el.focus()) : (this.$emit("go-to-next-month"), this.$nextTick(() => {
             this.focusFirstDay();
           }));
           break;
         case "Tab":
-          a.preventDefault(), this.$emit("focus-month-year-picker");
+          s.preventDefault(), this.$emit("focus-month-year-picker");
           break;
         case "Escape":
           this.$emit("close-datepicker");
@@ -311,105 +294,36 @@ const F = A.exports, N = {
         this.focusDay = this.daysRef.length - 1, this.daysRef[this.focusDay].el.$el.focus();
       });
     },
-    selectDay(a) {
-      a.currentMonth && (this.selectedDay = a.text, this.$emit("select-date", a.value));
+    selectDay(s) {
+      s.currentMonth && (this.selectedDay = s.text, this.$emit("select-date", s.value));
     }
   }
 };
-var B = function() {
-  var e = this, t = e._self._c;
-  return t("table", { staticClass: "d-datepicker__calendar", attrs: { "aria-labelledby": "calendar-heading" } }, [t("thead", [t("tr", e._l(e.weekDays, function(s) {
-    return t("th", { key: s, staticClass: "d-datepicker__cell d-datepicker__cell--header", attrs: { scope: "col" } }, [t("span", { staticClass: "d-datepicker__weekday", attrs: { title: s, "aria-label": s } }, [e._v(" " + e._s(s))])]);
-  }), 0)]), t("tbody", e._l(e.calendarDays, function(s, n) {
-    return t("tr", { key: n }, e._l(s.days, function(r, o) {
-      return t("td", { key: n + o, staticClass: "d-datepicker__cell", attrs: { role: "listbox" } }, [t("dt-button", { ref: `buttonRef_${n}_${o}`, refInFor: !0, staticClass: "d-datepicker__day", class: {
+var K = function() {
+  var t = this, e = t._self._c;
+  return e("table", { staticClass: "d-datepicker__calendar", attrs: { "aria-labelledby": "calendar-heading" } }, [e("thead", [e("tr", t._l(t.weekDays, function(a) {
+    return e("th", { key: a, staticClass: "d-datepicker__cell d-datepicker__cell--header", attrs: { scope: "col" } }, [e("span", { staticClass: "d-datepicker__weekday", attrs: { title: a, "aria-label": a } }, [t._v(" " + t._s(a))])]);
+  }), 0)]), e("tbody", t._l(t.calendarDays, function(a, n) {
+    return e("tr", { key: n }, t._l(a.days, function(r, i) {
+      return e("td", { key: n + i, staticClass: "d-datepicker__cell", attrs: { role: "listbox" } }, [e("dt-button", { ref: `buttonRef_${n}_${i}`, refInFor: !0, staticClass: "d-datepicker__day", class: {
         "d-datepicker__day--disabled": !r.currentMonth,
-        "d-datepicker__day--selected": e.selectedDay ? r.text === e.selectedDay && r.currentMonth : r.selected
-      }, attrs: { circle: !0, size: "sm", importance: "clear", disabled: !r.currentMonth, type: "button", "aria-selected": e.selectedDay ? r.text === e.selectedDay && r.currentMonth : r.selected, "aria-label": e.dayAriaLabel(r), role: "option" }, on: { click: function(c) {
-        return e.selectDay(r);
+        "d-datepicker__day--selected": t.selectedDay ? r.text === t.selectedDay && r.currentMonth : r.selected
+      }, attrs: { circle: !0, size: "sm", importance: "clear", disabled: !r.currentMonth, type: "button", "aria-selected": t.selectedDay ? r.text === t.selectedDay && r.currentMonth : r.selected, "aria-label": t.dayAriaLabel(r), role: "option" }, on: { click: function(c) {
+        return t.selectDay(r);
       }, keydown: function(c) {
-        return e.handleKeyDown(c);
-      } } }, [e._v(" " + e._s(r.text) + " ")])], 1);
+        return t.handleKeyDown(c);
+      } } }, [t._v(" " + t._s(r.text) + " ")])], 1);
     }), 0);
   }), 0)]);
-}, z = [], K = /* @__PURE__ */ h(
-  N,
-  B,
-  z
+}, B = [], F = /* @__PURE__ */ h(
+  O,
+  K,
+  B
 );
-const I = K.exports, E = {
+const z = F.exports, S = {
   name: "DtDatepicker",
-  components: { DtStack: u, MonthYearPicker: F, Calendar: I },
+  components: { DtStack: f, MonthYearPicker: w, Calendar: z },
   props: {
-    /**
-     * Label for the previous month button
-     *
-     * @type {String}
-     * @example 'Previous month'
-     */
-    prevMonthLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Label for the next month button
-     *
-     * @type {String}
-     * @example 'Next month'
-     */
-    nextMonthLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Label for the previous year button
-     *
-     * @type {String}
-     * @example 'Previous year'
-     */
-    prevYearLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Label for the next year button
-     *
-     * @type {String}
-     * @example 'Next year'
-     */
-    nextYearLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Label for the select day button
-     *
-     * @type {String}
-     * @example 'Select day'
-     */
-    selectDayLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Label for the change to button
-     *
-     * @type {String}
-     * @example 'Change to'
-     */
-    changeToLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Locale for the calendar
-     *
-     * @type {String}
-     */
-    locale: {
-      type: String,
-      default: "en-US"
-    },
     /**
      * Selected date
      *
@@ -441,40 +355,40 @@ const I = K.exports, E = {
     };
   },
   mounted() {
-    C(this.$el, this.$options.name);
+    x(this.$el, this.$options.name);
   },
   methods: {
-    updateCalendarDays(a) {
-      this.calendarDays = a;
+    updateCalendarDays(s) {
+      this.calendarDays = s;
     }
   }
 };
-var O = function() {
-  var e = this, t = e._self._c;
-  return t("dt-stack", { staticClass: "d-datepicker", attrs: { gap: "400" } }, [t("div", { staticClass: "d-datepicker__hd" }, [t("month-year-picker", { ref: "monthYearPicker", attrs: { locale: e.locale, "prev-month-label": e.prevMonthLabel, "next-month-label": e.nextMonthLabel, "prev-year-label": e.prevYearLabel, "next-year-label": e.nextYearLabel, "change-to-label": e.changeToLabel, "selected-date": e.selectedDate }, on: { "calendar-days": e.updateCalendarDays, "focus-first-day": function(s) {
-    return e.$refs.calendar.focusFirstDay();
-  }, "focus-last-day": function(s) {
-    return e.$refs.calendar.focusLastDay();
-  }, "close-datepicker": function(s) {
-    return e.$emit("close-datepicker");
-  } } })], 1), t("div", { staticClass: "d-datepicker__bd" }, [t("calendar", { ref: "calendar", attrs: { locale: e.locale, "calendar-days": e.calendarDays, "select-day-label": e.selectDayLabel }, on: { "select-date": function(s) {
-    return e.$emit("selected-date", s);
-  }, "focus-month-year-picker": function(s) {
-    return e.$refs.monthYearPicker.focusMonthYearPicker();
-  }, "close-datepicker": function(s) {
-    return e.$emit("close-datepicker");
-  }, "go-to-next-month": function(s) {
-    return e.$refs.monthYearPicker.goToNextMonth();
-  }, "go-to-prev-month": function(s) {
-    return e.$refs.monthYearPicker.goToPrevMonth();
+var H = function() {
+  var t = this, e = t._self._c;
+  return e("dt-stack", { staticClass: "d-datepicker", attrs: { gap: "400" } }, [e("div", { staticClass: "d-datepicker__hd" }, [e("month-year-picker", { ref: "monthYearPicker", attrs: { "selected-date": t.selectedDate }, on: { "calendar-days": t.updateCalendarDays, "focus-first-day": function(a) {
+    return t.$refs.calendar.focusFirstDay();
+  }, "focus-last-day": function(a) {
+    return t.$refs.calendar.focusLastDay();
+  }, "close-datepicker": function(a) {
+    return t.$emit("close-datepicker");
+  } } })], 1), e("div", { staticClass: "d-datepicker__bd" }, [e("calendar", { ref: "calendar", attrs: { "calendar-days": t.calendarDays }, on: { "select-date": function(a) {
+    return t.$emit("selected-date", a);
+  }, "focus-month-year-picker": function(a) {
+    return t.$refs.monthYearPicker.focusMonthYearPicker();
+  }, "close-datepicker": function(a) {
+    return t.$emit("close-datepicker");
+  }, "go-to-next-month": function(a) {
+    return t.$refs.monthYearPicker.goToNextMonth();
+  }, "go-to-prev-month": function(a) {
+    return t.$refs.monthYearPicker.goToPrevMonth();
   } } })], 1)]);
-}, U = [], H = /* @__PURE__ */ h(
-  E,
-  O,
+}, U = [], G = /* @__PURE__ */ h(
+  S,
+  H,
   U
 );
-const te = H.exports;
+const st = G.exports;
 export {
-  te as default
+  st as default
 };
 //# sourceMappingURL=datepicker.js.map