npm - @dialpad/dialtone - Versions diffs - 9.73.0-beta.1 → 9.73.0-beta.2 - Mend

@dialpad/dialtone 9.73.0-beta.1 → 9.73.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (388) hide show

package/dist/vue2/components/avatar/avatar.vue.cjs CHANGED Viewed

@@ -1,17 +1,14 @@
 "use strict";
 const common_utils = require("../../common/utils.cjs");
 const avatar_constants = require("./avatar_constants.cjs");
-const storybook_utils = require("../../common/storybook_utils.cjs");
 const icon_constants = require("../icon/icon_constants.cjs");
 const utils = require("./utils.cjs");
 ;/* empty css              */
 const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
 const presence = require("../presence/presence.vue.cjs");
-const icon = require("../icon/icon.vue.cjs");
-const ICONS_LIST = storybook_utils.getIconNames();
 const _sfc_main = {
   name: "DtAvatar",
-  components: { DtPresence: presence, DtIcon: icon },
+  components: { DtPresence: presence },
   inheritAttrs: false,
   props: {
     /**
@@ -99,13 +96,6 @@ const _sfc_main = {
       default: void 0,
       validator: (group) => avatar_constants.AVATAR_GROUP_VALIDATOR(group)
     },
-    /**
-     * The icon that overlays the avatar
-     */
-    overlayIcon: {
-      type: String,
-      default: ""
-    },
     /**
      * The text that overlays the avatar
      */
@@ -136,14 +126,6 @@ const _sfc_main = {
       type: String,
       default: void 0
     },
-    /**
-     * Icon name to be displayed on the avatar
-     */
-    iconName: {
-      type: String,
-      default: void 0,
-      validator: (name) => ICONS_LIST.includes(name)
-    },
     /**
      * Icon size to be displayed on the avatar
      * @values 100, 200, 300, 400, 500, 600, 700, 800
@@ -198,8 +180,14 @@ const _sfc_main = {
     };
   },
   computed: {
-    isNotIconType() {
-      return !this.iconName;
+    isIconType() {
+      return this.$scopedSlots.icon && this.$scopedSlots.icon();
+    },
+    hasOverlayIcon() {
+      return !!this.$slots.overlayIcon;
+    },
+    iconDataQa() {
+      return "dt-avatar-icon";
     },
     avatarClasses() {
       return [
@@ -208,7 +196,7 @@ const _sfc_main = {
         this.avatarClass,
         {
           "d-avatar--group": this.showGroup,
-          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
+          [`d-avatar--color-${this.getColor()}`]: !this.isIconType,
           "d-avatar--clickable": this.clickable
         }
       ];
@@ -216,7 +204,8 @@ const _sfc_main = {
     overlayClasses() {
       return [
         "d-avatar__overlay",
-        this.overlayClass
+        this.overlayClass,
+        { "d-avatar__overlay-icon": this.hasOverlayIcon }
       ];
     },
     showGroup() {
@@ -308,7 +297,7 @@ var _sfc_render = function render() {
     _vm.canvasClass,
     "d-avatar__canvas",
     { "d-avatar--image-loaded": _vm.imageLoadedSuccessfully }
-  ] }, [_vm.showImage ? _c("img", { ref: "avatarImage", staticClass: "d-avatar__image", attrs: { "data-qa": "dt-avatar-image", "src": _vm.imageSrc, "alt": _vm.imageAlt } }) : _vm.iconName ? _c("dt-icon", { class: [_vm.iconClass, _vm.AVATAR_KIND_MODIFIERS.icon], attrs: { "name": _vm.iconName, "aria-label": _vm.iconAriaLabel, "size": _vm.iconSize || _vm.AVATAR_ICON_SIZES[_vm.size], "data-qa": "dt-avatar-icon" } }) : _c("span", { class: [_vm.AVATAR_KIND_MODIFIERS.initials] }, [_vm._v(" " + _vm._s(_vm.formattedInitials) + " ")])], 1), _vm.overlayIcon || _vm.overlayText ? _c("div", { class: _vm.overlayClasses }, [_vm.overlayIcon ? _c("dt-icon", { staticClass: "d-avatar__overlay-icon", attrs: { "name": _vm.overlayIcon } }) : _vm.overlayText ? _c("p", { staticClass: "d-avatar__overlay-text" }, [_vm._v(" " + _vm._s(_vm.overlayText) + " ")]) : _vm._e()], 1) : _vm._e(), _vm.showGroup ? _c("span", { staticClass: "d-avatar__count", attrs: { "data-qa": "dt-avatar-count" } }, [_vm._v(_vm._s(_vm.formattedGroup))]) : _vm._e(), _vm.presence && !_vm.showGroup ? _c("dt-presence", _vm._b({ class: [
+  ] }, [_vm.showImage ? _c("img", { ref: "avatarImage", staticClass: "d-avatar__image", attrs: { "data-qa": "dt-avatar-image", "src": _vm.imageSrc, "alt": _vm.imageAlt } }) : _vm.isIconType ? _c("div", { class: [_vm.iconClass, _vm.AVATAR_KIND_MODIFIERS.icon], attrs: { "aria-label": _vm.clickable ? _vm.iconAriaLabel : "", "data-qa": _vm.iconDataQa, "role": _vm.clickable ? "button" : "" } }, [_vm._t("icon", null, { "iconSize": _vm.iconSize || _vm.AVATAR_ICON_SIZES[_vm.size] })], 2) : _c("span", { class: [_vm.AVATAR_KIND_MODIFIERS.initials] }, [_vm._v(" " + _vm._s(_vm.formattedInitials) + " ")])]), _vm.hasOverlayIcon || _vm.overlayText ? _c("div", { class: _vm.overlayClasses }, [_vm.hasOverlayIcon ? _vm._t("overlayIcon") : _vm.overlayText ? _c("p", { staticClass: "d-avatar__overlay-text" }, [_vm._v(" " + _vm._s(_vm.overlayText) + " ")]) : _vm._e()], 2) : _vm._e(), _vm.showGroup ? _c("span", { staticClass: "d-avatar__count", attrs: { "data-qa": "dt-avatar-count" } }, [_vm._v(_vm._s(_vm.formattedGroup))]) : _vm._e(), _vm.presence && !_vm.showGroup ? _c("dt-presence", _vm._b({ 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);

package/dist/vue2/components/avatar/avatar.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.vue.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <dt-icon\n v-else-if=\"iconName\"\n :name=\"iconName\"\n :aria-label=\"iconAriaLabel\"\n :size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n data-qa=\"dt-avatar-icon\"\n />\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"overlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <dt-icon\n v-if=\"overlayIcon\"\n class=\"d-avatar__overlay-icon\"\n :name=\"overlayIcon\"\n />\n <p\n v-else-if=\"overlayText\"\n class=\"d-avatar__overlay-text\"\n >\n {{ overlayText }}\n </p>\n </div>\n <span\n v-if=\"showGroup\"\n class=\"d-avatar__count\"\n data-qa=\"dt-avatar-count\"\n >{{ formattedGroup }}</span>\n <dt-presence\n v-if=\"presence && !showGroup\"\n :presence=\"presence\"\n :class=\"[\n 'd-avatar__presence',\n AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n ]\"\n v-bind=\"presenceProps\"\n data-qa=\"dt-presence\"\n />\n </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence, DtIcon },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\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: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The icon that overlays the avatar\n /\n overlayIcon: {\n type: String,\n default: '',\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon name to be displayed on the avatar\n /\n iconName: {\n type: String,\n default: undefined,\n validator: (name) => ICONS_LIST.includes(name),\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n isNotIconType () {\n return !this.iconName;\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n async setImageListeners () {\n await this.$nextTick();\n const el = this.$refs.avatarImage;\n if (!el) return;\n\n el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n },\n\n formatInitials () {\n const initials = extractInitialsFromName(this.fullName);\n\n if (this.validatedSize === 'xs') {\n this.formattedInitials = '';\n } else if (this.validatedSize === 'sm') {\n this.formattedInitials = initials[0];\n } else {\n this.formattedInitials = initials;\n }\n },\n\n getColor () {\n return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n },\n\n _loadedImageEventHandler (el) {\n this.imageLoadedSuccessfully = true;\n el.classList.remove('d-d-none');\n },\n\n _erroredImageEventHandler (el) {\n this.imageLoadedSuccessfully = false;\n el.classList.add('d-d-none');\n },\n\n validateProps () {\n if (this.imageSrc && this.imageAlt === undefined) {\n console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n }\n },\n\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n background-color: transparent;\n background-image: unset;\n}\n\n.d-avatar__count {\n z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n background-color: var(--dt-color-surface-contrast-opaque);\n opacity: var(--dt-opacity-900);\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dt-size-radius-circle);\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n color: var(--dt-color-foreground-primary-inverted);\n width: 100%;\n}\n\n.d-avatar__overlay-text {\n color: var(--dt-color-foreground-primary-inverted);\n font-weight: var(--dt-font-weight-bold);\n font-size: var(--dt-font-size-200);\n width: 100%;\n text-align: center;\n}\n\n.d-avatar--clickable {\n --avatar-color-border: transparent;\n\n cursor: pointer;\n padding: 0;\n background-color: transparent;\n\n border-radius: var(--dt-size-radius-circle);\n border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n &:focus-visible {\n outline: none;\n box-shadow: var(--dt-shadow-focus);\n }\n\n &:hover {\n --avatar-color-border: var(--dt-color-border-default);\n }\n\n &:active {\n --avatar-color-border: var(--dt-color-border-moderate);\n\n transform: scale(0.98);\n }\n}\n</style>\n"],"names":["getIconNames","DtPresence","DtIcon","getUniqueString","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS"],"mappings":"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"}
1	+ {"version":3,"file":"avatar.vue.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <div\n v-else-if=\"isIconType\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n :aria-label=\"clickable ? iconAriaLabel : ''\"\n :data-qa=\"iconDataQa\"\n :role=\"clickable ? 'button' : ''\"\n >\n <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n />\n </div>\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"hasOverlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <!-- @slot Slot for overlay icon. -->\n <slot\n v-if=\"hasOverlayIcon\"\n name=\"overlayIcon\"\n />\n <p\n v-else-if=\"overlayText\"\n class=\"d-avatar__overlay-text\"\n >\n {{ overlayText }}\n </p>\n </div>\n <span\n v-if=\"showGroup\"\n class=\"d-avatar__count\"\n data-qa=\"dt-avatar-count\"\n >{{ formattedGroup }}</span>\n <dt-presence\n v-if=\"presence && !showGroup\"\n :presence=\"presence\"\n :class=\"[\n 'd-avatar__presence',\n AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n ]\"\n v-bind=\"presenceProps\"\n data-qa=\"dt-presence\"\n />\n </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\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: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n isIconType () {\n return this.$scopedSlots.icon && this.$scopedSlots.icon();\n },\n\n hasOverlayIcon () {\n return !!this.$slots.overlayIcon;\n },\n\n iconDataQa () {\n return 'dt-avatar-icon';\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: !this.isIconType,\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n async setImageListeners () {\n await this.$nextTick();\n const el = this.$refs.avatarImage;\n if (!el) return;\n\n el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n },\n\n formatInitials () {\n const initials = extractInitialsFromName(this.fullName);\n\n if (this.validatedSize === 'xs') {\n this.formattedInitials = '';\n } else if (this.validatedSize === 'sm') {\n this.formattedInitials = initials[0];\n } else {\n this.formattedInitials = initials;\n }\n },\n\n getColor () {\n return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n },\n\n _loadedImageEventHandler (el) {\n this.imageLoadedSuccessfully = true;\n el.classList.remove('d-d-none');\n },\n\n _erroredImageEventHandler (el) {\n this.imageLoadedSuccessfully = false;\n el.classList.add('d-d-none');\n },\n\n validateProps () {\n if (this.imageSrc && this.imageAlt === undefined) {\n console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n }\n },\n\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n background-color: transparent;\n background-image: unset;\n}\n\n.d-avatar__count {\n z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n background-color: var(--dt-color-surface-contrast-opaque);\n opacity: var(--dt-opacity-900);\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dt-size-radius-circle);\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n color: var(--dt-color-foreground-primary-inverted);\n width: 100%;\n}\n\n.d-avatar__overlay-text {\n color: var(--dt-color-foreground-primary-inverted);\n font-weight: var(--dt-font-weight-bold);\n font-size: var(--dt-font-size-200);\n width: 100%;\n text-align: center;\n}\n\n.d-avatar--clickable {\n --avatar-color-border: transparent;\n\n cursor: pointer;\n padding: 0;\n background-color: transparent;\n\n border-radius: var(--dt-size-radius-circle);\n border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n &:focus-visible {\n outline: none;\n box-shadow: var(--dt-shadow-focus);\n }\n\n &:hover {\n --avatar-color-border: var(--dt-color-border-default);\n }\n\n &:active {\n --avatar-color-border: var(--dt-color-border-moderate);\n\n transform: scale(0.98);\n }\n}\n</style>\n"],"names":["DtPresence","getUniqueString","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS"],"mappings":"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"}

package/dist/vue2/components/avatar/avatar.vue.js CHANGED Viewed

@@ -1,16 +1,13 @@
 import { getUniqueString, getRandomElement } from "../../common/utils.js";
 import { AVATAR_SIZE_MODIFIERS, AVATAR_PRESENCE_STATES, AVATAR_GROUP_VALIDATOR, AVATAR_KIND_MODIFIERS, AVATAR_PRESENCE_SIZE_MODIFIERS, AVATAR_ICON_SIZES, AVATAR_RANDOM_COLORS } from "./avatar_constants.js";
-import { getIconNames } from "../../common/storybook_utils.js";
 import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
 import { extractInitialsFromName } from "./utils.js";
 /* empty css            */
 import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
 import DtPresence from "../presence/presence.vue.js";
-import DtIcon from "../icon/icon.vue.js";
-const ICONS_LIST = getIconNames();
 const _sfc_main = {
   name: "DtAvatar",
-  components: { DtPresence, DtIcon },
+  components: { DtPresence },
   inheritAttrs: false,
   props: {
     /**
@@ -98,13 +95,6 @@ const _sfc_main = {
       default: void 0,
       validator: (group) => AVATAR_GROUP_VALIDATOR(group)
     },
-    /**
-     * The icon that overlays the avatar
-     */
-    overlayIcon: {
-      type: String,
-      default: ""
-    },
     /**
      * The text that overlays the avatar
      */
@@ -135,14 +125,6 @@ const _sfc_main = {
       type: String,
       default: void 0
     },
-    /**
-     * Icon name to be displayed on the avatar
-     */
-    iconName: {
-      type: String,
-      default: void 0,
-      validator: (name) => ICONS_LIST.includes(name)
-    },
     /**
      * Icon size to be displayed on the avatar
      * @values 100, 200, 300, 400, 500, 600, 700, 800
@@ -197,8 +179,14 @@ const _sfc_main = {
     };
   },
   computed: {
-    isNotIconType() {
-      return !this.iconName;
+    isIconType() {
+      return this.$scopedSlots.icon && this.$scopedSlots.icon();
+    },
+    hasOverlayIcon() {
+      return !!this.$slots.overlayIcon;
+    },
+    iconDataQa() {
+      return "dt-avatar-icon";
     },
     avatarClasses() {
       return [
@@ -207,7 +195,7 @@ const _sfc_main = {
         this.avatarClass,
         {
           "d-avatar--group": this.showGroup,
-          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
+          [`d-avatar--color-${this.getColor()}`]: !this.isIconType,
           "d-avatar--clickable": this.clickable
         }
       ];
@@ -215,7 +203,8 @@ const _sfc_main = {
     overlayClasses() {
       return [
         "d-avatar__overlay",
-        this.overlayClass
+        this.overlayClass,
+        { "d-avatar__overlay-icon": this.hasOverlayIcon }
       ];
     },
     showGroup() {
@@ -307,7 +296,7 @@ var _sfc_render = function render() {
     _vm.canvasClass,
     "d-avatar__canvas",
     { "d-avatar--image-loaded": _vm.imageLoadedSuccessfully }
-  ] }, [_vm.showImage ? _c("img", { ref: "avatarImage", staticClass: "d-avatar__image", attrs: { "data-qa": "dt-avatar-image", "src": _vm.imageSrc, "alt": _vm.imageAlt } }) : _vm.iconName ? _c("dt-icon", { class: [_vm.iconClass, _vm.AVATAR_KIND_MODIFIERS.icon], attrs: { "name": _vm.iconName, "aria-label": _vm.iconAriaLabel, "size": _vm.iconSize || _vm.AVATAR_ICON_SIZES[_vm.size], "data-qa": "dt-avatar-icon" } }) : _c("span", { class: [_vm.AVATAR_KIND_MODIFIERS.initials] }, [_vm._v(" " + _vm._s(_vm.formattedInitials) + " ")])], 1), _vm.overlayIcon || _vm.overlayText ? _c("div", { class: _vm.overlayClasses }, [_vm.overlayIcon ? _c("dt-icon", { staticClass: "d-avatar__overlay-icon", attrs: { "name": _vm.overlayIcon } }) : _vm.overlayText ? _c("p", { staticClass: "d-avatar__overlay-text" }, [_vm._v(" " + _vm._s(_vm.overlayText) + " ")]) : _vm._e()], 1) : _vm._e(), _vm.showGroup ? _c("span", { staticClass: "d-avatar__count", attrs: { "data-qa": "dt-avatar-count" } }, [_vm._v(_vm._s(_vm.formattedGroup))]) : _vm._e(), _vm.presence && !_vm.showGroup ? _c("dt-presence", _vm._b({ class: [
+  ] }, [_vm.showImage ? _c("img", { ref: "avatarImage", staticClass: "d-avatar__image", attrs: { "data-qa": "dt-avatar-image", "src": _vm.imageSrc, "alt": _vm.imageAlt } }) : _vm.isIconType ? _c("div", { class: [_vm.iconClass, _vm.AVATAR_KIND_MODIFIERS.icon], attrs: { "aria-label": _vm.clickable ? _vm.iconAriaLabel : "", "data-qa": _vm.iconDataQa, "role": _vm.clickable ? "button" : "" } }, [_vm._t("icon", null, { "iconSize": _vm.iconSize || _vm.AVATAR_ICON_SIZES[_vm.size] })], 2) : _c("span", { class: [_vm.AVATAR_KIND_MODIFIERS.initials] }, [_vm._v(" " + _vm._s(_vm.formattedInitials) + " ")])]), _vm.hasOverlayIcon || _vm.overlayText ? _c("div", { class: _vm.overlayClasses }, [_vm.hasOverlayIcon ? _vm._t("overlayIcon") : _vm.overlayText ? _c("p", { staticClass: "d-avatar__overlay-text" }, [_vm._v(" " + _vm._s(_vm.overlayText) + " ")]) : _vm._e()], 2) : _vm._e(), _vm.showGroup ? _c("span", { staticClass: "d-avatar__count", attrs: { "data-qa": "dt-avatar-count" } }, [_vm._v(_vm._s(_vm.formattedGroup))]) : _vm._e(), _vm.presence && !_vm.showGroup ? _c("dt-presence", _vm._b({ 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);

package/dist/vue2/components/avatar/avatar.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.vue.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <dt-icon\n v-else-if=\"iconName\"\n :name=\"iconName\"\n :aria-label=\"iconAriaLabel\"\n :size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n data-qa=\"dt-avatar-icon\"\n />\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"overlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <dt-icon\n v-if=\"overlayIcon\"\n class=\"d-avatar__overlay-icon\"\n :name=\"overlayIcon\"\n />\n <p\n v-else-if=\"overlayText\"\n class=\"d-avatar__overlay-text\"\n >\n {{ overlayText }}\n </p>\n </div>\n <span\n v-if=\"showGroup\"\n class=\"d-avatar__count\"\n data-qa=\"dt-avatar-count\"\n >{{ formattedGroup }}</span>\n <dt-presence\n v-if=\"presence && !showGroup\"\n :presence=\"presence\"\n :class=\"[\n 'd-avatar__presence',\n AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n ]\"\n v-bind=\"presenceProps\"\n data-qa=\"dt-presence\"\n />\n </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence, DtIcon },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\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: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The icon that overlays the avatar\n /\n overlayIcon: {\n type: String,\n default: '',\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon name to be displayed on the avatar\n /\n iconName: {\n type: String,\n default: undefined,\n validator: (name) => ICONS_LIST.includes(name),\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n isNotIconType () {\n return !this.iconName;\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n async setImageListeners () {\n await this.$nextTick();\n const el = this.$refs.avatarImage;\n if (!el) return;\n\n el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n },\n\n formatInitials () {\n const initials = extractInitialsFromName(this.fullName);\n\n if (this.validatedSize === 'xs') {\n this.formattedInitials = '';\n } else if (this.validatedSize === 'sm') {\n this.formattedInitials = initials[0];\n } else {\n this.formattedInitials = initials;\n }\n },\n\n getColor () {\n return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n },\n\n _loadedImageEventHandler (el) {\n this.imageLoadedSuccessfully = true;\n el.classList.remove('d-d-none');\n },\n\n _erroredImageEventHandler (el) {\n this.imageLoadedSuccessfully = false;\n el.classList.add('d-d-none');\n },\n\n validateProps () {\n if (this.imageSrc && this.imageAlt === undefined) {\n console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n }\n },\n\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n background-color: transparent;\n background-image: unset;\n}\n\n.d-avatar__count {\n z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n background-color: var(--dt-color-surface-contrast-opaque);\n opacity: var(--dt-opacity-900);\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dt-size-radius-circle);\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n color: var(--dt-color-foreground-primary-inverted);\n width: 100%;\n}\n\n.d-avatar__overlay-text {\n color: var(--dt-color-foreground-primary-inverted);\n font-weight: var(--dt-font-weight-bold);\n font-size: var(--dt-font-size-200);\n width: 100%;\n text-align: center;\n}\n\n.d-avatar--clickable {\n --avatar-color-border: transparent;\n\n cursor: pointer;\n padding: 0;\n background-color: transparent;\n\n border-radius: var(--dt-size-radius-circle);\n border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n &:focus-visible {\n outline: none;\n box-shadow: var(--dt-shadow-focus);\n }\n\n &:hover {\n --avatar-color-border: var(--dt-color-border-default);\n }\n\n &:active {\n --avatar-color-border: var(--dt-color-border-moderate);\n\n transform: scale(0.98);\n }\n}\n</style>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"avatar.vue.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n <component\n :is=\"clickable ? 'button' : 'div'\"\n :id=\"id\"\n :class=\"avatarClasses\"\n data-qa=\"dt-avatar\"\n @click=\"handleClick\"\n >\n <div\n ref=\"canvas\"\n :class=\"[\n canvasClass,\n 'd-avatar__canvas',\n { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n ]\"\n >\n <img\n v-if=\"showImage\"\n ref=\"avatarImage\"\n class=\"d-avatar__image\"\n data-qa=\"dt-avatar-image\"\n :src=\"imageSrc\"\n :alt=\"imageAlt\"\n >\n <div\n v-else-if=\"isIconType\"\n :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n :aria-label=\"clickable ? iconAriaLabel : ''\"\n :data-qa=\"iconDataQa\"\n :role=\"clickable ? 'button' : ''\"\n >\n <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n <slot\n name=\"icon\"\n :icon-size=\"iconSize \|\| AVATAR_ICON_SIZES[size]\"\n />\n </div>\n <span\n v-else\n :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n >\n {{ formattedInitials }}\n </span>\n </div>\n <div\n v-if=\"hasOverlayIcon \|\| overlayText\"\n :class=\"overlayClasses\"\n >\n <!-- @slot Slot for overlay icon. -->\n <slot\n v-if=\"hasOverlayIcon\"\n name=\"overlayIcon\"\n />\n <p\n v-else-if=\"overlayText\"\n class=\"d-avatar__overlay-text\"\n >\n {{ overlayText }}\n </p>\n </div>\n <span\n v-if=\"showGroup\"\n class=\"d-avatar__count\"\n data-qa=\"dt-avatar-count\"\n >{{ formattedGroup }}</span>\n <dt-presence\n v-if=\"presence && !showGroup\"\n :presence=\"presence\"\n :class=\"[\n 'd-avatar__presence',\n AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n ]\"\n v-bind=\"presenceProps\"\n data-qa=\"dt-presence\"\n />\n </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n AVATAR_KIND_MODIFIERS,\n AVATAR_SIZE_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_PRESENCE_STATES,\n AVATAR_RANDOM_COLORS,\n AVATAR_GROUP_VALIDATOR,\n AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/*\n An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n /\nexport default {\n name: 'DtAvatar',\n components: { DtPresence },\n\n inheritAttrs: false,\n\n props: {\n /\n Id of the avatar content wrapper element\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n Pass in a seed to get the random color generation based on that string. For example if you pass in a\n * user ID as the string it will return the same randomly generated colors every time for that user.\n /\n seed: {\n type: String,\n default: undefined,\n },\n\n /\n Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n * if the seed prop is set.\n /\n color: {\n type: String,\n default: undefined,\n },\n\n /\n The size of the avatar\n * @values xs, sm, md, lg, xl\n /\n size: {\n type: String,\n default: 'md',\n validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Used to customize the avatar container\n /\n avatarClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Set classes on the avatar canvas. Wrapper around the core avatar image.\n /\n canvasClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Pass through classes. Used to customize the avatar icon\n /\n iconClass: {\n type: [String, Array, Object],\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: AVATAR_PRESENCE_STATES.NONE,\n validator: (state) => {\n return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n },\n },\n\n /\n A set of props to be passed into the presence component.\n /\n presenceProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Determines whether to show a group avatar.\n * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n /\n group: {\n type: Number,\n default: undefined,\n validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n },\n\n /\n The text that overlays the avatar\n /\n overlayText: {\n type: String,\n default: '',\n },\n\n /\n Used to customize the avatar overlay\n /\n overlayClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Source of the image\n /\n imageSrc: {\n type: String,\n default: '',\n },\n\n /\n Alt attribute of the image, required if imageSrc is provided.\n * Can be set to '' (empty string) if the image is described\n * in text nearby\n /\n imageAlt: {\n type: String,\n default: undefined,\n },\n\n /\n Icon size to be displayed on the avatar\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '',\n validator: (size) => !size \|\| Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n },\n\n /\n Full name used to extract initials.\n /\n fullName: {\n type: String,\n default: '',\n },\n\n /\n Makes the avatar focusable and clickable,\n * emits a click event when clicked.\n /\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /\n Descriptive label for the icon.\n * To avoid a11y issues, set this prop if clickable and iconName are set.\n /\n iconAriaLabel: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Avatar click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n AVATAR_SIZE_MODIFIERS,\n AVATAR_KIND_MODIFIERS,\n AVATAR_PRESENCE_SIZE_MODIFIERS,\n AVATAR_ICON_SIZES,\n imageLoadedSuccessfully: null,\n formattedInitials: '',\n initializing: false,\n };\n },\n\n computed: {\n isIconType () {\n return this.$scopedSlots.icon && this.$scopedSlots.icon();\n },\n\n hasOverlayIcon () {\n return !!this.$slots.overlayIcon;\n },\n\n iconDataQa () {\n return 'dt-avatar-icon';\n },\n\n avatarClasses () {\n return [\n 'd-avatar',\n AVATAR_SIZE_MODIFIERS[this.validatedSize],\n this.avatarClass,\n {\n 'd-avatar--group': this.showGroup,\n [`d-avatar--color-${this.getColor()}`]: !this.isIconType,\n 'd-avatar--clickable': this.clickable,\n },\n ];\n },\n\n overlayClasses () {\n return [\n 'd-avatar__overlay',\n this.overlayClass,\n { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n ];\n },\n\n showGroup () {\n return AVATAR_GROUP_VALIDATOR(this.group);\n },\n\n formattedGroup () {\n return this.group > 99 ? '99+' : this.group;\n },\n\n validatedSize () {\n // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n return this.group ? 'xs' : this.size;\n },\n\n showImage () {\n return this.imageLoadedSuccessfully !== false && this.imageSrc;\n },\n },\n\n watch: {\n fullName: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n size: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n group: {\n immediate: true,\n handler () {\n this.formatInitials();\n },\n },\n\n imageSrc (newSrc) {\n this.imageLoadedSuccessfully = null;\n if (!newSrc) return;\n\n this.validateProps();\n this.setImageListeners();\n },\n },\n\n mounted () {\n this.validateProps();\n this.setImageListeners();\n },\n\n methods: {\n async setImageListeners () {\n await this.$nextTick();\n const el = this.$refs.avatarImage;\n if (!el) return;\n\n el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n },\n\n formatInitials () {\n const initials = extractInitialsFromName(this.fullName);\n\n if (this.validatedSize === 'xs') {\n this.formattedInitials = '';\n } else if (this.validatedSize === 'sm') {\n this.formattedInitials = initials[0];\n } else {\n this.formattedInitials = initials;\n }\n },\n\n getColor () {\n return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n },\n\n _loadedImageEventHandler (el) {\n this.imageLoadedSuccessfully = true;\n el.classList.remove('d-d-none');\n },\n\n _erroredImageEventHandler (el) {\n this.imageLoadedSuccessfully = false;\n el.classList.add('d-d-none');\n },\n\n validateProps () {\n if (this.imageSrc && this.imageAlt === undefined) {\n console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n }\n },\n\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n background-color: transparent;\n background-image: unset;\n}\n\n.d-avatar__count {\n z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n background-color: var(--dt-color-surface-contrast-opaque);\n opacity: var(--dt-opacity-900);\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--dt-size-radius-circle);\n z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n color: var(--dt-color-foreground-primary-inverted);\n width: 100%;\n}\n\n.d-avatar__overlay-text {\n color: var(--dt-color-foreground-primary-inverted);\n font-weight: var(--dt-font-weight-bold);\n font-size: var(--dt-font-size-200);\n width: 100%;\n text-align: center;\n}\n\n.d-avatar--clickable {\n --avatar-color-border: transparent;\n\n cursor: pointer;\n padding: 0;\n background-color: transparent;\n\n border-radius: var(--dt-size-radius-circle);\n border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n &:focus-visible {\n outline: none;\n box-shadow: var(--dt-shadow-focus);\n }\n\n &:hover {\n --avatar-color-border: var(--dt-color-border-default);\n }\n\n &:active {\n --avatar-color-border: var(--dt-color-border-moderate);\n\n transform: scale(0.98);\n }\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/vue2/components/icon/icon.vue.cjs CHANGED Viewed

@@ -49,6 +49,6 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
   null,
   null
 );
-const DtIcon = __component__.exports;
-module.exports = DtIcon;
+const icon = __component__.exports;
+module.exports = icon;
 //# sourceMappingURL=icon.vue.cjs.map

package/dist/vue2/components/icon/icon.vue.js CHANGED Viewed

@@ -48,8 +48,8 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   null,
   null
 );
-const DtIcon = __component__.exports;
+const icon = __component__.exports;
 export {
-  DtIcon as default
+  icon as default
 };
 //# sourceMappingURL=icon.vue.js.map

package/dist/vue2/directives/scrollbar/scrollbar.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scrollbar.cjs","sources":["../../../directives/scrollbar/scrollbar.js"],"sourcesContent":["import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';\~~nimport 'overlayscrollbars/overlayscrollbars.css';\~~n\nexport const DtScrollbarDirective = {\n name: 'dt-scrollbar-directive',\n install (Vue) {\n OverlayScrollbars.plugin(ClickScrollPlugin);\n Vue.directive('dt-scrollbar', {\n inserted (el, binding) {\n OverlayScrollbars({\n target: el,\n elements: {\n viewport: el.children[0],\n },\n }, {\n scrollbars: {\n autoHide: `${binding.arg \|\| 'leave'}`,\n clickScroll: true,\n autoHideDelay: `${!binding.arg \|\| binding.arg === 'leave' ? 0 : 1300}`,\n },\n });\n el.setAttribute('data-overlayscrollbars-initialize', true);\n el.classList.add('d-scrollbar');\n },\n });\n },\n};\n\nexport default DtScrollbarDirective;\n"],"names":["OverlayScrollbars","ClickScrollPlugin"],"mappings":";;;~~AAGY~~,MAAC,uBAAuB;AAAA,EAClC,MAAM;AAAA,EACN,QAAS,KAAK;AACZA,wCAAkB,OAAOC,kBAAAA,iBAAiB;AAC1C,QAAI,UAAU,gBAAgB;AAAA,MAC5B,SAAU,IAAI,SAAS;AACrBD,4CAAkB;AAAA,UAChB,QAAQ;AAAA,UACR,UAAU;AAAA,YACR,UAAU,GAAG,SAAS,CAAC;AAAA,UACxB;AAAA,QACX,GAAW;AAAA,UACD,YAAY;AAAA,YACV,UAAU,GAAG,QAAQ,OAAO,OAAO;AAAA,YACnC,aAAa;AAAA,YACb,eAAe,GAAG,CAAC,QAAQ,OAAO,QAAQ,QAAQ,UAAU,IAAI,IAAI;AAAA,UACrE;AAAA,QACX,CAAS;AACD,WAAG,aAAa,qCAAqC,IAAI;AACzD,WAAG,UAAU,IAAI,aAAa;AAAA,MAC/B;AAAA,IACP,CAAK;AAAA,EACF;AACH;AAEA,MAAA,yBAAe;;;"}
1	+ {"version":3,"file":"scrollbar.cjs","sources":["../../../directives/scrollbar/scrollbar.js"],"sourcesContent":["import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';\n\nexport const DtScrollbarDirective = {\n name: 'dt-scrollbar-directive',\n install (Vue) {\n OverlayScrollbars.plugin(ClickScrollPlugin);\n Vue.directive('dt-scrollbar', {\n inserted (el, binding) {\n OverlayScrollbars({\n target: el,\n elements: {\n viewport: el.children[0],\n },\n }, {\n scrollbars: {\n autoHide: `${binding.arg \|\| 'leave'}`,\n clickScroll: true,\n autoHideDelay: `${!binding.arg \|\| binding.arg === 'leave' ? 0 : 1300}`,\n },\n });\n el.setAttribute('data-overlayscrollbars-initialize', true);\n el.classList.add('d-scrollbar');\n },\n });\n },\n};\n\nexport default DtScrollbarDirective;\n"],"names":["OverlayScrollbars","ClickScrollPlugin"],"mappings":";;;AAEY,MAAC,uBAAuB;AAAA,EAClC,MAAM;AAAA,EACN,QAAS,KAAK;AACZA,wCAAkB,OAAOC,kBAAAA,iBAAiB;AAC1C,QAAI,UAAU,gBAAgB;AAAA,MAC5B,SAAU,IAAI,SAAS;AACrBD,4CAAkB;AAAA,UAChB,QAAQ;AAAA,UACR,UAAU;AAAA,YACR,UAAU,GAAG,SAAS,CAAC;AAAA,UACxB;AAAA,QACX,GAAW;AAAA,UACD,YAAY;AAAA,YACV,UAAU,GAAG,QAAQ,OAAO,OAAO;AAAA,YACnC,aAAa;AAAA,YACb,eAAe,GAAG,CAAC,QAAQ,OAAO,QAAQ,QAAQ,UAAU,IAAI,IAAI;AAAA,UACrE;AAAA,QACX,CAAS;AACD,WAAG,aAAa,qCAAqC,IAAI;AACzD,WAAG,UAAU,IAAI,aAAa;AAAA,MAC/B;AAAA,IACP,CAAK;AAAA,EACF;AACH;AAEA,MAAA,yBAAe;;;"}

package/dist/vue2/directives/scrollbar/scrollbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scrollbar.js","sources":["../../../directives/scrollbar/scrollbar.js"],"sourcesContent":["import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';\~~nimport 'overlayscrollbars/overlayscrollbars.css';\~~n\nexport const DtScrollbarDirective = {\n name: 'dt-scrollbar-directive',\n install (Vue) {\n OverlayScrollbars.plugin(ClickScrollPlugin);\n Vue.directive('dt-scrollbar', {\n inserted (el, binding) {\n OverlayScrollbars({\n target: el,\n elements: {\n viewport: el.children[0],\n },\n }, {\n scrollbars: {\n autoHide: `${binding.arg \|\| 'leave'}`,\n clickScroll: true,\n autoHideDelay: `${!binding.arg \|\| binding.arg === 'leave' ? 0 : 1300}`,\n },\n });\n el.setAttribute('data-overlayscrollbars-initialize', true);\n el.classList.add('d-scrollbar');\n },\n });\n },\n};\n\nexport default DtScrollbarDirective;\n"],"names":[],"mappings":";~~AAGY~~,MAAC,uBAAuB;AAAA,EAClC,MAAM;AAAA,EACN,QAAS,KAAK;AACZ,sBAAkB,OAAO,iBAAiB;AAC1C,QAAI,UAAU,gBAAgB;AAAA,MAC5B,SAAU,IAAI,SAAS;AACrB,0BAAkB;AAAA,UAChB,QAAQ;AAAA,UACR,UAAU;AAAA,YACR,UAAU,GAAG,SAAS,CAAC;AAAA,UACxB;AAAA,QACX,GAAW;AAAA,UACD,YAAY;AAAA,YACV,UAAU,GAAG,QAAQ,OAAO,OAAO;AAAA,YACnC,aAAa;AAAA,YACb,eAAe,GAAG,CAAC,QAAQ,OAAO,QAAQ,QAAQ,UAAU,IAAI,IAAI;AAAA,UACrE;AAAA,QACX,CAAS;AACD,WAAG,aAAa,qCAAqC,IAAI;AACzD,WAAG,UAAU,IAAI,aAAa;AAAA,MAC/B;AAAA,IACP,CAAK;AAAA,EACF;AACH;AAEA,MAAA,yBAAe;"}
1	+ {"version":3,"file":"scrollbar.js","sources":["../../../directives/scrollbar/scrollbar.js"],"sourcesContent":["import { OverlayScrollbars, ClickScrollPlugin } from 'overlayscrollbars';\n\nexport const DtScrollbarDirective = {\n name: 'dt-scrollbar-directive',\n install (Vue) {\n OverlayScrollbars.plugin(ClickScrollPlugin);\n Vue.directive('dt-scrollbar', {\n inserted (el, binding) {\n OverlayScrollbars({\n target: el,\n elements: {\n viewport: el.children[0],\n },\n }, {\n scrollbars: {\n autoHide: `${binding.arg \|\| 'leave'}`,\n clickScroll: true,\n autoHideDelay: `${!binding.arg \|\| binding.arg === 'leave' ? 0 : 1300}`,\n },\n });\n el.setAttribute('data-overlayscrollbars-initialize', true);\n el.classList.add('d-scrollbar');\n },\n });\n },\n};\n\nexport default DtScrollbarDirective;\n"],"names":[],"mappings":";AAEY,MAAC,uBAAuB;AAAA,EAClC,MAAM;AAAA,EACN,QAAS,KAAK;AACZ,sBAAkB,OAAO,iBAAiB;AAC1C,QAAI,UAAU,gBAAgB;AAAA,MAC5B,SAAU,IAAI,SAAS;AACrB,0BAAkB;AAAA,UAChB,QAAQ;AAAA,UACR,UAAU;AAAA,YACR,UAAU,GAAG,SAAS,CAAC;AAAA,UACxB;AAAA,QACX,GAAW;AAAA,UACD,YAAY;AAAA,YACV,UAAU,GAAG,QAAQ,OAAO,OAAO;AAAA,YACnC,aAAa;AAAA,YACb,eAAe,GAAG,CAAC,QAAQ,OAAO,QAAQ,QAAQ,UAAU,IAAI,IAAI;AAAA,UACrE;AAAA,QACX,CAAS;AACD,WAAG,aAAa,qCAAqC,IAAI;AACzD,WAAG,UAAU,IAAI,aAAa;AAAA,MAC/B;AAAA,IACP,CAAK;AAAA,EACF;AACH;AAEA,MAAA,yBAAe;"}

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use strict";
 const feed_item_row_constants = require("./feed_item_row_constants.cjs");
 const modal = require("../../../common/mixins/modal.cjs");
+const vue2 = require("@dialpad/dialtone-icons/vue2");
 ;/* empty css                     */
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const avatar = require("../../../components/avatar/avatar.vue.cjs");
@@ -13,7 +14,8 @@ const _sfc_main = {
     DtAvatar: avatar,
     DtLazyShow: lazy_show,
     DtListItem: list_item,
-    DtBadge: badge
+    DtBadge: badge,
+    DtIconUser: vue2.DtIconUser
   },
   mixins: [modal],
   inheritAttrs: false,
@@ -140,9 +142,6 @@ const _sfc_main = {
         }
       };
     },
-    iconName() {
-      return this.noInitials ? "user" : null;
-    },
     listItemClasses() {
       return [
         "dt-feed-item-row",
@@ -183,7 +182,9 @@ var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("dt-list-item", _vm._g(_vm._b({ ref: "FeedItemRef", class: ["dt-feed-item-row", _vm.listItemClasses], attrs: { "navigation-type": "none", "data-qa": "dt-feed-item-row" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
     return [_vm.showHeader ? _c("div", { staticClass: "dt-feed-item-row__avatar-container" }, [_vm._t("avatar", function() {
-      return [_c("dt-avatar", { attrs: { "full-name": _vm.displayName, "image-src": _vm.avatarImageUrl, "image-alt": "", "icon-name": _vm.iconName, "seed": _vm.avatarSeed } })];
+      return [_c("dt-avatar", { attrs: { "full-name": _vm.displayName, "image-src": _vm.avatarImageUrl, "image-alt": "", "seed": _vm.avatarSeed }, scopedSlots: _vm._u([_vm.noInitials ? { key: "icon", fn: function({ iconSize }) {
+        return [_c("dt-icon-user", { attrs: { "size": iconSize } })];
+      } } : null], null, true) })];
     })], 2) : _vm._e(), !_vm.showHeader ? _c("span", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "dt-feed-item-row__left-time", attrs: { "data-qa": "dt-feed-item-row--left-time" } }, [_vm._v(" " + _vm._s(_vm.shortTime) + " ")]) : _vm._e()];
   }, proxy: true }, { key: "bottom", fn: function() {
     return [_vm.$slots.reactions ? _c("div", { staticClass: "dt-feed-item-row__reactions", attrs: { "data-qa": "dt-feed-item-row--reactions" } }, [_vm._t("reactions")], 2) : _vm._e(), _vm.$slots.threading ? _c("div", { staticClass: "dt-feed-item-row__threading" }, [_vm._t("threading")], 2) : _vm._e()];
@@ -198,7 +199,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
   _sfc_staticRenderFns,
   false,
   null,
-  "047dcbe5"
+  "90e0798e"
 );
 const feed_item_row = __component__.exports;
 module.exports = feed_item_row;

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feed_item_row.vue.cjs","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n <dt-list-item\n ref=\"FeedItemRef\"\n navigation-type=\"none\"\n v-bind=\"$attrs\"\n :class=\"['dt-feed-item-row', listItemClasses]\"\n data-qa=\"dt-feed-item-row\"\n v-on=\"feedListeners\"\n >\n <!-- Avatar or time -->\n <template #left>\n <div\n v-if=\"showHeader\"\n class=\"dt-feed-item-row__avatar-container\"\n >\n <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n <slot\n name=\"avatar\"\n >\n <dt-avatar\n :full-name=\"displayName\"\n :image-src=\"avatarImageUrl\"\n image-alt=\"\"\n :icon-name=\"iconName\"\n :seed=\"avatarSeed\"\n />\n </slot>\n </div>\n <!-- show time instead of avatar when headers not present -->\n <span\n v-if=\"!showHeader\"\n v-show=\"isActive\"\n class=\"dt-feed-item-row__left-time\"\n data-qa=\"dt-feed-item-row--left-time\"\n >\n {{ shortTime }}\n </span>\n </template>\n\n <article class=\"dt-feed-item-row__content\">\n <!-- Feed Item -->\n <div\n v-if=\"showHeader\"\n data-qa=\"dt-feed-item-row--header\"\n class=\"dt-feed-item-row__header\"\n >\n <p class=\"dt-feed-item-row__header__name\">\n {{ displayName }}\n </p>\n <time\n class=\"dt-feed-item-row__header__time\"\n >\n {{ time }}\n </time>\n <dt-badge\n v-if=\"labelText\"\n :text=\"labelText\"\n />\n </div>\n <!-- @slot Default content slot for feed item row -->\n <span\n data-qa=\"dt-feed-item-row--content\"\n >\n <slot />\n </span>\n <div\n v-if=\"$slots.attachment\"\n data-qa=\"dt-feed-item-row--attachment\"\n class=\"dt-feed-item-row__attachment\"\n >\n <slot name=\"attachment\" />\n </div>\n </article>\n\n <template #bottom>\n <div\n v-if=\"$slots.reactions\"\n class=\"dt-feed-item-row__reactions\"\n data-qa=\"dt-feed-item-row--reactions\"\n >\n <!-- @slot Slot for reactions row component -->\n <slot name=\"reactions\" />\n </div>\n <div\n v-if=\"$slots.threading\"\n class=\"dt-feed-item-row__threading\"\n >\n <!-- @slot Slot for threading row component -->\n <slot name=\"threading\" />\n </div>\n </template>\n\n <!-- Action menu -->\n <template #right>\n <div\n v-show=\"isActive\"\n data-qa=\"dt-feed-item-row--menu\"\n class=\"dt-feed-item-row__menu\"\n >\n <dt-lazy-show\n :appear=\"true\"\n transition=\"fade\"\n :show=\"isActive\"\n >\n <!-- @slot Slot for actions hover menu component -->\n <slot name=\"menu\" />\n </dt-lazy-show>\n </div>\n </template>\n </dt-list-item>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\n\nexport default {\n name: 'DtRecipeFeedItemRow',\n\n components: {\n DtAvatar,\n DtLazyShow,\n DtListItem,\n DtBadge,\n },\n\n mixins: [Modal],\n\n inheritAttrs: false,\n\n props: {\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 Show avatar, show header text or dont show left time and vice versa\n /\n showHeader: {\n type: Boolean,\n default: false,\n },\n\n /\n Optional avatar image url.\n * If not provided it will use extracted initials from displayName.\n /\n avatarImageUrl: {\n type: String,\n default: '',\n },\n\n /\n The display name of the sender\n /\n displayName: {\n type: String,\n default: '',\n },\n\n /\n Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n time string displayed as is.\n * Shown on the header when showHeader is true\n /\n time: {\n type: String,\n default: '',\n },\n\n /\n short time string without AM/PM displayed as is.\n * Shown on the left of feed item when showHeader is false and isActive is true\n /\n shortTime: {\n type: String,\n default: '',\n },\n\n /\n A label displayed next to the displayName. Will not show if empty.\n /\n labelText: {\n type: String,\n default: '',\n },\n\n /\n displays a darkened background on the row.\n /\n isActive: {\n type: Boolean,\n default: false,\n },\n\n /\n state for the feed item row. Can be normal, searched & error\n /\n state: {\n type: String,\n default: DEFAULT_FEED_ROW_STATE,\n validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n },\n },\n\n emits: [\n /\n Fires when hovered over feed row\n \n @event hover\n * @type {Boolean}\n /\n 'hover',\n\n /\n Fires when focused over feed row\n \n @event focus\n * @type {Boolean}\n /\n 'focus',\n\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n ],\n\n data () {\n return {\n transitionActive: false,\n };\n },\n\n computed: {\n feedListeners () {\n return {\n ...this.$listeners,\n mouseenter: () => this.setHover(true),\n mouseleave: () => this.setHover(false),\n focusin: () => this.setFocus(true),\n focusout: () => this.setFocus(false),\n transitionend: () => this.transitionComplete(),\n keydown: event => {\n switch (event.code) {\n case 'Tab':\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n };\n },\n\n iconName () {\n return this.noInitials ? 'user' : null;\n },\n\n listItemClasses () {\n return [\n 'dt-feed-item-row',\n { 'dt-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n { 'dt-feed-item-row--state-transition': this.transitionActive },\n FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n ];\n },\n },\n\n watch: {\n state: {\n immediate: true,\n handler: function (newState, oldState) {\n if (newState !== DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = true;\n }\n },\n },\n },\n\n methods: {\n transitionComplete () {\n if (this.state === DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = false;\n }\n },\n\n trapFocus (e) {\n this.focusTrappedTabPress(e);\n },\n\n setFocus (bool) {\n this.$emit('focus', bool);\n },\n\n setHover (bool) {\n this.$emit('hover', bool);\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-feed-item-row {\n\n width: var(--dt-size-100-percent);\n box-sizing: border-box;\n position: relative;\n padding: var(--dt-space-300) var(--dt-space-500);\n\n &:focus-visible {\n box-shadow: var(--dt-shadow-focus-inset);\n }\n\n &--state-searched {\n background-color: var(--dt-color-surface-warning-subtle);\n }\n\n &--state-error {\n background-color: var(--dt-color-surface-critical-subtle);\n }\n\n &--active {\n background-color: var(--dt-color-surface-secondary-opaque);\n }\n\n &--state-transition {\n transition-duration: 2s;\n transition-delay: 0s;\n transition-timing-function: var(--ttf-in-out);\n transition-property: background-color;\n }\n\n &__avatar-container {\n padding-top: var(--dt-space-300);\n padding-bottom: var(--dt-space-300);\n }\n\n &__content {\n padding-left: var(--dt-space-300);\n }\n\n &__attachment {\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-300);\n\n &:deep(.dt-feed-item-row__image) {\n border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);\n border-radius: var(--dt-size-radius-400);\n display: block;\n max-width: 30rem;\n max-height: 30rem;\n min-width: 5.6rem;\n min-height: 5.6rem;\n }\n\n &:deep(.dt-feed-item-row__video) {\n display: block;\n height: 25.0rem;\n }\n }\n\n &__header {\n display: flex;\n align-items: baseline;\n flex-wrap: wrap;\n gap: var(--dt-space-300);\n font-size: var(--dt-font-size-200);\n line-height: var(--dt-font-line-height-300);\n\n &__name {\n font-weight: var(--dt-font-weight-bold);\n }\n\n &__time {\n font-size: var(--dt-font-size-100);\n color: var(--dt-color-foreground-tertiary);\n flex-shrink: 0;\n }\n }\n\n &__reactions {\n display: flex;\n flex-wrap: wrap;\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n padding-left: var(--dt-space-300);\n }\n\n &__threading {\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n }\n\n &__left-time {\n color: var(--dt-color-foreground-tertiary);\n font-size: var(--dt-font-size-100);\n font-weight: var(--dt-font-weight-normal);\n vertical-align: middle;\n white-space: nowrap;\n }\n\n &__menu {\n position: absolute;\n top: var(--dt-space-550-negative);\n right: var(--dt-space-450);\n }\n\n &:deep(> .dt-item-layout) {\n font: var(--dt-typography-body-md-compact);\n min-height: initial;\n padding: 0px;\n }\n\n &:deep(> .dt-item-layout > .dt-item-layout--left) {\n align-self: flex-start;\n text-align: end;\n display: block;\n padding-right: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n // min-width = avatar width + padding\n min-width: calc(var(--dt-space-600) + var(--dt-space-300));\n }\n\n &:deep(> .dt-item-layout > .dt-item-layout--right) {\n padding: 0;\n min-width: initial;\n }\n\n &:deep(> .dt-item-layout > .dt-item-layout--content > .dt-item-layout--bottom) {\n display: flex;\n flex-direction: column;\n margin-top: 0;\n }\n}\n</style>\n"],"names":["DtAvatar","DtLazyShow","DtListItem","DtBadge","Modal","DEFAULT_FEED_ROW_STATE","FEED_ROW_STATE_BACKGROUND_COLOR"],"mappings":"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"}
1	+ {"version":3,"file":"feed_item_row.vue.cjs","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n <dt-list-item\n ref=\"FeedItemRef\"\n navigation-type=\"none\"\n v-bind=\"$attrs\"\n :class=\"['dt-feed-item-row', listItemClasses]\"\n data-qa=\"dt-feed-item-row\"\n v-on=\"feedListeners\"\n >\n <!-- Avatar or time -->\n <template #left>\n <div\n v-if=\"showHeader\"\n class=\"dt-feed-item-row__avatar-container\"\n >\n <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n <slot\n name=\"avatar\"\n >\n <dt-avatar\n :full-name=\"displayName\"\n :image-src=\"avatarImageUrl\"\n image-alt=\"\"\n :seed=\"avatarSeed\"\n >\n <template\n v-if=\"noInitials\"\n #icon=\"{ iconSize }\"\n >\n <dt-icon-user\n :size=\"iconSize\"\n />\n </template>\n </dt-avatar>\n </slot>\n </div>\n <!-- show time instead of avatar when headers not present -->\n <span\n v-if=\"!showHeader\"\n v-show=\"isActive\"\n class=\"dt-feed-item-row__left-time\"\n data-qa=\"dt-feed-item-row--left-time\"\n >\n {{ shortTime }}\n </span>\n </template>\n\n <article class=\"dt-feed-item-row__content\">\n <!-- Feed Item -->\n <div\n v-if=\"showHeader\"\n data-qa=\"dt-feed-item-row--header\"\n class=\"dt-feed-item-row__header\"\n >\n <p class=\"dt-feed-item-row__header__name\">\n {{ displayName }}\n </p>\n <time\n class=\"dt-feed-item-row__header__time\"\n >\n {{ time }}\n </time>\n <dt-badge\n v-if=\"labelText\"\n :text=\"labelText\"\n />\n </div>\n <!-- @slot Default content slot for feed item row -->\n <span\n data-qa=\"dt-feed-item-row--content\"\n >\n <slot />\n </span>\n <div\n v-if=\"$slots.attachment\"\n data-qa=\"dt-feed-item-row--attachment\"\n class=\"dt-feed-item-row__attachment\"\n >\n <slot name=\"attachment\" />\n </div>\n </article>\n\n <template #bottom>\n <div\n v-if=\"$slots.reactions\"\n class=\"dt-feed-item-row__reactions\"\n data-qa=\"dt-feed-item-row--reactions\"\n >\n <!-- @slot Slot for reactions row component -->\n <slot name=\"reactions\" />\n </div>\n <div\n v-if=\"$slots.threading\"\n class=\"dt-feed-item-row__threading\"\n >\n <!-- @slot Slot for threading row component -->\n <slot name=\"threading\" />\n </div>\n </template>\n\n <!-- Action menu -->\n <template #right>\n <div\n v-show=\"isActive\"\n data-qa=\"dt-feed-item-row--menu\"\n class=\"dt-feed-item-row__menu\"\n >\n <dt-lazy-show\n :appear=\"true\"\n transition=\"fade\"\n :show=\"isActive\"\n >\n <!-- @slot Slot for actions hover menu component -->\n <slot name=\"menu\" />\n </dt-lazy-show>\n </div>\n </template>\n </dt-list-item>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeFeedItemRow',\n\n components: {\n DtAvatar,\n DtLazyShow,\n DtListItem,\n DtBadge,\n DtIconUser,\n },\n\n mixins: [Modal],\n\n inheritAttrs: false,\n\n props: {\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 Show avatar, show header text or dont show left time and vice versa\n /\n showHeader: {\n type: Boolean,\n default: false,\n },\n\n /\n Optional avatar image url.\n * If not provided it will use extracted initials from displayName.\n /\n avatarImageUrl: {\n type: String,\n default: '',\n },\n\n /\n The display name of the sender\n /\n displayName: {\n type: String,\n default: '',\n },\n\n /\n Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n time string displayed as is.\n * Shown on the header when showHeader is true\n /\n time: {\n type: String,\n default: '',\n },\n\n /\n short time string without AM/PM displayed as is.\n * Shown on the left of feed item when showHeader is false and isActive is true\n /\n shortTime: {\n type: String,\n default: '',\n },\n\n /\n A label displayed next to the displayName. Will not show if empty.\n /\n labelText: {\n type: String,\n default: '',\n },\n\n /\n displays a darkened background on the row.\n /\n isActive: {\n type: Boolean,\n default: false,\n },\n\n /\n state for the feed item row. Can be normal, searched & error\n /\n state: {\n type: String,\n default: DEFAULT_FEED_ROW_STATE,\n validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n },\n },\n\n emits: [\n /\n Fires when hovered over feed row\n \n @event hover\n * @type {Boolean}\n /\n 'hover',\n\n /\n Fires when focused over feed row\n \n @event focus\n * @type {Boolean}\n /\n 'focus',\n\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n ],\n\n data () {\n return {\n transitionActive: false,\n };\n },\n\n computed: {\n feedListeners () {\n return {\n ...this.$listeners,\n mouseenter: () => this.setHover(true),\n mouseleave: () => this.setHover(false),\n focusin: () => this.setFocus(true),\n focusout: () => this.setFocus(false),\n transitionend: () => this.transitionComplete(),\n keydown: event => {\n switch (event.code) {\n case 'Tab':\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n };\n },\n\n listItemClasses () {\n return [\n 'dt-feed-item-row',\n { 'dt-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n { 'dt-feed-item-row--state-transition': this.transitionActive },\n FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n ];\n },\n },\n\n watch: {\n state: {\n immediate: true,\n handler: function (newState, oldState) {\n if (newState !== DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = true;\n }\n },\n },\n },\n\n methods: {\n transitionComplete () {\n if (this.state === DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = false;\n }\n },\n\n trapFocus (e) {\n this.focusTrappedTabPress(e);\n },\n\n setFocus (bool) {\n this.$emit('focus', bool);\n },\n\n setHover (bool) {\n this.$emit('hover', bool);\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-feed-item-row {\n\n width: var(--dt-size-100-percent);\n box-sizing: border-box;\n position: relative;\n padding: var(--dt-space-300) var(--dt-space-500);\n\n &:focus-visible {\n box-shadow: var(--dt-shadow-focus-inset);\n }\n\n &--state-searched {\n background-color: var(--dt-color-surface-warning-subtle);\n }\n\n &--state-error {\n background-color: var(--dt-color-surface-critical-subtle);\n }\n\n &--active {\n background-color: var(--dt-color-surface-secondary-opaque);\n }\n\n &--state-transition {\n transition-duration: 2s;\n transition-delay: 0s;\n transition-timing-function: var(--ttf-in-out);\n transition-property: background-color;\n }\n\n &__avatar-container {\n padding-top: var(--dt-space-300);\n padding-bottom: var(--dt-space-300);\n }\n\n &__content {\n padding-left: var(--dt-space-300);\n }\n\n &__attachment {\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-300);\n\n &:deep(.dt-feed-item-row__image) {\n border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);\n border-radius: var(--dt-size-radius-400);\n display: block;\n max-width: 30rem;\n max-height: 30rem;\n min-width: 5.6rem;\n min-height: 5.6rem;\n }\n\n &:deep(.dt-feed-item-row__video) {\n display: block;\n height: 25.0rem;\n }\n }\n\n &__header {\n display: flex;\n align-items: baseline;\n flex-wrap: wrap;\n gap: var(--dt-space-300);\n font-size: var(--dt-font-size-200);\n line-height: var(--dt-font-line-height-300);\n\n &__name {\n font-weight: var(--dt-font-weight-bold);\n }\n\n &__time {\n font-size: var(--dt-font-size-100);\n color: var(--dt-color-foreground-tertiary);\n flex-shrink: 0;\n }\n }\n\n &__reactions {\n display: flex;\n flex-wrap: wrap;\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n padding-left: var(--dt-space-300);\n }\n\n &__threading {\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n }\n\n &__left-time {\n color: var(--dt-color-foreground-tertiary);\n font-size: var(--dt-font-size-100);\n font-weight: var(--dt-font-weight-normal);\n vertical-align: middle;\n white-space: nowrap;\n }\n\n &__menu {\n position: absolute;\n top: var(--dt-space-550-negative);\n right: var(--dt-space-450);\n }\n\n &:deep(> .dt-item-layout) {\n font: var(--dt-typography-body-md-compact);\n min-height: initial;\n padding: 0px;\n }\n\n &:deep(> .dt-item-layout > .dt-item-layout--left) {\n align-self: flex-start;\n text-align: end;\n display: block;\n padding-right: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n // min-width = avatar width + padding\n min-width: calc(var(--dt-space-600) + var(--dt-space-300));\n }\n\n &:deep(> .dt-item-layout > .dt-item-layout--right) {\n padding: 0;\n min-width: initial;\n }\n\n &:deep(> .dt-item-layout > .dt-item-layout--content > .dt-item-layout--bottom) {\n display: flex;\n flex-direction: column;\n margin-top: 0;\n }\n}\n</style>\n"],"names":["DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","FEED_ROW_STATE_BACKGROUND_COLOR"],"mappings":"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"}

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row.vue.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from "./feed_item_row_constants.js";
 import Modal from "../../../common/mixins/modal.js";
+import { DtIconUser } from "@dialpad/dialtone-icons/vue2";
 /* empty css                   */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtAvatar from "../../../components/avatar/avatar.vue.js";
@@ -12,7 +13,8 @@ const _sfc_main = {
     DtAvatar,
     DtLazyShow,
     DtListItem,
-    DtBadge
+    DtBadge,
+    DtIconUser
   },
   mixins: [Modal],
   inheritAttrs: false,
@@ -139,9 +141,6 @@ const _sfc_main = {
         }
       };
     },
-    iconName() {
-      return this.noInitials ? "user" : null;
-    },
     listItemClasses() {
       return [
         "dt-feed-item-row",
@@ -182,7 +181,9 @@ var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("dt-list-item", _vm._g(_vm._b({ ref: "FeedItemRef", class: ["dt-feed-item-row", _vm.listItemClasses], attrs: { "navigation-type": "none", "data-qa": "dt-feed-item-row" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
     return [_vm.showHeader ? _c("div", { staticClass: "dt-feed-item-row__avatar-container" }, [_vm._t("avatar", function() {
-      return [_c("dt-avatar", { attrs: { "full-name": _vm.displayName, "image-src": _vm.avatarImageUrl, "image-alt": "", "icon-name": _vm.iconName, "seed": _vm.avatarSeed } })];
+      return [_c("dt-avatar", { attrs: { "full-name": _vm.displayName, "image-src": _vm.avatarImageUrl, "image-alt": "", "seed": _vm.avatarSeed }, scopedSlots: _vm._u([_vm.noInitials ? { key: "icon", fn: function({ iconSize }) {
+        return [_c("dt-icon-user", { attrs: { "size": iconSize } })];
+      } } : null], null, true) })];
     })], 2) : _vm._e(), !_vm.showHeader ? _c("span", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "dt-feed-item-row__left-time", attrs: { "data-qa": "dt-feed-item-row--left-time" } }, [_vm._v(" " + _vm._s(_vm.shortTime) + " ")]) : _vm._e()];
   }, proxy: true }, { key: "bottom", fn: function() {
     return [_vm.$slots.reactions ? _c("div", { staticClass: "dt-feed-item-row__reactions", attrs: { "data-qa": "dt-feed-item-row--reactions" } }, [_vm._t("reactions")], 2) : _vm._e(), _vm.$slots.threading ? _c("div", { staticClass: "dt-feed-item-row__threading" }, [_vm._t("threading")], 2) : _vm._e()];
@@ -197,7 +198,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "047dcbe5"
+  "90e0798e"
 );
 const feed_item_row = __component__.exports;
 export {