@dialpad/dialtone-vue 2.77.2 → 2.78.1

package/dist/dialtone-vue.common.js

@@ -2421,8 +2421,8 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ const setPublicPath = (null);
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=template&id=1c525df0&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.avatarClasses,style:(_vm.initialKindStyle),attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_c('div',{ref:"canvas",class:[_vm.canvasClass, 'd-avatar__canvas']},[(_vm.showDefaultSlot)?_vm._t("default"):_vm._e(),(_vm.showInitials)?_c('span',{staticClass:"d-ps-absolute d-zi-base",class:_vm.AVATAR_KIND_MODIFIERS.initials},[_vm._v(" "+_vm._s(_vm.formattedInitials)+" ")]):_vm._e()],2),(_vm.showGroup)?_c('span',{staticClass:"d-avatar__count d-zi-base1",attrs:{"data-qa":"dt-avatar-count"}},[_vm._v(_vm._s(_vm.formattedGroup))]):_vm._e(),(_vm.presence && !_vm.showGroup)?_c('dt-presence',_vm._b({staticClass:"d-zi-base1",class:[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=template&id=7a8c5449&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.avatarClasses,style:(_vm.initialKindStyle),attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_c('div',{ref:"canvas",class:[_vm.canvasClass, 'd-avatar__canvas']},[(_vm.showDefaultSlot)?_vm._t("default"):_vm._e(),(_vm.showInitials)?_c('span',{staticClass:"d-ps-absolute d-zi-base",class:_vm.AVATAR_KIND_MODIFIERS.initials},[_vm._v(" "+_vm._s(_vm.formattedInitials)+" ")]):_vm._e()],2),(_vm.overlayIcon || _vm.overlayText)?_c('div',{staticClass:"d-bgc-black-900 d-o70 d-ps-absolute d-w100p d-h100p d-mn4 d-ba d-baw4 d-bc-white d-bar-pill d-d-flex d-ai-center d-zi-base"},[(_vm.overlayIcon)?_c('dt-icon',{staticClass:"d-fc-white d-w100p",attrs:{"name":_vm.overlayIcon}}):(_vm.overlayText)?_c('p',{staticClass:"d-fs-200 d-fw-bold d-fc-white d-w100p d-ta-center"},[_vm._v(" "+_vm._s(_vm.overlayText)+" ")]):_vm._e()],1):_vm._e(),(_vm.showGroup)?_c('span',{staticClass:"d-avatar__count d-zi-base1",attrs:{"data-qa":"dt-avatar-count"}},[_vm._v(_vm._s(_vm.formattedGroup))]):_vm._e(),(_vm.presence && !_vm.showGroup)?_c('dt-presence',_vm._b({staticClass:"d-zi-base1",class:[
       'd-avatar__presence',
       _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size] ],attrs:{"presence":_vm.presence,"data-qa":"dt-presence"}},'dt-presence',_vm.presenceProps,false)):_vm._e()],1)}
 var staticRenderFns = []
@@ -2883,6 +2883,115 @@ var component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/presence/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=template&id=38f31ebc&
+var iconvue_type_template_id_38f31ebc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.currentIcon)?_c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon","aria-hidden":_vm.ariaLabel ? 'false' : 'true',"aria-label":_vm.ariaLabel}}):_vm._e()}
+var iconvue_type_template_id_38f31ebc_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
+const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
+;// CONCATENATED MODULE: ./components/icon/icon_constants.js
+
+const ICON_SIZE_MODIFIERS = {
+  100: 'd-icon--size-100',
+  200: 'd-icon--size-200',
+  300: 'd-icon--size-300',
+  400: 'd-icon--size-400',
+  500: 'd-icon--size-500',
+  600: 'd-icon--size-600',
+  700: 'd-icon--size-700',
+  800: 'd-icon--size-800'
+};
+const DIALTONE_ICONS = dialtone_icons_namespaceObject;
+/* harmony default export */ const icon_constants = ({
+  ICON_SIZE_MODIFIERS,
+  DIALTONE_ICONS
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+/**
+ * The Icon component provides a set of glyphs and sizes to provide context your application.
+ * @see https://dialpad.design/components/icon.html
+ */
+
+/* harmony default export */ const iconvue_type_script_lang_js_ = ({
+  name: 'DtIcon',
+  props: {
+    /**
+     * The size of the icon.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: '500',
+      validator: s => Object.keys(ICON_SIZE_MODIFIERS).includes(s)
+    },
+
+    /**
+     * The icon name in kebab-case
+     */
+    name: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational
+     */
+    ariaLabel: {
+      type: String,
+      default: undefined
+    }
+  },
+  computed: {
+    iconSize() {
+      return ICON_SIZE_MODIFIERS[this.size];
+    },
+
+    iconName() {
+      return kebabCaseToPascalCase(this.name);
+    },
+
+    currentIcon() {
+      return DIALTONE_ICONS[this.iconName];
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=script&lang=js&
+ /* harmony default export */ const icon_iconvue_type_script_lang_js_ = (iconvue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/icon/icon.vue
+
+
+
+
+
+/* normalize component */
+;
+var icon_component = normalizeComponent(
+  icon_iconvue_type_script_lang_js_,
+  iconvue_type_template_id_38f31ebc_render,
+  iconvue_type_template_id_38f31ebc_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const icon = (icon_component.exports);
 // EXTERNAL MODULE: ./node_modules/seedrandom/index.js
 var node_modules_seedrandom = __webpack_require__(6377);
 var seedrandom_default = /*#__PURE__*/__webpack_require__.n(node_modules_seedrandom);
@@ -2973,6 +3082,24 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
 
 
 
@@ -2986,7 +3113,8 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 /* harmony default export */ const avatarvue_type_script_lang_js_ = ({
   name: 'DtAvatar',
   components: {
-    DtPresence: presence
+    DtPresence: presence,
+    DtIcon: icon
   },
   inheritAttrs: false,
   props: {
@@ -3084,6 +3212,22 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
       type: Number,
       default: undefined,
       validator: group => AVATAR_GROUP_VALIDATOR(group)
+    },
+
+    /**
+     * The icon that overlays the avatar
+     */
+    overlayIcon: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * The text that overlays the avatar
+     */
+    overlayText: {
+      type: String,
+      default: ''
     }
   },
 
@@ -3173,7 +3317,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
     kindHandler(el) {
       switch (this.kind) {
         case 'image':
-          el.classList.add('d-avatar__image', 'd-zi-base1');
+          if (this.showInitials) {
+            el.classList.add('d-avatar__image', 'd-zi-base1');
+          }
+
           this.validateImageAttrsPresence();
           this.setImageListeners(el);
           break;
@@ -3369,115 +3516,6 @@ const BADGE_DECORATION_MODIFIERS = {
   'magenta-300': 'd-badge--decorate-magenta-300',
   'magenta-400': 'd-badge--decorate-magenta-400'
 };
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=template&id=38f31ebc&
-var iconvue_type_template_id_38f31ebc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.currentIcon)?_c(_vm.currentIcon,{tag:"component",class:_vm.iconSize,attrs:{"data-qa":"dt-icon","aria-hidden":_vm.ariaLabel ? 'false' : 'true',"aria-label":_vm.ariaLabel}}):_vm._e()}
-var iconvue_type_template_id_38f31ebc_staticRenderFns = []
-
-
-;// CONCATENATED MODULE: external "@dialpad/dialtone-icons"
-const dialtone_icons_namespaceObject = require("@dialpad/dialtone-icons");
-;// CONCATENATED MODULE: ./components/icon/icon_constants.js
-
-const ICON_SIZE_MODIFIERS = {
-  100: 'd-icon--size-100',
-  200: 'd-icon--size-200',
-  300: 'd-icon--size-300',
-  400: 'd-icon--size-400',
-  500: 'd-icon--size-500',
-  600: 'd-icon--size-600',
-  700: 'd-icon--size-700',
-  800: 'd-icon--size-800'
-};
-const DIALTONE_ICONS = dialtone_icons_namespaceObject;
-/* harmony default export */ const icon_constants = ({
-  ICON_SIZE_MODIFIERS,
-  DIALTONE_ICONS
-});
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/icon/icon.vue?vue&type=script&lang=js&
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-
-
-/**
- * The Icon component provides a set of glyphs and sizes to provide context your application.
- * @see https://dialpad.design/components/icon.html
- */
-
-/* harmony default export */ const iconvue_type_script_lang_js_ = ({
-  name: 'DtIcon',
-  props: {
-    /**
-     * The size of the icon.
-     * @values 100, 200, 300, 400, 500, 600, 700, 800
-     */
-    size: {
-      type: String,
-      default: '500',
-      validator: s => Object.keys(ICON_SIZE_MODIFIERS).includes(s)
-    },
-
-    /**
-     * The icon name in kebab-case
-     */
-    name: {
-      type: String,
-      required: true
-    },
-
-    /**
-     * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational
-     */
-    ariaLabel: {
-      type: String,
-      default: undefined
-    }
-  },
-  computed: {
-    iconSize() {
-      return ICON_SIZE_MODIFIERS[this.size];
-    },
-
-    iconName() {
-      return kebabCaseToPascalCase(this.name);
-    },
-
-    currentIcon() {
-      return DIALTONE_ICONS[this.iconName];
-    }
-
-  }
-});
-;// CONCATENATED MODULE: ./components/icon/icon.vue?vue&type=script&lang=js&
- /* harmony default export */ const icon_iconvue_type_script_lang_js_ = (iconvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./components/icon/icon.vue
-
-
-
-
-
-/* normalize component */
-;
-var icon_component = normalizeComponent(
-  icon_iconvue_type_script_lang_js_,
-  iconvue_type_template_id_38f31ebc_render,
-  iconvue_type_template_id_38f31ebc_staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ const icon = (icon_component.exports);
 ;// CONCATENATED MODULE: ./components/icon/index.js
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/badge/badge.vue?vue&type=script&lang=js&
@@ -8381,13 +8419,13 @@ var collapsible_component = normalizeComponent(
 /* harmony default export */ const collapsible = (collapsible_component.exports);
 ;// CONCATENATED MODULE: ./components/collapsible/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=b22f331a&
-var dropdownvue_type_template_id_b22f331a_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","append-to":_vm.appendTo,"modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":_vm.shouldOpenWithArrowKeys,"open-on-context":_vm.openOnContext,"tether":_vm.tether},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/dropdown/dropdown.vue?vue&type=template&id=c0aa082e&
+var dropdownvue_type_template_id_c0aa082e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-popover',_vm._g({ref:"popover",attrs:{"content-width":_vm.contentWidth,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.openedWithKeyboard ? 'first' : 'dialog',"fallback-placements":_vm.fallbackPlacements,"padding":"none","role":"menu","append-to":_vm.appendTo,"modal":_vm.modal,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"open-with-arrow-keys":_vm.shouldOpenWithArrowKeys,"open-on-context":_vm.openOnContext,"tether":_vm.tether,"transition":_vm.transition},scopedSlots:_vm._u([{key:"anchor",fn:function(ref){
 var attrs = ref.attrs;
 return [_vm._t("anchor",null,null,attrs)]}},{key:"content",fn:function(ref){
 var close = ref.close;
 return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,"data-qa":"dt-dropdown-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[_vm._t("list",null,{"close":close}),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"tabindex":_vm.isArrowKeyNav ? -1 : 0},on:{"close":close}}):_vm._e()],2)]}}],null,true)},_vm.dropdownListeners))}
-var dropdownvue_type_template_id_b22f331a_staticRenderFns = []
+var dropdownvue_type_template_id_c0aa082e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=6d22723e&
@@ -14241,6 +14279,7 @@ const DROPDOWN_PADDING_CLASSES = {
 //
 //
 //
+//
 
 
 
@@ -14433,6 +14472,15 @@ const DROPDOWN_PADDING_CLASSES = {
     tether: {
       type: Boolean,
       default: true
+    },
+
+    /**
+     * Named transition when the content display is toggled.
+     * @see DtLazyShow
+     */
+    transition: {
+      type: String,
+      default: 'fade'
     }
   },
   emits: [
@@ -14669,8 +14717,8 @@ var dropdownvue_type_style_index_0_lang_less_ = __webpack_require__(782);
 
 var dropdown_component = normalizeComponent(
   dropdown_dropdownvue_type_script_lang_js_,
-  dropdownvue_type_template_id_b22f331a_render,
-  dropdownvue_type_template_id_b22f331a_staticRenderFns,
+  dropdownvue_type_template_id_c0aa082e_render,
+  dropdownvue_type_template_id_c0aa082e_staticRenderFns,
   false,
   null,
   null,
@@ -23282,9 +23330,9 @@ var callbar_button_with_popover_component = normalizeComponent(
 /* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=2e8a8344&
-var contact_infovue_type_template_id_2e8a8344_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-list-item',{attrs:{"id":_vm.id,"role":_vm.role,"element-type":"div","data-qa":"contact-info"},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('div',{staticClass:"d-ps-relative",attrs:{"data-qa":"contact-info-left"}},[(_vm.avatarSrc)?_c('dt-avatar',{attrs:{"size":_vm.avatarSize,"presence":_vm.presence}},[_c('img',{attrs:{"data-qa":"dt-contact-avatar","src":_vm.avatarSrc,"alt":_vm.avatarInitials}})]):(_vm.avatarInitials)?_c('dt-avatar',{attrs:{"size":_vm.avatarSize,"presence":_vm.presence}},[_vm._v(" "+_vm._s(_vm.avatarInitials)+" ")]):_vm._e()],1)]},proxy:true},{key:"default",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-header"}},[_vm._t("header")],2)]},proxy:true},{key:"subtitle",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-subtitle"}},[_vm._t("subtitle")],2)]},proxy:true},{key:"bottom",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-bottom"}},[_vm._t("bottom")],2)]},proxy:true},{key:"right",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-right"}},[_vm._t("right")],2)]},proxy:true}],null,true)})}
-var contact_infovue_type_template_id_2e8a8344_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/list_items/contact_info/contact_info.vue?vue&type=template&id=fcb8541c&
+var contact_infovue_type_template_id_fcb8541c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-list-item',{attrs:{"id":_vm.id,"role":_vm.role,"element-type":"div","data-qa":"contact-info"},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('div',{staticClass:"d-ps-relative",attrs:{"data-qa":"contact-info-left"}},[(_vm.avatarList)?_c('div',{staticClass:"d-mrn4 d-d-flex d-fd-row"},_vm._l((_vm.avatarList),function(avatar,index){return _c('div',{key:index},[(avatar.src)?_c('dt-avatar',{attrs:{"size":_vm.avatarSize,"overlay-icon":avatar.icon,"overlay-text":avatar.text,"avatar-class":['d-ba d-baw4 d-bc-white d-bar-pill', { 'd-mln24': index > 0 }]}},[_c('img',{attrs:{"data-qa":"dt-contact-avatar","src":avatar.src,"alt":avatar.initials}})]):(avatar.initials)?_c('dt-avatar',{attrs:{"size":_vm.avatarSize,"overlay-icon":avatar.icon,"overlay-text":avatar.text,"avatar-class":['d-ba d-baw4 d-bc-white d-bar-pill', { 'd-mln24': index > 0 }]}},[_vm._v(" "+_vm._s(avatar.initials)+" ")]):_vm._e()],1)}),0):(_vm.avatarSrc)?_c('dt-avatar',{attrs:{"size":_vm.avatarSize,"presence":_vm.presence}},[_c('img',{attrs:{"data-qa":"dt-contact-avatar","src":_vm.avatarSrc,"alt":_vm.avatarInitials}})]):(_vm.avatarInitials)?_c('dt-avatar',{attrs:{"size":_vm.avatarSize,"presence":_vm.presence}},[_vm._v(" "+_vm._s(_vm.avatarInitials)+" ")]):_vm._e()],1)]},proxy:true},{key:"default",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-header"}},[_vm._t("header")],2)]},proxy:true},{key:"subtitle",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-subtitle"}},[_vm._t("subtitle")],2)]},proxy:true},{key:"bottom",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-bottom"}},[_vm._t("bottom")],2)]},proxy:true},{key:"right",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-right"}},[_vm._t("right")],2)]},proxy:true}],null,true)})}
+var contact_infovue_type_template_id_fcb8541c_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/list_items/contact_info/contact_info.vue?vue&type=script&lang=js&
@@ -23350,6 +23398,38 @@ var contact_infovue_type_template_id_2e8a8344_staticRenderFns = []
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -23422,6 +23502,19 @@ var contact_infovue_type_template_id_2e8a8344_staticRenderFns = []
     presence: {
       type: String,
       default: null
+    },
+
+    /**
+     * Showing multiple avatars in contact info.
+     * The props of array items are: <br>
+     * `src` - avatar image url (optional) <br>
+     * `initials` - Initial letters to display in avatar (required if src is empty)<br>
+     * `text` - text that overlays the avatar (optional) <br>
+     * `icon` - icon that overlays the avatar (optional)
+     */
+    avatarList: {
+      type: Array,
+      default: null
     }
   }
 });
@@ -23437,8 +23530,8 @@ var contact_infovue_type_template_id_2e8a8344_staticRenderFns = []
 ;
 var contact_info_component = normalizeComponent(
   contact_info_contact_infovue_type_script_lang_js_,
-  contact_infovue_type_template_id_2e8a8344_render,
-  contact_infovue_type_template_id_2e8a8344_staticRenderFns,
+  contact_infovue_type_template_id_fcb8541c_render,
+  contact_infovue_type_template_id_fcb8541c_staticRenderFns,
   false,
   null,
   null,