@dialpad/dialtone-vue 3.50.0 → 3.52.0

package/dist/dialtone-vue.umd.js

@@ -1301,14 +1301,10 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=ac8c0ad8
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=b408742a
 
 const _hoisted_1 = ["id"];
 const _hoisted_2 = {
-  ref: "canvas",
-  class: "d-avatar__canvas"
-};
-const _hoisted_3 = {
   key: 0,
   class: "d-avatar__count d-zi-base1",
   "data-qa": "dt-avatar-count"
@@ -1321,12 +1317,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.avatarClasses),
     style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)($options.initialKindStyle),
     "data-qa": "dt-avatar"
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_2, [$options.showDefaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+    ref: "canvas",
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$props.canvasClass, 'd-avatar__canvas'])
+  }, [$options.showDefaultSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {
     key: 0
   }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $options.showInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
     key: 1,
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["d-ps-absolute d-zi-base", $data.AVATAR_KIND_MODIFIERS.initials])
-  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.formattedInitials), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 512), $options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_3, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.formattedGroup), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.presence && !$options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($data.formattedInitials), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2), $options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_2, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.formattedGroup), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.presence && !$options.showGroup ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_presence, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 1,
     presence: $props.presence,
     class: ["d-zi-base1", ['d-avatar__presence', $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]]]
@@ -1334,7 +1333,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-presence"
   }), null, 16, ["presence", "class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 14, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=ac8c0ad8
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=b408742a
 
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
@@ -1564,6 +1563,25 @@ function debounce(func) {
   clearTimeout(TIMER);
   TIMER = setTimeout(func, timeout);
 }
+/**
+ * Checks if the element is out of the viewport
+ * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
+ * @param  {HTMLElement} element The element to check
+ * @return {Object} A set of booleans for each side of the element
+ */
+
+function isOutOfViewPort(element) {
+  const bounding = element.getBoundingClientRect();
+  const isOut = {
+    top: bounding.top < 0,
+    left: bounding.left < 0,
+    bottom: bounding.bottom > (window.innerHeight || document.documentElement.clientHeight),
+    right: bounding.right > (window.innerWidth || document.documentElement.clientWidth)
+  };
+  isOut.any = Object.values(isOut).some(val => val);
+  isOut.all = Object.values(isOut).every(val => val);
+  return isOut;
+}
 /* harmony default export */ const utils = ({
   getUniqueString,
   getRandomElement,
@@ -1575,7 +1593,8 @@ function debounce(func) {
   flushPromises,
   kebabCaseToPascalCase,
   extractVueListeners,
-  debounce
+  debounce,
+  isOutOfViewPort
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/presence/presence.vue?vue&type=template&id=77957bb3
 
@@ -1766,6 +1785,14 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
       default: ''
     },
 
+    /**
+     * Set classes on the avatar canvas. Wrapper around the core avatar image.
+     */
+    canvasClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
     /**
      * Determines whether to show the presence indicator for
      * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
@@ -2015,10 +2042,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=ac8c0ad8&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=b408742a&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=ac8c0ad8&lang=less
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=b408742a&lang=less
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
@@ -2034,34 +2061,38 @@ const avatar_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(avatarvue_t
 ;// CONCATENATED MODULE: ./components/avatar/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/badge/badge.vue?vue&type=template&id=741d001d
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/badge/badge.vue?vue&type=template&id=e4533274
 
-const badgevue_type_template_id_741d001d_hoisted_1 = {
+const badgevue_type_template_id_e4533274_hoisted_1 = {
   key: 0,
+  class: "d-badge__decorative"
+};
+const badgevue_type_template_id_e4533274_hoisted_2 = {
+  key: 1,
   class: "d-badge__icon-left"
 };
-const badgevue_type_template_id_741d001d_hoisted_2 = {
+const _hoisted_3 = {
   class: "d-badge__label"
 };
-const badgevue_type_template_id_741d001d_hoisted_3 = {
-  key: 1,
+const _hoisted_4 = {
+  key: 2,
   class: "d-badge__icon-right"
 };
-function badgevue_type_template_id_741d001d_render(_ctx, _cache, $props, $setup, $data, $options) {
+function badgevue_type_template_id_e4533274_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
-    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-badge', $data.BADGE_TYPE_MODIFIERS[$props.type], $data.BADGE_KIND_MODIFIERS[$props.kind]]),
+    class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-badge', $data.BADGE_TYPE_MODIFIERS[$props.type], $data.BADGE_KIND_MODIFIERS[$props.kind], $data.BADGE_DECORATION_MODIFIERS[$props.decoration]]),
     "data-qa": "dt-badge"
-  }, [$props.iconLeft || $props.type === 'ai' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", badgevue_type_template_id_741d001d_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+  }, [$props.decoration ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", badgevue_type_template_id_e4533274_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.iconLeft || $props.type === 'ai' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", badgevue_type_template_id_e4533274_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
     name: $props.iconLeft || 'dialpad-ai',
     size: "200"
-  }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", badgevue_type_template_id_741d001d_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.text), 1)])]), $props.iconRight ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", badgevue_type_template_id_741d001d_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+  }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", _hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.text), 1)])]), $props.iconRight ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", _hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
     name: $props.iconRight,
     size: "200"
   }, null, 8, ["name"])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
 }
-;// CONCATENATED MODULE: ./components/badge/badge.vue?vue&type=template&id=741d001d
+;// CONCATENATED MODULE: ./components/badge/badge.vue?vue&type=template&id=e4533274
 
 ;// CONCATENATED MODULE: ./components/badge/badge_constants.js
 const BADGE_TYPE_MODIFIERS = {
@@ -2077,6 +2108,30 @@ const BADGE_KIND_MODIFIERS = {
   label: '',
   count: 'd-badge--count'
 };
+const BADGE_DECORATION_MODIFIERS = {
+  'black-400': 'd-badge--decorate-black-400',
+  'black-500': 'd-badge--decorate-black-500',
+  'black-900': 'd-badge--decorate-black-900',
+  'red-200': 'd-badge--decorate-red-200',
+  'red-300': 'd-badge--decorate-red-300',
+  'red-400': 'd-badge--decorate-red-400',
+  'purple-200': 'd-badge--decorate-purple-200',
+  'purple-300': 'd-badge--decorate-purple-300',
+  'purple-400': 'd-badge--decorate-purple-400',
+  'purple-500': 'd-badge--decorate-purple-500',
+  'blue-200': 'd-badge--decorate-blue-200',
+  'blue-300': 'd-badge--decorate-blue-300',
+  'blue-400': 'd-badge--decorate-blue-400',
+  'green-300': 'd-badge--decorate-green-300',
+  'green-400': 'd-badge--decorate-green-400',
+  'green-500': 'd-badge--decorate-green-500',
+  'gold-300': 'd-badge--decorate-gold-300',
+  'gold-400': 'd-badge--decorate-gold-400',
+  'gold-500': 'd-badge--decorate-gold-500',
+  'magenta-200': 'd-badge--decorate-magenta-200',
+  'magenta-300': 'd-badge--decorate-magenta-300',
+  'magenta-400': 'd-badge--decorate-magenta-400'
+};
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/icon/icon.vue?vue&type=template&id=7bf3355d
 
 function iconvue_type_template_id_7bf3355d_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -2234,16 +2289,36 @@ const icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(iconvue_type_
       type: String,
       default: 'default',
       validator: type => Object.keys(BADGE_TYPE_MODIFIERS).includes(type)
+    },
+
+    /**
+     * Decoration for the badge. This can be only used with kind: label and type: default
+     * with no iconLeft and iconRight
+     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
+     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,
+     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400
+     */
+    decoration: {
+      type: String,
+      default: undefined,
+      validator: type => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type)
     }
   },
 
   data() {
     return {
       BADGE_TYPE_MODIFIERS: BADGE_TYPE_MODIFIERS,
-      BADGE_KIND_MODIFIERS: BADGE_KIND_MODIFIERS
+      BADGE_KIND_MODIFIERS: BADGE_KIND_MODIFIERS,
+      BADGE_DECORATION_MODIFIERS: BADGE_DECORATION_MODIFIERS
     };
   },
 
+  computed: {
+    hasIcons() {
+      return this.iconLeft !== '' || this.iconRight !== '';
+    }
+
+  },
   watch: {
     $props: {
       immediate: true,
@@ -2257,9 +2332,26 @@ const icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(iconvue_type_
   },
   methods: {
     validateProps() {
+      this.validateTypePropCombination();
+      this.validateDecorationPropCombination();
+    },
+
+    validateTypePropCombination() {
       if (this.type === 'ai' && this.kind === 'count') {
         console.error('DtBadge error: type: \'ai\' with kind: \'count\' is an invalid combination.');
       }
+    },
+
+    validateDecorationPropCombination() {
+      if (!this.decoration) return;
+
+      if (this.kind !== 'label' || this.type !== 'default') {
+        console.error('DtBadge error: decoration prop can only be used with kind: \'label\' and type: \'default\'.');
+      }
+
+      if (this.hasIcons) {
+        console.error('DtBadge error: decoration prop cannot be used with iconLeft or iconRight.');
+      }
     }
 
   }
@@ -2272,7 +2364,7 @@ const icon_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(iconvue_type_
 
 
 ;
-const badge_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(badgevue_type_script_lang_js, [['render',badgevue_type_template_id_741d001d_render]])
+const badge_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(badgevue_type_script_lang_js, [['render',badgevue_type_template_id_e4533274_render]])
 
 /* harmony default export */ const badge = (badge_exports_);
 ;// CONCATENATED MODULE: ./components/badge/index.js
@@ -4340,7 +4432,7 @@ const default_list_itemvue_type_template_id_1351f2a2_hoisted_2 = {
 const default_list_itemvue_type_template_id_1351f2a2_hoisted_3 = {
   class: "d-fl-grow1 d-of-hidden"
 };
-const _hoisted_4 = {
+const default_list_itemvue_type_template_id_1351f2a2_hoisted_4 = {
   key: 0
 };
 const _hoisted_5 = {
@@ -4354,7 +4446,7 @@ const _hoisted_6 = {
   "data-qa": "dt-default-list-item-right-wrapper"
 };
 function default_list_itemvue_type_template_id_1351f2a2_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", default_list_itemvue_type_template_id_1351f2a2_hoisted_1, [$data.hasSlotContent(_ctx.$slots.left) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", default_list_itemvue_type_template_id_1351f2a2_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("section", default_list_itemvue_type_template_id_1351f2a2_hoisted_3, [$data.hasSlotContent(_ctx.$slots.default) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.subtitle) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", default_list_itemvue_type_template_id_1351f2a2_hoisted_1, [$data.hasSlotContent(_ctx.$slots.left) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("section", default_list_itemvue_type_template_id_1351f2a2_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("section", default_list_itemvue_type_template_id_1351f2a2_hoisted_3, [$data.hasSlotContent(_ctx.$slots.default) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", default_list_itemvue_type_template_id_1351f2a2_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.subtitle) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 1,
     "data-qa": "dt-default-list-item-subtitle-wrapper",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-fs-100 d-fc-black-600', {
@@ -6504,11 +6596,11 @@ function dropdownvue_type_template_id_6b5cfae4_render(_ctx, _cache, $props, $set
 }
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=6b5cfae4
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=ed425072
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=template&id=348aec1e
 
-const popovervue_type_template_id_ed425072_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_ed425072_hoisted_2 = ["id", "tabindex"];
-function popovervue_type_template_id_ed425072_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_348aec1e_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_348aec1e_hoisted_2 = ["id", "tabindex"];
+function popovervue_type_template_id_348aec1e_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
   const _component_sr_only_close_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("sr-only-close-button");
@@ -6522,7 +6614,7 @@ function popovervue_type_template_id_ed425072_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_ed425072_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
+  }, null, 8, popovervue_type_template_id_348aec1e_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), {
     ref: "popover",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-popover', {
       'd-popover__anchor--opened': $data.isOpen
@@ -6554,7 +6646,7 @@ function popovervue_type_template_id_ed425072_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_ed425072_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    })], 40, popovervue_type_template_id_348aec1e_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -6617,7 +6709,7 @@ function popovervue_type_template_id_ed425072_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=ed425072
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=348aec1e
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -11788,6 +11880,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
+        this.tip.show();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
@@ -11803,16 +11896,14 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     if (this.isOpen) {
       this.initTippyInstance();
+      this.tip.show();
     } // rootMargin here must be greater than the margin of the height we are setting in calculatedMaxHeight which
     // currently is var(--space-300) (4px). If not the intersectionObserver will continually trigger in an infinite
     // loop.
     // threshold 1.0 makes this trigger every time the dialog "touches" the edge of the viewport.
 
 
-    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport, {
-      rootMargin: '-8px',
-      threshold: 1.0
-    });
+    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);
     this.intersectionObserver.observe(this.popoverContentEl);
   },
 
@@ -11830,8 +11921,12 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
    ******************/
   methods: {
     hasIntersectedViewport(entries) {
-      const dialog = entries === null || entries === void 0 ? void 0 : entries[0];
-      this.isOutsideViewport = !(dialog !== null && dialog !== void 0 && dialog.isIntersecting);
+      var _entries$;
+
+      const dialog = entries === null || entries === void 0 ? void 0 : (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.target;
+      if (!dialog) return;
+      const isOut = isOutOfViewPort(dialog);
+      this.isOutsideViewport = isOut.bottom || isOut.top;
     },
 
     popperOptions() {
@@ -11950,6 +12045,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
         if (element.tagName.toLowerCase() === 'body') {
           element.classList.add('d-of-hidden');
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.add('d-zi-popover');
         }
@@ -11967,6 +12065,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
         if (element.tagName.toLowerCase() === 'body') {
           element.classList.remove('d-of-hidden');
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.remove('d-zi-popover');
         }
@@ -11987,6 +12088,8 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       if (this.contentWidth === null) {
         this.popoverContentEl.style.width = 'auto';
       }
+
+      this.addEventListeners();
     },
 
     async onLeaveTransitionComplete() {
@@ -11999,7 +12102,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
-      this.enableScrolling();
+      await this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -12009,7 +12112,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     async onEnterTransitionComplete() {
       this.focusInitialElement();
-      this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
+      await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
       this.$emit('opened', true, this.$refs.popover__content);
@@ -12117,21 +12220,16 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
         onClickOutside: this.onClickOutside,
         onShow: this.onShow
       });
-      this.tip.setProps({
-        zIndex: this.modal ? 650 : this.calculateAnchorZindex()
-      });
-      this.tip.show();
-      this.addEventListeners();
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=ed425072&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=348aec1e&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=ed425072&lang=less
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=348aec1e&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -12141,7 +12239,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_ed425072_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_348aec1e_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -23207,10 +23305,10 @@ const general_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(genera
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=af6d6b56
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=6ee0b2d7
 
-const group_rowvue_type_template_id_af6d6b56_hoisted_1 = ["src", "alt"];
-function group_rowvue_type_template_id_af6d6b56_render(_ctx, _cache, $props, $setup, $data, $options) {
+const group_rowvue_type_template_id_6ee0b2d7_hoisted_1 = ["src", "alt"];
+function group_rowvue_type_template_id_6ee0b2d7_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
 
   const _component_dt_recipe_general_row = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-general-row");
@@ -23226,6 +23324,7 @@ function group_rowvue_type_template_id_af6d6b56_render(_ctx, _cache, $props, $se
   }, {
     left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_avatar, {
       initials: $props.avatarInitials,
+      seed: $props.avatarSeed,
       group: $props.groupCount
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("img", {
@@ -23233,13 +23332,13 @@ function group_rowvue_type_template_id_af6d6b56_render(_ctx, _cache, $props, $se
         "data-qa": "dt-avatar-image",
         src: $props.avatarSrc,
         alt: $props.avatarInitials
-      }, null, 8, group_rowvue_type_template_id_af6d6b56_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+      }, null, 8, group_rowvue_type_template_id_6ee0b2d7_hoisted_1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
       _: 1
-    }, 8, ["initials", "group"])]),
+    }, 8, ["initials", "seed", "group"])]),
     _: 1
   }, 8, ["description", "aria-label", "unread-count", "has-unreads", "unread-count-tooltip", "selected", "is-typing"]);
 }
-;// CONCATENATED MODULE: ./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=af6d6b56
+;// CONCATENATED MODULE: ./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=6ee0b2d7
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/group_row/group_row.vue?vue&type=script&lang=js
 
@@ -23271,6 +23370,14 @@ function group_rowvue_type_template_id_af6d6b56_render(_ctx, _cache, $props, $se
       required: true
     },
 
+    /**
+     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
+     */
+    avatarSeed: {
+      type: String,
+      default: null
+    },
+
     /**
      * Number displayed in avatar to count group members
      */
@@ -23353,18 +23460,18 @@ function group_rowvue_type_template_id_af6d6b56_render(_ctx, _cache, $props, $se
 
 
 ;
-const group_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group_rowvue_type_script_lang_js, [['render',group_rowvue_type_template_id_af6d6b56_render]])
+const group_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group_rowvue_type_script_lang_js, [['render',group_rowvue_type_template_id_6ee0b2d7_render]])
 
 /* harmony default export */ const group_row = (group_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/group_row/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=69299a5d
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=2327dbc4
 
-const contact_rowvue_type_template_id_69299a5d_hoisted_1 = ["src", "alt"];
-const contact_rowvue_type_template_id_69299a5d_hoisted_2 = {
+const contact_rowvue_type_template_id_2327dbc4_hoisted_1 = ["src"];
+const contact_rowvue_type_template_id_2327dbc4_hoisted_2 = {
   class: "dt-leftbar-row__status"
 };
-function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $setup, $data, $options) {
+function contact_rowvue_type_template_id_2327dbc4_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
@@ -23378,7 +23485,7 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
     description: `${$props.name} ${$props.presenceText} ${$props.userStatus}`,
     "has-unreads": $props.hasUnreads,
     selected: $props.selected,
-    "has-call-button": true,
+    "has-call-button": $props.hasCallButton,
     muted: $props.muted,
     "is-typing": $props.isTyping,
     "call-button-tooltip": $props.callButtonTooltip,
@@ -23395,8 +23502,8 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
         key: 0,
         "data-qa": "dt-avatar-image",
         src: $props.avatarSrc,
-        alt: $props.name
-      }, null, 8, contact_rowvue_type_template_id_69299a5d_hoisted_1)) : $props.noInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_icon, {
+        alt: ""
+      }, null, 8, contact_rowvue_type_template_id_2327dbc4_hoisted_1)) : $props.noInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_icon, {
         key: 1,
         name: "user",
         size: "200"
@@ -23412,7 +23519,7 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
     }, {
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.name), 1)]),
       _: 1
-    }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_rowvue_type_template_id_69299a5d_hoisted_2, [$props.presenceText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+    }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_rowvue_type_template_id_2327dbc4_hoisted_2, [$props.presenceText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: 0,
       "data-qa": "dt-leftbar-row-presence-text",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-leftbar-row__meta-context', $options.presenceColorClass])
@@ -23427,9 +23534,9 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
       _: 1
     })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
     _: 1
-  }, 16, ["unread-count", "description", "has-unreads", "selected", "muted", "is-typing", "call-button-tooltip", "unread-count-tooltip"]);
+  }, 16, ["unread-count", "description", "has-unreads", "selected", "has-call-button", "muted", "is-typing", "call-button-tooltip", "unread-count-tooltip"]);
 }
-;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=69299a5d
+;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=2327dbc4
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/contact_row/contact_row.vue?vue&type=script&lang=js
 
@@ -23548,6 +23655,14 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
       default: false
     },
 
+    /**
+     * Whether the contact row should display a call button when hovered.
+     */
+    hasCallButton: {
+      type: Boolean,
+      default: true
+    },
+
     /**
      * Text shown when the call button is hovered.
      */
@@ -23609,7 +23724,7 @@ function contact_rowvue_type_template_id_69299a5d_render(_ctx, _cache, $props, $
 
 
 ;
-const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_rowvue_type_script_lang_js, [['render',contact_rowvue_type_template_id_69299a5d_render]])
+const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_rowvue_type_script_lang_js, [['render',contact_rowvue_type_template_id_2327dbc4_render]])
 
 /* harmony default export */ const contact_row = (contact_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/index.js