@dialpad/dialtone 9.27.1 → 9.29.0

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

@@ -1 +1 @@
-{"version":3,"file":"datepicker.js","sources":["../../components/datepicker/datepicker_constants.js","../../components/datepicker/utils.js","../../components/datepicker/composables/useMonthYearPicker.js","../../components/datepicker/modules/month-year-picker.vue","../../components/datepicker/composables/useCalendar.js","../../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","import { computed, ref, watch } from 'vue';\nimport { addMonths, getDate, getMonth, getYear, set, subMonths } from 'date-fns';\nimport { formatMonth, getCalendarDays } from '@/components/datepicker/utils.js';\n\nexport function useMonthYearPicker (props, emits) {\n  const selectMonth = ref(getMonth(props.selectedDate));\n  const selectYear = ref(getYear(props.selectedDate));\n  const highlightedDay = ref(null);\n  const focusPicker = ref(0);\n  const focusRefs = ref([]);\n\n  const calendarDays = computed(() => {\n    return getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value);\n  });\n\n  const formattedMonth = computed(() => {\n    return (month, format, locale) => formatMonth(month, format, locale);\n  });\n\n  watch(selectMonth, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  watch(selectYear, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  function setDayRef (el) {\n    if (!focusRefs.value.includes(el)) {\n      focusRefs.value.push(el);\n    }\n  }\n\n  function focusMonthYearPicker () {\n    focusRefs.value[0].$el.focus();\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusPicker.value === 0) {\n          focusPicker.value = 3;\n          focusRefs.value[focusPicker.value].$el.focus();\n        } else {\n          focusPicker.value--;\n          focusRefs.value[focusPicker.value].$el.focus();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusPicker.value === 3) {\n          focusPicker.value = 0;\n          focusRefs.value[focusPicker.value].$el.focus();\n        } else {\n          focusPicker.value++;\n          focusRefs.value[focusPicker.value].$el.focus();\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function highlightDay () {\n    const year = getYear(props.selectedDate);\n    const month = getMonth(props.selectedDate);\n\n    if (year !== selectYear.value || month !== selectMonth.value) {\n      highlightedDay.value = null;\n    } else {\n      highlightedDay.value = getDate(props.selectedDate);\n    }\n  }\n\n  function changeMonth (value) {\n    // Adjust year when changing from January to December or vice versa\n    if ((selectMonth.value === 0 && value === -1) || (selectMonth.value === 11 && value === 1)) {\n      selectYear.value += value;\n    }\n\n    // Calculate the new date by adding or subtracting months\n    const initialDate = set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });\n    const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n    // Update the selected month\n    selectMonth.value = getMonth(newDate);\n  }\n\n  function changeYear (value) {\n    selectYear.value = selectYear.value + value;\n  }\n\n  function goToNextMonth () {\n    changeMonth(1);\n  }\n\n  function goToPrevMonth () {\n    changeMonth(-1);\n  }\n\n  return {\n    selectMonth,\n    selectYear,\n    formattedMonth,\n    setDayRef,\n    focusMonthYearPicker,\n    handleKeyDown,\n    changeMonth,\n    changeYear,\n    goToNextMonth,\n    goToPrevMonth,\n  };\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      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\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      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"\n              `${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1, INTL_MONTH_FORMAT, locale)}`\n            \"\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, INTL_MONTH_FORMAT, locale) }}\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      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"\n              `${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1, INTL_MONTH_FORMAT, locale)}`\n            \"\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      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\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} ${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 setup>\nimport { DtIcon } from '@/components/icon';\nimport { DtStack } from '@/components/stack';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport { onMounted } from 'vue';\nimport { useMonthYearPicker } from '@/components/datepicker/composables/useMonthYearPicker.js';\n\nconst props = defineProps({\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});\nconst emits = defineEmits([\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\nconst {\n  selectMonth,\n  selectYear,\n  formattedMonth,\n  setDayRef,\n  focusMonthYearPicker,\n  handleKeyDown,\n  changeMonth,\n  changeYear,\n  goToNextMonth,\n  goToPrevMonth,\n} = useMonthYearPicker(props, emits);\n\nonMounted(() => {\n  focusMonthYearPicker();\n});\n\ndefineExpose({\n  focusMonthYearPicker,\n  goToNextMonth,\n  goToPrevMonth,\n});\n</script>\n","import { computed, ref, watch, nextTick } from 'vue';\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils.js';\nimport { MONTH_FORMAT, WEEK_START } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\n\nexport function useCalendar (props, emits) {\n  const selectedDay = ref(null);\n  const focusDay = ref(0);\n  const daysRef = ref([]);\n\n  const weekDays = computed(() => {\n    return getWeekDayNames(props.locale, WEEK_START);\n  });\n\n  watch(() => props.calendarDays, () => {\n    focusDay.value = 0;\n    daysRef.value = [];\n    selectedDay.value = null;\n  });\n\n  function dayAriaLabel (day) {\n    return `${props.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n  }\n\n  function setDayRef (el, day) {\n    if (!daysRef.value.some(day => day.el === el) && day.currentMonth) {\n      daysRef.value.push({ el, day });\n    }\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n        focusDay.value -= 7;\n        try {\n          daysRef.value[focusDay.value].el.$el.focus();\n        } catch (error) {\n          const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);\n          emits('go-to-prev-month');\n\n          nextTick(() => {\n            daysRef.value[prevFocusDate - 1].el.$el.focus();\n            focusDay.value += prevFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        focusDay.value += 7;\n        try {\n          daysRef.value[focusDay.value].el.$el.focus();\n        } catch (error) {\n          const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);\n          emits('go-to-next-month');\n\n          nextTick(() => {\n            daysRef.value[nextFocusDate - 1].el.$el.focus();\n            focusDay.value += nextFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusDay.value > 0) {\n          focusDay.value -= 1;\n          daysRef.value[focusDay.value].el.$el.focus();\n        } else {\n          // if we are on month first day, jump to last day of prev month\n          emits('go-to-prev-month');\n          focusLastDay();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusDay.value < daysRef.value.length - 1) {\n          focusDay.value += 1;\n          daysRef.value[focusDay.value].el.$el.focus();\n        } else {\n          // if we are on month last day, jump to first day of next month\n          emits('go-to-next-month');\n\n          focusFirstDay();\n        }\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-month-year-picker');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function focusFirstDay () {\n    focusDay.value = 0;\n\n    nextTick(() => {\n      daysRef.value[focusDay.value].el.$el.focus();\n    });\n  }\n\n  function focusLastDay () {\n    nextTick(() => {\n      focusDay.value = daysRef.value.length - 1;\n      daysRef.value[focusDay.value].el.$el.focus();\n    });\n  }\n\n  function selectDay (day) {\n    if (!day.currentMonth) { return; }\n\n    // local selectedDay is updated when a day is selected\n    selectedDay.value = day.text;\n    emits('select-date', day.value);\n  }\n\n  return {\n    selectedDay,\n    weekDays,\n    dayAriaLabel,\n    setDayRef,\n    handleKeyDown,\n    focusFirstDay,\n    selectDay,\n  };\n}\n","<!-- eslint-disable vue/multi-word-component-names -->\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=\"el => { if (el) setDayRef(el, day) }\"\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 setup>\nimport { useCalendar } from '@/components/datepicker/composables/useCalendar.js';\nimport { DtButton } from '@/components/button';\n\nconst props = defineProps({\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\nconst emits = defineEmits([\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     * Will go to the next month\n     *\n     * @event go-to-next-month\n     */\n  'go-to-next-month',\n\n  /**\n     * Will go to the previous month\n     *\n     * @event go-to-prev-month\n     */\n  'go-to-prev-month',\n]);\n\nconst {\n  selectedDay,\n  weekDays,\n  dayAriaLabel,\n  setDayRef,\n  handleKeyDown,\n  focusFirstDay,\n  selectDay,\n} = useCalendar(props, emits);\n\ndefineExpose({\n  focusFirstDay,\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 setup>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport { DtStack } from '@/components/stack';\n\nimport { ref } from 'vue';\n\ndefineProps({\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\ndefineEmits([\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\nconst calendarDays = ref([]);\n\nfunction updateCalendarDays (days) {\n  calendarDays.value = days;\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":["WEEK_START","MONTH_FORMAT","INTL_MONTH_FORMAT","_parsedGetDate","value","getWeekDays","startDay","month","selectedDay","startDate","dates","i","next","addDays","isNext","getMonth","isDateEqual","date","dateToCompare","isEqual","getCalendarDays","year","weeks","firstDate","lastDate","firstDateInCalendar","startOfWeek","addDaysToWeek","days","day","nextDate","getWeekDayNames","locale","weekStart","beforeWeekStart","afterWeekStart","formatMonth","monthFormat","calculateNextFocusDate","currentDate","currentWeekday","getDay","nextMonthDate","addMonths","nextMonthStart","startOfMonth","nextMonthStartWeekday","dayDifference","focusDate","getDate","calculatePrevFocusDate","endOfMonth","subMonths","useMonthYearPicker","props","emits","selectMonth","ref","selectYear","getYear","highlightedDay","focusPicker","focusRefs","calendarDays","computed","formattedMonth","format","watch","highlightDay","setDayRef","el","focusMonthYearPicker","handleKeyDown","event","changeMonth","initialDate","set","newDate","changeYear","goToNextMonth","goToPrevMonth","__props","__emit","onMounted","__expose","useCalendar","focusDay","daysRef","weekDays","dayAriaLabel","prevFocusDate","nextTick","nextFocusDate","focusLastDay","focusFirstDay","selectDay","updateCalendarDays","formatLong","formatMedium","formatShort","showWeekday","options","formatNoYear","abbreviated","formatNumerical"],"mappings":"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"}
+{"version":3,"file":"datepicker.js","sources":["../../components/datepicker/datepicker_constants.js","../../components/datepicker/utils.js","../../components/datepicker/composables/useMonthYearPicker.js","../../components/datepicker/modules/month-year-picker.vue","../../components/datepicker/composables/useCalendar.js","../../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","import { computed, ref, watch } from 'vue';\nimport { addMonths, getDate, getMonth, getYear, set, subMonths } from 'date-fns';\nimport { formatMonth, getCalendarDays } from '@/components/datepicker/utils.js';\n\nexport function useMonthYearPicker (props, emits) {\n  const selectMonth = ref(getMonth(props.selectedDate));\n  const selectYear = ref(getYear(props.selectedDate));\n  const highlightedDay = ref(null);\n  const focusPicker = ref(0);\n  const focusRefs = ref([]);\n\n  const calendarDays = computed(() => {\n    return getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value);\n  });\n\n  const formattedMonth = computed(() => {\n    return (month, format, locale) => formatMonth(month, format, locale);\n  });\n\n  watch(selectMonth, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  watch(selectYear, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  function setDayRef (el) {\n    if (!focusRefs.value.includes(el)) {\n      focusRefs.value.push(el);\n    }\n  }\n\n  function focusMonthYearPicker () {\n    focusRefs.value[0].$el.focus();\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusPicker.value === 0) {\n          focusPicker.value = 3;\n          focusRefs.value[focusPicker.value].$el.focus();\n        } else {\n          focusPicker.value--;\n          focusRefs.value[focusPicker.value].$el.focus();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusPicker.value === 3) {\n          focusPicker.value = 0;\n          focusRefs.value[focusPicker.value].$el.focus();\n        } else {\n          focusPicker.value++;\n          focusRefs.value[focusPicker.value].$el.focus();\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function highlightDay () {\n    const year = getYear(props.selectedDate);\n    const month = getMonth(props.selectedDate);\n\n    if (year !== selectYear.value || month !== selectMonth.value) {\n      highlightedDay.value = null;\n    } else {\n      highlightedDay.value = getDate(props.selectedDate);\n    }\n  }\n\n  function changeMonth (value) {\n    // Adjust year when changing from January to December or vice versa\n    if ((selectMonth.value === 0 && value === -1) || (selectMonth.value === 11 && value === 1)) {\n      selectYear.value += value;\n    }\n\n    // Calculate the new date by adding or subtracting months\n    const initialDate = set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });\n    const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n    // Update the selected month\n    selectMonth.value = getMonth(newDate);\n  }\n\n  function changeYear (value) {\n    selectYear.value = selectYear.value + value;\n  }\n\n  function goToNextMonth () {\n    changeMonth(1);\n  }\n\n  function goToPrevMonth () {\n    changeMonth(-1);\n  }\n\n  return {\n    selectMonth,\n    selectYear,\n    formattedMonth,\n    setDayRef,\n    focusMonthYearPicker,\n    handleKeyDown,\n    changeMonth,\n    changeYear,\n    goToNextMonth,\n    goToPrevMonth,\n  };\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      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\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      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"\n              `${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1, INTL_MONTH_FORMAT, locale)}`\n            \"\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, INTL_MONTH_FORMAT, locale) }}\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      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"\n              `${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1, INTL_MONTH_FORMAT, locale)}`\n            \"\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      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\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} ${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 setup>\nimport { DtIcon } from '@/components/icon';\nimport { DtStack } from '@/components/stack';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport { onMounted } from 'vue';\nimport { useMonthYearPicker } from '@/components/datepicker/composables/useMonthYearPicker.js';\n\nconst props = defineProps({\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});\nconst emits = defineEmits([\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\nconst {\n  selectMonth,\n  selectYear,\n  formattedMonth,\n  setDayRef,\n  focusMonthYearPicker,\n  handleKeyDown,\n  changeMonth,\n  changeYear,\n  goToNextMonth,\n  goToPrevMonth,\n} = useMonthYearPicker(props, emits);\n\nonMounted(() => {\n  focusMonthYearPicker();\n});\n\ndefineExpose({\n  focusMonthYearPicker,\n  goToNextMonth,\n  goToPrevMonth,\n});\n</script>\n","import { computed, ref, watch, nextTick } from 'vue';\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils.js';\nimport { MONTH_FORMAT, WEEK_START } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\n\nexport function useCalendar (props, emits) {\n  const selectedDay = ref(null);\n  const focusDay = ref(0);\n  const daysRef = ref([]);\n\n  const weekDays = computed(() => {\n    return getWeekDayNames(props.locale, WEEK_START);\n  });\n\n  watch(() => props.calendarDays, () => {\n    focusDay.value = 0;\n    daysRef.value = [];\n    selectedDay.value = null;\n  });\n\n  function dayAriaLabel (day) {\n    return `${props.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n  }\n\n  function setDayRef (el, day) {\n    if (!daysRef.value.some(day => day.el === el) && day.currentMonth) {\n      daysRef.value.push({ el, day });\n    }\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n        focusDay.value -= 7;\n        try {\n          daysRef.value[focusDay.value].el.$el.focus();\n        } catch (error) {\n          const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);\n          emits('go-to-prev-month');\n\n          nextTick(() => {\n            daysRef.value[prevFocusDate - 1].el.$el.focus();\n            focusDay.value += prevFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        focusDay.value += 7;\n        try {\n          daysRef.value[focusDay.value].el.$el.focus();\n        } catch (error) {\n          const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);\n          emits('go-to-next-month');\n\n          nextTick(() => {\n            daysRef.value[nextFocusDate - 1].el.$el.focus();\n            focusDay.value += nextFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusDay.value > 0) {\n          focusDay.value -= 1;\n          daysRef.value[focusDay.value].el.$el.focus();\n        } else {\n          // if we are on month first day, jump to last day of prev month\n          emits('go-to-prev-month');\n          focusLastDay();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusDay.value < daysRef.value.length - 1) {\n          focusDay.value += 1;\n          daysRef.value[focusDay.value].el.$el.focus();\n        } else {\n          // if we are on month last day, jump to first day of next month\n          emits('go-to-next-month');\n\n          focusFirstDay();\n        }\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-month-year-picker');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function focusFirstDay () {\n    focusDay.value = 0;\n\n    nextTick(() => {\n      daysRef.value[focusDay.value].el.$el.focus();\n    });\n  }\n\n  function focusLastDay () {\n    nextTick(() => {\n      focusDay.value = daysRef.value.length - 1;\n      daysRef.value[focusDay.value].el.$el.focus();\n    });\n  }\n\n  function selectDay (day) {\n    if (!day.currentMonth) { return; }\n\n    // local selectedDay is updated when a day is selected\n    selectedDay.value = day.text;\n    emits('select-date', day.value);\n  }\n\n  return {\n    selectedDay,\n    weekDays,\n    dayAriaLabel,\n    setDayRef,\n    handleKeyDown,\n    focusFirstDay,\n    selectDay,\n  };\n}\n","<!-- eslint-disable vue/multi-word-component-names -->\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=\"el => { if (el) setDayRef(el, day) }\"\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 setup>\nimport { useCalendar } from '@/components/datepicker/composables/useCalendar.js';\nimport { DtButton } from '@/components/button';\n\nconst props = defineProps({\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\nconst emits = defineEmits([\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     * Will go to the next month\n     *\n     * @event go-to-next-month\n     */\n  'go-to-next-month',\n\n  /**\n     * Will go to the previous month\n     *\n     * @event go-to-prev-month\n     */\n  'go-to-prev-month',\n]);\n\nconst {\n  selectedDay,\n  weekDays,\n  dayAriaLabel,\n  setDayRef,\n  handleKeyDown,\n  focusFirstDay,\n  selectDay,\n} = useCalendar(props, emits);\n\ndefineExpose({\n  focusFirstDay,\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 setup>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport { DtStack } from '@/components/stack';\n\nimport { ref } from 'vue';\n\ndefineProps({\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\ndefineEmits([\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\nconst calendarDays = ref([]);\n\nfunction updateCalendarDays (days) {\n  calendarDays.value = days;\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":["WEEK_START","MONTH_FORMAT","INTL_MONTH_FORMAT","_parsedGetDate","value","getWeekDays","startDay","month","selectedDay","startDate","dates","i","next","addDays","isNext","getMonth","isDateEqual","date","dateToCompare","isEqual","getCalendarDays","year","weeks","firstDate","lastDate","firstDateInCalendar","startOfWeek","addDaysToWeek","days","day","nextDate","getWeekDayNames","locale","weekStart","beforeWeekStart","afterWeekStart","formatMonth","monthFormat","calculateNextFocusDate","currentDate","currentWeekday","getDay","nextMonthDate","addMonths","nextMonthStart","startOfMonth","nextMonthStartWeekday","dayDifference","focusDate","getDate","calculatePrevFocusDate","endOfMonth","subMonths","useMonthYearPicker","props","emits","selectMonth","ref","selectYear","getYear","highlightedDay","focusPicker","focusRefs","calendarDays","computed","formattedMonth","format","watch","highlightDay","setDayRef","el","focusMonthYearPicker","handleKeyDown","event","changeMonth","initialDate","set","newDate","changeYear","goToNextMonth","goToPrevMonth","__props","__emit","onMounted","__expose","useCalendar","focusDay","daysRef","weekDays","dayAriaLabel","prevFocusDate","nextTick","nextFocusDate","focusLastDay","focusFirstDay","selectDay","updateCalendarDays","formatLong","formatMedium","formatShort","showWeekday","options","formatNoYear","abbreviated","formatNumerical"],"mappings":"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"}

package/dist/vue3/lib/dates.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("date-fns"),u=require("./utils.cjs");require("./constants.cjs");require("vue");let n;function a(e,t){return i(),r.format(e,t,{locale:n})}function l(e,t){return i(),r.formatDuration(e,{locale:n,format:t})}function c(e,t){return i(),r.formatDistance(e,t,{locale:n})}function s(){return n!==void 0}function i(){if(!s())throw new Error("Locale not set, please call setDateLocale(locale) and pass in a datefns locale object as the locale param before calling this function")}function f(e){n=e}function M(e){return a(e,"MMMM d, y")}function m(e){if(e<60)return c(0,29*1e3);const t=r.intervalToDuration({start:0,end:e*1e3});return l(t,["hours","minutes"])}function o(e){const t=new Intl.RelativeTimeFormat(n.code,{numeric:"auto"});return u.capitalizeFirstLetter(t.formatToParts(e,"day")[0].value,n.code)}function d(e){return r.isToday(e)?o(0):r.isYesterday(e)?o(-1):r.isThisWeek(e)?a(e,"EEEE"):r.isThisYear(e)?a(e,"EEEE, MMMM d"):a(e,"MMMM d, y")}exports.durationInHHMM=m;exports.getDateMedium=M;exports.relativeDate=d;exports.setDateLocale=f;
+//# sourceMappingURL=dates.cjs.map

package/dist/vue3/lib/dates.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dates.cjs","sources":["../../common/dates/index.js"],"sourcesContent":["import {\n  format,\n  formatDuration,\n  intervalToDuration,\n  formatDistance,\n  isToday,\n  isYesterday,\n  isThisWeek,\n  isThisYear,\n} from 'date-fns';\nimport { capitalizeFirstLetter } from '../utils';\n\nlet dialtoneLocale;\n\n// Base functions just wrap core date-fns functions, but this allows us to do checks and set default options.\n\nfunction _baseFormat (date, formatString) {\n  _checkLocaleSet();\n  return format(date, formatString, {\n    locale: dialtoneLocale,\n  });\n}\n\nfunction _baseFormatDuration (duration, formatString) {\n  _checkLocaleSet();\n  return formatDuration(duration, {\n    locale: dialtoneLocale,\n    format: formatString,\n  });\n}\n\nfunction _baseFormatDistance (date, baseDate) {\n  _checkLocaleSet();\n  return formatDistance(date, baseDate, {\n    locale: dialtoneLocale,\n  });\n}\n\nfunction _isLocaleSet () {\n  return dialtoneLocale !== undefined;\n}\n\nfunction _checkLocaleSet () {\n  if (!_isLocaleSet()) {\n    throw new Error('Locale not set, please call setDateLocale(locale) and pass ' +\n    'in a datefns locale object as the locale param before calling this function');\n  }\n}\n\n/**\n * Sets the locale for date-fns. This should be called before any date-fns functions are called.\n * @param {Locale} locale A date-fns locale object\n */\nexport function setDateLocale (locale) {\n  dialtoneLocale = locale;\n}\n\n/**\n * This formats a date to the Dialtone standard medium date format as shown here:\n * https://dialtone.dialpad.com/guides/writing-guidelines/#formats-by-length\n * @param {Date} date A javascript date object\n * @returns {string} A string in the format of 'September 2, 2022'\n */\nexport function getDateMedium (date) {\n  return _baseFormat(date, 'MMMM d, y');\n}\n\n/**\n * Converts a call duration in total number of seconds to a human readable string\n * such as 'less than a minute' or '4 hours 34 minutes'.\n * @param {number} durationInSeconds The duration of the call in seconds\n * @returns {string} A human readable string representing the duration of the call\n */\nexport function durationInHHMM (durationInSeconds) {\n  if (durationInSeconds < 60) {\n    // returns 'less than a minute', we're doing it like this instead of returning a string\n    // so datefns handles i18n.\n    return _baseFormatDistance(0, 29 * 1000);\n  }\n  const duration = intervalToDuration({\n    start: 0,\n    end: durationInSeconds * 1000,\n  });\n  return _baseFormatDuration(duration, ['hours', 'minutes']);\n}\n\n/**\n * gets the human readable name of the day relative to the current time. For example, if you pass in -1 it will\n * say \"Yesterday\" if you pass in 0 it will say \"Today\", if you pass in 1 it will say \"Tomorrow\".\n * @param {number} days The number of days relative to the current time\n * @returns {string} A human readable string representing the distance between the date and now\n */\nfunction _getRelativeDaysText (days) {\n  const rtl = new Intl.RelativeTimeFormat(dialtoneLocale.code, { numeric: 'auto' });\n  return capitalizeFirstLetter(rtl.formatToParts(days, 'day')[0].value, dialtoneLocale.code);\n}\n\n/**\n * Returns the distance between the passed in date and now in a human readable format, typically used\n * when showing a history of items in a log such as a feed list.\n *\n * datefns does not support 'today' and 'yesterday' without showing time so we use Intl for these cases.\n *\n * examples below to explain\n * the different potential formats:\n *\n * If current day:\n * Today\n *\n * If previous day:\n * Yesterday\n *\n * Older than yesterday, but in the same calendar week:\n * Monday\n *\n * Older than the most recent calendar week, but in the same year:\n * Monday, October 14\n *\n * older than a calendar year:\n * October 14, 2022\n *\n *\n * @param {Date} date The timestamp of the item's date\n * @returns {string} A human readable string representing the distance between the date and now\n */\nexport function relativeDate (date) {\n  if (isToday(date)) {\n    return _getRelativeDaysText(0);\n  } else if (isYesterday(date)) {\n    return _getRelativeDaysText(-1);\n  } else if (isThisWeek(date)) {\n    return _baseFormat(date, 'EEEE');\n  } else if (isThisYear(date)) {\n    return _baseFormat(date, 'EEEE, MMMM d');\n  } else {\n    return _baseFormat(date, 'MMMM d, y');\n  }\n}\n"],"names":["dialtoneLocale","_baseFormat","date","formatString","_checkLocaleSet","format","_baseFormatDuration","duration","formatDuration","_baseFormatDistance","baseDate","formatDistance","_isLocaleSet","setDateLocale","locale","getDateMedium","durationInHHMM","durationInSeconds","intervalToDuration","_getRelativeDaysText","days","rtl","capitalizeFirstLetter","relativeDate","isToday","isYesterday","isThisWeek","isThisYear"],"mappings":"+KAYA,IAAIA,EAIJ,SAASC,EAAaC,EAAMC,EAAc,CACxC,OAAAC,IACOC,EAAM,OAACH,EAAMC,EAAc,CAChC,OAAQH,CACZ,CAAG,CACH,CAEA,SAASM,EAAqBC,EAAUJ,EAAc,CACpD,OAAAC,IACOI,EAAAA,eAAeD,EAAU,CAC9B,OAAQP,EACR,OAAQG,CACZ,CAAG,CACH,CAEA,SAASM,EAAqBP,EAAMQ,EAAU,CAC5C,OAAAN,IACOO,EAAc,eAACT,EAAMQ,EAAU,CACpC,OAAQV,CACZ,CAAG,CACH,CAEA,SAASY,GAAgB,CACvB,OAAOZ,IAAmB,MAC5B,CAEA,SAASI,GAAmB,CAC1B,GAAI,CAACQ,EAAY,EACf,MAAM,IAAI,MAAM,wIAC6D,CAEjF,CAMO,SAASC,EAAeC,EAAQ,CACrCd,EAAiBc,CACnB,CAQO,SAASC,EAAeb,EAAM,CACnC,OAAOD,EAAYC,EAAM,WAAW,CACtC,CAQO,SAASc,EAAgBC,EAAmB,CACjD,GAAIA,EAAoB,GAGtB,OAAOR,EAAoB,EAAG,GAAK,GAAI,EAEzC,MAAMF,EAAWW,EAAAA,mBAAmB,CAClC,MAAO,EACP,IAAKD,EAAoB,GAC7B,CAAG,EACD,OAAOX,EAAoBC,EAAU,CAAC,QAAS,SAAS,CAAC,CAC3D,CAQA,SAASY,EAAsBC,EAAM,CACnC,MAAMC,EAAM,IAAI,KAAK,mBAAmBrB,EAAe,KAAM,CAAE,QAAS,MAAM,CAAE,EAChF,OAAOsB,wBAAsBD,EAAI,cAAcD,EAAM,KAAK,EAAE,CAAC,EAAE,MAAOpB,EAAe,IAAI,CAC3F,CA8BO,SAASuB,EAAcrB,EAAM,CAClC,OAAIsB,EAAAA,QAAQtB,CAAI,EACPiB,EAAqB,CAAC,EACpBM,EAAAA,YAAYvB,CAAI,EAClBiB,EAAqB,EAAE,EACrBO,EAAAA,WAAWxB,CAAI,EACjBD,EAAYC,EAAM,MAAM,EACtByB,EAAAA,WAAWzB,CAAI,EACjBD,EAAYC,EAAM,cAAc,EAEhCD,EAAYC,EAAM,WAAW,CAExC"}

package/dist/vue3/lib/description-list.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../chunks/stack_constants-m9Ickqw0.js"),e=require("vue"),c=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),n=["row","column"],o=t=>t.term?typeof t.term=="string":!1,d=t=>t.description?typeof t.description=="string":!1,u=t=>Array.isArray(t)?t.every(r=>!(typeof r!="object"||!o(r)||!d(r))):!1,p={name:"DtDescriptionList",props:{direction:{type:String,default:"row",validator:t=>n.includes(t)},items:{type:Array,default:()=>[],validator:t=>u(t),required:!0},gap:{type:String,default:"400",validator:t=>l.b.includes(t)},termClass:{type:[String,Array,Object],default:""},descriptionClass:{type:[String,Array,Object],default:""}},computed:{dtClass(){return["dt-description-list__term",this.termClass]},ddClass(){return["dt-description-list__description",this.descriptionClass]},getDirectionClass(){return`dt-description-list--${this.direction}`},getGapClass(){return`dt-description-list--gap-${this.gap}`}}};function f(t,r,a,g,m,s){return e.openBlock(),e.createElementBlock("dl",{class:e.normalizeClass(["dt-description-list",s.getDirectionClass,s.getGapClass])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.items,i=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:i.term},[e.createElementVNode("dt",{class:e.normalizeClass(s.dtClass)},e.toDisplayString(i.term),3),e.createElementVNode("dd",{class:e.normalizeClass(s.ddClass)},e.toDisplayString(i.description),3)],64))),128))],2)}const _=c._(p,[["render",f]]);exports.DT_DESCRIPTION_LIST_DIRECTION=n;exports.DtDescriptionList=_;
+//# sourceMappingURL=description-list.cjs.map

package/dist/vue3/lib/description-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"description-list.cjs","sources":["../../components/description_list/description_list_constants.js","../../components/description_list/description_list_validators.js","../../components/description_list/description_list.vue"],"sourcesContent":["export const DT_DESCRIPTION_LIST_DIRECTION = ['row', 'column'];\n","const hasValidTerm = item => {\n  if (!item.term) {\n    return false;\n  }\n\n  return typeof item.term === 'string';\n};\n\nconst hasValidDescription = item => {\n  if (!item.description) {\n    return false;\n  }\n\n  return typeof item.description === 'string';\n};\n\nexport const itemsValidator = items => {\n  if (!Array.isArray(items)) {\n    return false;\n  }\n\n  return items.every(item => {\n    if (typeof item !== 'object') {\n      return false;\n    }\n\n    if (!hasValidTerm(item)) {\n      return false;\n    }\n\n    if (!hasValidDescription(item)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n","<template>\n  <dl :class=\"['dt-description-list', getDirectionClass, getGapClass]\">\n    <template\n      v-for=\"item in items\"\n      :key=\"item.term\"\n    >\n      <dt :class=\"dtClass\">\n        {{ item.term }}\n      </dt>\n      <dd :class=\"ddClass\">\n        {{ item.description }}\n      </dd>\n    </template>\n  </dl>\n</template>\n\n<script>\nimport { DT_STACK_GAP } from '../stack/stack_constants';\nimport { DT_DESCRIPTION_LIST_DIRECTION } from './description_list_constants';\nimport { itemsValidator } from './description_list_validators';\n\nexport default {\n  name: 'DtDescriptionList',\n\n  props: {\n    /**\n     * The direction for the list\n     * @values row, column\n     */\n    direction: {\n      type: String,\n      default: 'row',\n      validator: direction => DT_DESCRIPTION_LIST_DIRECTION.includes(direction),\n    },\n\n    /**\n     * A list of items that represent the term and the description\n     */\n    items: {\n      type: Array,\n      default: () => [],\n      validator: items => itemsValidator(items),\n      required: true,\n    },\n\n    /**\n     * Set the space between the elements\n     * @values 0, 100, 200, 300, 400, 500, 600\n     */\n    gap: {\n      type: String,\n      default: '400',\n      validator: (gap) => DT_STACK_GAP.includes(gap),\n    },\n\n    /**\n     * Used to customize the term element\n     */\n    termClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description element\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  computed: {\n    dtClass () {\n      return ['dt-description-list__term', this.termClass];\n    },\n\n    ddClass () {\n      return ['dt-description-list__description', this.descriptionClass];\n    },\n\n    getDirectionClass () {\n      return `dt-description-list--${this.direction}`;\n    },\n\n    getGapClass () {\n      return `dt-description-list--gap-${this.gap}`;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-description-list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  flex-direction: row;\n  line-height: var(--dt-font-line-height-300);\n  font-size: var(--dt-font-size-100);\n  --description-list-gap: var(--dt-space-400);\n  gap: var(--description-list-gap);\n  each(range(0, 600, 100), {\n    &--gap-@{value} {\n     --description-list-gap: ~\"var(--dt-space-@{value})\";\n    }\n  });\n  &--column {\n    flex-direction: column;\n  }\n  &__term {\n    color: var(--dt-color-foreground-tertiary);\n    flex: 0 1 40%;\n  }\n  &__description {\n    color: var(--dt-color-foreground-primary);\n    flex: 1 1 50%;\n    margin-left: 0;\n  }\n}\n</style>\n"],"names":["DT_DESCRIPTION_LIST_DIRECTION","hasValidTerm","item","hasValidDescription","itemsValidator","items","_sfc_main","direction","gap","DT_STACK_GAP","_createElementBlock","_normalizeClass","$options","_Fragment","_renderList","$props","_createElementVNode","_toDisplayString"],"mappings":"uNAAaA,EAAgC,CAAC,MAAO,QAAQ,ECAvDC,EAAeC,GACdA,EAAK,KAIH,OAAOA,EAAK,MAAS,SAHnB,GAMLC,EAAsBD,GACrBA,EAAK,YAIH,OAAOA,EAAK,aAAgB,SAH1B,GAMEE,EAAiBC,GACvB,MAAM,QAAQA,CAAK,EAIjBA,EAAM,MAAMH,GACb,SAAOA,GAAS,UAIhB,CAACD,EAAaC,CAAI,GAIlB,CAACC,EAAoBD,CAAI,EAK9B,EAjBQ,GCGNI,EAAU,CACb,KAAM,oBAEN,MAAO,CAKL,UAAW,CACT,KAAM,OACN,QAAS,MACT,UAAWC,GAAaP,EAA8B,SAASO,CAAS,CACzE,EAKD,MAAO,CACL,KAAM,MACN,QAAS,IAAM,CAAE,EACjB,UAAWF,GAASD,EAAeC,CAAK,EACxC,SAAU,EACX,EAMD,IAAK,CACH,KAAM,OACN,QAAS,MACT,UAAYG,GAAQC,IAAa,SAASD,CAAG,CAC9C,EAKD,UAAW,CACT,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,iBAAkB,CAChB,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,CACF,EAED,SAAU,CACR,SAAW,CACT,MAAO,CAAC,4BAA6B,KAAK,SAAS,CACpD,EAED,SAAW,CACT,MAAO,CAAC,mCAAoC,KAAK,gBAAgB,CAClE,EAED,mBAAqB,CACnB,MAAO,wBAAwB,KAAK,SAAS,EAC9C,EAED,aAAe,CACb,MAAO,4BAA4B,KAAK,GAAG,EAC5C,CACF,CACH,+CAxFEE,EAYK,mBAAA,KAAA,CAZA,MAAKC,EAAA,eAAA,CAAA,sBAA0BC,EAAiB,kBAAEA,EAAW,WAAA,CAAA,qBAChEF,EAAAA,mBAUWG,EAAA,SAAA,KAAAC,EAAAA,WATMC,EAAK,MAAbb,mDACD,IAAAA,EAAK,OAEXc,EAAAA,mBAEK,KAAA,CAFA,uBAAOJ,EAAO,OAAA,CACd,EAAAK,kBAAAf,EAAK,IAAI,EAAA,CAAA,EAEdc,EAAAA,mBAEK,KAAA,CAFA,uBAAOJ,EAAO,OAAA,CACd,EAAAK,kBAAAf,EAAK,WAAW,EAAA,CAAA"}

package/dist/vue3/lib/dropdown.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../chunks/dropdown-UO3UJalk.js"),e=require("vue"),o=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),t=require("../chunks/dropdown_constants-KHFvVI2L.js");require("../chunks/keyboard_list_navigation-N74Bpdq7.js");require("./utils.cjs");require("./constants.cjs");require("../chunks/sr_only_close_button-iD7s1Pbj.js");require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./popover.cjs");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("../chunks/modal-qEzlo0Sj.js");require("./lazy-show.cjs");require("../chunks/list_item_constants-Tsz5CO1m.js");const i={name:"DtDropdownSeparator"},u={"aria-hidden":"true",class:"dt-list-separator"};function n(a,c,q,p,d,_){return e.openBlock(),e.createElementBlock("li",u)}const s=o._(i,[["render",n]]);exports.DtDropdown=r.D;exports.DROPDOWN_PADDING_CLASSES=t.D;exports.DtDropdownSeparator=s;
+//# sourceMappingURL=dropdown.cjs.map

package/dist/vue3/lib/dropdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.cjs","sources":["../../components/dropdown/dropdown_separator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"dt-list-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  name: 'DtDropdownSeparator',\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item[role=\"menuitem\"] {\n  border-radius: var(--dt-size-300);\n}\n.dt-list-separator {\n  border-top: var(--dt-size-100) solid var(--dt-color-border-default);\n  list-style: none;\n  margin: var(--dt-space-300) var(--dt-space-300-negative);\n}\n</style>\n"],"names":["_sfc_main","_openBlock","_createElementBlock","_hoisted_1"],"mappings":"m2BAQA,MAAKA,EAAU,CACb,KAAM,qBACR,KARI,cAAY,OACZ,MAAM,6CAFR,OAAAC,EAAA,UAAA,EAAAC,EAAAA,mBAGE,KAHFC,CAGE"}

package/dist/vue3/lib/dropdown.js

@@ -1,7 +1,7 @@
-import { D as W } from "../chunks/dropdown-eWOvBvwq.js";
+import { D as R } from "../chunks/dropdown-eWOvBvwq.js";
 import { openBlock as o, createElementBlock as r } from "vue";
 import { _ as t } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { D as g } from "../chunks/dropdown_constants-EUcDxBrX.js";
+import { D as b } from "../chunks/dropdown_constants-EUcDxBrX.js";
 import "../chunks/keyboard_list_navigation-F0O8nht0.js";
 import "./utils.js";
 import "./constants.js";
@@ -10,7 +10,6 @@ import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 import "./button.js";
 import "../chunks/link_constants-vIUB92L4.js";
 import "./popover.js";
@@ -28,10 +27,10 @@ const p = {
 function m(e, a, s, n, c, _) {
   return o(), r("li", i);
 }
-const I = /* @__PURE__ */ t(p, [["render", m]]);
+const G = /* @__PURE__ */ t(p, [["render", m]]);
 export {
-  g as DROPDOWN_PADDING_CLASSES,
-  W as DtDropdown,
-  I as DtDropdownSeparator
+  b as DROPDOWN_PADDING_CLASSES,
+  R as DtDropdown,
+  G as DtDropdownSeparator
 };
 //# sourceMappingURL=dropdown.js.map

package/dist/vue3/lib/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../components/dropdown/dropdown_separator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"dt-list-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  name: 'DtDropdownSeparator',\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item[role=\"menuitem\"] {\n  border-radius: var(--dt-size-300);\n}\n.dt-list-separator {\n  border-top: var(--dt-size-100) solid var(--dt-color-border-default);\n  list-style: none;\n  margin: var(--dt-space-300) var(--dt-space-300-negative);\n}\n</style>\n"],"names":["_sfc_main","_openBlock","_createElementBlock","_hoisted_1"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQA,MAAKA,IAAU;AAAA,EACb,MAAM;AACR;EARI,eAAY;AAAA,EACZ,OAAM;;;AAFR,SAAAC,EAAA,GAAAC,EAGE,MAHFC,CAGE;;;"}
+{"version":3,"file":"dropdown.js","sources":["../../components/dropdown/dropdown_separator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"dt-list-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  name: 'DtDropdownSeparator',\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item[role=\"menuitem\"] {\n  border-radius: var(--dt-size-300);\n}\n.dt-list-separator {\n  border-top: var(--dt-size-100) solid var(--dt-color-border-default);\n  list-style: none;\n  margin: var(--dt-space-300) var(--dt-space-300-negative);\n}\n</style>\n"],"names":["_sfc_main","_openBlock","_createElementBlock","_hoisted_1"],"mappings":";;;;;;;;;;;;;;;;;;;;AAQA,MAAKA,IAAU;AAAA,EACb,MAAM;AACR;EARI,eAAY;AAAA,EACZ,OAAM;;;AAFR,SAAAC,EAAA,GAAAC,EAGE,MAHFC,CAGE;;;"}

package/dist/vue3/lib/editor.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),w=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),k=require("./rich-text-editor.cjs"),b=require("./button.cjs"),L=require("./icon.cjs"),x=require("./popover.cjs"),T=require("./stack.cjs"),C=require("./input.cjs"),q=require("./tooltip.cjs");require("@tiptap/vue-3");require("@tiptap/extension-blockquote");require("@tiptap/extension-code-block");require("@tiptap/extension-document");require("@tiptap/extension-hard-break");require("@tiptap/extension-paragraph");require("@tiptap/extension-placeholder");require("@tiptap/extension-bold");require("@tiptap/extension-bullet-list");require("@tiptap/extension-italic");require("@tiptap/extension-link");require("@tiptap/extension-list-item");require("@tiptap/extension-ordered-list");require("@tiptap/extension-strike");require("@tiptap/extension-underline");require("@tiptap/extension-text");require("@tiptap/extension-text-align");require("@tiptap/core");require("../chunks/index-IBtQ5jRJ.js");require("emoji-regex");require("@dialpad/dialtone-emojis");require("./skeleton.cjs");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("@tiptap/pm/state");require("@tiptap/suggestion");require("./list-item.cjs");require("../chunks/list_item_constants-Tsz5CO1m.js");require("./utils.cjs");require("./constants.cjs");require("./item-layout.cjs");require("@dialpad/dialtone-icons/vue3");require("tippy.js");require("@tiptap/extension-mention");require("./link.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./avatar.cjs");require("./presence.cjs");require("../chunks/stack_constants-m9Ickqw0.js");require("../chunks/popover_constants-hOEhklvr.js");require("../chunks/modal-qEzlo0Sj.js");require("../chunks/sr_only_close_button-iD7s1Pbj.js");require("./lazy-show.cjs");require("../chunks/input-0Uksk4DP.js");require("./validators.cjs");require("./validation-messages.cjs");const y=[/^https?:\/\//,/^http?:\/\//,/^ftp?:\/\//,/^ftps?:\/\//,/^ftps?:\/\//,/mailto:([^?]*)/],A="https://",I={name:"DtRecipeEditor",components:{DtRichTextEditor:k.DtRichTextEditor,DtButton:b.DtButton,DtIcon:L.DtIcon,DtPopover:x.DtPopover,DtStack:T.DtStack,DtInput:C.DtInput,DtTooltip:q.DtTooltip},mixins:[],inheritAttrs:!1,props:{value:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(t){return typeof t=="string"?k.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(t):!0}},placeholder:{type:String,default:""},maxHeight:{type:String,default:"unset"},confirmSetLinkButton:{type:Object,default:()=>({label:"Confirm",ariaLabel:"Confirm set link"})},removeLinkButton:{type:Object,default:()=>({label:"Remove",ariaLabel:"Remove link"})},cancelSetLinkButton:{type:Object,default:()=>({label:"Cancel",ariaLabel:"Cancel set link"})},setLinkPlaceholder:{type:String,default:""},showBoldButton:{type:Boolean,default:!0},showItalicsButton:{type:Boolean,default:!0},showUnderlineButton:{type:Boolean,default:!0},showStrikeButton:{type:Boolean,default:!0},showListItemsButton:{type:Boolean,default:!0},showOrderedListButton:{type:Boolean,default:!0},showAlignLeftButton:{type:Boolean,default:!0},showAlignCenterButton:{type:Boolean,default:!0},showAlignRightButton:{type:Boolean,default:!0},showAlignJustifyButton:{type:Boolean,default:!0},showQuoteButton:{type:Boolean,default:!0},showCodeBlockButton:{type:Boolean,default:!0},showQuickRepliesButton:{type:Boolean,default:!0},showAddLink:{type:Object,default:()=>({showAddLinkButton:!0,setLinkTitle:"Add a link",setLinkInputAriaLabel:"Input field to add link"})}},emits:["focus","blur","input","quick-replies-click"],data(){return{internalInputValue:this.value,hasFocus:!1,linkOptions:{class:"d-link d-c-text d-d-inline-block"},showLinkInput:!1,linkInput:""}},computed:{inputLength(){return this.internalInputValue.length},htmlOutputFormat(){return k.RICH_TEXT_EDITOR_OUTPUT_FORMATS[2]},showingTextFormatButtons(){return this.showBoldButton||this.showItalicsButton||this.showStrikeButton||this.showUnderlineButton},showingAlignmentButtons(){return this.showAlignLeftButton||this.showAlignCenterButton||this.showAlignRightButton||this.showAlignJustifyButton},showingListButtons(){return this.showListItemsButton||this.showOrderedListButton},buttonGroups(){const t=this.individualButtons.map(i=>({key:i.selector,buttonGroup:[i]}));return[{key:"new",buttonGroup:this.newButtons},{key:"format",buttonGroup:this.textFormatButtons},{key:"alignment",buttonGroup:this.alignmentButtons},{key:"list",buttonGroup:this.listButtons},...t].filter(i=>i.buttonGroup.length>0)},newButtons(){return[{showBtn:this.showQuickRepliesButton,label:"Quick reply",selector:"quickReplies",iconName:"lightning-bolt",dataQA:"dt-editor-quick-replies-btn",tooltipMessage:"Quick Reply",onClick:this.onQuickRepliesClick}].filter(t=>t.showBtn)},textFormatButtons(){return[{showBtn:this.showBoldButton,selector:"bold",iconName:"bold",dataQA:"dt-editor-bold-btn",tooltipMessage:"Bold",onClick:this.onBoldTextToggle},{showBtn:this.showItalicsButton,selector:"italic",iconName:"italic",dataQA:"dt-editor-italics-btn",tooltipMessage:"Italics",onClick:this.onItalicTextToggle},{showBtn:this.showUnderlineButton,selector:"underline",iconName:"underline",dataQA:"dt-editor-underline-btn",tooltipMessage:"Underline",onClick:this.onUnderlineTextToggle},{showBtn:this.showStrikeButton,selector:"strike",iconName:"strikethrough",dataQA:"dt-editor-strike-btn",tooltipMessage:"Strike",onClick:this.onStrikethroughTextToggle}].filter(t=>t.showBtn)},alignmentButtons(){return[{showBtn:this.showAlignLeftButton,selector:{textAlign:"left"},iconName:"align-left",dataQA:"dt-editor-align-left-btn",tooltipMessage:"Align Left",onClick:()=>this.onTextAlign("left")},{showBtn:this.showAlignCenterButton,selector:{textAlign:"center"},iconName:"align-center",dataQA:"dt-editor-align-center-btn",tooltipMessage:"Align Center",onClick:()=>this.onTextAlign("center")},{showBtn:this.showAlignRightButton,selector:{textAlign:"right"},iconName:"align-right",dataQA:"dt-editor-align-right-btn",tooltipMessage:"Align Right",onClick:()=>this.onTextAlign("right")},{showBtn:this.showAlignJustifyButton,selector:{textAlign:"justify"},iconName:"align-justify",dataQA:"dt-editor-align-justify-btn",tooltipMessage:"Align Justify",onClick:()=>this.onTextAlign("justify")}].filter(t=>t.showBtn)},listButtons(){return[{showBtn:this.showListItemsButton,selector:"bulletList",iconName:"list-bullet",dataQA:"dt-editor-list-items-btn",tooltipMessage:"Bullet List",onClick:this.onBulletListToggle},{showBtn:this.showOrderedListButton,selector:"orderedList",iconName:"list-ordered",dataQA:"dt-editor-ordered-list-items-btn",tooltipMessage:"Ordered List",onClick:this.onOrderedListToggle}].filter(t=>t.showBtn)},individualButtons(){return[{showBtn:this.showQuoteButton,selector:"blockquote",iconName:"quote",dataQA:"dt-editor-blockquote-btn",tooltipMessage:"Quote",onClick:this.onBlockquoteToggle},{showBtn:this.showCodeBlockButton,selector:"codeBlock",iconName:"code-block",dataQA:"dt-editor-code-block-btn",tooltipMessage:"Code",onClick:this.onCodeBlockToggle}].filter(t=>t.showBtn)},linkButton(){return{showBtn:this.showAddLink.showAddLinkButton,selector:"link",iconName:"link-2",dataQA:"dt-editor-add-link-btn",tooltipMessage:"Link",onClick:this.openLinkInput}}},watch:{value(t){this.internalInputValue=t}},methods:{onInputFocus(t){t==null||t.stopPropagation()},removeLink(){var t,i,o,s,l;(l=(s=(o=(i=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null?void 0:i.chain())==null?void 0:o.focus())==null?void 0:s.unsetLink())==null||l.run(),this.closeLinkInput()},setLink(t){var l,n,c;const i=(l=this.$refs.richTextEditor)==null?void 0:l.editor;if(t==null||t.preventDefault(),t==null||t.stopPropagation(),!this.linkInput){this.removeLink();return}y.find(u=>u.test(this.linkInput))||(this.linkInput=`${A}${this.linkInput}`);const s=(c=(n=i==null?void 0:i.view)==null?void 0:n.state)==null?void 0:c.selection;s.anchor===s.head?i.chain().focus().insertContentAt(s.anchor,`<a class="${this.linkOptions.class}" href=${this.linkInput}>${this.linkInput}</a>`).run():i.chain().focus().extendMarkRange("link").setLink({href:this.linkInput,class:this.linkOptions.class}).run(),this.closeLinkInput()},openLinkInput(){this.showLinkInput=!0},updateInput(t){var i,o,s;if(!t)return this.closeLinkInput();this.linkInput=(s=(o=(i=this.$refs.richTextEditor)==null?void 0:i.editor)==null?void 0:o.getAttributes("link"))==null?void 0:s.href},closeLinkInput(){var t;this.showLinkInput=!1,this.linkInput="",(t=this.$refs.richTextEditor.editor)==null||t.chain().focus()},onBoldTextToggle(){var t,i;(i=(t=this.$refs.richTextEditor)==null?void 0:t.editor)==null||i.chain().focus().toggleBold().run()},onItalicTextToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleItalic().run()},onUnderlineTextToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleUnderline().run()},onStrikethroughTextToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleStrike().run()},onTextAlign(t){var i,o,s,l;if((o=(i=this.$refs.richTextEditor)==null?void 0:i.editor)!=null&&o.isActive({textAlign:t}))return(s=this.$refs.richTextEditor)==null?void 0:s.editor.chain().focus().unsetTextAlign().run();(l=this.$refs.richTextEditor)==null||l.editor.chain().focus().setTextAlign(t).run()},onBulletListToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleBulletList().run()},onOrderedListToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleOrderedList().run()},onCodeBlockToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleCodeBlock().run()},onQuickRepliesClick(){this.$emit("quick-replies-click")},onBlockquoteToggle(){var t;(t=this.$refs.richTextEditor)==null||t.editor.chain().focus().toggleBlockquote().run()},onFocus(t){this.hasFocus=!0,this.$emit("focus",t)},onBlur(t){this.hasFocus=!1,this.$emit("blur",t)},onInput(t){this.$emit("input",t)}}},_=e.createElementVNode("div",{class:"dt-editor--button-group-divider"},null,-1),E={key:0},N={class:"d-ml8 d-mr12"};function v(t,i,o,s,l,n){const c=e.resolveComponent("dt-icon"),u=e.resolveComponent("dt-button"),p=e.resolveComponent("dt-tooltip"),d=e.resolveComponent("dt-stack"),B=e.resolveComponent("dt-input"),f=e.resolveComponent("dt-popover"),m=e.resolveComponent("dt-rich-text-editor");return e.openBlock(),e.createElementBlock("div",{"data-qa":"dt-editor",role:"presentation",class:"d-d-flex d-fd-column",onClick:i[4]||(i[4]=a=>t.$refs.richTextEditor.focusEditor())},[e.createVNode(d,{direction:"row",gap:"450",class:"d-p8 dt-editor--top-bar-background"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.buttonGroups,a=>(e.openBlock(),e.createBlock(d,{key:a.key,direction:"row",gap:"300"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.buttonGroup,r=>(e.openBlock(),e.createBlock(p,{key:`${a.key}-${JSON.stringify(r.selector)}`,message:r.tooltipMessage,placement:"top"},{anchor:e.withCtx(()=>{var h,g;return[e.createVNode(u,{"data-qa":r.dataQA,importance:"clear",kind:"muted",active:(g=(h=t.$refs.richTextEditor)==null?void 0:h.editor)==null?void 0:g.isActive(r.selector),size:"xs","aria-label":r.tooltipMessage,class:e.normalizeClass({"d-btn--icon-only":!r.label}),onClick:O=>r.onClick()},{icon:e.withCtx(()=>[e.createVNode(c,{name:r.iconName,size:"200"},null,8,["name"])]),default:e.withCtx(()=>[e.createTextVNode(" "+e.toDisplayString(r==null?void 0:r.label),1)]),_:2},1032,["data-qa","active","aria-label","class","onClick"])]}),_:2},1032,["message"]))),128)),_]),_:2},1024))),128)),n.linkButton.showBtn?(e.openBlock(),e.createBlock(d,{key:0,direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createVNode(f,{open:l.showLinkInput,placement:"bottom-start","visually-hidden-close":!0,"visually-hidden-close-label":"Close link input popover","data-qa":"dt-editor-link-input-popover","show-close-button":!1,onClick:[n.onInputFocus,e.withModifiers(n.onInputFocus,["stop"])],onOpened:n.updateInput},{anchor:e.withCtx(()=>[(e.openBlock(),e.createBlock(p,{key:n.linkButton.key,message:n.linkButton.tooltipMessage,placement:"top"},{anchor:e.withCtx(()=>{var a,r;return[e.createVNode(u,{"data-qa":n.linkButton.dataQA,importance:"clear",kind:"muted",class:"d-ol-none",active:(r=(a=t.$refs.richTextEditor)==null?void 0:a.editor)==null?void 0:r.isActive(n.linkButton.selector),size:"xs","aria-label":n.linkButton.tooltipMessage,onClick:i[0]||(i[0]=h=>n.linkButton.onClick())},{icon:e.withCtx(()=>[e.createVNode(c,{name:n.linkButton.iconName,size:"200",class:"d-fw-bold"},null,8,["name"])]),_:1},8,["data-qa","active","aria-label"])]}),_:1},8,["message"]))]),content:e.withCtx(()=>[o.showAddLink.setLinkTitle.length>0?(e.openBlock(),e.createElementBlock("span",E,e.toDisplayString(o.showAddLink.setLinkTitle),1)):e.createCommentVNode("",!0),e.createVNode(B,{modelValue:l.linkInput,"onUpdate:modelValue":i[1]||(i[1]=a=>l.linkInput=a),"input-aria-label":o.showAddLink.setLinkInputAriaLabel,"data-qa":"dt-editor-link-input",placeholder:o.setLinkPlaceholder,"input-wrapper-class":"d-bgc-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 d-py2 d-ol-none",onClick:[n.onInputFocus,e.withModifiers(n.onInputFocus,["stop"])],onFocus:n.onInputFocus,onKeydown:e.withKeys(n.setLink,["enter"])},null,8,["modelValue","input-aria-label","placeholder","onClick","onFocus","onKeydown"])]),footerContent:e.withCtx(()=>[e.createElementVNode("div",N,[e.createVNode(u,{class:"d-mx2","aria-label":o.removeLinkButton.ariaLabel,importance:"clear",kind:"muted",size:"sm","data-qa":"dt-editor-remove-link-btn",onClick:n.removeLink},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.removeLinkButton.label),1)]),_:1},8,["aria-label","onClick"]),e.createVNode(u,{class:"d-mx2","aria-label":o.cancelSetLinkButton.ariaLabel,importance:"clear",kind:"muted",size:"sm","data-qa":"dt-editor-set-link-cancel-btn",onClick:n.closeLinkInput},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.cancelSetLinkButton.label),1)]),_:1},8,["aria-label","onClick"]),e.createVNode(u,{class:"d-mx2",size:"sm","aria-label":o.confirmSetLinkButton.ariaLabel,"data-qa":"dt-editor-set-link-confirm-btn",onClick:n.setLink},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.confirmSetLinkButton.label),1)]),_:1},8,["aria-label","onClick"])])]),_:1},8,["open","onClick","onOpened"])]),_:1})):e.createCommentVNode("",!0)]),_:1}),e.createElementVNode("div",{class:"d-of-auto d-mx16 d-mt8 d-mb16 d-c-text",style:e.normalizeStyle({"max-height":o.maxHeight})},[e.createVNode(m,e.mergeProps({ref:"richTextEditor",modelValue:l.internalInputValue,"onUpdate:modelValue":i[2]||(i[2]=a=>l.internalInputValue=a),"data-qa":"dt-rich-text-editor",editable:o.editable,"input-aria-label":o.inputAriaLabel,"input-class":`d-ml16 d-ol-none d-my6 ${o.inputClass}`,"output-format":n.htmlOutputFormat,"auto-focus":o.autoFocus,placeholder:o.placeholder,"allow-line-breaks":!0,link:!1},t.$attrs,{onFocus:n.onFocus,onBlur:n.onBlur,onInput:i[3]||(i[3]=a=>n.onInput(a))}),null,16,["modelValue","editable","input-aria-label","input-class","output-format","auto-focus","placeholder","onFocus","onBlur"])],4)])}const S=w._(I,[["render",v]]);exports.DtRecipeWysiwygEditor=S;
+//# sourceMappingURL=editor.cjs.map

package/dist/vue3/lib/editor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.cjs","sources":["../../recipes/conversation_view/editor/editor_constants.js","../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["export const EDITOR_SUPPORTED_LINK_PROTOCOLS = [\n  /^https?:\\/\\//,\n  /^http?:\\/\\//,\n  /^ftp?:\\/\\//,\n  /^ftps?:\\/\\//,\n  /^ftps?:\\/\\//,\n  /mailto:([^?]*)/,\n];\n\nexport const EDITOR_DEFAULT_LINK_PREFIX = 'https://';\n\nexport default {\n  EDITOR_SUPPORTED_LINK_PROTOCOLS,\n  EDITOR_DEFAULT_LINK_PREFIX,\n};\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    data-qa=\"dt-editor\"\n    role=\"presentation\"\n    class=\"d-d-flex d-fd-column\"\n    @click=\"$refs.richTextEditor.focusEditor()\"\n  >\n    <!-- Section for the top UI -->\n    <dt-stack\n      direction=\"row\"\n      gap=\"450\"\n      class=\"d-p8 dt-editor--top-bar-background\"\n    >\n      <dt-stack\n        v-for=\"buttonGroup in buttonGroups\"\n        :key=\"buttonGroup.key\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-tooltip\n          v-for=\"button in buttonGroup.buttonGroup\"\n          :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n          :message=\"button.tooltipMessage\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              :data-qa=\"button.dataQA\"\n              importance=\"clear\"\n              kind=\"muted\"\n              :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n              size=\"xs\"\n              :aria-label=\"button.tooltipMessage\"\n              :class=\"{ 'd-btn--icon-only': !button.label }\"\n              @click=\"button.onClick()\"\n            >\n              <template #icon>\n                <dt-icon\n                  :name=\"button.iconName\"\n                  size=\"200\"\n                />\n              </template>\n              {{ button?.label }}\n            </dt-button>\n          </template>\n        </dt-tooltip>\n        <div class=\"dt-editor--button-group-divider\" />\n      </dt-stack>\n      <dt-stack\n        v-if=\"linkButton.showBtn\"\n        direction=\"row\"\n        gap=\"300\"\n      >\n        <dt-popover\n          :open=\"showLinkInput\"\n          placement=\"bottom-start\"\n          :visually-hidden-close=\"true\"\n          :visually-hidden-close-label=\"'Close link input popover'\"\n          data-qa=\"dt-editor-link-input-popover\"\n          :show-close-button=\"false\"\n          @click=\"onInputFocus\"\n          @click.stop=\"onInputFocus\"\n          @opened=\"updateInput\"\n        >\n          <template #anchor>\n            <dt-tooltip\n              :key=\"linkButton.key\"\n              :message=\"linkButton.tooltipMessage\"\n              placement=\"top\"\n            >\n              <template #anchor>\n                <dt-button\n                  :data-qa=\"linkButton.dataQA\"\n                  importance=\"clear\"\n                  kind=\"muted\"\n                  class=\"d-ol-none\"\n                  :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n                  size=\"xs\"\n                  :aria-label=\"linkButton.tooltipMessage\"\n                  @click=\"linkButton.onClick()\"\n                >\n                  <template #icon>\n                    <dt-icon\n                      :name=\"linkButton.iconName\"\n                      size=\"200\"\n                      class=\"d-fw-bold\"\n                    />\n                  </template>\n                </dt-button>\n              </template>\n            </dt-tooltip>\n          </template>\n\n          <template #content>\n            <span\n              v-if=\"showAddLink.setLinkTitle.length > 0\"\n            >\n              {{ showAddLink.setLinkTitle }}\n            </span>\n            <dt-input\n              v-model=\"linkInput\"\n              :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n              data-qa=\"dt-editor-link-input\"\n              :placeholder=\"setLinkPlaceholder\"\n              input-wrapper-class=\"d-bgc-black-100 d-mt6 d-bar5 d-ba d-baw1 d-bc-black-300 d-py2 d-ol-none\"\n              @click=\"onInputFocus\"\n              @click.stop=\"onInputFocus\"\n              @focus=\"onInputFocus\"\n              @keydown.enter=\"setLink\"\n            />\n          </template>\n          <template #footerContent>\n            <div class=\"d-ml8 d-mr12\">\n              <dt-button\n                class=\"d-mx2\"\n                :aria-label=\"removeLinkButton.ariaLabel\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                data-qa=\"dt-editor-remove-link-btn\"\n                @click=\"removeLink\"\n              >\n                {{ removeLinkButton.label }}\n              </dt-button>\n              <dt-button\n                class=\"d-mx2\"\n                :aria-label=\"cancelSetLinkButton.ariaLabel\"\n                importance=\"clear\"\n                kind=\"muted\"\n                size=\"sm\"\n                data-qa=\"dt-editor-set-link-cancel-btn\"\n                @click=\"closeLinkInput\"\n              >\n                {{ cancelSetLinkButton.label }}\n              </dt-button>\n              <dt-button\n                class=\"d-mx2\"\n                size=\"sm\"\n                :aria-label=\"confirmSetLinkButton.ariaLabel\"\n                data-qa=\"dt-editor-set-link-confirm-btn\"\n                @click=\"setLink\"\n              >\n                {{ confirmSetLinkButton.label }}\n              </dt-button>\n            </div>\n          </template>\n        </dt-popover>\n      </dt-stack>\n    </dt-stack>\n\n    <!-- Some wrapper to restrict the height and show the scrollbar -->\n    <div\n      class=\"d-of-auto d-mx16 d-mt8 d-mb16 d-c-text\"\n      :style=\"{ 'max-height': maxHeight }\"\n    >\n      <dt-rich-text-editor\n        ref=\"richTextEditor\"\n        v-model=\"internalInputValue\"\n        data-qa=\"dt-rich-text-editor\"\n        :editable=\"editable\"\n        :input-aria-label=\"inputAriaLabel\"\n        :input-class=\"`d-ml16 d-ol-none d-my6 ${inputClass}`\"\n        :output-format=\"htmlOutputFormat\"\n        :auto-focus=\"autoFocus\"\n        :placeholder=\"placeholder\"\n        :allow-line-breaks=\"true\"\n        :link=\"false\"\n        v-bind=\"$attrs\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @input=\"onInput($event)\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  DtRichTextEditor,\n  RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n  RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n  EDITOR_SUPPORTED_LINK_PROTOCOLS,\n  EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\n\nexport default {\n  name: 'DtRecipeEditor',\n\n  components: {\n    DtRichTextEditor,\n    DtButton,\n    DtIcon,\n    DtPopover,\n    DtStack,\n    DtInput,\n    DtTooltip,\n  },\n\n  mixins: [],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Value of the input. The object format should match TipTap's JSON\n     * document structure: https://tiptap.dev/guide/output#option-1-json\n     */\n    value: {\n      type: [Object, String],\n      default: '',\n    },\n\n    /**\n     * Whether the input is editable\n     */\n    editable: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Descriptive label for the input element\n     */\n    inputAriaLabel: {\n      type: String,\n      required: true,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element. Only accepts a String value\n     * because this is passed to the editor via options. For multiple classes,\n     * join them into one string, e.g. \"d-p8 d-hmx96\"\n     */\n    inputClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the input should receive focus after the component has been\n     * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n     * - `start`  Sets the focus to the beginning of the input\n     * - `end`    Sets the focus to the end of the input\n     * - `all`    Selects the whole contents of the input\n     * - `Number` Sets the focus to a specific position in the input\n     * - `true`   Defaults to `start`\n     * - `false`  Disables autofocus\n     * @values true, false, start, end, all, number\n     */\n    autoFocus: {\n      type: [Boolean, String, Number],\n      default: false,\n      validator (autoFocus) {\n        if (typeof autoFocus === 'string') {\n          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n        }\n        return true;\n      },\n    },\n\n    /**\n     * Placeholder text\n     */\n    placeholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Content area needs to dynamically adjust height based on the conversation area height.\n     * can be vh|px|rem|em|%\n     */\n    maxHeight: {\n      type: String,\n      default: 'unset',\n    },\n\n    /**\n     * Confirm set link button defaults.\n     */\n    confirmSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n    },\n\n    /**\n     * Remove link button defaults.\n     */\n    removeLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n    },\n\n    /**\n     * Cancel set link button defaults.\n     */\n    cancelSetLinkButton: {\n      type: Object,\n      default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n    },\n\n    /**\n     * Placeholder text for the set link input field\n     */\n    setLinkPlaceholder: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Show button to render text as bold\n     */\n    showBoldButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render text in italics\n     */\n    showItalicsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to underline text\n     */\n    showUnderlineButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to strike text\n     */\n    showStrikeButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render list items\n     */\n    showListItemsButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to render ordered list items\n     */\n    showOrderedListButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the left\n     */\n    showAlignLeftButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the center\n     */\n    showAlignCenterButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to align text to the right\n     */\n    showAlignRightButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to justify text\n     */\n    showAlignJustifyButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add quote format to text\n     */\n    showQuoteButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to add code block\n     */\n    showCodeBlockButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show button to handle quick replies\n     */\n    showQuickRepliesButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Show add link default config.\n     */\n    showAddLink: {\n      type: Object,\n      default: () => ({\n        showAddLinkButton: true,\n        setLinkTitle: 'Add a link',\n        setLinkInputAriaLabel: 'Input field to add link',\n      }),\n    },\n  },\n\n  emits: [\n    /**\n     * Native focus event\n     * @event input\n     * @type {String|JSON}\n     */\n    'focus',\n\n    /**\n     * Native blur event\n     * @event input\n     * @type {String|JSON}\n     */\n    'blur',\n\n    /**\n     * Native input event\n     * @event input\n     * @type {String|JSON}\n     */\n    'input',\n\n    /**\n     * Quick replies button\n     * pressed event\n     * @event quick-replies-click\n    */\n    'quick-replies-click',\n  ],\n\n  data () {\n    return {\n      internalInputValue: this.value, // internal input content\n      hasFocus: false,\n\n      linkOptions: {\n        class: 'd-link d-c-text d-d-inline-block',\n      },\n\n      showLinkInput: false,\n      linkInput: '',\n    };\n  },\n\n  computed: {\n    inputLength () {\n      return this.internalInputValue.length;\n    },\n\n    htmlOutputFormat () {\n      return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n    },\n\n    showingTextFormatButtons () {\n      return this.showBoldButton || this.showItalicsButton || this.showStrikeButton || this.showUnderlineButton;\n    },\n\n    showingAlignmentButtons () {\n      return this.showAlignLeftButton || this.showAlignCenterButton ||\n          this.showAlignRightButton || this.showAlignJustifyButton;\n    },\n\n    showingListButtons () {\n      return this.showListItemsButton || this.showOrderedListButton;\n    },\n\n    buttonGroups () {\n      const individualButtonStacks = this.individualButtons.map(buttonData => ({\n        key: buttonData.selector,\n        buttonGroup: [buttonData],\n      }));\n      return [\n        { key: 'new', buttonGroup: this.newButtons },\n        { key: 'format', buttonGroup: this.textFormatButtons },\n        { key: 'alignment', buttonGroup: this.alignmentButtons },\n        { key: 'list', buttonGroup: this.listButtons },\n        ...individualButtonStacks,\n      ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n    },\n\n    newButtons () {\n      return [\n        { showBtn: this.showQuickRepliesButton, label: 'Quick reply', selector: 'quickReplies', iconName: 'lightning-bolt', dataQA: 'dt-editor-quick-replies-btn', tooltipMessage: 'Quick Reply', onClick: this.onQuickRepliesClick },\n      ].filter(button => button.showBtn);\n    },\n\n    textFormatButtons () {\n      return [\n        { showBtn: this.showBoldButton, selector: 'bold', iconName: 'bold', dataQA: 'dt-editor-bold-btn', tooltipMessage: 'Bold', onClick: this.onBoldTextToggle },\n        { showBtn: this.showItalicsButton, selector: 'italic', iconName: 'italic', dataQA: 'dt-editor-italics-btn', tooltipMessage: 'Italics', onClick: this.onItalicTextToggle },\n        { showBtn: this.showUnderlineButton, selector: 'underline', iconName: 'underline', dataQA: 'dt-editor-underline-btn', tooltipMessage: 'Underline', onClick: this.onUnderlineTextToggle },\n        { showBtn: this.showStrikeButton, selector: 'strike', iconName: 'strikethrough', dataQA: 'dt-editor-strike-btn', tooltipMessage: 'Strike', onClick: this.onStrikethroughTextToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    alignmentButtons () {\n      return [\n        { showBtn: this.showAlignLeftButton, selector: { textAlign: 'left' }, iconName: 'align-left', dataQA: 'dt-editor-align-left-btn', tooltipMessage: 'Align Left', onClick: () => this.onTextAlign('left') },\n        { showBtn: this.showAlignCenterButton, selector: { textAlign: 'center' }, iconName: 'align-center', dataQA: 'dt-editor-align-center-btn', tooltipMessage: 'Align Center', onClick: () => this.onTextAlign('center') },\n        { showBtn: this.showAlignRightButton, selector: { textAlign: 'right' }, iconName: 'align-right', dataQA: 'dt-editor-align-right-btn', tooltipMessage: 'Align Right', onClick: () => this.onTextAlign('right') },\n        { showBtn: this.showAlignJustifyButton, selector: { textAlign: 'justify' }, iconName: 'align-justify', dataQA: 'dt-editor-align-justify-btn', tooltipMessage: 'Align Justify', onClick: () => this.onTextAlign('justify') },\n      ].filter(button => button.showBtn);\n    },\n\n    listButtons () {\n      return [\n        { showBtn: this.showListItemsButton, selector: 'bulletList', iconName: 'list-bullet', dataQA: 'dt-editor-list-items-btn', tooltipMessage: 'Bullet List', onClick: this.onBulletListToggle },\n        { showBtn: this.showOrderedListButton, selector: 'orderedList', iconName: 'list-ordered', dataQA: 'dt-editor-ordered-list-items-btn', tooltipMessage: 'Ordered List', onClick: this.onOrderedListToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    individualButtons () {\n      return [\n        { showBtn: this.showQuoteButton, selector: 'blockquote', iconName: 'quote', dataQA: 'dt-editor-blockquote-btn', tooltipMessage: 'Quote', onClick: this.onBlockquoteToggle },\n        { showBtn: this.showCodeBlockButton, selector: 'codeBlock', iconName: 'code-block', dataQA: 'dt-editor-code-block-btn', tooltipMessage: 'Code', onClick: this.onCodeBlockToggle },\n      ].filter(button => button.showBtn);\n    },\n\n    linkButton () {\n      return { showBtn: this.showAddLink.showAddLinkButton, selector: 'link', iconName: 'link-2', dataQA: 'dt-editor-add-link-btn', tooltipMessage: 'Link', onClick: this.openLinkInput };\n    },\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalInputValue = newValue;\n    },\n  },\n\n  methods: {\n    onInputFocus (event) {\n      event?.stopPropagation();\n    },\n\n    removeLink () {\n      this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n      this.closeLinkInput();\n    },\n\n    setLink (event) {\n      const editor = this.$refs.richTextEditor?.editor;\n      event?.preventDefault();\n      event?.stopPropagation();\n\n      if (!this.linkInput) {\n        // If link text is set to empty string,\n        // remove any existing links.\n        this.removeLink();\n        return;\n      }\n\n      // Check if input matches any of the supported link formats\n      const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n      if (!prefix) {\n        // If no matching pattern is found, prepend default prefix\n        this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n      }\n\n      const selection = editor?.view?.state?.selection;\n\n      if (selection.anchor === selection.head) {\n        // If no text has been selected, manually insert the link text.\n        // Do not rely on link options set through DtRichTextEditor\n        // component, because they clash with these and cause issues.\n        editor\n          .chain()\n          .focus()\n          .insertContentAt(\n            selection.anchor,\n            `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n          )\n          .run();\n      } else {\n        // Set or edit the link\n        editor\n          .chain()\n          .focus()\n          .extendMarkRange('link')\n          .setLink({ href: this.linkInput, class: this.linkOptions.class })\n          .run();\n      }\n\n      this.closeLinkInput();\n    },\n\n    openLinkInput () {\n      this.showLinkInput = true;\n    },\n\n    updateInput (openedInput) {\n      if (!openedInput) {\n        return this.closeLinkInput();\n      }\n      this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n    },\n\n    closeLinkInput () {\n      this.showLinkInput = false;\n      this.linkInput = '';\n      this.$refs.richTextEditor.editor?.chain().focus();\n    },\n\n    onBoldTextToggle () {\n      this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n    },\n\n    onItalicTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n    },\n\n    onUnderlineTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n    },\n\n    onStrikethroughTextToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n    },\n\n    onTextAlign (alignment) {\n      if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n        // If this alignment type is already set here, unset it\n        return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n      }\n      this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n    },\n\n    onBulletListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n    },\n\n    onOrderedListToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n    },\n\n    onCodeBlockToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n    },\n\n    onQuickRepliesClick () {\n      this.$emit('quick-replies-click');\n    },\n\n    onBlockquoteToggle () {\n      this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n    },\n\n    onFocus (event) {\n      this.hasFocus = true;\n      this.$emit('focus', event);\n    },\n\n    onBlur (event) {\n      this.hasFocus = false;\n      this.$emit('blur', event);\n    },\n\n    onInput (event) {\n      this.$emit('input', event);\n    },\n\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-editor--top-bar-background {\n  background-color: var(--dt-color-surface-secondary);\n}\n\n.dt-editor--button-group-divider {\n  margin-left: var(--dt-space-400);\n  height: calc(var(--dt-size-550) + var(--dt-size-300));\n  width: var(--dt-size-100);\n  background: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["EDITOR_SUPPORTED_LINK_PROTOCOLS","EDITOR_DEFAULT_LINK_PREFIX","_sfc_main","DtRichTextEditor","DtButton","DtIcon","DtPopover","DtStack","DtInput","DtTooltip","autoFocus","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","individualButtonStacks","buttonData","buttonGroupData","button","newValue","event","_e","_d","_c","_b","_a","editor","prefixRegex","selection","openedInput","alignment","_createElementVNode","_hoisted_3","_createElementBlock","_cache","$event","_ctx","_createVNode","_component_dt_stack","_Fragment","_renderList","$options","buttonGroup","_createBlock","_openBlock","_component_dt_tooltip","_component_dt_button","_normalizeClass","_component_dt_icon","_toDisplayString","_hoisted_1","_component_dt_popover","$data","$props","_hoisted_2","_component_dt_input","_createTextVNode","_component_dt_rich_text_editor","_mergeProps"],"mappings":"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"}

package/dist/vue3/lib/editor.js

@@ -25,7 +25,7 @@ import "@tiptap/extension-underline";
 import "@tiptap/extension-text";
 import "@tiptap/extension-text-align";
 import "@tiptap/core";
-import "../chunks/index-BK8b99k1.js";
+import "../chunks/index-mRmwpCBG.js";
 import "emoji-regex";
 import "@dialpad/dialtone-emojis";
 import "./skeleton.js";

package/dist/vue3/lib/emoji-picker.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),te=require("./input.cjs"),P=require("./icon.cjs"),W=require("../chunks/tab-at7WWglk.js"),T=require("@dialpad/dialtone-emojis"),oe=require("./tooltip.cjs");require("./constants.cjs");require("./utils.cjs");require("../chunks/input-0Uksk4DP.js");require("./validators.cjs");require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./validation-messages.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("./lazy-show.cjs");const le={class:"d-emoji-picker__search d-emoji-picker__alignment"},ne=["onKeydown"],se={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue","focus-emoji-selector","focus-tabset","select-first-emoji"],setup(l,{expose:g,emit:R}){const i=R,u=e.ref(null);function E(){i("update:modelValue",""),h()}function h(){u.value.focus()}return e.onMounted(()=>{h()}),g({focusSearchInput:h}),(y,f)=>(e.openBlock(),e.createElementBlock("div",le,[e.createVNode(e.unref(te.DtInput),{id:"searchInput",ref_key:"searchInput",ref:u,placeholder:l.searchPlaceholderLabel,"model-value":l.modelValue,"onUpdate:modelValue":f[0]||(f[0]=s=>y.$emit("update:modelValue",s)),onKeydown:[f[1]||(f[1]=e.withKeys(s=>y.$emit("focus-tabset"),["up"])),f[2]||(f[2]=e.withKeys(e.withModifiers(s=>y.$emit("focus-emoji-selector"),["prevent"]),["down"])),f[3]||(f[3]=e.withKeys(s=>y.$emit("select-first-emoji"),["enter"]))]},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(e.unref(P.DtIcon),{name:"search",size:"200"})]),_:2},[l.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createElementVNode("button",{class:"d-emoji-picker__search-button",onClick:E,onKeydown:e.withKeys(E,["enter"])},[e.createVNode(e.unref(P.DtIcon),{name:"close"})],40,ne)]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},re={class:"d-emoji-picker__tabset"},ie={__name:"emoji_tabset",props:{showRecentlyUsedTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},isScrolling:{type:Boolean,default:!1},emojiFilter:{type:String,default:""},tabsetLabels:{type:Array,required:!0}},emits:["selected-tabset","focus-search-input","focus-skin-selector"],setup(l,{expose:g,emit:R}){const i=l,u=R,E=[{label:A.MOST_RECENTLY_USED,icon:"clock"},{label:A.SMILEYS_AND_PEOPLE,icon:"satisfied"},{label:A.NATURE,icon:"living-thing"},{label:A.FOOD,icon:"food"},{label:A.ACTIVITY,icon:"object"},{label:A.TRAVEL,icon:"transportation"},{label:A.OBJECTS,icon:"lightbulb"},{label:A.SYMBOLS,icon:"heart"},{label:A.FLAGS,icon:"flag"}],h=e.computed(()=>(i.showRecentlyUsedTab?E:E.slice(1)).map((o,a)=>({...o,label:i.tabsetLabels[a],id:(a+1).toString(),panelId:(a+1).toString()}))),y=e.computed(()=>i.emojiFilter.length>0),f=e.ref("1"),{isScrolling:s}=e.toRefs(i),k=e.ref([]);e.watch(()=>i.scrollIntoTab,()=>{!s.value&&!y.value&&(f.value=(i.scrollIntoTab+1).toString())}),e.watch(y,()=>{y.value&&(f.value=null)});function L(t){s.value||(f.value=t),u("selected-tabset",t)}function I(t){k.value.push(t.$el)}function w(){k.value[0].focus()}function n(t,o){t.key==="Enter"&&(L(o),k.value[o-1].blur()),t.key==="Tab"&&(t.preventDefault(),t.shiftKey?u("focus-skin-selector"):u("focus-search-input")),t.key==="ArrowDown"&&u("focus-search-input")}return g({focusTabset:w}),(t,o)=>(e.openBlock(),e.createElementBlock("div",re,[e.createVNode(e.unref(W.D),{"tab-list-class":"d-emoji-picker__tabset-list",selected:f.value},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.value,(a,d)=>(e.openBlock(),e.createBlock(e.unref(W.a),{id:a.id,ref_for:!0,ref:b=>{b&&I(b)},key:a.id,"panel-id":a.panelId,label:a.label,"aria-controls":"d-emoji-picker-list",tabindex:d+1,onClickCapture:e.withModifiers(b=>L(a.id),["stop"]),onKeydown:b=>n(b,a.id)},{default:e.withCtx(()=>[e.createVNode(e.unref(P.DtIcon),{size:"400",name:a.icon},null,8,["name"])]),_:2},1032,["id","panel-id","label","tabindex","onClickCapture","onKeydown"]))),128))]),_:1},8,["selected"])]))}},C={ARROW_UP:"ArrowUp",ARROW_DOWN:"ArrowDown",ARROW_LEFT:"ArrowLeft",ARROW_RIGHT:"ArrowRight"},V="https://static.dialpadcdn.com/joypixels/png/unicode/32/",_=9,B={DEFAULT:"Default",LIGHT:"Light",MEDIUM_LIGHT:"MediumLight",MEDIUM:"Medium",MEDIUM_DARK:"MediumDark",DARK:"Dark"},A={MOST_RECENTLY_USED:"Most recently used",SMILEYS_AND_PEOPLE:"Smileys and people",NATURE:"Nature",FOOD:"Food",ACTIVITY:"Activity",TRAVEL:"Travel",OBJECTS:"Objects",SYMBOLS:"Symbols",FLAGS:"Flags"};function ae(){const l=e.ref([]),g=e.ref([]),R=e.ref(!1),i=e.ref(!0);function u(n,t){s(n,t-1)||(l.value[n-1]?s(n-1,l.value[n-1].length-1):s(l.value.length-1,l.value[l.value.length-1].length-1))}function E(n,t){s(n,t+1)||s(n+1,0)||s(0,0)}function h(n,t){s(0,t-1)||s(0,g.value.length-1)}function y(n,t){s(0,t+1)||s(0,0)}function f(n,t,o){R.value?n==="left"?h(t,o):n==="right"&&y(t,o):n==="left"?u(t,o):n==="right"&&E(t,o)}function s(n,t){var a,d,b;const o=R.value?(a=g.value)==null?void 0:a[t]:(b=(d=l.value)==null?void 0:d[n])==null?void 0:b[t];return o?(o.focus(),!0):!1}function k(n,t,o){l.value[t]||(l.value[t]=[]),l.value[t][o]=n}function L(n,t){g.value[t]=n}function I(n,t){var o;if(i.value=!1,n===C.ARROW_UP){const a=t%_;if(!s(0,t-_)){const d=g.value.length-g.value.length%_+a;s(0,d),s(0,d)||s(0,g.value.length-1)}}if(n===C.ARROW_DOWN&&!s(0,t+_)){const a=t%_;(o=g.value)!=null&&o[t+(_-a)]?s(0,g.value.length-1):s(0,a)}n===C.ARROW_LEFT&&f("left",0,t),n===C.ARROW_RIGHT&&f("right",0,t)}function w(n,t,o){var a,d;if(n==="ArrowUp"){const b=o%_;if(t===0){const S=_-l.value[l.value.length-1].length%_,$=l.value[l.value.length-1].length+S-(_-b);s(l.value.length-1,$)||s(l.value.length-1,l.value[l.value.length-1].length-1);return}if(!s(t,o-_)){const S=t-1<0?0:t-1,$=l.value[S].length,q=$-$%_+b;s(S,q)||s(t-1,l.value[t-1].length-1)}}if(n==="ArrowDown"&&!s(t,o+_)){const b=o%_;(d=(a=l.value)==null?void 0:a[t])!=null&&d[o+(_-b)]?s(t,l.value[t].length-1):s(t+1,b)||s(0,b)||s(0,l.value[0].length-1)}n==="ArrowLeft"&&f("left",t,o),n==="ArrowRight"&&f("right",t,o)}return{emojiFilteredRefs:g,isFiltering:R,hoverFirstEmoji:i,setEmojiRef:k,setFilteredRef:L,focusEmoji:s,handleArrowNavigationFiltered:I,handleArrowNavigation:w}}const ce={class:"d-emoji-picker__selector"},ue={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},fe={key:0},de={class:"d-emoji-picker__tab"},me=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],ve=["alt","aria-label","title","src"],pe={key:2,class:"d-emoji-picker__alignment"},be={class:"d-emoji-picker__tab","data-qa":"filtered-emojis"},he=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],ke=["alt","aria-label","title","src"],ge={__name:"emoji_selector",props:{emojiFilter:{type:String,default:""},skinTone:{type:String,required:!0},tabsetLabels:{type:Array,required:!0},selectedTabset:{type:Object,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},recentlyUsedEmojis:{type:Array,default:()=>[]}},emits:["highlighted-emoji","selected-emoji","scroll-into-tab","is-scrolling","focus-skin-selector","focus-search-input"],setup(l,{expose:g,emit:R}){const i=l,u=R,{emojiFilteredRefs:E,isFiltering:h,hoverFirstEmoji:y,setEmojiRef:f,setFilteredRef:s,focusEmoji:k,handleArrowNavigationFiltered:L,handleArrowNavigation:I}=ae(),w=e.ref(null),n=e.ref(null),t=e.ref(null),o=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags"],a=e.computed(()=>i.recentlyUsedEmojis.length?i.tabsetLabels.map(r=>({label:r,ref:e.ref(null)})):i.tabsetLabels.slice(1).map(r=>({label:r,ref:e.ref(null)}))),d=e.ref(a.value[0].label),b=e.computed(()=>i.recentlyUsedEmojis.length?o:o.slice(1)),S=e.ref([]),$=e.computed(()=>[...T.emojisGrouped[`People${i.skinTone}`],...T.emojisGrouped.Nature,...T.emojisGrouped.Food,...T.emojisGrouped[`Activity${i.skinTone}`],...T.emojisGrouped.Travel,...T.emojisGrouped[`Objects${i.skinTone}`],...T.emojisGrouped.Symbols,...T.emojisGrouped.Flags]),q=H(()=>{E.value=[],G()});e.watch($,()=>{G()},{immediate:!0}),e.watch(()=>i.recentlyUsedEmojis,()=>{T.emojisGrouped["Recently used"]=i.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>i.emojiFilter,()=>{J(),i.emojiFilter?h.value=!0:(h.value=!1,F(null)),q()}),e.watch(()=>i.selectedTabset,r=>{K(r.tabId)},{deep:!0});function U(r,c=!1){y.value=c,u("highlighted-emoji",r)}function G(){const r=i.emojiFilter.toLowerCase();S.value=$.value.filter(c=>{const v=c.name.toLowerCase().includes(r),p=c.keywords.some(m=>m.toLowerCase().includes(r));return v||p}),e.nextTick(()=>{r&&U(S.value[0],!0)})}function H(r,c=300){let v;return(...p)=>{clearTimeout(v),v=setTimeout(()=>r(...p),c)}}function z(r){return`${V+r}.png`}function Y(r){r.target.parentNode.style.display="none"}function K(r,c=!0){const p=a.value[r-1].ref.value[0];e.nextTick(()=>{const m=n.value,N=r==="1"?0:p.offsetTop-20;let j=!0,O=m.scrollTop;u("is-scrolling",!0),m.addEventListener("scroll",()=>{if(j){const D=m.scrollTop;(O<D&&D>=N||O>D&&D<=N)&&(j=!1,u("is-scrolling",!1)),O=D}}),m.scrollTop=N,c&&k(r-1,0)})}function J(){const r=n.value;r.scrollTop=0}function Q(){t.value=new IntersectionObserver(r=>{r.forEach(c=>{var m,N,j,O,D;const{target:v}=c,p=parseInt(v.dataset.index);c.isIntersecting&&v.offsetTop<=w.value.offsetTop+50?(d.value=((m=a.value[p-1])==null?void 0:m.label)??((N=a.value[0])==null?void 0:N.label),u("scroll-into-tab",p-1)):c.boundingClientRect.bottom<=((j=w.value)==null?void 0:j.getBoundingClientRect().bottom)?(u("scroll-into-tab",p),d.value=(O=a.value[p])==null?void 0:O.label):p===1&&(u("scroll-into-tab",p),d.value=(D=a.value[0])==null?void 0:D.label)})}),t.value.observe(w.value),Array.from(n.value.children).forEach((r,c)=>{t.value.observe(r),r.dataset.index=c})}const X=(r,c,v)=>{if(r.preventDefault(),Object.values(C).includes(r.key)){L(r.key,c);return}switch(r.key){case"Tab":u("focus-skin-selector");break;case"Enter":M(v);break}},Z=(r,c,v,p)=>{if(r.preventDefault(),Object.values(C).includes(r.key)){I(r.key,c,v);return}switch(r.key){case"Tab":r.shiftKey?k(c,0)&&c>0?K(c,!0):(K(1,!1),u("focus-search-input")):k(c+1,0)?K(c+1+1,!1):u("focus-skin-selector");break;case"Enter":M(p);break}};function M(r){u("selected-emoji",r)}function F(r){u("highlighted-emoji",r)}function x(){k(0,0)}function ee(){k(b.value.length-1,0)}return e.onMounted(()=>{Q()}),e.onUnmounted(()=>{t.value.disconnect()}),g({focusEmojiSelector:x,focusLastEmoji:ee}),(r,c)=>(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:n,class:"d-emoji-picker__list"},[l.emojiFilter?(e.openBlock(),e.createElementBlock("p",ue,e.toDisplayString(S.value.length>0?l.searchResultsLabel:l.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:w,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(d.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(v,p)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:p,ref_for:!0,ref:v.ref,class:"d-emoji-picker__alignment"},[p?(e.openBlock(),e.createElementBlock("p",fe,e.toDisplayString(v.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",de,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(T.emojisGrouped)[b.value[p]+l.skinTone]?e.unref(T.emojisGrouped)[b.value[p]+l.skinTone]:e.unref(T.emojisGrouped)[b.value[p]],(m,N)=>(e.openBlock(),e.createElementBlock("button",{key:m.shortname,ref_for:!0,ref:j=>{j&&e.unref(f)(j,p,N)},type:"button","aria-label":m.name,onClick:j=>M(m),onFocusin:j=>F(m),onFocusout:c[0]||(c[0]=j=>F(null)),onMouseover:j=>F(m),onMouseleave:c[1]||(c[1]=j=>F(null)),onKeydown:j=>Z(j,p,N,m)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:m.name,"aria-label":m.name,title:m.name,src:z(m.unicode_character),onError:Y},null,40,ve)],40,me))),128))])])),[[e.vShow,!l.emojiFilter]])),128)),l.emojiFilter?(e.openBlock(),e.createElementBlock("div",pe,[e.createElementVNode("div",be,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.value,(v,p)=>(e.openBlock(),e.createElementBlock("button",{key:v.shortname,ref_for:!0,ref:m=>{m&&e.unref(s)(m,p)},type:"button","aria-label":v.name,class:e.normalizeClass({"hover-emoji":p===0&&e.unref(y)}),onClick:m=>M(v),onFocusin:m=>F(v),onFocusout:c[2]||(c[2]=m=>F(null)),onMouseover:m=>U(v),onMouseleave:c[3]||(c[3]=m=>U(null)),onKeydown:m=>X(m,p,v)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:v.name,"aria-label":v.name,title:v.name,src:`${e.unref(V)+v.unicode_character}.png`},null,8,ke)],42,he))),128))])])):e.createCommentVNode("",!0)],512)]))}},ye={"data-qa":"skin-selector"},Se={class:"d-emoji-picker__skin-list"},Ee=["onKeydown","onClick"],_e=["alt","aria-label","title","src"],je={class:"d-emoji-picker__skin-selected"},Re=["aria-label"],we=["alt","aria-label","title","src"],Te={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone","focus-tabset","focus-last-emoji"],setup(l,{expose:g,emit:R}){const i=l,u=R,E=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:B.LIGHT,skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:B.MEDIUM_LIGHT,skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:B.MEDIUM,skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:B.MEDIUM_DARK,skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:B.DARK,skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:B.DEFAULT,skinCode:""}],h=e.ref(!1),y=e.ref(null),f=e.ref([]);e.watchEffect(()=>i.isHovering&&(h.value=!1));const s=e.computed(()=>E.find(o=>o.skinTone===i.skinTone)),k=e.ref(s.value);e.watchEffect(()=>s.value&&(k.value=s.value));function L(o){f.value.push(o)}function I(){y.value.focus()}function w(o){k.value=o,h.value=!1,u("skin-tone",o.skinTone),e.nextTick(()=>I())}const n=(o,a,d)=>{var b,S,$;o.preventDefault(),o.key==="ArrowLeft"&&(d===0&&((b=f.value[f.value.length-1])==null||b.focus()),(S=f.value[d-1])==null||S.focus()),o.key==="ArrowRight"&&(($=f.value[d+1])==null||$.focus()),o.key==="Enter"&&(a?w(a):t()),o.key==="Tab"&&(o.shiftKey?u("focus-last-emoji"):u("focus-tabset"))};function t(){h.value=!h.value,e.nextTick(()=>f.value[0].focus())}return g({focusSkinSelector:I}),(o,a)=>(e.openBlock(),e.createElementBlock("div",ye,[e.withDirectives(e.createElementVNode("div",Se,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(E,(d,b)=>e.createElementVNode("button",{ref_for:!0,ref:S=>{S&&L(S)},key:d.name,class:e.normalizeClass({selected:k.value.skinCode===d.skinCode}),onKeydown:S=>n(S,d,b),onClick:S=>w(d)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:d.name,"aria-label":d.name,title:d.name,src:`${e.unref(V)+d.unicode_output}.png`},null,8,_e)],42,Ee)),64))],512),[[e.vShow,h.value]]),e.withDirectives(e.createElementVNode("div",je,[e.createVNode(e.unref(oe.DtTooltip),{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{ref_key:"skinSelectorRef",ref:y,"aria-label":l.skinSelectorButtonTooltipLabel,tabindex:"-1",onClick:t,onKeydown:a[0]||(a[0]=d=>n(d))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:k.value.name,"aria-label":k.value.name,title:k.value.name,src:`${e.unref(V)+k.value.unicode_output}.png`},null,8,we)],40,Re)]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!h.value]])]))}},Le={class:"d-emoji-picker__data"},Ie=["alt","aria-label","title","src"],$e={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(l){return(g,R)=>{var i;return e.openBlock(),e.createElementBlock("div",Le,[l.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:l.emoji.name,"aria-label":l.emoji.name,title:l.emoji.name,src:`${e.unref(V)+l.emoji.unicode_character}.png`},null,8,Ie)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString((i=l.emoji)==null?void 0:i.name),1)])}}},Ae={class:"d-emoji-picker"},Ne={class:"d-emoji-picker--header"},De={class:"d-emoji-picker--body"},Fe={class:"d-emoji-picker--footer"},Be={__name:"emoji_picker",props:{recentlyUsedEmojis:{type:Array,default:()=>[]},searchPlaceholderLabel:{type:String,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},tabSetLabels:{type:Array,required:!0},skinTone:{type:String,default:"Default"},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["selected-emoji","skin-tone","close"],setup(l,{emit:g}){const R=l,i=g,u=e.ref(""),E=e.ref(null),h=e.ref({}),y=e.ref(0),f=e.ref(!1),s=e.computed(()=>R.recentlyUsedEmojis.length>0);function k(n){u.value="",h.value=n,h.value={...h.value,tabId:n}}function L(n){y.value=n}function I(n){f.value=n}function w(n){E.value=n}return(n,t)=>(e.openBlock(),e.createElementBlock("div",Ae,[e.createElementVNode("div",Ne,[e.createVNode(ie,{ref:"tabsetRef","emoji-filter":u.value,"show-recently-used-tab":s.value,"scroll-into-tab":y.value,"tabset-labels":l.tabSetLabels,"is-scrolling":f.value,onFocusSearchInput:t[0]||(t[0]=o=>n.$refs.searchInputRef.focusSearchInput()),onFocusSkinSelector:t[1]||(t[1]=o=>n.$refs.skinSelectorRef.focusSkinSelector()),onSelectedTabset:k,onKeydown:t[2]||(t[2]=e.withKeys(o=>i("close"),["esc"]))},null,8,["emoji-filter","show-recently-used-tab","scroll-into-tab","tabset-labels","is-scrolling"])]),e.createElementVNode("div",De,[e.createVNode(se,{ref:"searchInputRef",modelValue:u.value,"onUpdate:modelValue":t[3]||(t[3]=o=>u.value=o),"search-placeholder-label":l.searchPlaceholderLabel,onSelectFirstEmoji:t[4]||(t[4]=o=>i("selected-emoji",E.value)),onFocusTabset:t[5]||(t[5]=o=>n.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:t[6]||(t[6]=o=>n.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:t[7]||(t[7]=e.withKeys(o=>i("close"),["esc"]))},null,8,["modelValue","search-placeholder-label"]),e.createVNode(ge,{ref:"emojiSelectorRef","emoji-filter":u.value,"skin-tone":l.skinTone,"tabset-labels":l.tabSetLabels,"search-results-label":l.searchResultsLabel,"search-no-results-label":l.searchNoResultsLabel,"recently-used-emojis":l.recentlyUsedEmojis,"selected-tabset":h.value,onScrollIntoTab:L,onIsScrolling:I,onHighlightedEmoji:w,onSelectedEmoji:t[8]||(t[8]=o=>i("selected-emoji",o)),onFocusSkinSelector:t[9]||(t[9]=o=>n.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:t[10]||(t[10]=o=>n.$refs.searchInputRef.focusSearchInput()),onKeydown:t[11]||(t[11]=e.withKeys(o=>i("close"),["esc"]))},null,8,["emoji-filter","skin-tone","tabset-labels","search-results-label","search-no-results-label","recently-used-emojis","selected-tabset"])]),e.createElementVNode("div",Fe,[e.createVNode($e,{emoji:E.value},null,8,["emoji"]),e.createVNode(Te,{ref:"skinSelectorRef","is-hovering":!!E.value,"skin-selector-button-tooltip-label":l.skinSelectorButtonTooltipLabel,"skin-tone":l.skinTone,onSkinTone:t[12]||(t[12]=o=>i("skin-tone",o)),onFocusTabset:t[13]||(t[13]=o=>n.$refs.tabsetRef.focusTabset()),onFocusLastEmoji:t[14]||(t[14]=o=>n.$refs.emojiSelectorRef.focusLastEmoji()),onKeydown:t[15]||(t[15]=e.withKeys(o=>i("close"),["esc"]))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports.ARROW_KEYS=C;exports.CDN_URL=V;exports.DtEmojiPicker=Be;exports.EMOJIS_PER_ROW=_;exports.EMOJI_PICKER_CATEGORIES=A;exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS=B;
+//# sourceMappingURL=emoji-picker.cjs.map