@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/datepicker.cjs

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