@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/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":["format","day"],"mappings":";;;;;;;;;;;;;;;;;AAKO,MAAM,aAAa;AAEnB,MAAM,eAAe;AAErB,MAAM,oBAAoB;ACFjC,MAAM,iBAAiB,CAAC,UAAW,QAAQ,IAAI,KAAK,KAAK,IAAI,oBAAI,KAAI;AAMrE,MAAM,cAAc,CAAC,UAAU,OAAO,gBAAgB;AACpD,QAAM,YAAY,eAAe,KAAK,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;AACrE,QAAM,QAAQ,CAAA;AACd,WAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1B,UAAM,OAAO,QAAQ,WAAW,CAAC;AACjC,UAAM,SAAS,SAAS,IAAI,MAAM;AAClC,UAAM,KAAK;AAAA,MACT,MAAM,KAAK,QAAS;AAAA,MACpB,OAAO;AAAA,MACP,cAAc,CAAC;AAAA,MACf,mBAAmB,KAAK,cAAc,KAAK,CAAC;AAAA;AAAA,MAE5C,UAAU,cAAe,KAAK,QAAS,MAAK,eAAe,CAAC,SAAU;AAAA,IAC5E,CAAK;AAAA,EACF;AACD,SAAO;AACT;AAEA,MAAM,cAAc,CAAC,MAAM,kBAAkB;AAC3C,MAAI,CAAC,QAAQ,CAAC,eAAe;AAC3B,WAAO;AAAA,EACR;AACD,SAAO,QAAQ,MAAM,aAAa;AACpC;AAKO,MAAM,kBAAkB,CAAC,OAAO,MAAM,gBAAgB;AAC3D,QAAM,QAAQ,CAAA;AACd,QAAM,YAAY,eAAe,IAAI,KAAK,MAAM,KAAK,CAAC;AACtD,QAAM,WAAW,eAAe,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC,CAAC;AAE5D,QAAM,eAAe;AAErB,QAAM,sBAAsB,YAAY,WAAW,EAAE,aAAc,CAAA;AAEnE,QAAM,gBAAgB,CAAC,SAAS;AAC9B,UAAM,OAAO,YAAY,MAAM,OAAO,WAAW;AAEjD,UAAM,KAAK,EAAE,KAAI,CAAE;AAEnB,QACE,CAAC,MAAM,MAAM,SAAS,CAAC,EAAE,KAAK;AAAA,MAAK,CAAC,QAClC,YAAY,IAAI,OAAO,QAAQ;AAAA,IAChC,GACD;AACA,YAAM,WAAW,QAAQ,MAAM,CAAC;AAChC,oBAAc,QAAQ;AAAA,IACvB;AAAA,EACL;AAEE,gBAAc,mBAAmB;AAEjC,SAAO;AACT;AAKO,MAAM,kBAAkB,CAAC,QAAQ,cAAc;AAEpD,QAAM,OAAO,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,QAAQ;AAC9C,WAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,SAAS,UAAU,OAAO,EACzE,OAAO,oBAAI,KAAK,YAAY,GAAG,iBAAiB,CAAC,EACjD,MAAM,GAAG,CAAC;AAAA,EACjB,CAAG;AAGD,QAAM,kBAAkB,KAAK,MAAM,GAAG,SAAS;AAE/C,QAAM,iBAAiB,KAAK,MAAM,YAAY,GAAG,KAAK,MAAM;AAG5D,SAAO,CAAC,KAAK,SAAS,CAAC,EAAE,OAAO,GAAG,cAAc,EAAE,OAAO,GAAG,eAAe;AAC9E;AAEO,MAAM,cAAc,CAAC,OAAO,aAAa,WAAW;AACzD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,YAAW,CAAE,EAAE,OAAO,IAAI,KAAK,KAAM,OAAO,CAAC,CAAC;AAChG;AAEO,MAAM,yBAAyB,CAAC,gBAAgB;AACrD,QAAM,OAAO,IAAI,KAAK,WAAW;AACjC,QAAM,iBAAiB,OAAO,IAAI;AAClC,QAAM,gBAAgB,UAAU,MAAM,CAAC;AACvC,QAAM,iBAAiB,aAAa,aAAa;AACjD,QAAM,wBAAwB,OAAO,cAAc;AAEnD,QAAM,iBAAiB,iBAAiB,wBAAwB,KAAK;AAGrE,QAAM,YAAY,QAAQ,gBAAgB,aAAa;AAGvD,SAAO,QAAQ,SAAS;AAC1B;AAEO,MAAM,yBAAyB,CAAC,gBAAgB;AACrD,QAAM,OAAO,IAAI,KAAK,WAAW;AACjC,QAAM,iBAAiB,OAAO,IAAI;AAGlC,QAAM,qBAAqB,WAAW,UAAU,MAAM,CAAC,CAAC;AACxD,MAAI,YAAY;AAGhB,SAAO,OAAO,SAAS,MAAM,gBAAgB;AAC3C,gBAAY,QAAQ,WAAW,EAAE;AAAA,EAClC;AAGD,SAAO,QAAQ,SAAS;AAC1B;ACzHO,SAAS,mBAAoB,OAAO,OAAO;AAChD,QAAM,cAAc,IAAI,SAAS,MAAM,YAAY,CAAC;AACpD,QAAM,aAAa,IAAI,QAAQ,MAAM,YAAY,CAAC;AAClD,QAAM,iBAAiB,IAAI,IAAI;AAC/B,QAAM,cAAc,IAAI,CAAC;AACzB,QAAM,YAAY,IAAI,CAAA,CAAE;AAExB,QAAM,eAAe,SAAS,MAAM;AAClC,WAAO,gBAAgB,YAAY,OAAO,WAAW,OAAO,eAAe,KAAK;AAAA,EACpF,CAAG;AAED,QAAM,iBAAiB,SAAS,MAAM;AACpC,WAAO,CAAC,OAAOA,SAAQ,WAAW,YAAY,OAAOA,SAAQ,MAAM;AAAA,EACvE,CAAG;AAED,QAAM,aAAa,MAAM;AACvB;AACA,UAAM,iBAAiB,aAAa,KAAK;AAAA,EAC7C,GAAK,EAAE,WAAW,KAAI,CAAE;AAEtB,QAAM,YAAY,MAAM;AACtB;AACA,UAAM,iBAAiB,aAAa,KAAK;AAAA,EAC7C,GAAK,EAAE,WAAW,KAAI,CAAE;AAEtB,WAAS,UAAW,IAAI;AACtB,QAAI,CAAC,UAAU,MAAM,SAAS,EAAE,GAAG;AACjC,gBAAU,MAAM,KAAK,EAAE;AAAA,IACxB;AAAA,EACF;AAED,WAAS,uBAAwB;AAC/B,cAAU,MAAM,CAAC,EAAE,IAAI,MAAK;AAAA,EAC7B;AAED,WAAS,cAAe,OAAO;AAC7B,YAAQ,MAAM,KAAG;AAAA,MACf,KAAK;AACH,cAAM,eAAc;AACpB,YAAI,YAAY,UAAU,GAAG;AAC3B,sBAAY,QAAQ;AACpB,oBAAU,MAAM,YAAY,KAAK,EAAE,IAAI;QACjD,OAAe;AACL,sBAAY;AACZ,oBAAU,MAAM,YAAY,KAAK,EAAE,IAAI;QACxC;AACD;AAAA,MAEF,KAAK;AACH,cAAM,eAAc;AACpB,YAAI,YAAY,UAAU,GAAG;AAC3B,sBAAY,QAAQ;AACpB,oBAAU,MAAM,YAAY,KAAK,EAAE,IAAI;QACjD,OAAe;AACL,sBAAY;AACZ,oBAAU,MAAM,YAAY,KAAK,EAAE,IAAI;QACxC;AACD;AAAA,MAEF,KAAK;AACH,cAAM,eAAc;AACpB,cAAM,iBAAiB;AACvB;AAAA,MAEF,KAAK;AACH,cAAM,eAAc;AACpB,cAAM,iBAAiB;AACvB;AAAA,MAEF,KAAK;AACH,cAAM,kBAAkB;AACxB;AAAA,IACH;AAAA,EACF;AAED,WAAS,eAAgB;AACvB,UAAM,OAAO,QAAQ,MAAM,YAAY;AACvC,UAAM,QAAQ,SAAS,MAAM,YAAY;AAEzC,QAAI,SAAS,WAAW,SAAS,UAAU,YAAY,OAAO;AAC5D,qBAAe,QAAQ;AAAA,IAC7B,OAAW;AACL,qBAAe,QAAQ,QAAQ,MAAM,YAAY;AAAA,IAClD;AAAA,EACF;AAED,WAAS,YAAa,OAAO;AAE3B,QAAK,YAAY,UAAU,KAAK,UAAU,MAAQ,YAAY,UAAU,MAAM,UAAU,GAAI;AAC1F,iBAAW,SAAS;AAAA,IACrB;AAGD,UAAM,cAAc,IAAI,MAAM,cAAc,EAAE,OAAO,YAAY,OAAO,MAAM,WAAW,MAAO,CAAA;AAChG,UAAM,UAAU,UAAU,IAAI,UAAU,aAAa,CAAC,IAAI,UAAU,aAAa,CAAC;AAGlF,gBAAY,QAAQ,SAAS,OAAO;AAAA,EACrC;AAED,WAAS,WAAY,OAAO;AAC1B,eAAW,QAAQ,WAAW,QAAQ;AAAA,EACvC;AAED,WAAS,gBAAiB;AACxB,gBAAY,CAAC;AAAA,EACd;AAED,WAAS,gBAAiB;AACxB,gBAAY,EAAE;AAAA,EACf;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACgBA,UAAM,QAAQ;AAoCd,UAAM,QAAQ;AA+Bd,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,mBAAmB,OAAO,KAAK;AAEnC,cAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnOM,SAAS,YAAa,OAAO,OAAO;AACzC,QAAM,cAAc,IAAI,IAAI;AAC5B,QAAM,WAAW,IAAI,CAAC;AACtB,QAAM,UAAU,IAAI,CAAA,CAAE;AAEtB,QAAM,WAAW,SAAS,MAAM;AAC9B,WAAO,gBAAgB,MAAM,QAAQ,UAAU;AAAA,EACnD,CAAG;AAED,QAAM,MAAM,MAAM,cAAc,MAAM;AACpC,aAAS,QAAQ;AACjB,YAAQ,QAAQ;AAChB,gBAAY,QAAQ;AAAA,EACxB,CAAG;AAED,WAAS,aAAc,KAAK;AAC1B,WAAO,GAAG,MAAM,cAAc,IAAI,IAAI,IAAI,IAAI,OAAO,IAAI,OAAO,YAAY,CAAC,IAAI,QAAQ,IAAI,KAAK,CAAC;AAAA,EACpG;AAED,WAAS,UAAW,IAAI,KAAK;AAC3B,QAAI,CAAC,QAAQ,MAAM,KAAK,CAAAC,SAAOA,KAAI,OAAO,EAAE,KAAK,IAAI,cAAc;AACjE,cAAQ,MAAM,KAAK,EAAE,IAAI,IAAK,CAAA;AAAA,IAC/B;AAAA,EACF;AAED,WAAS,cAAe,OAAO;AAC7B,YAAQ,MAAM,KAAG;AAAA,MACf,KAAK;AACH,cAAM,eAAc;AACpB,iBAAS,SAAS;AAClB,YAAI;AACF,kBAAQ,MAAM,SAAS,KAAK,EAAE,GAAG,IAAI;QACtC,SAAQ,OAAO;AACd,gBAAM,gBAAgB,uBAAuB,QAAQ,MAAM,SAAS,QAAQ,CAAC,EAAE,IAAI,KAAK;AACxF,gBAAM,kBAAkB;AAExB,mBAAS,MAAM;AACb,oBAAQ,MAAM,gBAAgB,CAAC,EAAE,GAAG,IAAI;AACxC,qBAAS,SAAS,gBAAgB;AAAA,UAC9C,CAAW;AAAA,QACF;AACD;AAAA,MAEF,KAAK;AACH,cAAM,eAAc;AACpB,iBAAS,SAAS;AAClB,YAAI;AACF,kBAAQ,MAAM,SAAS,KAAK,EAAE,GAAG,IAAI;QACtC,SAAQ,OAAO;AACd,gBAAM,gBAAgB,uBAAuB,QAAQ,MAAM,SAAS,QAAQ,CAAC,EAAE,IAAI,KAAK;AACxF,gBAAM,kBAAkB;AAExB,mBAAS,MAAM;AACb,oBAAQ,MAAM,gBAAgB,CAAC,EAAE,GAAG,IAAI;AACxC,qBAAS,SAAS,gBAAgB;AAAA,UAC9C,CAAW;AAAA,QACF;AACD;AAAA,MAEF,KAAK;AACH,cAAM,eAAc;AACpB,YAAI,SAAS,QAAQ,GAAG;AACtB,mBAAS,SAAS;AAClB,kBAAQ,MAAM,SAAS,KAAK,EAAE,GAAG,IAAI;QAC/C,OAAe;AAEL,gBAAM,kBAAkB;AACxB;QACD;AACD;AAAA,MAEF,KAAK;AACH,cAAM,eAAc;AACpB,YAAI,SAAS,QAAQ,QAAQ,MAAM,SAAS,GAAG;AAC7C,mBAAS,SAAS;AAClB,kBAAQ,MAAM,SAAS,KAAK,EAAE,GAAG,IAAI;QAC/C,OAAe;AAEL,gBAAM,kBAAkB;AAExB;QACD;AACD;AAAA,MAEF,KAAK;AACH,cAAM,eAAc;AACpB,cAAM,yBAAyB;AAC/B;AAAA,MAEF,KAAK;AACH,cAAM,kBAAkB;AACxB;AAAA,IACH;AAAA,EACF;AAED,WAAS,gBAAiB;AACxB,aAAS,QAAQ;AAEjB,aAAS,MAAM;AACb,cAAQ,MAAM,SAAS,KAAK,EAAE,GAAG,IAAI;IAC3C,CAAK;AAAA,EACF;AAED,WAAS,eAAgB;AACvB,aAAS,MAAM;AACb,eAAS,QAAQ,QAAQ,MAAM,SAAS;AACxC,cAAQ,MAAM,SAAS,KAAK,EAAE,GAAG,IAAI;IAC3C,CAAK;AAAA,EACF;AAED,WAAS,UAAW,KAAK;AACvB,QAAI,CAAC,IAAI,cAAc;AAAE;AAAA,IAAS;AAGlC,gBAAY,QAAQ,IAAI;AACxB,UAAM,eAAe,IAAI,KAAK;AAAA,EAC/B;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACnEA,UAAM,QAAQ;AAiBd,UAAM,QAAQ;AAsCd,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,YAAY,OAAO,KAAK;AAE5B,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACkBD,UAAM,eAAe,IAAI,CAAA,CAAE;AAE3B,aAAS,mBAAoB,MAAM;AACjC,mBAAa,QAAQ;AAAA,IACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC1JO,SAAS,WAAY,MAAM,SAAS,WAAW;AACpD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,QAAQ,MAAM,WAAW,OAAO,QAAQ,KAAK,UAAW,CAAA,EAAE,OAAO,IAAI;AACzH;AAEO,SAAS,aAAc,MAAM,SAAS,WAAW;AACtD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,MAAM,WAAW,OAAO,QAAQ,KAAK,UAAS,CAAE,EAAE,OAAO,IAAI;AACxG;AAEO,SAAS,YAAa,MAAM,SAAS,WAAW,cAAc,MAAM;AACzE,QAAM,UAAU,cAAc,EAAE,SAAS,SAAS,MAAM,WAAW,OAAO,SAAS,KAAK,UAAW,IAAG,EAAE,MAAM,WAAW,OAAO,SAAS,KAAK;AAC9I,SAAO,IAAI,KAAK,eAAe,QAAQ,OAAO,EAAE,OAAO,IAAI;AAC7D;AAEO,SAAS,aAAc,MAAM,SAAS,WAAW,cAAc,OAAO;AAC3E,QAAM,cAAc,cAAc,UAAU;AAC5C,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,aAAa,KAAK,UAAW,CAAA,EAAE,OAAO,IAAI;AAC5F;AAEO,SAAS,gBAAiB,MAAM,SAAS,WAAW;AACzD,SAAO,IAAI,KAAK,eAAe,QAAQ,EAAE,MAAM,WAAW,OAAO,WAAW,KAAK,UAAS,CAAE,EAAE,OAAO,IAAI;AAC3G;"}

package/dist/lib/description-list.cjs

@@ -1,2 +1,117 @@
-"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=_;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const stack_constants = require("../chunks/stack_constants-SMzMWnAQ.js");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const DT_DESCRIPTION_LIST_DIRECTION = ["row", "column"];
+const hasValidTerm = (item) => {
+  if (!item.term) {
+    return false;
+  }
+  return typeof item.term === "string";
+};
+const hasValidDescription = (item) => {
+  if (!item.description) {
+    return false;
+  }
+  return typeof item.description === "string";
+};
+const itemsValidator = (items) => {
+  if (!Array.isArray(items)) {
+    return false;
+  }
+  return items.every((item) => {
+    if (typeof item !== "object") {
+      return false;
+    }
+    if (!hasValidTerm(item)) {
+      return false;
+    }
+    if (!hasValidDescription(item)) {
+      return false;
+    }
+    return true;
+  });
+};
+const _sfc_main = {
+  name: "DtDescriptionList",
+  props: {
+    /**
+     * The direction for the list
+     * @values row, column
+     */
+    direction: {
+      type: String,
+      default: "row",
+      validator: (direction) => DT_DESCRIPTION_LIST_DIRECTION.includes(direction)
+    },
+    /**
+     * A list of items that represent the term and the description
+     */
+    items: {
+      type: Array,
+      default: () => [],
+      validator: (items) => itemsValidator(items),
+      required: true
+    },
+    /**
+     * Set the space between the elements
+     * @values 0, 100, 200, 300, 400, 500, 600
+     */
+    gap: {
+      type: String,
+      default: "400",
+      validator: (gap) => stack_constants.DT_STACK_GAP.includes(gap)
+    },
+    /**
+     * Used to customize the term element
+     */
+    termClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Used to customize the description element
+     */
+    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 _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("dl", {
+    class: vue.normalizeClass(["dt-description-list", $options.getDirectionClass, $options.getGapClass])
+  }, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.items, (item) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+        key: item.term
+      }, [
+        vue.createElementVNode("dt", {
+          class: vue.normalizeClass($options.dtClass)
+        }, vue.toDisplayString(item.term), 3),
+        vue.createElementVNode("dd", {
+          class: vue.normalizeClass($options.ddClass)
+        }, vue.toDisplayString(item.description), 3)
+      ], 64);
+    }), 128))
+  ], 2);
+}
+const description_list = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DT_DESCRIPTION_LIST_DIRECTION = DT_DESCRIPTION_LIST_DIRECTION;
+exports.DtDescriptionList = description_list;
 //# sourceMappingURL=description-list.cjs.map

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

@@ -1 +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"}
+{"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_STACK_GAP","_createElementBlock","_normalizeClass","_Fragment","_renderList","_createElementVNode","_toDisplayString"],"mappings":";;;;;AAAY,MAAC,gCAAgC,CAAC,OAAO,QAAQ;ACA7D,MAAM,eAAe,UAAQ;AAC3B,MAAI,CAAC,KAAK,MAAM;AACd,WAAO;AAAA,EACR;AAED,SAAO,OAAO,KAAK,SAAS;AAC9B;AAEA,MAAM,sBAAsB,UAAQ;AAClC,MAAI,CAAC,KAAK,aAAa;AACrB,WAAO;AAAA,EACR;AAED,SAAO,OAAO,KAAK,gBAAgB;AACrC;AAEO,MAAM,iBAAiB,WAAS;AACrC,MAAI,CAAC,MAAM,QAAQ,KAAK,GAAG;AACzB,WAAO;AAAA,EACR;AAED,SAAO,MAAM,MAAM,UAAQ;AACzB,QAAI,OAAO,SAAS,UAAU;AAC5B,aAAO;AAAA,IACR;AAED,QAAI,CAAC,aAAa,IAAI,GAAG;AACvB,aAAO;AAAA,IACR;AAED,QAAI,CAAC,oBAAoB,IAAI,GAAG;AAC9B,aAAO;AAAA,IACR;AAED,WAAO;AAAA,EACX,CAAG;AACH;ACfA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,eAAa,8BAA8B,SAAS,SAAS;AAAA,IACzE;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,WAAS,eAAe,KAAK;AAAA,MACxC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QAAQA,6BAAa,SAAS,GAAG;AAAA,IAC9C;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,UAAW;AACT,aAAO,CAAC,6BAA6B,KAAK,SAAS;AAAA,IACpD;AAAA,IAED,UAAW;AACT,aAAO,CAAC,oCAAoC,KAAK,gBAAgB;AAAA,IAClE;AAAA,IAED,oBAAqB;AACnB,aAAO,wBAAwB,KAAK,SAAS;AAAA,IAC9C;AAAA,IAED,cAAe;AACb,aAAO,4BAA4B,KAAK,GAAG;AAAA,IAC5C;AAAA,EACF;AACH;;0BAxFEC,IAYK,mBAAA,MAAA;AAAA,IAZA,OAAKC,IAAA,eAAA,CAAA,uBAA0B,SAAiB,mBAAE,SAAW,WAAA,CAAA;AAAA;0BAChED,IAAAA,mBAUWE,IAAA,UAAA,MAAAC,IAAAA,WATM,OAAK,OAAA,CAAb,SAAI;;QACL,KAAA,KAAK;AAAA;QAEXC,IAAAA,mBAEK,MAAA;AAAA,UAFA,0BAAO,SAAO,OAAA;AAAA,QACd,GAAAC,oBAAA,KAAK,IAAI,GAAA,CAAA;AAAA,QAEdD,IAAAA,mBAEK,MAAA;AAAA,UAFA,0BAAO,SAAO,OAAA;AAAA,QACd,GAAAC,oBAAA,KAAK,WAAW,GAAA,CAAA;AAAA;;;;;;;"}

package/dist/lib/description-list.js

@@ -1,7 +1,37 @@
-import { b as p } from "../chunks/stack_constants-u7tNqGtc.js";
-import { openBlock as i, createElementBlock as a, normalizeClass as n, Fragment as l, renderList as u, createElementVNode as d, toDisplayString as o } from "vue";
-import { _ as f } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-const _ = ["row", "column"], m = (t) => t.term ? typeof t.term == "string" : !1, y = (t) => t.description ? typeof t.description == "string" : !1, C = (t) => Array.isArray(t) ? t.every((r) => !(typeof r != "object" || !m(r) || !y(r))) : !1, g = {
+import { DT_STACK_GAP } from "../chunks/stack_constants-HraCekPm.js";
+import { openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, toDisplayString } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+const DT_DESCRIPTION_LIST_DIRECTION = ["row", "column"];
+const hasValidTerm = (item) => {
+  if (!item.term) {
+    return false;
+  }
+  return typeof item.term === "string";
+};
+const hasValidDescription = (item) => {
+  if (!item.description) {
+    return false;
+  }
+  return typeof item.description === "string";
+};
+const itemsValidator = (items) => {
+  if (!Array.isArray(items)) {
+    return false;
+  }
+  return items.every((item) => {
+    if (typeof item !== "object") {
+      return false;
+    }
+    if (!hasValidTerm(item)) {
+      return false;
+    }
+    if (!hasValidDescription(item)) {
+      return false;
+    }
+    return true;
+  });
+};
+const _sfc_main = {
   name: "DtDescriptionList",
   props: {
     /**
@@ -11,7 +41,7 @@ const _ = ["row", "column"], m = (t) => t.term ? typeof t.term == "string" : !1,
     direction: {
       type: String,
       default: "row",
-      validator: (t) => _.includes(t)
+      validator: (direction) => DT_DESCRIPTION_LIST_DIRECTION.includes(direction)
     },
     /**
      * A list of items that represent the term and the description
@@ -19,8 +49,8 @@ const _ = ["row", "column"], m = (t) => t.term ? typeof t.term == "string" : !1,
     items: {
       type: Array,
       default: () => [],
-      validator: (t) => C(t),
-      required: !0
+      validator: (items) => itemsValidator(items),
+      required: true
     },
     /**
      * Set the space between the elements
@@ -29,7 +59,7 @@ const _ = ["row", "column"], m = (t) => t.term ? typeof t.term == "string" : !1,
     gap: {
       type: String,
       default: "400",
-      validator: (t) => p.includes(t)
+      validator: (gap) => DT_STACK_GAP.includes(gap)
     },
     /**
      * Used to customize the term element
@@ -61,25 +91,27 @@ const _ = ["row", "column"], m = (t) => t.term ? typeof t.term == "string" : !1,
     }
   }
 };
-function D(t, r, c, S, h, e) {
-  return i(), a("dl", {
-    class: n(["dt-description-list", e.getDirectionClass, e.getGapClass])
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("dl", {
+    class: normalizeClass(["dt-description-list", $options.getDirectionClass, $options.getGapClass])
   }, [
-    (i(!0), a(l, null, u(c.items, (s) => (i(), a(l, {
-      key: s.term
-    }, [
-      d("dt", {
-        class: n(e.dtClass)
-      }, o(s.term), 3),
-      d("dd", {
-        class: n(e.ddClass)
-      }, o(s.description), 3)
-    ], 64))), 128))
+    (openBlock(true), createElementBlock(Fragment, null, renderList($props.items, (item) => {
+      return openBlock(), createElementBlock(Fragment, {
+        key: item.term
+      }, [
+        createElementVNode("dt", {
+          class: normalizeClass($options.dtClass)
+        }, toDisplayString(item.term), 3),
+        createElementVNode("dd", {
+          class: normalizeClass($options.ddClass)
+        }, toDisplayString(item.description), 3)
+      ], 64);
+    }), 128))
   ], 2);
 }
-const b = /* @__PURE__ */ f(g, [["render", D]]);
+const description_list = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  _ as DT_DESCRIPTION_LIST_DIRECTION,
-  b as DtDescriptionList
+  DT_DESCRIPTION_LIST_DIRECTION,
+  description_list as DtDescriptionList
 };
 //# sourceMappingURL=description-list.js.map

package/dist/lib/description-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"description-list.js","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":";;;AAAY,MAACA,IAAgC,CAAC,OAAO,QAAQ,GCAvDC,IAAe,CAAAC,MACdA,EAAK,OAIH,OAAOA,EAAK,QAAS,WAHnB,IAMLC,IAAsB,CAAAD,MACrBA,EAAK,cAIH,OAAOA,EAAK,eAAgB,WAH1B,IAMEE,IAAiB,CAAAC,MACvB,MAAM,QAAQA,CAAK,IAIjBA,EAAM,MAAM,CAAAH,MACb,SAAOA,KAAS,YAIhB,CAACD,EAAaC,CAAI,KAIlB,CAACC,EAAoBD,CAAI,EAK9B,IAjBQ,ICGNI,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAAC,MAAaP,EAA8B,SAASO,CAAS;AAAA,IACzE;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,CAAAF,MAASD,EAAeC,CAAK;AAAA,MACxC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACG,MAAQC,EAAa,SAASD,CAAG;AAAA,IAC9C;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,UAAW;AACT,aAAO,CAAC,6BAA6B,KAAK,SAAS;AAAA,IACpD;AAAA,IAED,UAAW;AACT,aAAO,CAAC,oCAAoC,KAAK,gBAAgB;AAAA,IAClE;AAAA,IAED,oBAAqB;AACnB,aAAO,wBAAwB,KAAK,SAAS;AAAA,IAC9C;AAAA,IAED,cAAe;AACb,aAAO,4BAA4B,KAAK,GAAG;AAAA,IAC5C;AAAA,EACF;AACH;;cAxFEE,EAYK,MAAA;AAAA,IAZA,OAAKC,EAAA,CAAA,uBAA0BC,EAAiB,mBAAEA,EAAW,WAAA,CAAA;AAAA;YAChEF,EAUWG,GAAA,MAAAC,EATMC,EAAK,OAAA,CAAbb;MACD,KAAAA,EAAK;AAAA;MAEXc,EAEK,MAAA;AAAA,QAFA,SAAOJ,EAAO,OAAA;AAAA,MACd,GAAAK,EAAAf,EAAK,IAAI,GAAA,CAAA;AAAA,MAEdc,EAEK,MAAA;AAAA,QAFA,SAAOJ,EAAO,OAAA;AAAA,MACd,GAAAK,EAAAf,EAAK,WAAW,GAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"description-list.js","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":["_createElementBlock","_normalizeClass","_Fragment","_renderList","_createElementVNode","_toDisplayString"],"mappings":";;;AAAY,MAAC,gCAAgC,CAAC,OAAO,QAAQ;ACA7D,MAAM,eAAe,UAAQ;AAC3B,MAAI,CAAC,KAAK,MAAM;AACd,WAAO;AAAA,EACR;AAED,SAAO,OAAO,KAAK,SAAS;AAC9B;AAEA,MAAM,sBAAsB,UAAQ;AAClC,MAAI,CAAC,KAAK,aAAa;AACrB,WAAO;AAAA,EACR;AAED,SAAO,OAAO,KAAK,gBAAgB;AACrC;AAEO,MAAM,iBAAiB,WAAS;AACrC,MAAI,CAAC,MAAM,QAAQ,KAAK,GAAG;AACzB,WAAO;AAAA,EACR;AAED,SAAO,MAAM,MAAM,UAAQ;AACzB,QAAI,OAAO,SAAS,UAAU;AAC5B,aAAO;AAAA,IACR;AAED,QAAI,CAAC,aAAa,IAAI,GAAG;AACvB,aAAO;AAAA,IACR;AAED,QAAI,CAAC,oBAAoB,IAAI,GAAG;AAC9B,aAAO;AAAA,IACR;AAED,WAAO;AAAA,EACX,CAAG;AACH;ACfA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,eAAa,8BAA8B,SAAS,SAAS;AAAA,IACzE;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,WAAS,eAAe,KAAK;AAAA,MACxC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,KAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,QAAQ,aAAa,SAAS,GAAG;AAAA,IAC9C;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,UAAW;AACT,aAAO,CAAC,6BAA6B,KAAK,SAAS;AAAA,IACpD;AAAA,IAED,UAAW;AACT,aAAO,CAAC,oCAAoC,KAAK,gBAAgB;AAAA,IAClE;AAAA,IAED,oBAAqB;AACnB,aAAO,wBAAwB,KAAK,SAAS;AAAA,IAC9C;AAAA,IAED,cAAe;AACb,aAAO,4BAA4B,KAAK,GAAG;AAAA,IAC5C;AAAA,EACF;AACH;;sBAxFEA,mBAYK,MAAA;AAAA,IAZA,OAAKC,eAAA,CAAA,uBAA0B,SAAiB,mBAAE,SAAW,WAAA,CAAA;AAAA;sBAChED,mBAUWE,UAAA,MAAAC,WATM,OAAK,OAAA,CAAb,SAAI;;QACL,KAAA,KAAK;AAAA;QAEXC,mBAEK,MAAA;AAAA,UAFA,sBAAO,SAAO,OAAA;AAAA,QACd,GAAAC,gBAAA,KAAK,IAAI,GAAA,CAAA;AAAA,QAEdD,mBAEK,MAAA;AAAA,UAFA,sBAAO,SAAO,OAAA;AAAA,QACd,GAAAC,gBAAA,KAAK,WAAW,GAAA,CAAA;AAAA;;;;;"}

package/dist/lib/dropdown.cjs

@@ -1,2 +1,37 @@
-"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;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dropdown = require("../chunks/dropdown-w8Do29L5.js");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const dropdown_constants = require("../chunks/dropdown_constants-2pGCXy7m.js");
+require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("../chunks/sr_only_close_button-xGrHFjwA.js");
+require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("./button.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("./popover.cjs");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("tippy.js");
+require("../chunks/modal-VgxXAQFP.js");
+require("./lazy-show.cjs");
+require("../chunks/list_item_constants-EiqkqZvP.js");
+const _sfc_main = {
+  name: "DtDropdownSeparator"
+};
+const _hoisted_1 = {
+  "aria-hidden": "true",
+  class: "dt-list-separator"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("li", _hoisted_1);
+}
+const dropdown_separator = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtDropdown = dropdown.DtDropdown;
+exports.DROPDOWN_PADDING_CLASSES = dropdown_constants.DROPDOWN_PADDING_CLASSES;
+exports.DtDropdownSeparator = dropdown_separator;
 //# sourceMappingURL=dropdown.cjs.map

package/dist/lib/dropdown.cjs.map

@@ -1 +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"}
+{"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":["_openBlock","_createElementBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAQA,MAAK,YAAU;AAAA,EACb,MAAM;AACR;;EARI,eAAY;AAAA,EACZ,OAAM;;;AAFR,SAAAA,IAAA,UAAA,GAAAC,IAAAA,mBAGE,MAHF,UAGE;;;;;;"}

package/dist/lib/dropdown.js

@@ -1,36 +1,37 @@
-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 b } from "../chunks/dropdown_constants-EUcDxBrX.js";
-import "../chunks/keyboard_list_navigation-F0O8nht0.js";
-import "./utils.js";
-import "./constants.js";
-import "../chunks/sr_only_close_button-7O-Ev8uM.js";
+import { DtDropdown } from "../chunks/dropdown-Hn-TeTvZ.js";
+import { openBlock, createElementBlock } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DROPDOWN_PADDING_CLASSES } from "../chunks/dropdown_constants-w1MXGC3Z.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.js";
+import "../common/utils.js";
+import "../common/constants.js";
+import "../chunks/sr_only_close_button-3EdsV-dH.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./button.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "./popover.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
 import "tippy.js";
-import "../chunks/modal-VuMFkZFH.js";
+import "../chunks/modal-XOr4kiNZ.js";
 import "./lazy-show.js";
-import "../chunks/list_item_constants-LTUc74pD.js";
-const p = {
+import "../chunks/list_item_constants-u1xcN9Dd.js";
+const _sfc_main = {
   name: "DtDropdownSeparator"
-}, i = {
+};
+const _hoisted_1 = {
   "aria-hidden": "true",
   class: "dt-list-separator"
 };
-function m(e, a, s, n, c, _) {
-  return o(), r("li", i);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", _hoisted_1);
 }
-const G = /* @__PURE__ */ t(p, [["render", m]]);
+const dropdown_separator = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  b as DROPDOWN_PADDING_CLASSES,
-  R as DtDropdown,
-  G as DtDropdownSeparator
+  DROPDOWN_PADDING_CLASSES,
+  DtDropdown,
+  dropdown_separator as DtDropdownSeparator
 };
 //# sourceMappingURL=dropdown.js.map

package/dist/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":["_openBlock","_createElementBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;AAQA,MAAK,YAAU;AAAA,EACb,MAAM;AACR;;EARI,eAAY;AAAA,EACZ,OAAM;;;AAFR,SAAAA,UAAA,GAAAC,mBAGE,MAHF,UAGE;;;"}