@dialpad/dialtone 9.35.0-beta.2 → 9.36.0

package/dist/vue3/lib/datepicker.cjs

@@ -0,0 +1,858 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const dateFns = require("date-fns");
+const lib_stack = require("./stack.cjs");
+const lib_tooltip = require("./tooltip.cjs");
+const lib_button = require("./button.cjs");
+const lib_icon = require("./icon.cjs");
+require("../chunks/stack_constants-SMzMWnAQ.js");
+require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+require("../chunks/popover_constants-qUYTzsS3.js");
+require("tippy.js");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const WEEK_START = 0;
+const MONTH_FORMAT = "MMMM";
+const INTL_MONTH_FORMAT = "long";
+const _parsedGetDate = (value) => value ? new Date(value) : /* @__PURE__ */ new Date();
+const getWeekDays = (startDay, month, selectedDay) => {
+  const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));
+  const dates = [];
+  for (let i = 0; i < 7; i++) {
+    const next = dateFns.addDays(startDate, i);
+    const isNext = dateFns.getMonth(next) !== month;
+    dates.push({
+      text: next.getDate(),
+      value: next,
+      currentMonth: !isNext,
+      isFirstDayOfMonth: next.getDate() === 1 && !isNext,
+      // will be selected if the date is the same as the selected day and is from the current month
+      selected: selectedDay ? next.getDate() === selectedDay && !isNext : false
+    });
+  }
+  return dates;
+};
+const isDateEqual = (date, dateToCompare) => {
+  if (!date || !dateToCompare) {
+    return false;
+  }
+  return dateFns.isEqual(date, dateToCompare);
+};
+const getCalendarDays = (month, year, selectedDay) => {
+  const weeks = [];
+  const firstDate = _parsedGetDate(new Date(year, month));
+  const lastDate = _parsedGetDate(new Date(year, month + 1, 0));
+  const weekStartsOn = WEEK_START;
+  const firstDateInCalendar = dateFns.startOfWeek(firstDate, { weekStartsOn });
+  const addDaysToWeek = (date) => {
+    const days = getWeekDays(date, month, selectedDay);
+    weeks.push({ days });
+    if (!weeks[weeks.length - 1].days.some(
+      (day) => isDateEqual(day.value, lastDate)
+    )) {
+      const nextDate = dateFns.addDays(date, 7);
+      addDaysToWeek(nextDate);
+    }
+  };
+  addDaysToWeek(firstDateInCalendar);
+  return weeks;
+};
+const getWeekDayNames = (locale, weekStart) => {
+  const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {
+    return new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`2017-01-0${day}T00:00:00+00:00`)).slice(0, 2);
+  });
+  const beforeWeekStart = days.slice(0, weekStart);
+  const afterWeekStart = days.slice(weekStart + 1, days.length);
+  return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);
+};
+const formatMonth = (month, monthFormat, locale) => {
+  return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2e3, month, 1));
+};
+const calculateNextFocusDate = (currentDate) => {
+  const date = new Date(currentDate);
+  const currentWeekday = dateFns.getDay(date);
+  const nextMonthDate = dateFns.addMonths(date, 1);
+  const nextMonthStart = dateFns.startOfMonth(nextMonthDate);
+  const nextMonthStartWeekday = dateFns.getDay(nextMonthStart);
+  const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;
+  const focusDate = dateFns.addDays(nextMonthStart, dayDifference);
+  return dateFns.getDate(focusDate);
+};
+const calculatePrevFocusDate = (currentDate) => {
+  const date = new Date(currentDate);
+  const currentWeekday = dateFns.getDay(date);
+  const lastDayOfPrevMonth = dateFns.endOfMonth(dateFns.subMonths(date, 1));
+  let focusDate = lastDayOfPrevMonth;
+  while (dateFns.getDay(focusDate) !== currentWeekday) {
+    focusDate = dateFns.addDays(focusDate, -1);
+  }
+  return dateFns.getDate(focusDate);
+};
+function useMonthYearPicker(props, emits) {
+  const selectMonth = vue.ref(dateFns.getMonth(props.selectedDate));
+  const selectYear = vue.ref(dateFns.getYear(props.selectedDate));
+  const highlightedDay = vue.ref(null);
+  const focusPicker = vue.ref(0);
+  const focusRefs = vue.ref([]);
+  const calendarDays = vue.computed(() => {
+    return getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value);
+  });
+  const formattedMonth = vue.computed(() => {
+    return (month, format, locale) => formatMonth(month, format, locale);
+  });
+  vue.watch(selectMonth, () => {
+    highlightDay();
+    emits("calendar-days", calendarDays.value);
+  }, { immediate: true });
+  vue.watch(selectYear, () => {
+    highlightDay();
+    emits("calendar-days", calendarDays.value);
+  }, { immediate: true });
+  function setDayRef(el) {
+    if (!focusRefs.value.includes(el)) {
+      focusRefs.value.push(el);
+    }
+  }
+  function focusMonthYearPicker() {
+    focusRefs.value[0].$el.focus();
+  }
+  function handleKeyDown(event) {
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        if (focusPicker.value === 0) {
+          focusPicker.value = 3;
+          focusRefs.value[focusPicker.value].$el.focus();
+        } else {
+          focusPicker.value--;
+          focusRefs.value[focusPicker.value].$el.focus();
+        }
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        if (focusPicker.value === 3) {
+          focusPicker.value = 0;
+          focusRefs.value[focusPicker.value].$el.focus();
+        } else {
+          focusPicker.value++;
+          focusRefs.value[focusPicker.value].$el.focus();
+        }
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        emits("focus-first-day");
+        break;
+      case "Tab":
+        event.preventDefault();
+        emits("focus-first-day");
+        break;
+      case "Escape":
+        emits("close-datepicker");
+        break;
+    }
+  }
+  function highlightDay() {
+    const year = dateFns.getYear(props.selectedDate);
+    const month = dateFns.getMonth(props.selectedDate);
+    if (year !== selectYear.value || month !== selectMonth.value) {
+      highlightedDay.value = null;
+    } else {
+      highlightedDay.value = dateFns.getDate(props.selectedDate);
+    }
+  }
+  function changeMonth(value) {
+    if (selectMonth.value === 0 && value === -1 || selectMonth.value === 11 && value === 1) {
+      selectYear.value += value;
+    }
+    const initialDate = dateFns.set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });
+    const newDate = value === 1 ? dateFns.addMonths(initialDate, 1) : dateFns.subMonths(initialDate, 1);
+    selectMonth.value = dateFns.getMonth(newDate);
+  }
+  function changeYear(value) {
+    selectYear.value = selectYear.value + value;
+  }
+  function goToNextMonth() {
+    changeMonth(1);
+  }
+  function goToPrevMonth() {
+    changeMonth(-1);
+  }
+  return {
+    selectMonth,
+    selectYear,
+    formattedMonth,
+    setDayRef,
+    focusMonthYearPicker,
+    handleKeyDown,
+    changeMonth,
+    changeYear,
+    goToNextMonth,
+    goToPrevMonth
+  };
+}
+const _hoisted_1$2 = {
+  id: "calendar-heading",
+  class: "d-datepicker__month-year-title"
+};
+const _sfc_main$2 = {
+  __name: "month-year-picker",
+  props: {
+    locale: {
+      type: String,
+      required: true
+    },
+    prevMonthLabel: {
+      type: String,
+      required: true
+    },
+    nextMonthLabel: {
+      type: String,
+      required: true
+    },
+    prevYearLabel: {
+      type: String,
+      required: true
+    },
+    nextYearLabel: {
+      type: String,
+      required: true
+    },
+    changeToLabel: {
+      type: String,
+      required: true
+    },
+    selectedDate: {
+      type: Date,
+      required: true
+    }
+  },
+  emits: [
+    /**
+       * Will retrieve the calendar days of the given date
+       *
+       * @event calendar-days
+       * @type {Array}
+       */
+    "calendar-days",
+    /**
+       * Will focus first day in calendar
+       *
+       * @event focus-first-day
+       */
+    "focus-first-day",
+    /**
+       * Will focus last day in calendar
+       *
+       * @event focus-last-day
+       */
+    "focus-last-day",
+    /**
+       * Will close the datepicker
+       *
+       * @event close-datepicker
+       */
+    "close-datepicker"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      selectMonth,
+      selectYear,
+      formattedMonth,
+      setDayRef,
+      focusMonthYearPicker,
+      handleKeyDown,
+      changeMonth,
+      changeYear,
+      goToNextMonth,
+      goToPrevMonth
+    } = useMonthYearPicker(props, emits);
+    vue.onMounted(() => {
+      focusMonthYearPicker();
+    });
+    __expose({
+      focusMonthYearPicker,
+      goToNextMonth,
+      goToPrevMonth
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(lib_stack.DtStack), {
+        direction: "row",
+        class: "d-datepicker__month-year",
+        gap: "300"
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(vue.unref(lib_stack.DtStack), {
+            as: "nav",
+            direction: "row",
+            gap: "200",
+            class: "d-datepicker__nav"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
+                message: __props.prevYearLabel,
+                placement: "top",
+                "fallback-placements": ["top-start", "auto"]
+              }, {
+                anchor: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(lib_button.DtButton), {
+                    id: "prevYearButton",
+                    ref: (el) => {
+                      if (el)
+                        vue.unref(setDayRef)(el);
+                    },
+                    size: "xs",
+                    importance: "clear",
+                    kind: "muted",
+                    circle: true,
+                    class: "d-datepicker__nav-btn",
+                    type: "button",
+                    "aria-label": `${__props.changeToLabel} ${__props.prevYearLabel} ${vue.unref(selectYear) - 1}`,
+                    onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(changeYear)(-1)),
+                    onKeydown: _cache[1] || (_cache[1] = ($event) => vue.unref(handleKeyDown)($event))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(lib_icon.DtIcon), {
+                        name: "chevrons-left",
+                        size: "200"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label"])
+                ]),
+                _: 1
+              }, 8, ["message"]),
+              vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
+                message: __props.prevMonthLabel,
+                placement: "top",
+                "fallback-placements": ["top-end", "auto"]
+              }, {
+                anchor: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(lib_button.DtButton), {
+                    id: "prevMonthButton",
+                    ref: (el) => {
+                      if (el)
+                        vue.unref(setDayRef)(el);
+                    },
+                    size: "xs",
+                    importance: "clear",
+                    kind: "muted",
+                    circle: true,
+                    class: "d-datepicker__nav-btn",
+                    type: "button",
+                    "aria-label": `${__props.changeToLabel} ${__props.prevMonthLabel} ${vue.unref(formattedMonth)(vue.unref(selectMonth) - 1, vue.unref(INTL_MONTH_FORMAT), __props.locale)}`,
+                    onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(changeMonth)(-1)),
+                    onKeydown: _cache[3] || (_cache[3] = ($event) => vue.unref(handleKeyDown)($event))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(lib_icon.DtIcon), {
+                        name: "chevron-left",
+                        size: "200"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label"])
+                ]),
+                _: 1
+              }, 8, ["message"])
+            ]),
+            _: 1
+          }),
+          vue.createElementVNode("div", _hoisted_1$2, vue.toDisplayString(vue.unref(formattedMonth)(vue.unref(selectMonth), vue.unref(INTL_MONTH_FORMAT), __props.locale)) + " " + vue.toDisplayString(vue.unref(selectYear)), 1),
+          vue.createVNode(vue.unref(lib_stack.DtStack), {
+            as: "nav",
+            direction: "row",
+            gap: "200",
+            class: "d-datepicker__nav"
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
+                message: __props.nextMonthLabel,
+                placement: "top",
+                "fallback-placements": ["top-start", "auto"]
+              }, {
+                anchor: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(lib_button.DtButton), {
+                    id: "nextMonthButton",
+                    ref: (el) => {
+                      if (el)
+                        vue.unref(setDayRef)(el);
+                    },
+                    size: "xs",
+                    importance: "clear",
+                    kind: "muted",
+                    circle: true,
+                    class: "d-datepicker__nav-btn",
+                    type: "button",
+                    "aria-label": `${__props.changeToLabel} ${__props.nextMonthLabel} ${vue.unref(formattedMonth)(vue.unref(selectMonth) + 1, vue.unref(INTL_MONTH_FORMAT), __props.locale)}`,
+                    onClick: _cache[4] || (_cache[4] = ($event) => vue.unref(changeMonth)(1)),
+                    onKeydown: _cache[5] || (_cache[5] = ($event) => vue.unref(handleKeyDown)($event))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(lib_icon.DtIcon), {
+                        name: "chevron-right",
+                        size: "200"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label"])
+                ]),
+                _: 1
+              }, 8, ["message"]),
+              vue.createVNode(vue.unref(lib_tooltip.DtTooltip), {
+                message: __props.nextYearLabel,
+                placement: "top",
+                "fallback-placements": ["top-end", "auto"]
+              }, {
+                anchor: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(lib_button.DtButton), {
+                    id: "nextYearButton",
+                    ref: (el) => {
+                      if (el)
+                        vue.unref(setDayRef)(el);
+                    },
+                    size: "xs",
+                    importance: "clear",
+                    kind: "muted",
+                    circle: true,
+                    class: "d-datepicker__nav-btn",
+                    type: "button",
+                    "aria-label": `${__props.changeToLabel} ${__props.nextYearLabel} ${vue.unref(selectYear) + 1}`,
+                    onClick: _cache[6] || (_cache[6] = ($event) => vue.unref(changeYear)(1)),
+                    onKeydown: _cache[7] || (_cache[7] = ($event) => vue.unref(handleKeyDown)($event))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(lib_icon.DtIcon), {
+                        name: "chevrons-right",
+                        size: "200"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label"])
+                ]),
+                _: 1
+              }, 8, ["message"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+function useCalendar(props, emits) {
+  const selectedDay = vue.ref(null);
+  const focusDay = vue.ref(0);
+  const daysRef = vue.ref([]);
+  const weekDays = vue.computed(() => {
+    return getWeekDayNames(props.locale, WEEK_START);
+  });
+  vue.watch(() => props.calendarDays, () => {
+    focusDay.value = 0;
+    daysRef.value = [];
+    selectedDay.value = null;
+  });
+  function dayAriaLabel(day) {
+    return `${props.selectDayLabel} ${day.text} ${dateFns.format(day.value, MONTH_FORMAT)} ${dateFns.getYear(day.value)}`;
+  }
+  function setDayRef(el, day) {
+    if (!daysRef.value.some((day2) => day2.el === el) && day.currentMonth) {
+      daysRef.value.push({ el, day });
+    }
+  }
+  function handleKeyDown(event) {
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault();
+        focusDay.value -= 7;
+        try {
+          daysRef.value[focusDay.value].el.$el.focus();
+        } catch (error) {
+          const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);
+          emits("go-to-prev-month");
+          vue.nextTick(() => {
+            daysRef.value[prevFocusDate - 1].el.$el.focus();
+            focusDay.value += prevFocusDate - 1;
+          });
+        }
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        focusDay.value += 7;
+        try {
+          daysRef.value[focusDay.value].el.$el.focus();
+        } catch (error) {
+          const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);
+          emits("go-to-next-month");
+          vue.nextTick(() => {
+            daysRef.value[nextFocusDate - 1].el.$el.focus();
+            focusDay.value += nextFocusDate - 1;
+          });
+        }
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        if (focusDay.value > 0) {
+          focusDay.value -= 1;
+          daysRef.value[focusDay.value].el.$el.focus();
+        } else {
+          emits("go-to-prev-month");
+          focusLastDay();
+        }
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        if (focusDay.value < daysRef.value.length - 1) {
+          focusDay.value += 1;
+          daysRef.value[focusDay.value].el.$el.focus();
+        } else {
+          emits("go-to-next-month");
+          focusFirstDay();
+        }
+        break;
+      case "Tab":
+        event.preventDefault();
+        emits("focus-month-year-picker");
+        break;
+      case "Escape":
+        emits("close-datepicker");
+        break;
+    }
+  }
+  function focusFirstDay() {
+    focusDay.value = 0;
+    vue.nextTick(() => {
+      daysRef.value[focusDay.value].el.$el.focus();
+    });
+  }
+  function focusLastDay() {
+    vue.nextTick(() => {
+      focusDay.value = daysRef.value.length - 1;
+      daysRef.value[focusDay.value].el.$el.focus();
+    });
+  }
+  function selectDay(day) {
+    if (!day.currentMonth) {
+      return;
+    }
+    selectedDay.value = day.text;
+    emits("select-date", day.value);
+  }
+  return {
+    selectedDay,
+    weekDays,
+    dayAriaLabel,
+    setDayRef,
+    handleKeyDown,
+    focusFirstDay,
+    selectDay
+  };
+}
+const _hoisted_1$1 = {
+  class: "d-datepicker__calendar",
+  "aria-labelledby": "calendar-heading"
+};
+const _hoisted_2$1 = ["title", "aria-label"];
+const _sfc_main$1 = {
+  __name: "calendar",
+  props: {
+    calendarDays: {
+      type: Array,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
+    selectDayLabel: {
+      type: String,
+      required: true
+    }
+  },
+  emits: [
+    /**
+       * Event fired when a date is selected
+       *
+       * @event select-date
+       * @type {Date}
+       */
+    "select-date",
+    /**
+       * Will focus the month and year picker
+       *
+       * @event focus-month-year-picker
+       */
+    "focus-month-year-picker",
+    /**
+       * Will close the datepicker
+       *
+       * @event close-datepicker
+       */
+    "close-datepicker",
+    /**
+       * Will go to the next month
+       *
+       * @event go-to-next-month
+       */
+    "go-to-next-month",
+    /**
+       * Will go to the previous month
+       *
+       * @event go-to-prev-month
+       */
+    "go-to-prev-month"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      selectedDay,
+      weekDays,
+      dayAriaLabel,
+      setDayRef,
+      handleKeyDown,
+      focusFirstDay,
+      selectDay
+    } = useCalendar(props, emits);
+    __expose({
+      focusFirstDay
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("table", _hoisted_1$1, [
+        vue.createElementVNode("thead", null, [
+          vue.createElementVNode("tr", null, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(weekDays), (day) => {
+              return vue.openBlock(), vue.createElementBlock("th", {
+                key: day,
+                scope: "col",
+                class: "d-datepicker__cell d-datepicker__cell--header"
+              }, [
+                vue.createElementVNode("span", {
+                  class: "d-datepicker__weekday",
+                  title: day,
+                  "aria-label": day
+                }, vue.toDisplayString(day), 9, _hoisted_2$1)
+              ]);
+            }), 128))
+          ])
+        ]),
+        vue.createElementVNode("tbody", null, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.calendarDays, (week, indexWeek) => {
+            return vue.openBlock(), vue.createElementBlock("tr", { key: indexWeek }, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(week.days, (day, indexDays) => {
+                return vue.openBlock(), vue.createElementBlock("td", {
+                  key: indexWeek + indexDays,
+                  class: "d-datepicker__cell",
+                  role: "listbox"
+                }, [
+                  vue.createVNode(vue.unref(lib_button.DtButton), {
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el)
+                        vue.unref(setDayRef)(el, day);
+                    },
+                    class: vue.normalizeClass(["d-datepicker__day", {
+                      "d-datepicker__day--disabled": !day.currentMonth,
+                      "d-datepicker__day--selected": vue.unref(selectedDay) ? day.text === vue.unref(selectedDay) && day.currentMonth : day.selected
+                    }]),
+                    circle: true,
+                    size: "sm",
+                    importance: "clear",
+                    disabled: !day.currentMonth,
+                    type: "button",
+                    "aria-selected": !!vue.unref(selectedDay) ? day.text === vue.unref(selectedDay) && day.currentMonth : day.selected,
+                    "aria-label": vue.unref(dayAriaLabel)(day),
+                    role: "option",
+                    onClick: ($event) => vue.unref(selectDay)(day),
+                    onKeydown: _cache[0] || (_cache[0] = ($event) => vue.unref(handleKeyDown)($event))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(vue.toDisplayString(day.text), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["disabled", "class", "aria-selected", "aria-label", "onClick"])
+                ]);
+              }), 128))
+            ]);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+};
+const _hoisted_1 = { class: "d-datepicker__hd" };
+const _hoisted_2 = { class: "d-datepicker__bd" };
+const _sfc_main = {
+  __name: "datepicker",
+  props: {
+    /**
+       * Label for the previous month button
+       *
+       * @type {String}
+       * @example 'Previous month'
+       */
+    prevMonthLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Label for the next month button
+       *
+       * @type {String}
+       * @example 'Next month'
+       */
+    nextMonthLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Label for the previous year button
+       *
+       * @type {String}
+       * @example 'Previous year'
+       */
+    prevYearLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Label for the next year button
+       *
+       * @type {String}
+       * @example 'Next year'
+       */
+    nextYearLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Label for the select day button
+       *
+       * @type {String}
+       * @example 'Select day'
+       */
+    selectDayLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Label for the change to button
+       *
+       * @type {String}
+       * @example 'Change to'
+       */
+    changeToLabel: {
+      type: String,
+      required: true
+    },
+    /**
+       * Locale for the calendar
+       *
+       * @type {String}
+       */
+    locale: {
+      type: String,
+      default: "en-US"
+    },
+    /**
+       * Selected date
+       *
+       * @type {Date}
+       */
+    selectedDate: {
+      type: Date,
+      default: () => /* @__PURE__ */ new Date()
+    }
+  },
+  emits: [
+    /**
+       * Event fired when a date is selected
+       *
+       * @event selected-date
+       * @type {Date}
+       */
+    "selected-date",
+    /**
+       * Event fired when user presses the esc key
+       *
+       * @event close-datepicker
+       */
+    "close-datepicker"
+  ],
+  setup(__props) {
+    const calendarDays = vue.ref([]);
+    function updateCalendarDays(days) {
+      calendarDays.value = days;
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(lib_stack.DtStack), {
+        class: "d-datepicker",
+        gap: "400"
+      }, {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", _hoisted_1, [
+            vue.createVNode(_sfc_main$2, {
+              ref: "monthYearPicker",
+              locale: __props.locale,
+              "prev-month-label": __props.prevMonthLabel,
+              "next-month-label": __props.nextMonthLabel,
+              "prev-year-label": __props.prevYearLabel,
+              "next-year-label": __props.nextYearLabel,
+              "change-to-label": __props.changeToLabel,
+              "selected-date": __props.selectedDate,
+              onCalendarDays: updateCalendarDays,
+              onFocusFirstDay: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.calendar.focusFirstDay()),
+              onFocusLastDay: _cache[1] || (_cache[1] = ($event) => _ctx.$refs.calendar.focusLastDay()),
+              onCloseDatepicker: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close-datepicker"))
+            }, null, 8, ["locale", "prev-month-label", "next-month-label", "prev-year-label", "next-year-label", "change-to-label", "selected-date"])
+          ]),
+          vue.createElementVNode("div", _hoisted_2, [
+            vue.createVNode(_sfc_main$1, {
+              ref: "calendar",
+              locale: __props.locale,
+              "calendar-days": calendarDays.value,
+              "select-day-label": __props.selectDayLabel,
+              onSelectDate: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("selected-date", $event)),
+              onFocusMonthYearPicker: _cache[4] || (_cache[4] = ($event) => _ctx.$refs.monthYearPicker.focusMonthYearPicker()),
+              onCloseDatepicker: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("close-datepicker")),
+              onGoToNextMonth: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.monthYearPicker.goToNextMonth()),
+              onGoToPrevMonth: _cache[7] || (_cache[7] = ($event) => _ctx.$refs.monthYearPicker.goToPrevMonth())
+            }, null, 8, ["locale", "calendar-days", "select-day-label"])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+function formatLong(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" }).format(date);
+}
+function formatMedium(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { year: "numeric", month: "long", day: "numeric" }).format(date);
+}
+function formatShort(date, locale = "default", showWeekday = true) {
+  const options = showWeekday ? { weekday: "short", year: "numeric", month: "short", day: "numeric" } : { year: "numeric", month: "short", day: "numeric" };
+  return new Intl.DateTimeFormat(locale, options).format(date);
+}
+function formatNoYear(date, locale = "default", abbreviated = false) {
+  const monthFormat = abbreviated ? "short" : "long";
+  return new Intl.DateTimeFormat(locale, { month: monthFormat, day: "numeric" }).format(date);
+}
+function formatNumerical(date, locale = "default") {
+  return new Intl.DateTimeFormat(locale, { year: "2-digit", month: "2-digit", day: "2-digit" }).format(date);
+}
+exports.DtDatepicker = _sfc_main;
+exports.formatLong = formatLong;
+exports.formatMedium = formatMedium;
+exports.formatNoYear = formatNoYear;
+exports.formatNumerical = formatNumerical;
+exports.formatShort = formatShort;
+//# sourceMappingURL=datepicker.cjs.map