@dialpad/dialtone 9.110.1 → 9.111.0

package/dist/vue2/lib/contact-info/contact-info.js

@@ -0,0 +1,142 @@
+import o from "../item-layout/item-layout.js";
+import c from "../avatar/avatar.js";
+import { n as i } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const l = {
+  name: "DtRecipeContactInfo",
+  components: {
+    DtAvatar: c,
+    DtItemLayout: o
+  },
+  /* inheritAttrs: false is generally an option we want to set on library
+    components. This allows any attributes passed in that are not recognized
+    as props to be passed down to another element or component using v-bind:$attrs
+    more info: https://vuejs.org/v2/api/#inheritAttrs */
+  // inheritAttrs: false,
+  props: {
+    /**
+     * String to use for the item's role.
+     */
+    role: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Display avatar if `showAvatar` property is true.
+     */
+    showAvatar: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Optional avatar image url.
+     */
+    avatarSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
+     */
+    avatarSeed: {
+      type: String,
+      default: null
+    },
+    /**
+     * Avatar's full name, used to extract initials
+     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.
+     */
+    avatarFullName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The size of the avatar
+     * @values xs, sm, md, lg, xl
+     */
+    avatarSize: {
+      type: String,
+      default: "lg"
+    },
+    /**
+     * The aria-labelledby of the button containing avatars
+     */
+    avatarLabelledBy: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar color to display if `avatarSrc` is empty.
+     */
+    avatarColor: {
+      type: String,
+      default: null
+    },
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
+     */
+    presence: {
+      type: String,
+      default: null
+    },
+    /**
+     * Showing multiple avatars in contact info.
+     * The props of array items are: <br>
+     * `src` - avatar image url (optional) <br>
+     * `fullName` - full name, used to extract initials to display in avatar<br>
+     *  if `avatarSrc` and `avatarIcon` are empty<br>
+     * `seed` - determines uniqueness of avatar background <br>
+     * `text` - text that overlays the avatar (optional) <br>
+     * `icon` - icon that overlays the avatar (optional) <br>
+     * `halo` - halo highlight around the avatar. boolean true/false
+     */
+    avatarList: {
+      type: Array,
+      default: null
+    }
+  },
+  emits: ["avatar-click"],
+  methods: {
+    avatarClick() {
+      this.$emit("avatar-click");
+    }
+  }
+};
+var s = function() {
+  var t = this, a = t._self._c;
+  return a("dt-item-layout", { staticClass: "d-recipe-contact-info", attrs: { role: t.role, "data-qa": "contact-info", "content-class": "d-recipe-contact-info__content", "right-class": "d-recipe-contact-info__right", unstyled: "" }, scopedSlots: t._u([t.showAvatar ? { key: "left", fn: function() {
+    return [a("button", { staticClass: "d-recipe-contact-info__left", attrs: { "data-qa": "contact-info-left", "aria-labelledby": t.avatarLabelledBy }, on: { click: t.avatarClick } }, [t.avatarList ? a("span", { staticClass: "d-recipe-contact-info__avatars" }, t._l(t.avatarList, function(e, n) {
+      return a("dt-avatar", { key: n, attrs: { size: t.avatarSize, seed: e.seed, "full-name": e.fullName, "image-src": e.src, "image-alt": "", "overlay-text": e.text, "avatar-class": [
+        {
+          "d-recipe-contact-info__avatar-stacked": n > 0,
+          "d-recipe-contact-info__avatar-halo": !!e.halo
+        }
+      ] }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: r }) {
+        return [t._t("avatarIcon", null, { iconSize: r })];
+      } }, e.icon ? { key: "overlayIcon", fn: function() {
+        return [a(e.icon, { tag: "component" })];
+      }, proxy: !0 } : null], null, !0) });
+    }), 1) : a("dt-avatar", { attrs: { size: t.avatarSize, "full-name": t.avatarFullName, "image-src": t.avatarSrc, "image-alt": "", seed: t.avatarSeed, color: t.avatarColor, presence: t.presence }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: e }) {
+      return [t._t("avatarIcon", null, { iconSize: e })];
+    } }], null, !0) })], 1)];
+  }, proxy: !0 } : null, { key: "default", fn: function() {
+    return [a("div", { staticClass: "d-recipe-contact-info__header", attrs: { "data-qa": "contact-info-header" } }, [t._t("header")], 2)];
+  }, proxy: !0 }, { key: "subtitle", fn: function() {
+    return [a("div", { staticClass: "d-recipe-contact-info__subtitle", attrs: { "data-qa": "contact-info-subtitle" } }, [t._t("subtitle")], 2)];
+  }, proxy: !0 }, t.$slots.bottom ? { key: "bottom", fn: function() {
+    return [a("div", { staticClass: "d-recipe-contact-info__bottom", attrs: { "data-qa": "contact-info-bottom" } }, [t._t("bottom")], 2)];
+  }, proxy: !0 } : null, t.$slots.right ? { key: "right", fn: function() {
+    return [a("div", { attrs: { "data-qa": "contact-info-right" } }, [t._t("right")], 2)];
+  }, proxy: !0 } : null], null, !0) });
+}, u = [], f = /* @__PURE__ */ i(
+  l,
+  s,
+  u
+);
+const y = f.exports;
+export {
+  y as default
+};
+//# sourceMappingURL=contact-info.js.map

package/dist/vue2/lib/contact-info/contact-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-info.js","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    right-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.bottom\"\n      #bottom\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\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's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\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     * 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     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout"],"mappings":";;;AA2HA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,cAAA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA;AACA,WAAA,MAAA,cAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/contact-info/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./contact-info.cjs");exports.DtRecipeContactInfo=t.default;
+//# sourceMappingURL=index.cjs.map

package/dist/vue2/lib/contact-info/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vue2/lib/contact-info/index.js

@@ -0,0 +1,5 @@
+import { default as o } from "./contact-info.js";
+export {
+  o as DtRecipeContactInfo
+};
+//# sourceMappingURL=index.js.map

package/dist/vue2/lib/contact-info/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/vue2/lib/contact-row/contact-row-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={};exports.default=e;
+//# sourceMappingURL=contact-row-constants.cjs.map

package/dist/vue2/lib/contact-row/contact-row-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-row-constants.cjs","sources":["../../../recipes/leftbar/contact_row/contact_row_constants.js"],"sourcesContent":["export default {\n};\n"],"names":["contact_row_constants"],"mappings":"4GAAA,MAAeA,EAAA,CACf"}

package/dist/vue2/lib/contact-row/contact-row-constants.js

@@ -0,0 +1,5 @@
+const t = {};
+export {
+  t as default
+};
+//# sourceMappingURL=contact-row-constants.js.map

package/dist/vue2/lib/contact-row/contact-row-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-row-constants.js","sources":["../../../recipes/leftbar/contact_row/contact_row_constants.js"],"sourcesContent":["export default {\n};\n"],"names":["contact_row_constants"],"mappings":"AAAA,MAAeA,IAAA,CACf;"}

package/dist/vue2/lib/contact-row/contact-row.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),n=require("../avatar/avatar.cjs"),s=require("../../common/utils/index.cjs"),o=require("@dialpad/dialtone-icons/vue2"),l=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),i=require("../general-row/general-row.cjs"),c={name:"DtRecipeContactRow",components:{DtAvatar:n.default,DtRecipeGeneralRow:i.default,DtEmojiTextWrapper:r.default,DtIconUser:o.DtIconUser},inheritAttrs:!1,props:{avatarSrc:{type:String,default:""},avatarPresence:{type:String,default:null},avatarSeed:{type:String,default:null},avatarColor:{type:String,default:null},presenceText:{type:String,default:""},name:{type:String,required:!0},userStatus:{type:String,default:""},muted:{type:Boolean,default:!1},unreadCount:{type:String,default:null},hasUnreads:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},noInitials:{type:Boolean,default:!1},isTyping:{type:Boolean,default:!1},hasCallButton:{type:Boolean,default:!0},callButtonTooltip:{type:String,default:""},unreadCountTooltip:{type:String,default:""}},emits:["click","call"],computed:{presenceFontColorClass(){return{active:"d-recipe-contact-row--active",busy:"d-recipe-contact-row--busy",away:"d-recipe-contact-row--away"}[this.avatarPresence]},contactDescription(){return s.safeConcatStrings([this.name,this.presenceText,this.userStatus])}}};var u=function(){var e=this,t=e._self._c;return t("dt-recipe-general-row",e._g(e._b({attrs:{"unread-count":e.unreadCount,description:e.contactDescription,"has-unreads":e.hasUnreads,selected:e.selected,"has-call-button":e.hasCallButton,muted:e.muted,"is-typing":e.isTyping,"call-button-tooltip":e.callButtonTooltip,"unread-count-tooltip":e.unreadCountTooltip,"data-qa":"contact-row"},scopedSlots:e._u([{key:"left",fn:function(){return[t("dt-avatar",{attrs:{"full-name":e.name,"image-src":e.avatarSrc,color:e.avatarColor,"image-alt":"",size:"sm",seed:e.avatarSeed,presence:e.avatarPresence},scopedSlots:e._u([e.noInitials?{key:"icon",fn:function(){return[t("dt-icon-user",{attrs:{size:"200"}})]},proxy:!0}:null],null,!0)})]},proxy:!0},{key:"label",fn:function(){return[t("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__description",attrs:{"data-qa":"dt-recipe-leftbar-row-description",size:"200"}},[e._v(" "+e._s(e.name)+" ")]),t("div",{staticClass:"d-recipe-leftbar-row__status"},[e.presenceText?t("span",{class:["d-recipe-leftbar-row__meta-context",e.presenceFontColorClass],attrs:{"data-qa":"dt-recipe-leftbar-row-presence-text"}},[e._v(" "+e._s(e.presenceText)+" ")]):e._e(),e.userStatus?t("dt-emoji-text-wrapper",{staticClass:"d-recipe-leftbar-row__meta-custom",attrs:{size:"100","element-type":"span","data-qa":"dt-recipe-leftbar-row-user-status"}},[e._v(" "+e._s(e.userStatus)+" ")]):e._e()],1)]},proxy:!0}])},"dt-recipe-general-row",e.$attrs,!1),e.$listeners))},p=[],d=l.n(c,u,p);const f=d.exports;exports.default=f;
+//# sourceMappingURL=contact-row.cjs.map

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

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

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

@@ -0,0 +1,183 @@
+import r from "../emoji-text-wrapper/emoji-text-wrapper.js";
+import n from "../avatar/avatar.js";
+import { safeConcatStrings as o } from "../../common/utils/index.js";
+import { DtIconUser as s } from "@dialpad/dialtone-icons/vue2";
+import { n as l } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import c from "../general-row/general-row.js";
+const i = {
+  name: "DtRecipeContactRow",
+  components: {
+    DtAvatar: n,
+    DtRecipeGeneralRow: c,
+    DtEmojiTextWrapper: r,
+    DtIconUser: s
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Optional avatar image url.
+     * If not provided it will use the initial of the name.
+     */
+    avatarSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * defer validation to avatar component.
+     * @values null, busy, away, offline, active
+     */
+    avatarPresence: {
+      type: String,
+      default: null
+    },
+    /**
+     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
+     */
+    avatarSeed: {
+      type: String,
+      default: null
+    },
+    /**
+     * Avatar color to display if `avatarSrc` is empty.
+     */
+    avatarColor: {
+      type: String,
+      default: null
+    },
+    /**
+     * Text describing the user's presence, such as "in a meeting"
+     */
+    presenceText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Name of the contact
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Status as set by the user.
+     */
+    userStatus: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Gives a faded style to be used when muted
+     */
+    muted: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Number of unread messages
+     */
+    unreadCount: {
+      type: String,
+      default: null
+    },
+    /**
+     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
+     * the unread count badge.
+     */
+    hasUnreads: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Determines if the row is selected
+     */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Initials will never be shown. Instead it will show a "User" icon.
+     */
+    noInitials: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Shows an "is typing" animation over the avatar when true.
+     */
+    isTyping: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Whether the contact row should display a call button when hovered.
+     */
+    hasCallButton: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Text shown when the call button is hovered.
+     */
+    callButtonTooltip: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Text shown when the unread count is hovered.
+     */
+    unreadCountTooltip: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Native click event on the row itself
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Call button clicked
+     *
+     * @event call
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "call"
+  ],
+  computed: {
+    presenceFontColorClass() {
+      return {
+        active: "d-recipe-contact-row--active",
+        busy: "d-recipe-contact-row--busy",
+        away: "d-recipe-contact-row--away"
+      }[this.avatarPresence];
+    },
+    contactDescription() {
+      return o([this.name, this.presenceText, this.userStatus]);
+    }
+  }
+};
+var p = function() {
+  var e = this, t = e._self._c;
+  return t("dt-recipe-general-row", e._g(e._b({ attrs: { "unread-count": e.unreadCount, description: e.contactDescription, "has-unreads": e.hasUnreads, selected: e.selected, "has-call-button": e.hasCallButton, muted: e.muted, "is-typing": e.isTyping, "call-button-tooltip": e.callButtonTooltip, "unread-count-tooltip": e.unreadCountTooltip, "data-qa": "contact-row" }, scopedSlots: e._u([{ key: "left", fn: function() {
+    return [t("dt-avatar", { attrs: { "full-name": e.name, "image-src": e.avatarSrc, color: e.avatarColor, "image-alt": "", size: "sm", seed: e.avatarSeed, presence: e.avatarPresence }, scopedSlots: e._u([e.noInitials ? { key: "icon", fn: function() {
+      return [t("dt-icon-user", { attrs: { size: "200" } })];
+    }, proxy: !0 } : null], null, !0) })];
+  }, proxy: !0 }, { key: "label", fn: function() {
+    return [t("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__description", attrs: { "data-qa": "dt-recipe-leftbar-row-description", size: "200" } }, [e._v(" " + e._s(e.name) + " ")]), t("div", { staticClass: "d-recipe-leftbar-row__status" }, [e.presenceText ? t("span", { class: ["d-recipe-leftbar-row__meta-context", e.presenceFontColorClass], attrs: { "data-qa": "dt-recipe-leftbar-row-presence-text" } }, [e._v(" " + e._s(e.presenceText) + " ")]) : e._e(), e.userStatus ? t("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__meta-custom", attrs: { size: "100", "element-type": "span", "data-qa": "dt-recipe-leftbar-row-user-status" } }, [e._v(" " + e._s(e.userStatus) + " ")]) : e._e()], 1)];
+  }, proxy: !0 }]) }, "dt-recipe-general-row", e.$attrs, !1), e.$listeners));
+}, u = [], d = /* @__PURE__ */ l(
+  i,
+  p,
+  u
+);
+const w = d.exports;
+export {
+  w as default
+};
+//# sourceMappingURL=contact-row.js.map

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

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

package/dist/vue2/lib/contact-row/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./contact-row.cjs");exports.DtRecipeContactRow=t.default;
+//# sourceMappingURL=index.cjs.map

package/dist/vue2/lib/contact-row/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vue2/lib/contact-row/index.js

@@ -0,0 +1,5 @@
+import { default as o } from "./contact-row.js";
+export {
+  o as DtRecipeContactRow
+};
+//# sourceMappingURL=index.js.map

package/dist/vue2/lib/contact-row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/vue2/lib/datepicker/datepicker-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=0,M="MMMM",t="long";exports.INTL_MONTH_FORMAT=t;exports.MONTH_FORMAT=M;exports.WEEK_START=T;
+//# sourceMappingURL=datepicker-constants.cjs.map

package/dist/vue2/lib/datepicker/datepicker-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker-constants.cjs","sources":["../../../components/datepicker/datepicker_constants.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n"],"names":["WEEK_START","MONTH_FORMAT","INTL_MONTH_FORMAT"],"mappings":"gFAKY,MAACA,EAAa,EAEbC,EAAe,OAEfC,EAAoB"}

package/dist/vue2/lib/datepicker/datepicker-constants.js

@@ -0,0 +1,7 @@
+const M = 0, T = "MMMM", o = "long";
+export {
+  o as INTL_MONTH_FORMAT,
+  T as MONTH_FORMAT,
+  M as WEEK_START
+};
+//# sourceMappingURL=datepicker-constants.js.map

package/dist/vue2/lib/datepicker/datepicker-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker-constants.js","sources":["../../../components/datepicker/datepicker_constants.js"],"sourcesContent":["/**\n * Week start day\n * 0 - Sunday\n * 1 - Monday\n */\nexport const WEEK_START = 0;\n\nexport const MONTH_FORMAT = 'MMMM';\n\nexport const INTL_MONTH_FORMAT = 'long';\n"],"names":["WEEK_START","MONTH_FORMAT","INTL_MONTH_FORMAT"],"mappings":"AAKY,MAACA,IAAa,GAEbC,IAAe,QAEfC,IAAoB;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.cjs","sources":["../../../components/datepicker/modules/month-year-picker.vue","../../../components/datepicker/modules/calendar.vue","../../../components/datepicker/datepicker.vue"],"sourcesContent":["<template>\n  <dt-stack\n    direction=\"row\"\n    class=\"d-datepicker__month-year\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"prevYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"refNames[0]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevYearLabel} ${selectYear - 1}`\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"prevMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"refNames[1]\"\n            size=\"xs\"\n            importance=\"clear\"\n            kind=\"muted\"\n            :circle=\"true\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${prevMonthLabel} ${formattedMonth(selectMonth - 1)}`\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      direction=\"row\"\n      gap=\"200\"\n      class=\"d-datepicker__nav\"\n    >\n      <dt-tooltip\n        :message=\"nextMonthLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-start', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"refNames[2]\"\n            size=\"xs\"\n            importance=\"clear\"\n            :circle=\"true\"\n            kind=\"muted\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextMonthLabel} ${formattedMonth(selectMonth + 1)}`\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :message=\"nextYearLabel\"\n        placement=\"top\"\n        :fallback-placements=\"['top-end', 'auto']\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"refNames[3]\"\n            size=\"xs\"\n            kind=\"muted\"\n            :circle=\"true\"\n            importance=\"clear\"\n            class=\"d-datepicker__nav-btn\"\n            type=\"button\"\n            :aria-label=\"`${changeToLabel} ${nextYearLabel} ${selectYear + 1}`\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script>\nimport { DtIconChevronLeft, DtIconChevronsLeft, DtIconChevronRight, DtIconChevronsRight } from '@dialpad/dialtone-icons/vue2';\nimport { getYear, addMonths, getMonth, set, subMonths, getDate } from 'date-fns';\nimport { getCalendarDays, formatMonth } from '../utils';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport DtStack from '@/components/stack/stack.vue';\nimport DtTooltip from '@/components/tooltip/tooltip.vue';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n  name: 'DtDatepickerMonthYearPicker',\n\n  components: {\n    DtButton,\n    DtTooltip,\n    DtStack,\n    DtIconChevronLeft,\n    DtIconChevronsLeft,\n    DtIconChevronRight,\n    DtIconChevronsRight,\n  },\n\n  props: {\n    locale: {\n      type: String,\n      required: true,\n    },\n\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    selectedDate: {\n      type: Date,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n    'calendar-days',\n\n    /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n    'focus-first-day',\n\n    /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n    'focus-last-day',\n\n    /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      selectMonth: getMonth(this.selectedDate),\n      selectYear: getYear(this.selectedDate),\n      highlightedDay: null,\n      focusPicker: 0,\n      focusRefs: [],\n      refNames: ['prevYearButtonRef', 'prevMonthButtonRef', 'nextMonthButtonRef', 'nextYearButtonRef'],\n    };\n  },\n\n  computed: {\n    // Get days for the currently selected month and year and highlight the selected day\n    calendarDays () {\n      return getCalendarDays(this.selectMonth, this.selectYear, this.highlightedDay);\n    },\n\n    formattedMonth () {\n      return (month) => formatMonth(month, INTL_MONTH_FORMAT, this.locale);\n    },\n  },\n\n  watch: {\n    selectMonth: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n    selectYear: {\n      handler () {\n        this.highlightDay();\n        this.$emit('calendar-days', this.calendarDays);\n      },\n\n      immediate: true,\n    },\n\n  },\n\n  mounted () {\n    this.setButtonsRef();\n    this.focusMonthYearPicker();\n  },\n\n  methods: {\n    setButtonsRef () {\n      this.focusRefs = this.refNames.map(refName => this.$refs[refName]);\n    },\n\n    focusMonthYearPicker () {\n      this.focusPicker = 0;\n      this.focusRefs[0].$el.focus();\n    },\n\n    handleKeyDown (event) {\n      switch (event.key) {\n        case 'ArrowLeft':\n          event.preventDefault();\n          if (this.focusPicker === 0) {\n            this.focusPicker = 3;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker--;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowRight':\n          event.preventDefault();\n          if (this.focusPicker === 3) {\n            this.focusPicker = 0;\n            this.focusRefs[this.focusPicker].$el.focus();\n          } else {\n            this.focusPicker++;\n            this.focusRefs[this.focusPicker].$el.focus();\n          }\n          break;\n\n        case 'ArrowDown':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Tab':\n          event.preventDefault();\n          this.$emit('focus-first-day');\n          break;\n\n        case 'Escape':\n          this.$emit('close-datepicker');\n          break;\n      }\n    },\n\n    highlightDay () {\n      const year = getYear(this.selectedDate);\n      const month = getMonth(this.selectedDate);\n\n      if (year !== this.selectYear || month !== this.selectMonth) {\n        this.highlightedDay = null;\n      } else {\n        this.highlightedDay = getDate(this.selectedDate);\n      }\n    },\n\n    changeMonth (value) {\n      // Adjust year when changing from January to December or vice versa\n      if ((this.selectMonth === 0 && value === -1) || (this.selectMonth === 11 && value === 1)) {\n        this.selectYear += value;\n      }\n\n      // Calculate the new date by adding or subtracting months\n      const initialDate = set(this.selectedDate, { month: this.selectMonth, year: this.selectYear });\n      const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n      // Update the selected month\n      this.selectMonth = getMonth(newDate);\n    },\n\n    changeYear (value) {\n      this.selectYear = this.selectYear + value;\n    },\n\n    goToNextMonth () {\n      this.changeMonth(1);\n    },\n\n    goToPrevMonth () {\n      this.changeMonth(-1);\n    },\n  },\n};\n</script>\n","<template>\n  <table\n    class=\"d-datepicker__calendar\"\n    aria-labelledby=\"calendar-heading\"\n  >\n    <thead>\n      <tr>\n        <th\n          v-for=\"day in weekDays\"\n          :key=\"day\"\n          scope=\"col\"\n          class=\"d-datepicker__cell d-datepicker__cell--header\"\n        >\n          <span\n            class=\"d-datepicker__weekday\"\n            :title=\"day\"\n            :aria-label=\"day\"\n          > {{ day }}</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(week, indexWeek) in calendarDays\"\n        :key=\"indexWeek\"\n      >\n        <td\n          v-for=\"(day, indexDays) in week.days\"\n          :key=\"indexWeek + indexDays\"\n          class=\"d-datepicker__cell\"\n          role=\"listbox\"\n        >\n          <dt-button\n            :ref=\"`buttonRef_${indexWeek}_${indexDays}`\"\n            class=\"d-datepicker__day\"\n            :circle=\"true\"\n            size=\"sm\"\n            importance=\"clear\"\n            :disabled=\"!day.currentMonth\"\n            :class=\"{\n              'd-datepicker__day--disabled': !day.currentMonth,\n              'd-datepicker__day--selected': selectedDay\n                ? ((day.text === selectedDay) && day.currentMonth)\n                : day.selected,\n            }\"\n            type=\"button\"\n            :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && day.currentMonth) : day.selected\"\n            :aria-label=\"dayAriaLabel(day)\"\n            role=\"option\"\n            @click=\"selectDay(day)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            {{ day.text }}\n          </dt-button>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script>\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate } from '@/components/datepicker/utils';\nimport { WEEK_START, MONTH_FORMAT } from '@/components/datepicker/datepicker_constants.js';\nimport { format, getYear } from 'date-fns';\nimport DtButton from '@/components/button/button.vue';\n\nexport default {\n  name: 'DtDatepickerCalendar',\n  components: { DtButton },\n\n  props: {\n    calendarDays: {\n      type: Array,\n      required: true,\n    },\n\n    locale: {\n      type: String,\n      required: true,\n    },\n\n    selectDayLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when a date is selected\n     *\n     * @event select-date\n     * @type {Date}\n     */\n    'select-date',\n\n    /**\n     * Will focus the month and year picker\n     *\n     * @event focus-month-year-picker\n     */\n    'focus-month-year-picker',\n\n    /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      // local selectedDay to override the received by props calendarDays\n      selectedDay: null,\n      focusDay: 0,\n      daysRef: [],\n    };\n  },\n\n  computed: {\n    weekDays () {\n      return getWeekDayNames(this.locale, WEEK_START);\n    },\n  },\n\n  watch: {\n    calendarDays () {\n      // on calendarDays update, reset our local variables\n      this.focusDay = 0;\n      this.selectedDay = null;\n\n      this.daysRef = [];\n\n      this.$nextTick(() => {\n        this.daysRef = [];\n        this.setDayRef();\n      });\n    },\n  },\n\n  methods: {\n    dayAriaLabel (day) {\n      return `${this.selectDayLabel} ${day.text} ${format(day.value, MONTH_FORMAT)} ${getYear(day.value)}`;\n    },\n\n    setDayRef (el, day) {\n      this.calendarDays.forEach((week, weekIndex) => {\n        week.days.forEach((day, dayIndex) => {\n          const refKey = `buttonRef_${weekIndex}_${dayIndex}`;\n          const dayButton = this.$refs[refKey];\n          if (dayButton && day.currentMonth) {\n            this.daysRef.push({ el: dayButton[0], day });\n          }\n        });\n      });\n    },\n\n    handleKeyDown (event) {\n      switch (event.key) {\n        case 'ArrowUp':\n          event.preventDefault();\n          this.focusDay -= 7;\n          try {\n            this.daysRef[this.focusDay].el.$el.focus();\n          } catch (error) {\n            const prevFocusDate = calculatePrevFocusDate(this.daysRef[this.focusDay + 7].day.value);\n            this.$emit('go-to-prev-month');\n            this.$nextTick(() => {\n              this.setDayRef();\n              this.daysRef[prevFocusDate - 1].el.$el.focus();\n              this.focusDay += prevFocusDate - 1;\n            });\n          }\n          break;\n\n        case 'ArrowDown':\n          event.preventDefault();\n          this.focusDay += 7;\n          try {\n            this.daysRef[this.focusDay].el.$el.focus();\n          } catch (error) {\n            const nextFocusDate = calculateNextFocusDate(this.daysRef[this.focusDay - 7].day.value);\n            this.$emit('go-to-next-month');\n            this.$nextTick(() => {\n              this.setDayRef();\n              this.daysRef[nextFocusDate - 1].el.$el.focus();\n              this.focusDay += nextFocusDate - 1;\n            });\n          }\n          break;\n\n        case 'ArrowLeft':\n          event.preventDefault();\n          if (this.focusDay > 0) {\n            this.focusDay -= 1;\n            this.daysRef[this.focusDay].el.$el.focus();\n          } else {\n            // if we are on month first day, jump to last day of prev month\n            this.$emit('go-to-prev-month');\n            this.$nextTick(() => {\n              this.focusLastDay();\n            });\n          }\n          break;\n\n        case 'ArrowRight':\n          event.preventDefault();\n          if (this.focusDay < this.daysRef.length - 1) {\n            this.focusDay += 1;\n            this.daysRef[this.focusDay].el.$el.focus();\n          } else {\n            // if we are on month last day, jump to first day of next month\n            this.$emit('go-to-next-month');\n            this.$nextTick(() => {\n              this.focusFirstDay();\n            });\n          }\n          break;\n\n        case 'Tab':\n          event.preventDefault();\n          this.$emit('focus-month-year-picker');\n          break;\n\n        case 'Escape':\n          this.$emit('close-datepicker');\n          break;\n      }\n    },\n\n    focusFirstDay () {\n      this.focusDay = 0;\n      this.$nextTick(() => {\n        this.daysRef[this.focusDay].el.$el.focus();\n      });\n    },\n\n    focusLastDay () {\n      this.$nextTick(() => {\n        this.focusDay = this.daysRef.length - 1;\n        this.daysRef[this.focusDay].el.$el.focus();\n      });\n    },\n\n    selectDay (day) {\n      if (!day.currentMonth) { return; }\n\n      // local selectedDay is updated when a day is selected\n      this.selectedDay = day.text;\n      this.$emit('select-date', day.value);\n    },\n  },\n};\n</script>\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :locale=\"locale\"\n        :prev-month-label=\"prevMonthLabel\"\n        :next-month-label=\"nextMonthLabel\"\n        :prev-year-label=\"prevYearLabel\"\n        :next-year-label=\"nextYearLabel\"\n        :change-to-label=\"changeToLabel\"\n        :selected-date=\"selectedDate\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :locale=\"locale\"\n        :calendar-days=\"calendarDays\"\n        :select-day-label=\"selectDayLabel\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport DtStack from '@/components/stack/stack.vue';\nimport { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n  name: 'DtDatepicker',\n\n  components: { DtStack, MonthYearPicker, Calendar },\n\n  props: {\n    /**\n     * Label for the previous month button\n     *\n     * @type {String}\n     * @example 'Previous month'\n     */\n    prevMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the next month button\n     *\n     * @type {String}\n     * @example 'Next month'\n     */\n    nextMonthLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the previous year button\n     *\n     * @type {String}\n     * @example 'Previous year'\n     */\n    prevYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the next year button\n     *\n     * @type {String}\n     * @example 'Next year'\n     */\n    nextYearLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the select day button\n     *\n     * @type {String}\n     * @example 'Select day'\n     */\n    selectDayLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Label for the change to button\n     *\n     * @type {String}\n     * @example 'Change to'\n     */\n    changeToLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Locale for the calendar\n     *\n     * @type {String}\n     */\n    locale: {\n      type: String,\n      default: 'en-US',\n    },\n\n    /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n    selectedDate: {\n      type: Date,\n      default: () => (new Date()),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n    'selected-date',\n\n    /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n    'close-datepicker',\n  ],\n\n  data () {\n    return {\n      calendarDays: [],\n    };\n  },\n\n  mounted () {\n    warnIfUnmounted(this.$el, this.$options.name);\n  },\n\n  methods: {\n    updateCalendarDays (days) {\n      this.calendarDays = days;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtTooltip","DtStack","DtIconChevronLeft","DtIconChevronsLeft","DtIconChevronRight","DtIconChevronsRight","getMonth","getYear","getCalendarDays","month","formatMonth","INTL_MONTH_FORMAT","refName","event","year","getDate","value","initialDate","set","newDate","addMonths","subMonths","getWeekDayNames","WEEK_START","day","format","MONTH_FORMAT","el","week","weekIndex","dayIndex","refKey","dayButton","prevFocusDate","calculatePrevFocusDate","nextFocusDate","calculateNextFocusDate","MonthYearPicker","Calendar","warnIfUnmounted","days"],"mappings":"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"}