@dialpad/dialtone-vue 3.218.2 → 3.218.4

package/dist/lib/avatar/avatar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../common/utils/index.cjs"),s=require("./avatar-constants.cjs"),o=require("../icon/icon-constants.cjs"),c=require("./utils.cjs"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../presence/presence.cjs"),m={compatConfig:{MODE:3},name:"DtAvatar",components:{DtPresence:u.default},inheritAttrs:!1,props:{id:{type:String,default(){return l.getUniqueString()}},seed:{type:String,default:void 0},color:{type:String,default:void 0},size:{type:String,default:"md",validator:t=>Object.keys(s.AVATAR_SIZE_MODIFIERS).includes(t)},avatarClass:{type:[String,Array,Object],default:""},canvasClass:{type:[String,Array,Object],default:""},iconClass:{type:[String,Array,Object],default:""},presence:{type:String,default:s.AVATAR_PRESENCE_STATES.NONE,validator:t=>Object.values(s.AVATAR_PRESENCE_STATES).includes(t)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:t=>s.AVATAR_GROUP_VALIDATOR(t)},overlayText:{type:String,default:""},overlayClass:{type:[String,Array,Object],default:""},imageSrc:{type:String,default:""},imageAlt:{type:String,default:void 0},iconSize:{type:String,default:"",validator:t=>!t||Object.keys(o.ICON_SIZE_MODIFIERS).includes(t)},fullName:{type:String,default:""},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0}},emits:["click"],data(){return{AVATAR_SIZE_MODIFIERS:s.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:s.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:s.AVATAR_PRESENCE_SIZE_MODIFIERS,AVATAR_ICON_SIZES:s.AVATAR_ICON_SIZES,imageLoadedSuccessfully:null,formattedInitials:"",initializing:!1,hasSlotContent:l.hasSlotContent}},computed:{hasOverlayIcon(){return l.hasSlotContent(this.$slots.overlayIcon)},iconDataQa(){return"dt-avatar-icon"},avatarClasses(){return["d-avatar",this.$attrs.class,s.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,"d-avatar--group-digits-2":this.showGroup&&this.group>9&&this.group<100,"d-avatar--group-digits-3":this.showGroup&&this.group>99,[`d-avatar--color-${this.getColor()}`]:!this.isIconType(),"d-avatar--clickable":this.clickable,"d-avatar--presence":this.presence&&!this.showGroup}]},overlayClasses(){return["d-avatar__overlay",this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return s.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){return this.group>99?"99+":this.group},validatedSize(){return this.group?"xs":this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(t){this.imageLoadedSuccessfully=null,t&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners()},methods:{isIconType(){return l.hasSlotContent(this.$slots.icon)},async setImageListeners(){await this.$nextTick();const t=this.$refs.avatarImage;t&&(t.addEventListener("load",()=>this._loadedImageEventHandler(t),{once:!0}),t.addEventListener("error",()=>this._erroredImageEventHandler(t),{once:!0}))},formatInitials(){const t=c.extractInitialsFromName(this.fullName);this.validatedSize==="xs"?this.formattedInitials="":this.validatedSize==="sm"?this.formattedInitials=t[0]:this.formattedInitials=t},getColor(){return this.color??l.getRandomElement(s.AVATAR_RANDOM_COLORS,this.seed)},_loadedImageEventHandler(t){this.imageLoadedSuccessfully=!0,t.classList.remove("d-d-none")},_erroredImageEventHandler(t){this.imageLoadedSuccessfully=!1,t.classList.add("d-d-none")},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error('image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby')},handleClick(t){this.clickable&&this.$emit("click",t)}}},_=["src","alt"],h=["aria-label","data-qa","role"],S={key:1,class:"d-avatar__overlay-text"},v={key:1,class:"d-avatar__count","data-qa":"dt-avatar-count"};function g(t,I,a,y,i,r){const n=e.resolveComponent("dt-presence");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.clickable?"button":"div"),{id:a.id,class:e.normalizeClass(r.avatarClasses),style:e.normalizeStyle(t.$attrs.style),"data-qa":"dt-avatar",onClick:r.handleClick},{default:e.withCtx(()=>[e.createElementVNode("div",{ref:"canvas",class:e.normalizeClass([a.canvasClass,"d-avatar__canvas",{"d-avatar--image-loaded":i.imageLoadedSuccessfully}])},[r.showImage?(e.openBlock(),e.createElementBlock("img",{key:0,ref:"avatarImage",class:"d-avatar__image","data-qa":"dt-avatar-image",src:a.imageSrc,alt:a.imageAlt},null,8,_)):r.isIconType()?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([a.iconClass,i.AVATAR_KIND_MODIFIERS.icon]),"aria-label":a.clickable?a.iconAriaLabel:"","data-qa":r.iconDataQa,role:a.clickable?"button":""},[e.renderSlot(t.$slots,"icon",{iconSize:a.iconSize||i.AVATAR_ICON_SIZES[a.size]})],10,h)):(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass([i.AVATAR_KIND_MODIFIERS.initials])},e.toDisplayString(i.formattedInitials),3))],2),r.hasOverlayIcon||a.overlayText?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(r.overlayClasses)},[r.hasOverlayIcon?e.renderSlot(t.$slots,"overlayIcon",{key:0}):a.overlayText?(e.openBlock(),e.createElementBlock("p",S,e.toDisplayString(a.overlayText),1)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),r.showGroup?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(r.formattedGroup),1)):e.createCommentVNode("",!0),a.presence&&!r.showGroup?(e.openBlock(),e.createBlock(n,e.mergeProps({key:2,presence:a.presence,class:["d-avatar__presence",i.AVATAR_PRESENCE_SIZE_MODIFIERS[a.size]]},a.presenceProps,{"data-qa":"dt-presence"}),null,16,["presence","class"])):e.createCommentVNode("",!0)]),_:3},8,["id","class","style","onClick"])}const A=d._(m,[["render",g]]);exports.default=A;
-//# sourceMappingURL=avatar.cjs.map
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../presence/presence.cjs`),r=require(`./avatar-constants.cjs`),i=require(`../icon/icon-constants.cjs`),a=require(`./utils.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtAvatar`,components:{DtPresence:n.default},inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},seed:{type:String,default:void 0},color:{type:String,default:void 0},size:{type:String,default:`md`,validator:e=>Object.keys(r.AVATAR_SIZE_MODIFIERS).includes(e)},avatarClass:{type:[String,Array,Object],default:``},canvasClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},presence:{type:String,default:r.AVATAR_PRESENCE_STATES.NONE,validator:e=>Object.values(r.AVATAR_PRESENCE_STATES).includes(e)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:e=>r.AVATAR_GROUP_VALIDATOR(e)},overlayText:{type:String,default:``},overlayClass:{type:[String,Array,Object],default:``},imageSrc:{type:String,default:``},imageAlt:{type:String,default:void 0},iconSize:{type:String,default:``,validator:e=>!e||Object.keys(i.ICON_SIZE_MODIFIERS).includes(e)},fullName:{type:String,default:``},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0}},emits:[`click`],data(){return{AVATAR_SIZE_MODIFIERS:r.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:r.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:r.AVATAR_PRESENCE_SIZE_MODIFIERS,AVATAR_ICON_SIZES:r.AVATAR_ICON_SIZES,imageLoadedSuccessfully:null,formattedInitials:``,initializing:!1,hasSlotContent:e.hasSlotContent}},computed:{hasOverlayIcon(){return e.hasSlotContent(this.$slots.overlayIcon)},iconDataQa(){return`dt-avatar-icon`},avatarClasses(){return[`d-avatar`,this.$attrs.class,r.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,"d-avatar--group-digits-2":this.showGroup&&this.group>9&&this.group<100,"d-avatar--group-digits-3":this.showGroup&&this.group>99,[`d-avatar--color-${this.getColor()}`]:!this.isIconType(),"d-avatar--clickable":this.clickable,"d-avatar--presence":this.presence&&!this.showGroup}]},overlayClasses(){return[`d-avatar__overlay`,this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return r.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){return this.group>99?`99+`:this.group},validatedSize(){return this.group?`xs`:this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(e){this.imageLoadedSuccessfully=null,e&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners()},methods:{isIconType(){return e.hasSlotContent(this.$slots.icon)},async setImageListeners(){await this.$nextTick();let e=this.$refs.avatarImage;e&&(e.addEventListener(`load`,()=>this._loadedImageEventHandler(e),{once:!0}),e.addEventListener(`error`,()=>this._erroredImageEventHandler(e),{once:!0}))},formatInitials(){let e=a.extractInitialsFromName(this.fullName);this.validatedSize===`xs`?this.formattedInitials=``:this.validatedSize===`sm`?this.formattedInitials=e[0]:this.formattedInitials=e},getColor(){return this.color??e.getRandomElement(r.AVATAR_RANDOM_COLORS,this.seed)},_loadedImageEventHandler(e){this.imageLoadedSuccessfully=!0,e.classList.remove(`d-d-none`)},_erroredImageEventHandler(e){this.imageLoadedSuccessfully=!1,e.classList.add(`d-d-none`)},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error(`image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby`)},handleClick(e){this.clickable&&this.$emit(`click`,e)}}},c=[`src`,`alt`],l=[`aria-label`,`data-qa`,`role`],u={key:1,class:`d-avatar__overlay-text`},d={key:1,class:`d-avatar__count`,"data-qa":`dt-avatar-count`};function f(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-presence`);return(0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(n.clickable?`button`:`div`),{id:n.id,class:(0,o.normalizeClass)(a.avatarClasses),style:(0,o.normalizeStyle)(e.$attrs.style),"data-qa":`dt-avatar`,onClick:a.handleClick},{default:(0,o.withCtx)(()=>[(0,o.createElementVNode)(`div`,{ref:`canvas`,class:(0,o.normalizeClass)([n.canvasClass,`d-avatar__canvas`,{"d-avatar--image-loaded":i.imageLoadedSuccessfully}])},[a.showImage?((0,o.openBlock)(),(0,o.createElementBlock)(`img`,{key:0,ref:`avatarImage`,class:`d-avatar__image`,"data-qa":`dt-avatar-image`,src:n.imageSrc,alt:n.imageAlt},null,8,c)):a.isIconType()?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:1,class:(0,o.normalizeClass)([n.iconClass,i.AVATAR_KIND_MODIFIERS.icon]),"aria-label":n.clickable?n.iconAriaLabel:``,"data-qa":a.iconDataQa,role:n.clickable?`button`:``},[(0,o.renderSlot)(e.$slots,`icon`,{iconSize:n.iconSize||i.AVATAR_ICON_SIZES[n.size]})],10,l)):((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:2,class:(0,o.normalizeClass)([i.AVATAR_KIND_MODIFIERS.initials])},(0,o.toDisplayString)(i.formattedInitials),3))],2),a.hasOverlayIcon||n.overlayText?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,class:(0,o.normalizeClass)(a.overlayClasses)},[a.hasOverlayIcon?(0,o.renderSlot)(e.$slots,`overlayIcon`,{key:0}):n.overlayText?((0,o.openBlock)(),(0,o.createElementBlock)(`p`,u,(0,o.toDisplayString)(n.overlayText),1)):(0,o.createCommentVNode)(``,!0)],2)):(0,o.createCommentVNode)(``,!0),a.showGroup?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,d,(0,o.toDisplayString)(a.formattedGroup),1)):(0,o.createCommentVNode)(``,!0),n.presence&&!a.showGroup?((0,o.openBlock)(),(0,o.createBlock)(s,(0,o.mergeProps)({key:2,presence:n.presence,class:[`d-avatar__presence`,i.AVATAR_PRESENCE_SIZE_MODIFIERS[n.size]]},n.presenceProps,{"data-qa":`dt-presence`}),null,16,[`presence`,`class`])):(0,o.createCommentVNode)(``,!0)]),_:3},8,[`id`,`class`,`style`,`onClick`])}var p=t.t(s,[[`render`,f]]);exports.default=p;
+//# sourceMappingURL=avatar.cjs.map

package/dist/lib/avatar/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\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  compatConfig: { MODE: 3 },\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    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        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && this.group > 9 && this.group < 100,\n          'd-avatar--group-digits-3': this.showGroup && this.group > 99,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n          'd-avatar--presence': this.presence && !this.showGroup,\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    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\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"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","e","_openBlock","_createBlock","_resolveDynamicComponent","$props","$options","_normalizeStyle","_ctx","_createElementVNode","_normalizeClass","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_hoisted_4","_component_dt_presence","_mergeProps"],"mappings":"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"}
+{"version":3,"file":"avatar.cjs","names":[],"sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\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  compatConfig: { MODE: 3 },\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    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        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          'd-avatar--group-digits-2': this.showGroup && this.group > 9 && this.group < 100,\n          'd-avatar--group-digits-3': this.showGroup && this.group > 99,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n          'd-avatar--presence': this.presence && !this.showGroup,\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    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\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"],"mappings":"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"}