@dialpad/dialtone-vue 3.187.3 → 3.188.0

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

@@ -1,20 +1,20 @@
-import { safeConcatStrings as S, extractVueListeners as A, returnFirstEl as u, removeClassStyleAttrs as E, addClassStyleAttrs as N } from "../../common/utils/index.js";
-import { DtIconHeadphones as W, DtIconChevronDown as k } from "@dialpad/dialtone-icons/vue3";
+import { addClassStyleAttrs as S, removeClassStyleAttrs as A, returnFirstEl as u, extractVueListeners as E, safeConcatStrings as N } from "../../common/utils/index.js";
+import { DtIconChevronDown as W, DtIconHeadphones as k } from "@dialpad/dialtone-icons/vue3";
 import { DialtoneLocalization as D } from "../../localization/index.js";
-import { resolveComponent as i, openBlock as h, createElementBlock as f, mergeProps as w, createElementVNode as o, normalizeClass as T, toHandlers as q, createVNode as _, normalizeStyle as B, withCtx as b, createTextVNode as C, toDisplayString as y, renderSlot as v, createBlock as $, createCommentVNode as L, withModifiers as z } from "vue";
+import { resolveComponent as i, createElementBlock as f, openBlock as h, mergeProps as w, createElementVNode as o, normalizeClass as T, createCommentVNode as C, toHandlers as q, createVNode as _, normalizeStyle as B, withCtx as b, createTextVNode as y, toDisplayString as v, renderSlot as L, createBlock as $, withModifiers as z } from "vue";
 import { _ as O } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import R from "../button/button.js";
+import R from "../emoji-text-wrapper/emoji-text-wrapper.js";
 import j from "../badge/badge.js";
-import U from "../emoji-text-wrapper/emoji-text-wrapper.js";
+import U from "../button/button.js";
 const V = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeContactCentersRow",
   components: {
-    DtButton: R,
+    DtButton: U,
     DtBadge: j,
-    DtEmojiTextWrapper: U,
-    DtIconHeadphones: W,
-    DtIconChevronDown: k
+    DtEmojiTextWrapper: R,
+    DtIconHeadphones: k,
+    DtIconChevronDown: W
   },
   inheritAttrs: !1,
   props: {
@@ -92,13 +92,13 @@ const V = {
     },
     getAriaLabel() {
       const e = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
-      return this.ariaLabel ? this.ariaLabel : S([
+      return this.ariaLabel ? this.ariaLabel : N([
         this.description,
         this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: e })
       ]);
     },
     contactRowListeners() {
-      return A(this.$attrs);
+      return E(this.$attrs);
     },
     showUnreadCount() {
       return !!this.unreadCount;
@@ -122,8 +122,8 @@ const V = {
     this.resizeObserver.disconnect();
   },
   methods: {
-    removeClassStyleAttrs: E,
-    addClassStyleAttrs: N,
+    removeClassStyleAttrs: A,
+    addClassStyleAttrs: S,
     adjustLabelWidth() {
       var n, t, s, l, d, c;
       const e = ((t = (n = u(this.$el)) == null ? void 0 : n.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : t.clientWidth) || 0, r = ((l = (s = u(this.$el)) == null ? void 0 : s.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : l.clientWidth) || 0, a = ((c = (d = u(this.$el)) == null ? void 0 : d.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : c.clientWidth) || 0, m = 12;
@@ -171,14 +171,14 @@ function G(e, r, a, m, n, t) {
             size: "200"
           }, {
             default: b(() => [
-              C(y(a.description), 1)
+              y(v(a.description), 1)
             ]),
             _: 1
           })
         ], 4)
       ], 16, x),
-      a.hideActions ? L("", !0) : (h(), f("div", M, [
-        v(e.$slots, "right"),
+      a.hideActions ? C("", !0) : (h(), f("div", M, [
+        L(e.$slots, "right"),
         o("div", H, [
           t.showUnreadCount ? (h(), $(d, {
             key: 0,
@@ -188,10 +188,10 @@ function G(e, r, a, m, n, t) {
             type: "bulletin"
           }, {
             default: b(() => [
-              C(y(a.unreadCount), 1)
+              y(v(a.unreadCount), 1)
             ]),
             _: 1
-          })) : L("", !0),
+          })) : C("", !0),
           _(g, {
             class: "d-recipe-leftbar-row__action",
             "data-qa": "dt-recipe-leftbar-row-action-button",
@@ -211,7 +211,7 @@ function G(e, r, a, m, n, t) {
       ]))
     ], 2),
     o("div", F, [
-      v(e.$slots, "timer")
+      L(e.$slots, "timer")
     ])
   ], 16);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"contact-centers-row.js","sources":["../../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\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            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div\n        v-if=\"!hideActions\"\n        class=\"d-recipe-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonLabel\"\n            :title=\"menuButtonLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtIconChevronDown, DtIconHeadphones } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactCentersRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Making this true will hide the unread count badge, the chevron button, and the right slot\n     */\n    hideActions: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages, could be a string to support '99+'\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n      validator (value) {\n        if (!value) return true;\n        return /^\\d+\\+?$/.test(value);\n      },\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     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      const count = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([\n          this.description,\n          this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: count }),\n        ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n\n    menuButtonLabel () {\n      return this.i18n.$t('DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL');\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      async handler () {\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtBadge","DtEmojiTextWrapper","DtIconHeadphones","DtIconChevronDown","value","DialtoneLocalization","count","safeConcatStrings","extractVueListeners","returnFirstEl","removeClassStyleAttrs","addClassStyleAttrs","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","_normalizeClass","$props","_toHandlers","_cache","$event","_createVNode","_component_dt_icon_headphones","_normalizeStyle","$data","_component_dt_emoji_text_wrapper","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_3","_renderSlot","_createBlock","_component_dt_badge","_component_dt_button","_withModifiers","_component_dt_icon_chevron_down"],"mappings":"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"}
+{"version":3,"file":"contact-centers-row.js","sources":["../../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\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            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div\n        v-if=\"!hideActions\"\n        class=\"d-recipe-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonLabel\"\n            :title=\"menuButtonLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtIconChevronDown, DtIconHeadphones } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactCentersRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Making this true will hide the unread count badge, the chevron button, and the right slot\n     */\n    hideActions: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages, could be a string to support '99+'\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n      validator (value) {\n        if (!value) return true;\n        return /^\\d+\\+?$/.test(value);\n      },\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     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      const count = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([\n          this.description,\n          this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: count }),\n        ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n\n    menuButtonLabel () {\n      return this.i18n.$t('DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL');\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      async handler () {\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtBadge","DtEmojiTextWrapper","DtIconHeadphones","DtIconChevronDown","value","DialtoneLocalization","count","safeConcatStrings","extractVueListeners","returnFirstEl","removeClassStyleAttrs","addClassStyleAttrs","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","_normalizeClass","$props","_toHandlers","_cache","$event","_createVNode","_component_dt_icon_headphones","_normalizeStyle","$data","_component_dt_emoji_text_wrapper","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_3","_renderSlot","_createBlock","_component_dt_badge","_component_dt_button","_withModifiers","_component_dt_icon_chevron_down"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"contact-info.cjs","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  compatConfig: { MODE: 3 },\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","_hoisted_1","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createSlots","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_withCtx","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}
+{"version":3,"file":"contact-info.cjs","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  compatConfig: { MODE: 3 },\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","_hoisted_1","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createSlots","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_withCtx","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import g from "../item-layout/item-layout.js";
 import h from "../avatar/avatar.js";
-import { resolveComponent as m, openBlock as n, createBlock as i, createSlots as u, withCtx as o, createElementVNode as l, renderSlot as c, createElementBlock as _, Fragment as p, renderList as S, resolveDynamicComponent as k } from "vue";
+import { resolveComponent as m, createBlock as i, openBlock as n, createSlots as u, withCtx as o, createElementVNode as l, renderSlot as c, createElementBlock as _, Fragment as p, renderList as S, resolveDynamicComponent as k } from "vue";
 import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const C = {
   compatConfig: { MODE: 3 },

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

@@ -1 +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  compatConfig: { MODE: 3 },\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","_hoisted_1","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createSlots","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_withCtx","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}
+{"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  compatConfig: { MODE: 3 },\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","_hoisted_1","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createSlots","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_withCtx","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../avatar/avatar.cjs"),_=require("../general-row/general-row.cjs"),f=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),y={compatConfig:{MODE:3},name:"DtRecipeContactRow",components:{DtAvatar:m.default,DtRecipeGeneralRow:_.default,DtEmojiTextWrapper:f.default,DtIconUser:d.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}},emits:["call"],computed:{presenceFontColorClass(){return{active:"d-recipe-contact-row--active",busy:"d-recipe-contact-row--busy",away:"d-recipe-contact-row--away"}[this.avatarPresence]},contactRowListeners(){return s.extractVueListeners(this.$attrs)},contactDescription(){return s.safeConcatStrings([this.name,this.presenceText,this.userStatus])}}},w={class:"d-recipe-leftbar-row__status"};function g(a,n,t,v,S,r){const c=e.resolveComponent("dt-icon-user"),l=e.resolveComponent("dt-avatar"),o=e.resolveComponent("dt-emoji-text-wrapper"),i=e.resolveComponent("dt-recipe-general-row");return e.openBlock(),e.createBlock(i,e.mergeProps({"unread-count":t.unreadCount,description:r.contactDescription,"has-unreads":t.hasUnreads,selected:t.selected,"has-call-button":t.hasCallButton,muted:t.muted,"is-typing":t.isTyping},a.$attrs,{"data-qa":"contact-row"},e.toHandlers(r.contactRowListeners),{onCall:n[0]||(n[0]=u=>a.$emit("call",u))}),{left:e.withCtx(()=>[e.createVNode(l,{"full-name":t.name,"image-src":t.avatarSrc,color:t.avatarColor,"image-alt":"",size:"sm",seed:t.avatarSeed,presence:t.avatarPresence},e.createSlots({_:2},[t.noInitials?{name:"icon",fn:e.withCtx(()=>[e.createVNode(c,{size:"200"})]),key:"0"}:void 0]),1032,["full-name","image-src","color","seed","presence"])]),label:e.withCtx(()=>[e.createVNode(o,{class:"d-recipe-leftbar-row__description","data-qa":"dt-recipe-leftbar-row-description",size:"200"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.name),1)]),_:1}),e.createElementVNode("div",w,[t.presenceText?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-recipe-leftbar-row-presence-text",class:e.normalizeClass(["d-recipe-leftbar-row__meta-context",r.presenceFontColorClass])},e.toDisplayString(t.presenceText),3)):e.createCommentVNode("",!0),t.userStatus?(e.openBlock(),e.createBlock(o,{key:1,size:"100","element-type":"span","data-qa":"dt-recipe-leftbar-row-user-status",class:"d-recipe-leftbar-row__meta-custom"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.userStatus),1)]),_:1})):e.createCommentVNode("",!0)])]),_:1},16,["unread-count","description","has-unreads","selected","has-call-button","muted","is-typing"])}const C=p._(y,[["render",g]]);exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),_=require("../general-row/general-row.cjs"),f=require("../avatar/avatar.cjs"),y={compatConfig:{MODE:3},name:"DtRecipeContactRow",components:{DtAvatar:f.default,DtRecipeGeneralRow:_.default,DtEmojiTextWrapper:m.default,DtIconUser:d.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}},emits:["call"],computed:{presenceFontColorClass(){return{active:"d-recipe-contact-row--active",busy:"d-recipe-contact-row--busy",away:"d-recipe-contact-row--away"}[this.avatarPresence]},contactRowListeners(){return s.extractVueListeners(this.$attrs)},contactDescription(){return s.safeConcatStrings([this.name,this.presenceText,this.userStatus])}}},w={class:"d-recipe-leftbar-row__status"};function g(a,n,t,v,S,r){const c=e.resolveComponent("dt-icon-user"),l=e.resolveComponent("dt-avatar"),o=e.resolveComponent("dt-emoji-text-wrapper"),i=e.resolveComponent("dt-recipe-general-row");return e.openBlock(),e.createBlock(i,e.mergeProps({"unread-count":t.unreadCount,description:r.contactDescription,"has-unreads":t.hasUnreads,selected:t.selected,"has-call-button":t.hasCallButton,muted:t.muted,"is-typing":t.isTyping},a.$attrs,{"data-qa":"contact-row"},e.toHandlers(r.contactRowListeners),{onCall:n[0]||(n[0]=u=>a.$emit("call",u))}),{left:e.withCtx(()=>[e.createVNode(l,{"full-name":t.name,"image-src":t.avatarSrc,color:t.avatarColor,"image-alt":"",size:"sm",seed:t.avatarSeed,presence:t.avatarPresence},e.createSlots({_:2},[t.noInitials?{name:"icon",fn:e.withCtx(()=>[e.createVNode(c,{size:"200"})]),key:"0"}:void 0]),1032,["full-name","image-src","color","seed","presence"])]),label:e.withCtx(()=>[e.createVNode(o,{class:"d-recipe-leftbar-row__description","data-qa":"dt-recipe-leftbar-row-description",size:"200"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.name),1)]),_:1}),e.createElementVNode("div",w,[t.presenceText?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-recipe-leftbar-row-presence-text",class:e.normalizeClass(["d-recipe-leftbar-row__meta-context",r.presenceFontColorClass])},e.toDisplayString(t.presenceText),3)):e.createCommentVNode("",!0),t.userStatus?(e.openBlock(),e.createBlock(o,{key:1,size:"100","element-type":"span","data-qa":"dt-recipe-leftbar-row-user-status",class:"d-recipe-leftbar-row__meta-custom"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.userStatus),1)]),_:1})):e.createCommentVNode("",!0)])]),_:1},16,["unread-count","description","has-unreads","selected","has-call-button","muted","is-typing"])}const C=p._(y,[["render",g]]);exports.default=C;
 //# sourceMappingURL=contact-row.cjs.map

package/dist/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/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/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":"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"}

package/dist/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