@dialpad/dialtone 9.29.1 → 9.30.1

package/dist/vue2/lib/avatar.cjs

@@ -1,2 +1,400 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./utils.cjs"),_=require("@dialpad/dialtone-icons/icons.json"),m=require("../chunks/icon_constants-2S_OSQ1t.js"),v=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),g=require("./presence.cjs"),f=require("./icon.cjs");require("./constants.cjs");require("vue");require("@dialpad/dialtone-icons/vue2");const s={xs:"d-avatar--xs",sm:"d-avatar--sm",md:"d-avatar--md",lg:"d-avatar--lg",xl:"d-avatar--xl"},o={default:"",icon:"d-avatar__icon",initials:"d-avatar__initials"},d={md:"d-avatar__presence--md",lg:"d-avatar__presence--lg"},r={NONE:"",BUSY:"busy",AWAY:"away",OFFLINE:"offline",ACTIVE:"active"},c={xs:"100",sm:"200",md:"300",lg:"500",xl:"600"},u=["100","200","300","400","500","600","700","800","900","1000","1100","1200","1300","1400","1500","1600","1700","1800"],i=a=>a>1;function A(){return[void 0,..._]}const p=a=>{if(typeof a!="string"||!a.trim())return"";const e=a.trim().split(/\s+/g);return e.length===1?e.join("").substring(0,2):e.filter((t,n)=>n===0||n===e.length-1).map(t=>t.slice(0,1).toUpperCase()).join("")},S=A(),I={name:"DtAvatar",components:{DtPresence:g.DtPresence,DtIcon:f.DtIcon},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:a=>Object.keys(s).includes(a)},avatarClass:{type:[String,Array,Object],default:""},canvasClass:{type:[String,Array,Object],default:""},iconClass:{type:[String,Array,Object],default:""},presence:{type:String,default:r.NONE,validator:a=>Object.values(r).includes(a)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:a=>i(a)},overlayIcon:{type:String,default:""},overlayText:{type:String,default:""},overlayClass:{type:[String,Array,Object],default:""},imageSrc:{type:String,default:""},imageAlt:{type:String,default:void 0},iconName:{type:String,default:void 0,validator:a=>S.includes(a)},iconSize:{type:String,default:"",validator:a=>!a||Object.keys(m.I).includes(a)},fullName:{type:String,default:""},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0}},emits:["click"],data(){return{AVATAR_SIZE_MODIFIERS:s,AVATAR_KIND_MODIFIERS:o,AVATAR_PRESENCE_SIZE_MODIFIERS:d,AVATAR_ICON_SIZES:c,imageLoadedSuccessfully:null,formattedInitials:"",initializing:!1}},computed:{isNotIconType(){return!this.iconName},avatarClasses(){return["d-avatar",s[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,[`d-avatar--color-${this.getColor()}`]:this.isNotIconType,"d-avatar--clickable":this.clickable}]},overlayClasses(){return["d-avatar__overlay",this.overlayClass]},showGroup(){return i(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(a){this.imageLoadedSuccessfully=null,a&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners()},methods:{async setImageListeners(){await this.$nextTick();const a=this.$refs.avatarImage;a&&(a.addEventListener("load",()=>this._loadedImageEventHandler(a),{once:!0}),a.addEventListener("error",()=>this._erroredImageEventHandler(a),{once:!0}))},formatInitials(){const a=p(this.fullName);this.validatedSize==="xs"?this.formattedInitials="":this.validatedSize==="sm"?this.formattedInitials=a[0]:this.formattedInitials=a},getColor(){return this.color??l.getRandomElement(u,this.seed)},_loadedImageEventHandler(a){this.imageLoadedSuccessfully=!0,a.classList.remove("d-d-none")},_erroredImageEventHandler(a){this.imageLoadedSuccessfully=!1,a.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(a){this.clickable&&this.$emit("click",a)}}};var h=function(){var e=this,t=e._self._c;return t(e.clickable?"button":"div",{tag:"component",class:e.avatarClasses,attrs:{id:e.id,"data-qa":"dt-avatar"},on:{click:e.handleClick}},[t("div",{ref:"canvas",class:[e.canvasClass,"d-avatar__canvas",{"d-avatar--image-loaded":e.imageLoadedSuccessfully}]},[e.showImage?t("img",{ref:"avatarImage",staticClass:"d-avatar__image",attrs:{"data-qa":"dt-avatar-image",src:e.imageSrc,alt:e.imageAlt}}):e.iconName?t("dt-icon",{class:[e.iconClass,e.AVATAR_KIND_MODIFIERS.icon],attrs:{name:e.iconName,"aria-label":e.iconAriaLabel,size:e.iconSize||e.AVATAR_ICON_SIZES[e.size],"data-qa":"dt-avatar-icon"}}):t("span",{class:[e.AVATAR_KIND_MODIFIERS.initials]},[e._v(" "+e._s(e.formattedInitials)+" ")])],1),e.overlayIcon||e.overlayText?t("div",{class:e.overlayClasses},[e.overlayIcon?t("dt-icon",{staticClass:"d-avatar__overlay-icon",attrs:{name:e.overlayIcon}}):e.overlayText?t("p",{staticClass:"d-avatar__overlay-text"},[e._v(" "+e._s(e.overlayText)+" ")]):e._e()],1):e._e(),e.showGroup?t("span",{staticClass:"d-avatar__count",attrs:{"data-qa":"dt-avatar-count"}},[e._v(e._s(e.formattedGroup))]):e._e(),e.presence&&!e.showGroup?t("dt-presence",e._b({class:["d-avatar__presence",e.AVATAR_PRESENCE_SIZE_MODIFIERS[e.size]],attrs:{presence:e.presence,"data-qa":"dt-presence"}},"dt-presence",e.presenceProps,!1)):e._e()],1)},y=[],E=v.n(I,h,y,!1,null,null,null,null);const R=E.exports;exports.AVATAR_COLORS=u;exports.AVATAR_GROUP_VALIDATOR=i;exports.AVATAR_ICON_SIZES=c;exports.AVATAR_KIND_MODIFIERS=o;exports.AVATAR_PRESENCE_SIZE_MODIFIERS=d;exports.AVATAR_PRESENCE_STATES=r;exports.AVATAR_SIZE_MODIFIERS=s;exports.DtAvatar=R;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_utils = require("../common/utils.cjs");
+const iconNames = require("@dialpad/dialtone-icons/icons.json");
+const icon_constants = require("../chunks/icon_constants-QYpmdE0R.js");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_presence = require("./presence.cjs");
+const lib_icon = require("./icon.cjs");
+require("../common/constants.cjs");
+require("vue");
+require("@dialpad/dialtone-icons/vue2");
+const AVATAR_SIZE_MODIFIERS = {
+  xs: "d-avatar--xs",
+  sm: "d-avatar--sm",
+  md: "d-avatar--md",
+  lg: "d-avatar--lg",
+  xl: "d-avatar--xl"
+};
+const AVATAR_KIND_MODIFIERS = {
+  default: "",
+  icon: "d-avatar__icon",
+  initials: "d-avatar__initials"
+};
+const AVATAR_PRESENCE_SIZE_MODIFIERS = {
+  md: "d-avatar__presence--md",
+  lg: "d-avatar__presence--lg"
+};
+const AVATAR_PRESENCE_STATES = {
+  NONE: "",
+  BUSY: "busy",
+  AWAY: "away",
+  OFFLINE: "offline",
+  ACTIVE: "active"
+};
+const AVATAR_ICON_SIZES = {
+  xs: "100",
+  sm: "200",
+  md: "300",
+  lg: "500",
+  xl: "600"
+};
+const AVATAR_COLORS = [
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "1000",
+  "1100",
+  "1200",
+  "1300",
+  "1400",
+  "1500",
+  "1600",
+  "1700",
+  "1800"
+];
+const AVATAR_GROUP_VALIDATOR = (group) => group > 1;
+function getIconNames() {
+  return [void 0, ...iconNames];
+}
+const extractInitialsFromName = (fullName) => {
+  if (typeof fullName !== "string" || !fullName.trim())
+    return "";
+  const names = fullName.trim().split(/\s+/g);
+  return names.length === 1 ? names.join("").substring(0, 2) : names.filter((_, index) => index === 0 || index === names.length - 1).map((name) => name.slice(0, 1).toUpperCase()).join("");
+};
+const ICONS_LIST = getIconNames();
+const _sfc_main = {
+  name: "DtAvatar",
+  components: { DtPresence: lib_presence.DtPresence, DtIcon: lib_icon.DtIcon },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Id of the avatar content wrapper element
+     */
+    id: {
+      type: String,
+      default() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+     * Pass in a seed to get the random color generation based on that string. For example if you pass in a
+     * user ID as the string it will return the same randomly generated colors every time for that user.
+     */
+    seed: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic
+     * if the seed prop is set.
+     */
+    color: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The size of the avatar
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size)
+    },
+    /**
+     * Used to customize the avatar container
+     */
+    avatarClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Set classes on the avatar canvas. Wrapper around the core avatar image.
+     */
+    canvasClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Pass through classes. Used to customize the avatar icon
+     */
+    iconClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
+     */
+    presence: {
+      type: String,
+      default: AVATAR_PRESENCE_STATES.NONE,
+      validator: (state) => {
+        return Object.values(AVATAR_PRESENCE_STATES).includes(state);
+      }
+    },
+    /**
+     * A set of props to be passed into the presence component.
+     */
+    presenceProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Determines whether to show a group avatar.
+     * Limit to 2 digits max, more than 99 will be rendered as “99+”.
+     * if the number is 1 or less it would just show the regular avatar as if group had not been set.
+     */
+    group: {
+      type: Number,
+      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
+     */
+    overlayText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Used to customize the avatar overlay
+     */
+    overlayClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Source of the image
+     */
+    imageSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Alt attribute of the image, required if imageSrc is provided.
+     * Can be set to '' (empty string) if the image is described
+     * in text nearby
+     */
+    imageAlt: {
+      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
+     */
+    iconSize: {
+      type: String,
+      default: "",
+      validator: (size) => !size || Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(size)
+    },
+    /**
+     * Full name used to extract initials.
+     */
+    fullName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Makes the avatar focusable and clickable,
+     * emits a click event when clicked.
+     */
+    clickable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Descriptive label for the icon.
+     * To avoid a11y issues, set this prop if clickable and iconName are set.
+     */
+    iconAriaLabel: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
+    /**
+     * Avatar click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  data() {
+    return {
+      AVATAR_SIZE_MODIFIERS,
+      AVATAR_KIND_MODIFIERS,
+      AVATAR_PRESENCE_SIZE_MODIFIERS,
+      AVATAR_ICON_SIZES,
+      imageLoadedSuccessfully: null,
+      formattedInitials: "",
+      initializing: false
+    };
+  },
+  computed: {
+    isNotIconType() {
+      return !this.iconName;
+    },
+    avatarClasses() {
+      return [
+        "d-avatar",
+        AVATAR_SIZE_MODIFIERS[this.validatedSize],
+        this.avatarClass,
+        {
+          "d-avatar--group": this.showGroup,
+          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
+          "d-avatar--clickable": this.clickable
+        }
+      ];
+    },
+    overlayClasses() {
+      return [
+        "d-avatar__overlay",
+        this.overlayClass
+      ];
+    },
+    showGroup() {
+      return AVATAR_GROUP_VALIDATOR(this.group);
+    },
+    formattedGroup() {
+      return this.group > 99 ? "99+" : this.group;
+    },
+    validatedSize() {
+      return this.group ? "xs" : this.size;
+    },
+    showImage() {
+      return this.imageLoadedSuccessfully !== false && this.imageSrc;
+    }
+  },
+  watch: {
+    fullName: {
+      immediate: true,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    size: {
+      immediate: true,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    group: {
+      immediate: true,
+      handler() {
+        this.formatInitials();
+      }
+    },
+    imageSrc(newSrc) {
+      this.imageLoadedSuccessfully = null;
+      if (!newSrc)
+        return;
+      this.validateProps();
+      this.setImageListeners();
+    }
+  },
+  mounted() {
+    this.validateProps();
+    this.setImageListeners();
+  },
+  methods: {
+    async setImageListeners() {
+      await this.$nextTick();
+      const el = this.$refs.avatarImage;
+      if (!el)
+        return;
+      el.addEventListener("load", () => this._loadedImageEventHandler(el), { once: true });
+      el.addEventListener("error", () => this._erroredImageEventHandler(el), { once: true });
+    },
+    formatInitials() {
+      const initials = extractInitialsFromName(this.fullName);
+      if (this.validatedSize === "xs") {
+        this.formattedInitials = "";
+      } else if (this.validatedSize === "sm") {
+        this.formattedInitials = initials[0];
+      } else {
+        this.formattedInitials = initials;
+      }
+    },
+    getColor() {
+      return this.color ?? common_utils.getRandomElement(AVATAR_COLORS, this.seed);
+    },
+    _loadedImageEventHandler(el) {
+      this.imageLoadedSuccessfully = true;
+      el.classList.remove("d-d-none");
+    },
+    _erroredImageEventHandler(el) {
+      this.imageLoadedSuccessfully = false;
+      el.classList.add("d-d-none");
+    },
+    validateProps() {
+      if (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) {
+      if (!this.clickable)
+        return;
+      this.$emit("click", e);
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c(_vm.clickable ? "button" : "div", { tag: "component", class: _vm.avatarClasses, attrs: { "id": _vm.id, "data-qa": "dt-avatar" }, on: { "click": _vm.handleClick } }, [_c("div", { ref: "canvas", class: [
+    _vm.canvasClass,
+    "d-avatar__canvas",
+    { "d-avatar--image-loaded": _vm.imageLoadedSuccessfully }
+  ] }, [_vm.showImage ? _c("img", { ref: "avatarImage", staticClass: "d-avatar__image", attrs: { "data-qa": "dt-avatar-image", "src": _vm.imageSrc, "alt": _vm.imageAlt } }) : _vm.iconName ? _c("dt-icon", { class: [_vm.iconClass, _vm.AVATAR_KIND_MODIFIERS.icon], attrs: { "name": _vm.iconName, "aria-label": _vm.iconAriaLabel, "size": _vm.iconSize || _vm.AVATAR_ICON_SIZES[_vm.size], "data-qa": "dt-avatar-icon" } }) : _c("span", { class: [_vm.AVATAR_KIND_MODIFIERS.initials] }, [_vm._v(" " + _vm._s(_vm.formattedInitials) + " ")])], 1), _vm.overlayIcon || _vm.overlayText ? _c("div", { class: _vm.overlayClasses }, [_vm.overlayIcon ? _c("dt-icon", { staticClass: "d-avatar__overlay-icon", attrs: { "name": _vm.overlayIcon } }) : _vm.overlayText ? _c("p", { staticClass: "d-avatar__overlay-text" }, [_vm._v(" " + _vm._s(_vm.overlayText) + " ")]) : _vm._e()], 1) : _vm._e(), _vm.showGroup ? _c("span", { staticClass: "d-avatar__count", attrs: { "data-qa": "dt-avatar-count" } }, [_vm._v(_vm._s(_vm.formattedGroup))]) : _vm._e(), _vm.presence && !_vm.showGroup ? _c("dt-presence", _vm._b({ class: [
+    "d-avatar__presence",
+    _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size]
+  ], attrs: { "presence": _vm.presence, "data-qa": "dt-presence" } }, "dt-presence", _vm.presenceProps, false)) : _vm._e()], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtAvatar = __component__.exports;
+exports.AVATAR_COLORS = AVATAR_COLORS;
+exports.AVATAR_GROUP_VALIDATOR = AVATAR_GROUP_VALIDATOR;
+exports.AVATAR_ICON_SIZES = AVATAR_ICON_SIZES;
+exports.AVATAR_KIND_MODIFIERS = AVATAR_KIND_MODIFIERS;
+exports.AVATAR_PRESENCE_SIZE_MODIFIERS = AVATAR_PRESENCE_SIZE_MODIFIERS;
+exports.AVATAR_PRESENCE_STATES = AVATAR_PRESENCE_STATES;
+exports.AVATAR_SIZE_MODIFIERS = AVATAR_SIZE_MODIFIERS;
+exports.DtAvatar = DtAvatar;
 //# sourceMappingURL=avatar.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","sources":["../../components/avatar/avatar_constants.js","../../common/storybook_utils.js","../../components/avatar/utils.js","../../components/avatar/avatar.vue"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","import iconNames from '@dialpad/dialtone-icons/icons.json';\n\n/**\n * Will use a Vue SFC to render the template rather than a template string.\n * This is useful for more complex components that are hard to work with and\n * get messy when rendered via a template string. Will pass args and argTypes\n * into the component, so it is able to be live edited with storybook controls addon.\n * @param component this will get the component name\n * @param defaultTemplate we will mount in this component\n * @param argsData storybook control args\n * @returns {component} the template component with props and args added.\n */\n\nexport function createRenderConfig (component, defaultTemplate, argsData) {\n  return {\n    components: { [component.name]: defaultTemplate },\n    props: [...Object.keys(component.props ?? {}), ...Object.keys(argsData)],\n    setup (props) {\n      return { props };\n    },\n    template: `<${component.name} v-bind=\"props\" />`,\n  };\n}\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIconNames () {\n  return [undefined, ...iconNames];\n}\n\nexport const generateTemplate = (component,\n  { props = [], excludeProps = [], customProps = [], childTemplate } = {}) => {\n  if (!component) {\n    console.warn('Generate template: Please provide a component');\n    return '';\n  }\n\n  const { name, props: componentProps } = component;\n  const finalProps = props.length ? props : Object.keys(componentProps);\n  const normalizedName = name.split(/(?=[A-Z])/).join('-').toLowerCase();\n\n  const startFragment = `<${normalizedName}`;\n\n  const propFragments = finalProps\n    .filter(prop => !excludeProps.includes(prop))\n    .map(prop => `:${prop}=\"${prop}\"`);\n\n  const endFragment = childTemplate ? `>${childTemplate}</${normalizedName}>` : ' />';\n\n  return [startFragment, ...propFragments, ...customProps, endFragment].join(' ');\n};\n\nexport default {\n  generateTemplate,\n  getIconNames,\n  createRenderConfig,\n};\n","export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n","<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_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_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":["AVATAR_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_ICON_SIZES","AVATAR_COLORS","AVATAR_GROUP_VALIDATOR","group","getIconNames","iconNames","extractInitialsFromName","fullName","names","_","index","name","ICONS_LIST","_sfc_main","DtPresence","DtIcon","getUniqueString","size","state","ICON_SIZE_MODIFIERS","newSrc","el","initials","getRandomElement","e"],"mappings":"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"}
+{"version":3,"file":"avatar.cjs","sources":["../../components/avatar/avatar_constants.js","../../common/storybook_utils.js","../../components/avatar/utils.js","../../components/avatar/avatar.vue"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","import iconNames from '@dialpad/dialtone-icons/icons.json';\n\n/**\n * Will use a Vue SFC to render the template rather than a template string.\n * This is useful for more complex components that are hard to work with and\n * get messy when rendered via a template string. Will pass args and argTypes\n * into the component, so it is able to be live edited with storybook controls addon.\n * @param component this will get the component name\n * @param defaultTemplate we will mount in this component\n * @param argsData storybook control args\n * @returns {component} the template component with props and args added.\n */\n\nexport function createRenderConfig (component, defaultTemplate, argsData) {\n  return {\n    components: { [component.name]: defaultTemplate },\n    props: [...Object.keys(component.props ?? {}), ...Object.keys(argsData)],\n    setup (props) {\n      return { props };\n    },\n    template: `<${component.name} v-bind=\"props\" />`,\n  };\n}\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIconNames () {\n  return [undefined, ...iconNames];\n}\n\nexport const generateTemplate = (component,\n  { props = [], excludeProps = [], customProps = [], childTemplate } = {}) => {\n  if (!component) {\n    console.warn('Generate template: Please provide a component');\n    return '';\n  }\n\n  const { name, props: componentProps } = component;\n  const finalProps = props.length ? props : Object.keys(componentProps);\n  const normalizedName = name.split(/(?=[A-Z])/).join('-').toLowerCase();\n\n  const startFragment = `<${normalizedName}`;\n\n  const propFragments = finalProps\n    .filter(prop => !excludeProps.includes(prop))\n    .map(prop => `:${prop}=\"${prop}\"`);\n\n  const endFragment = childTemplate ? `>${childTemplate}</${normalizedName}>` : ' />';\n\n  return [startFragment, ...propFragments, ...customProps, endFragment].join(' ');\n};\n\nexport default {\n  generateTemplate,\n  getIconNames,\n  createRenderConfig,\n};\n","export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n","<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_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_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","DtIcon","getUniqueString","ICON_SIZE_MODIFIERS","getRandomElement"],"mappings":"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"}