@dialpad/dialtone 9.65.1 → 9.66.0

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

@@ -7,9 +7,9 @@ import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtButton } from "./button.js";
 import { DtBadge } from "./badge.js";
 import "../common/constants.js";
-import "../chunks/index-GVD15GIB.js";
+import "../chunks/index-dfdrE-3M.js";
 import "@dialpad/dialtone-emojis";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./emoji.js";
 import "./skeleton.js";
@@ -93,14 +93,10 @@ const _sfc_main = {
   },
   computed: {
     leftbarContactCentersRowClasses() {
-      return [
-        "dt-leftbar-row",
-        "dt-leftbar-row--contact-centers",
-        {
-          "dt-leftbar-row--unread-count": this.showUnreadCount,
-          "dt-leftbar-row--selected": this.selected
-        }
-      ];
+      return ["dt-leftbar-row", "dt-leftbar-row--contact-centers", {
+        "dt-leftbar-row--unread-count": this.showUnreadCount,
+        "dt-leftbar-row--selected": this.selected
+      }];
     },
     getAriaLabel() {
       return this.ariaLabel ? this.ariaLabel : safeConcatStrings([this.description, this.unreadCountTooltip]);
@@ -141,13 +137,19 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
-const _hoisted_2 = { class: "dt-leftbar-row__alpha" };
+const _hoisted_2 = {
+  class: "dt-leftbar-row__alpha"
+};
 const _hoisted_3 = {
   key: 0,
   class: "dt-leftbar-row__omega"
 };
-const _hoisted_4 = { class: "dt-leftbar-row__action-container" };
-const _hoisted_5 = { class: "dt-leftbar-row__bottom" };
+const _hoisted_4 = {
+  class: "dt-leftbar-row__action-container"
+};
+const _hoisted_5 = {
+  class: "dt-leftbar-row__bottom"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_headphones = resolveComponent("dt-icon-headphones");
   const _component_dt_emoji_text_wrapper = resolveComponent("dt-emoji-text-wrapper");
@@ -155,82 +157,56 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_chevron_down = resolveComponent("dt-icon-chevron-down");
   const _component_dt_button = resolveComponent("dt-button");
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass([
-      "dt-leftbar-row__container",
-      { "dt-leftbar-row__container--off-duty": _ctx.$slots.timer }
-    ])
-  }, [
-    createElementVNode("div", {
-      class: normalizeClass($options.leftbarContactCentersRowClasses),
-      "data-qa": "dt-recipe-contact-centers-row"
-    }, [
-      createElementVNode("a", mergeProps({
-        class: "dt-leftbar-row__primary",
-        "data-qa": _ctx.$attrs["data-qa"] ?? "dt-leftbar-row-link",
-        "aria-label": $options.getAriaLabel,
-        title: $props.description,
-        href: _ctx.$attrs.href ?? "javascript:void(0)"
-      }, _ctx.$attrs, toHandlers($options.contactRowListeners, true), {
-        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-      }), [
-        createElementVNode("div", _hoisted_2, [
-          createVNode(_component_dt_icon_headphones, {
-            size: "300",
-            "data-qa": "dt-leftbar-row-icon"
-          })
-        ]),
-        createElementVNode("div", {
-          class: "dt-leftbar-row__label",
-          style: normalizeStyle(`flex-basis: ${$data.labelWidth}`)
-        }, [
-          createVNode(_component_dt_emoji_text_wrapper, {
-            class: "dt-leftbar-row__description",
-            "data-qa": "dt-leftbar-row-description",
-            size: "200"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString($props.description), 1)
-            ]),
-            _: 1
-          })
-        ], 4)
-      ], 16, _hoisted_1),
-      !$props.hideActions ? (openBlock(), createElementBlock("div", _hoisted_3, [
-        renderSlot(_ctx.$slots, "right", {}, void 0, true),
-        createElementVNode("div", _hoisted_4, [
-          $options.showUnreadCount ? (openBlock(), createBlock(_component_dt_badge, {
-            key: 0,
-            class: "dt-leftbar-row__unread-badge",
-            "data-qa": "dt-leftbar-row-unread-badge",
-            kind: "count",
-            type: "bulletin"
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString($props.unreadCount), 1)
-            ]),
-            _: 1
-          })) : createCommentVNode("", true),
-          createVNode(_component_dt_button, {
-            class: "dt-leftbar-row__action",
-            "data-qa": "dt-leftbar-row-action-button",
-            "aria-label": $props.menuButtonAriaLabel,
-            importance: "clear",
-            size: "xs",
-            circle: "",
-            onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.$emit("click-menu", $event), ["stop"]))
-          }, {
-            icon: withCtx(() => [
-              createVNode(_component_dt_icon_chevron_down, { size: "100" })
-            ]),
-            _: 1
-          }, 8, ["aria-label"])
-        ])
-      ])) : createCommentVNode("", true)
-    ], 2),
-    createElementVNode("div", _hoisted_5, [
-      renderSlot(_ctx.$slots, "timer", {}, void 0, true)
-    ])
-  ], 2);
+    class: normalizeClass(["dt-leftbar-row__container", {
+      "dt-leftbar-row__container--off-duty": _ctx.$slots.timer
+    }])
+  }, [createElementVNode("div", {
+    class: normalizeClass($options.leftbarContactCentersRowClasses),
+    "data-qa": "dt-recipe-contact-centers-row"
+  }, [createElementVNode("a", mergeProps({
+    class: "dt-leftbar-row__primary",
+    "data-qa": _ctx.$attrs["data-qa"] ?? "dt-leftbar-row-link",
+    "aria-label": $options.getAriaLabel,
+    title: $props.description,
+    href: _ctx.$attrs.href ?? "javascript:void(0)"
+  }, _ctx.$attrs, toHandlers($options.contactRowListeners, true), {
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [createElementVNode("div", _hoisted_2, [createVNode(_component_dt_icon_headphones, {
+    size: "300",
+    "data-qa": "dt-leftbar-row-icon"
+  })]), createElementVNode("div", {
+    class: "dt-leftbar-row__label",
+    style: normalizeStyle(`flex-basis: ${$data.labelWidth}`)
+  }, [createVNode(_component_dt_emoji_text_wrapper, {
+    class: "dt-leftbar-row__description",
+    "data-qa": "dt-leftbar-row-description",
+    size: "200"
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString($props.description), 1)]),
+    _: 1
+  })], 4)], 16, _hoisted_1), !$props.hideActions ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "right", {}, void 0, true), createElementVNode("div", _hoisted_4, [$options.showUnreadCount ? (openBlock(), createBlock(_component_dt_badge, {
+    key: 0,
+    class: "dt-leftbar-row__unread-badge",
+    "data-qa": "dt-leftbar-row-unread-badge",
+    kind: "count",
+    type: "bulletin"
+  }, {
+    default: withCtx(() => [createTextVNode(toDisplayString($props.unreadCount), 1)]),
+    _: 1
+  })) : createCommentVNode("", true), createVNode(_component_dt_button, {
+    class: "dt-leftbar-row__action",
+    "data-qa": "dt-leftbar-row-action-button",
+    "aria-label": $props.menuButtonAriaLabel,
+    importance: "clear",
+    size: "xs",
+    circle: "",
+    onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.$emit("click-menu", $event), ["stop"]))
+  }, {
+    icon: withCtx(() => [createVNode(_component_dt_icon_chevron_down, {
+      size: "100"
+    })]),
+    _: 1
+  }, 8, ["aria-label"])])])) : createCommentVNode("", true)], 2), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "timer", {}, void 0, true)])], 2);
 }
 const contact_centers_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cc2f5ae8"]]);
 export {

package/dist/vue3/lib/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      'dt-leftbar-row__container',\n      { 'dt-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"dt-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"$attrs\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"dt-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"dt-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-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=\"dt-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"dt-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"dt-leftbar-row__unread-badge\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"dt-leftbar-row__action\"\n            data-qa=\"dt-leftbar-row-action-button\"\n            :aria-label=\"menuButtonAriaLabel\"\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=\"dt-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\n\nexport default {\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\n     */\n    unreadCount: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Aria label for the menu button.\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\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    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'dt-leftbar-row',\n        'dt-leftbar-row--contact-centers',\n        {\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return this.unreadCount > 0;\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(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtEmojiTextWrapper","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_openBlock","_renderSlot","_createBlock","_withModifiers"],"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      'dt-leftbar-row__container',\n      { 'dt-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"dt-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"$attrs\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"dt-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"dt-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-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=\"dt-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"dt-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"dt-leftbar-row__unread-badge\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"dt-leftbar-row__action\"\n            data-qa=\"dt-leftbar-row-action-button\"\n            :aria-label=\"menuButtonAriaLabel\"\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=\"dt-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\n\nexport default {\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\n     */\n    unreadCount: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Aria label for the menu button.\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\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    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'dt-leftbar-row',\n        'dt-leftbar-row--contact-centers',\n        {\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return this.unreadCount > 0;\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(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["_sfc_main","name","components","DtButton","DtBadge","DtEmojiTextWrapper","DtIconHeadphones","DtIconChevronDown","inheritAttrs","props","ariaLabel","type","String","default","description","required","selected","Boolean","hideActions","unreadCount","Number","menuButtonAriaLabel","emits","data","labelWidth","computed","leftbarContactCentersRowClasses","showUnreadCount","getAriaLabel","safeConcatStrings","unreadCountTooltip","contactRowListeners","extractVueListeners","$attrs","watch","$props","deep","handler","$nextTick","adjustLabelWidth","mounted","resizeObserver","ResizeObserver","observe","$el","beforeUnmount","disconnect","methods","querySelector","clientWidth","omegaWidth","alphaWidth","paddings","_hoisted_2","class","_hoisted_4","_hoisted_5","_createElementBlock","_normalizeClass","_ctx","$slots","timer","_createElementVNode","$options","_mergeProps","title","href","_toHandlers","onClick","_cache","$event","$emit","_createVNode","_component_dt_icon_headphones","size","style","$data","_component_dt_emoji_text_wrapper","_openBlock","_hoisted_3","_renderSlot","undefined","_createBlock","_component_dt_badge","kind","_component_dt_button","importance","circle","_withModifiers","icon","_component_dt_icon_chevron_down"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhn
 require("../common/utils.cjs");
 require("../common/constants.cjs");
 require("@dialpad/dialtone-icons/icons.json");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-bvhFNOPu.js");
 require("./presence.cjs");
 require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue3");
@@ -119,10 +119,18 @@ const _hoisted_2 = {
   key: 0,
   class: "dt-contact-info--avatars"
 };
-const _hoisted_3 = { "data-qa": "contact-info-header" };
-const _hoisted_4 = { "data-qa": "contact-info-subtitle" };
-const _hoisted_5 = { "data-qa": "contact-info-bottom" };
-const _hoisted_6 = { "data-qa": "contact-info-right" };
+const _hoisted_3 = {
+  "data-qa": "contact-info-header"
+};
+const _hoisted_4 = {
+  "data-qa": "contact-info-subtitle"
+};
+const _hoisted_5 = {
+  "data-qa": "contact-info-bottom"
+};
+const _hoisted_6 = {
+  "data-qa": "contact-info-right"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = vue.resolveComponent("dt-avatar");
   const _component_dt_item_layout = vue.resolveComponent("dt-item-layout");
@@ -131,75 +139,52 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "contact-info",
     class: "dt-contact-info"
   }, vue.createSlots({
-    default: vue.withCtx(() => [
-      vue.createElementVNode("div", _hoisted_3, [
-        vue.renderSlot(_ctx.$slots, "header", {}, void 0, true)
-      ])
-    ]),
-    subtitle: vue.withCtx(() => [
-      vue.createElementVNode("div", _hoisted_4, [
-        vue.renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)
-      ])
-    ]),
+    default: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_3, [vue.renderSlot(_ctx.$slots, "header", {}, void 0, true)])]),
+    subtitle: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_4, [vue.renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)])]),
     _: 2
-  }, [
-    $props.showAvatar ? {
-      name: "left",
-      fn: vue.withCtx(() => [
-        vue.createElementVNode("button", {
-          class: "dt-contact-info__left",
-          "data-qa": "contact-info-left",
-          "aria-labelledby": $props.avatarLabelledBy,
-          onClick: _cache[0] || (_cache[0] = (...args) => $options.avatarClick && $options.avatarClick(...args))
-        }, [
-          $props.avatarList ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.avatarList, (avatar, index) => {
-              return vue.openBlock(), vue.createBlock(_component_dt_avatar, {
-                key: index,
-                size: $props.avatarSize,
-                seed: avatar.seed,
-                "full-name": avatar.fullName,
-                "image-src": avatar.src,
-                "image-alt": "",
-                "icon-name": $props.avatarIcon,
-                "overlay-icon": avatar.icon,
-                "overlay-text": avatar.text,
-                "avatar-class": [{ "d-mln24": index > 0, "d-bc-brand": !!avatar.halo }]
-              }, null, 8, ["size", "seed", "full-name", "image-src", "icon-name", "overlay-icon", "overlay-text", "avatar-class"]);
-            }), 128))
-          ])) : (vue.openBlock(), vue.createBlock(_component_dt_avatar, {
-            key: 1,
-            size: $props.avatarSize,
-            "full-name": $props.avatarFullName,
-            "image-src": $props.avatarSrc,
-            "image-alt": "",
-            "icon-name": $props.avatarIcon,
-            seed: $props.avatarSeed,
-            presence: $props.presence
-          }, null, 8, ["size", "full-name", "image-src", "icon-name", "seed", "presence"]))
-        ], 8, _hoisted_1)
-      ]),
-      key: "0"
-    } : void 0,
-    _ctx.$slots.bottom ? {
-      name: "bottom",
-      fn: vue.withCtx(() => [
-        vue.createElementVNode("div", _hoisted_5, [
-          vue.renderSlot(_ctx.$slots, "bottom", {}, void 0, true)
-        ])
-      ]),
-      key: "1"
-    } : void 0,
-    _ctx.$slots.right ? {
-      name: "right",
-      fn: vue.withCtx(() => [
-        vue.createElementVNode("div", _hoisted_6, [
-          vue.renderSlot(_ctx.$slots, "right", {}, void 0, true)
-        ])
-      ]),
-      key: "2"
-    } : void 0
-  ]), 1032, ["role"]);
+  }, [$props.showAvatar ? {
+    name: "left",
+    fn: vue.withCtx(() => [vue.createElementVNode("button", {
+      class: "dt-contact-info__left",
+      "data-qa": "contact-info-left",
+      "aria-labelledby": $props.avatarLabelledBy,
+      onClick: _cache[0] || (_cache[0] = (...args) => $options.avatarClick && $options.avatarClick(...args))
+    }, [$props.avatarList ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.avatarList, (avatar, index) => {
+      return vue.openBlock(), vue.createBlock(_component_dt_avatar, {
+        key: index,
+        size: $props.avatarSize,
+        seed: avatar.seed,
+        "full-name": avatar.fullName,
+        "image-src": avatar.src,
+        "image-alt": "",
+        "icon-name": $props.avatarIcon,
+        "overlay-icon": avatar.icon,
+        "overlay-text": avatar.text,
+        "avatar-class": [{
+          "d-mln24": index > 0,
+          "d-bc-brand": !!avatar.halo
+        }]
+      }, null, 8, ["size", "seed", "full-name", "image-src", "icon-name", "overlay-icon", "overlay-text", "avatar-class"]);
+    }), 128))])) : (vue.openBlock(), vue.createBlock(_component_dt_avatar, {
+      key: 1,
+      size: $props.avatarSize,
+      "full-name": $props.avatarFullName,
+      "image-src": $props.avatarSrc,
+      "image-alt": "",
+      "icon-name": $props.avatarIcon,
+      seed: $props.avatarSeed,
+      presence: $props.presence
+    }, null, 8, ["size", "full-name", "image-src", "icon-name", "seed", "presence"]))], 8, _hoisted_1)]),
+    key: "0"
+  } : void 0, _ctx.$slots.bottom ? {
+    name: "bottom",
+    fn: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "bottom", {}, void 0, true)])]),
+    key: "1"
+  } : void 0, _ctx.$slots.right ? {
+    name: "right",
+    fn: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_6, [vue.renderSlot(_ctx.$slots, "right", {}, void 0, true)])]),
+    key: "2"
+  } : void 0]), 1032, ["role"]);
 }
 const contact_info = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a3c913d1"]]);
 exports.DtRecipeContactInfo = contact_info;

package/dist/vue3/lib/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=\"dt-contact-info\"\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"dt-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=\"dt-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            :icon-name=\"avatarIcon\"\n            :overlay-icon=\"avatar.icon\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[{ 'd-mln24': index > 0, 'd-bc-brand': !!avatar.halo }]\"\n          />\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :icon-name=\"avatarIcon\"\n          :seed=\"avatarSeed\"\n          :presence=\"presence\"\n        />\n      </button>\n    </template>\n    <template #default>\n      <div data-qa=\"contact-info-header\">\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div data-qa=\"contact-info-subtitle\">\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 data-qa=\"contact-info-bottom\">\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar icon to display if `avatarSrc` is empty.\n     */\n    avatarIcon: {\n      type: String,\n      default: null,\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     * 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\n<style lang=\"less\" scoped>\n.dt-contact-info {\n  --contact-info-avatar-border-color: var(--dt-color-surface-primary);\n\n  display: flex;\n\n  &:deep(.dt-item-layout) {\n    flex: 1 1 0;\n  }\n\n  &:deep(.dt-item-layout--content) {\n    /*\n    DP-74536: Add `min-width` to make the width of \"contact info\" adjustable.\n    */\n    min-width: var(--dt-space-825);\n  }\n\n  &:deep(.dt-item-layout--left) {\n    /*\n    DP-74536: To make 'Avatar' in fixed position when resizing the window.\n    */\n    min-width: var(--dt-space-650);\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  &:deep(.dt-item-layout--right) {\n    /*\n    DP-74536: Remove `min-width` which cause extra unused empty space on the right of \"contact info\".\n    */\n    min-width: 0;\n    align-items: center;\n  }\n\n  &__left {\n    position: relative;\n    background-color: transparent;\n    background-image: none;\n    border-width: 0;\n    cursor: pointer;\n  }\n\n  &--avatars {\n    margin-right: var(--dt-space-300-negative);\n    display: flex;\n    flex-direction: row;\n\n    .d-avatar {\n      border-radius: var(--dt-size-radius-pill);\n      border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);\n      box-sizing: unset;\n    }\n  }\n}\n</style>\n"],"names":["DtAvatar","DtItemLayout","_createBlock","_createElementVNode","_renderSlot","_openBlock","_createElementBlock","_Fragment","_renderList"],"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=\"dt-contact-info\"\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"dt-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=\"dt-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            :icon-name=\"avatarIcon\"\n            :overlay-icon=\"avatar.icon\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[{ 'd-mln24': index > 0, 'd-bc-brand': !!avatar.halo }]\"\n          />\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :icon-name=\"avatarIcon\"\n          :seed=\"avatarSeed\"\n          :presence=\"presence\"\n        />\n      </button>\n    </template>\n    <template #default>\n      <div data-qa=\"contact-info-header\">\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div data-qa=\"contact-info-subtitle\">\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 data-qa=\"contact-info-bottom\">\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar icon to display if `avatarSrc` is empty.\n     */\n    avatarIcon: {\n      type: String,\n      default: null,\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     * 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\n<style lang=\"less\" scoped>\n.dt-contact-info {\n  --contact-info-avatar-border-color: var(--dt-color-surface-primary);\n\n  display: flex;\n\n  &:deep(.dt-item-layout) {\n    flex: 1 1 0;\n  }\n\n  &:deep(.dt-item-layout--content) {\n    /*\n    DP-74536: Add `min-width` to make the width of \"contact info\" adjustable.\n    */\n    min-width: var(--dt-space-825);\n  }\n\n  &:deep(.dt-item-layout--left) {\n    /*\n    DP-74536: To make 'Avatar' in fixed position when resizing the window.\n    */\n    min-width: var(--dt-space-650);\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  &:deep(.dt-item-layout--right) {\n    /*\n    DP-74536: Remove `min-width` which cause extra unused empty space on the right of \"contact info\".\n    */\n    min-width: 0;\n    align-items: center;\n  }\n\n  &__left {\n    position: relative;\n    background-color: transparent;\n    background-image: none;\n    border-width: 0;\n    cursor: pointer;\n  }\n\n  &--avatars {\n    margin-right: var(--dt-space-300-negative);\n    display: flex;\n    flex-direction: row;\n\n    .d-avatar {\n      border-radius: var(--dt-size-radius-pill);\n      border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);\n      box-sizing: unset;\n    }\n  }\n}\n</style>\n"],"names":["_sfc_main","name","components","DtAvatar","DtItemLayout","props","role","type","String","default","showAvatar","Boolean","avatarSrc","avatarSeed","avatarFullName","avatarIcon","avatarSize","avatarLabelledBy","presence","avatarList","Array","emits","methods","avatarClick","$emit","class","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createElementVNode","_renderSlot","_ctx","$slots","undefined","subtitle","onClick","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","key","size","seed","fullName","src","icon","text","halo","bottom","right"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import "../common/utils.js";
 import "../common/constants.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "./presence.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
@@ -117,10 +117,18 @@ const _hoisted_2 = {
   key: 0,
   class: "dt-contact-info--avatars"
 };
-const _hoisted_3 = { "data-qa": "contact-info-header" };
-const _hoisted_4 = { "data-qa": "contact-info-subtitle" };
-const _hoisted_5 = { "data-qa": "contact-info-bottom" };
-const _hoisted_6 = { "data-qa": "contact-info-right" };
+const _hoisted_3 = {
+  "data-qa": "contact-info-header"
+};
+const _hoisted_4 = {
+  "data-qa": "contact-info-subtitle"
+};
+const _hoisted_5 = {
+  "data-qa": "contact-info-bottom"
+};
+const _hoisted_6 = {
+  "data-qa": "contact-info-right"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = resolveComponent("dt-avatar");
   const _component_dt_item_layout = resolveComponent("dt-item-layout");
@@ -129,75 +137,52 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "contact-info",
     class: "dt-contact-info"
   }, createSlots({
-    default: withCtx(() => [
-      createElementVNode("div", _hoisted_3, [
-        renderSlot(_ctx.$slots, "header", {}, void 0, true)
-      ])
-    ]),
-    subtitle: withCtx(() => [
-      createElementVNode("div", _hoisted_4, [
-        renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)
-      ])
-    ]),
+    default: withCtx(() => [createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "header", {}, void 0, true)])]),
+    subtitle: withCtx(() => [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)])]),
     _: 2
-  }, [
-    $props.showAvatar ? {
-      name: "left",
-      fn: withCtx(() => [
-        createElementVNode("button", {
-          class: "dt-contact-info__left",
-          "data-qa": "contact-info-left",
-          "aria-labelledby": $props.avatarLabelledBy,
-          onClick: _cache[0] || (_cache[0] = (...args) => $options.avatarClick && $options.avatarClick(...args))
-        }, [
-          $props.avatarList ? (openBlock(), createElementBlock("span", _hoisted_2, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList($props.avatarList, (avatar, index) => {
-              return openBlock(), createBlock(_component_dt_avatar, {
-                key: index,
-                size: $props.avatarSize,
-                seed: avatar.seed,
-                "full-name": avatar.fullName,
-                "image-src": avatar.src,
-                "image-alt": "",
-                "icon-name": $props.avatarIcon,
-                "overlay-icon": avatar.icon,
-                "overlay-text": avatar.text,
-                "avatar-class": [{ "d-mln24": index > 0, "d-bc-brand": !!avatar.halo }]
-              }, null, 8, ["size", "seed", "full-name", "image-src", "icon-name", "overlay-icon", "overlay-text", "avatar-class"]);
-            }), 128))
-          ])) : (openBlock(), createBlock(_component_dt_avatar, {
-            key: 1,
-            size: $props.avatarSize,
-            "full-name": $props.avatarFullName,
-            "image-src": $props.avatarSrc,
-            "image-alt": "",
-            "icon-name": $props.avatarIcon,
-            seed: $props.avatarSeed,
-            presence: $props.presence
-          }, null, 8, ["size", "full-name", "image-src", "icon-name", "seed", "presence"]))
-        ], 8, _hoisted_1)
-      ]),
-      key: "0"
-    } : void 0,
-    _ctx.$slots.bottom ? {
-      name: "bottom",
-      fn: withCtx(() => [
-        createElementVNode("div", _hoisted_5, [
-          renderSlot(_ctx.$slots, "bottom", {}, void 0, true)
-        ])
-      ]),
-      key: "1"
-    } : void 0,
-    _ctx.$slots.right ? {
-      name: "right",
-      fn: withCtx(() => [
-        createElementVNode("div", _hoisted_6, [
-          renderSlot(_ctx.$slots, "right", {}, void 0, true)
-        ])
-      ]),
-      key: "2"
-    } : void 0
-  ]), 1032, ["role"]);
+  }, [$props.showAvatar ? {
+    name: "left",
+    fn: withCtx(() => [createElementVNode("button", {
+      class: "dt-contact-info__left",
+      "data-qa": "contact-info-left",
+      "aria-labelledby": $props.avatarLabelledBy,
+      onClick: _cache[0] || (_cache[0] = (...args) => $options.avatarClick && $options.avatarClick(...args))
+    }, [$props.avatarList ? (openBlock(), createElementBlock("span", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.avatarList, (avatar, index) => {
+      return openBlock(), createBlock(_component_dt_avatar, {
+        key: index,
+        size: $props.avatarSize,
+        seed: avatar.seed,
+        "full-name": avatar.fullName,
+        "image-src": avatar.src,
+        "image-alt": "",
+        "icon-name": $props.avatarIcon,
+        "overlay-icon": avatar.icon,
+        "overlay-text": avatar.text,
+        "avatar-class": [{
+          "d-mln24": index > 0,
+          "d-bc-brand": !!avatar.halo
+        }]
+      }, null, 8, ["size", "seed", "full-name", "image-src", "icon-name", "overlay-icon", "overlay-text", "avatar-class"]);
+    }), 128))])) : (openBlock(), createBlock(_component_dt_avatar, {
+      key: 1,
+      size: $props.avatarSize,
+      "full-name": $props.avatarFullName,
+      "image-src": $props.avatarSrc,
+      "image-alt": "",
+      "icon-name": $props.avatarIcon,
+      seed: $props.avatarSeed,
+      presence: $props.presence
+    }, null, 8, ["size", "full-name", "image-src", "icon-name", "seed", "presence"]))], 8, _hoisted_1)]),
+    key: "0"
+  } : void 0, _ctx.$slots.bottom ? {
+    name: "bottom",
+    fn: withCtx(() => [createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "bottom", {}, void 0, true)])]),
+    key: "1"
+  } : void 0, _ctx.$slots.right ? {
+    name: "right",
+    fn: withCtx(() => [createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "right", {}, void 0, true)])]),
+    key: "2"
+  } : void 0]), 1032, ["role"]);
 }
 const contact_info = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-a3c913d1"]]);
 export {