npm - @dialpad/dialtone - Versions diffs - 9.123.1 → 9.124.0 - Mend

@dialpad/dialtone 9.123.1 → 9.124.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (339) hide show

package/dist/vue2/lib/contact-row/contact-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"contact-row.js","sources":["../../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :unread-count=\"unreadCount\"\n :description=\"contactDescription\"\n :has-unreads=\"hasUnreads\"\n :selected=\"selected\"\n :has-call-button=\"hasCallButton\"\n :muted=\"muted\"\n :is-typing=\"isTyping\"\n :call-button-tooltip=\"callButtonTooltip\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n v-bind=\"$attrs\"\n data-qa=\"contact-row\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-avatar\n :full-name=\"name\"\n :image-src=\"avatarSrc\"\n :color=\"avatarColor\"\n image-alt=\"\"\n size=\"sm\"\n :seed=\"avatarSeed\"\n :presence=\"avatarPresence\"\n >\n <template\n v-if=\"noInitials\"\n #icon\n >\n <dt-icon-user\n size=\"200\"\n />\n </template>\n </dt-avatar>\n </template>\n <template #label>\n <dt-emoji-text-wrapper\n class=\"d-recipe-leftbar-row__description\"\n data-qa=\"dt-recipe-leftbar-row-description\"\n size=\"200\"\n >\n {{ name }}\n </dt-emoji-text-wrapper>\n <div class=\"d-recipe-leftbar-row__status\">\n <span\n v-if=\"presenceText\"\n data-qa=\"dt-recipe-leftbar-row-presence-text\"\n :class=\"['d-recipe-leftbar-row__meta-context', presenceFontColorClass]\"\n >\n {{ presenceText }}\n </span>\n <dt-emoji-text-wrapper\n v-if=\"userStatus\"\n size=\"100\"\n element-type=\"span\"\n data-qa=\"dt-recipe-leftbar-row-user-status\"\n class=\"d-recipe-leftbar-row__meta-custom\"\n >\n {{ userStatus }}\n </dt-emoji-text-wrapper>\n </div>\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport { safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeContactRow',\n\n components: {\n DtAvatar,\n DtRecipeGeneralRow,\n DtEmojiTextWrapper,\n DtIconUser,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Optional avatar image url.\n * If not provided it will use the initial of the name.\n /\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * defer validation to avatar component.\n * @values null, busy, away, offline, active\n /\n avatarPresence: {\n type: String,\n default: null,\n },\n\n /\n Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n /\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /\n Avatar color to display if `avatarSrc` is empty.\n /\n avatarColor: {\n type: String,\n default: null,\n },\n\n /\n Text describing the user's presence, such as \"in a meeting\"\n /\n presenceText: {\n type: String,\n default: '',\n },\n\n /\n Name of the contact\n /\n name: {\n type: String,\n required: true,\n },\n\n /\n Status as set by the user.\n /\n userStatus: {\n type: String,\n default: '',\n },\n\n /\n Gives a faded style to be used when muted\n /\n muted: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /\n Whether the contact row should display a call button when hovered.\n /\n hasCallButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Text shown when the call button is hovered.\n /\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Call button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'call',\n ],\n\n computed: {\n presenceFontColorClass () {\n const presenceFontColors = {\n active: 'd-recipe-contact-row--active',\n busy: 'd-recipe-contact-row--busy',\n away: 'd-recipe-contact-row--away',\n };\n\n return presenceFontColors[this.avatarPresence];\n },\n\n contactDescription () {\n return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","DtIconUser","safeConcatStrings"],"mappings":";;;;;;AAwEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AAOA,aANA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,MAAA;AAAA,MACA,EAEA,KAAA,cAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,aAAAC,EAAA,CAAA,KAAA,MAAA,KAAA,cAAA,KAAA,UAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"contact-row.js","sources":["../../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :unread-count=\"unreadCount\"\n :description=\"contactDescription\"\n :has-unreads=\"hasUnreads\"\n :selected=\"selected\"\n :has-call-button=\"hasCallButton\"\n :muted=\"muted\"\n :is-typing=\"isTyping\"\n :call-button-tooltip=\"callButtonTooltip\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n v-bind=\"$attrs\"\n data-qa=\"contact-row\"\n v-on=\"$listeners\"\n >\n <template #left>\n <dt-avatar\n :full-name=\"name\"\n :image-src=\"avatarSrc\"\n :color=\"avatarColor\"\n image-alt=\"\"\n size=\"sm\"\n :seed=\"avatarSeed\"\n :presence=\"avatarPresence\"\n >\n <template\n v-if=\"noInitials\"\n #icon\n >\n <dt-icon-user\n size=\"200\"\n />\n </template>\n </dt-avatar>\n </template>\n <template #label>\n <dt-emoji-text-wrapper\n class=\"d-recipe-leftbar-row__description\"\n data-qa=\"dt-recipe-leftbar-row-description\"\n size=\"200\"\n >\n {{ name }}\n </dt-emoji-text-wrapper>\n <div class=\"d-recipe-leftbar-row__status\">\n <span\n v-if=\"presenceText\"\n data-qa=\"dt-recipe-leftbar-row-presence-text\"\n :class=\"['d-recipe-leftbar-row__meta-context', presenceFontColorClass]\"\n >\n {{ presenceText }}\n </span>\n <dt-emoji-text-wrapper\n v-if=\"userStatus\"\n size=\"100\"\n element-type=\"span\"\n data-qa=\"dt-recipe-leftbar-row-user-status\"\n class=\"d-recipe-leftbar-row__meta-custom\"\n >\n {{ userStatus }}\n </dt-emoji-text-wrapper>\n </div>\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport { safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeContactRow',\n\n components: {\n DtAvatar,\n DtRecipeGeneralRow,\n DtEmojiTextWrapper,\n DtIconUser,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Optional avatar image url.\n * If not provided it will use the initial of the name.\n /\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * defer validation to avatar component.\n * @values null, busy, away, offline, active\n /\n avatarPresence: {\n type: String,\n default: null,\n },\n\n /\n Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n /\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /\n Avatar color to display if `avatarSrc` is empty.\n /\n avatarColor: {\n type: String,\n default: null,\n },\n\n /\n Text describing the user's presence, such as \"in a meeting\"\n /\n presenceText: {\n type: String,\n default: '',\n },\n\n /\n Name of the contact\n /\n name: {\n type: String,\n required: true,\n },\n\n /\n Status as set by the user.\n /\n userStatus: {\n type: String,\n default: '',\n },\n\n /\n Gives a faded style to be used when muted\n /\n muted: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /\n Whether the contact row should display a call button when hovered.\n /\n hasCallButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Text shown when the call button is hovered.\n /\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Call button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'call',\n ],\n\n computed: {\n presenceFontColorClass () {\n const presenceFontColors = {\n active: 'd-recipe-contact-row--active',\n busy: 'd-recipe-contact-row--busy',\n away: 'd-recipe-contact-row--away',\n };\n\n return presenceFontColors[this.avatarPresence];\n },\n\n contactDescription () {\n return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","DtIconUser","safeConcatStrings"],"mappings":";;;;;;AAwEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AAOA,aANA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,MAAA;AAAA,MACA,EAEA,KAAA,cAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,aAAAC,EAAA,CAAA,KAAA,MAAA,KAAA,cAAA,KAAA,UAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/datepicker/datepicker.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@dialpad/dialtone-icons/vue2"),n=require("date-fns"),i=require("./utils.cjs"),h=require("./datepicker-constants.cjs"),f=require("../stack/stack.cjs"),y=require("../tooltip/tooltip.cjs"),p=require("../button/button.cjs"),d=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),D=require("../../common/utils/index.cjs"),_={name:"DtDatepickerMonthYearPicker",components:{DtButton:p.default,DtTooltip:y.default,DtStack:f.default,DtIconChevronLeft:u.DtIconChevronLeft,DtIconChevronsLeft:u.DtIconChevronsLeft,DtIconChevronRight:u.DtIconChevronRight,DtIconChevronsRight:u.DtIconChevronsRight},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:n.getMonth(this.selectedDate),selectYear:n.getYear(this.selectedDate),highlightedDay:null,focusPicker:0,focusRefs:[],refNames:["prevYearButtonRef","prevMonthButtonRef","nextMonthButtonRef","nextYearButtonRef"]}},computed:{calendarDays(){return i.getCalendarDays(this.selectMonth,this.selectYear,this.highlightedDay)},formattedMonth(){return a=>i.formatMonth(a,h.INTL_MONTH_FORMAT,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(a=>this.$refs[a])},focusMonthYearPicker(){this.focusPicker=0,this.focusRefs[0].$el.focus()},handleKeyDown(a){switch(a.key){case"ArrowLeft":a.preventDefault(),this.focusPicker===0?(this.focusPicker=3,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker--,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowRight":a.preventDefault(),this.focusPicker===3?(this.focusPicker=0,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker++,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowDown":a.preventDefault(),this.$emit("focus-first-day");break;case"Tab":a.preventDefault(),this.$emit("focus-first-day");break;case"Escape":this.$emit("close-datepicker");break}},highlightDay(){const a=n.getYear(this.selectedDate),e=n.getMonth(this.selectedDate);a!==this.selectYear||e!==this.selectMonth?this.highlightedDay=null:this.highlightedDay=n.getDate(this.selectedDate)},changeMonth(a){(this.selectMonth===0&&a===-1||this.selectMonth===11&&a===1)&&(this.selectYear+=a);const e=n.set(this.selectedDate,{month:this.selectMonth,year:this.selectYear}),t=a===1?n.addMonths(e,1):n.subMonths(e,1);this.selectMonth=n.getMonth(t)},changeYear(a){this.selectYear=this.selectYear+a},goToNextMonth(){this.changeMonth(1)},goToPrevMonth(){this.changeMonth(-1)}}};var k=function(){var e=this,t=e._self._c;return t("dt-stack",{staticClass:"d-datepicker__month-year",attrs:{direction:"row",gap:"300"}},[t("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[t("dt-tooltip",{attrs:{message:e.prevYearLabel,placement:"top","fallback-placements":["top-start","auto"]},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("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(s){return e.changeYear(-1)},keydown:function(s){return e.handleKeyDown(s)}}},[t("dt-icon-chevrons-left",{attrs:{size:"200"}})],1)]},proxy:!0}])}),t("dt-tooltip",{attrs:{message:e.prevMonthLabel,placement:"top","fallback-placements":["top-end","auto"]},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("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(s){return e.changeMonth(-1)},keydown:function(s){return e.handleKeyDown(s)}}},[t("dt-icon-chevron-left",{attrs:{size:"200"}})],1)]},proxy:!0}])})],1),t("div",{staticClass:"d-datepicker__month-year-title",attrs:{id:"calendar-heading"}},[e._v(" "+e._s(e.formattedMonth(e.selectMonth))+" "+e._s(e.selectYear)+" ")]),t("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[t("dt-tooltip",{attrs:{message:e.nextMonthLabel,placement:"top","fallback-placements":["top-start","auto"]},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("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(s){return e.changeMonth(1)},keydown:function(s){return e.handleKeyDown(s)}}},[t("dt-icon-chevron-right",{attrs:{size:"200"}})],1)]},proxy:!0}])}),t("dt-tooltip",{attrs:{message:e.nextYearLabel,placement:"top","fallback-placements":["top-end","auto"]},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("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(s){return e.changeYear(1)},keydown:function(s){return e.handleKeyDown(s)}}},[t("dt-icon-chevrons-right",{attrs:{size:"200"}})],1)]},proxy:!0}])})],1)],1)},m=[],b=d.n(_,k,m,!1,null,null);const g=b.exports,$={name:"DtDatepickerCalendar",components:{DtButton:p.default},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 i.getWeekDayNames(this.locale,h.WEEK_START)}},watch:{calendarDays(){this.focusDay=0,this.selectedDay=null,this.daysRef=[],this.$nextTick(()=>{this.daysRef=[],this.setDayRef()})}},methods:{dayAriaLabel(a){return`${this.selectDayLabel} ${a.text} ${n.format(a.value,h.MONTH_FORMAT)} ${n.getYear(a.value)}`},setDayRef(a,e){this.calendarDays.forEach((t,s)=>{t.days.forEach((c,r)=>{const l=`buttonRef_${s}_${r}`,o=this.$refs[l];o&&c.currentMonth&&this.daysRef.push({el:o[0],day:c})})})},handleKeyDown(a){switch(a.key){case"ArrowUp":a.preventDefault(),this.focusDay-=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const t=i.calculatePrevFocusDate(this.daysRef[this.focusDay+7].day.value);this.$emit("go-to-prev-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[t-1].el.$el.focus(),this.focusDay+=t-1})}break;case"ArrowDown":a.preventDefault(),this.focusDay+=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const t=i.calculateNextFocusDate(this.daysRef[this.focusDay-7].day.value);this.$emit("go-to-next-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[t-1].el.$el.focus(),this.focusDay+=t-1})}break;case"ArrowLeft":a.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":a.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":a.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(a){a.currentMonth&&(this.selectedDay=a.text,this.$emit("select-date",a.value))}}};var v=function(){var e=this,t=e._self._c;return t("table",{staticClass:"d-datepicker__calendar",attrs:{"aria-labelledby":"calendar-heading"}},[t("thead",[t("tr",e._l(e.weekDays,function(s){return t("th",{key:s,staticClass:"d-datepicker__cell d-datepicker__cell--header",attrs:{scope:"col"}},[t("span",{staticClass:"d-datepicker__weekday",attrs:{title:s,"aria-label":s}},[e._v(" "+e._s(s))])])}),0)]),t("tbody",e._l(e.calendarDays,function(s,c){return t("tr",{key:c},e._l(s.days,function(r,l){return t("td",{key:c+l,staticClass:"d-datepicker__cell",attrs:{role:"listbox"}},[t("dt-button",{ref:`buttonRef_${c}_${l}`,refInFor:!0,staticClass:"d-datepicker__day",class:{"d-datepicker__day--disabled":!r.currentMonth,"d-datepicker__day--selected":e.selectedDay?r.text===e.selectedDay&&r.currentMonth:r.selected},attrs:{circle:!0,size:"sm",importance:"clear",disabled:!r.currentMonth,type:"button","aria-selected":e.selectedDay?r.text===e.selectedDay&&r.currentMonth:r.selected,"aria-label":e.dayAriaLabel(r),role:"option"},on:{click:function(o){return e.selectDay(r)},keydown:function(o){return e.handleKeyDown(o)}}},[e._v(" "+e._s(r.text)+" ")])],1)}),0)}),0)])},M=[],R=d.n($,v,M,!1,null,null);const x=R.exports,L={name:"DtDatepicker",components:{DtStack:f.default,MonthYearPicker:g,Calendar:x},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:[]}},mounted(){D.warnIfUnmounted(this.$el,this.$options.name)},methods:{updateCalendarDays(a){this.calendarDays=a}}};var Y=function(){var e=this,t=e._self._c;return t("dt-stack",{staticClass:"d-datepicker",attrs:{gap:"400"}},[t("div",{staticClass:"d-datepicker__hd"},[t("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(s){return e.$refs.calendar.focusFirstDay()},"focus-last-day":function(s){return e.$refs.calendar.focusLastDay()},"close-datepicker":function(s){return e.$emit("close-datepicker")}}})],1),t("div",{staticClass:"d-datepicker__bd"},[t("calendar",{ref:"calendar",attrs:{locale:e.locale,"calendar-days":e.calendarDays,"select-day-label":e.selectDayLabel},on:{"select-date":function(s){return e.$emit("selected-date",s)},"focus-month-year-picker":function(s){return e.$refs.monthYearPicker.focusMonthYearPicker()},"close-datepicker":function(s){return e.$emit("close-datepicker")},"go-to-next-month":function(s){return e.$refs.monthYearPicker.goToNextMonth()},"go-to-prev-month":function(s){return e.$refs.monthYearPicker.goToPrevMonth()}}})],1)])},w=[],C=d.n(L,Y,w,!1,null,null);const T=C.exports;exports.default=T;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("@dialpad/dialtone-icons/vue2"),n=require("date-fns"),i=require("./utils.cjs"),u=require("./datepicker-constants.cjs"),f=require("../stack/stack.cjs"),y=require("../tooltip/tooltip.cjs"),p=require("../button/button.cjs"),d=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),D=require("../../common/utils/index.cjs"),_={name:"DtDatepickerMonthYearPicker",components:{DtButton:p.default,DtTooltip:y.default,DtStack:f.default,DtIconChevronLeft:h.DtIconChevronLeft,DtIconChevronsLeft:h.DtIconChevronsLeft,DtIconChevronRight:h.DtIconChevronRight,DtIconChevronsRight:h.DtIconChevronsRight},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:n.getMonth(this.selectedDate),selectYear:n.getYear(this.selectedDate),highlightedDay:null,focusPicker:0,focusRefs:[],refNames:["prevYearButtonRef","prevMonthButtonRef","nextMonthButtonRef","nextYearButtonRef"]}},computed:{calendarDays(){return i.getCalendarDays(this.selectMonth,this.selectYear,this.highlightedDay)},formattedMonth(){return a=>i.formatMonth(a,u.INTL_MONTH_FORMAT,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(a=>this.$refs[a])},focusMonthYearPicker(){this.focusPicker=0,this.focusRefs[0].$el.focus()},handleKeyDown(a){switch(a.key){case"ArrowLeft":a.preventDefault(),this.focusPicker===0?(this.focusPicker=3,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker--,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowRight":a.preventDefault(),this.focusPicker===3?(this.focusPicker=0,this.focusRefs[this.focusPicker].$el.focus()):(this.focusPicker++,this.focusRefs[this.focusPicker].$el.focus());break;case"ArrowDown":a.preventDefault(),this.$emit("focus-first-day");break;case"Tab":a.preventDefault(),this.$emit("focus-first-day");break;case"Escape":this.$emit("close-datepicker");break}},highlightDay(){const a=n.getYear(this.selectedDate),e=n.getMonth(this.selectedDate);a!==this.selectYear||e!==this.selectMonth?this.highlightedDay=null:this.highlightedDay=n.getDate(this.selectedDate)},changeMonth(a){(this.selectMonth===0&&a===-1||this.selectMonth===11&&a===1)&&(this.selectYear+=a);const e=n.set(this.selectedDate,{month:this.selectMonth,year:this.selectYear}),t=a===1?n.addMonths(e,1):n.subMonths(e,1);this.selectMonth=n.getMonth(t)},changeYear(a){this.selectYear=this.selectYear+a},goToNextMonth(){this.changeMonth(1)},goToPrevMonth(){this.changeMonth(-1)}}};var k=function(){var e=this,t=e._self._c;return t("dt-stack",{staticClass:"d-datepicker__month-year",attrs:{direction:"row",gap:"300"}},[t("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[t("dt-tooltip",{attrs:{message:e.prevYearLabel,placement:"top","fallback-placements":["top-start","auto"]},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("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(s){return e.changeYear(-1)},keydown:function(s){return e.handleKeyDown(s)}}},[t("dt-icon-chevrons-left",{attrs:{size:"200"}})],1)]},proxy:!0}])}),t("dt-tooltip",{attrs:{message:e.prevMonthLabel,placement:"top","fallback-placements":["top-end","auto"]},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("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(s){return e.changeMonth(-1)},keydown:function(s){return e.handleKeyDown(s)}}},[t("dt-icon-chevron-left",{attrs:{size:"200"}})],1)]},proxy:!0}])})],1),t("div",{staticClass:"d-datepicker__month-year-title",attrs:{id:"calendar-heading"}},[e._v(" "+e._s(e.formattedMonth(e.selectMonth))+" "+e._s(e.selectYear)+" ")]),t("dt-stack",{staticClass:"d-datepicker__nav",attrs:{as:"nav",direction:"row",gap:"200"}},[t("dt-tooltip",{attrs:{message:e.nextMonthLabel,placement:"top","fallback-placements":["top-start","auto"]},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("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(s){return e.changeMonth(1)},keydown:function(s){return e.handleKeyDown(s)}}},[t("dt-icon-chevron-right",{attrs:{size:"200"}})],1)]},proxy:!0}])}),t("dt-tooltip",{attrs:{message:e.nextYearLabel,placement:"top","fallback-placements":["top-end","auto"]},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("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(s){return e.changeYear(1)},keydown:function(s){return e.handleKeyDown(s)}}},[t("dt-icon-chevrons-right",{attrs:{size:"200"}})],1)]},proxy:!0}])})],1)],1)},m=[],b=d.n(_,k,m);const g=b.exports,$={name:"DtDatepickerCalendar",components:{DtButton:p.default},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 i.getWeekDayNames(this.locale,u.WEEK_START)}},watch:{calendarDays(){this.focusDay=0,this.selectedDay=null,this.daysRef=[],this.$nextTick(()=>{this.daysRef=[],this.setDayRef()})}},methods:{dayAriaLabel(a){return`${this.selectDayLabel} ${a.text} ${n.format(a.value,u.MONTH_FORMAT)} ${n.getYear(a.value)}`},setDayRef(a,e){this.calendarDays.forEach((t,s)=>{t.days.forEach((c,r)=>{const l=`buttonRef_${s}_${r}`,o=this.$refs[l];o&&c.currentMonth&&this.daysRef.push({el:o[0],day:c})})})},handleKeyDown(a){switch(a.key){case"ArrowUp":a.preventDefault(),this.focusDay-=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const t=i.calculatePrevFocusDate(this.daysRef[this.focusDay+7].day.value);this.$emit("go-to-prev-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[t-1].el.$el.focus(),this.focusDay+=t-1})}break;case"ArrowDown":a.preventDefault(),this.focusDay+=7;try{this.daysRef[this.focusDay].el.$el.focus()}catch{const t=i.calculateNextFocusDate(this.daysRef[this.focusDay-7].day.value);this.$emit("go-to-next-month"),this.$nextTick(()=>{this.setDayRef(),this.daysRef[t-1].el.$el.focus(),this.focusDay+=t-1})}break;case"ArrowLeft":a.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":a.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":a.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(a){a.currentMonth&&(this.selectedDay=a.text,this.$emit("select-date",a.value))}}};var v=function(){var e=this,t=e._self._c;return t("table",{staticClass:"d-datepicker__calendar",attrs:{"aria-labelledby":"calendar-heading"}},[t("thead",[t("tr",e._l(e.weekDays,function(s){return t("th",{key:s,staticClass:"d-datepicker__cell d-datepicker__cell--header",attrs:{scope:"col"}},[t("span",{staticClass:"d-datepicker__weekday",attrs:{title:s,"aria-label":s}},[e._v(" "+e._s(s))])])}),0)]),t("tbody",e._l(e.calendarDays,function(s,c){return t("tr",{key:c},e._l(s.days,function(r,l){return t("td",{key:c+l,staticClass:"d-datepicker__cell",attrs:{role:"listbox"}},[t("dt-button",{ref:`buttonRef_${c}_${l}`,refInFor:!0,staticClass:"d-datepicker__day",class:{"d-datepicker__day--disabled":!r.currentMonth,"d-datepicker__day--selected":e.selectedDay?r.text===e.selectedDay&&r.currentMonth:r.selected},attrs:{circle:!0,size:"sm",importance:"clear",disabled:!r.currentMonth,type:"button","aria-selected":e.selectedDay?r.text===e.selectedDay&&r.currentMonth:r.selected,"aria-label":e.dayAriaLabel(r),role:"option"},on:{click:function(o){return e.selectDay(r)},keydown:function(o){return e.handleKeyDown(o)}}},[e._v(" "+e._s(r.text)+" ")])],1)}),0)}),0)])},M=[],R=d.n($,v,M);const x=R.exports,L={name:"DtDatepicker",components:{DtStack:f.default,MonthYearPicker:g,Calendar:x},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:[]}},mounted(){D.warnIfUnmounted(this.$el,this.$options.name)},methods:{updateCalendarDays(a){this.calendarDays=a}}};var Y=function(){var e=this,t=e._self._c;return t("dt-stack",{staticClass:"d-datepicker",attrs:{gap:"400"}},[t("div",{staticClass:"d-datepicker__hd"},[t("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(s){return e.$refs.calendar.focusFirstDay()},"focus-last-day":function(s){return e.$refs.calendar.focusLastDay()},"close-datepicker":function(s){return e.$emit("close-datepicker")}}})],1),t("div",{staticClass:"d-datepicker__bd"},[t("calendar",{ref:"calendar",attrs:{locale:e.locale,"calendar-days":e.calendarDays,"select-day-label":e.selectDayLabel},on:{"select-date":function(s){return e.$emit("selected-date",s)},"focus-month-year-picker":function(s){return e.$refs.monthYearPicker.focusMonthYearPicker()},"close-datepicker":function(s){return e.$emit("close-datepicker")},"go-to-next-month":function(s){return e.$refs.monthYearPicker.goToNextMonth()},"go-to-prev-month":function(s){return e.$refs.monthYearPicker.goToPrevMonth()}}})],1)])},w=[],C=d.n(L,Y,w);const T=C.exports;exports.default=T;
 //# sourceMappingURL=datepicker.cjs.map

package/dist/vue2/lib/datepicker/datepicker.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datepicker.cjs","sources":["../../../components/datepicker/modules/month-year-picker.vue","../../../components/datepicker/modules/calendar.vue","../../../components/datepicker/datepicker.vue"],"sourcesContent":["<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=\"refNames[0]\"\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=\"refNames[1]\"\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} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\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 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=\"refNames[2]\"\n size=\"xs\"\n importance=\"clear\"\n :circle=\"true\"\n kind=\"muted\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\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=\"refNames[3]\"\n size=\"xs\"\n kind=\"muted\"\n :circle=\"true\"\n importance=\"clear\"\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>\nimport { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue2';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerMonthYearPicker',\n\n components: {\n DtButton,\n DtTooltip,\n DtStack,\n DtIconChevronLeft,\n DtIconChevronsLeft,\n DtIconChevronRight,\n DtIconChevronsRight,\n },\n\n props: {\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 },\n\n emits: [\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\n data () {\n return {\n selectMonth: getMonth(this.selectedDate),\n selectYear: getYear(this.selectedDate),\n highlightedDay: null,\n focusPicker: 0,\n focusRefs: [],\n refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n };\n },\n\n computed: {\n // Get days for the currently selected month and year and highlight the selected day\n calendarDays () {\n return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n },\n\n formattedMonth () {\n return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n },\n },\n\n watch: {\n selectMonth: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n selectYear: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n },\n\n mounted () {\n this.setButtonsRef();\n this.focusMonthYearPicker();\n },\n\n methods: {\n setButtonsRef () {\n this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n },\n\n focusMonthYearPicker () {\n this.focusPicker = 0;\n this.focusRefs[0].$el.focus();\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusPicker === 0) {\n this.focusPicker = 3;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker--;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusPicker === 3) {\n this.focusPicker = 0;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker++;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n highlightDay () {\n const year = getYear(this.selectedDate);\n const month = getMonth(this.selectedDate);\n\n if (year !== this.selectYear \|\| month !== this.selectMonth) {\n this.highlightedDay = null;\n } else {\n this.highlightedDay = getDate(this.selectedDate);\n }\n },\n\n changeMonth (value) {\n // Adjust year when changing from January to December or vice versa\n if ((this.selectMonth === 0 && value === -1) \|\| (this.selectMonth === 11 && value === 1)) {\n this.selectYear += value;\n }\n\n // Calculate the new date by adding or subtracting months\n const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n // Update the selected month\n this.selectMonth = getMonth(newDate);\n },\n\n changeYear (value) {\n this.selectYear = this.selectYear + value;\n },\n\n goToNextMonth () {\n this.changeMonth(1);\n },\n\n goToPrevMonth () {\n this.changeMonth(-1);\n },\n },\n};\n</script>\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=\"`buttonRef_${indexWeek}_${indexDays}`\"\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>\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils';\nimport { WEEK_START, MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerCalendar',\n components: { DtButton },\n\n props: {\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\n emits: [\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 data () {\n return {\n // local selectedDay to override the received by props calendarDays\n selectedDay: null,\n focusDay: 0,\n daysRef: [],\n };\n },\n\n computed: {\n weekDays () {\n return getWeekDayNames(this.locale, WEEK_START);\n },\n },\n\n watch: {\n calendarDays () {\n // on calendarDays update, reset our local variables\n this.focusDay = 0;\n this.selectedDay = null;\n\n this.daysRef = [];\n\n this.$nextTick(() => {\n this.daysRef = [];\n this.setDayRef();\n });\n },\n },\n\n methods: {\n dayAriaLabel (day) {\n return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n },\n\n setDayRef (el, day) {\n this.calendarDays.forEach((week, weekIndex) => {\n week.days.forEach((day, dayIndex) => {\n const refKey = `buttonRef_${weekIndex}_${dayIndex}`;\n const dayButton = this.$refs[refKey];\n if (dayButton && day.currentMonth) {\n this.daysRef.push({ el: dayButton[0], day });\n }\n });\n });\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n this.focusDay -= 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[prevFocusDate - 1].el.$el.focus();\n this.focusDay += prevFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusDay += 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[nextFocusDate - 1].el.$el.focus();\n this.focusDay += nextFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusDay > 0) {\n this.focusDay -= 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month first day, jump to last day of prev month\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.focusLastDay();\n });\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusDay < this.daysRef.length - 1) {\n this.focusDay += 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month last day, jump to first day of next month\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.focusFirstDay();\n });\n }\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-month-year-picker');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n focusFirstDay () {\n this.focusDay = 0;\n this.$nextTick(() => {\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n focusLastDay () {\n this.$nextTick(() => {\n this.focusDay = this.daysRef.length - 1;\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n selectDay (day) {\n if (!day.currentMonth) { return; }\n\n // local selectedDay is updated when a day is selected\n this.selectedDay = day.text;\n this.$emit('select-date', day.value);\n },\n },\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>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\nimport { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n name: 'DtDatepicker',\n\n components: { DtStack, MonthYearPicker, Calendar },\n\n props: {\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\n emits: [\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\n data () {\n return {\n calendarDays: [],\n };\n },\n\n mounted () {\n warnIfUnmounted(this.$el, this.$options.name);\n },\n\n methods: {\n updateCalendarDays (days) {\n this.calendarDays = days;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtTooltip","DtStack","DtIconChevronLeft","DtIconChevronsLeft","DtIconChevronRight","DtIconChevronsRight","getMonth","getYear","getCalendarDays","month","formatMonth","INTL_MONTH_FORMAT","refName","event","year","getDate","value","initialDate","set","newDate","addMonths","subMonths","getWeekDayNames","WEEK_START","day","format","MONTH_FORMAT","el","week","weekIndex","dayIndex","refKey","dayButton","prevFocusDate","calculatePrevFocusDate","nextFocusDate","calculateNextFocusDate","MonthYearPicker","Calendar","warnIfUnmounted","days"],"mappings":"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"}
1	+ {"version":3,"file":"datepicker.cjs","sources":["../../../components/datepicker/modules/month-year-picker.vue","../../../components/datepicker/modules/calendar.vue","../../../components/datepicker/datepicker.vue"],"sourcesContent":["<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=\"refNames[0]\"\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=\"refNames[1]\"\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} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\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 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=\"refNames[2]\"\n size=\"xs\"\n importance=\"clear\"\n :circle=\"true\"\n kind=\"muted\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\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=\"refNames[3]\"\n size=\"xs\"\n kind=\"muted\"\n :circle=\"true\"\n importance=\"clear\"\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>\nimport { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue2';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerMonthYearPicker',\n\n components: {\n DtButton,\n DtTooltip,\n DtStack,\n DtIconChevronLeft,\n DtIconChevronsLeft,\n DtIconChevronRight,\n DtIconChevronsRight,\n },\n\n props: {\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 },\n\n emits: [\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\n data () {\n return {\n selectMonth: getMonth(this.selectedDate),\n selectYear: getYear(this.selectedDate),\n highlightedDay: null,\n focusPicker: 0,\n focusRefs: [],\n refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n };\n },\n\n computed: {\n // Get days for the currently selected month and year and highlight the selected day\n calendarDays () {\n return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n },\n\n formattedMonth () {\n return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n },\n },\n\n watch: {\n selectMonth: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n selectYear: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n },\n\n mounted () {\n this.setButtonsRef();\n this.focusMonthYearPicker();\n },\n\n methods: {\n setButtonsRef () {\n this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n },\n\n focusMonthYearPicker () {\n this.focusPicker = 0;\n this.focusRefs[0].$el.focus();\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusPicker === 0) {\n this.focusPicker = 3;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker--;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusPicker === 3) {\n this.focusPicker = 0;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker++;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n highlightDay () {\n const year = getYear(this.selectedDate);\n const month = getMonth(this.selectedDate);\n\n if (year !== this.selectYear \|\| month !== this.selectMonth) {\n this.highlightedDay = null;\n } else {\n this.highlightedDay = getDate(this.selectedDate);\n }\n },\n\n changeMonth (value) {\n // Adjust year when changing from January to December or vice versa\n if ((this.selectMonth === 0 && value === -1) \|\| (this.selectMonth === 11 && value === 1)) {\n this.selectYear += value;\n }\n\n // Calculate the new date by adding or subtracting months\n const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n // Update the selected month\n this.selectMonth = getMonth(newDate);\n },\n\n changeYear (value) {\n this.selectYear = this.selectYear + value;\n },\n\n goToNextMonth () {\n this.changeMonth(1);\n },\n\n goToPrevMonth () {\n this.changeMonth(-1);\n },\n },\n};\n</script>\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=\"`buttonRef_${indexWeek}_${indexDays}`\"\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>\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils';\nimport { WEEK_START, MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerCalendar',\n components: { DtButton },\n\n props: {\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\n emits: [\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 data () {\n return {\n // local selectedDay to override the received by props calendarDays\n selectedDay: null,\n focusDay: 0,\n daysRef: [],\n };\n },\n\n computed: {\n weekDays () {\n return getWeekDayNames(this.locale, WEEK_START);\n },\n },\n\n watch: {\n calendarDays () {\n // on calendarDays update, reset our local variables\n this.focusDay = 0;\n this.selectedDay = null;\n\n this.daysRef = [];\n\n this.$nextTick(() => {\n this.daysRef = [];\n this.setDayRef();\n });\n },\n },\n\n methods: {\n dayAriaLabel (day) {\n return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n },\n\n setDayRef (el, day) {\n this.calendarDays.forEach((week, weekIndex) => {\n week.days.forEach((day, dayIndex) => {\n const refKey = `buttonRef_${weekIndex}_${dayIndex}`;\n const dayButton = this.$refs[refKey];\n if (dayButton && day.currentMonth) {\n this.daysRef.push({ el: dayButton[0], day });\n }\n });\n });\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n this.focusDay -= 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[prevFocusDate - 1].el.$el.focus();\n this.focusDay += prevFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusDay += 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[nextFocusDate - 1].el.$el.focus();\n this.focusDay += nextFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusDay > 0) {\n this.focusDay -= 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month first day, jump to last day of prev month\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.focusLastDay();\n });\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusDay < this.daysRef.length - 1) {\n this.focusDay += 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month last day, jump to first day of next month\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.focusFirstDay();\n });\n }\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-month-year-picker');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n focusFirstDay () {\n this.focusDay = 0;\n this.$nextTick(() => {\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n focusLastDay () {\n this.$nextTick(() => {\n this.focusDay = this.daysRef.length - 1;\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n selectDay (day) {\n if (!day.currentMonth) { return; }\n\n // local selectedDay is updated when a day is selected\n this.selectedDay = day.text;\n this.$emit('select-date', day.value);\n },\n },\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>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\nimport { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n name: 'DtDatepicker',\n\n components: { DtStack, MonthYearPicker, Calendar },\n\n props: {\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\n emits: [\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\n data () {\n return {\n calendarDays: [],\n };\n },\n\n mounted () {\n warnIfUnmounted(this.$el, this.$options.name);\n },\n\n methods: {\n updateCalendarDays (days) {\n this.calendarDays = days;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtTooltip","DtStack","DtIconChevronLeft","DtIconChevronsLeft","DtIconChevronRight","DtIconChevronsRight","getMonth","getYear","getCalendarDays","month","formatMonth","INTL_MONTH_FORMAT","refName","event","year","getDate","value","initialDate","set","newDate","addMonths","subMonths","getWeekDayNames","WEEK_START","day","format","MONTH_FORMAT","el","week","weekIndex","dayIndex","refKey","dayButton","prevFocusDate","calculatePrevFocusDate","nextFocusDate","calculateNextFocusDate","MonthYearPicker","Calendar","warnIfUnmounted","days"],"mappings":"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"}

package/dist/vue2/lib/datepicker/datepicker.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { INTL_MONTH_FORMAT as L, WEEK_START as Y, MONTH_FORMAT as w } from "./da
 import u from "../stack/stack.js";
 import T from "../tooltip/tooltip.js";
 import d from "../button/button.js";
-import { n as h } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
+import { n as h } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 import { warnIfUnmounted as C } from "../../common/utils/index.js";
 const P = {
   name: "DtDatepickerMonthYearPicker",
@@ -187,10 +187,7 @@ var S = function() {
 }, q = [], A = /* @__PURE__ */ h(
   P,
   S,
-  q,
-  !1,
-  null,
-  null
+  q
 );
 const F = A.exports, N = {
   name: "DtDatepickerCalendar",
@@ -338,10 +335,7 @@ var B = function() {
 }, z = [], K = /* @__PURE__ */ h(
   N,
   B,
-  z,
-  !1,
-  null,
-  null
+  z
 );
 const I = K.exports, E = {
   name: "DtDatepicker",
@@ -477,10 +471,7 @@ var O = function() {
 }, U = [], H = /* @__PURE__ */ h(
   E,
   O,
-  U,
-  !1,
-  null,
-  null
+  U
 );
 const te = H.exports;
 export {

package/dist/vue2/lib/datepicker/datepicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datepicker.js","sources":["../../../components/datepicker/modules/month-year-picker.vue","../../../components/datepicker/modules/calendar.vue","../../../components/datepicker/datepicker.vue"],"sourcesContent":["<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=\"refNames[0]\"\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=\"refNames[1]\"\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} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\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 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=\"refNames[2]\"\n size=\"xs\"\n importance=\"clear\"\n :circle=\"true\"\n kind=\"muted\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\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=\"refNames[3]\"\n size=\"xs\"\n kind=\"muted\"\n :circle=\"true\"\n importance=\"clear\"\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>\nimport { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue2';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerMonthYearPicker',\n\n components: {\n DtButton,\n DtTooltip,\n DtStack,\n DtIconChevronLeft,\n DtIconChevronsLeft,\n DtIconChevronRight,\n DtIconChevronsRight,\n },\n\n props: {\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 },\n\n emits: [\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\n data () {\n return {\n selectMonth: getMonth(this.selectedDate),\n selectYear: getYear(this.selectedDate),\n highlightedDay: null,\n focusPicker: 0,\n focusRefs: [],\n refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n };\n },\n\n computed: {\n // Get days for the currently selected month and year and highlight the selected day\n calendarDays () {\n return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n },\n\n formattedMonth () {\n return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n },\n },\n\n watch: {\n selectMonth: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n selectYear: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n },\n\n mounted () {\n this.setButtonsRef();\n this.focusMonthYearPicker();\n },\n\n methods: {\n setButtonsRef () {\n this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n },\n\n focusMonthYearPicker () {\n this.focusPicker = 0;\n this.focusRefs[0].$el.focus();\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusPicker === 0) {\n this.focusPicker = 3;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker--;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusPicker === 3) {\n this.focusPicker = 0;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker++;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n highlightDay () {\n const year = getYear(this.selectedDate);\n const month = getMonth(this.selectedDate);\n\n if (year !== this.selectYear \|\| month !== this.selectMonth) {\n this.highlightedDay = null;\n } else {\n this.highlightedDay = getDate(this.selectedDate);\n }\n },\n\n changeMonth (value) {\n // Adjust year when changing from January to December or vice versa\n if ((this.selectMonth === 0 && value === -1) \|\| (this.selectMonth === 11 && value === 1)) {\n this.selectYear += value;\n }\n\n // Calculate the new date by adding or subtracting months\n const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n // Update the selected month\n this.selectMonth = getMonth(newDate);\n },\n\n changeYear (value) {\n this.selectYear = this.selectYear + value;\n },\n\n goToNextMonth () {\n this.changeMonth(1);\n },\n\n goToPrevMonth () {\n this.changeMonth(-1);\n },\n },\n};\n</script>\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=\"`buttonRef_${indexWeek}_${indexDays}`\"\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>\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils';\nimport { WEEK_START, MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerCalendar',\n components: { DtButton },\n\n props: {\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\n emits: [\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 data () {\n return {\n // local selectedDay to override the received by props calendarDays\n selectedDay: null,\n focusDay: 0,\n daysRef: [],\n };\n },\n\n computed: {\n weekDays () {\n return getWeekDayNames(this.locale, WEEK_START);\n },\n },\n\n watch: {\n calendarDays () {\n // on calendarDays update, reset our local variables\n this.focusDay = 0;\n this.selectedDay = null;\n\n this.daysRef = [];\n\n this.$nextTick(() => {\n this.daysRef = [];\n this.setDayRef();\n });\n },\n },\n\n methods: {\n dayAriaLabel (day) {\n return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n },\n\n setDayRef (el, day) {\n this.calendarDays.forEach((week, weekIndex) => {\n week.days.forEach((day, dayIndex) => {\n const refKey = `buttonRef_${weekIndex}_${dayIndex}`;\n const dayButton = this.$refs[refKey];\n if (dayButton && day.currentMonth) {\n this.daysRef.push({ el: dayButton[0], day });\n }\n });\n });\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n this.focusDay -= 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[prevFocusDate - 1].el.$el.focus();\n this.focusDay += prevFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusDay += 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[nextFocusDate - 1].el.$el.focus();\n this.focusDay += nextFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusDay > 0) {\n this.focusDay -= 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month first day, jump to last day of prev month\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.focusLastDay();\n });\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusDay < this.daysRef.length - 1) {\n this.focusDay += 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month last day, jump to first day of next month\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.focusFirstDay();\n });\n }\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-month-year-picker');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n focusFirstDay () {\n this.focusDay = 0;\n this.$nextTick(() => {\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n focusLastDay () {\n this.$nextTick(() => {\n this.focusDay = this.daysRef.length - 1;\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n selectDay (day) {\n if (!day.currentMonth) { return; }\n\n // local selectedDay is updated when a day is selected\n this.selectedDay = day.text;\n this.$emit('select-date', day.value);\n },\n },\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>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\nimport { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n name: 'DtDatepicker',\n\n components: { DtStack, MonthYearPicker, Calendar },\n\n props: {\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\n emits: [\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\n data () {\n return {\n calendarDays: [],\n };\n },\n\n mounted () {\n warnIfUnmounted(this.$el, this.$options.name);\n },\n\n methods: {\n updateCalendarDays (days) {\n this.calendarDays = days;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtTooltip","DtStack","DtIconChevronLeft","DtIconChevronsLeft","DtIconChevronRight","DtIconChevronsRight","getMonth","getYear","getCalendarDays","month","formatMonth","INTL_MONTH_FORMAT","refName","event","year","getDate","value","initialDate","set","newDate","addMonths","subMonths","getWeekDayNames","WEEK_START","day","format","MONTH_FORMAT","el","week","weekIndex","dayIndex","refKey","dayButton","prevFocusDate","calculatePrevFocusDate","nextFocusDate","calculateNextFocusDate","MonthYearPicker","Calendar","warnIfUnmounted","days"],"mappings":"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"}
1	+ {"version":3,"file":"datepicker.js","sources":["../../../components/datepicker/modules/month-year-picker.vue","../../../components/datepicker/modules/calendar.vue","../../../components/datepicker/datepicker.vue"],"sourcesContent":["<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=\"refNames[0]\"\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=\"refNames[1]\"\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} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\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 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=\"refNames[2]\"\n size=\"xs\"\n importance=\"clear\"\n :circle=\"true\"\n kind=\"muted\"\n class=\"d-datepicker__nav-btn\"\n type=\"button\"\n :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\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=\"refNames[3]\"\n size=\"xs\"\n kind=\"muted\"\n :circle=\"true\"\n importance=\"clear\"\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>\nimport { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue2';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerMonthYearPicker',\n\n components: {\n DtButton,\n DtTooltip,\n DtStack,\n DtIconChevronLeft,\n DtIconChevronsLeft,\n DtIconChevronRight,\n DtIconChevronsRight,\n },\n\n props: {\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 },\n\n emits: [\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\n data () {\n return {\n selectMonth: getMonth(this.selectedDate),\n selectYear: getYear(this.selectedDate),\n highlightedDay: null,\n focusPicker: 0,\n focusRefs: [],\n refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n };\n },\n\n computed: {\n // Get days for the currently selected month and year and highlight the selected day\n calendarDays () {\n return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n },\n\n formattedMonth () {\n return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n },\n },\n\n watch: {\n selectMonth: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n selectYear: {\n handler () {\n this.highlightDay();\n this.$emit('calendar-days', this.calendarDays);\n },\n\n immediate: true,\n },\n\n },\n\n mounted () {\n this.setButtonsRef();\n this.focusMonthYearPicker();\n },\n\n methods: {\n setButtonsRef () {\n this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n },\n\n focusMonthYearPicker () {\n this.focusPicker = 0;\n this.focusRefs[0].$el.focus();\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusPicker === 0) {\n this.focusPicker = 3;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker--;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusPicker === 3) {\n this.focusPicker = 0;\n this.focusRefs[this.focusPicker].$el.focus();\n } else {\n this.focusPicker++;\n this.focusRefs[this.focusPicker].$el.focus();\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-first-day');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n highlightDay () {\n const year = getYear(this.selectedDate);\n const month = getMonth(this.selectedDate);\n\n if (year !== this.selectYear \|\| month !== this.selectMonth) {\n this.highlightedDay = null;\n } else {\n this.highlightedDay = getDate(this.selectedDate);\n }\n },\n\n changeMonth (value) {\n // Adjust year when changing from January to December or vice versa\n if ((this.selectMonth === 0 && value === -1) \|\| (this.selectMonth === 11 && value === 1)) {\n this.selectYear += value;\n }\n\n // Calculate the new date by adding or subtracting months\n const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n // Update the selected month\n this.selectMonth = getMonth(newDate);\n },\n\n changeYear (value) {\n this.selectYear = this.selectYear + value;\n },\n\n goToNextMonth () {\n this.changeMonth(1);\n },\n\n goToPrevMonth () {\n this.changeMonth(-1);\n },\n },\n};\n</script>\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=\"`buttonRef_${indexWeek}_${indexDays}`\"\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>\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils';\nimport { WEEK_START, MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n name: 'DtDatepickerCalendar',\n components: { DtButton },\n\n props: {\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\n emits: [\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 data () {\n return {\n // local selectedDay to override the received by props calendarDays\n selectedDay: null,\n focusDay: 0,\n daysRef: [],\n };\n },\n\n computed: {\n weekDays () {\n return getWeekDayNames(this.locale, WEEK_START);\n },\n },\n\n watch: {\n calendarDays () {\n // on calendarDays update, reset our local variables\n this.focusDay = 0;\n this.selectedDay = null;\n\n this.daysRef = [];\n\n this.$nextTick(() => {\n this.daysRef = [];\n this.setDayRef();\n });\n },\n },\n\n methods: {\n dayAriaLabel (day) {\n return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n },\n\n setDayRef (el, day) {\n this.calendarDays.forEach((week, weekIndex) => {\n week.days.forEach((day, dayIndex) => {\n const refKey = `buttonRef_${weekIndex}_${dayIndex}`;\n const dayButton = this.$refs[refKey];\n if (dayButton && day.currentMonth) {\n this.daysRef.push({ el: dayButton[0], day });\n }\n });\n });\n },\n\n handleKeyDown (event) {\n switch (event.key) {\n case 'ArrowUp':\n event.preventDefault();\n this.focusDay -= 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[prevFocusDate - 1].el.$el.focus();\n this.focusDay += prevFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowDown':\n event.preventDefault();\n this.focusDay += 7;\n try {\n this.daysRef[this.focusDay].el.$el.focus();\n } catch (error) {\n const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.setDayRef();\n this.daysRef[nextFocusDate - 1].el.$el.focus();\n this.focusDay += nextFocusDate - 1;\n });\n }\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n if (this.focusDay > 0) {\n this.focusDay -= 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month first day, jump to last day of prev month\n this.$emit('go-to-prev-month');\n this.$nextTick(() => {\n this.focusLastDay();\n });\n }\n break;\n\n case 'ArrowRight':\n event.preventDefault();\n if (this.focusDay < this.daysRef.length - 1) {\n this.focusDay += 1;\n this.daysRef[this.focusDay].el.$el.focus();\n } else {\n // if we are on month last day, jump to first day of next month\n this.$emit('go-to-next-month');\n this.$nextTick(() => {\n this.focusFirstDay();\n });\n }\n break;\n\n case 'Tab':\n event.preventDefault();\n this.$emit('focus-month-year-picker');\n break;\n\n case 'Escape':\n this.$emit('close-datepicker');\n break;\n }\n },\n\n focusFirstDay () {\n this.focusDay = 0;\n this.$nextTick(() => {\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n focusLastDay () {\n this.$nextTick(() => {\n this.focusDay = this.daysRef.length - 1;\n this.daysRef[this.focusDay].el.$el.focus();\n });\n },\n\n selectDay (day) {\n if (!day.currentMonth) { return; }\n\n // local selectedDay is updated when a day is selected\n this.selectedDay = day.text;\n this.$emit('select-date', day.value);\n },\n },\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>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\nimport { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n name: 'DtDatepicker',\n\n components: { DtStack, MonthYearPicker, Calendar },\n\n props: {\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\n emits: [\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\n data () {\n return {\n calendarDays: [],\n };\n },\n\n mounted () {\n warnIfUnmounted(this.$el, this.$options.name);\n },\n\n methods: {\n updateCalendarDays (days) {\n this.calendarDays = days;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtTooltip","DtStack","DtIconChevronLeft","DtIconChevronsLeft","DtIconChevronRight","DtIconChevronsRight","getMonth","getYear","getCalendarDays","month","formatMonth","INTL_MONTH_FORMAT","refName","event","year","getDate","value","initialDate","set","newDate","addMonths","subMonths","getWeekDayNames","WEEK_START","day","format","MONTH_FORMAT","el","week","weekIndex","dayIndex","refKey","dayButton","prevFocusDate","calculatePrevFocusDate","nextFocusDate","calculateNextFocusDate","MonthYearPicker","Calendar","warnIfUnmounted","days"],"mappings":"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"}

package/dist/vue2/lib/description-list/description-list.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../stack/stack-constants.cjs"),n=require("./description-list-constants.cjs"),a=require("./description-list-validators.cjs"),d=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),l={name:"DtDescriptionList",props:{direction:{type:String,default:"row",validator:s=>n.DT_DESCRIPTION_LIST_DIRECTION.includes(s)},items:{type:Array,default:()=>[],validator:s=>a.itemsValidator(s),required:!0},gap:{type:String,default:"400",validator:s=>r.DT_STACK_GAP.includes(s)},termClass:{type:[String,Array,Object],default:""},descriptionClass:{type:[String,Array,Object],default:""}},computed:{dtClass(){return["d-description-list__term",this.termClass]},ddClass(){return["d-description-list__description",this.descriptionClass]},getDirectionClass(){return`d-description-list--${this.direction}`},getGapClass(){return`d-description-list--gap-${this.gap}`}}};var c=function(){var t=this,i=t._self._c;return i("dl",{class:["d-description-list",t.getDirectionClass,t.getGapClass]},[t._l(t.items,function(e){return[i("dt",{key:`dt-${e.term}`,class:t.dtClass},[t._v(" "+t._s(e.term)+" ")]),i("dd",{key:`dd-${e.term}`,class:t.ddClass},[t._v(" "+t._s(e.description)+" ")])]})],2)},o=[],_=d.n(l,c,o,!1,null,null);const u=_.exports;exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../stack/stack-constants.cjs"),n=require("./description-list-constants.cjs"),d=require("./description-list-validators.cjs"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l={name:"DtDescriptionList",props:{direction:{type:String,default:"row",validator:s=>n.DT_DESCRIPTION_LIST_DIRECTION.includes(s)},items:{type:Array,default:()=>[],validator:s=>d.itemsValidator(s),required:!0},gap:{type:String,default:"400",validator:s=>r.DT_STACK_GAP.includes(s)},termClass:{type:[String,Array,Object],default:""},descriptionClass:{type:[String,Array,Object],default:""}},computed:{dtClass(){return["d-description-list__term",this.termClass]},ddClass(){return["d-description-list__description",this.descriptionClass]},getDirectionClass(){return`d-description-list--${this.direction}`},getGapClass(){return`d-description-list--gap-${this.gap}`}}};var c=function(){var t=this,i=t._self._c;return i("dl",{class:["d-description-list",t.getDirectionClass,t.getGapClass]},[t._l(t.items,function(e){return[i("dt",{key:`dt-${e.term}`,class:t.dtClass},[t._v(" "+t._s(e.term)+" ")]),i("dd",{key:`dd-${e.term}`,class:t.ddClass},[t._v(" "+t._s(e.description)+" ")])]})],2)},o=[],_=a.n(l,c,o);const p=_.exports;exports.default=p;
 //# sourceMappingURL=description-list.cjs.map

package/dist/vue2/lib/description-list/description-list.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { DT_STACK_GAP as i } from "../stack/stack-constants.js";
 import { DT_DESCRIPTION_LIST_DIRECTION as a } from "./description-list-constants.js";
 import { itemsValidator as d } from "./description-list-validators.js";
-import { n } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
-const l = {
+import { n } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const o = {
   name: "DtDescriptionList",
   props: {
     /**
@@ -12,7 +12,7 @@ const l = {
     direction: {
       type: String,
       default: "row",
-      validator: (s) => a.includes(s)
+      validator: (r) => a.includes(r)
     },
     /**
      * A list of items that represent the term and the description
@@ -20,7 +20,7 @@ const l = {
     items: {
       type: Array,
       default: () => [],
-      validator: (s) => d(s),
+      validator: (r) => d(r),
       required: !0
     },
     /**
@@ -30,7 +30,7 @@ const l = {
     gap: {
       type: String,
       default: "400",
-      validator: (s) => i.includes(s)
+      validator: (r) => i.includes(r)
     },
     /**
      * Used to customize the term element
@@ -62,18 +62,15 @@ const l = {
     }
   }
 };
-var o = function() {
+var l = function() {
   var t = this, e = t._self._c;
-  return e("dl", { class: ["d-description-list", t.getDirectionClass, t.getGapClass] }, [t._l(t.items, function(r) {
-    return [e("dt", { key: `dt-${r.term}`, class: t.dtClass }, [t._v(" " + t._s(r.term) + " ")]), e("dd", { key: `dd-${r.term}`, class: t.ddClass }, [t._v(" " + t._s(r.description) + " ")])];
+  return e("dl", { class: ["d-description-list", t.getDirectionClass, t.getGapClass] }, [t._l(t.items, function(s) {
+    return [e("dt", { key: `dt-${s.term}`, class: t.dtClass }, [t._v(" " + t._s(s.term) + " ")]), e("dd", { key: `dd-${s.term}`, class: t.ddClass }, [t._v(" " + t._s(s.description) + " ")])];
   })], 2);
 }, c = [], p = /* @__PURE__ */ n(
-  l,
   o,
-  c,
-  !1,
-  null,
-  null
+  l,
+  c
 );
 const C = p.exports;
 export {

package/dist/vue2/lib/description-list/description-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"description-list.js","sources":["../../../components/description_list/description_list.vue"],"sourcesContent":["<template>\n <dl :class=\"['d-description-list', getDirectionClass, getGapClass]\">\n <template\n v-for=\"item in items\"\n >\n <dt\n :key=\"`dt-${item.term}`\"\n :class=\"dtClass\"\n >\n {{ item.term }}\n </dt>\n <dd\n :key=\"`dd-${item.term}`\"\n :class=\"ddClass\"\n >\n {{ item.description }}\n </dd>\n </template>\n </dl>\n</template>\n\n<script>\nimport { DT_STACK_GAP } from '../stack/stack_constants';\nimport { DT_DESCRIPTION_LIST_DIRECTION } from './description_list_constants';\nimport { itemsValidator } from './description_list_validators';\n\nexport default {\n name: 'DtDescriptionList',\n\n props: {\n /*\n The direction for the list\n * @values row, column\n /\n direction: {\n type: String,\n default: 'row',\n validator: direction => DT_DESCRIPTION_LIST_DIRECTION.includes(direction),\n },\n\n /\n A list of items that represent the term and the description\n /\n items: {\n type: Array,\n default: () => [],\n validator: items => itemsValidator(items),\n required: true,\n },\n\n /\n Set the space between the elements\n * @values 0, 100, 200, 300, 400, 500, 600\n /\n gap: {\n type: String,\n default: '400',\n validator: (gap) => DT_STACK_GAP.includes(gap),\n },\n\n /\n Used to customize the term element\n /\n termClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the description element\n */\n descriptionClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n computed: {\n dtClass () {\n return ['d-description-list__term', this.termClass];\n },\n\n ddClass () {\n return ['d-description-list__description', this.descriptionClass];\n },\n\n getDirectionClass () {\n return `d-description-list--${this.direction}`;\n },\n\n getGapClass () {\n return `d-description-list--gap-${this.gap}`;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","direction","DT_DESCRIPTION_LIST_DIRECTION","items","itemsValidator","gap","DT_STACK_GAP"],"mappings":";;;;AA0BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,CAAA,4BAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,aAAA,CAAA,mCAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,uBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,2BAAA,KAAA,GAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"description-list.js","sources":["../../../components/description_list/description_list.vue"],"sourcesContent":["<template>\n <dl :class=\"['d-description-list', getDirectionClass, getGapClass]\">\n <template\n v-for=\"item in items\"\n >\n <dt\n :key=\"`dt-${item.term}`\"\n :class=\"dtClass\"\n >\n {{ item.term }}\n </dt>\n <dd\n :key=\"`dd-${item.term}`\"\n :class=\"ddClass\"\n >\n {{ item.description }}\n </dd>\n </template>\n </dl>\n</template>\n\n<script>\nimport { DT_STACK_GAP } from '../stack/stack_constants';\nimport { DT_DESCRIPTION_LIST_DIRECTION } from './description_list_constants';\nimport { itemsValidator } from './description_list_validators';\n\nexport default {\n name: 'DtDescriptionList',\n\n props: {\n /*\n The direction for the list\n * @values row, column\n /\n direction: {\n type: String,\n default: 'row',\n validator: direction => DT_DESCRIPTION_LIST_DIRECTION.includes(direction),\n },\n\n /\n A list of items that represent the term and the description\n /\n items: {\n type: Array,\n default: () => [],\n validator: items => itemsValidator(items),\n required: true,\n },\n\n /\n Set the space between the elements\n * @values 0, 100, 200, 300, 400, 500, 600\n /\n gap: {\n type: String,\n default: '400',\n validator: (gap) => DT_STACK_GAP.includes(gap),\n },\n\n /\n Used to customize the term element\n /\n termClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the description element\n */\n descriptionClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n computed: {\n dtClass () {\n return ['d-description-list__term', this.termClass];\n },\n\n ddClass () {\n return ['d-description-list__description', this.descriptionClass];\n },\n\n getDirectionClass () {\n return `d-description-list--${this.direction}`;\n },\n\n getGapClass () {\n return `d-description-list--gap-${this.gap}`;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","direction","DT_DESCRIPTION_LIST_DIRECTION","items","itemsValidator","gap","DT_STACK_GAP"],"mappings":";;;;AA0BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAC,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAAD,CAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAE,MAAAC,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,CAAA,4BAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,aAAA,CAAA,mCAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,uBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,2BAAA,KAAA,GAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/vue2/lib/dropdown/dropdown-list.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),s={name:"DtDropdownList",props:{heading:{type:String,default:""},listClass:{type:[String,Array,Object],default:""}}};var a=function(){var e=this,t=e._self._c;return t("li",[e.heading?t("div",{staticClass:"dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center"},[t("span",[e._v(e._s(e.heading))])]):e._e(),t("ul",{class:["d-ps-relative","d-stack2","d-px0",e.listClass],attrs:{"data-qa":"dt-dropdown-list-wrapper"}},[e._t("default")],2)])},r=[],l=d.n(s,a,r,!1,null,null);const n=l.exports;exports.default=n;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),s={name:"DtDropdownList",props:{heading:{type:String,default:""},listClass:{type:[String,Array,Object],default:""}}};var r=function(){var e=this,t=e._self._c;return t("li",[e.heading?t("div",{staticClass:"dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center"},[t("span",[e._v(e._s(e.heading))])]):e._e(),t("ul",{class:["d-ps-relative","d-stack2","d-px0",e.listClass],attrs:{"data-qa":"dt-dropdown-list-wrapper"}},[e._t("default")],2)])},a=[],n=d.n(s,r,a);const l=n.exports;exports.default=l;
 //# sourceMappingURL=dropdown-list.cjs.map

package/dist/vue2/lib/dropdown/dropdown-list.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { n as d } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
+import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 const s = {
   name: "DtDropdownList",
   props: {
@@ -19,15 +19,12 @@ const s = {
   }
 };
 var e = function() {
-  var t = this, a = t._self._c;
-  return a("li", [t.heading ? a("div", { staticClass: "dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center" }, [a("span", [t._v(t._s(t.heading))])]) : t._e(), a("ul", { class: ["d-ps-relative", "d-stack2", "d-px0", t.listClass], attrs: { "data-qa": "dt-dropdown-list-wrapper" } }, [t._t("default")], 2)]);
-}, r = [], n = /* @__PURE__ */ d(
+  var t = this, d = t._self._c;
+  return d("li", [t.heading ? d("div", { staticClass: "dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center" }, [d("span", [t._v(t._s(t.heading))])]) : t._e(), d("ul", { class: ["d-ps-relative", "d-stack2", "d-px0", t.listClass], attrs: { "data-qa": "dt-dropdown-list-wrapper" } }, [t._t("default")], 2)]);
+}, r = [], n = /* @__PURE__ */ a(
   s,
   e,
-  r,
-  !1,
-  null,
-  null
+  r
 );
 const o = n.exports;
 export {

package/dist/vue2/lib/dropdown/dropdown-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown-list.js","sources":["../../../components/dropdown/dropdown_list.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <li>\n <div\n v-if=\"heading\"\n class=\"dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center\"\n >\n <span>{{ heading }}</span>\n </div>\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->\n <ul\n :class=\"['d-ps-relative', 'd-stack2', 'd-px0', listClass]\"\n data-qa=\"dt-dropdown-list-wrapper\"\n >\n <!-- @slot Slot for the list component -->\n <slot />\n </ul>\n </li>\n</template>\n\n<script>\nexport default {\n name: 'DtDropdownList',\n props: {\n /*\n List's heading.\n /\n heading: {\n type: String,\n default: '',\n },\n\n /\n Additional class for the wrapper list element.\n */\n listClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n};\n</script>\n"],"names":["_sfc_main"],"mappings":";AAqBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"dropdown-list.js","sources":["../../../components/dropdown/dropdown_list.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <li>\n <div\n v-if=\"heading\"\n class=\"dt-dropdown-list--header d-fs12 d-fc-black-400 d-fw-bold d-lh4 d-py4 d-px12 d-d-flex d-ai-center\"\n >\n <span>{{ heading }}</span>\n </div>\n <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->\n <ul\n :class=\"['d-ps-relative', 'd-stack2', 'd-px0', listClass]\"\n data-qa=\"dt-dropdown-list-wrapper\"\n >\n <!-- @slot Slot for the list component -->\n <slot />\n </ul>\n </li>\n</template>\n\n<script>\nexport default {\n name: 'DtDropdownList',\n props: {\n /*\n List's heading.\n /\n heading: {\n type: String,\n default: '',\n },\n\n /\n Additional class for the wrapper list element.\n */\n listClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n};\n</script>\n"],"names":["_sfc_main"],"mappings":";AAqBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;"}

package/dist/vue2/lib/dropdown/dropdown-separator.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),a={name:"DtDropdownSeparator"};var n=function(){var e=this,r=e._self._c;return r("li",{staticClass:"d-list-item-separator",attrs:{"aria-hidden":"true"}})},s=[],o=t.n(a,n,s,!1,null,null);const _=o.exports;exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),a={name:"DtDropdownSeparator"};var n=function(){var e=this,r=e._self._c;return r("li",{staticClass:"d-list-item-separator",attrs:{"aria-hidden":"true"}})},s=[],o=t.n(a,n,s);const _=o.exports;exports.default=_;
 //# sourceMappingURL=dropdown-separator.cjs.map