@dialpad/dialtone 9.130.0 → 9.131.0

package/dist/vue3/lib/contact-row/contact-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact-row.cjs","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    v-bind=\"$attrs\"\n    data-qa=\"contact-row\"\n    v-on=\"contactRowListeners\"\n    @call=\"$emit('call', $event)\"\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';\nimport { DtAvatar } from '@/components/avatar';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\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  emits: [\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    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\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","extractVueListeners","safeConcatStrings","_hoisted_1","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_cache","$event","_createVNode","_component_dt_avatar","_createSlots","_withCtx","_component_dt_icon_user","_component_dt_emoji_text_wrapper","_createTextVNode","_toDisplayString","_createElementVNode","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"contact-row.cjs","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    v-bind=\"$attrs\"\n    data-qa=\"contact-row\"\n    v-on=\"contactRowListeners\"\n    @call=\"$emit('call', $event)\"\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';\nimport { DtAvatar } from '@/components/avatar';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\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  emits: [\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    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\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","extractVueListeners","safeConcatStrings","_hoisted_1","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_cache","$event","_createVNode","_component_dt_avatar","_createSlots","_withCtx","_component_dt_icon_user","_component_dt_emoji_text_wrapper","_createTextVNode","_toDisplayString","_createElementVNode","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":"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"}

package/dist/vue3/lib/contact-row/contact-row.js

@@ -1,17 +1,17 @@
-import { extractVueListeners as w, safeConcatStrings as g } from "../../common/utils/index.js";
+import { safeConcatStrings as w, extractVueListeners as g } from "../../common/utils/index.js";
 import { DtIconUser as C } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent as a, openBlock as o, createBlock as d, mergeProps as S, toHandlers as v, withCtx as t, createVNode as s, createSlots as h, createTextVNode as u, toDisplayString as c, createElementVNode as x, createElementBlock as b, normalizeClass as B, createCommentVNode as m } from "vue";
+import { resolveComponent as a, createBlock as d, openBlock as o, mergeProps as S, toHandlers as v, withCtx as t, createVNode as s, createElementVNode as h, createTextVNode as u, toDisplayString as c, createElementBlock as x, createCommentVNode as m, normalizeClass as b, createSlots as B } from "vue";
 import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import T from "../avatar/avatar.js";
+import T from "../emoji-text-wrapper/emoji-text-wrapper.js";
 import k from "../general-row/general-row.js";
-import R from "../emoji-text-wrapper/emoji-text-wrapper.js";
+import R from "../avatar/avatar.js";
 const q = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeContactRow",
   components: {
-    DtAvatar: T,
+    DtAvatar: R,
     DtRecipeGeneralRow: k,
-    DtEmojiTextWrapper: R,
+    DtEmojiTextWrapper: T,
     DtIconUser: C
   },
   inheritAttrs: !1,
@@ -139,10 +139,10 @@ const q = {
       }[this.avatarPresence];
     },
     contactRowListeners() {
-      return w(this.$attrs);
+      return g(this.$attrs);
     },
     contactDescription() {
-      return g([this.name, this.presenceText, this.userStatus]);
+      return w([this.name, this.presenceText, this.userStatus]);
     }
   }
 }, z = { class: "d-recipe-leftbar-row__status" };
@@ -168,7 +168,7 @@ function V(r, l, e, E, F, n) {
         size: "sm",
         seed: e.avatarSeed,
         presence: e.avatarPresence
-      }, h({ _: 2 }, [
+      }, B({ _: 2 }, [
         e.noInitials ? {
           name: "icon",
           fn: t(() => [
@@ -189,11 +189,11 @@ function V(r, l, e, E, F, n) {
         ]),
         _: 1
       }),
-      x("div", z, [
-        e.presenceText ? (o(), b("span", {
+      h("div", z, [
+        e.presenceText ? (o(), x("span", {
           key: 0,
           "data-qa": "dt-recipe-leftbar-row-presence-text",
-          class: B(["d-recipe-leftbar-row__meta-context", n.presenceFontColorClass])
+          class: b(["d-recipe-leftbar-row__meta-context", n.presenceFontColorClass])
         }, c(e.presenceText), 3)) : m("", !0),
         e.userStatus ? (o(), d(i, {
           key: 1,

package/dist/vue3/lib/contact-row/contact-row.js.map

@@ -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    v-bind=\"$attrs\"\n    data-qa=\"contact-row\"\n    v-on=\"contactRowListeners\"\n    @call=\"$emit('call', $event)\"\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';\nimport { DtAvatar } from '@/components/avatar';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\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  emits: [\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    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\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","extractVueListeners","safeConcatStrings","_hoisted_1","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_cache","$event","_createVNode","_component_dt_avatar","_createSlots","_withCtx","_component_dt_icon_user","_component_dt_emoji_text_wrapper","_createTextVNode","_toDisplayString","_createElementVNode","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":"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"}
+{"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    v-bind=\"$attrs\"\n    data-qa=\"contact-row\"\n    v-on=\"contactRowListeners\"\n    @call=\"$emit('call', $event)\"\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';\nimport { DtAvatar } from '@/components/avatar';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\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  emits: [\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    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\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","extractVueListeners","safeConcatStrings","_hoisted_1","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_cache","$event","_createVNode","_component_dt_avatar","_createSlots","_withCtx","_component_dt_icon_user","_component_dt_emoji_text_wrapper","_createTextVNode","_toDisplayString","_createElementVNode","_createElementBlock","_normalizeClass","_createCommentVNode"],"mappings":";;;;;;;AAuEA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,oBAAAC;AAAAA,IACA,YAAAC;AAAA;EAGF,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;;;;;IAUX,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAMZ,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;EAGF,UAAU;AAAA,IACR,yBAA0B;AAOxB,aAN2B;AAAA,QACzB,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QAGkB,KAAK,cAAc;AAAA,IAC/C;AAAA,IAEA,sBAAuB;AACrB,aAAOC,EAAoB,KAAK,MAAM;AAAA,IACxC;AAAA,IAEA,qBAAsB;AACpB,aAAOC,EAAkB,CAAC,KAAK,MAAM,KAAK,cAAc,KAAK,UAAU,CAAC;AAAA,IAC1E;AAAA;AAEJ,GA/LWC,IAAA,EAAA,OAAM,+BAA8B;;;AAzC7C,SAAAC,EAAA,GAAAC,EA4DwBC,GA5DxBC,EA4DwB;AAAA,IA3DrB,gBAAcC,EAAA;AAAA,IACd,aAAaC,EAAA;AAAA,IACb,eAAaD,EAAA;AAAA,IACb,UAAUA,EAAA;AAAA,IACV,mBAAiBA,EAAA;AAAA,IACjB,OAAOA,EAAA;AAAA,IACP,aAAWA,EAAA;AAAA,EACJ,GAAAE,EAAA,UACR,WAAQ,cAAa,GACrBC,EAA0BF,EAApB,mBAAmB,GAAA;AAAA,IACxB,QAAIG,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEH,EAAA,MAAK,QAASG,CAAM;AAAA;IAEhB,QACT,MAiBY;AAAA,MAjBZC,EAiBYC,GAAA;AAAA,QAhBT,aAAWP,EAAA;AAAA,QACX,aAAWA,EAAA;AAAA,QACX,OAAOA,EAAA;AAAA,QACR,aAAU;AAAA,QACV,MAAK;AAAA,QACJ,MAAMA,EAAA;AAAA,QACN,UAAUA,EAAA;AAAA,MAtBnB,GAAAQ,EAAA,EAAA,GAAA,KAAA;AAAA,QAyBgBR,EAAA;UAzBhB,MA0BW;AAAA,UA1BX,IAAAS,EA4BU,MAEE;AAAA,YAFFH,EAEEI,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;UA7BtB,KAAA;AAAA,YAAA;AAAA;;IAkCe,SACT,MAMwB;AAAA,MANxBJ,EAMwBK,GAAA;AAAA,QALtB,OAAM;AAAA,QACN,WAAQ;AAAA,QACR,MAAK;AAAA;QAtCb,SAAAF,EAwCQ,MAAU;AAAA,UAxClBG,EAAAC,EAwCWb,EAAA,IAAI,GAAA,CAAA;AAAA;QAxCf,GAAA;AAAA;MA0CMc,EAiBM,OAjBNnB,GAiBM;AAAA,QAfIK,EAAA,qBADRe,EAMO,QAAA;AAAA,UAjDf,KAAA;AAAA,UA6CU,WAAQ;AAAA,UACP,OA9CXC,yCA8CyDf,EAAA,sBAAsB,CAAA;AAAA,aAElED,EAAA,YAAY,GAAA,CAAA,KAhDzBiB,EAAA,IAAA,EAAA;AAAA,QAmDgBjB,EAAA,mBADRH,EAQwBc,GAAA;AAAA,UA1DhC,KAAA;AAAA,UAoDU,MAAK;AAAA,UACL,gBAAa;AAAA,UACb,WAAQ;AAAA,UACR,OAAM;AAAA;UAvDhB,SAAAF,EAyDU,MAAgB;AAAA,YAzD1BG,EAAAC,EAyDab,EAAA,UAAU,GAAA,CAAA;AAAA;UAzDvB,GAAA;AAAA,cAAAiB,EAAA,IAAA,EAAA;AAAA;;IAAA,GAAA;AAAA;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"datepicker.cjs","sources":["../../../components/datepicker/composables/useMonthYearPicker.js","../../../components/datepicker/modules/month-year-picker.vue","../../../components/datepicker/composables/useCalendar.js","../../../components/datepicker/modules/calendar.vue","../../../components/datepicker/datepicker.vue"],"sourcesContent":["import { computed, ref, watch } from 'vue';\nimport { addMonths, getDate, getMonth, getYear, set, subMonths } from 'date-fns';\nimport { formatMonth, getCalendarDays } from '../utils.js';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useMonthYearPicker (props, emits) {\n  const selectMonth = ref(getMonth(props.selectedDate));\n  const selectYear = ref(getYear(props.selectedDate));\n  const highlightedDay = ref(null);\n  const focusPicker = ref(0);\n  const focusRefs = ref([]);\n  const i18n = new DialtoneLocalization();\n\n  const calendarDays = computed(() => {\n    return getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value);\n  });\n\n  watch(selectMonth, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  watch(selectYear, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  function formattedMonth (month) {\n    return formatMonth(month, INTL_MONTH_FORMAT, i18n.currentLocale);\n  }\n\n  function setDayRef (el) {\n    if (!focusRefs.value.includes(el)) {\n      focusRefs.value.push(el);\n    }\n  }\n\n  function focusMonthYearPicker () {\n    returnFirstEl(focusRefs.value[0].$el).focus();\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusPicker.value === 0) {\n          focusPicker.value = 3;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value--;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusPicker.value === 3) {\n          focusPicker.value = 0;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value++;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function highlightDay () {\n    const year = getYear(props.selectedDate);\n    const month = getMonth(props.selectedDate);\n\n    if (year !== selectYear.value || month !== selectMonth.value) {\n      highlightedDay.value = null;\n    } else {\n      highlightedDay.value = getDate(props.selectedDate);\n    }\n  }\n\n  function changeMonth (value) {\n    // Adjust year when changing from January to December or vice versa\n    if ((selectMonth.value === 0 && value === -1) || (selectMonth.value === 11 && value === 1)) {\n      selectYear.value += value;\n    }\n\n    // Calculate the new date by adding or subtracting months\n    const initialDate = set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });\n    const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n    // Update the selected month\n    selectMonth.value = getMonth(newDate);\n  }\n\n  function changeYear (value) {\n    selectYear.value = selectYear.value + value;\n  }\n\n  function goToNextMonth () {\n    changeMonth(1);\n  }\n\n  function goToPrevMonth () {\n    changeMonth(-1);\n  }\n\n  function previousYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')} ${selectYear.value - 1}`;\n  }\n\n  function previousMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')} ${formattedMonth(selectMonth.value - 1)}`;\n  }\n\n  function nextYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')} ${selectYear.value + 1}`;\n  }\n\n  function nextMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')} ${formattedMonth(selectMonth.value + 1)}`;\n  }\n\n  return {\n    selectMonth,\n    selectYear,\n    formattedMonth,\n    setDayRef,\n    focusMonthYearPicker,\n    handleKeyDown,\n    changeMonth,\n    changeYear,\n    goToNextMonth,\n    goToPrevMonth,\n    previousYearAriaLabel,\n    previousMonthAriaLabel,\n    nextYearAriaLabel,\n    nextMonthAriaLabel,\n  };\n}\n","<template>\n  <dt-stack\n    class=\"d-datepicker__month-year\"\n    direction=\"row\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousYearAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousMonthAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextMonthAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextYearAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script setup>\nimport {\n  DtIconChevronLeft,\n  DtIconChevronsLeft,\n  DtIconChevronRight,\n  DtIconChevronsRight,\n} from '@dialpad/dialtone-icons/vue3';\nimport { DtStack } from '@/components/stack';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { onMounted } from 'vue';\nimport { useMonthYearPicker } from '../composables/useMonthYearPicker.js';\nimport { DialtoneLocalization } from '@/localization';\n\nconst props = defineProps({\n  selectedDate: {\n    type: Date,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n  'calendar-days',\n\n  /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n  'focus-first-day',\n\n  /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n  'focus-last-day',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst i18n = new DialtoneLocalization();\n\nconst {\n  selectMonth,\n  selectYear,\n  formattedMonth,\n  setDayRef,\n  focusMonthYearPicker,\n  handleKeyDown,\n  changeMonth,\n  changeYear,\n  goToNextMonth,\n  goToPrevMonth,\n  previousYearAriaLabel,\n  previousMonthAriaLabel,\n  nextMonthAriaLabel,\n  nextYearAriaLabel,\n} = useMonthYearPicker(props, emits);\n\nonMounted(() => {\n  focusMonthYearPicker();\n});\n\ndefineExpose({\n  focusMonthYearPicker,\n  goToNextMonth,\n  goToPrevMonth,\n});\n</script>\n","import { computed, ref, watch, nextTick } from 'vue';\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate, formatDate } from '../utils.js';\nimport { INTL_MONTH_FORMAT, WEEK_START } from '../datepicker_constants.js';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useCalendar (props, emits) {\n  const selectedDay = ref(null);\n  const focusDay = ref(0);\n  const daysRef = ref([]);\n  const i18n = new DialtoneLocalization();\n\n  const weekDays = computed(() => {\n    return getWeekDayNames(props.locale, WEEK_START);\n  });\n\n  watch(() => props.calendarDays, () => {\n    focusDay.value = 0;\n    daysRef.value = [];\n    selectedDay.value = null;\n  });\n\n  function dayAriaLabel (day) {\n    return i18n.$t('DIALTONE_DATEPICKER_SELECT_DAY') + ` ${formatDate(day.value, INTL_MONTH_FORMAT, i18n.currentLocale)}`;\n  }\n\n  function setDayRef (el, day) {\n    if (!daysRef.value.some(day => day.el === el) && day.currentMonth) {\n      daysRef.value.push({ el, day });\n    }\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n        focusDay.value -= 7;\n        try {\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } catch (error) {\n          const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);\n          emits('go-to-prev-month');\n\n          nextTick(() => {\n            returnFirstEl(daysRef.value[prevFocusDate - 1].el.$el).focus();\n            focusDay.value += prevFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        focusDay.value += 7;\n        try {\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } catch (error) {\n          const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);\n          emits('go-to-next-month');\n\n          nextTick(() => {\n            returnFirstEl(daysRef.value[nextFocusDate - 1].el.$el).focus();\n            focusDay.value += nextFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusDay.value > 0) {\n          focusDay.value -= 1;\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } else {\n          // if we are on month first day, jump to last day of prev month\n          emits('go-to-prev-month');\n          focusLastDay();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusDay.value < daysRef.value.length - 1) {\n          focusDay.value += 1;\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } else {\n          // if we are on month last day, jump to first day of next month\n          emits('go-to-next-month');\n\n          focusFirstDay();\n        }\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-month-year-picker');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function focusFirstDay () {\n    focusDay.value = 0;\n\n    nextTick(() => {\n      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function focusLastDay () {\n    nextTick(() => {\n      focusDay.value = daysRef.value.length - 1;\n      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function selectDay (day) {\n    if (!day.currentMonth) { return; }\n\n    // local selectedDay is updated when a day is selected\n    selectedDay.value = day.text;\n    emits('select-date', day.value);\n  }\n\n  return {\n    selectedDay,\n    weekDays,\n    dayAriaLabel,\n    setDayRef,\n    handleKeyDown,\n    focusFirstDay,\n    selectDay,\n  };\n}\n","<template>\n  <table\n    class=\"d-datepicker__calendar\"\n    aria-labelledby=\"calendar-heading\"\n  >\n    <thead>\n      <tr>\n        <th\n          v-for=\"day in weekDays\"\n          :key=\"day\"\n          scope=\"col\"\n          class=\"d-datepicker__cell d-datepicker__cell--header\"\n        >\n          <span\n            class=\"d-datepicker__weekday\"\n            :title=\"day\"\n            :aria-label=\"day\"\n          > {{ day }}</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(week, indexWeek) in calendarDays\"\n        :key=\"indexWeek\"\n      >\n        <td\n          v-for=\"(day, indexDays) in week.days\"\n          :key=\"indexWeek + indexDays\"\n          class=\"d-datepicker__cell\"\n          role=\"listbox\"\n        >\n          <dt-button\n            :ref=\"el => { if (el) setDayRef(el, day) }\"\n            class=\"d-datepicker__day\"\n            :circle=\"true\"\n            size=\"sm\"\n            importance=\"clear\"\n            :disabled=\"!day.currentMonth\"\n            :class=\"{\n              'd-datepicker__day--disabled': !day.currentMonth,\n              'd-datepicker__day--selected': selectedDay\n                ? ((day.text === selectedDay) && day.currentMonth)\n                : day.selected,\n            }\"\n            type=\"button\"\n            :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && day.currentMonth) : day.selected\"\n            :aria-label=\"dayAriaLabel(day)\"\n            role=\"option\"\n            @click=\"selectDay(day)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            {{ day.text }}\n          </dt-button>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script setup>\nimport { useCalendar } from '../composables/useCalendar.js';\nimport { DtButton } from '@/components/button';\n\nconst props = defineProps({\n  calendarDays: {\n    type: Array,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event select-date\n     * @type {Date}\n     */\n  'select-date',\n\n  /**\n     * Will focus the month and year picker\n     *\n     * @event focus-month-year-picker\n     */\n  'focus-month-year-picker',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n\n  /**\n     * Will go to the next month\n     *\n     * @event go-to-next-month\n     */\n  'go-to-next-month',\n\n  /**\n     * Will go to the previous month\n     *\n     * @event go-to-prev-month\n     */\n  'go-to-prev-month',\n]);\n\nconst {\n  selectedDay,\n  weekDays,\n  dayAriaLabel,\n  setDayRef,\n  handleKeyDown,\n  focusFirstDay,\n  selectDay,\n} = useCalendar(props, emits);\n\ndefineExpose({\n  focusFirstDay,\n});\n</script>\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :selected-date=\"selectedDate\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :calendar-days=\"calendarDays\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport { DtStack } from '@/components/stack';\nimport { returnFirstEl, warnIfUnmounted } from '@/common/utils';\nimport { onMounted, ref, getCurrentInstance } from 'vue';\n\ndefineProps({\n  /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n  selectedDate: {\n    type: Date,\n    default: () => (new Date()),\n  },\n});\n\ndefineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n  'selected-date',\n\n  /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst calendarDays = ref([]);\n\nfunction updateCalendarDays (days) {\n  calendarDays.value = days;\n}\n\nonMounted(() => {\n  const instance = getCurrentInstance();\n  warnIfUnmounted(returnFirstEl(instance.proxy.$el), 'datepicker');\n});\n</script>\n"],"names":["useMonthYearPicker","props","emits","selectMonth","ref","getMonth","selectYear","getYear","highlightedDay","focusPicker","focusRefs","i18n","DialtoneLocalization","calendarDays","computed","getCalendarDays","watch","highlightDay","formattedMonth","month","formatMonth","INTL_MONTH_FORMAT","setDayRef","el","focusMonthYearPicker","returnFirstEl","handleKeyDown","event","year","getDate","changeMonth","value","initialDate","set","newDate","addMonths","subMonths","changeYear","goToNextMonth","goToPrevMonth","previousYearAriaLabel","previousMonthAriaLabel","nextYearAriaLabel","nextMonthAriaLabel","__props","__emit","onMounted","__expose","useCalendar","selectedDay","focusDay","daysRef","weekDays","getWeekDayNames","WEEK_START","dayAriaLabel","day","formatDate","prevFocusDate","calculatePrevFocusDate","nextTick","nextFocusDate","calculateNextFocusDate","focusLastDay","focusFirstDay","selectDay","updateCalendarDays","days","instance","getCurrentInstance","warnIfUnmounted"],"mappings":"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"}
+{"version":3,"file":"datepicker.cjs","sources":["../../../components/datepicker/composables/useMonthYearPicker.js","../../../components/datepicker/modules/month-year-picker.vue","../../../components/datepicker/composables/useCalendar.js","../../../components/datepicker/modules/calendar.vue","../../../components/datepicker/datepicker.vue"],"sourcesContent":["import { computed, ref, watch } from 'vue';\nimport { addMonths, getDate, getMonth, getYear, set, subMonths } from 'date-fns';\nimport { formatMonth, getCalendarDays } from '../utils.js';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useMonthYearPicker (props, emits) {\n  const selectMonth = ref(getMonth(props.selectedDate));\n  const selectYear = ref(getYear(props.selectedDate));\n  const highlightedDay = ref(null);\n  const focusPicker = ref(0);\n  const focusRefs = ref([]);\n  const i18n = new DialtoneLocalization();\n\n  const calendarDays = computed(() => {\n    return getCalendarDays(selectMonth.value, selectYear.value, highlightedDay.value);\n  });\n\n  watch(selectMonth, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  watch(selectYear, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  function formattedMonth (month) {\n    return formatMonth(month, INTL_MONTH_FORMAT, i18n.currentLocale);\n  }\n\n  function setDayRef (el) {\n    if (!focusRefs.value.includes(el)) {\n      focusRefs.value.push(el);\n    }\n  }\n\n  function focusMonthYearPicker () {\n    returnFirstEl(focusRefs.value[0].$el).focus();\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusPicker.value === 0) {\n          focusPicker.value = 3;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value--;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusPicker.value === 3) {\n          focusPicker.value = 0;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value++;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function highlightDay () {\n    const year = getYear(props.selectedDate);\n    const month = getMonth(props.selectedDate);\n\n    if (year !== selectYear.value || month !== selectMonth.value) {\n      highlightedDay.value = null;\n    } else {\n      highlightedDay.value = getDate(props.selectedDate);\n    }\n  }\n\n  function changeMonth (value) {\n    // Adjust year when changing from January to December or vice versa\n    if ((selectMonth.value === 0 && value === -1) || (selectMonth.value === 11 && value === 1)) {\n      selectYear.value += value;\n    }\n\n    // Calculate the new date by adding or subtracting months\n    const initialDate = set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });\n    const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n    // Update the selected month\n    selectMonth.value = getMonth(newDate);\n  }\n\n  function changeYear (value) {\n    selectYear.value = selectYear.value + value;\n  }\n\n  function goToNextMonth () {\n    changeMonth(1);\n  }\n\n  function goToPrevMonth () {\n    changeMonth(-1);\n  }\n\n  function previousYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')} ${selectYear.value - 1}`;\n  }\n\n  function previousMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')} ${formattedMonth(selectMonth.value - 1)}`;\n  }\n\n  function nextYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')} ${selectYear.value + 1}`;\n  }\n\n  function nextMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')} ${formattedMonth(selectMonth.value + 1)}`;\n  }\n\n  return {\n    selectMonth,\n    selectYear,\n    formattedMonth,\n    setDayRef,\n    focusMonthYearPicker,\n    handleKeyDown,\n    changeMonth,\n    changeYear,\n    goToNextMonth,\n    goToPrevMonth,\n    previousYearAriaLabel,\n    previousMonthAriaLabel,\n    nextYearAriaLabel,\n    nextMonthAriaLabel,\n  };\n}\n","<template>\n  <dt-stack\n    class=\"d-datepicker__month-year\"\n    direction=\"row\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousYearAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousMonthAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextMonthAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextYearAriaLabel()\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script setup>\nimport {\n  DtIconChevronLeft,\n  DtIconChevronsLeft,\n  DtIconChevronRight,\n  DtIconChevronsRight,\n} from '@dialpad/dialtone-icons/vue3';\nimport { DtStack } from '@/components/stack';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { onMounted } from 'vue';\nimport { useMonthYearPicker } from '../composables/useMonthYearPicker.js';\nimport { DialtoneLocalization } from '@/localization';\n\nconst props = defineProps({\n  selectedDate: {\n    type: Date,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n  'calendar-days',\n\n  /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n  'focus-first-day',\n\n  /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n  'focus-last-day',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst i18n = new DialtoneLocalization();\n\nconst {\n  selectMonth,\n  selectYear,\n  formattedMonth,\n  setDayRef,\n  focusMonthYearPicker,\n  handleKeyDown,\n  changeMonth,\n  changeYear,\n  goToNextMonth,\n  goToPrevMonth,\n  previousYearAriaLabel,\n  previousMonthAriaLabel,\n  nextMonthAriaLabel,\n  nextYearAriaLabel,\n} = useMonthYearPicker(props, emits);\n\nonMounted(() => {\n  focusMonthYearPicker();\n});\n\ndefineExpose({\n  focusMonthYearPicker,\n  goToNextMonth,\n  goToPrevMonth,\n});\n</script>\n","import { computed, ref, watch, nextTick } from 'vue';\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate, formatDate } from '../utils.js';\nimport { INTL_MONTH_FORMAT, WEEK_START } from '../datepicker_constants.js';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useCalendar (props, emits) {\n  const selectedDay = ref(null);\n  const focusDay = ref(0);\n  const daysRef = ref([]);\n  const i18n = new DialtoneLocalization();\n\n  const weekDays = computed(() => {\n    return getWeekDayNames(props.locale, WEEK_START);\n  });\n\n  watch(() => props.calendarDays, () => {\n    focusDay.value = 0;\n    daysRef.value = [];\n    selectedDay.value = null;\n  });\n\n  function dayAriaLabel (day) {\n    return i18n.$t('DIALTONE_DATEPICKER_SELECT_DAY') + ` ${formatDate(day.value, INTL_MONTH_FORMAT, i18n.currentLocale)}`;\n  }\n\n  function setDayRef (el, day) {\n    if (!daysRef.value.some(day => day.el === el) && day.currentMonth) {\n      daysRef.value.push({ el, day });\n    }\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n        focusDay.value -= 7;\n        try {\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } catch {\n          const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);\n          emits('go-to-prev-month');\n\n          nextTick(() => {\n            returnFirstEl(daysRef.value[prevFocusDate - 1].el.$el).focus();\n            focusDay.value += prevFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        focusDay.value += 7;\n        try {\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } catch {\n          const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);\n          emits('go-to-next-month');\n\n          nextTick(() => {\n            returnFirstEl(daysRef.value[nextFocusDate - 1].el.$el).focus();\n            focusDay.value += nextFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusDay.value > 0) {\n          focusDay.value -= 1;\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } else {\n          // if we are on month first day, jump to last day of prev month\n          emits('go-to-prev-month');\n          focusLastDay();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusDay.value < daysRef.value.length - 1) {\n          focusDay.value += 1;\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } else {\n          // if we are on month last day, jump to first day of next month\n          emits('go-to-next-month');\n\n          focusFirstDay();\n        }\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-month-year-picker');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function focusFirstDay () {\n    focusDay.value = 0;\n\n    nextTick(() => {\n      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function focusLastDay () {\n    nextTick(() => {\n      focusDay.value = daysRef.value.length - 1;\n      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function selectDay (day) {\n    if (!day.currentMonth) { return; }\n\n    // local selectedDay is updated when a day is selected\n    selectedDay.value = day.text;\n    emits('select-date', day.value);\n  }\n\n  return {\n    selectedDay,\n    weekDays,\n    dayAriaLabel,\n    setDayRef,\n    handleKeyDown,\n    focusFirstDay,\n    selectDay,\n  };\n}\n","<template>\n  <table\n    class=\"d-datepicker__calendar\"\n    aria-labelledby=\"calendar-heading\"\n  >\n    <thead>\n      <tr>\n        <th\n          v-for=\"day in weekDays\"\n          :key=\"day\"\n          scope=\"col\"\n          class=\"d-datepicker__cell d-datepicker__cell--header\"\n        >\n          <span\n            class=\"d-datepicker__weekday\"\n            :title=\"day\"\n            :aria-label=\"day\"\n          > {{ day }}</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(week, indexWeek) in calendarDays\"\n        :key=\"indexWeek\"\n      >\n        <td\n          v-for=\"(day, indexDays) in week.days\"\n          :key=\"indexWeek + indexDays\"\n          class=\"d-datepicker__cell\"\n          role=\"listbox\"\n        >\n          <dt-button\n            :ref=\"el => { if (el) setDayRef(el, day) }\"\n            class=\"d-datepicker__day\"\n            :circle=\"true\"\n            size=\"sm\"\n            importance=\"clear\"\n            :disabled=\"!day.currentMonth\"\n            :class=\"{\n              'd-datepicker__day--disabled': !day.currentMonth,\n              'd-datepicker__day--selected': selectedDay\n                ? ((day.text === selectedDay) && day.currentMonth)\n                : day.selected,\n            }\"\n            type=\"button\"\n            :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && day.currentMonth) : day.selected\"\n            :aria-label=\"dayAriaLabel(day)\"\n            role=\"option\"\n            @click=\"selectDay(day)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            {{ day.text }}\n          </dt-button>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script setup>\nimport { useCalendar } from '../composables/useCalendar.js';\nimport { DtButton } from '@/components/button';\n\nconst props = defineProps({\n  calendarDays: {\n    type: Array,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event select-date\n     * @type {Date}\n     */\n  'select-date',\n\n  /**\n     * Will focus the month and year picker\n     *\n     * @event focus-month-year-picker\n     */\n  'focus-month-year-picker',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n\n  /**\n     * Will go to the next month\n     *\n     * @event go-to-next-month\n     */\n  'go-to-next-month',\n\n  /**\n     * Will go to the previous month\n     *\n     * @event go-to-prev-month\n     */\n  'go-to-prev-month',\n]);\n\nconst {\n  selectedDay,\n  weekDays,\n  dayAriaLabel,\n  setDayRef,\n  handleKeyDown,\n  focusFirstDay,\n  selectDay,\n} = useCalendar(props, emits);\n\ndefineExpose({\n  focusFirstDay,\n});\n</script>\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :selected-date=\"selectedDate\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :calendar-days=\"calendarDays\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport { DtStack } from '@/components/stack';\nimport { returnFirstEl, warnIfUnmounted } from '@/common/utils';\nimport { onMounted, ref, getCurrentInstance } from 'vue';\n\ndefineProps({\n  /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n  selectedDate: {\n    type: Date,\n    default: () => (new Date()),\n  },\n});\n\ndefineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n  'selected-date',\n\n  /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst calendarDays = ref([]);\n\nfunction updateCalendarDays (days) {\n  calendarDays.value = days;\n}\n\nonMounted(() => {\n  const instance = getCurrentInstance();\n  warnIfUnmounted(returnFirstEl(instance.proxy.$el), 'datepicker');\n});\n</script>\n"],"names":["useMonthYearPicker","props","emits","selectMonth","ref","getMonth","selectYear","getYear","highlightedDay","focusPicker","focusRefs","i18n","DialtoneLocalization","calendarDays","computed","getCalendarDays","watch","highlightDay","formattedMonth","month","formatMonth","INTL_MONTH_FORMAT","setDayRef","el","focusMonthYearPicker","returnFirstEl","handleKeyDown","event","year","getDate","changeMonth","value","initialDate","set","newDate","addMonths","subMonths","changeYear","goToNextMonth","goToPrevMonth","previousYearAriaLabel","previousMonthAriaLabel","nextYearAriaLabel","nextMonthAriaLabel","__props","__emit","onMounted","__expose","useCalendar","selectedDay","focusDay","daysRef","weekDays","getWeekDayNames","WEEK_START","dayAriaLabel","day","formatDate","prevFocusDate","calculatePrevFocusDate","nextTick","nextFocusDate","calculateNextFocusDate","focusLastDay","focusFirstDay","selectDay","updateCalendarDays","days","instance","getCurrentInstance","warnIfUnmounted"],"mappings":"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"}