@dialpad/dialtone-vue 2.166.0 → 2.166.1

package/dist/packages/dialtone-vue2/components/datepicker/modules/calendar.vue.js

@@ -0,0 +1,199 @@
+import { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from "../utils.js";
+import { MONTH_FORMAT, WEEK_START } from "../datepicker_constants.js";
+import { format, getYear } from "date-fns";
+import DtButton from "../../button/button.vue.js";
+import normalizeComponent from "../../../../../_virtual/_plugin-vue2_normalizer.js";
+const _sfc_main = {
+  name: "DtDatepickerCalendar",
+  components: { DtButton },
+  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"
+  ],
+  data() {
+    return {
+      // local selectedDay to override the received by props calendarDays
+      selectedDay: null,
+      focusDay: 0,
+      daysRef: []
+    };
+  },
+  computed: {
+    weekDays() {
+      return getWeekDayNames(this.locale, WEEK_START);
+    }
+  },
+  watch: {
+    calendarDays() {
+      this.focusDay = 0;
+      this.selectedDay = null;
+      this.daysRef = [];
+      this.$nextTick(() => {
+        this.daysRef = [];
+        this.setDayRef();
+      });
+    }
+  },
+  methods: {
+    dayAriaLabel(day) {
+      return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;
+    },
+    setDayRef(el, day) {
+      this.calendarDays.forEach((week, weekIndex) => {
+        week.days.forEach((day2, dayIndex) => {
+          const refKey = `buttonRef_${weekIndex}_${dayIndex}`;
+          const dayButton = this.$refs[refKey];
+          if (dayButton && day2.currentMonth) {
+            this.daysRef.push({ el: dayButton[0], day: day2 });
+          }
+        });
+      });
+    },
+    handleKeyDown(event) {
+      switch (event.key) {
+        case "ArrowUp":
+          event.preventDefault();
+          this.focusDay -= 7;
+          try {
+            this.daysRef[this.focusDay].el.$el.focus();
+          } catch (error) {
+            const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);
+            this.$emit("go-to-prev-month");
+            this.$nextTick(() => {
+              this.setDayRef();
+              this.daysRef[prevFocusDate - 1].el.$el.focus();
+              this.focusDay += prevFocusDate - 1;
+            });
+          }
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          this.focusDay += 7;
+          try {
+            this.daysRef[this.focusDay].el.$el.focus();
+          } catch (error) {
+            const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);
+            this.$emit("go-to-next-month");
+            this.$nextTick(() => {
+              this.setDayRef();
+              this.daysRef[nextFocusDate - 1].el.$el.focus();
+              this.focusDay += nextFocusDate - 1;
+            });
+          }
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          if (this.focusDay > 0) {
+            this.focusDay -= 1;
+            this.daysRef[this.focusDay].el.$el.focus();
+          } else {
+            this.$emit("go-to-prev-month");
+            this.$nextTick(() => {
+              this.focusLastDay();
+            });
+          }
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          if (this.focusDay < this.daysRef.length - 1) {
+            this.focusDay += 1;
+            this.daysRef[this.focusDay].el.$el.focus();
+          } else {
+            this.$emit("go-to-next-month");
+            this.$nextTick(() => {
+              this.focusFirstDay();
+            });
+          }
+          break;
+        case "Tab":
+          event.preventDefault();
+          this.$emit("focus-month-year-picker");
+          break;
+        case "Escape":
+          this.$emit("close-datepicker");
+          break;
+      }
+    },
+    focusFirstDay() {
+      this.focusDay = 0;
+      this.$nextTick(() => {
+        this.daysRef[this.focusDay].el.$el.focus();
+      });
+    },
+    focusLastDay() {
+      this.$nextTick(() => {
+        this.focusDay = this.daysRef.length - 1;
+        this.daysRef[this.focusDay].el.$el.focus();
+      });
+    },
+    selectDay(day) {
+      if (!day.currentMonth) {
+        return;
+      }
+      this.selectedDay = day.text;
+      this.$emit("select-date", day.value);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("table", { staticClass: "d-datepicker__calendar", attrs: { "aria-labelledby": "calendar-heading" } }, [_c("thead", [_c("tr", _vm._l(_vm.weekDays, function(day) {
+    return _c("th", { key: day, staticClass: "d-datepicker__cell d-datepicker__cell--header", attrs: { "scope": "col" } }, [_c("span", { staticClass: "d-datepicker__weekday", attrs: { "title": day, "aria-label": day } }, [_vm._v(" " + _vm._s(day))])]);
+  }), 0)]), _c("tbody", _vm._l(_vm.calendarDays, function(week, indexWeek) {
+    return _c("tr", { key: indexWeek }, _vm._l(week.days, function(day, indexDays) {
+      return _c("td", { key: indexWeek + indexDays, staticClass: "d-datepicker__cell", attrs: { "role": "listbox" } }, [_c("dt-button", { ref: `buttonRef_${indexWeek}_${indexDays}`, refInFor: true, staticClass: "d-datepicker__day", class: {
+        "d-datepicker__day--disabled": !day.currentMonth,
+        "d-datepicker__day--selected": _vm.selectedDay ? day.text === _vm.selectedDay && day.currentMonth : day.selected
+      }, attrs: { "circle": true, "size": "sm", "importance": "clear", "disabled": !day.currentMonth, "type": "button", "aria-selected": !!_vm.selectedDay ? day.text === _vm.selectedDay && day.currentMonth : day.selected, "aria-label": _vm.dayAriaLabel(day), "role": "option" }, on: { "click": function($event) {
+        return _vm.selectDay(day);
+      }, "keydown": function($event) {
+        return _vm.handleKeyDown($event);
+      } } }, [_vm._v(" " + _vm._s(day.text) + " ")])], 1);
+    }), 0);
+  }), 0)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const Calendar = __component__.exports;
+export {
+  Calendar as default
+};
+//# sourceMappingURL=calendar.vue.js.map

package/dist/packages/dialtone-vue2/components/datepicker/modules/calendar.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.vue.js","sources":["../../../../../../components/datepicker/modules/calendar.vue"],"sourcesContent":["<template>\n  <table\n    class=\"d-datepicker__calendar\"\n    aria-labelledby=\"calendar-heading\"\n  >\n    <thead>\n      <tr>\n        <th\n          v-for=\"day in weekDays\"\n          :key=\"day\"\n          scope=\"col\"\n          class=\"d-datepicker__cell d-datepicker__cell--header\"\n        >\n          <span\n            class=\"d-datepicker__weekday\"\n            :title=\"day\"\n            :aria-label=\"day\"\n          > {{ day }}</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(week, indexWeek) in calendarDays\"\n        :key=\"indexWeek\"\n      >\n        <td\n          v-for=\"(day, indexDays) in week.days\"\n          :key=\"indexWeek + indexDays\"\n          class=\"d-datepicker__cell\"\n          role=\"listbox\"\n        >\n          <dt-button\n            :ref=\"`buttonRef_${indexWeek}_${indexDays}`\"\n            class=\"d-datepicker__day\"\n            :circle=\"true\"\n            size=\"sm\"\n            importance=\"clear\"\n            :disabled=\"!day.currentMonth\"\n            :class=\"{\n              'd-datepicker__day--disabled': !day.currentMonth,\n              'd-datepicker__day--selected': selectedDay\n                ? ((day.text === selectedDay) && day.currentMonth)\n                : day.selected,\n            }\"\n            type=\"button\"\n            :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && day.currentMonth) : day.selected\"\n            :aria-label=\"dayAriaLabel(day)\"\n            role=\"option\"\n            @click=\"selectDay(day)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            {{ day.text }}\n          </dt-button>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script>\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils';\nimport { WEEK_START, MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n  name: 'DtDatepickerCalendar',\n  components: { DtButton },\n\n  props: {\n    calendarDays: {\n      type: Array,\n      required: true,\n    },\n\n    locale: {\n      type: String,\n      required: true,\n    },\n\n    selectDayLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when a date is selected\n     *\n     * @event select-date\n     * @type {Date}\n     */\n    'select-date',\n\n    /**\n     * Will focus the month and year picker\n     *\n     * @event focus-month-year-picker\n     */\n    'focus-month-year-picker',\n\n    /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      // local selectedDay to override the received by props calendarDays\n      selectedDay: null,\n      focusDay: 0,\n      daysRef: [],\n    };\n  },\n\n  computed: {\n    weekDays () {\n      return getWeekDayNames(this.locale, WEEK_START);\n    },\n  },\n\n  watch: {\n    calendarDays () {\n      // on calendarDays update, reset our local variables\n      this.focusDay = 0;\n      this.selectedDay = null;\n\n      this.daysRef = [];\n\n      this.$nextTick(() => {\n        this.daysRef = [];\n        this.setDayRef();\n      });\n    },\n  },\n\n  methods: {\n    dayAriaLabel (day) {\n      return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n    },\n\n    setDayRef (el, day) {\n      this.calendarDays.forEach((week, weekIndex) => {\n        week.days.forEach((day, dayIndex) => {\n          const refKey = `buttonRef_${weekIndex}_${dayIndex}`;\n          const dayButton = this.$refs[refKey];\n          if (dayButton && day.currentMonth) {\n            this.daysRef.push({ el: dayButton[0], day });\n          }\n        });\n      });\n    },\n\n    handleKeyDown (event) {\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          this.focusDay -= 7;\n          try {\n            this.daysRef[this.focusDay].el.$el.focus();\n          } catch (error) {\n            const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);\n            this.$emit('go-to-prev-month');\n            this.$nextTick(() => {\n              this.setDayRef();\n              this.daysRef[prevFocusDate - 1].el.$el.focus();\n              this.focusDay += prevFocusDate - 1;\n            });\n          }\n          break;\n\n        case 'ArrowDown':\n          event.preventDefault();\n          this.focusDay += 7;\n          try {\n            this.daysRef[this.focusDay].el.$el.focus();\n          } catch (error) {\n            const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);\n            this.$emit('go-to-next-month');\n            this.$nextTick(() => {\n              this.setDayRef();\n              this.daysRef[nextFocusDate - 1].el.$el.focus();\n              this.focusDay += nextFocusDate - 1;\n            });\n          }\n          break;\n\n        case 'ArrowLeft':\n          event.preventDefault();\n          if (this.focusDay > 0) {\n            this.focusDay -= 1;\n            this.daysRef[this.focusDay].el.$el.focus();\n          } else {\n            // if we are on month first day, jump to last day of prev month\n            this.$emit('go-to-prev-month');\n            this.$nextTick(() => {\n              this.focusLastDay();\n            });\n          }\n          break;\n\n        case 'ArrowRight':\n          event.preventDefault();\n          if (this.focusDay < this.daysRef.length - 1) {\n            this.focusDay += 1;\n            this.daysRef[this.focusDay].el.$el.focus();\n          } else {\n            // if we are on month last day, jump to first day of next month\n            this.$emit('go-to-next-month');\n            this.$nextTick(() => {\n              this.focusFirstDay();\n            });\n          }\n          break;\n\n        case 'Tab':\n          event.preventDefault();\n          this.$emit('focus-month-year-picker');\n          break;\n\n        case 'Escape':\n          this.$emit('close-datepicker');\n          break;\n      }\n    },\n\n    focusFirstDay () {\n      this.focusDay = 0;\n      this.$nextTick(() => {\n        this.daysRef[this.focusDay].el.$el.focus();\n      });\n    },\n\n    focusLastDay () {\n      this.$nextTick(() => {\n        this.focusDay = this.daysRef.length - 1;\n        this.daysRef[this.focusDay].el.$el.focus();\n      });\n    },\n\n    selectDay (day) {\n      if (!day.currentMonth) { return; }\n\n      // local selectedDay is updated when a day is selected\n      this.selectedDay = day.text;\n      this.$emit('select-date', day.value);\n    },\n  },\n};\n</script>\n"],"names":["day"],"mappings":"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"}

package/dist/packages/dialtone-vue2/components/datepicker/modules/month-year-picker.vue.cjs

@@ -0,0 +1,228 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue2 = require("@dialpad/dialtone-icons/vue2");
+const dateFns = require("date-fns");
+const utils = require("../utils.cjs");
+const datepicker_constants = require("../datepicker_constants.cjs");
+const stack = require("../../stack/stack.vue.cjs");
+const tooltip = require("../../tooltip/tooltip.vue.cjs");
+const button = require("../../button/button.vue.cjs");
+const _pluginVue2_normalizer = require("../../../../../_virtual/_plugin-vue2_normalizer.cjs");
+const _sfc_main = {
+  name: "DtDatepickerMonthYearPicker",
+  components: {
+    DtButton: button.default,
+    DtTooltip: tooltip.default,
+    DtStack: stack.default,
+    DtIconChevronLeft: vue2.DtIconChevronLeft,
+    DtIconChevronsLeft: vue2.DtIconChevronsLeft,
+    DtIconChevronRight: vue2.DtIconChevronRight,
+    DtIconChevronsRight: vue2.DtIconChevronsRight
+  },
+  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"
+  ],
+  data() {
+    return {
+      selectMonth: dateFns.getMonth(this.selectedDate),
+      selectYear: dateFns.getYear(this.selectedDate),
+      highlightedDay: null,
+      focusPicker: 0,
+      focusRefs: [],
+      refNames: ["prevYearButtonRef", "prevMonthButtonRef", "nextMonthButtonRef", "nextYearButtonRef"]
+    };
+  },
+  computed: {
+    // Get days for the currently selected month and year and highlight the selected day
+    calendarDays() {
+      return utils.getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);
+    },
+    formattedMonth() {
+      return (month) => utils.formatMonth(month, datepicker_constants.INTL_MONTH_FORMAT, this.locale);
+    }
+  },
+  watch: {
+    selectMonth: {
+      handler() {
+        this.highlightDay();
+        this.$emit("calendar-days", this.calendarDays);
+      },
+      immediate: true
+    },
+    selectYear: {
+      handler() {
+        this.highlightDay();
+        this.$emit("calendar-days", this.calendarDays);
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.setButtonsRef();
+    this.focusMonthYearPicker();
+  },
+  methods: {
+    setButtonsRef() {
+      this.focusRefs = this.refNames.map((refName) => this.$refs[refName]);
+    },
+    focusMonthYearPicker() {
+      this.focusPicker = 0;
+      this.focusRefs[0].$el.focus();
+    },
+    handleKeyDown(event) {
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          if (this.focusPicker === 0) {
+            this.focusPicker = 3;
+            this.focusRefs[this.focusPicker].$el.focus();
+          } else {
+            this.focusPicker--;
+            this.focusRefs[this.focusPicker].$el.focus();
+          }
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          if (this.focusPicker === 3) {
+            this.focusPicker = 0;
+            this.focusRefs[this.focusPicker].$el.focus();
+          } else {
+            this.focusPicker++;
+            this.focusRefs[this.focusPicker].$el.focus();
+          }
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          this.$emit("focus-first-day");
+          break;
+        case "Tab":
+          event.preventDefault();
+          this.$emit("focus-first-day");
+          break;
+        case "Escape":
+          this.$emit("close-datepicker");
+          break;
+      }
+    },
+    highlightDay() {
+      const year = dateFns.getYear(this.selectedDate);
+      const month = dateFns.getMonth(this.selectedDate);
+      if (year !== this.selectYear || month !== this.selectMonth) {
+        this.highlightedDay = null;
+      } else {
+        this.highlightedDay = dateFns.getDate(this.selectedDate);
+      }
+    },
+    changeMonth(value) {
+      if (this.selectMonth === 0 && value === -1 || this.selectMonth === 11 && value === 1) {
+        this.selectYear += value;
+      }
+      const initialDate = dateFns.set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });
+      const newDate = value === 1 ? dateFns.addMonths(initialDate, 1) : dateFns.subMonths(initialDate, 1);
+      this.selectMonth = dateFns.getMonth(newDate);
+    },
+    changeYear(value) {
+      this.selectYear = this.selectYear + value;
+    },
+    goToNextMonth() {
+      this.changeMonth(1);
+    },
+    goToPrevMonth() {
+      this.changeMonth(-1);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { "direction": "row", "gap": "300" } }, [_c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.prevYearLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[0], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevYearButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevYearLabel} ${_vm.selectYear - 1}` }, on: { "click": function($event) {
+      return _vm.changeYear(-1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon-chevrons-left", { attrs: { "size": "200" } })], 1)];
+  }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevMonthButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevMonthLabel} ${_vm.formattedMonth(_vm.selectMonth - 1)}` }, on: { "click": function($event) {
+      return _vm.changeMonth(-1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon-chevron-left", { attrs: { "size": "200" } })], 1)];
+  }, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top", "fallback-placements": ["top-start", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextMonthButton", "size": "xs", "importance": "clear", "circle": true, "kind": "muted", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextMonthLabel} ${_vm.formattedMonth(_vm.selectMonth + 1)}` }, on: { "click": function($event) {
+      return _vm.changeMonth(1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon-chevron-right", { attrs: { "size": "200" } })], 1)];
+  }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top", "fallback-placements": ["top-end", "auto"] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextYearButton", "size": "xs", "kind": "muted", "circle": true, "importance": "clear", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextYearLabel} ${_vm.selectYear + 1}` }, on: { "click": function($event) {
+      return _vm.changeYear(1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon-chevrons-right", { attrs: { "size": "200" } })], 1)];
+  }, proxy: true }]) })], 1)], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const MonthYearPicker = __component__.exports;
+exports.default = MonthYearPicker;
+//# sourceMappingURL=month-year-picker.vue.cjs.map

package/dist/packages/dialtone-vue2/components/datepicker/modules/month-year-picker.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-year-picker.vue.cjs","sources":["../../../../../../components/datepicker/modules/month-year-picker.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    class=\"d-datepicker__month-year\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"prevYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"refNames[0]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"prevMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"refNames[1]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"nextMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"refNames[2]\"\n            size=\"xs\"\n            importance=\"clear\"\n            :circle=\"true\"\n            kind=\"muted\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"nextYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"refNames[3]\"\n            size=\"xs\"\n            kind=\"muted\"\n            :circle=\"true\"\n            importance=\"clear\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue2';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n  name: 'DtDatepickerMonthYearPicker',\n\n  components: {\n    DtButton,\n    DtTooltip,\n    DtStack,\n    DtIconChevronLeft,\n    DtIconChevronsLeft,\n    DtIconChevronRight,\n    DtIconChevronsRight,\n  },\n\n  props: {\n    locale: {\n      type: String,\n      required: true,\n    },\n\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    selectedDate: {\n      type: Date,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n    'calendar-days',\n\n    /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n    'focus-first-day',\n\n    /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n    'focus-last-day',\n\n    /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      selectMonth: getMonth(this.selectedDate),\n      selectYear: getYear(this.selectedDate),\n      highlightedDay: null,\n      focusPicker: 0,\n      focusRefs: [],\n      refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n    };\n  },\n\n  computed: {\n    // Get days for the currently selected month and year and highlight the selected day\n    calendarDays () {\n      return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n    },\n\n    formattedMonth () {\n      return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n    },\n  },\n\n  watch: {\n    selectMonth: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n    selectYear: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n  },\n\n  mounted () {\n    this.setButtonsRef();\n    this.focusMonthYearPicker();\n  },\n\n  methods: {\n    setButtonsRef () {\n      this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n    },\n\n    focusMonthYearPicker () {\n      this.focusPicker = 0;\n      this.focusRefs[0].$el.focus();\n    },\n\n    handleKeyDown (event) {\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault();\n          if (this.focusPicker === 0) {\n            this.focusPicker = 3;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker--;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowRight':\n          event.preventDefault();\n          if (this.focusPicker === 3) {\n            this.focusPicker = 0;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker++;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowDown':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Tab':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Escape':\n          this.$emit('close-datepicker');\n          break;\n      }\n    },\n\n    highlightDay () {\n      const year = getYear(this.selectedDate);\n      const month = getMonth(this.selectedDate);\n\n      if (year !== this.selectYear || month !== this.selectMonth) {\n        this.highlightedDay = null;\n      } else {\n        this.highlightedDay = getDate(this.selectedDate);\n      }\n    },\n\n    changeMonth (value) {\n      // Adjust year when changing from January to December or vice versa\n      if ((this.selectMonth === 0 && value === -1) || (this.selectMonth === 11 && value === 1)) {\n        this.selectYear += value;\n      }\n\n      // Calculate the new date by adding or subtracting months\n      const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n      const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n      // Update the selected month\n      this.selectMonth = getMonth(newDate);\n    },\n\n    changeYear (value) {\n      this.selectYear = this.selectYear + value;\n    },\n\n    goToNextMonth () {\n      this.changeMonth(1);\n    },\n\n    goToPrevMonth () {\n      this.changeMonth(-1);\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtTooltip","DtStack","DtIconChevronLeft","DtIconChevronsLeft","DtIconChevronRight","DtIconChevronsRight","getMonth","getYear","getCalendarDays","formatMonth","INTL_MONTH_FORMAT","getDate","set","addMonths","subMonths"],"mappings":"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"}