@dialpad/dialtone 9.126.6 → 9.127.1

package/dist/vue3/lib/datepicker/datepicker.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("../../common/utils/index.cjs"),L=require("@dialpad/dialtone-icons/vue3"),$=require("./datepicker-constants.cjs"),k=require("date-fns"),x=require("./utils.cjs"),N=require("../stack/stack.cjs"),w=require("../tooltip/tooltip.cjs"),M=require("../button/button.cjs");function F(r,c){const s=e.ref(k.getMonth(r.selectedDate)),t=e.ref(k.getYear(r.selectedDate)),n=e.ref(null),o=e.ref(0),d=e.ref([]),b=e.computed(()=>x.getCalendarDays(s.value,t.value,n.value)),p=e.computed(()=>(a,h,T)=>x.formatMonth(a,h,T));e.watch(s,()=>{u(),c("calendar-days",b.value)},{immediate:!0}),e.watch(t,()=>{u(),c("calendar-days",b.value)},{immediate:!0});function m(a){d.value.includes(a)||d.value.push(a)}function y(){f.returnFirstEl(d.value[0].$el).focus()}function g(a){switch(a.key){case"ArrowLeft":a.preventDefault(),o.value===0?(o.value=3,f.returnFirstEl(d.value[o.value].$el).focus()):(o.value--,f.returnFirstEl(d.value[o.value].$el).focus());break;case"ArrowRight":a.preventDefault(),o.value===3?(o.value=0,f.returnFirstEl(d.value[o.value].$el).focus()):(o.value++,f.returnFirstEl(d.value[o.value].$el).focus());break;case"ArrowDown":a.preventDefault(),c("focus-first-day");break;case"Tab":a.preventDefault(),c("focus-first-day");break;case"Escape":c("close-datepicker");break}}function u(){const a=k.getYear(r.selectedDate),h=k.getMonth(r.selectedDate);a!==t.value||h!==s.value?n.value=null:n.value=k.getDate(r.selectedDate)}function v(a){(s.value===0&&a===-1||s.value===11&&a===1)&&(t.value+=a);const h=k.set(r.selectedDate,{month:s.value,year:t.value}),T=a===1?k.addMonths(h,1):k.subMonths(h,1);s.value=k.getMonth(T)}function i(a){t.value=t.value+a}function D(){v(1)}function l(){v(-1)}return{selectMonth:s,selectYear:t,formattedMonth:p,setDayRef:m,focusMonthYearPicker:y,handleKeyDown:g,changeMonth:v,changeYear:i,goToNextMonth:D,goToPrevMonth:l}}const C={id:"calendar-heading",class:"d-datepicker__month-year-title"},E={__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(r,{expose:c,emit:s}){const t=r,n=s,{selectMonth:o,selectYear:d,formattedMonth:b,setDayRef:p,focusMonthYearPicker:m,handleKeyDown:y,changeMonth:g,changeYear:u,goToNextMonth:v,goToPrevMonth:i}=F(t,n);return e.onMounted(()=>{m()}),c({focusMonthYearPicker:m,goToNextMonth:v,goToPrevMonth:i}),(D,l)=>(e.openBlock(),e.createBlock(e.unref(N.default),{direction:"row",class:"d-datepicker__month-year",gap:"300"},{default:e.withCtx(()=>[e.createVNode(e.unref(N.default),{as:"nav",direction:"row",gap:"200",class:"d-datepicker__nav"},{default:e.withCtx(()=>[e.createVNode(e.unref(w.default),{message:r.prevYearLabel,placement:"top","fallback-placements":["top-start","auto"]},{anchor:e.withCtx(()=>[e.createVNode(e.unref(M.default),{id:"prevYearButton",ref:a=>{a&&e.unref(p)(a)},size:"xs",importance:"clear",kind:"muted",circle:!0,class:"d-datepicker__nav-btn",type:"button","aria-label":`${r.changeToLabel} ${r.prevYearLabel} ${e.unref(d)-1}`,onClick:l[0]||(l[0]=a=>e.unref(u)(-1)),onKeydown:l[1]||(l[1]=a=>e.unref(y)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(L.DtIconChevronsLeft),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"]),e.createVNode(e.unref(w.default),{message:r.prevMonthLabel,placement:"top","fallback-placements":["top-end","auto"]},{anchor:e.withCtx(()=>[e.createVNode(e.unref(M.default),{id:"prevMonthButton",ref:a=>{a&&e.unref(p)(a)},size:"xs",importance:"clear",kind:"muted",circle:!0,class:"d-datepicker__nav-btn",type:"button","aria-label":`${r.changeToLabel} ${r.prevMonthLabel} ${e.unref(b)(e.unref(o)-1,e.unref($.INTL_MONTH_FORMAT),r.locale)}`,onClick:l[2]||(l[2]=a=>e.unref(g)(-1)),onKeydown:l[3]||(l[3]=a=>e.unref(y)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(L.DtIconChevronLeft),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"])]),_:1}),e.createElementVNode("div",C,e.toDisplayString(e.unref(b)(e.unref(o),e.unref($.INTL_MONTH_FORMAT),r.locale))+" "+e.toDisplayString(e.unref(d)),1),e.createVNode(e.unref(N.default),{as:"nav",direction:"row",gap:"200",class:"d-datepicker__nav"},{default:e.withCtx(()=>[e.createVNode(e.unref(w.default),{message:r.nextMonthLabel,placement:"top","fallback-placements":["top-start","auto"]},{anchor:e.withCtx(()=>[e.createVNode(e.unref(M.default),{id:"nextMonthButton",ref:a=>{a&&e.unref(p)(a)},size:"xs",importance:"clear",kind:"muted",circle:!0,class:"d-datepicker__nav-btn",type:"button","aria-label":`${r.changeToLabel} ${r.nextMonthLabel} ${e.unref(b)(e.unref(o)+1,e.unref($.INTL_MONTH_FORMAT),r.locale)}`,onClick:l[4]||(l[4]=a=>e.unref(g)(1)),onKeydown:l[5]||(l[5]=a=>e.unref(y)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(L.DtIconChevronRight),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"]),e.createVNode(e.unref(w.default),{message:r.nextYearLabel,placement:"top","fallback-placements":["top-end","auto"]},{anchor:e.withCtx(()=>[e.createVNode(e.unref(M.default),{id:"nextYearButton",ref:a=>{a&&e.unref(p)(a)},size:"xs",importance:"clear",kind:"muted",circle:!0,class:"d-datepicker__nav-btn",type:"button","aria-label":`${r.changeToLabel} ${r.nextYearLabel} ${e.unref(d)+1}`,onClick:l[6]||(l[6]=a=>e.unref(u)(1)),onKeydown:l[7]||(l[7]=a=>e.unref(y)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(L.DtIconChevronsRight),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"])]),_:1})]),_:1}))}};function Y(r,c){const s=e.ref(null),t=e.ref(0),n=e.ref([]),o=e.computed(()=>x.getWeekDayNames(r.locale,$.WEEK_START));e.watch(()=>r.calendarDays,()=>{t.value=0,n.value=[],s.value=null});function d(u){return`${r.selectDayLabel} ${u.text} ${k.format(u.value,$.MONTH_FORMAT)} ${k.getYear(u.value)}`}function b(u,v){!n.value.some(i=>i.el===u)&&v.currentMonth&&n.value.push({el:u,day:v})}function p(u){switch(u.key){case"ArrowUp":u.preventDefault(),t.value-=7;try{f.returnFirstEl(n.value[t.value].el.$el).focus()}catch{const i=x.calculatePrevFocusDate(n.value[t.value+7].day.value);c("go-to-prev-month"),e.nextTick(()=>{f.returnFirstEl(n.value[i-1].el.$el).focus(),t.value+=i-1})}break;case"ArrowDown":u.preventDefault(),t.value+=7;try{f.returnFirstEl(n.value[t.value].el.$el).focus()}catch{const i=x.calculateNextFocusDate(n.value[t.value-7].day.value);c("go-to-next-month"),e.nextTick(()=>{f.returnFirstEl(n.value[i-1].el.$el).focus(),t.value+=i-1})}break;case"ArrowLeft":u.preventDefault(),t.value>0?(t.value-=1,f.returnFirstEl(n.value[t.value].el.$el).focus()):(c("go-to-prev-month"),y());break;case"ArrowRight":u.preventDefault(),t.value<n.value.length-1?(t.value+=1,f.returnFirstEl(n.value[t.value].el.$el).focus()):(c("go-to-next-month"),m());break;case"Tab":u.preventDefault(),c("focus-month-year-picker");break;case"Escape":c("close-datepicker");break}}function m(){t.value=0,e.nextTick(()=>{f.returnFirstEl(n.value[t.value].el.$el).focus()})}function y(){e.nextTick(()=>{t.value=n.value.length-1,f.returnFirstEl(n.value[t.value].el.$el).focus()})}function g(u){u.currentMonth&&(s.value=u.text,c("select-date",u.value))}return{selectedDay:s,weekDays:o,dayAriaLabel:d,setDayRef:b,handleKeyDown:p,focusFirstDay:m,selectDay:g}}const q={class:"d-datepicker__calendar","aria-labelledby":"calendar-heading"},V=["title","aria-label"],S={__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(r,{expose:c,emit:s}){const t=r,n=s,{selectedDay:o,weekDays:d,dayAriaLabel:b,setDayRef:p,handleKeyDown:m,focusFirstDay:y,selectDay:g}=Y(t,n);return c({focusFirstDay:y}),(u,v)=>(e.openBlock(),e.createElementBlock("table",q,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),i=>(e.openBlock(),e.createElementBlock("th",{key:i,scope:"col",class:"d-datepicker__cell d-datepicker__cell--header"},[e.createElementVNode("span",{class:"d-datepicker__weekday",title:i,"aria-label":i},e.toDisplayString(i),9,V)]))),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.calendarDays,(i,D)=>(e.openBlock(),e.createElementBlock("tr",{key:D},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.days,(l,a)=>(e.openBlock(),e.createElementBlock("td",{key:D+a,class:"d-datepicker__cell",role:"listbox"},[e.createVNode(e.unref(M.default),{ref_for:!0,ref:h=>{h&&e.unref(p)(h,l)},class:e.normalizeClass(["d-datepicker__day",{"d-datepicker__day--disabled":!l.currentMonth,"d-datepicker__day--selected":e.unref(o)?l.text===e.unref(o)&&l.currentMonth:l.selected}]),circle:!0,size:"sm",importance:"clear",disabled:!l.currentMonth,type:"button","aria-selected":e.unref(o)?l.text===e.unref(o)&&l.currentMonth:l.selected,"aria-label":e.unref(b)(l),role:"option",onClick:h=>e.unref(g)(l),onKeydown:v[0]||(v[0]=h=>e.unref(m)(h))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.text),1)]),_:2},1032,["disabled","class","aria-selected","aria-label","onClick"])]))),128))]))),128))])]))}},B={class:"d-datepicker__hd"},P={class:"d-datepicker__bd"},A={__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(r){const c=e.ref([]);function s(t){c.value=t}return e.onMounted(()=>{const t=e.getCurrentInstance();f.warnIfUnmounted(f.returnFirstEl(t.proxy.$el),"datepicker")}),(t,n)=>(e.openBlock(),e.createBlock(e.unref(N.default),{class:"d-datepicker",gap:"400"},{default:e.withCtx(()=>[e.createElementVNode("div",B,[e.createVNode(E,{ref:"monthYearPicker",locale:r.locale,"prev-month-label":r.prevMonthLabel,"next-month-label":r.nextMonthLabel,"prev-year-label":r.prevYearLabel,"next-year-label":r.nextYearLabel,"change-to-label":r.changeToLabel,"selected-date":r.selectedDate,onCalendarDays:s,onFocusFirstDay:n[0]||(n[0]=o=>t.$refs.calendar.focusFirstDay()),onFocusLastDay:n[1]||(n[1]=o=>t.$refs.calendar.focusLastDay()),onCloseDatepicker:n[2]||(n[2]=o=>t.$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",P,[e.createVNode(S,{ref:"calendar",locale:r.locale,"calendar-days":c.value,"select-day-label":r.selectDayLabel,onSelectDate:n[3]||(n[3]=o=>t.$emit("selected-date",o)),onFocusMonthYearPicker:n[4]||(n[4]=o=>t.$refs.monthYearPicker.focusMonthYearPicker()),onCloseDatepicker:n[5]||(n[5]=o=>t.$emit("close-datepicker")),onGoToNextMonth:n[6]||(n[6]=o=>t.$refs.monthYearPicker.goToNextMonth()),onGoToPrevMonth:n[7]||(n[7]=o=>t.$refs.monthYearPicker.goToPrevMonth())},null,8,["locale","calendar-days","select-day-label"])])]),_:1}))}};exports.default=A;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),A=require("@dialpad/dialtone-icons/vue3"),m=require("date-fns"),$=require("./utils.cjs"),x=require("./datepicker-constants.cjs"),v=require("../../common/utils/index.cjs"),L=require("../../localization/index.cjs"),M=require("../stack/stack.cjs"),C=require("../tooltip/tooltip.cjs"),N=require("../button/button.cjs");function P(i,o){const u=e.ref(m.getMonth(i.selectedDate)),t=e.ref(m.getYear(i.selectedDate)),r=e.ref(null),n=e.ref(0),D=e.ref([]),f=new L.DialtoneLocalization,y=e.computed(()=>$.getCalendarDays(u.value,t.value,r.value));e.watch(u,()=>{l(),o("calendar-days",y.value)},{immediate:!0}),e.watch(t,()=>{l(),o("calendar-days",y.value)},{immediate:!0});function k(a){return $.formatMonth(a,x.INTL_MONTH_FORMAT,f.currentLocale)}function E(a){D.value.includes(a)||D.value.push(a)}function _(){v.returnFirstEl(D.value[0].$el).focus()}function b(a){switch(a.key){case"ArrowLeft":a.preventDefault(),n.value===0?(n.value=3,v.returnFirstEl(D.value[n.value].$el).focus()):(n.value--,v.returnFirstEl(D.value[n.value].$el).focus());break;case"ArrowRight":a.preventDefault(),n.value===3?(n.value=0,v.returnFirstEl(D.value[n.value].$el).focus()):(n.value++,v.returnFirstEl(D.value[n.value].$el).focus());break;case"ArrowDown":a.preventDefault(),o("focus-first-day");break;case"Tab":a.preventDefault(),o("focus-first-day");break;case"Escape":o("close-datepicker");break}}function l(){const a=m.getYear(i.selectedDate),g=m.getMonth(i.selectedDate);a!==t.value||g!==u.value?r.value=null:r.value=m.getDate(i.selectedDate)}function s(a){(u.value===0&&a===-1||u.value===11&&a===1)&&(t.value+=a);const g=m.set(i.selectedDate,{month:u.value,year:t.value}),R=a===1?m.addMonths(g,1):m.subMonths(g,1);u.value=m.getMonth(R)}function p(a){t.value=t.value+a}function d(){s(1)}function T(){s(-1)}function h(){return`${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${t.value-1}`}function w(){return`${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${k(u.value-1)}`}function I(){return`${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${t.value+1}`}function c(){return`${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${k(u.value+1)}`}return{selectMonth:u,selectYear:t,formattedMonth:k,setDayRef:E,focusMonthYearPicker:_,handleKeyDown:b,changeMonth:s,changeYear:p,goToNextMonth:d,goToPrevMonth:T,previousYearAriaLabel:h,previousMonthAriaLabel:w,nextYearAriaLabel:I,nextMonthAriaLabel:c}}const F={id:"calendar-heading",class:"d-datepicker__month-year-title"},O={__name:"month-year-picker",props:{selectedDate:{type:Date,required:!0}},emits:["calendar-days","focus-first-day","focus-last-day","close-datepicker"],setup(i,{expose:o,emit:u}){const t=i,r=u,n=new L.DialtoneLocalization,{selectMonth:D,selectYear:f,formattedMonth:y,setDayRef:k,focusMonthYearPicker:E,handleKeyDown:_,changeMonth:b,changeYear:l,goToNextMonth:s,goToPrevMonth:p,previousYearAriaLabel:d,previousMonthAriaLabel:T,nextMonthAriaLabel:h,nextYearAriaLabel:w}=P(t,r);return e.onMounted(()=>{E()}),o({focusMonthYearPicker:E,goToNextMonth:s,goToPrevMonth:p}),(I,c)=>(e.openBlock(),e.createBlock(e.unref(M.default),{class:"d-datepicker__month-year",direction:"row",gap:"300"},{default:e.withCtx(()=>[e.createVNode(e.unref(M.default),{as:"nav",class:"d-datepicker__nav",direction:"row",gap:"200"},{default:e.withCtx(()=>[e.createVNode(e.unref(C.default),{"fallback-placements":["top-start","auto"],message:e.unref(n).$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(N.default),{id:"prevYearButton",ref:a=>{a&&e.unref(k)(a)},"aria-label":e.unref(d)(),circle:!0,class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:c[0]||(c[0]=a=>e.unref(l)(-1)),onKeydown:c[1]||(c[1]=a=>e.unref(_)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(A.DtIconChevronsLeft),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"]),e.createVNode(e.unref(C.default),{"fallback-placements":["top-start","auto"],message:e.unref(n).$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(N.default),{id:"prevMonthButton",ref:a=>{a&&e.unref(k)(a)},"aria-label":e.unref(T)(),circle:!0,class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:c[2]||(c[2]=a=>e.unref(b)(-1)),onKeydown:c[3]||(c[3]=a=>e.unref(_)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(A.DtIconChevronLeft),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"])]),_:1}),e.createElementVNode("div",F,e.toDisplayString(e.unref(y)(e.unref(D)))+" "+e.toDisplayString(e.unref(f)),1),e.createVNode(e.unref(M.default),{as:"nav",class:"d-datepicker__nav",direction:"row",gap:"200"},{default:e.withCtx(()=>[e.createVNode(e.unref(C.default),{"fallback-placements":["top-end","auto"],message:e.unref(n).$t("DIALTONE_DATEPICKER_NEXT_MONTH"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(N.default),{id:"nextMonthButton",ref:a=>{a&&e.unref(k)(a)},"aria-label":e.unref(h)(),circle:!0,class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:c[4]||(c[4]=a=>e.unref(b)(1)),onKeydown:c[5]||(c[5]=a=>e.unref(_)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(A.DtIconChevronRight),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"]),e.createVNode(e.unref(C.default),{"fallback-placements":["top-end","auto"],message:e.unref(n).$t("DIALTONE_DATEPICKER_NEXT_YEAR"),placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(e.unref(N.default),{id:"nextYearButton",ref:a=>{a&&e.unref(k)(a)},"aria-label":e.unref(w)(),circle:!0,class:"d-datepicker__nav-btn",importance:"clear",kind:"muted",size:"xs",type:"button",onClick:c[6]||(c[6]=a=>e.unref(l)(1)),onKeydown:c[7]||(c[7]=a=>e.unref(_)(a))},{default:e.withCtx(()=>[e.createVNode(e.unref(A.DtIconChevronsRight),{size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"])]),_:1})]),_:1}))}};function V(i,o){const u=e.ref(null),t=e.ref(0),r=e.ref([]),n=new L.DialtoneLocalization,D=e.computed(()=>$.getWeekDayNames(i.locale,x.WEEK_START));e.watch(()=>i.calendarDays,()=>{t.value=0,r.value=[],u.value=null});function f(l){return n.$t("DIALTONE_DATEPICKER_SELECT_DAY")+` ${$.formatDate(l.value,x.INTL_MONTH_FORMAT,n.currentLocale)}`}function y(l,s){!r.value.some(p=>p.el===l)&&s.currentMonth&&r.value.push({el:l,day:s})}function k(l){switch(l.key){case"ArrowUp":l.preventDefault(),t.value-=7;try{v.returnFirstEl(r.value[t.value].el.$el).focus()}catch{const p=$.calculatePrevFocusDate(r.value[t.value+7].day.value);o("go-to-prev-month"),e.nextTick(()=>{v.returnFirstEl(r.value[p-1].el.$el).focus(),t.value+=p-1})}break;case"ArrowDown":l.preventDefault(),t.value+=7;try{v.returnFirstEl(r.value[t.value].el.$el).focus()}catch{const p=$.calculateNextFocusDate(r.value[t.value-7].day.value);o("go-to-next-month"),e.nextTick(()=>{v.returnFirstEl(r.value[p-1].el.$el).focus(),t.value+=p-1})}break;case"ArrowLeft":l.preventDefault(),t.value>0?(t.value-=1,v.returnFirstEl(r.value[t.value].el.$el).focus()):(o("go-to-prev-month"),_());break;case"ArrowRight":l.preventDefault(),t.value<r.value.length-1?(t.value+=1,v.returnFirstEl(r.value[t.value].el.$el).focus()):(o("go-to-next-month"),E());break;case"Tab":l.preventDefault(),o("focus-month-year-picker");break;case"Escape":o("close-datepicker");break}}function E(){t.value=0,e.nextTick(()=>{v.returnFirstEl(r.value[t.value].el.$el).focus()})}function _(){e.nextTick(()=>{t.value=r.value.length-1,v.returnFirstEl(r.value[t.value].el.$el).focus()})}function b(l){l.currentMonth&&(u.value=l.text,o("select-date",l.value))}return{selectedDay:u,weekDays:D,dayAriaLabel:f,setDayRef:y,handleKeyDown:k,focusFirstDay:E,selectDay:b}}const Y={class:"d-datepicker__calendar","aria-labelledby":"calendar-heading"},K=["title","aria-label"],B={__name:"calendar",props:{calendarDays:{type:Array,required:!0}},emits:["select-date","focus-month-year-picker","close-datepicker","go-to-next-month","go-to-prev-month"],setup(i,{expose:o,emit:u}){const t=i,r=u,{selectedDay:n,weekDays:D,dayAriaLabel:f,setDayRef:y,handleKeyDown:k,focusFirstDay:E,selectDay:_}=V(t,r);return o({focusFirstDay:E}),(b,l)=>(e.openBlock(),e.createElementBlock("table",Y,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(D),s=>(e.openBlock(),e.createElementBlock("th",{key:s,scope:"col",class:"d-datepicker__cell d-datepicker__cell--header"},[e.createElementVNode("span",{class:"d-datepicker__weekday",title:s,"aria-label":s},e.toDisplayString(s),9,K)]))),128))])]),e.createElementVNode("tbody",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.calendarDays,(s,p)=>(e.openBlock(),e.createElementBlock("tr",{key:p},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.days,(d,T)=>(e.openBlock(),e.createElementBlock("td",{key:p+T,class:"d-datepicker__cell",role:"listbox"},[e.createVNode(e.unref(N.default),{ref_for:!0,ref:h=>{h&&e.unref(y)(h,d)},class:e.normalizeClass(["d-datepicker__day",{"d-datepicker__day--disabled":!d.currentMonth,"d-datepicker__day--selected":e.unref(n)?d.text===e.unref(n)&&d.currentMonth:d.selected}]),circle:!0,size:"sm",importance:"clear",disabled:!d.currentMonth,type:"button","aria-selected":e.unref(n)?d.text===e.unref(n)&&d.currentMonth:d.selected,"aria-label":e.unref(f)(d),role:"option",onClick:h=>e.unref(_)(d),onKeydown:l[0]||(l[0]=h=>e.unref(k)(h))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(d.text),1)]),_:2},1032,["disabled","class","aria-selected","aria-label","onClick"])]))),128))]))),128))])]))}},z={class:"d-datepicker__hd"},S={class:"d-datepicker__bd"},q={__name:"datepicker",props:{selectedDate:{type:Date,default:()=>new Date}},emits:["selected-date","close-datepicker"],setup(i){const o=e.ref([]);function u(t){o.value=t}return e.onMounted(()=>{const t=e.getCurrentInstance();v.warnIfUnmounted(v.returnFirstEl(t.proxy.$el),"datepicker")}),(t,r)=>(e.openBlock(),e.createBlock(e.unref(M.default),{class:"d-datepicker",gap:"400"},{default:e.withCtx(()=>[e.createElementVNode("div",z,[e.createVNode(O,{ref:"monthYearPicker","selected-date":i.selectedDate,onCalendarDays:u,onFocusFirstDay:r[0]||(r[0]=n=>t.$refs.calendar.focusFirstDay()),onFocusLastDay:r[1]||(r[1]=n=>t.$refs.calendar.focusLastDay()),onCloseDatepicker:r[2]||(r[2]=n=>t.$emit("close-datepicker"))},null,8,["selected-date"])]),e.createElementVNode("div",S,[e.createVNode(B,{ref:"calendar","calendar-days":o.value,onSelectDate:r[3]||(r[3]=n=>t.$emit("selected-date",n)),onFocusMonthYearPicker:r[4]||(r[4]=n=>t.$refs.monthYearPicker.focusMonthYearPicker()),onCloseDatepicker:r[5]||(r[5]=n=>t.$emit("close-datepicker")),onGoToNextMonth:r[6]||(r[6]=n=>t.$refs.monthYearPicker.goToNextMonth()),onGoToPrevMonth:r[7]||(r[7]=n=>t.$refs.monthYearPicker.goToPrevMonth())},null,8,["calendar-days"])])]),_:1}))}};exports.default=q;
 //# sourceMappingURL=datepicker.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"datepicker.cjs","sources":["../../../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"],"sourcesContent":["import { computed, ref, watch } from 'vue';\nimport { addMonths, getDate, getMonth, getYear, set, subMonths } from 'date-fns';\nimport { formatMonth, getCalendarDays } from '@/components/datepicker/utils.js';\nimport { returnFirstEl } from '@/common/utils';\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    returnFirstEl(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          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value--;\n          returnFirstEl(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          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value++;\n          returnFirstEl(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        :fallback-placements=\"['top-start', 'auto']\"\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-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"prevMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"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-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        :fallback-placements=\"['top-start', 'auto']\"\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-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"nextYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"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-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 { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue3';\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';\nimport { returnFirstEl } from '@/common/utils';\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          returnFirstEl(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            returnFirstEl(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          returnFirstEl(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            returnFirstEl(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          returnFirstEl(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          returnFirstEl(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      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function focusLastDay () {\n    nextTick(() => {\n      focusDay.value = daysRef.value.length - 1;\n      returnFirstEl(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 { returnFirstEl, warnIfUnmounted } from '@/common/utils';\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport { DtStack } from '@/components/stack';\n\nimport { onMounted, ref, getCurrentInstance } 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\nonMounted(() => {\n  const instance = getCurrentInstance();\n  warnIfUnmounted(returnFirstEl(instance.proxy.$el), 'datepicker');\n});\n</script>\n"],"names":["useMonthYearPicker","props","emits","selectMonth","ref","getMonth","selectYear","getYear","highlightedDay","focusPicker","focusRefs","calendarDays","computed","getCalendarDays","formattedMonth","month","format","locale","formatMonth","watch","highlightDay","setDayRef","el","focusMonthYearPicker","returnFirstEl","handleKeyDown","event","year","getDate","changeMonth","value","initialDate","set","newDate","addMonths","subMonths","changeYear","goToNextMonth","goToPrevMonth","__props","__emit","onMounted","__expose","useCalendar","selectedDay","focusDay","daysRef","weekDays","getWeekDayNames","WEEK_START","dayAriaLabel","day","MONTH_FORMAT","prevFocusDate","calculatePrevFocusDate","nextTick","nextFocusDate","calculateNextFocusDate","focusLastDay","focusFirstDay","selectDay","updateCalendarDays","days","instance","getCurrentInstance","warnIfUnmounted"],"mappings":"oZAKO,SAASA,EAAoBC,EAAOC,EAAO,CAChD,MAAMC,EAAcC,EAAAA,IAAIC,EAAAA,SAASJ,EAAM,YAAY,CAAC,EAC9CK,EAAaF,EAAAA,IAAIG,EAAAA,QAAQN,EAAM,YAAY,CAAC,EAC5CO,EAAiBJ,MAAI,IAAI,EACzBK,EAAcL,MAAI,CAAC,EACnBM,EAAYN,MAAI,CAAA,CAAE,EAElBO,EAAeC,EAAAA,SAAS,IACrBC,EAAAA,gBAAgBV,EAAY,MAAOG,EAAW,MAAOE,EAAe,KAAK,CACjF,EAEKM,EAAiBF,EAAAA,SAAS,IACvB,CAACG,EAAOC,EAAQC,IAAWC,EAAW,YAACH,EAAOC,EAAQC,CAAM,CACpE,EAEDE,EAAK,MAAChB,EAAa,IAAM,CACvBiB,IACAlB,EAAM,gBAAiBS,EAAa,KAAK,CAC7C,EAAK,CAAE,UAAW,EAAI,CAAE,EAEtBQ,EAAK,MAACb,EAAY,IAAM,CACtBc,IACAlB,EAAM,gBAAiBS,EAAa,KAAK,CAC7C,EAAK,CAAE,UAAW,EAAI,CAAE,EAEtB,SAASU,EAAWC,EAAI,CACjBZ,EAAU,MAAM,SAASY,CAAE,GAC9BZ,EAAU,MAAM,KAAKY,CAAE,CAE1B,CAED,SAASC,GAAwB,CAC/BC,EAAa,cAACd,EAAU,MAAM,CAAC,EAAE,GAAG,EAAE,OACvC,CAED,SAASe,EAAeC,EAAO,CAC7B,OAAQA,EAAM,IAAG,CACf,IAAK,YACHA,EAAM,eAAc,EAChBjB,EAAY,QAAU,GACxBA,EAAY,MAAQ,EACpBe,gBAAcd,EAAU,MAAMD,EAAY,KAAK,EAAE,GAAG,EAAE,UAEtDA,EAAY,QACZe,gBAAcd,EAAU,MAAMD,EAAY,KAAK,EAAE,GAAG,EAAE,SAExD,MAEF,IAAK,aACHiB,EAAM,eAAc,EAChBjB,EAAY,QAAU,GACxBA,EAAY,MAAQ,EACpBe,gBAAcd,EAAU,MAAMD,EAAY,KAAK,EAAE,GAAG,EAAE,UAEtDA,EAAY,QACZe,gBAAcd,EAAU,MAAMD,EAAY,KAAK,EAAE,GAAG,EAAE,SAExD,MAEF,IAAK,YACHiB,EAAM,eAAc,EACpBxB,EAAM,iBAAiB,EACvB,MAEF,IAAK,MACHwB,EAAM,eAAc,EACpBxB,EAAM,iBAAiB,EACvB,MAEF,IAAK,SACHA,EAAM,kBAAkB,EACxB,KACH,CACF,CAED,SAASkB,GAAgB,CACvB,MAAMO,EAAOpB,EAAAA,QAAQN,EAAM,YAAY,EACjCc,EAAQV,EAAAA,SAASJ,EAAM,YAAY,EAErC0B,IAASrB,EAAW,OAASS,IAAUZ,EAAY,MACrDK,EAAe,MAAQ,KAEvBA,EAAe,MAAQoB,EAAAA,QAAQ3B,EAAM,YAAY,CAEpD,CAED,SAAS4B,EAAaC,EAAO,EAEtB3B,EAAY,QAAU,GAAK2B,IAAU,IAAQ3B,EAAY,QAAU,IAAM2B,IAAU,KACtFxB,EAAW,OAASwB,GAItB,MAAMC,EAAcC,EAAAA,IAAI/B,EAAM,aAAc,CAAE,MAAOE,EAAY,MAAO,KAAMG,EAAW,KAAO,CAAA,EAC1F2B,EAAUH,IAAU,EAAII,YAAUH,EAAa,CAAC,EAAII,EAAS,UAACJ,EAAa,CAAC,EAGlF5B,EAAY,MAAQE,WAAS4B,CAAO,CACrC,CAED,SAASG,EAAYN,EAAO,CAC1BxB,EAAW,MAAQA,EAAW,MAAQwB,CACvC,CAED,SAASO,GAAiB,CACxBR,EAAY,CAAC,CACd,CAED,SAASS,GAAiB,CACxBT,EAAY,EAAE,CACf,CAED,MAAO,CACL,YAAA1B,EACA,WAAAG,EACA,eAAAQ,EACA,UAAAO,EACA,qBAAAE,EACA,cAAAE,EACA,YAAAI,EACA,WAAAO,EACA,cAAAC,EACA,cAAAC,CACJ,CACA,ueCeA,MAAMrC,EAAQsC,EAoCRrC,EAAQsC,EA+BR,CACJ,YAAArC,EACA,WAAAG,EACA,eAAAQ,EACA,UAAAO,EACA,qBAAAE,EACA,cAAAE,EACA,YAAAI,EACA,WAAAO,EACA,cAAAC,EACA,cAAAC,CACF,EAAItC,EAAmBC,EAAOC,CAAK,EAEnCuC,OAAAA,EAAAA,UAAU,IAAM,CACdlB,GACF,CAAC,EAEDmB,EAAa,CACX,qBAAAnB,EACA,cAAAc,EACA,cAAAC,CACF,CAAC,29FClOM,SAASK,EAAa1C,EAAOC,EAAO,CACzC,MAAM0C,EAAcxC,MAAI,IAAI,EACtByC,EAAWzC,MAAI,CAAC,EAChB0C,EAAU1C,MAAI,CAAA,CAAE,EAEhB2C,EAAWnC,EAAAA,SAAS,IACjBoC,kBAAgB/C,EAAM,OAAQgD,EAAU,UAAA,CAChD,EAED9B,QAAM,IAAMlB,EAAM,aAAc,IAAM,CACpC4C,EAAS,MAAQ,EACjBC,EAAQ,MAAQ,GAChBF,EAAY,MAAQ,IACxB,CAAG,EAED,SAASM,EAAcC,EAAK,CAC1B,MAAO,GAAGlD,EAAM,cAAc,IAAIkD,EAAI,IAAI,IAAInC,EAAM,OAACmC,EAAI,MAAOC,EAAY,YAAA,CAAC,IAAI7C,EAAO,QAAC4C,EAAI,KAAK,CAAC,EACpG,CAED,SAAS9B,EAAWC,EAAI6B,EAAK,CACvB,CAACL,EAAQ,MAAM,KAAKK,GAAOA,EAAI,KAAO7B,CAAE,GAAK6B,EAAI,cACnDL,EAAQ,MAAM,KAAK,CAAE,GAAAxB,EAAI,IAAA6B,CAAK,CAAA,CAEjC,CAED,SAAS1B,EAAeC,EAAO,CAC7B,OAAQA,EAAM,IAAG,CACf,IAAK,UACHA,EAAM,eAAc,EACpBmB,EAAS,OAAS,EAClB,GAAI,CACFrB,gBAAcsB,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,OACrD,MAAe,CACd,MAAMQ,EAAgBC,EAAAA,uBAAuBR,EAAQ,MAAMD,EAAS,MAAQ,CAAC,EAAE,IAAI,KAAK,EACxF3C,EAAM,kBAAkB,EAExBqD,EAAAA,SAAS,IAAM,CACb/B,gBAAcsB,EAAQ,MAAMO,EAAgB,CAAC,EAAE,GAAG,GAAG,EAAE,QACvDR,EAAS,OAASQ,EAAgB,CAC9C,CAAW,CACF,CACD,MAEF,IAAK,YACH3B,EAAM,eAAc,EACpBmB,EAAS,OAAS,EAClB,GAAI,CACFrB,gBAAcsB,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,OACrD,MAAe,CACd,MAAMW,EAAgBC,EAAAA,uBAAuBX,EAAQ,MAAMD,EAAS,MAAQ,CAAC,EAAE,IAAI,KAAK,EACxF3C,EAAM,kBAAkB,EAExBqD,EAAAA,SAAS,IAAM,CACb/B,gBAAcsB,EAAQ,MAAMU,EAAgB,CAAC,EAAE,GAAG,GAAG,EAAE,QACvDX,EAAS,OAASW,EAAgB,CAC9C,CAAW,CACF,CACD,MAEF,IAAK,YACH9B,EAAM,eAAc,EAChBmB,EAAS,MAAQ,GACnBA,EAAS,OAAS,EAClBrB,gBAAcsB,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,UAGpD3C,EAAM,kBAAkB,EACxBwD,KAEF,MAEF,IAAK,aACHhC,EAAM,eAAc,EAChBmB,EAAS,MAAQC,EAAQ,MAAM,OAAS,GAC1CD,EAAS,OAAS,EAClBrB,gBAAcsB,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,UAGpD3C,EAAM,kBAAkB,EAExByD,KAEF,MAEF,IAAK,MACHjC,EAAM,eAAc,EACpBxB,EAAM,yBAAyB,EAC/B,MAEF,IAAK,SACHA,EAAM,kBAAkB,EACxB,KACH,CACF,CAED,SAASyD,GAAiB,CACxBd,EAAS,MAAQ,EAEjBU,EAAAA,SAAS,IAAM,CACb/B,gBAAcsB,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,OAC1D,CAAK,CACF,CAED,SAASa,GAAgB,CACvBH,EAAAA,SAAS,IAAM,CACbV,EAAS,MAAQC,EAAQ,MAAM,OAAS,EACxCtB,gBAAcsB,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,OAC1D,CAAK,CACF,CAED,SAASe,EAAWT,EAAK,CAClBA,EAAI,eAGTP,EAAY,MAAQO,EAAI,KACxBjD,EAAM,cAAeiD,EAAI,KAAK,EAC/B,CAED,MAAO,CACL,YAAAP,EACA,SAAAG,EACA,aAAAG,EACA,UAAA7B,EACA,cAAAI,EACA,cAAAkC,EACA,UAAAC,CACJ,CACA,yXCpEA,MAAM3D,EAAQsC,EAiBRrC,EAAQsC,EAsCR,CACJ,YAAAI,EACA,SAAAG,EACA,aAAAG,EACA,UAAA7B,EACA,cAAAI,EACA,cAAAkC,EACA,UAAAC,CACF,EAAIjB,EAAY1C,EAAOC,CAAK,EAE5B,OAAAwC,EAAa,CACX,cAAAiB,CACF,CAAC,w5DCmBD,MAAMhD,EAAeP,EAAAA,IAAI,CAAA,CAAE,EAE3B,SAASyD,EAAoBC,EAAM,CACjCnD,EAAa,MAAQmD,CACvB,CAEArB,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMsB,EAAWC,EAAAA,qBACjBC,EAAe,gBAACzC,EAAa,cAACuC,EAAS,MAAM,GAAG,EAAG,YAAY,CACjE,CAAC"}
+{"version":3,"file":"datepicker.cjs","sources":["../../../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"],"sourcesContent":["import { computed, ref, watch } from 'vue';\nimport { addMonths, getDate, getMonth, getYear, set, subMonths } from 'date-fns';\nimport { formatMonth, getCalendarDays } from '../utils.js';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\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  const i18n = new DialtoneLocalization();\n\n  const calendarDays = computed(() => {\n    return getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value);\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 formattedMonth (month) {\n    return formatMonth(month, INTL_MONTH_FORMAT, i18n.currentLocale);\n  }\n\n  function setDayRef (el) {\n    if (!focusRefs.value.includes(el)) {\n      focusRefs.value.push(el);\n    }\n  }\n\n  function focusMonthYearPicker () {\n    returnFirstEl(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          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value--;\n          returnFirstEl(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          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value++;\n          returnFirstEl(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  function previousYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')} ${selectYear.value - 1}`;\n  }\n\n  function previousMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')} ${formattedMonth(selectMonth.value - 1)}`;\n  }\n\n  function nextYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')} ${selectYear.value + 1}`;\n  }\n\n  function nextMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')} ${formattedMonth(selectMonth.value + 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    previousYearAriaLabel,\n    previousMonthAriaLabel,\n    nextYearAriaLabel,\n    nextMonthAriaLabel,\n  };\n}\n","<template>\n  <dt-stack\n    class=\"d-datepicker__month-year\"\n    direction=\"row\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousYearAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousMonthAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextMonthAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextYearAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-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 {\n  DtIconChevronLeft,\n  DtIconChevronsLeft,\n  DtIconChevronRight,\n  DtIconChevronsRight,\n} from '@dialpad/dialtone-icons/vue3';\nimport { DtStack } from '@/components/stack';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { onMounted } from 'vue';\nimport { useMonthYearPicker } from '../composables/useMonthYearPicker.js';\nimport { DialtoneLocalization } from '@/localization';\n\nconst props = defineProps({\n  selectedDate: {\n    type: Date,\n    required: true,\n  },\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 i18n = new DialtoneLocalization();\n\nconst {\n  selectMonth,\n  selectYear,\n  formattedMonth,\n  setDayRef,\n  focusMonthYearPicker,\n  handleKeyDown,\n  changeMonth,\n  changeYear,\n  goToNextMonth,\n  goToPrevMonth,\n  previousYearAriaLabel,\n  previousMonthAriaLabel,\n  nextMonthAriaLabel,\n  nextYearAriaLabel,\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, formatDate } from '../utils.js';\nimport { INTL_MONTH_FORMAT, WEEK_START } from '../datepicker_constants.js';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useCalendar (props, emits) {\n  const selectedDay = ref(null);\n  const focusDay = ref(0);\n  const daysRef = ref([]);\n  const i18n = new DialtoneLocalization();\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 i18n.$t('DIALTONE_DATEPICKER_SELECT_DAY') + ` ${formatDate(day.value, INTL_MONTH_FORMAT, i18n.currentLocale)}`;\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          returnFirstEl(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            returnFirstEl(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          returnFirstEl(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            returnFirstEl(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          returnFirstEl(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          returnFirstEl(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      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function focusLastDay () {\n    nextTick(() => {\n      focusDay.value = daysRef.value.length - 1;\n      returnFirstEl(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","<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 '../composables/useCalendar.js';\nimport { DtButton } from '@/components/button';\n\nconst props = defineProps({\n  calendarDays: {\n    type: Array,\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        :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        :calendar-days=\"calendarDays\"\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';\nimport { returnFirstEl, warnIfUnmounted } from '@/common/utils';\nimport { onMounted, ref, getCurrentInstance } from 'vue';\n\ndefineProps({\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\nonMounted(() => {\n  const instance = getCurrentInstance();\n  warnIfUnmounted(returnFirstEl(instance.proxy.$el), 'datepicker');\n});\n</script>\n"],"names":["useMonthYearPicker","props","emits","selectMonth","ref","getMonth","selectYear","getYear","highlightedDay","focusPicker","focusRefs","i18n","DialtoneLocalization","calendarDays","computed","getCalendarDays","watch","highlightDay","formattedMonth","month","formatMonth","INTL_MONTH_FORMAT","setDayRef","el","focusMonthYearPicker","returnFirstEl","handleKeyDown","event","year","getDate","changeMonth","value","initialDate","set","newDate","addMonths","subMonths","changeYear","goToNextMonth","goToPrevMonth","previousYearAriaLabel","previousMonthAriaLabel","nextYearAriaLabel","nextMonthAriaLabel","__props","__emit","onMounted","__expose","useCalendar","selectedDay","focusDay","daysRef","weekDays","getWeekDayNames","WEEK_START","dayAriaLabel","day","formatDate","prevFocusDate","calculatePrevFocusDate","nextTick","nextFocusDate","calculateNextFocusDate","focusLastDay","focusFirstDay","selectDay","updateCalendarDays","days","instance","getCurrentInstance","warnIfUnmounted"],"mappings":"8bAOO,SAASA,EAAoBC,EAAOC,EAAO,CAChD,MAAMC,EAAcC,EAAAA,IAAIC,EAAAA,SAASJ,EAAM,YAAY,CAAC,EAC9CK,EAAaF,EAAAA,IAAIG,EAAAA,QAAQN,EAAM,YAAY,CAAC,EAC5CO,EAAiBJ,MAAI,IAAI,EACzBK,EAAcL,MAAI,CAAC,EACnBM,EAAYN,MAAI,CAAA,CAAE,EAClBO,EAAO,IAAIC,EAAAA,qBAEXC,EAAeC,EAAAA,SAAS,IACrBC,EAAAA,gBAAgBZ,EAAY,MAAOG,EAAW,MAAOE,EAAe,KAAK,CACjF,EAEDQ,EAAK,MAACb,EAAa,IAAM,CACvBc,IACAf,EAAM,gBAAiBW,EAAa,KAAK,CAC7C,EAAK,CAAE,UAAW,EAAI,CAAE,EAEtBG,EAAK,MAACV,EAAY,IAAM,CACtBW,IACAf,EAAM,gBAAiBW,EAAa,KAAK,CAC7C,EAAK,CAAE,UAAW,EAAI,CAAE,EAEtB,SAASK,EAAgBC,EAAO,CAC9B,OAAOC,EAAW,YAACD,EAAOE,EAAiB,kBAAEV,EAAK,aAAa,CAChE,CAED,SAASW,EAAWC,EAAI,CACjBb,EAAU,MAAM,SAASa,CAAE,GAC9Bb,EAAU,MAAM,KAAKa,CAAE,CAE1B,CAED,SAASC,GAAwB,CAC/BC,EAAa,cAACf,EAAU,MAAM,CAAC,EAAE,GAAG,EAAE,OACvC,CAED,SAASgB,EAAeC,EAAO,CAC7B,OAAQA,EAAM,IAAG,CACf,IAAK,YACHA,EAAM,eAAc,EAChBlB,EAAY,QAAU,GACxBA,EAAY,MAAQ,EACpBgB,gBAAcf,EAAU,MAAMD,EAAY,KAAK,EAAE,GAAG,EAAE,UAEtDA,EAAY,QACZgB,gBAAcf,EAAU,MAAMD,EAAY,KAAK,EAAE,GAAG,EAAE,SAExD,MAEF,IAAK,aACHkB,EAAM,eAAc,EAChBlB,EAAY,QAAU,GACxBA,EAAY,MAAQ,EACpBgB,gBAAcf,EAAU,MAAMD,EAAY,KAAK,EAAE,GAAG,EAAE,UAEtDA,EAAY,QACZgB,gBAAcf,EAAU,MAAMD,EAAY,KAAK,EAAE,GAAG,EAAE,SAExD,MAEF,IAAK,YACHkB,EAAM,eAAc,EACpBzB,EAAM,iBAAiB,EACvB,MAEF,IAAK,MACHyB,EAAM,eAAc,EACpBzB,EAAM,iBAAiB,EACvB,MAEF,IAAK,SACHA,EAAM,kBAAkB,EACxB,KACH,CACF,CAED,SAASe,GAAgB,CACvB,MAAMW,EAAOrB,EAAAA,QAAQN,EAAM,YAAY,EACjCkB,EAAQd,EAAAA,SAASJ,EAAM,YAAY,EAErC2B,IAAStB,EAAW,OAASa,IAAUhB,EAAY,MACrDK,EAAe,MAAQ,KAEvBA,EAAe,MAAQqB,EAAAA,QAAQ5B,EAAM,YAAY,CAEpD,CAED,SAAS6B,EAAaC,EAAO,EAEtB5B,EAAY,QAAU,GAAK4B,IAAU,IAAQ5B,EAAY,QAAU,IAAM4B,IAAU,KACtFzB,EAAW,OAASyB,GAItB,MAAMC,EAAcC,EAAAA,IAAIhC,EAAM,aAAc,CAAE,MAAOE,EAAY,MAAO,KAAMG,EAAW,KAAO,CAAA,EAC1F4B,EAAUH,IAAU,EAAII,YAAUH,EAAa,CAAC,EAAII,EAAS,UAACJ,EAAa,CAAC,EAGlF7B,EAAY,MAAQE,WAAS6B,CAAO,CACrC,CAED,SAASG,EAAYN,EAAO,CAC1BzB,EAAW,MAAQA,EAAW,MAAQyB,CACvC,CAED,SAASO,GAAiB,CACxBR,EAAY,CAAC,CACd,CAED,SAASS,GAAiB,CACxBT,EAAY,EAAE,CACf,CAED,SAASU,GAAyB,CAChC,MAAO,GAAG7B,EAAK,GAAG,+BAA+B,CAAC,IAAIA,EAAK,GAAG,mCAAmC,CAAC,IAAIL,EAAW,MAAQ,CAAC,EAC3H,CAED,SAASmC,GAA0B,CACjC,MAAO,GAAG9B,EAAK,GAAG,+BAA+B,CAAC,IAAIA,EAAK,GAAG,oCAAoC,CAAC,IAAIO,EAAef,EAAY,MAAQ,CAAC,CAAC,EAC7I,CAED,SAASuC,GAAqB,CAC5B,MAAO,GAAG/B,EAAK,GAAG,+BAA+B,CAAC,IAAIA,EAAK,GAAG,+BAA+B,CAAC,IAAIL,EAAW,MAAQ,CAAC,EACvH,CAED,SAASqC,GAAsB,CAC7B,MAAO,GAAGhC,EAAK,GAAG,+BAA+B,CAAC,IAAIA,EAAK,GAAG,gCAAgC,CAAC,IAAIO,EAAef,EAAY,MAAQ,CAAC,CAAC,EACzI,CAED,MAAO,CACL,YAAAA,EACA,WAAAG,EACA,eAAAY,EACA,UAAAI,EACA,qBAAAE,EACA,cAAAE,EACA,YAAAI,EACA,WAAAO,EACA,cAAAC,EACA,cAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,kBAAAC,EACA,mBAAAC,CACJ,CACA,4PCPA,MAAM1C,EAAQ2C,EAOR1C,EAAQ2C,EA+BRlC,EAAO,IAAIC,EAAAA,qBAEX,CACJ,YAAAT,EACA,WAAAG,EACA,eAAAY,EACA,UAAAI,EACA,qBAAAE,EACA,cAAAE,EACA,YAAAI,EACA,WAAAO,EACA,cAAAC,EACA,cAAAC,EACA,sBAAAC,EACA,uBAAAC,EACA,mBAAAE,EACA,kBAAAD,CACF,EAAI1C,EAAmBC,EAAOC,CAAK,EAEnC4C,OAAAA,EAAAA,UAAU,IAAM,CACdtB,GACF,CAAC,EAEDuB,EAAa,CACX,qBAAAvB,EACA,cAAAc,EACA,cAAAC,CACF,CAAC,uyFC5MM,SAASS,EAAa/C,EAAOC,EAAO,CACzC,MAAM+C,EAAc7C,MAAI,IAAI,EACtB8C,EAAW9C,MAAI,CAAC,EAChB+C,EAAU/C,MAAI,CAAA,CAAE,EAChBO,EAAO,IAAIC,EAAAA,qBAEXwC,EAAWtC,EAAAA,SAAS,IACjBuC,kBAAgBpD,EAAM,OAAQqD,EAAU,UAAA,CAChD,EAEDtC,QAAM,IAAMf,EAAM,aAAc,IAAM,CACpCiD,EAAS,MAAQ,EACjBC,EAAQ,MAAQ,GAChBF,EAAY,MAAQ,IACxB,CAAG,EAED,SAASM,EAAcC,EAAK,CAC1B,OAAO7C,EAAK,GAAG,gCAAgC,EAAI,IAAI8C,EAAAA,WAAWD,EAAI,MAAOnC,EAAiB,kBAAEV,EAAK,aAAa,CAAC,EACpH,CAED,SAASW,EAAWC,EAAIiC,EAAK,CACvB,CAACL,EAAQ,MAAM,KAAKK,GAAOA,EAAI,KAAOjC,CAAE,GAAKiC,EAAI,cACnDL,EAAQ,MAAM,KAAK,CAAE,GAAA5B,EAAI,IAAAiC,CAAK,CAAA,CAEjC,CAED,SAAS9B,EAAeC,EAAO,CAC7B,OAAQA,EAAM,IAAG,CACf,IAAK,UACHA,EAAM,eAAc,EACpBuB,EAAS,OAAS,EAClB,GAAI,CACFzB,gBAAc0B,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,OACrD,MAAe,CACd,MAAMQ,EAAgBC,EAAAA,uBAAuBR,EAAQ,MAAMD,EAAS,MAAQ,CAAC,EAAE,IAAI,KAAK,EACxFhD,EAAM,kBAAkB,EAExB0D,EAAAA,SAAS,IAAM,CACbnC,gBAAc0B,EAAQ,MAAMO,EAAgB,CAAC,EAAE,GAAG,GAAG,EAAE,QACvDR,EAAS,OAASQ,EAAgB,CAC9C,CAAW,CACF,CACD,MAEF,IAAK,YACH/B,EAAM,eAAc,EACpBuB,EAAS,OAAS,EAClB,GAAI,CACFzB,gBAAc0B,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,OACrD,MAAe,CACd,MAAMW,EAAgBC,EAAAA,uBAAuBX,EAAQ,MAAMD,EAAS,MAAQ,CAAC,EAAE,IAAI,KAAK,EACxFhD,EAAM,kBAAkB,EAExB0D,EAAAA,SAAS,IAAM,CACbnC,gBAAc0B,EAAQ,MAAMU,EAAgB,CAAC,EAAE,GAAG,GAAG,EAAE,QACvDX,EAAS,OAASW,EAAgB,CAC9C,CAAW,CACF,CACD,MAEF,IAAK,YACHlC,EAAM,eAAc,EAChBuB,EAAS,MAAQ,GACnBA,EAAS,OAAS,EAClBzB,gBAAc0B,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,UAGpDhD,EAAM,kBAAkB,EACxB6D,KAEF,MAEF,IAAK,aACHpC,EAAM,eAAc,EAChBuB,EAAS,MAAQC,EAAQ,MAAM,OAAS,GAC1CD,EAAS,OAAS,EAClBzB,gBAAc0B,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,UAGpDhD,EAAM,kBAAkB,EAExB8D,KAEF,MAEF,IAAK,MACHrC,EAAM,eAAc,EACpBzB,EAAM,yBAAyB,EAC/B,MAEF,IAAK,SACHA,EAAM,kBAAkB,EACxB,KACH,CACF,CAED,SAAS8D,GAAiB,CACxBd,EAAS,MAAQ,EAEjBU,EAAAA,SAAS,IAAM,CACbnC,gBAAc0B,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,OAC1D,CAAK,CACF,CAED,SAASa,GAAgB,CACvBH,EAAAA,SAAS,IAAM,CACbV,EAAS,MAAQC,EAAQ,MAAM,OAAS,EACxC1B,gBAAc0B,EAAQ,MAAMD,EAAS,KAAK,EAAE,GAAG,GAAG,EAAE,OAC1D,CAAK,CACF,CAED,SAASe,EAAWT,EAAK,CAClBA,EAAI,eAGTP,EAAY,MAAQO,EAAI,KACxBtD,EAAM,cAAesD,EAAI,KAAK,EAC/B,CAED,MAAO,CACL,YAAAP,EACA,SAAAG,EACA,aAAAG,EACA,UAAAjC,EACA,cAAAI,EACA,cAAAsC,EACA,UAAAC,CACJ,CACA,+SCtEA,MAAMhE,EAAQ2C,EAOR1C,EAAQ2C,EAsCR,CACJ,YAAAI,EACA,SAAAG,EACA,aAAAG,EACA,UAAAjC,EACA,cAAAI,EACA,cAAAsC,EACA,UAAAC,CACF,EAAIjB,EAAY/C,EAAOC,CAAK,EAE5B,OAAA6C,EAAa,CACX,cAAAiB,CACF,CAAC,goDCvDD,MAAMnD,EAAeT,EAAAA,IAAI,CAAA,CAAE,EAE3B,SAAS8D,EAAoBC,EAAM,CACjCtD,EAAa,MAAQsD,CACvB,CAEArB,OAAAA,EAAAA,UAAU,IAAM,CACd,MAAMsB,EAAWC,EAAAA,qBACjBC,EAAe,gBAAC7C,EAAa,cAAC2C,EAAS,MAAM,GAAG,EAAG,YAAY,CACjE,CAAC"}