@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/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  '000',\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\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\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_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","const iconNames = require('@dialpad/dialtone-icons/icons.json');\nconst illustrationNames = require('@dialpad/dialtone-icons/illustrations.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 {object} args storybook control args\n * @param {component} templateComponent vue component template for rendering to storybook.\n *                                      Note this should not be the component itself,\n *                                      but rather the usage of that component.\n * @returns {component} the template component with props and args added.\n */\nexport const createTemplateFromVueFile = (args, argTypes, templateComponent) => ({\n  components: { templateComponent },\n  setup () {\n    return { args };\n  },\n  template: '<template-component v-bind=\"args\"></template-component>',\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\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIllustrationNames () {\n  return [undefined, ...illustrationNames];\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  createTemplateFromVueFile,\n  getIllustrationNames,\n  getIconNames,\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_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":["AVATAR_SIZE_MODIFIERS","xs","sm","md","lg","xl","AVATAR_KIND_MODIFIERS","default","icon","initials","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","NONE","BUSY","AWAY","OFFLINE","ACTIVE","AVATAR_ICON_SIZES","AVATAR_COLORS","AVATAR_RANDOM_COLORS","slice","AVATAR_GROUP_VALIDATOR","group","iconNames","vitePluginRequire_1723767262026_94991400","getIconNames","undefined","extractInitialsFromName","fullName","trim","names","split","length","join","substring","filter","_","index","map","name","toUpperCase","ICONS_LIST","_sfc_main","components","DtPresence","DtIcon","inheritAttrs","props","id","type","String","getUniqueString","seed","color","size","validator","Object","keys","includes","avatarClass","Array","canvasClass","iconClass","presence","state","values","presenceProps","Number","overlayIcon","overlayText","overlayClass","imageSrc","imageAlt","iconName","iconSize","ICON_SIZE_MODIFIERS","clickable","Boolean","iconAriaLabel","emits","data","imageLoadedSuccessfully","formattedInitials","initializing","computed","isNotIconType","avatarClasses","validatedSize","showGroup","getColor","overlayClasses","formattedGroup","showImage","watch","immediate","handler","formatInitials","newSrc","validateProps","setImageListeners","mounted","methods","$nextTick","el","$refs","avatarImage","addEventListener","_loadedImageEventHandler","once","_erroredImageEventHandler","getRandomElement","classList","remove","add","console","error","handleClick","e","$emit","class","_openBlock","_createBlock","_resolveDynamicComponent","$props","$options","onClick","_createElementVNode","ref","_normalizeClass","$data","_createElementBlock","src","alt","_component_dt_icon","_hoisted_2","_toDisplayString","_hoisted_3","_component_dt_presence","_mergeProps"],"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  '000',\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\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\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_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","import iconNames from '@dialpad/dialtone-icons/icons.json' with { type: 'json' };\nimport illustrationNames from '@dialpad/dialtone-icons/illustrations.json' with { type: '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 {object} args storybook control args\n * @param {component} templateComponent vue component template for rendering to storybook.\n *                                      Note this should not be the component itself,\n *                                      but rather the usage of that component.\n * @returns {component} the template component with props and args added.\n */\nexport const createTemplateFromVueFile = (args, argTypes, templateComponent) => ({\n  components: { templateComponent },\n  setup () {\n    return { args };\n  },\n  template: '<template-component v-bind=\"args\"></template-component>',\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\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIllustrationNames () {\n  return [undefined, ...illustrationNames];\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  createTemplateFromVueFile,\n  getIllustrationNames,\n  getIconNames,\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_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":["DtPresence","DtIcon","getUniqueString","ICON_SIZE_MODIFIERS","getRandomElement","_openBlock","_createBlock","_resolveDynamicComponent","_createElementVNode","_normalizeClass","_createElementBlock","_toDisplayString","_mergeProps"],"mappings":"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"}

package/dist/vue3/lib/avatar.js

@@ -1,6 +1,6 @@
 import { getUniqueString, getRandomElement } from "../common/utils.js";
-import vitePluginRequire_1723767260654_98826691 from "@dialpad/dialtone-icons/icons.json";
-import { ICON_SIZE_MODIFIERS } from "../chunks/icon_constants-gIQj4mf7.js";
+import iconNames from "@dialpad/dialtone-icons/icons.json";
+import { ICON_SIZE_MODIFIERS } from "../chunks/icon_constants-Dy4MEUJL.js";
 import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementVNode, createElementBlock, toDisplayString, createCommentVNode, mergeProps } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtPresence } from "./presence.js";
@@ -37,10 +37,29 @@ const AVATAR_ICON_SIZES = {
   lg: "500",
   xl: "600"
 };
-const AVATAR_COLORS = ["000", "100", "200", "300", "400", "500", "600", "700", "800", "900", "1000", "1100", "1200", "1300", "1400", "1500", "1600", "1700", "1800"];
+const AVATAR_COLORS = [
+  "000",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "700",
+  "800",
+  "900",
+  "1000",
+  "1100",
+  "1200",
+  "1300",
+  "1400",
+  "1500",
+  "1600",
+  "1700",
+  "1800"
+];
 const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);
 const AVATAR_GROUP_VALIDATOR = (group) => group > 1;
-const iconNames = vitePluginRequire_1723767260654_98826691;
 function getIconNames() {
   return [void 0, ...iconNames];
 }
@@ -53,10 +72,7 @@ const extractInitialsFromName = (fullName) => {
 const ICONS_LIST = getIconNames();
 const _sfc_main = {
   name: "DtAvatar",
-  components: {
-    DtPresence,
-    DtIcon
-  },
+  components: { DtPresence, DtIcon },
   inheritAttrs: false,
   props: {
     /**
@@ -247,14 +263,22 @@ const _sfc_main = {
       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
-      }];
+      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];
+      return [
+        "d-avatar__overlay",
+        this.overlayClass
+      ];
     },
     showGroup() {
       return AVATAR_GROUP_VALIDATOR(this.group);
@@ -306,12 +330,8 @@ const _sfc_main = {
       const el = this.$refs.avatarImage;
       if (!el)
         return;
-      el.addEventListener("load", () => this._loadedImageEventHandler(el), {
-        once: true
-      });
-      el.addEventListener("error", () => this._erroredImageEventHandler(el), {
-        once: true
-      });
+      el.addEventListener("load", () => this._loadedImageEventHandler(el), { once: true });
+      el.addEventListener("error", () => this._erroredImageEventHandler(el), { once: true });
     },
     formatInitials() {
       const initials = extractInitialsFromName(this.fullName);
@@ -365,42 +385,54 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-avatar",
     onClick: $options.handleClick
   }, {
-    default: withCtx(() => [createElementVNode("div", {
-      ref: "canvas",
-      class: normalizeClass([$props.canvasClass, "d-avatar__canvas", {
-        "d-avatar--image-loaded": $data.imageLoadedSuccessfully
-      }])
-    }, [$options.showImage ? (openBlock(), createElementBlock("img", {
-      key: 0,
-      ref: "avatarImage",
-      class: "d-avatar__image",
-      "data-qa": "dt-avatar-image",
-      src: $props.imageSrc,
-      alt: $props.imageAlt
-    }, 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]),
-      "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), $props.overlayIcon || $props.overlayText ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass($options.overlayClasses)
-    }, [$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_3, toDisplayString($options.formattedGroup), 1)) : createCommentVNode("", true), $props.presence && !$options.showGroup ? (openBlock(), createBlock(_component_dt_presence, mergeProps({
-      key: 2,
-      presence: $props.presence,
-      class: ["d-avatar__presence", $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]]
-    }, $props.presenceProps, {
-      "data-qa": "dt-presence"
-    }), null, 16, ["presence", "class"])) : createCommentVNode("", true)]),
+    default: withCtx(() => [
+      createElementVNode("div", {
+        ref: "canvas",
+        class: normalizeClass([
+          $props.canvasClass,
+          "d-avatar__canvas",
+          { "d-avatar--image-loaded": $data.imageLoadedSuccessfully }
+        ])
+      }, [
+        $options.showImage ? (openBlock(), createElementBlock("img", {
+          key: 0,
+          ref: "avatarImage",
+          class: "d-avatar__image",
+          "data-qa": "dt-avatar-image",
+          src: $props.imageSrc,
+          alt: $props.imageAlt
+        }, 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]),
+          "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),
+      $props.overlayIcon || $props.overlayText ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass($options.overlayClasses)
+      }, [
+        $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_3, toDisplayString($options.formattedGroup), 1)) : createCommentVNode("", true),
+      $props.presence && !$options.showGroup ? (openBlock(), createBlock(_component_dt_presence, mergeProps({
+        key: 2,
+        presence: $props.presence,
+        class: [
+          "d-avatar__presence",
+          $data.AVATAR_PRESENCE_SIZE_MODIFIERS[$props.size]
+        ]
+      }, $props.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : createCommentVNode("", true)
+    ]),
     _: 1
   }, 8, ["id", "class", "onClick"]);
 }

package/dist/vue3/lib/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","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  '000',\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\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\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_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","const iconNames = require('@dialpad/dialtone-icons/icons.json');\nconst illustrationNames = require('@dialpad/dialtone-icons/illustrations.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 {object} args storybook control args\n * @param {component} templateComponent vue component template for rendering to storybook.\n *                                      Note this should not be the component itself,\n *                                      but rather the usage of that component.\n * @returns {component} the template component with props and args added.\n */\nexport const createTemplateFromVueFile = (args, argTypes, templateComponent) => ({\n  components: { templateComponent },\n  setup () {\n    return { args };\n  },\n  template: '<template-component v-bind=\"args\"></template-component>',\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\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIllustrationNames () {\n  return [undefined, ...illustrationNames];\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  createTemplateFromVueFile,\n  getIllustrationNames,\n  getIconNames,\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_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":["AVATAR_SIZE_MODIFIERS","xs","sm","md","lg","xl","AVATAR_KIND_MODIFIERS","default","icon","initials","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","NONE","BUSY","AWAY","OFFLINE","ACTIVE","AVATAR_ICON_SIZES","AVATAR_COLORS","AVATAR_RANDOM_COLORS","slice","AVATAR_GROUP_VALIDATOR","group","iconNames","vitePluginRequire_1723767262026_94991400","getIconNames","undefined","extractInitialsFromName","fullName","trim","names","split","length","join","substring","filter","_","index","map","name","toUpperCase","ICONS_LIST","_sfc_main","components","DtPresence","DtIcon","inheritAttrs","props","id","type","String","getUniqueString","seed","color","size","validator","Object","keys","includes","avatarClass","Array","canvasClass","iconClass","presence","state","values","presenceProps","Number","overlayIcon","overlayText","overlayClass","imageSrc","imageAlt","iconName","iconSize","ICON_SIZE_MODIFIERS","clickable","Boolean","iconAriaLabel","emits","data","imageLoadedSuccessfully","formattedInitials","initializing","computed","isNotIconType","avatarClasses","validatedSize","showGroup","getColor","overlayClasses","formattedGroup","showImage","watch","immediate","handler","formatInitials","newSrc","validateProps","setImageListeners","mounted","methods","$nextTick","el","$refs","avatarImage","addEventListener","_loadedImageEventHandler","once","_erroredImageEventHandler","getRandomElement","classList","remove","add","console","error","handleClick","e","$emit","class","_openBlock","_createBlock","_resolveDynamicComponent","$props","$options","onClick","_createElementVNode","ref","_normalizeClass","$data","_createElementBlock","src","alt","_component_dt_icon","_hoisted_2","_toDisplayString","_hoisted_3","_component_dt_presence","_mergeProps"],"mappings":"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"}
+{"version":3,"file":"avatar.js","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  '000',\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\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\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_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","import iconNames from '@dialpad/dialtone-icons/icons.json' with { type: 'json' };\nimport illustrationNames from '@dialpad/dialtone-icons/illustrations.json' with { type: '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 {object} args storybook control args\n * @param {component} templateComponent vue component template for rendering to storybook.\n *                                      Note this should not be the component itself,\n *                                      but rather the usage of that component.\n * @returns {component} the template component with props and args added.\n */\nexport const createTemplateFromVueFile = (args, argTypes, templateComponent) => ({\n  components: { templateComponent },\n  setup () {\n    return { args };\n  },\n  template: '<template-component v-bind=\"args\"></template-component>',\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\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIllustrationNames () {\n  return [undefined, ...illustrationNames];\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  createTemplateFromVueFile,\n  getIllustrationNames,\n  getIconNames,\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_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/lib/badge.cjs

@@ -4,7 +4,7 @@ const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const lib_icon = require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 const BADGE_TYPE_MODIFIERS = {
   default: "",
@@ -187,21 +187,37 @@ const _hoisted_3 = {
 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", $data.BADGE_TYPE_MODIFIERS[$props.type], $data.BADGE_KIND_MODIFIERS[$props.kind], $data.BADGE_DECORATION_MODIFIERS[$props.decoration], {
-      "d-badge--subtle": $props.subtle
-    }, {
-      "d-badge--outlined": $props.outlined
-    }]),
+    class: vue.normalizeClass([
+      "d-badge",
+      $data.BADGE_TYPE_MODIFIERS[$props.type],
+      $data.BADGE_KIND_MODIFIERS[$props.kind],
+      $data.BADGE_DECORATION_MODIFIERS[$props.decoration],
+      { "d-badge--subtle": $props.subtle },
+      { "d-badge--outlined": $props.outlined }
+    ]),
     "data-qa": "dt-badge"
-  }, [$props.decoration ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1)) : vue.createCommentVNode("", true), $props.iconLeft || $props.type === "ai" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [vue.createVNode(_component_dt_icon, {
-    name: $props.iconLeft || "dialpad-ai",
-    size: "200"
-  }, null, 8, ["name"])])) : vue.createCommentVNode("", true), vue.createElementVNode("span", {
-    class: vue.normalizeClass(["d-badge__label", $props.labelClass])
-  }, [vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createTextVNode(vue.toDisplayString($props.text), 1)])], 2), $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);
+  }, [
+    $props.decoration ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1)) : vue.createCommentVNode("", true),
+    $props.iconLeft || $props.type === "ai" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
+      vue.createVNode(_component_dt_icon, {
+        name: $props.iconLeft || "dialpad-ai",
+        size: "200"
+      }, null, 8, ["name"])
+    ])) : vue.createCommentVNode("", true),
+    vue.createElementVNode("span", {
+      class: vue.normalizeClass(["d-badge__label", $props.labelClass])
+    }, [
+      vue.renderSlot(_ctx.$slots, "default", {}, () => [
+        vue.createTextVNode(vue.toDisplayString($props.text), 1)
+      ])
+    ], 2),
+    $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);
 }
 const DtBadge = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.BADGE_DECORATION_MODIFIERS = BADGE_DECORATION_MODIFIERS;

package/dist/vue3/lib/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","sources":["../../components/badge/badge_constants.js","../../components/badge/badge.vue"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n  default: '',\n  info: 'd-badge--info',\n  success: 'd-badge--success',\n  warning: 'd-badge--warning',\n  critical: 'd-badge--critical',\n  bulletin: 'd-badge--bulletin',\n  ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n  label: '',\n  count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n  'black-400': 'd-badge--decorate-black-400',\n  'black-500': 'd-badge--decorate-black-500',\n  'black-900': 'd-badge--decorate-black-900',\n  'red-200': 'd-badge--decorate-red-200',\n  'red-300': 'd-badge--decorate-red-300',\n  'red-400': 'd-badge--decorate-red-400',\n  'purple-200': 'd-badge--decorate-purple-200',\n  'purple-300': 'd-badge--decorate-purple-300',\n  'purple-400': 'd-badge--decorate-purple-400',\n  'purple-500': 'd-badge--decorate-purple-500',\n  'blue-200': 'd-badge--decorate-blue-200',\n  'blue-300': 'd-badge--decorate-blue-300',\n  'blue-400': 'd-badge--decorate-blue-400',\n  'green-300': 'd-badge--decorate-green-300',\n  'green-400': 'd-badge--decorate-green-400',\n  'green-500': 'd-badge--decorate-green-500',\n  'gold-300': 'd-badge--decorate-gold-300',\n  'gold-400': 'd-badge--decorate-gold-400',\n  'gold-500': 'd-badge--decorate-gold-500',\n  'magenta-200': 'd-badge--decorate-magenta-200',\n  'magenta-300': 'd-badge--decorate-magenta-300',\n  'magenta-400': 'd-badge--decorate-magenta-400',\n};\n","<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"iconLeft || type === 'ai'\"\n      class=\"d-badge__icon-left\"\n    >\n      <dt-icon\n        :name=\"iconLeft || 'dialpad-ai'\"\n        size=\"200\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"iconRight\"\n      class=\"d-badge__icon-right\"\n    >\n      <dt-icon\n        :name=\"iconRight\"\n        size=\"200\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon\n     * will automatically be shown here, but this can be overridden by setting this prop.\n     */\n    iconLeft: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog\n     */\n    iconRight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no iconLeft and iconRight\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasIcons () {\n      return this.iconLeft !== '' || this.iconRight !== '';\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with iconLeft or iconRight.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["BADGE_TYPE_MODIFIERS","default","info","success","warning","critical","bulletin","ai","BADGE_KIND_MODIFIERS","label","count","BADGE_DECORATION_MODIFIERS","_sfc_main","name","components","DtIcon","props","iconLeft","type","String","iconRight","text","kind","validator","Object","keys","includes","decoration","undefined","labelClass","Array","subtle","Boolean","outlined","data","computed","hasIcons","watch","$props","immediate","deep","handler","validateProps","methods","validateTypePropCombination","validateDecorationPropCombination","console","error","class","_createElementBlock","_normalizeClass","$data","_openBlock","_hoisted_1","_hoisted_2","_createVNode","_component_dt_icon","size","_createElementVNode","_renderSlot","_ctx","_hoisted_3"],"mappings":"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"}
+{"version":3,"file":"badge.cjs","sources":["../../components/badge/badge_constants.js","../../components/badge/badge.vue"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n  default: '',\n  info: 'd-badge--info',\n  success: 'd-badge--success',\n  warning: 'd-badge--warning',\n  critical: 'd-badge--critical',\n  bulletin: 'd-badge--bulletin',\n  ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n  label: '',\n  count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n  'black-400': 'd-badge--decorate-black-400',\n  'black-500': 'd-badge--decorate-black-500',\n  'black-900': 'd-badge--decorate-black-900',\n  'red-200': 'd-badge--decorate-red-200',\n  'red-300': 'd-badge--decorate-red-300',\n  'red-400': 'd-badge--decorate-red-400',\n  'purple-200': 'd-badge--decorate-purple-200',\n  'purple-300': 'd-badge--decorate-purple-300',\n  'purple-400': 'd-badge--decorate-purple-400',\n  'purple-500': 'd-badge--decorate-purple-500',\n  'blue-200': 'd-badge--decorate-blue-200',\n  'blue-300': 'd-badge--decorate-blue-300',\n  'blue-400': 'd-badge--decorate-blue-400',\n  'green-300': 'd-badge--decorate-green-300',\n  'green-400': 'd-badge--decorate-green-400',\n  'green-500': 'd-badge--decorate-green-500',\n  'gold-300': 'd-badge--decorate-gold-300',\n  'gold-400': 'd-badge--decorate-gold-400',\n  'gold-500': 'd-badge--decorate-gold-500',\n  'magenta-200': 'd-badge--decorate-magenta-200',\n  'magenta-300': 'd-badge--decorate-magenta-300',\n  'magenta-400': 'd-badge--decorate-magenta-400',\n};\n","<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"iconLeft || type === 'ai'\"\n      class=\"d-badge__icon-left\"\n    >\n      <dt-icon\n        :name=\"iconLeft || 'dialpad-ai'\"\n        size=\"200\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"iconRight\"\n      class=\"d-badge__icon-right\"\n    >\n      <dt-icon\n        :name=\"iconRight\"\n        size=\"200\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  name: 'DtBadge',\n\n  components: {\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Icon on the left side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog. If type:'ai' is set, the ai icon\n     * will automatically be shown here, but this can be overridden by setting this prop.\n     */\n    iconLeft: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Icon on the right side of the badge. Supports any valid icon name from the icon catalog at\n     * https://dialtone.dialpad.com/components/icon.html#icon-catalog\n     */\n    iconRight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no iconLeft and iconRight\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasIcons () {\n      return this.iconLeft !== '' || this.iconRight !== '';\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with iconLeft or iconRight.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtIcon","_createElementBlock","_normalizeClass","_openBlock","_createVNode","_createElementVNode","_renderSlot"],"mappings":"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"}