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

@dialpad/dialtone 9.73.0-beta.2 → 9.73.0

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 (444) hide show

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

@@ -1,15 +1,18 @@
 "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");
 const vue = require("vue");
 ;/* empty css              */
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.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 },
+  components: { DtPresence: presence, DtIcon: icon },
   inheritAttrs: false,
   props: {
     /**
@@ -97,6 +100,13 @@ 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
      */
@@ -127,6 +137,14 @@ 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
@@ -177,19 +195,12 @@ const _sfc_main = {
       AVATAR_ICON_SIZES: avatar_constants.AVATAR_ICON_SIZES,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
-      initializing: false,
-      hasSlotContent: common_utils.hasSlotContent
+      initializing: false
     };
   },
   computed: {
-    isIconType() {
-      return common_utils.hasSlotContent(this.$slots.icon);
-    },
-    hasOverlayIcon() {
-      return common_utils.hasSlotContent(this.$slots.overlayIcon);
-    },
-    iconDataQa() {
-      return "dt-avatar-icon";
+    isNotIconType() {
+      return !this.iconName;
     },
     avatarClasses() {
       return [
@@ -198,7 +209,7 @@ const _sfc_main = {
         this.avatarClass,
         {
           "d-avatar--group": this.showGroup,
-          [`d-avatar--color-${this.getColor()}`]: !this.isIconType,
+          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
           "d-avatar--clickable": this.clickable
         }
       ];
@@ -206,8 +217,7 @@ const _sfc_main = {
     overlayClasses() {
       return [
         "d-avatar__overlay",
-        this.overlayClass,
-        { "d-avatar__overlay-icon": this.hasOverlayIcon }
+        this.overlayClass
       ];
     },
     showGroup() {
@@ -294,17 +304,17 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["src", "alt"];
-const _hoisted_2 = ["aria-label", "data-qa", "role"];
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 1,
   class: "d-avatar__overlay-text"
 };
-const _hoisted_4 = {
+const _hoisted_3 = {
   key: 1,
   class: "d-avatar__count",
   "data-qa": "dt-avatar-count"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_presence = vue.resolveComponent("dt-presence");
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "div"), {
     id: $props.id,
@@ -328,28 +338,29 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "data-qa": "dt-avatar-image",
           src: $props.imageSrc,
           alt: $props.imageAlt
-        }, null, 8, _hoisted_1)) : $options.isIconType ? (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_1)) : $props.iconName ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
           key: 1,
+          name: $props.iconName,
+          "aria-label": $props.iconAriaLabel,
+          size: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size],
           class: vue.normalizeClass([$props.iconClass, $data.AVATAR_KIND_MODIFIERS.icon]),
-          "aria-label": $props.clickable ? $props.iconAriaLabel : "",
-          "data-qa": $options.iconDataQa,
-          role: $props.clickable ? "button" : ""
-        }, [
-          vue.renderSlot(_ctx.$slots, "icon", {
-            iconSize: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size]
-          })
-        ], 10, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock("span", {
+          "data-qa": "dt-avatar-icon"
+        }, null, 8, ["name", "aria-label", "size", "class"])) : (vue.openBlock(), vue.createElementBlock("span", {
           key: 2,
           class: vue.normalizeClass([$data.AVATAR_KIND_MODIFIERS.initials])
         }, vue.toDisplayString($data.formattedInitials), 3))
       ], 2),
-      $options.hasOverlayIcon || $props.overlayText ? (vue.openBlock(), vue.createElementBlock("div", {
+      $props.overlayIcon || $props.overlayText ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
         class: vue.normalizeClass($options.overlayClasses)
       }, [
-        $options.hasOverlayIcon ? vue.renderSlot(_ctx.$slots, "overlayIcon", { key: 0 }) : $props.overlayText ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3, vue.toDisplayString($props.overlayText), 1)) : vue.createCommentVNode("", true)
+        $props.overlayIcon ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
+          key: 0,
+          class: "d-avatar__overlay-icon",
+          name: $props.overlayIcon
+        }, null, 8, ["name"])) : $props.overlayText ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, vue.toDisplayString($props.overlayText), 1)) : vue.createCommentVNode("", true)
       ], 2)) : vue.createCommentVNode("", true),
-      $options.showGroup ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString($options.formattedGroup), 1)) : vue.createCommentVNode("", true),
+      $options.showGroup ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString($options.formattedGroup), 1)) : vue.createCommentVNode("", true),
       $props.presence && !$options.showGroup ? (vue.openBlock(), vue.createBlock(_component_dt_presence, vue.mergeProps({
         key: 2,
         presence: $props.presence,
@@ -359,7 +370,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]
       }, $props.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : vue.createCommentVNode("", true)
     ]),
-    _: 3
+    _: 1
   }, 8, ["id", "class", "onClick"]);
 }
 const DtAvatar = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);

package/dist/vue3/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 <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, hasSlotContent } 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 hasSlotContent,\n };\n },\n\n computed: {\n isIconType () {\n return hasSlotContent(this.$slots.icon);\n },\n\n hasOverlayIcon () {\n return hasSlotContent(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","hasSlotContent","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_renderSlot","_toDisplayString","_mergeProps"],"mappings":";;;;;;;;;AAiGA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY,EAAEA,YAAAA,SAAY;AAAA,EAE1B,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAOC,aAAe,gBAAA;AAAA,MAAK;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAKC,sCAAqB,EAAE,SAAS,IAAI;AAAA,IACtE;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAASC,iBAAsB,uBAAC;AAAA,MAChC,WAAW,CAAC,UAAU;AACpB,eAAO,OAAO,OAAOA,iBAAAA,sBAAsB,EAAE,SAAS,KAAK;AAAA,MAC5D;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,UAAUC,iBAAsB,uBAAC,KAAK;AAAA,IACnD;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,CAAC,QAAQ,OAAO,KAAKC,eAAmB,mBAAA,EAAE,SAAS,IAAI;AAAA,IAC7E;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,uBAAAH,iBAAqB;AAAA,MACrB,uBAAAI,iBAAqB;AAAA,MACrB,gCAAAC,iBAA8B;AAAA,MAC9B,mBAAAC,iBAAiB;AAAA,MACjB,yBAAyB;AAAA,MACzB,mBAAmB;AAAA,MACnB,cAAc;AAAA,MACd,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAOA,4BAAe,KAAK,OAAO,IAAI;AAAA,IACvC;AAAA,IAED,iBAAkB;AAChB,aAAOA,4BAAe,KAAK,OAAO,WAAW;AAAA,IAC9C;AAAA,IAED,aAAc;AACZ,aAAO;AAAA,IACR;AAAA,IAED,gBAAiB;AACf,aAAO;AAAA,QACL;AAAA,QACAP,iBAAqB,sBAAC,KAAK,aAAa;AAAA,QACxC,KAAK;AAAA,QACL;AAAA,UACE,mBAAmB,KAAK;AAAA,UACxB,CAAC,mBAAmB,KAAK,SAAU,CAAA,EAAE,GAAG,CAAC,KAAK;AAAA,UAC9C,uBAAuB,KAAK;AAAA,QAC7B;AAAA;IAEJ;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA,KAAK;AAAA,QACL,EAAE,0BAA0B,KAAK,eAAgB;AAAA;IAEpD;AAAA,IAED,YAAa;AACX,aAAOE,iBAAsB,uBAAC,KAAK,KAAK;AAAA,IACzC;AAAA,IAED,iBAAkB;AAChB,aAAO,KAAK,QAAQ,KAAK,QAAQ,KAAK;AAAA,IACvC;AAAA,IAED,gBAAiB;AAEf,aAAO,KAAK,QAAQ,OAAO,KAAK;AAAA,IACjC;AAAA,IAED,YAAa;AACX,aAAO,KAAK,4BAA4B,SAAS,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,UAAU;AAAA,MACR,WAAW;AAAA,MACX,UAAW;AACT,aAAK,eAAc;AAAA,MACpB;AAAA,IACF;AAAA,IAED,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,UAAW;AACT,aAAK,eAAc;AAAA,MACpB;AAAA,IACF;AAAA,IAED,OAAO;AAAA,MACL,WAAW;AAAA,MACX,UAAW;AACT,aAAK,eAAc;AAAA,MACpB;AAAA,IACF;AAAA,IAED,SAAU,QAAQ;AAChB,WAAK,0BAA0B;AAC/B,UAAI,CAAC,OAAQ;AAEb,WAAK,cAAa;AAClB,WAAK,kBAAiB;AAAA,IACvB;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,cAAa;AAClB,SAAK,kBAAiB;AAAA,EACvB;AAAA,EAED,SAAS;AAAA,IACP,MAAM,oBAAqB;AACzB,YAAM,KAAK;AACX,YAAM,KAAK,KAAK,MAAM;AACtB,UAAI,CAAC,GAAI;AAET,SAAG,iBAAiB,QAAQ,MAAM,KAAK,yBAAyB,EAAE,GAAG,EAAE,MAAM,KAAG,CAAG;AACnF,SAAG,iBAAiB,SAAS,MAAM,KAAK,0BAA0B,EAAE,GAAG,EAAE,MAAM,KAAG,CAAG;AAAA,IACtF;AAAA,IAED,iBAAkB;AAChB,YAAM,WAAWM,MAAAA,wBAAwB,KAAK,QAAQ;AAEtD,UAAI,KAAK,kBAAkB,MAAM;AAC/B,aAAK,oBAAoB;AAAA,MAC3B,WAAW,KAAK,kBAAkB,MAAM;AACtC,aAAK,oBAAoB,SAAS,CAAC;AAAA,aAC9B;AACL,aAAK,oBAAoB;AAAA,MAC3B;AAAA,IACD;AAAA,IAED,WAAY;AACV,aAAO,KAAK,SAASC,aAAAA,iBAAiBC,iBAAAA,sBAAsB,KAAK,IAAI;AAAA,IACtE;AAAA,IAED,yBAA0B,IAAI;AAC5B,WAAK,0BAA0B;AAC/B,SAAG,UAAU,OAAO,UAAU;AAAA,IAC/B;AAAA,IAED,0BAA2B,IAAI;AAC7B,WAAK,0BAA0B;AAC/B,SAAG,UAAU,IAAI,UAAU;AAAA,IAC5B;AAAA,IAED,gBAAiB;AACf,UAAI,KAAK,YAAY,KAAK,aAAa,QAAW;AAChD,gBAAQ,MAAM,uHAAuH;AAAA,MACvI;AAAA,IACD;AAAA,IAED,YAAa,GAAG;AACd,UAAI,CAAC,KAAK,UAAW;AACrB,WAAK,MAAM,SAAS,CAAC;AAAA,IACtB;AAAA,EACF;AACH;;;;;EAnXQ,OAAM;;;;EAOR,OAAM;AAAA,EACN,WAAQ;;;;AA9DZ,SAAAC,IAAA,UAAA,GAAAC,IAAAA,YA0EYC,4BAzEL,OAAS,YAAA,WAAA,KAAA,GAAA;AAAA,IACb,IAAI,OAAE;AAAA,IACN,0BAAO,SAAa,aAAA;AAAA,IACrB,WAAQ;AAAA,IACP,SAAO,SAAW;AAAA;yBAEnB,MAmCM;AAAA,MAnCNC,IAAAA,mBAmCM,OAAA;AAAA,QAlCJ,KAAI;AAAA,QACH,OAAKC,IAAAA,eAAA;AAAA,UAAY,OAAW;AAAA;sCAAkE,MAAuB,wBAAA;AAAA;;QAO9G,SAAS,8BADjBC,IAOC,mBAAA,OAAA;AAAA;UALC,KAAI;AAAA,UACJ,OAAM;AAAA,UACN,WAAQ;AAAA,UACP,KAAK,OAAQ;AAAA,UACb,KAAK,OAAQ;AAAA,mCAGH,SAAU,+BADvBA,IAYM,mBAAA,OAAA;AAAA;UAVH,OAAQD,IAAA,eAAA,CAAA,OAAA,WAAW,MAAA,sBAAsB,IAAI,CAAA;AAAA,UAC7C,cAAY,OAAS,YAAG,OAAa,gBAAA;AAAA,UACrC,WAAS,SAAU;AAAA,UACnB,MAAM,OAAS,YAAA,WAAA;AAAA;UAGhBE,eAGE,KAAA,QAAA,QAAA;AAAA,YADC,UAAW,OAAA,YAAY,MAAA,kBAAkB,OAAI,IAAA;AAAA;gDAGlDD,IAKO,mBAAA,QAAA;AAAA;UAHJ,OAAKD,IAAAA,eAAA,CAAG,MAAqB,sBAAC,QAAQ,CAAA;AAAA,+BAEpC,MAAiB,iBAAA,GAAA,CAAA;AAAA;MAIhB,SAAA,kBAAkB,OAAW,gCADrCC,IAeM,mBAAA,OAAA;AAAA;QAbH,0BAAO,SAAc,cAAA;AAAA;QAId,SAAc,iBADtBC,IAGE,WAAA,KAAA,QAAA,eAAA,EAAA,KAAA,GAAA,IAEW,OAAW,gCADxBD,IAKI,mBAAA,KALJ,YAKIE,IAAAA,gBADC,OAAW,WAAA,GAAA,CAAA;;MAIV,SAAS,8BADjBF,IAI4B,mBAAA,QAJ5B,YAI4BE,IAAAA,gBAAxB,SAAc,cAAA,GAAA,CAAA;MAEV,OAAA,aAAa,SAAS,aAD9BP,IAAAA,aAAAC,IAAAA,YASE,wBATFO,eASE;AAAA;QAPC,UAAU,OAAQ;AAAA,QAClB,OAAK;AAAA;UAA0C,MAAA,+BAA+B,OAAI,IAAA;AAAA;SAI3E,OAAa,eAAA,EACrB,WAAQ,cAAa,CAAA,GAAA,MAAA,IAAA,CAAA,YAAA,OAAA,CAAA;;;;;;;"}
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","_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_toDisplayString","_mergeProps"],"mappings":";;;;;;;;;;;AA0FA,MAAM,aAAaA,gBAAY,aAAA;AAM/B,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY,EAAA,YAAEC,UAAU,QAAEC,KAAQ;AAAA,EAElC,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAOC,aAAe,gBAAA;AAAA,MAAK;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,OAAO,KAAKC,sCAAqB,EAAE,SAAS,IAAI;AAAA,IACtE;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAASC,iBAAsB,uBAAC;AAAA,MAChC,WAAW,CAAC,UAAU;AACpB,eAAO,OAAO,OAAOA,iBAAAA,sBAAsB,EAAE,SAAS,KAAK;AAAA,MAC5D;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,UAAUC,iBAAsB,uBAAC,KAAK;AAAA,IACnD;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,WAAW,SAAS,IAAI;AAAA,IAC9C;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS,CAAC,QAAQ,OAAO,KAAKC,eAAmB,mBAAA,EAAE,SAAS,IAAI;AAAA,IAC7E;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,uBAAAH,iBAAqB;AAAA,MACrB,uBAAAI,iBAAqB;AAAA,MACrB,gCAAAC,iBAA8B;AAAA,MAC9B,mBAAAC,iBAAiB;AAAA,MACjB,yBAAyB;AAAA,MACzB,mBAAmB;AAAA,MACnB,cAAc;AAAA;EAEjB;AAAA,EAED,UAAU;AAAA,IACR,gBAAiB;AACf,aAAO,CAAC,KAAK;AAAA,IACd;AAAA,IAED,gBAAiB;AACf,aAAO;AAAA,QACL;AAAA,QACAN,iBAAqB,sBAAC,KAAK,aAAa;AAAA,QACxC,KAAK;AAAA,QACL;AAAA,UACE,mBAAmB,KAAK;AAAA,UACxB,CAAC,mBAAmB,KAAK,SAAQ,CAAE,EAAE,GAAG,KAAK;AAAA,UAC7C,uBAAuB,KAAK;AAAA,QAC7B;AAAA;IAEJ;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA,KAAK;AAAA;IAER;AAAA,IAED,YAAa;AACX,aAAOE,iBAAsB,uBAAC,KAAK,KAAK;AAAA,IACzC;AAAA,IAED,iBAAkB;AAChB,aAAO,KAAK,QAAQ,KAAK,QAAQ,KAAK;AAAA,IACvC;AAAA,IAED,gBAAiB;AAEf,aAAO,KAAK,QAAQ,OAAO,KAAK;AAAA,IACjC;AAAA,IAED,YAAa;AACX,aAAO,KAAK,4BAA4B,SAAS,KAAK;AAAA,IACvD;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,UAAU;AAAA,MACR,WAAW;AAAA,MACX,UAAW;AACT,aAAK,eAAc;AAAA,MACpB;AAAA,IACF;AAAA,IAED,MAAM;AAAA,MACJ,WAAW;AAAA,MACX,UAAW;AACT,aAAK,eAAc;AAAA,MACpB;AAAA,IACF;AAAA,IAED,OAAO;AAAA,MACL,WAAW;AAAA,MACX,UAAW;AACT,aAAK,eAAc;AAAA,MACpB;AAAA,IACF;AAAA,IAED,SAAU,QAAQ;AAChB,WAAK,0BAA0B;AAC/B,UAAI,CAAC,OAAQ;AAEb,WAAK,cAAa;AAClB,WAAK,kBAAiB;AAAA,IACvB;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,cAAa;AAClB,SAAK,kBAAiB;AAAA,EACvB;AAAA,EAED,SAAS;AAAA,IACP,MAAM,oBAAqB;AACzB,YAAM,KAAK;AACX,YAAM,KAAK,KAAK,MAAM;AACtB,UAAI,CAAC,GAAI;AAET,SAAG,iBAAiB,QAAQ,MAAM,KAAK,yBAAyB,EAAE,GAAG,EAAE,MAAM,KAAG,CAAG;AACnF,SAAG,iBAAiB,SAAS,MAAM,KAAK,0BAA0B,EAAE,GAAG,EAAE,MAAM,KAAG,CAAG;AAAA,IACtF;AAAA,IAED,iBAAkB;AAChB,YAAM,WAAWK,MAAAA,wBAAwB,KAAK,QAAQ;AAEtD,UAAI,KAAK,kBAAkB,MAAM;AAC/B,aAAK,oBAAoB;AAAA,MAC3B,WAAW,KAAK,kBAAkB,MAAM;AACtC,aAAK,oBAAoB,SAAS,CAAC;AAAA,aAC9B;AACL,aAAK,oBAAoB;AAAA,MAC3B;AAAA,IACD;AAAA,IAED,WAAY;AACV,aAAO,KAAK,SAASC,aAAAA,iBAAiBC,iBAAAA,sBAAsB,KAAK,IAAI;AAAA,IACtE;AAAA,IAED,yBAA0B,IAAI;AAC5B,WAAK,0BAA0B;AAC/B,SAAG,UAAU,OAAO,UAAU;AAAA,IAC/B;AAAA,IAED,0BAA2B,IAAI;AAC7B,WAAK,0BAA0B;AAC/B,SAAG,UAAU,IAAI,UAAU;AAAA,IAC5B;AAAA,IAED,gBAAiB;AACf,UAAI,KAAK,YAAY,KAAK,aAAa,QAAW;AAChD,gBAAQ,MAAM,uHAAuH;AAAA,MACvI;AAAA,IACD;AAAA,IAED,YAAa,GAAG;AACd,UAAI,CAAC,KAAK,UAAW;AACrB,WAAK,MAAM,SAAS,CAAC;AAAA,IACtB;AAAA,EACF;AACH;;;;EA9XQ,OAAM;;;;EAOR,OAAM;AAAA,EACN,WAAQ;;;;;AAzDZ,SAAAC,IAAA,UAAA,GAAAC,IAAAA,YAqEYC,4BApEL,OAAS,YAAA,WAAA,KAAA,GAAA;AAAA,IACb,IAAI,OAAE;AAAA,IACN,0BAAO,SAAa,aAAA;AAAA,IACrB,WAAQ;AAAA,IACP,SAAO,SAAW;AAAA;yBAEnB,MA8BM;AAAA,MA9BNC,IAAAA,mBA8BM,OAAA;AAAA,QA7BJ,KAAI;AAAA,QACH,OAAKC,IAAAA,eAAA;AAAA,UAAY,OAAW;AAAA;sCAAkE,MAAuB,wBAAA;AAAA;;QAO9G,SAAS,8BADjBC,IAOC,mBAAA,OAAA;AAAA;UALC,KAAI;AAAA,UACJ,OAAM;AAAA,UACN,WAAQ;AAAA,UACP,KAAK,OAAQ;AAAA,UACb,KAAK,OAAQ;AAAA,mCAGH,OAAQ,6BADrBJ,IAOE,YAAA,oBAAA;AAAA;UALC,MAAM,OAAQ;AAAA,UACd,cAAY,OAAa;AAAA,UACzB,MAAM,OAAA,YAAY,MAAA,kBAAkB,OAAI,IAAA;AAAA,UACxC,OAAQG,IAAA,eAAA,CAAA,OAAA,WAAW,MAAA,sBAAsB,IAAI,CAAA;AAAA,UAC9C,WAAQ;AAAA,kFAEVC,IAKO,mBAAA,QAAA;AAAA;UAHJ,OAAKD,IAAAA,eAAA,CAAG,MAAqB,sBAAC,QAAQ,CAAA;AAAA,+BAEpC,MAAiB,iBAAA,GAAA,CAAA;AAAA;MAIhB,OAAA,eAAe,OAAW,gCADlCC,IAeM,mBAAA,OAAA;AAAA;QAbH,0BAAO,SAAc,cAAA;AAAA;QAGd,OAAW,gCADnBJ,IAIE,YAAA,oBAAA;AAAA;UAFA,OAAM;AAAA,UACL,MAAM,OAAW;AAAA,iCAGP,OAAW,gCADxBI,IAKI,mBAAA,KALJ,YAKIC,IAAAA,gBADC,OAAW,WAAA,GAAA,CAAA;;MAIV,SAAS,8BADjBD,IAI4B,mBAAA,QAJ5B,YAI4BC,IAAAA,gBAAxB,SAAc,cAAA,GAAA,CAAA;MAEV,OAAA,aAAa,SAAS,aAD9BN,IAAAA,aAAAC,IAAAA,YASE,wBATFM,eASE;AAAA;QAPC,UAAU,OAAQ;AAAA,QAClB,OAAK;AAAA;UAA0C,MAAA,+BAA+B,OAAI,IAAA;AAAA;SAI3E,OAAa,eAAA,EACrB,WAAQ,cAAa,CAAA,GAAA,MAAA,IAAA,CAAA,YAAA,OAAA,CAAA;;;;;;;"}

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

@@ -1,14 +1,17 @@
-import { getUniqueString, hasSlotContent, getRandomElement } from "../../common/utils.js";
+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";
-import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementVNode, createElementBlock, renderSlot, toDisplayString, createCommentVNode, mergeProps } from "vue";
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementVNode, createElementBlock, toDisplayString, createCommentVNode, mergeProps } from "vue";
 /* empty css            */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.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 },
+  components: { DtPresence, DtIcon },
   inheritAttrs: false,
   props: {
     /**
@@ -96,6 +99,13 @@ 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
      */
@@ -126,6 +136,14 @@ 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
@@ -176,19 +194,12 @@ const _sfc_main = {
       AVATAR_ICON_SIZES,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
-      initializing: false,
-      hasSlotContent
+      initializing: false
     };
   },
   computed: {
-    isIconType() {
-      return hasSlotContent(this.$slots.icon);
-    },
-    hasOverlayIcon() {
-      return hasSlotContent(this.$slots.overlayIcon);
-    },
-    iconDataQa() {
-      return "dt-avatar-icon";
+    isNotIconType() {
+      return !this.iconName;
     },
     avatarClasses() {
       return [
@@ -197,7 +208,7 @@ const _sfc_main = {
         this.avatarClass,
         {
           "d-avatar--group": this.showGroup,
-          [`d-avatar--color-${this.getColor()}`]: !this.isIconType,
+          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
           "d-avatar--clickable": this.clickable
         }
       ];
@@ -205,8 +216,7 @@ const _sfc_main = {
     overlayClasses() {
       return [
         "d-avatar__overlay",
-        this.overlayClass,
-        { "d-avatar__overlay-icon": this.hasOverlayIcon }
+        this.overlayClass
       ];
     },
     showGroup() {
@@ -293,17 +303,17 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["src", "alt"];
-const _hoisted_2 = ["aria-label", "data-qa", "role"];
-const _hoisted_3 = {
+const _hoisted_2 = {
   key: 1,
   class: "d-avatar__overlay-text"
 };
-const _hoisted_4 = {
+const _hoisted_3 = {
   key: 1,
   class: "d-avatar__count",
   "data-qa": "dt-avatar-count"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_presence = resolveComponent("dt-presence");
   return openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "div"), {
     id: $props.id,
@@ -327,28 +337,29 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "data-qa": "dt-avatar-image",
           src: $props.imageSrc,
           alt: $props.imageAlt
-        }, null, 8, _hoisted_1)) : $options.isIconType ? (openBlock(), createElementBlock("div", {
+        }, null, 8, _hoisted_1)) : $props.iconName ? (openBlock(), createBlock(_component_dt_icon, {
           key: 1,
+          name: $props.iconName,
+          "aria-label": $props.iconAriaLabel,
+          size: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size],
           class: normalizeClass([$props.iconClass, $data.AVATAR_KIND_MODIFIERS.icon]),
-          "aria-label": $props.clickable ? $props.iconAriaLabel : "",
-          "data-qa": $options.iconDataQa,
-          role: $props.clickable ? "button" : ""
-        }, [
-          renderSlot(_ctx.$slots, "icon", {
-            iconSize: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size]
-          })
-        ], 10, _hoisted_2)) : (openBlock(), createElementBlock("span", {
+          "data-qa": "dt-avatar-icon"
+        }, null, 8, ["name", "aria-label", "size", "class"])) : (openBlock(), createElementBlock("span", {
           key: 2,
           class: normalizeClass([$data.AVATAR_KIND_MODIFIERS.initials])
         }, toDisplayString($data.formattedInitials), 3))
       ], 2),
-      $options.hasOverlayIcon || $props.overlayText ? (openBlock(), createElementBlock("div", {
+      $props.overlayIcon || $props.overlayText ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: normalizeClass($options.overlayClasses)
       }, [
-        $options.hasOverlayIcon ? renderSlot(_ctx.$slots, "overlayIcon", { key: 0 }) : $props.overlayText ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString($props.overlayText), 1)) : createCommentVNode("", true)
+        $props.overlayIcon ? (openBlock(), createBlock(_component_dt_icon, {
+          key: 0,
+          class: "d-avatar__overlay-icon",
+          name: $props.overlayIcon
+        }, null, 8, ["name"])) : $props.overlayText ? (openBlock(), createElementBlock("p", _hoisted_2, toDisplayString($props.overlayText), 1)) : createCommentVNode("", true)
       ], 2)) : createCommentVNode("", true),
-      $options.showGroup ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString($options.formattedGroup), 1)) : createCommentVNode("", true),
+      $options.showGroup ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString($options.formattedGroup), 1)) : createCommentVNode("", true),
       $props.presence && !$options.showGroup ? (openBlock(), createBlock(_component_dt_presence, mergeProps({
         key: 2,
         presence: $props.presence,
@@ -358,7 +369,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]
       }, $props.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : createCommentVNode("", true)
     ]),
-    _: 3
+    _: 1
   }, 8, ["id", "class", "onClick"]);
 }
 const DtAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/dist/vue3/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 <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, hasSlotContent } 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 hasSlotContent,\n };\n },\n\n computed: {\n isIconType () {\n return hasSlotContent(this.$slots.icon);\n },\n\n hasOverlayIcon () {\n return hasSlotContent(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":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_renderSlot","_toDisplayString","_mergeProps"],"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 <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":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_toDisplayString","_mergeProps"],"mappings":"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"}

package/dist/vue3/components/badge/badge.vue.cjs CHANGED Viewed

@@ -1,20 +1,30 @@
 "use strict";
 const badge_constants = require("./badge_constants.cjs");
-const common_utils = require("../../common/utils.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
-const icon_constants = require("../icon/icon_constants.cjs");
+const icon = require("../icon/icon.vue.cjs");
 const _sfc_main = {
   name: "DtBadge",
+  components: {
+    DtIcon: icon
+  },
   props: {
     /**
-     * The size of the left and right icons.
-     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon
+     * will automatically be shown here, but this can be overridden by setting this prop.
      */
-    iconSize: {
+    iconLeft: {
       type: String,
-      default: "200",
-      validator: (s) => Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(s)
+      default: ""
+    },
+    /**
+     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at
+     * https://dialtone.dialpad.com/components/icon.html#icon-catalog
+     */
+    iconRight: {
+      type: String,
+      default: ""
     },
     /**
      * Text for the badge content
@@ -43,7 +53,7 @@ const _sfc_main = {
     },
     /**
      * Decoration for the badge. This can be only used with kind: label and type: default
-     * with no left and right icons
+     * with no iconLeft and iconRight
      * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,
      * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,
      * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400
@@ -84,18 +94,18 @@ const _sfc_main = {
     };
   },
   computed: {
-    hasLeftIcon() {
-      return common_utils.hasSlotContent(this.$slots.leftIcon);
-    },
-    hasRightIcon() {
-      return common_utils.hasSlotContent(this.$slots.rightIcon);
-    },
     hasIcons() {
-      return this.hasLeftIcon || this.hasRightIcon;
+      return this.iconLeft !== "" || this.iconRight !== "";
     }
   },
-  updated() {
-    this.validateProps();
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.validateProps();
+      }
+    }
   },
   methods: {
     validateProps() {
@@ -116,7 +126,7 @@ const _sfc_main = {
         console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.");
       }
       if (this.hasIcons) {
-        console.error("DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.");
+        console.error("DtBadge error: decoration prop cannot be used with iconLeft or iconRight.");
       }
     }
   }
@@ -134,6 +144,7 @@ const _hoisted_3 = {
   class: "d-badge__icon-right"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
   return vue.openBlock(), vue.createElementBlock("span", {
     class: vue.normalizeClass([
       "d-badge",
@@ -146,8 +157,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-badge"
   }, [
     $props.decoration ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1)) : vue.createCommentVNode("", true),
-    $options.hasLeftIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
-      vue.renderSlot(_ctx.$slots, "leftIcon", { iconSize: $props.iconSize })
+    $props.iconLeft ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
+      vue.createVNode(_component_dt_icon, {
+        name: $props.iconLeft,
+        size: "200"
+      }, null, 8, ["name"])
     ])) : vue.createCommentVNode("", true),
     vue.createElementVNode("span", {
       class: vue.normalizeClass(["d-badge__label", $props.labelClass])
@@ -156,8 +170,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         vue.createTextVNode(vue.toDisplayString($props.text), 1)
       ])
     ], 2),
-    $options.hasRightIcon ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
-      vue.renderSlot(_ctx.$slots, "rightIcon", { iconSize: $props.iconSize })
+    $props.iconRight ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
+      vue.createVNode(_component_dt_icon, {
+        name: $props.iconRight,
+        size: "200"
+      }, null, 8, ["name"])
     ])) : vue.createCommentVNode("", true)
   ], 2);
 }