@dialpad/dialtone 9.56.0 → 9.56.2

package/dist/vue2/lib/datepicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"datepicker.cjs","sources":["../../components/datepicker/datepicker_constants.js","../../components/datepicker/utils.js","../../components/datepicker/modules/month-year-picker.vue","../../components/datepicker/modules/calendar.vue","../../components/datepicker/datepicker.vue","../../components/datepicker/formatUtils.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n","import {\n  startOfWeek, addDays, getMonth, isEqual,\n  addMonths, startOfMonth, getDay, getDate,\n  subMonths, endOfMonth,\n} from 'date-fns';\nimport { WEEK_START } from '@/components/datepicker/datepicker_constants.js';\n\nconst _parsedGetDate = (value) => (value ? new Date(value) : new Date());\n\n/**\n * Get 7 days from the provided start date, month is used to check\n * whether the date is from the specified month or in the offset\n */\nconst getWeekDays = (startDay, month, selectedDay) => {\n  const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));\n  const dates = [];\n  for (let i = 0; i < 7; i++) {\n    const next = addDays(startDate, i);\n    const isNext = getMonth(next) !== month;\n    dates.push({\n      text: next.getDate(),\n      value: next,\n      currentMonth: !isNext,\n      isFirstDayOfMonth: next.getDate() === 1 && !isNext,\n      // will be selected if the date is the same as the selected day and is from the current month\n      selected: selectedDay ? (next.getDate() === selectedDay && !isNext) : false,\n    });\n  }\n  return dates;\n};\n\nconst isDateEqual = (date, dateToCompare) => {\n  if (!date || !dateToCompare) {\n    return false;\n  }\n  return isEqual(date, dateToCompare);\n};\n\n/**\n * Get days for the calendar to be displayed in a table grouped by weeks\n */\nexport const getCalendarDays = (month, year, selectedDay) => {\n  const weeks = [];\n  const firstDate = _parsedGetDate(new Date(year, month));\n  const lastDate = _parsedGetDate(new Date(year, month + 1, 0));\n\n  const weekStartsOn = WEEK_START;\n\n  const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });\n\n  const addDaysToWeek = (date) => {\n    const days = getWeekDays(date, month, selectedDay);\n\n    weeks.push({ days });\n\n    if (\n      !weeks[weeks.length - 1].days.some((day) =>\n        isDateEqual(day.value, lastDate),\n      )\n    ) {\n      const nextDate = addDays(date, 7);\n      addDaysToWeek(nextDate);\n    }\n  };\n\n  addDaysToWeek(firstDateInCalendar);\n\n  return weeks;\n};\n\n/**\n * Generate week day names based on locale and in order specified in week start\n */\nexport const getWeekDayNames = (locale, weekStart) => {\n  // Get list in order from sun ... sat\n  const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {\n    return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' })\n      .format(new Date(`2017-01-0${day}T00:00:00+00:00`))\n      .slice(0, 2);\n  });\n\n  // Get days that are in order before specified week start\n  const beforeWeekStart = days.slice(0, weekStart);\n  // Get days that are in order after specified week start\n  const afterWeekStart = days.slice(weekStart + 1, days.length);\n\n  // return them in correct order\n  return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);\n};\n\nexport const formatMonth = (month, monthFormat, locale) => {\n  return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2000, month, 1));\n};\n\nexport const calculateNextFocusDate = (currentDate) => {\n  const date = new Date(currentDate);\n  const currentWeekday = getDay(date);\n  const nextMonthDate = addMonths(date, 1);\n  const nextMonthStart = startOfMonth(nextMonthDate);\n  const nextMonthStartWeekday = getDay(nextMonthStart);\n\n  const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;\n\n  // Add the difference in days to the first day of the next month\n  const focusDate = addDays(nextMonthStart, dayDifference);\n\n  // Returns only the day of the month\n  return getDate(focusDate);\n};\n\nexport const calculatePrevFocusDate = (currentDate) => {\n  const date = new Date(currentDate);\n  const currentWeekday = getDay(date);\n\n  // Move to the last day of the previous month\n  const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));\n  let focusDate = lastDayOfPrevMonth;\n\n  // Adjust to the same weekday in the last week of the previous month\n  while (getDay(focusDate) !== currentWeekday) {\n    focusDate = addDays(focusDate, -1);\n  }\n\n  // Returns only the day of the month\n  return getDate(focusDate);\n};\n","<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\n              name=\"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\n              name=\"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\n              name=\"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\n              name=\"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 { DtIcon } from '@/components/icon';\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: { DtButton, DtTooltip, DtStack, DtIcon },\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","<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","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :locale=\"locale\"\n        :prev-month-label=\"prevMonthLabel\"\n        :next-month-label=\"nextMonthLabel\"\n        :prev-year-label=\"prevYearLabel\"\n        :next-year-label=\"nextYearLabel\"\n        :change-to-label=\"changeToLabel\"\n        :selected-date=\"selectedDate\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :locale=\"locale\"\n        :calendar-days=\"calendarDays\"\n        :select-day-label=\"selectDayLabel\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\n\nexport default {\n  name: 'DtDatepicker',\n\n  components: { DtStack, MonthYearPicker, Calendar },\n\n  props: {\n    /**\n     * Label for the previous month button\n     *\n     * @type {String}\n     * @example 'Previous month'\n     */\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the next month button\n     *\n     * @type {String}\n     * @example 'Next month'\n     */\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the previous year button\n     *\n     * @type {String}\n     * @example 'Previous year'\n     */\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the next year button\n     *\n     * @type {String}\n     * @example 'Next year'\n     */\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the select day button\n     *\n     * @type {String}\n     * @example 'Select day'\n     */\n    selectDayLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the change to button\n     *\n     * @type {String}\n     * @example 'Change to'\n     */\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Locale for the calendar\n     *\n     * @type {String}\n     */\n    locale: {\n      type: String,\n      default: 'en-US',\n    },\n\n    /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n    selectedDate: {\n      type: Date,\n      default: () => (new Date()),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n    'selected-date',\n\n    /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      calendarDays: [],\n    };\n  },\n\n  methods: {\n    updateCalendarDays (days) {\n      this.calendarDays = days;\n    },\n  },\n};\n</script>\n","export function formatLong (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatMedium (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatShort (date, locale = 'default', showWeekday = true) {\n  const options = showWeekday ? { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' };\n  return new Intl.DateTimeFormat(locale, options).format(date);\n}\n\nexport function formatNoYear (date, locale = 'default', abbreviated = false) {\n  const monthFormat = abbreviated ? 'short' : 'long';\n  return new Intl.DateTimeFormat(locale, { month: monthFormat, day: 'numeric' }).format(date);\n}\n\nexport function formatNumerical (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: '2-digit', month: '2-digit', day: '2-digit' }).format(date);\n}\n\nexport default {\n  formatLong,\n  formatMedium,\n  formatShort,\n  formatNoYear,\n  formatNumerical,\n};\n"],"names":["addDays","getMonth","isEqual","startOfWeek","getDay","addMonths","startOfMonth","getDate","endOfMonth","subMonths","_sfc_main","DtButton","DtTooltip","DtStack","DtIcon","getYear","set","format","day"],"mappings":"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"}
+{"version":3,"file":"datepicker.cjs","sources":["../../components/datepicker/datepicker_constants.js","../../components/datepicker/utils.js","../../components/datepicker/modules/month-year-picker.vue","../../components/datepicker/modules/calendar.vue","../../components/datepicker/datepicker.vue","../../components/datepicker/formatUtils.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n","import {\n  startOfWeek, addDays, getMonth, isEqual,\n  addMonths, startOfMonth, getDay, getDate,\n  subMonths, endOfMonth,\n} from 'date-fns';\nimport { WEEK_START } from '@/components/datepicker/datepicker_constants.js';\n\nconst _parsedGetDate = (value) => (value ? new Date(value) : new Date());\n\n/**\n * Get 7 days from the provided start date, month is used to check\n * whether the date is from the specified month or in the offset\n */\nconst getWeekDays = (startDay, month, selectedDay) => {\n  const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));\n  const dates = [];\n  for (let i = 0; i < 7; i++) {\n    const next = addDays(startDate, i);\n    const isNext = getMonth(next) !== month;\n    dates.push({\n      text: next.getDate(),\n      value: next,\n      currentMonth: !isNext,\n      isFirstDayOfMonth: next.getDate() === 1 && !isNext,\n      // will be selected if the date is the same as the selected day and is from the current month\n      selected: selectedDay ? (next.getDate() === selectedDay && !isNext) : false,\n    });\n  }\n  return dates;\n};\n\nconst isDateEqual = (date, dateToCompare) => {\n  if (!date || !dateToCompare) {\n    return false;\n  }\n  return isEqual(date, dateToCompare);\n};\n\n/**\n * Get days for the calendar to be displayed in a table grouped by weeks\n */\nexport const getCalendarDays = (month, year, selectedDay) => {\n  const weeks = [];\n  const firstDate = _parsedGetDate(new Date(year, month));\n  const lastDate = _parsedGetDate(new Date(year, month + 1, 0));\n\n  const weekStartsOn = WEEK_START;\n\n  const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });\n\n  const addDaysToWeek = (date) => {\n    const days = getWeekDays(date, month, selectedDay);\n\n    weeks.push({ days });\n\n    if (\n      !weeks[weeks.length - 1].days.some((day) =>\n        isDateEqual(day.value, lastDate),\n      )\n    ) {\n      const nextDate = addDays(date, 7);\n      addDaysToWeek(nextDate);\n    }\n  };\n\n  addDaysToWeek(firstDateInCalendar);\n\n  return weeks;\n};\n\n/**\n * Generate week day names based on locale and in order specified in week start\n */\nexport const getWeekDayNames = (locale, weekStart) => {\n  // Get list in order from sun ... sat\n  const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {\n    return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' })\n      .format(new Date(`2017-01-0${day}T00:00:00+00:00`))\n      .slice(0, 2);\n  });\n\n  // Get days that are in order before specified week start\n  const beforeWeekStart = days.slice(0, weekStart);\n  // Get days that are in order after specified week start\n  const afterWeekStart = days.slice(weekStart + 1, days.length);\n\n  // return them in correct order\n  return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);\n};\n\nexport const formatMonth = (month, monthFormat, locale) => {\n  return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2000, month, 1));\n};\n\nexport const calculateNextFocusDate = (currentDate) => {\n  const date = new Date(currentDate);\n  const currentWeekday = getDay(date);\n  const nextMonthDate = addMonths(date, 1);\n  const nextMonthStart = startOfMonth(nextMonthDate);\n  const nextMonthStartWeekday = getDay(nextMonthStart);\n\n  const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;\n\n  // Add the difference in days to the first day of the next month\n  const focusDate = addDays(nextMonthStart, dayDifference);\n\n  // Returns only the day of the month\n  return getDate(focusDate);\n};\n\nexport const calculatePrevFocusDate = (currentDate) => {\n  const date = new Date(currentDate);\n  const currentWeekday = getDay(date);\n\n  // Move to the last day of the previous month\n  const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));\n  let focusDate = lastDayOfPrevMonth;\n\n  // Adjust to the same weekday in the last week of the previous month\n  while (getDay(focusDate) !== currentWeekday) {\n    focusDate = addDays(focusDate, -1);\n  }\n\n  // Returns only the day of the month\n  return getDate(focusDate);\n};\n","<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\n              name=\"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\n              name=\"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\n              name=\"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\n              name=\"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 { DtIcon } from '@/components/icon';\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: { DtButton, DtTooltip, DtStack, DtIcon },\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","<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","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :locale=\"locale\"\n        :prev-month-label=\"prevMonthLabel\"\n        :next-month-label=\"nextMonthLabel\"\n        :prev-year-label=\"prevYearLabel\"\n        :next-year-label=\"nextYearLabel\"\n        :change-to-label=\"changeToLabel\"\n        :selected-date=\"selectedDate\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :locale=\"locale\"\n        :calendar-days=\"calendarDays\"\n        :select-day-label=\"selectDayLabel\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\n\nexport default {\n  name: 'DtDatepicker',\n\n  components: { DtStack, MonthYearPicker, Calendar },\n\n  props: {\n    /**\n     * Label for the previous month button\n     *\n     * @type {String}\n     * @example 'Previous month'\n     */\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the next month button\n     *\n     * @type {String}\n     * @example 'Next month'\n     */\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the previous year button\n     *\n     * @type {String}\n     * @example 'Previous year'\n     */\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the next year button\n     *\n     * @type {String}\n     * @example 'Next year'\n     */\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the select day button\n     *\n     * @type {String}\n     * @example 'Select day'\n     */\n    selectDayLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the change to button\n     *\n     * @type {String}\n     * @example 'Change to'\n     */\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Locale for the calendar\n     *\n     * @type {String}\n     */\n    locale: {\n      type: String,\n      default: 'en-US',\n    },\n\n    /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n    selectedDate: {\n      type: Date,\n      default: () => (new Date()),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n    'selected-date',\n\n    /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      calendarDays: [],\n    };\n  },\n\n  methods: {\n    updateCalendarDays (days) {\n      this.calendarDays = days;\n    },\n  },\n};\n</script>\n","/**\n * Formats a date into a long format using the specified locale.\n *\n * @param {Date} date - The date to format.\n * @param {string} [locale='default'] - The locale to use for formatting. Defaults to 'default'.\n * @returns {string} The formatted date string.\n */\nexport function formatLong (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\n/**\n * Formats the given date in medium format.\n *\n * @param {Date} date - The date to be formatted.\n * @param {string} [locale='default'] - The locale to be used for formatting. Defaults to 'default'.\n * @returns {string} The formatted date string in medium format.\n */\nexport function formatMedium (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\n/**\n * Formats a date into a short string representation.\n * @param {Date} date - The date to format.\n * @param {string} [locale='default'] - The locale to use for formatting. Defaults to 'default'.\n * @param {boolean} [showWeekday=true] - Whether to include the weekday in the formatted string. Defaults to true.\n * @returns {string} The formatted date string.\n */\nexport function formatShort (date, locale = 'default', showWeekday = true) {\n  const options = showWeekday ? { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' };\n  return new Intl.DateTimeFormat(locale, options).format(date);\n}\n\n/**\n * Formats a date without the year.\n *\n * @param {Date} date - The date to format.\n * @param {string} [locale='default'] - The locale to use for formatting. Defaults to 'default'.\n * @param {boolean} [abbreviated=false] - Whether to use abbreviated month names. Defaults to false.\n * @returns {string} The formatted date without the year.\n */\nexport function formatNoYear (date, locale = 'default', abbreviated = false) {\n  const monthFormat = abbreviated ? 'short' : 'long';\n  return new Intl.DateTimeFormat(locale, { month: monthFormat, day: 'numeric' }).format(date);\n}\n\n/**\n * Formats a date into a numerical string representation.\n *\n * @param {Date} date - The date to format.\n * @param {string} [locale='default'] - The locale to use for formatting. Defaults to 'default'.\n * @returns {string} The formatted numerical date string.\n */\nexport function formatNumerical (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: '2-digit', month: '2-digit', day: '2-digit' }).format(date);\n}\n\nexport default {\n  formatLong,\n  formatMedium,\n  formatShort,\n  formatNoYear,\n  formatNumerical,\n};\n"],"names":["addDays","getMonth","isEqual","startOfWeek","getDay","addMonths","startOfMonth","getDate","endOfMonth","subMonths","_sfc_main","DtButton","DtTooltip","DtStack","DtIcon","getYear","set","format","day"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"datepicker.js","sources":["../../components/datepicker/datepicker_constants.js","../../components/datepicker/utils.js","../../components/datepicker/modules/month-year-picker.vue","../../components/datepicker/modules/calendar.vue","../../components/datepicker/datepicker.vue","../../components/datepicker/formatUtils.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n","import {\n  startOfWeek, addDays, getMonth, isEqual,\n  addMonths, startOfMonth, getDay, getDate,\n  subMonths, endOfMonth,\n} from 'date-fns';\nimport { WEEK_START } from '@/components/datepicker/datepicker_constants.js';\n\nconst _parsedGetDate = (value) => (value ? new Date(value) : new Date());\n\n/**\n * Get 7 days from the provided start date, month is used to check\n * whether the date is from the specified month or in the offset\n */\nconst getWeekDays = (startDay, month, selectedDay) => {\n  const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));\n  const dates = [];\n  for (let i = 0; i < 7; i++) {\n    const next = addDays(startDate, i);\n    const isNext = getMonth(next) !== month;\n    dates.push({\n      text: next.getDate(),\n      value: next,\n      currentMonth: !isNext,\n      isFirstDayOfMonth: next.getDate() === 1 && !isNext,\n      // will be selected if the date is the same as the selected day and is from the current month\n      selected: selectedDay ? (next.getDate() === selectedDay && !isNext) : false,\n    });\n  }\n  return dates;\n};\n\nconst isDateEqual = (date, dateToCompare) => {\n  if (!date || !dateToCompare) {\n    return false;\n  }\n  return isEqual(date, dateToCompare);\n};\n\n/**\n * Get days for the calendar to be displayed in a table grouped by weeks\n */\nexport const getCalendarDays = (month, year, selectedDay) => {\n  const weeks = [];\n  const firstDate = _parsedGetDate(new Date(year, month));\n  const lastDate = _parsedGetDate(new Date(year, month + 1, 0));\n\n  const weekStartsOn = WEEK_START;\n\n  const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });\n\n  const addDaysToWeek = (date) => {\n    const days = getWeekDays(date, month, selectedDay);\n\n    weeks.push({ days });\n\n    if (\n      !weeks[weeks.length - 1].days.some((day) =>\n        isDateEqual(day.value, lastDate),\n      )\n    ) {\n      const nextDate = addDays(date, 7);\n      addDaysToWeek(nextDate);\n    }\n  };\n\n  addDaysToWeek(firstDateInCalendar);\n\n  return weeks;\n};\n\n/**\n * Generate week day names based on locale and in order specified in week start\n */\nexport const getWeekDayNames = (locale, weekStart) => {\n  // Get list in order from sun ... sat\n  const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {\n    return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' })\n      .format(new Date(`2017-01-0${day}T00:00:00+00:00`))\n      .slice(0, 2);\n  });\n\n  // Get days that are in order before specified week start\n  const beforeWeekStart = days.slice(0, weekStart);\n  // Get days that are in order after specified week start\n  const afterWeekStart = days.slice(weekStart + 1, days.length);\n\n  // return them in correct order\n  return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);\n};\n\nexport const formatMonth = (month, monthFormat, locale) => {\n  return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2000, month, 1));\n};\n\nexport const calculateNextFocusDate = (currentDate) => {\n  const date = new Date(currentDate);\n  const currentWeekday = getDay(date);\n  const nextMonthDate = addMonths(date, 1);\n  const nextMonthStart = startOfMonth(nextMonthDate);\n  const nextMonthStartWeekday = getDay(nextMonthStart);\n\n  const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;\n\n  // Add the difference in days to the first day of the next month\n  const focusDate = addDays(nextMonthStart, dayDifference);\n\n  // Returns only the day of the month\n  return getDate(focusDate);\n};\n\nexport const calculatePrevFocusDate = (currentDate) => {\n  const date = new Date(currentDate);\n  const currentWeekday = getDay(date);\n\n  // Move to the last day of the previous month\n  const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));\n  let focusDate = lastDayOfPrevMonth;\n\n  // Adjust to the same weekday in the last week of the previous month\n  while (getDay(focusDate) !== currentWeekday) {\n    focusDate = addDays(focusDate, -1);\n  }\n\n  // Returns only the day of the month\n  return getDate(focusDate);\n};\n","<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\n              name=\"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\n              name=\"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\n              name=\"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\n              name=\"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 { DtIcon } from '@/components/icon';\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: { DtButton, DtTooltip, DtStack, DtIcon },\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","<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","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :locale=\"locale\"\n        :prev-month-label=\"prevMonthLabel\"\n        :next-month-label=\"nextMonthLabel\"\n        :prev-year-label=\"prevYearLabel\"\n        :next-year-label=\"nextYearLabel\"\n        :change-to-label=\"changeToLabel\"\n        :selected-date=\"selectedDate\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :locale=\"locale\"\n        :calendar-days=\"calendarDays\"\n        :select-day-label=\"selectDayLabel\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\n\nexport default {\n  name: 'DtDatepicker',\n\n  components: { DtStack, MonthYearPicker, Calendar },\n\n  props: {\n    /**\n     * Label for the previous month button\n     *\n     * @type {String}\n     * @example 'Previous month'\n     */\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the next month button\n     *\n     * @type {String}\n     * @example 'Next month'\n     */\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the previous year button\n     *\n     * @type {String}\n     * @example 'Previous year'\n     */\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the next year button\n     *\n     * @type {String}\n     * @example 'Next year'\n     */\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the select day button\n     *\n     * @type {String}\n     * @example 'Select day'\n     */\n    selectDayLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the change to button\n     *\n     * @type {String}\n     * @example 'Change to'\n     */\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Locale for the calendar\n     *\n     * @type {String}\n     */\n    locale: {\n      type: String,\n      default: 'en-US',\n    },\n\n    /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n    selectedDate: {\n      type: Date,\n      default: () => (new Date()),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n    'selected-date',\n\n    /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      calendarDays: [],\n    };\n  },\n\n  methods: {\n    updateCalendarDays (days) {\n      this.calendarDays = days;\n    },\n  },\n};\n</script>\n","export function formatLong (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatMedium (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\nexport function formatShort (date, locale = 'default', showWeekday = true) {\n  const options = showWeekday ? { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' };\n  return new Intl.DateTimeFormat(locale, options).format(date);\n}\n\nexport function formatNoYear (date, locale = 'default', abbreviated = false) {\n  const monthFormat = abbreviated ? 'short' : 'long';\n  return new Intl.DateTimeFormat(locale, { month: monthFormat, day: 'numeric' }).format(date);\n}\n\nexport function formatNumerical (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: '2-digit', month: '2-digit', day: '2-digit' }).format(date);\n}\n\nexport default {\n  formatLong,\n  formatMedium,\n  formatShort,\n  formatNoYear,\n  formatNumerical,\n};\n"],"names":["_sfc_main","day"],"mappings":"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"}
+{"version":3,"file":"datepicker.js","sources":["../../components/datepicker/datepicker_constants.js","../../components/datepicker/utils.js","../../components/datepicker/modules/month-year-picker.vue","../../components/datepicker/modules/calendar.vue","../../components/datepicker/datepicker.vue","../../components/datepicker/formatUtils.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n","import {\n  startOfWeek, addDays, getMonth, isEqual,\n  addMonths, startOfMonth, getDay, getDate,\n  subMonths, endOfMonth,\n} from 'date-fns';\nimport { WEEK_START } from '@/components/datepicker/datepicker_constants.js';\n\nconst _parsedGetDate = (value) => (value ? new Date(value) : new Date());\n\n/**\n * Get 7 days from the provided start date, month is used to check\n * whether the date is from the specified month or in the offset\n */\nconst getWeekDays = (startDay, month, selectedDay) => {\n  const startDate = _parsedGetDate(JSON.parse(JSON.stringify(startDay)));\n  const dates = [];\n  for (let i = 0; i < 7; i++) {\n    const next = addDays(startDate, i);\n    const isNext = getMonth(next) !== month;\n    dates.push({\n      text: next.getDate(),\n      value: next,\n      currentMonth: !isNext,\n      isFirstDayOfMonth: next.getDate() === 1 && !isNext,\n      // will be selected if the date is the same as the selected day and is from the current month\n      selected: selectedDay ? (next.getDate() === selectedDay && !isNext) : false,\n    });\n  }\n  return dates;\n};\n\nconst isDateEqual = (date, dateToCompare) => {\n  if (!date || !dateToCompare) {\n    return false;\n  }\n  return isEqual(date, dateToCompare);\n};\n\n/**\n * Get days for the calendar to be displayed in a table grouped by weeks\n */\nexport const getCalendarDays = (month, year, selectedDay) => {\n  const weeks = [];\n  const firstDate = _parsedGetDate(new Date(year, month));\n  const lastDate = _parsedGetDate(new Date(year, month + 1, 0));\n\n  const weekStartsOn = WEEK_START;\n\n  const firstDateInCalendar = startOfWeek(firstDate, { weekStartsOn });\n\n  const addDaysToWeek = (date) => {\n    const days = getWeekDays(date, month, selectedDay);\n\n    weeks.push({ days });\n\n    if (\n      !weeks[weeks.length - 1].days.some((day) =>\n        isDateEqual(day.value, lastDate),\n      )\n    ) {\n      const nextDate = addDays(date, 7);\n      addDaysToWeek(nextDate);\n    }\n  };\n\n  addDaysToWeek(firstDateInCalendar);\n\n  return weeks;\n};\n\n/**\n * Generate week day names based on locale and in order specified in week start\n */\nexport const getWeekDayNames = (locale, weekStart) => {\n  // Get list in order from sun ... sat\n  const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {\n    return new Intl.DateTimeFormat(locale, { weekday: 'short', timeZone: 'UTC' })\n      .format(new Date(`2017-01-0${day}T00:00:00+00:00`))\n      .slice(0, 2);\n  });\n\n  // Get days that are in order before specified week start\n  const beforeWeekStart = days.slice(0, weekStart);\n  // Get days that are in order after specified week start\n  const afterWeekStart = days.slice(weekStart + 1, days.length);\n\n  // return them in correct order\n  return [days[weekStart]].concat(...afterWeekStart).concat(...beforeWeekStart);\n};\n\nexport const formatMonth = (month, monthFormat, locale) => {\n  return new Intl.DateTimeFormat(locale, { month: monthFormat }).format(new Date(2000, month, 1));\n};\n\nexport const calculateNextFocusDate = (currentDate) => {\n  const date = new Date(currentDate);\n  const currentWeekday = getDay(date);\n  const nextMonthDate = addMonths(date, 1);\n  const nextMonthStart = startOfMonth(nextMonthDate);\n  const nextMonthStartWeekday = getDay(nextMonthStart);\n\n  const dayDifference = (currentWeekday - nextMonthStartWeekday + 7) % 7;\n\n  // Add the difference in days to the first day of the next month\n  const focusDate = addDays(nextMonthStart, dayDifference);\n\n  // Returns only the day of the month\n  return getDate(focusDate);\n};\n\nexport const calculatePrevFocusDate = (currentDate) => {\n  const date = new Date(currentDate);\n  const currentWeekday = getDay(date);\n\n  // Move to the last day of the previous month\n  const lastDayOfPrevMonth = endOfMonth(subMonths(date, 1));\n  let focusDate = lastDayOfPrevMonth;\n\n  // Adjust to the same weekday in the last week of the previous month\n  while (getDay(focusDate) !== currentWeekday) {\n    focusDate = addDays(focusDate, -1);\n  }\n\n  // Returns only the day of the month\n  return getDate(focusDate);\n};\n","<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\n              name=\"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\n              name=\"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\n              name=\"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\n              name=\"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 { DtIcon } from '@/components/icon';\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: { DtButton, DtTooltip, DtStack, DtIcon },\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","<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","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :locale=\"locale\"\n        :prev-month-label=\"prevMonthLabel\"\n        :next-month-label=\"nextMonthLabel\"\n        :prev-year-label=\"prevYearLabel\"\n        :next-year-label=\"nextYearLabel\"\n        :change-to-label=\"changeToLabel\"\n        :selected-date=\"selectedDate\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :locale=\"locale\"\n        :calendar-days=\"calendarDays\"\n        :select-day-label=\"selectDayLabel\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\n\nexport default {\n  name: 'DtDatepicker',\n\n  components: { DtStack, MonthYearPicker, Calendar },\n\n  props: {\n    /**\n     * Label for the previous month button\n     *\n     * @type {String}\n     * @example 'Previous month'\n     */\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the next month button\n     *\n     * @type {String}\n     * @example 'Next month'\n     */\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the previous year button\n     *\n     * @type {String}\n     * @example 'Previous year'\n     */\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the next year button\n     *\n     * @type {String}\n     * @example 'Next year'\n     */\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the select day button\n     *\n     * @type {String}\n     * @example 'Select day'\n     */\n    selectDayLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the change to button\n     *\n     * @type {String}\n     * @example 'Change to'\n     */\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Locale for the calendar\n     *\n     * @type {String}\n     */\n    locale: {\n      type: String,\n      default: 'en-US',\n    },\n\n    /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n    selectedDate: {\n      type: Date,\n      default: () => (new Date()),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n    'selected-date',\n\n    /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      calendarDays: [],\n    };\n  },\n\n  methods: {\n    updateCalendarDays (days) {\n      this.calendarDays = days;\n    },\n  },\n};\n</script>\n","/**\n * Formats a date into a long format using the specified locale.\n *\n * @param {Date} date - The date to format.\n * @param {string} [locale='default'] - The locale to use for formatting. Defaults to 'default'.\n * @returns {string} The formatted date string.\n */\nexport function formatLong (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\n/**\n * Formats the given date in medium format.\n *\n * @param {Date} date - The date to be formatted.\n * @param {string} [locale='default'] - The locale to be used for formatting. Defaults to 'default'.\n * @returns {string} The formatted date string in medium format.\n */\nexport function formatMedium (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long', day: 'numeric' }).format(date);\n}\n\n/**\n * Formats a date into a short string representation.\n * @param {Date} date - The date to format.\n * @param {string} [locale='default'] - The locale to use for formatting. Defaults to 'default'.\n * @param {boolean} [showWeekday=true] - Whether to include the weekday in the formatted string. Defaults to true.\n * @returns {string} The formatted date string.\n */\nexport function formatShort (date, locale = 'default', showWeekday = true) {\n  const options = showWeekday ? { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' } : { year: 'numeric', month: 'short', day: 'numeric' };\n  return new Intl.DateTimeFormat(locale, options).format(date);\n}\n\n/**\n * Formats a date without the year.\n *\n * @param {Date} date - The date to format.\n * @param {string} [locale='default'] - The locale to use for formatting. Defaults to 'default'.\n * @param {boolean} [abbreviated=false] - Whether to use abbreviated month names. Defaults to false.\n * @returns {string} The formatted date without the year.\n */\nexport function formatNoYear (date, locale = 'default', abbreviated = false) {\n  const monthFormat = abbreviated ? 'short' : 'long';\n  return new Intl.DateTimeFormat(locale, { month: monthFormat, day: 'numeric' }).format(date);\n}\n\n/**\n * Formats a date into a numerical string representation.\n *\n * @param {Date} date - The date to format.\n * @param {string} [locale='default'] - The locale to use for formatting. Defaults to 'default'.\n * @returns {string} The formatted numerical date string.\n */\nexport function formatNumerical (date, locale = 'default') {\n  return new Intl.DateTimeFormat(locale, { year: '2-digit', month: '2-digit', day: '2-digit' }).format(date);\n}\n\nexport default {\n  formatLong,\n  formatMedium,\n  formatShort,\n  formatNoYear,\n  formatNumerical,\n};\n"],"names":["_sfc_main","day"],"mappings":";;;;;;;;;;;;;;;;AAKO,MAAM,aAAa;AAEnB,MAAM,eAAe;AAErB,MAAM,oBAAoB;ACFjC,MAAM,iBAAiB,CAAC,UAAW,QAAQ,IAAI,KAAK,KAAK,IAAI,oBAAI,KAAI;AAMrE,MAAM,cAAc,CAAC,UAAU,OAAO,gBAAgB;AACpD,QAAM,YAAY,eAAe,KAAK,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;AACrE,QAAM,QAAQ,CAAA;AACd,WAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1B,UAAM,OAAO,QAAQ,WAAW,CAAC;AACjC,UAAM,SAAS,SAAS,IAAI,MAAM;AAClC,UAAM,KAAK;AAAA,MACT,MAAM,KAAK,QAAS;AAAA,MACpB,OAAO;AAAA,MACP,cAAc,CAAC;AAAA,MACf,mBAAmB,KAAK,cAAc,KAAK,CAAC;AAAA;AAAA,MAE5C,UAAU,cAAe,KAAK,QAAS,MAAK,eAAe,CAAC,SAAU;AAAA,IAC5E,CAAK;AAAA,EACF;AACD,SAAO;AACT;AAEA,MAAM,cAAc,CAAC,MAAM,kBAAkB;AAC3C,MAAI,CAAC,QAAQ,CAAC,eAAe;AAC3B,WAAO;AAAA,EACR;AACD,SAAO,QAAQ,MAAM,aAAa;AACpC;AAKO,MAAM,kBAAkB,CAAC,OAAO,MAAM,gBAAgB;AAC3D,QAAM,QAAQ,CAAA;AACd,QAAM,YAAY,eAAe,IAAI,KAAK,MAAM,KAAK,CAAC;AACtD,QAAM,WAAW,eAAe,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC,CAAC;AAE5D,QAAM,eAAe;AAErB,QAAM,sBAAsB,YAAY,WAAW,EAAE,aAAc,CAAA;AAEnE,QAAM,gBAAgB,CAAC,SAAS;AAC9B,UAAM,OAAO,YAAY,MAAM,OAAO,WAAW;AAEjD,UAAM,KAAK,EAAE,KAAI,CAAE;AAEnB,QACE,CAAC,MAAM,MAAM,SAAS,CAAC,EAAE,KAAK;AAAA,MAAK,CAAC,QAClC,YAAY,IAAI,OAAO,QAAQ;AAAA,IAChC,GACD;AACA,YAAM,WAAW,QAAQ,MAAM,CAAC;AAChC,oBAAc,QAAQ;AAAA,IACvB;AAAA,EACL;AAEE,gBAAc,mBAAmB;AAEjC,SAAO;AACT;AAKO,MAAM,kBAAkB,CAAC,QAAQ,cAAc;AAEpD,QAAM,OAAO,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,QAAQ;AAC9C,WAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,SAAS,UAAU,OAAO,EACzE,OAAO,oBAAI,KAAK,YAAY,GAAG,iBAAiB,CAAC,EACjD,MAAM,GAAG,CAAC;AAAA,EACjB,CAAG;AAGD,QAAM,kBAAkB,KAAK,MAAM,GAAG,SAAS;AAE/C,QAAM,iBAAiB,KAAK,MAAM,YAAY,GAAG,KAAK,MAAM;AAG5D,SAAO,CAAC,KAAK,SAAS,CAAC,EAAE,OAAO,GAAG,cAAc,EAAE,OAAO,GAAG,eAAe;AAC9E;AAEO,MAAM,cAAc,CAAC,OAAO,aAAa,WAAW;AACzD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,YAAW,CAAE,EAAE,OAAO,IAAI,KAAK,KAAM,OAAO,CAAC,CAAC;AAChG;AAEO,MAAM,yBAAyB,CAAC,gBAAgB;AACrD,QAAM,OAAO,IAAI,KAAK,WAAW;AACjC,QAAM,iBAAiB,OAAO,IAAI;AAClC,QAAM,gBAAgB,UAAU,MAAM,CAAC;AACvC,QAAM,iBAAiB,aAAa,aAAa;AACjD,QAAM,wBAAwB,OAAO,cAAc;AAEnD,QAAM,iBAAiB,iBAAiB,wBAAwB,KAAK;AAGrE,QAAM,YAAY,QAAQ,gBAAgB,aAAa;AAGvD,SAAO,QAAQ,SAAS;AAC1B;AAEO,MAAM,yBAAyB,CAAC,gBAAgB;AACrD,QAAM,OAAO,IAAI,KAAK,WAAW;AACjC,QAAM,iBAAiB,OAAO,IAAI;AAGlC,QAAM,qBAAqB,WAAW,UAAU,MAAM,CAAC,CAAC;AACxD,MAAI,YAAY;AAGhB,SAAO,OAAO,SAAS,MAAM,gBAAgB;AAC3C,gBAAY,QAAQ,WAAW,EAAE;AAAA,EAClC;AAGD,SAAO,QAAQ,SAAS;AAC1B;ACmBA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,UAAA,WAAA,SAAA,OAAA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,aAAA,SAAA,KAAA,YAAA;AAAA,MACA,YAAA,QAAA,KAAA,YAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA,CAAA;AAAA,MACA,UAAA,CAAA,qBAAA,sBAAA,sBAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,eAAA;AACA,aAAA,gBAAA,KAAA,aAAA,KAAA,YAAA,KAAA,cAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,CAAA,UAAA,YAAA,OAAA,mBAAA,KAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,aAAA;AAAA,MACA,UAAA;AACA,aAAA,aAAA;AACA,aAAA,MAAA,iBAAA,KAAA,YAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,YAAA;AAAA,MACA,UAAA;AACA,aAAA,aAAA;AACA,aAAA,MAAA,iBAAA,KAAA,YAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EAEA;AAAA,EAEA,UAAA;AACA,SAAA,cAAA;AACA,SAAA,qBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,WAAA,YAAA,KAAA,SAAA,IAAA,aAAA,KAAA,MAAA,OAAA,CAAA;AAAA,IACA;AAAA,IAEA,uBAAA;AACA,WAAA,cAAA;AACA,WAAA,UAAA,CAAA,EAAA,IAAA,MAAA;AAAA,IACA;AAAA,IAEA,cAAA,OAAA;AACA,cAAA,MAAA,KAAA;AAAA,QACA,KAAA;AACA,gBAAA,eAAA;AACA,cAAA,KAAA,gBAAA,GAAA;AACA,iBAAA,cAAA;AACA,iBAAA,UAAA,KAAA,WAAA,EAAA,IAAA;UACA,OAAA;AACA,iBAAA;AACA,iBAAA,UAAA,KAAA,WAAA,EAAA,IAAA;UACA;AACA;AAAA,QAEA,KAAA;AACA,gBAAA,eAAA;AACA,cAAA,KAAA,gBAAA,GAAA;AACA,iBAAA,cAAA;AACA,iBAAA,UAAA,KAAA,WAAA,EAAA,IAAA;UACA,OAAA;AACA,iBAAA;AACA,iBAAA,UAAA,KAAA,WAAA,EAAA,IAAA;UACA;AACA;AAAA,QAEA,KAAA;AACA,gBAAA,eAAA;AACA,eAAA,MAAA,iBAAA;AACA;AAAA,QAEA,KAAA;AACA,gBAAA,eAAA;AACA,eAAA,MAAA,iBAAA;AACA;AAAA,QAEA,KAAA;AACA,eAAA,MAAA,kBAAA;AACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAA,OAAA,QAAA,KAAA,YAAA;AACA,YAAA,QAAA,SAAA,KAAA,YAAA;AAEA,UAAA,SAAA,KAAA,cAAA,UAAA,KAAA,aAAA;AACA,aAAA,iBAAA;AAAA,MACA,OAAA;AACA,aAAA,iBAAA,QAAA,KAAA,YAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA,OAAA;AAEA,UAAA,KAAA,gBAAA,KAAA,UAAA,MAAA,KAAA,gBAAA,MAAA,UAAA,GAAA;AACA,aAAA,cAAA;AAAA,MACA;AAGA,YAAA,cAAA,IAAA,KAAA,cAAA,EAAA,OAAA,KAAA,aAAA,MAAA,KAAA,WAAA,CAAA;AACA,YAAA,UAAA,UAAA,IAAA,UAAA,aAAA,CAAA,IAAA,UAAA,aAAA,CAAA;AAGA,WAAA,cAAA,SAAA,OAAA;AAAA,IACA;AAAA,IAEA,WAAA,OAAA;AACA,WAAA,aAAA,KAAA,aAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,YAAA,CAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,YAAA,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC9RA,MAAAA,cAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,SAAA;AAAA,EAEA,OAAA;AAAA,IACA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA;AAAA,MAEA,aAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,gBAAA,KAAA,QAAA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,eAAA;AAEA,WAAA,WAAA;AACA,WAAA,cAAA;AAEA,WAAA,UAAA;AAEA,WAAA,UAAA,MAAA;AACA,aAAA,UAAA;AACA,aAAA,UAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA,KAAA;AACA,aAAA,GAAA,KAAA,cAAA,IAAA,IAAA,IAAA,IAAA,OAAA,IAAA,OAAA,YAAA,CAAA,IAAA,QAAA,IAAA,KAAA,CAAA;AAAA,IACA;AAAA,IAEA,UAAA,IAAA,KAAA;AACA,WAAA,aAAA,QAAA,CAAA,MAAA,cAAA;AACA,aAAA,KAAA,QAAA,CAAAC,MAAA,aAAA;AACA,gBAAA,SAAA,aAAA,SAAA,IAAA,QAAA;AACA,gBAAA,YAAA,KAAA,MAAA,MAAA;AACA,cAAA,aAAAA,KAAA,cAAA;AACA,iBAAA,QAAA,KAAA,EAAA,IAAA,UAAA,CAAA,GAAA,KAAAA,KAAA,CAAA;AAAA,UACA;AAAA,QACA,CAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,cAAA,OAAA;AACA,cAAA,MAAA,KAAA;AAAA,QACA,KAAA;AACA,gBAAA,eAAA;AACA,eAAA,YAAA;AACA,cAAA;AACA,iBAAA,QAAA,KAAA,QAAA,EAAA,GAAA,IAAA;UACA,SAAA,OAAA;AACA,kBAAA,gBAAA,uBAAA,KAAA,QAAA,KAAA,WAAA,CAAA,EAAA,IAAA,KAAA;AACA,iBAAA,MAAA,kBAAA;AACA,iBAAA,UAAA,MAAA;AACA,mBAAA,UAAA;AACA,mBAAA,QAAA,gBAAA,CAAA,EAAA,GAAA,IAAA;AACA,mBAAA,YAAA,gBAAA;AAAA,YACA,CAAA;AAAA,UACA;AACA;AAAA,QAEA,KAAA;AACA,gBAAA,eAAA;AACA,eAAA,YAAA;AACA,cAAA;AACA,iBAAA,QAAA,KAAA,QAAA,EAAA,GAAA,IAAA;UACA,SAAA,OAAA;AACA,kBAAA,gBAAA,uBAAA,KAAA,QAAA,KAAA,WAAA,CAAA,EAAA,IAAA,KAAA;AACA,iBAAA,MAAA,kBAAA;AACA,iBAAA,UAAA,MAAA;AACA,mBAAA,UAAA;AACA,mBAAA,QAAA,gBAAA,CAAA,EAAA,GAAA,IAAA;AACA,mBAAA,YAAA,gBAAA;AAAA,YACA,CAAA;AAAA,UACA;AACA;AAAA,QAEA,KAAA;AACA,gBAAA,eAAA;AACA,cAAA,KAAA,WAAA,GAAA;AACA,iBAAA,YAAA;AACA,iBAAA,QAAA,KAAA,QAAA,EAAA,GAAA,IAAA;UACA,OAAA;AAEA,iBAAA,MAAA,kBAAA;AACA,iBAAA,UAAA,MAAA;AACA,mBAAA,aAAA;AAAA,YACA,CAAA;AAAA,UACA;AACA;AAAA,QAEA,KAAA;AACA,gBAAA,eAAA;AACA,cAAA,KAAA,WAAA,KAAA,QAAA,SAAA,GAAA;AACA,iBAAA,YAAA;AACA,iBAAA,QAAA,KAAA,QAAA,EAAA,GAAA,IAAA;UACA,OAAA;AAEA,iBAAA,MAAA,kBAAA;AACA,iBAAA,UAAA,MAAA;AACA,mBAAA,cAAA;AAAA,YACA,CAAA;AAAA,UACA;AACA;AAAA,QAEA,KAAA;AACA,gBAAA,eAAA;AACA,eAAA,MAAA,yBAAA;AACA;AAAA,QAEA,KAAA;AACA,eAAA,MAAA,kBAAA;AACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,WAAA;AACA,WAAA,UAAA,MAAA;AACA,aAAA,QAAA,KAAA,QAAA,EAAA,GAAA,IAAA;MACA,CAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,UAAA,MAAA;AACA,aAAA,WAAA,KAAA,QAAA,SAAA;AACA,aAAA,QAAA,KAAA,QAAA,EAAA,GAAA,IAAA;MACA,CAAA;AAAA,IACA;AAAA,IAEA,UAAA,KAAA;AACA,UAAA,CAAA,IAAA,cAAA;AAAA;AAAA,MAAA;AAGA,WAAA,cAAA,IAAA;AACA,WAAA,MAAA,eAAA,IAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AClNA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,SAAA,iBAAA,SAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,oBAAA;IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,cAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA,MAAA;AACA,WAAA,eAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC7JO,SAAS,WAAY,MAAM,SAAS,WAAW;AACpD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,QAAQ,MAAM,WAAW,OAAO,QAAQ,KAAK,UAAW,CAAA,EAAE,OAAO,IAAI;AACzH;AASO,SAAS,aAAc,MAAM,SAAS,WAAW;AACtD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,MAAM,WAAW,OAAO,QAAQ,KAAK,UAAS,CAAE,EAAE,OAAO,IAAI;AACxG;AASO,SAAS,YAAa,MAAM,SAAS,WAAW,cAAc,MAAM;AACzE,QAAM,UAAU,cAAc,EAAE,SAAS,SAAS,MAAM,WAAW,OAAO,SAAS,KAAK,UAAW,IAAG,EAAE,MAAM,WAAW,OAAO,SAAS,KAAK;AAC9I,SAAO,IAAI,KAAK,eAAe,QAAQ,OAAO,EAAE,OAAO,IAAI;AAC7D;AAUO,SAAS,aAAc,MAAM,SAAS,WAAW,cAAc,OAAO;AAC3E,QAAM,cAAc,cAAc,UAAU;AAC5C,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,aAAa,KAAK,UAAW,CAAA,EAAE,OAAO,IAAI;AAC5F;AASO,SAAS,gBAAiB,MAAM,SAAS,WAAW;AACzD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,MAAM,WAAW,OAAO,WAAW,KAAK,UAAS,CAAE,EAAE,OAAO,IAAI;AAC3G;"}

package/dist/vue2/lib/emoji-text-wrapper.cjs

@@ -43,15 +43,17 @@ const _sfc_main = {
      * @returns {Array<VNode|string>}
      */
     replaceDtEmojis(replaceList, textContent) {
+      if (!replaceList.length)
+        return textContent;
       const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
-      const split = textContent.split(regexp);
-      return split.map((item) => {
+      const items = textContent.split(regexp);
+      return items.filter((item) => item.trim() !== "").map((item) => {
         if (replaceList.includes(item)) {
           return this.$createElement(lib_emoji.DtEmoji, {
             props: { code: item, size: this.size }
           });
         }
-        return this.$createElement("span", item);
+        return this.$createElement("span", { class: "d-emoji-text-wrapper__text" }, item);
       });
     },
     /**
@@ -78,8 +80,6 @@ const _sfc_main = {
       const shortcodes = common_emoji.findShortCodes(textContent);
       const emojis = common_emoji.findEmojis(textContent);
       const replaceList = [...shortcodes, ...emojis];
-      if (replaceList.length === 0)
-        return textContent;
       return this.replaceDtEmojis(replaceList, textContent);
     }
   },
@@ -87,7 +87,10 @@ const _sfc_main = {
     const defaultSlotContent = this.$slots.default || [];
     return h(
       this.elementType,
-      { class: "d-emoji-text-wrapper" },
+      {
+        "data-qa": "emoji-text-wrapper",
+        class: "d-emoji-text-wrapper"
+      },
       this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
     );
   }

package/dist/vue2/lib/emoji-text-wrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-text-wrapper.cjs","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const split = textContent.split(regexp);\n      return split.map((item) => {\n        if (replaceList.includes(item)) {\n          return this.$createElement(DtEmoji, {\n            props: { code: item, size: this.size },\n          });\n        }\n        return this.$createElement('span', item);\n      });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      // If VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = this.$slots.default || [];\n    return h(\n      this.elementType,\n      { class: 'd-emoji-text-wrapper' },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["DtEmoji","ICON_SIZE_MODIFIERS","findShortCodes","findEmojis"],"mappings":";;;;;;;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA,UAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AACA,aAAA,MAAA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAAD,mBAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAAE,4BAAA,WAAA;AACA,YAAA,SAAAC,wBAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,UAAA,YAAA,WAAA;AAAA,eAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAA,OAAA,uBAAA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji-text-wrapper.cjs","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return this.$createElement(DtEmoji, {\n              props: { code: item, size: this.size },\n            });\n          }\n          return this.$createElement('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      // If VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = this.$slots.default || [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["DtEmoji","ICON_SIZE_MODIFIERS","findShortCodes","findEmojis"],"mappings":";;;;;;;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA,UAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA;AAAA,eAAA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAAD,mBAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAAE,4BAAA,WAAA;AACA,YAAA,SAAAC,wBAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/emoji-text-wrapper.js

@@ -41,15 +41,17 @@ const _sfc_main = {
      * @returns {Array<VNode|string>}
      */
     replaceDtEmojis(replaceList, textContent) {
+      if (!replaceList.length)
+        return textContent;
       const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
-      const split = textContent.split(regexp);
-      return split.map((item) => {
+      const items = textContent.split(regexp);
+      return items.filter((item) => item.trim() !== "").map((item) => {
         if (replaceList.includes(item)) {
           return this.$createElement(DtEmoji, {
             props: { code: item, size: this.size }
           });
         }
-        return this.$createElement("span", item);
+        return this.$createElement("span", { class: "d-emoji-text-wrapper__text" }, item);
       });
     },
     /**
@@ -76,8 +78,6 @@ const _sfc_main = {
       const shortcodes = findShortCodes(textContent);
       const emojis = findEmojis(textContent);
       const replaceList = [...shortcodes, ...emojis];
-      if (replaceList.length === 0)
-        return textContent;
       return this.replaceDtEmojis(replaceList, textContent);
     }
   },
@@ -85,7 +85,10 @@ const _sfc_main = {
     const defaultSlotContent = this.$slots.default || [];
     return h(
       this.elementType,
-      { class: "d-emoji-text-wrapper" },
+      {
+        "data-qa": "emoji-text-wrapper",
+        class: "d-emoji-text-wrapper"
+      },
       this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
     );
   }

package/dist/vue2/lib/emoji-text-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-text-wrapper.js","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const split = textContent.split(regexp);\n      return split.map((item) => {\n        if (replaceList.includes(item)) {\n          return this.$createElement(DtEmoji, {\n            props: { code: item, size: this.size },\n          });\n        }\n        return this.$createElement('span', item);\n      });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      // If VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = this.$slots.default || [];\n    return h(\n      this.elementType,\n      { class: 'd-emoji-text-wrapper' },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AACA,aAAA,MAAA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAA,SAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAA,eAAA,WAAA;AACA,YAAA,SAAA,WAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,UAAA,YAAA,WAAA;AAAA,eAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAA,OAAA,uBAAA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji-text-wrapper.js","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return this.$createElement(DtEmoji, {\n              props: { code: item, size: this.size },\n            });\n          }\n          return this.$createElement('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      // If VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = this.$slots.default || [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA;AAAA,eAAA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAA,SAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAA,eAAA,WAAA;AACA,YAAA,SAAA,WAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}

package/dist/vue2/lib/emoji.cjs

@@ -127,7 +127,7 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", { class: ["d-emoji", "d-icon", _vm.emojiSize] }, [_c("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: _vm.imgLoading && _vm.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", _vm.emojiSize], attrs: { "offset": 0, "shape-option": { shape: "circle", size: "100%" } } }), _c("img", { directives: [{ name: "show", rawName: "v-show", value: !_vm.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", _vm.emojiSize, _vm.imgClass], attrs: { "aria-label": _vm.emojiLabel, "alt": _vm.emojiAlt, "title": _vm.emojiLabel, "src": _vm.emojiSrc }, on: { "load": _vm.imageLoaded, "error": _vm.imageErrored } })], 1);
+  return _c("span", { class: ["d-emoji d-icon", _vm.emojiSize] }, [_c("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: _vm.imgLoading && _vm.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", _vm.emojiSize], attrs: { "offset": 0, "shape-option": { shape: "circle", size: "100%" } } }), _c("img", { directives: [{ name: "show", rawName: "v-show", value: !_vm.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", _vm.emojiSize, _vm.imgClass], attrs: { "aria-label": _vm.emojiLabel, "alt": _vm.emojiAlt, "title": _vm.emojiLabel, "src": _vm.emojiSrc }, on: { "load": _vm.imageLoaded, "error": _vm.imageErrored } })], 1);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(

package/dist/vue2/lib/emoji.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.cjs","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji', 'd-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":["DtSkeleton","ICON_SIZE_MODIFIERS","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData"],"mappings":";;;;;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAA,aAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AAGA,WAAA,UAAA,cAAA,mBAAA,QAAA;AACA,eAAAC,aAAAA,sBAAA,KAAA,UAAA,MAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,GAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA,OAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,UAAA,iBAAAC,6BAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAN,eAAA,oBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAAO,aAAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji.cjs","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji d-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":["DtSkeleton","ICON_SIZE_MODIFIERS","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData"],"mappings":";;;;;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAA,aAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AAGA,WAAA,UAAA,cAAA,mBAAA,QAAA;AACA,eAAAC,aAAAA,sBAAA,KAAA,UAAA,MAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,GAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA,OAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,UAAA,iBAAAC,6BAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAN,eAAA,oBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAAO,aAAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/emoji.js

@@ -125,7 +125,7 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", { class: ["d-emoji", "d-icon", _vm.emojiSize] }, [_c("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: _vm.imgLoading && _vm.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", _vm.emojiSize], attrs: { "offset": 0, "shape-option": { shape: "circle", size: "100%" } } }), _c("img", { directives: [{ name: "show", rawName: "v-show", value: !_vm.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", _vm.emojiSize, _vm.imgClass], attrs: { "aria-label": _vm.emojiLabel, "alt": _vm.emojiAlt, "title": _vm.emojiLabel, "src": _vm.emojiSrc }, on: { "load": _vm.imageLoaded, "error": _vm.imageErrored } })], 1);
+  return _c("span", { class: ["d-emoji d-icon", _vm.emojiSize] }, [_c("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: _vm.imgLoading && _vm.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", _vm.emojiSize], attrs: { "offset": 0, "shape-option": { shape: "circle", size: "100%" } } }), _c("img", { directives: [{ name: "show", rawName: "v-show", value: !_vm.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", _vm.emojiSize, _vm.imgClass], attrs: { "aria-label": _vm.emojiLabel, "alt": _vm.emojiAlt, "title": _vm.emojiLabel, "src": _vm.emojiSrc }, on: { "load": _vm.imageLoaded, "error": _vm.imageErrored } })], 1);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(