@dialpad/dialtone 9.29.0 → 9.30.0

package/dist/vue2/lib/datepicker.cjs

@@ -1,2 +1,663 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("date-fns"),y=require("./stack.cjs"),k=require("./tooltip.cjs"),D=require("./button.cjs"),h=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),g=require("./icon.cjs");require("../chunks/stack_constants-m9Ickqw0.js");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("./utils.cjs");require("./constants.cjs");require("vue");require("./lazy-show.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const p=0,_="MMMM",b="long",u=t=>t?new Date(t):new Date,$=(t,e,a)=>{const r=u(JSON.parse(JSON.stringify(t))),o=[];for(let n=0;n<7;n++){const c=s.addDays(r,n),i=s.getMonth(c)!==e;o.push({text:c.getDate(),value:c,currentMonth:!i,isFirstDayOfMonth:c.getDate()===1&&!i,selected:a?c.getDate()===a&&!i:!1})}return o},M=(t,e)=>!t||!e?!1:s.isEqual(t,e),v=(t,e,a)=>{const r=[],o=u(new Date(e,t)),n=u(new Date(e,t+1,0)),c=p,i=s.startOfWeek(o,{weekStartsOn:c}),d=f=>{const m=$(f,t,a);if(r.push({days:m}),!r[r.length-1].days.some(l=>M(l.value,n))){const l=s.addDays(f,7);d(l)}};return d(i),r},w=(t,e)=>{const a=[1,2,3,4,5,6,7].map(n=>new Intl.DateTimeFormat(t,{weekday:"short",timeZone:"UTC"}).format(new Date(`2017-01-0${n}T00:00:00+00:00`)).slice(0,2)),r=a.slice(0,e),o=a.slice(e+1,a.length);return[a[e]].concat(...o).concat(...r)},x=(t,e,a)=>new Intl.DateTimeFormat(a,{month:e}).format(new Date(2e3,t,1)),R=t=>{const e=new Date(t),a=s.getDay(e),r=s.addMonths(e,1),o=s.startOfMonth(r),n=s.getDay(o),c=(a-n+7)%7,i=s.addDays(o,c);return s.getDate(i)},Y=t=>{const e=new Date(t),a=s.getDay(e);let o=s.endOfMonth(s.subMonths(e,1));for(;s.getDay(o)!==a;)o=s.addDays(o,-1);return s.getDate(o)},L={name:"DtDatepickerMonthYearPicker",components:{DtButton:D.DtButton,DtTooltip:k.DtTooltip,DtStack:y.DtStack,DtIcon:g.DtIcon},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"],data(){return{selectMonth:s.getMonth(this.selectedDate),selectYear:s.getYear(this.selectedDate),highlightedDay:null,focusPicker:0,focusRefs:[],refNames:["prevYearButtonRef","prevMonthButtonRef","nextMonthButtonRef","nextYearButtonRef"]}},computed:{calendarDays(){return v(this.selectMonth,this.selectYear,this.highlightedDay)},formattedMonth(){return t=>x(t,b,this.locale)}},watch:{selectMonth:{handler(){this.highlightDay(),this.$emit("calendar-days",this.calendarDays)},immediate:!0},selectYear:{handler(){this.highlightDay(),this.$emit("calendar-days",this.calendarDays)},immediate:!0}},mounted(){this.setButtonsRef(),this.focusMonthYearPicker()},methods:{setButtonsRef(){this.focusRefs=this.refNames.map(t=>this.$refs[t])},focusMonthYearPicker(){this.focusPicker=0,this.focusRefs[0].$el.focus()},handleKeyDown(t){switch(t.key){case"ArrowLeft":t.preventDefault(),this.focusPicker===0?(this.focusPicker=3,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker--,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowRight":t.preventDefault(),this.focusPicker===3?(this.focusPicker=0,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker++,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowDown":t.preventDefault(),this.$emit("focus-first-day");break;case"Tab":t.preventDefault(),this.$emit("focus-first-day");break;case"Escape":this.$emit("close-datepicker");break}},highlightDay(){const t=s.getYear(this.selectedDate),e=s.getMonth(this.selectedDate);t!==this.selectYear||e!==this.selectMonth?this.highlightedDay=null:this.highlightedDay=s.getDate(this.selectedDate)},changeMonth(t){(this.selectMonth===0&&t===-1||this.selectMonth===11&&t===1)&&(this.selectYear+=t);const e=s.set(this.selectedDate,{month:this.selectMonth,year:this.selectYear}),a=t===1?s.addMonths(e,1):s.subMonths(e,1);this.selectMonth=s.getMonth(a)},changeYear(t){this.selectYear=this.selectYear+t},goToNextMonth(){this.changeMonth(1)},goToPrevMonth(){this.changeMonth(-1)}}};var T=function(){var e=this,a=e._self._c;return a("dt-stack",{staticClass:"d-datepicker__month-year",attrs:{direction:"row",gap:"300"}},[a("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[a("dt-tooltip",{attrs:{message:e.prevYearLabel,placement:"top"},scopedSlots:e._u([{key:"anchor",fn:function(){return[a("dt-button",{ref:e.refNames[0],staticClass:"d-datepicker__nav-btn",attrs:{id:"prevYearButton",size:"xs",importance:"clear",kind:"muted",circle:!0,type:"button","aria-label":`${e.changeToLabel} ${e.prevYearLabel} ${e.selectYear-1}`},on:{click:function(r){return e.changeYear(-1)},keydown:function(r){return e.handleKeyDown(r)}}},[a("dt-icon",{attrs:{name:"chevrons-left",size:"200"}})],1)]},proxy:!0}])}),a("dt-tooltip",{attrs:{message:e.prevMonthLabel,placement:"top"},scopedSlots:e._u([{key:"anchor",fn:function(){return[a("dt-button",{ref:e.refNames[1],staticClass:"d-datepicker__nav-btn",attrs:{id:"prevMonthButton",size:"xs",importance:"clear",kind:"muted",circle:!0,type:"button","aria-label":`${e.changeToLabel} ${e.prevMonthLabel} ${e.formattedMonth(e.selectMonth-1)}`},on:{click:function(r){return e.changeMonth(-1)},keydown:function(r){return e.handleKeyDown(r)}}},[a("dt-icon",{attrs:{name:"chevron-left",size:"200"}})],1)]},proxy:!0}])})],1),a("div",{staticClass:"d-datepicker__month-year-title",attrs:{id:"calendar-heading"}},[e._v(" "+e._s(e.formattedMonth(e.selectMonth))+" "+e._s(e.selectYear)+" ")]),a("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[a("dt-tooltip",{attrs:{message:e.nextMonthLabel,placement:"top"},scopedSlots:e._u([{key:"anchor",fn:function(){return[a("dt-button",{ref:e.refNames[2],staticClass:"d-datepicker__nav-btn",attrs:{id:"nextMonthButton",size:"xs",importance:"clear",circle:!0,kind:"muted",type:"button","aria-label":`${e.changeToLabel} ${e.nextMonthLabel} ${e.formattedMonth(e.selectMonth+1)}`},on:{click:function(r){return e.changeMonth(1)},keydown:function(r){return e.handleKeyDown(r)}}},[a("dt-icon",{attrs:{name:"chevron-right",size:"200"}})],1)]},proxy:!0}])}),a("dt-tooltip",{attrs:{message:e.nextYearLabel,placement:"top"},scopedSlots:e._u([{key:"anchor",fn:function(){return[a("dt-button",{ref:e.refNames[3],staticClass:"d-datepicker__nav-btn",attrs:{id:"nextYearButton",size:"xs",kind:"muted",circle:!0,importance:"clear",type:"button","aria-label":`${e.changeToLabel} ${e.nextYearLabel} ${e.selectYear+1}`},on:{click:function(r){return e.changeYear(1)},keydown:function(r){return e.handleKeyDown(r)}}},[a("dt-icon",{attrs:{name:"chevrons-right",size:"200"}})],1)]},proxy:!0}])})],1)],1)},q=[],S=h.n(L,T,q,!1,null,null,null,null);const P=S.exports,F={name:"DtDatepickerCalendar",components:{DtButton:D.DtButton},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"],data(){return{selectedDay:null,focusDay:0,daysRef:[]}},computed:{weekDays(){return w(this.locale,p)}},watch:{calendarDays(){this.focusDay=0,this.selectedDay=null,this.daysRef=[],this.$nextTick(()=>{this.daysRef=[],this.setDayRef()})}},methods:{dayAriaLabel(t){return`${this.selectDayLabel} ${t.text} ${s.format(t.value,_)} ${s.getYear(t.value)}`},setDayRef(t,e){this.calendarDays.forEach((a,r)=>{a.days.forEach((o,n)=>{const c=`buttonRef_${r}_${n}`,i=this.$refs[c];i&&o.currentMonth&&this.daysRef.push({el:i[0],day:o})})})},handleKeyDown(t){switch(t.key){case"ArrowUp":t.preventDefault(),this.focusDay-=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const a=Y(this.daysRef[this.focusDay+7].day.value);this.$emit("go-to-prev-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[a-1].el.$el.focus(),this.focusDay+=a-1})}break;case"ArrowDown":t.preventDefault(),this.focusDay+=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const a=R(this.daysRef[this.focusDay-7].day.value);this.$emit("go-to-next-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[a-1].el.$el.focus(),this.focusDay+=a-1})}break;case"ArrowLeft":t.preventDefault(),this.focusDay>0?(this.focusDay-=1,this.daysRef[this.focusDay].el.$el.focus()):(this.$emit("go-to-prev-month"),this.$nextTick(()=>{this.focusLastDay()}));break;case"ArrowRight":t.preventDefault(),this.focusDay<this.daysRef.length-1?(this.focusDay+=1,this.daysRef[this.focusDay].el.$el.focus()):(this.$emit("go-to-next-month"),this.$nextTick(()=>{this.focusFirstDay()}));break;case"Tab":t.preventDefault(),this.$emit("focus-month-year-picker");break;case"Escape":this.$emit("close-datepicker");break}},focusFirstDay(){this.focusDay=0,this.$nextTick(()=>{this.daysRef[this.focusDay].el.$el.focus()})},focusLastDay(){this.$nextTick(()=>{this.focusDay=this.daysRef.length-1,this.daysRef[this.focusDay].el.$el.focus()})},selectDay(t){t.currentMonth&&(this.selectedDay=t.text,this.$emit("select-date",t.value))}}};var C=function(){var e=this,a=e._self._c;return a("table",{staticClass:"d-datepicker__calendar",attrs:{"aria-labelledby":"calendar-heading"}},[a("thead",[a("tr",e._l(e.weekDays,function(r){return a("th",{key:r,staticClass:"d-datepicker__cell d-datepicker__cell--header",attrs:{scope:"col"}},[a("span",{staticClass:"d-datepicker__weekday",attrs:{title:r,"aria-label":r}},[e._v(" "+e._s(r))])])}),0)]),a("tbody",e._l(e.calendarDays,function(r,o){return a("tr",{key:o},e._l(r.days,function(n,c){return a("td",{key:o+c,staticClass:"d-datepicker__cell",attrs:{role:"listbox"}},[a("dt-button",{ref:`buttonRef_${o}_${c}`,refInFor:!0,staticClass:"d-datepicker__day",class:{"d-datepicker__day--disabled":!n.currentMonth,"d-datepicker__day--selected":e.selectedDay?n.text===e.selectedDay&&n.currentMonth:n.selected},attrs:{circle:!0,size:"sm",importance:"clear",disabled:!n.currentMonth,type:"button","aria-selected":e.selectedDay?n.text===e.selectedDay&&n.currentMonth:n.selected,"aria-label":e.dayAriaLabel(n),role:"option"},on:{click:function(i){return e.selectDay(n)},keydown:function(i){return e.handleKeyDown(i)}}},[e._v(" "+e._s(n.text)+" ")])],1)}),0)}),0)])},N=[],B=h.n(F,C,N,!1,null,null,null,null);const O=B.exports,A={name:"DtDatepicker",components:{DtStack:y.DtStack,MonthYearPicker:P,Calendar:O},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"],data(){return{calendarDays:[]}},methods:{updateCalendarDays(t){this.calendarDays=t}}};var I=function(){var e=this,a=e._self._c;return a("dt-stack",{staticClass:"d-datepicker",attrs:{gap:"400"}},[a("div",{staticClass:"d-datepicker__hd"},[a("month-year-picker",{ref:"monthYearPicker",attrs:{locale:e.locale,"prev-month-label":e.prevMonthLabel,"next-month-label":e.nextMonthLabel,"prev-year-label":e.prevYearLabel,"next-year-label":e.nextYearLabel,"change-to-label":e.changeToLabel,"selected-date":e.selectedDate},on:{"calendar-days":e.updateCalendarDays,"focus-first-day":function(r){return e.$refs.calendar.focusFirstDay()},"focus-last-day":function(r){return e.$refs.calendar.focusLastDay()},"close-datepicker":function(r){return e.$emit("close-datepicker")}}})],1),a("div",{staticClass:"d-datepicker__bd"},[a("calendar",{ref:"calendar",attrs:{locale:e.locale,"calendar-days":e.calendarDays,"select-day-label":e.selectDayLabel},on:{"select-date":function(r){return e.$emit("selected-date",r)},"focus-month-year-picker":function(r){return e.$refs.monthYearPicker.focusMonthYearPicker()},"close-datepicker":function(r){return e.$emit("close-datepicker")},"go-to-next-month":function(r){return e.$refs.monthYearPicker.goToNextMonth()},"go-to-prev-month":function(r){return e.$refs.monthYearPicker.goToPrevMonth()}}})],1)])},z=[],K=h.n(A,I,z,!1,null,null,null,null);const E=K.exports;function W(t,e="default"){return new Intl.DateTimeFormat(e,{weekday:"long",year:"numeric",month:"long",day:"numeric"}).format(t)}function U(t,e="default"){return new Intl.DateTimeFormat(e,{year:"numeric",month:"long",day:"numeric"}).format(t)}function H(t,e="default",a=!0){const r=a?{weekday:"short",year:"numeric",month:"short",day:"numeric"}:{year:"numeric",month:"short",day:"numeric"};return new Intl.DateTimeFormat(e,r).format(t)}function J(t,e="default",a=!1){const r=a?"short":"long";return new Intl.DateTimeFormat(e,{month:r,day:"numeric"}).format(t)}function j(t,e="default"){return new Intl.DateTimeFormat(e,{year:"2-digit",month:"2-digit",day:"2-digit"}).format(t)}exports.DtDatepicker=E;exports.formatLong=W;exports.formatMedium=U;exports.formatNoYear=J;exports.formatNumerical=j;exports.formatShort=H;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dateFns = require("date-fns");
+const lib_stack = require("./stack.cjs");
+const lib_tooltip = require("./tooltip.cjs");
+const lib_button = require("./button.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_icon = require("./icon.cjs");
+require("../chunks/stack_constants-SMzMWnAQ.js");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("tippy.js");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("vue");
+require("./lazy-show.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue2");
+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);
+};
+const _sfc_main$2 = {
+  name: "DtDatepickerMonthYearPicker",
+  components: { DtButton: lib_button.DtButton, DtTooltip: lib_tooltip.DtTooltip, DtStack: lib_stack.DtStack, DtIcon: lib_icon.DtIcon },
+  props: {
+    locale: {
+      type: String,
+      required: true
+    },
+    prevMonthLabel: {
+      type: String,
+      required: true
+    },
+    nextMonthLabel: {
+      type: String,
+      required: true
+    },
+    prevYearLabel: {
+      type: String,
+      required: true
+    },
+    nextYearLabel: {
+      type: String,
+      required: true
+    },
+    changeToLabel: {
+      type: String,
+      required: true
+    },
+    selectedDate: {
+      type: Date,
+      required: true
+    }
+  },
+  emits: [
+    /**
+     * Will retrieve the calendar days of the given date
+     *
+     * @event calendar-days
+     * @type {Array}
+     */
+    "calendar-days",
+    /**
+     * Will focus first day in calendar
+     *
+     * @event focus-first-day
+     */
+    "focus-first-day",
+    /**
+     * Will focus last day in calendar
+     *
+     * @event focus-last-day
+     */
+    "focus-last-day",
+    /**
+     * Will close the datepicker
+     *
+     * @event close-datepicker
+     */
+    "close-datepicker"
+  ],
+  data() {
+    return {
+      selectMonth: dateFns.getMonth(this.selectedDate),
+      selectYear: dateFns.getYear(this.selectedDate),
+      highlightedDay: null,
+      focusPicker: 0,
+      focusRefs: [],
+      refNames: ["prevYearButtonRef", "prevMonthButtonRef", "nextMonthButtonRef", "nextYearButtonRef"]
+    };
+  },
+  computed: {
+    // Get days for the currently selected month and year and highlight the selected day
+    calendarDays() {
+      return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);
+    },
+    formattedMonth() {
+      return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);
+    }
+  },
+  watch: {
+    selectMonth: {
+      handler() {
+        this.highlightDay();
+        this.$emit("calendar-days", this.calendarDays);
+      },
+      immediate: true
+    },
+    selectYear: {
+      handler() {
+        this.highlightDay();
+        this.$emit("calendar-days", this.calendarDays);
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.setButtonsRef();
+    this.focusMonthYearPicker();
+  },
+  methods: {
+    setButtonsRef() {
+      this.focusRefs = this.refNames.map((refName) => this.$refs[refName]);
+    },
+    focusMonthYearPicker() {
+      this.focusPicker = 0;
+      this.focusRefs[0].$el.focus();
+    },
+    handleKeyDown(event) {
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          if (this.focusPicker === 0) {
+            this.focusPicker = 3;
+            this.focusRefs[this.focusPicker].$el.focus();
+          } else {
+            this.focusPicker--;
+            this.focusRefs[this.focusPicker].$el.focus();
+          }
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          if (this.focusPicker === 3) {
+            this.focusPicker = 0;
+            this.focusRefs[this.focusPicker].$el.focus();
+          } else {
+            this.focusPicker++;
+            this.focusRefs[this.focusPicker].$el.focus();
+          }
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          this.$emit("focus-first-day");
+          break;
+        case "Tab":
+          event.preventDefault();
+          this.$emit("focus-first-day");
+          break;
+        case "Escape":
+          this.$emit("close-datepicker");
+          break;
+      }
+    },
+    highlightDay() {
+      const year = dateFns.getYear(this.selectedDate);
+      const month = dateFns.getMonth(this.selectedDate);
+      if (year !== this.selectYear || month !== this.selectMonth) {
+        this.highlightedDay = null;
+      } else {
+        this.highlightedDay = dateFns.getDate(this.selectedDate);
+      }
+    },
+    changeMonth(value) {
+      if (this.selectMonth === 0 && value === -1 || this.selectMonth === 11 && value === 1) {
+        this.selectYear += value;
+      }
+      const initialDate = dateFns.set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });
+      const newDate = value === 1 ? dateFns.addMonths(initialDate, 1) : dateFns.subMonths(initialDate, 1);
+      this.selectMonth = dateFns.getMonth(newDate);
+    },
+    changeYear(value) {
+      this.selectYear = this.selectYear + value;
+    },
+    goToNextMonth() {
+      this.changeMonth(1);
+    },
+    goToPrevMonth() {
+      this.changeMonth(-1);
+    }
+  }
+};
+var _sfc_render$2 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-stack", { staticClass: "d-datepicker__month-year", attrs: { "direction": "row", "gap": "300" } }, [_c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.prevYearLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[0], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevYearButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevYearLabel} ${_vm.selectYear - 1}` }, on: { "click": function($event) {
+      return _vm.changeYear(-1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon", { attrs: { "name": "chevrons-left", "size": "200" } })], 1)];
+  }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.prevMonthLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[1], staticClass: "d-datepicker__nav-btn", attrs: { "id": "prevMonthButton", "size": "xs", "importance": "clear", "kind": "muted", "circle": true, "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.prevMonthLabel} ${_vm.formattedMonth(_vm.selectMonth - 1)}` }, on: { "click": function($event) {
+      return _vm.changeMonth(-1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon", { attrs: { "name": "chevron-left", "size": "200" } })], 1)];
+  }, proxy: true }]) })], 1), _c("div", { staticClass: "d-datepicker__month-year-title", attrs: { "id": "calendar-heading" } }, [_vm._v(" " + _vm._s(_vm.formattedMonth(_vm.selectMonth)) + " " + _vm._s(_vm.selectYear) + " ")]), _c("dt-stack", { staticClass: "d-datepicker__nav", attrs: { "as": "nav", "direction": "row", "gap": "200" } }, [_c("dt-tooltip", { attrs: { "message": _vm.nextMonthLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[2], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextMonthButton", "size": "xs", "importance": "clear", "circle": true, "kind": "muted", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextMonthLabel} ${_vm.formattedMonth(_vm.selectMonth + 1)}` }, on: { "click": function($event) {
+      return _vm.changeMonth(1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon", { attrs: { "name": "chevron-right", "size": "200" } })], 1)];
+  }, proxy: true }]) }), _c("dt-tooltip", { attrs: { "message": _vm.nextYearLabel, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { ref: _vm.refNames[3], staticClass: "d-datepicker__nav-btn", attrs: { "id": "nextYearButton", "size": "xs", "kind": "muted", "circle": true, "importance": "clear", "type": "button", "aria-label": `${_vm.changeToLabel} ${_vm.nextYearLabel} ${_vm.selectYear + 1}` }, on: { "click": function($event) {
+      return _vm.changeYear(1);
+    }, "keydown": function($event) {
+      return _vm.handleKeyDown($event);
+    } } }, [_c("dt-icon", { attrs: { "name": "chevrons-right", "size": "200" } })], 1)];
+  }, proxy: true }]) })], 1)], 1);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const MonthYearPicker = __component__$2.exports;
+const _sfc_main$1 = {
+  name: "DtDatepickerCalendar",
+  components: { DtButton: lib_button.DtButton },
+  props: {
+    calendarDays: {
+      type: Array,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
+    selectDayLabel: {
+      type: String,
+      required: true
+    }
+  },
+  emits: [
+    /**
+     * Event fired when a date is selected
+     *
+     * @event select-date
+     * @type {Date}
+     */
+    "select-date",
+    /**
+     * Will focus the month and year picker
+     *
+     * @event focus-month-year-picker
+     */
+    "focus-month-year-picker",
+    /**
+     * Will close the datepicker
+     *
+     * @event close-datepicker
+     */
+    "close-datepicker"
+  ],
+  data() {
+    return {
+      // local selectedDay to override the received by props calendarDays
+      selectedDay: null,
+      focusDay: 0,
+      daysRef: []
+    };
+  },
+  computed: {
+    weekDays() {
+      return getWeekDayNames(this.locale, WEEK_START);
+    }
+  },
+  watch: {
+    calendarDays() {
+      this.focusDay = 0;
+      this.selectedDay = null;
+      this.daysRef = [];
+      this.$nextTick(() => {
+        this.daysRef = [];
+        this.setDayRef();
+      });
+    }
+  },
+  methods: {
+    dayAriaLabel(day) {
+      return `${this.selectDayLabel} ${day.text} ${dateFns.format(day.value, MONTH_FORMAT)} ${dateFns.getYear(day.value)}`;
+    },
+    setDayRef(el, day) {
+      this.calendarDays.forEach((week, weekIndex) => {
+        week.days.forEach((day2, dayIndex) => {
+          const refKey = `buttonRef_${weekIndex}_${dayIndex}`;
+          const dayButton = this.$refs[refKey];
+          if (dayButton && day2.currentMonth) {
+            this.daysRef.push({ el: dayButton[0], day: day2 });
+          }
+        });
+      });
+    },
+    handleKeyDown(event) {
+      switch (event.key) {
+        case "ArrowUp":
+          event.preventDefault();
+          this.focusDay -= 7;
+          try {
+            this.daysRef[this.focusDay].el.$el.focus();
+          } catch (error) {
+            const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);
+            this.$emit("go-to-prev-month");
+            this.$nextTick(() => {
+              this.setDayRef();
+              this.daysRef[prevFocusDate - 1].el.$el.focus();
+              this.focusDay += prevFocusDate - 1;
+            });
+          }
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          this.focusDay += 7;
+          try {
+            this.daysRef[this.focusDay].el.$el.focus();
+          } catch (error) {
+            const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);
+            this.$emit("go-to-next-month");
+            this.$nextTick(() => {
+              this.setDayRef();
+              this.daysRef[nextFocusDate - 1].el.$el.focus();
+              this.focusDay += nextFocusDate - 1;
+            });
+          }
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          if (this.focusDay > 0) {
+            this.focusDay -= 1;
+            this.daysRef[this.focusDay].el.$el.focus();
+          } else {
+            this.$emit("go-to-prev-month");
+            this.$nextTick(() => {
+              this.focusLastDay();
+            });
+          }
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          if (this.focusDay < this.daysRef.length - 1) {
+            this.focusDay += 1;
+            this.daysRef[this.focusDay].el.$el.focus();
+          } else {
+            this.$emit("go-to-next-month");
+            this.$nextTick(() => {
+              this.focusFirstDay();
+            });
+          }
+          break;
+        case "Tab":
+          event.preventDefault();
+          this.$emit("focus-month-year-picker");
+          break;
+        case "Escape":
+          this.$emit("close-datepicker");
+          break;
+      }
+    },
+    focusFirstDay() {
+      this.focusDay = 0;
+      this.$nextTick(() => {
+        this.daysRef[this.focusDay].el.$el.focus();
+      });
+    },
+    focusLastDay() {
+      this.$nextTick(() => {
+        this.focusDay = this.daysRef.length - 1;
+        this.daysRef[this.focusDay].el.$el.focus();
+      });
+    },
+    selectDay(day) {
+      if (!day.currentMonth) {
+        return;
+      }
+      this.selectedDay = day.text;
+      this.$emit("select-date", day.value);
+    }
+  }
+};
+var _sfc_render$1 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("table", { staticClass: "d-datepicker__calendar", attrs: { "aria-labelledby": "calendar-heading" } }, [_c("thead", [_c("tr", _vm._l(_vm.weekDays, function(day) {
+    return _c("th", { key: day, staticClass: "d-datepicker__cell d-datepicker__cell--header", attrs: { "scope": "col" } }, [_c("span", { staticClass: "d-datepicker__weekday", attrs: { "title": day, "aria-label": day } }, [_vm._v(" " + _vm._s(day))])]);
+  }), 0)]), _c("tbody", _vm._l(_vm.calendarDays, function(week, indexWeek) {
+    return _c("tr", { key: indexWeek }, _vm._l(week.days, function(day, indexDays) {
+      return _c("td", { key: indexWeek + indexDays, staticClass: "d-datepicker__cell", attrs: { "role": "listbox" } }, [_c("dt-button", { ref: `buttonRef_${indexWeek}_${indexDays}`, refInFor: true, staticClass: "d-datepicker__day", class: {
+        "d-datepicker__day--disabled": !day.currentMonth,
+        "d-datepicker__day--selected": _vm.selectedDay ? day.text === _vm.selectedDay && day.currentMonth : day.selected
+      }, attrs: { "circle": true, "size": "sm", "importance": "clear", "disabled": !day.currentMonth, "type": "button", "aria-selected": !!_vm.selectedDay ? day.text === _vm.selectedDay && day.currentMonth : day.selected, "aria-label": _vm.dayAriaLabel(day), "role": "option" }, on: { "click": function($event) {
+        return _vm.selectDay(day);
+      }, "keydown": function($event) {
+        return _vm.handleKeyDown($event);
+      } } }, [_vm._v(" " + _vm._s(day.text) + " ")])], 1);
+    }), 0);
+  }), 0)]);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const Calendar = __component__$1.exports;
+const _sfc_main = {
+  name: "DtDatepicker",
+  components: { DtStack: lib_stack.DtStack, MonthYearPicker, Calendar },
+  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"
+  ],
+  data() {
+    return {
+      calendarDays: []
+    };
+  },
+  methods: {
+    updateCalendarDays(days) {
+      this.calendarDays = days;
+    }
+  }
+};
+var _sfc_render = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-stack", { staticClass: "d-datepicker", attrs: { "gap": "400" } }, [_c("div", { staticClass: "d-datepicker__hd" }, [_c("month-year-picker", { ref: "monthYearPicker", attrs: { "locale": _vm.locale, "prev-month-label": _vm.prevMonthLabel, "next-month-label": _vm.nextMonthLabel, "prev-year-label": _vm.prevYearLabel, "next-year-label": _vm.nextYearLabel, "change-to-label": _vm.changeToLabel, "selected-date": _vm.selectedDate }, on: { "calendar-days": _vm.updateCalendarDays, "focus-first-day": function($event) {
+    return _vm.$refs.calendar.focusFirstDay();
+  }, "focus-last-day": function($event) {
+    return _vm.$refs.calendar.focusLastDay();
+  }, "close-datepicker": function($event) {
+    return _vm.$emit("close-datepicker");
+  } } })], 1), _c("div", { staticClass: "d-datepicker__bd" }, [_c("calendar", { ref: "calendar", attrs: { "locale": _vm.locale, "calendar-days": _vm.calendarDays, "select-day-label": _vm.selectDayLabel }, on: { "select-date": function($event) {
+    return _vm.$emit("selected-date", $event);
+  }, "focus-month-year-picker": function($event) {
+    return _vm.$refs.monthYearPicker.focusMonthYearPicker();
+  }, "close-datepicker": function($event) {
+    return _vm.$emit("close-datepicker");
+  }, "go-to-next-month": function($event) {
+    return _vm.$refs.monthYearPicker.goToNextMonth();
+  }, "go-to-prev-month": function($event) {
+    return _vm.$refs.monthYearPicker.goToPrevMonth();
+  } } })], 1)]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const datepicker = __component__.exports;
+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 = datepicker;
+exports.formatLong = formatLong;
+exports.formatMedium = formatMedium;
+exports.formatNoYear = formatNoYear;
+exports.formatNumerical = formatNumerical;
+exports.formatShort = formatShort;
 //# sourceMappingURL=datepicker.cjs.map