@dialpad/dialtone-vue 2.133.0 → 2.135.0

package/dist/dialtone-vue.cjs

@@ -4,7 +4,7 @@ const common_constants = require("./common/constants.cjs");
 const common_validators = require("./common/validators.cjs");
 const common_utils = require("./common/utils.cjs");
 const common_dates = require("./common/dates.cjs");
-const common_emoji = require("./common/emoji.cjs");
+const common_emoji = require("./chunks/index-anN_sx1F.js");
 const input = require("./chunks/input-Axw-wFj2.js");
 const input_group = require("./chunks/input_group-m3cWYUfI.js");
 const keyboard_list_navigation = require("./chunks/keyboard_list_navigation-fJnl_Iox.js");
@@ -29,9 +29,11 @@ const dropdown_constants = require("./chunks/dropdown_constants-2pGCXy7m.js");
 const lib_emoji = require("./lib/emoji.cjs");
 const lib_emojiPicker = require("./lib/emoji-picker.cjs");
 const lib_emojiTextWrapper = require("./lib/emoji-text-wrapper.cjs");
+const lib_emptyState = require("./lib/empty-state.cjs");
 const lib_hovercard = require("./lib/hovercard.cjs");
 const lib_icon = require("./lib/icon.cjs");
 const icon_constants = require("./chunks/icon_constants-QYpmdE0R.js");
+const lib_illustration = require("./lib/illustration.cjs");
 const lib_imageViewer = require("./lib/image-viewer.cjs");
 const lib_input = require("./lib/input.cjs");
 const lib_inputGroup = require("./lib/input-group.cjs");
@@ -39,7 +41,7 @@ const lib_itemLayout = require("./lib/item-layout.cjs");
 const lib_keyboardShortcut = require("./lib/keyboard-shortcut.cjs");
 const lib_lazyShow = require("./lib/lazy-show.cjs");
 const lib_link = require("./lib/link.cjs");
-const link_constants = require("./chunks/link_constants-Huj7D_hm.js");
+const link_constants = require("./chunks/link_constants-x8NwdqmA.js");
 const lib_listItem = require("./lib/list-item.cjs");
 const list_item_constants = require("./chunks/list_item_constants-EiqkqZvP.js");
 const lib_listItemGroup = require("./lib/list-item-group.cjs");
@@ -90,7 +92,6 @@ const lib_unreadPill = require("./lib/unread-pill.cjs");
 const lib_topBannerInfo = require("./lib/top-banner-info.cjs");
 require("vue");
 require("date-fns");
-require("emoji-regex");
 require("emoji-toolkit/emoji_strategy.json");
 require("@dialpad/dialtone-icons/icons.json");
 require("./chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
@@ -98,6 +99,7 @@ require("./chunks/modal-VgxXAQFP.js");
 require("./chunks/sr_only_close_button-ZaGdAHz7.js");
 require("@dialpad/dialtone-emojis");
 require("@dialpad/dialtone-icons/vue2");
+require("@dialpad/dialtone-icons/illustrations.json");
 require("@linusborg/vue-simple-portal");
 require("tippy.js");
 require("@tiptap/vue-2");
@@ -160,6 +162,7 @@ Object.defineProperty(exports, "emojiImageUrlSmall", {
   get: () => common_emoji.emojiImageUrlSmall
 });
 exports.emojiJson = common_emoji.emojiJson;
+exports.emojiRegex = common_emoji.emojiRegex;
 exports.emojiShortCodeRegex = common_emoji.emojiShortCodeRegex;
 exports.emojiVersion = common_emoji.emojiVersion;
 exports.filterValidShortCodes = common_emoji.filterValidShortCodes;
@@ -235,10 +238,14 @@ exports.EMOJIS_PER_ROW = lib_emojiPicker.EMOJIS_PER_ROW;
 exports.EMOJI_PICKER_CATEGORIES = lib_emojiPicker.EMOJI_PICKER_CATEGORIES;
 exports.EMOJI_PICKER_SKIN_TONE_MODIFIERS = lib_emojiPicker.EMOJI_PICKER_SKIN_TONE_MODIFIERS;
 exports.DtEmojiTextWrapper = lib_emojiTextWrapper.DtEmojiTextWrapper;
+exports.DtEmptyState = lib_emptyState.DtEmptyState;
+exports.EMPTY_STATE_SIZE_MODIFIERS = lib_emptyState.EMPTY_STATE_SIZE_MODIFIERS;
 exports.DtHovercard = lib_hovercard.DtHovercard;
 exports.DtIcon = lib_icon.DtIcon;
 exports.ICON_NAMES = icon_constants.ICON_NAMES;
 exports.ICON_SIZE_MODIFIERS = icon_constants.ICON_SIZE_MODIFIERS;
+exports.DtIllustration = lib_illustration.DtIllustration;
+exports.ILLUSTRATION_NAMES = lib_illustration.ILLUSTRATION_NAMES;
 exports.DtImageViewer = lib_imageViewer.DtImageViewer;
 exports.DtInput = lib_input.DtInput;
 exports.INPUT_SIZES = lib_input.INPUT_SIZES;

package/dist/dialtone-vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialtone-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialtone-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/dialtone-vue.js

@@ -2,7 +2,7 @@ import { DEFAULT_VALIDATION_MESSAGE_TYPE, DESCRIPTION_SIZE_TYPES, VALIDATION_MES
 import { validationMessageValidator } from "./common/validators.js";
 import { filterFormattedMessages, formatMessages, getUniqueString, getValidationState } from "./common/utils.js";
 import { durationInHHMM, getDateMedium, relativeDate, setDateLocale } from "./common/dates.js";
-import { codeToEmojiData, customEmojiAssetUrl, defaultEmojiAssetUrl, emojiFileExtensionLarge, emojiFileExtensionSmall, emojiImageUrlLarge, emojiImageUrlSmall, emojiJson, emojiShortCodeRegex, emojiVersion, filterValidShortCodes, findEmojis, findShortCodes, getEmojiData, setCustomEmojiJson, setCustomEmojiUrl, setEmojiAssetUrlLarge, setEmojiAssetUrlSmall, shortcodeToEmojiData, stringToUnicode, unicodeToString, validateCustomEmojiJson } from "./common/emoji.js";
+import { codeToEmojiData, customEmojiAssetUrl, defaultEmojiAssetUrl, emojiFileExtensionLarge, emojiFileExtensionSmall, emojiImageUrlLarge, emojiImageUrlSmall, emojiJson, emojiRegex, emojiShortCodeRegex, emojiVersion, filterValidShortCodes, findEmojis, findShortCodes, getEmojiData, setCustomEmojiJson, setCustomEmojiUrl, setEmojiAssetUrlLarge, setEmojiAssetUrlSmall, shortcodeToEmojiData, stringToUnicode, unicodeToString, validateCustomEmojiJson } from "./chunks/index-ODod4Oj_.js";
 import { CheckableMixin, GroupableMixin, InputMixin } from "./chunks/input-6kbd8Pju.js";
 import { InputGroupMixin } from "./chunks/input_group-qVZaS5Bb.js";
 import { KeyboardNavigation } from "./chunks/keyboard_list_navigation-ScXhrxya.js";
@@ -27,9 +27,11 @@ import { DROPDOWN_PADDING_CLASSES } from "./chunks/dropdown_constants-w1MXGC3Z.j
 import { DtEmoji } from "./lib/emoji.js";
 import { CDN_URL, DtEmojiPicker, EMOJIS_PER_ROW, EMOJI_PICKER_CATEGORIES, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from "./lib/emoji-picker.js";
 import { DtEmojiTextWrapper } from "./lib/emoji-text-wrapper.js";
+import { DtEmptyState, EMPTY_STATE_SIZE_MODIFIERS } from "./lib/empty-state.js";
 import { DtHovercard } from "./lib/hovercard.js";
 import { DtIcon } from "./lib/icon.js";
 import { ICON_NAMES, ICON_SIZE_MODIFIERS } from "./chunks/icon_constants-Dy4MEUJL.js";
+import { DtIllustration, ILLUSTRATION_NAMES } from "./lib/illustration.js";
 import { DtImageViewer } from "./lib/image-viewer.js";
 import { DtInput, INPUT_SIZES, INPUT_TYPES } from "./lib/input.js";
 import { DtInputGroup } from "./lib/input-group.js";
@@ -37,7 +39,7 @@ import { DtItemLayout } from "./lib/item-layout.js";
 import { DtKeyboardShortcut, SHORTCUTS_ALIASES_LIST, SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from "./lib/keyboard-shortcut.js";
 import { DtLazyShow } from "./lib/lazy-show.js";
 import { DtLink } from "./lib/link.js";
-import { LINK_KIND_MODIFIERS, LINK_VARIANTS } from "./chunks/link_constants-nWVlXQBs.js";
+import { LINK_KIND_MODIFIERS, LINK_VARIANTS } from "./chunks/link_constants-AfTWrr-n.js";
 import { DtListItem } from "./lib/list-item.js";
 import { LIST_ITEM_NAVIGATION_TYPES, LIST_ITEM_TYPES } from "./chunks/list_item_constants-u1xcN9Dd.js";
 import { DtListItemGroup } from "./lib/list-item-group.js";
@@ -88,7 +90,6 @@ import { DtRecipeUnreadPill, UNREAD_PILL_DIRECTIONS, UNREAD_PILL_KINDS } from ".
 import { COLOR_CODES, DtRecipeTopBannerInfo } from "./lib/top-banner-info.js";
 import "vue";
 import "date-fns";
-import "emoji-regex";
 import "emoji-toolkit/emoji_strategy.json";
 import "@dialpad/dialtone-icons/icons.json";
 import "./chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
@@ -96,6 +97,7 @@ import "./chunks/modal-XOr4kiNZ.js";
 import "./chunks/sr_only_close_button-81bHIpPu.js";
 import "@dialpad/dialtone-emojis";
 import "@dialpad/dialtone-icons/vue2";
+import "@dialpad/dialtone-icons/illustrations.json";
 import "@linusborg/vue-simple-portal";
 import "tippy.js";
 import "@tiptap/vue-2";
@@ -182,9 +184,11 @@ export {
   DtEmoji,
   DtEmojiPicker,
   DtEmojiTextWrapper,
+  DtEmptyState,
   GroupableMixin as DtGroupableInputMixin,
   DtHovercard,
   DtIcon,
+  DtIllustration,
   DtImageViewer,
   DtInput,
   DtInputGroup,
@@ -249,11 +253,13 @@ export {
   EMOJIS_PER_ROW,
   EMOJI_PICKER_CATEGORIES,
   EMOJI_PICKER_SKIN_TONE_MODIFIERS,
+  EMPTY_STATE_SIZE_MODIFIERS,
   FEED_ITEM_PILL_BORDER_COLORS,
   FEED_ROW_STATE_BACKGROUND_COLOR,
   ICON_NAMES,
   ICON_POSITION_MODIFIERS,
   ICON_SIZE_MODIFIERS,
+  ILLUSTRATION_NAMES,
   INPUT_SIZES,
   INPUT_TYPES,
   INVALID_COMBINATION,
@@ -334,6 +340,7 @@ export {
   emojiImageUrlLarge,
   emojiImageUrlSmall,
   emojiJson,
+  emojiRegex,
   emojiShortCodeRegex,
   emojiVersion,
   filterFormattedMessages,

package/dist/dialtone-vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/attachment-carousel.cjs

@@ -8,7 +8,7 @@ require("../chunks/modal-VgxXAQFP.js");
 require("../common/constants.cjs");
 require("@linusborg/vue-simple-portal");
 require("vue");
-require("../chunks/link_constants-Huj7D_hm.js");
+require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue2");
 require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");

package/dist/lib/attachment-carousel.js

@@ -6,7 +6,7 @@ import "../chunks/modal-XOr4kiNZ.js";
 import "../common/constants.js";
 import "@linusborg/vue-simple-portal";
 import "vue";
-import "../chunks/link_constants-nWVlXQBs.js";
+import "../chunks/link_constants-AfTWrr-n.js";
 import "@dialpad/dialtone-icons/vue2";
 import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";

package/dist/lib/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","sources":["../../components/avatar/avatar_constants.js","../../common/storybook_utils.js","../../components/avatar/utils.js","../../components/avatar/avatar.vue"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","import iconNames from '@dialpad/dialtone-icons/icons.json';\n\n/**\n * Will use a Vue SFC to render the template rather than a template string.\n * This is useful for more complex components that are hard to work with and\n * get messy when rendered via a template string. Will pass args and argTypes\n * into the component, so it is able to be live edited with storybook controls addon.\n * @param component this will get the component name\n * @param defaultTemplate we will mount in this component\n * @param argsData storybook control args\n * @returns {component} the template component with props and args added.\n */\n\nexport function createRenderConfig (component, defaultTemplate, argsData) {\n  return {\n    components: { [component.name]: defaultTemplate },\n    props: [...Object.keys(component.props ?? {}), ...Object.keys(argsData)],\n    setup (props) {\n      return { props };\n    },\n    template: `<${component.name} v-bind=\"props\" />`,\n  };\n}\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIconNames () {\n  return [undefined, ...iconNames];\n}\n\nexport const generateTemplate = (component,\n  { props = [], excludeProps = [], customProps = [], childTemplate } = {}) => {\n  if (!component) {\n    console.warn('Generate template: Please provide a component');\n    return '';\n  }\n\n  const { name, props: componentProps } = component;\n  const finalProps = props.length ? props : Object.keys(componentProps);\n  const normalizedName = name.split(/(?=[A-Z])/).join('-').toLowerCase();\n\n  const startFragment = `<${normalizedName}`;\n\n  const propFragments = finalProps\n    .filter(prop => !excludeProps.includes(prop))\n    .map(prop => `:${prop}=\"${prop}\"`);\n\n  const endFragment = childTemplate ? `>${childTemplate}</${normalizedName}>` : ' />';\n\n  return [startFragment, ...propFragments, ...customProps, endFragment].join(' ');\n};\n\nexport default {\n  generateTemplate,\n  getIconNames,\n  createRenderConfig,\n};\n","export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n","<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <dt-icon\n        v-else-if=\"iconName\"\n        :name=\"iconName\"\n        :aria-label=\"iconAriaLabel\"\n        :size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        data-qa=\"dt-avatar-icon\"\n      />\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"overlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <dt-icon\n        v-if=\"overlayIcon\"\n        class=\"d-avatar__overlay-icon\"\n        :name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence, DtIcon },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The icon that overlays the avatar\n     */\n    overlayIcon: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon name to be displayed on the avatar\n     */\n    iconName: {\n      type: String,\n      default: undefined,\n      validator: (name) => ICONS_LIST.includes(name),\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n    };\n  },\n\n  computed: {\n    isNotIconType () {\n      return !this.iconName;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n  background-color: transparent;\n  background-image: unset;\n}\n\n.d-avatar__count {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n  background-color: var(--dt-color-surface-contrast-opaque);\n  opacity: var(--dt-opacity-900);\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dt-size-radius-circle);\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n  color: var(--dt-color-foreground-primary-inverted);\n  width: 100%;\n}\n\n.d-avatar__overlay-text {\n  color: var(--dt-color-foreground-primary-inverted);\n  font-weight: var(--dt-font-weight-bold);\n  font-size: var(--dt-font-size-200);\n  width: 100%;\n  text-align: center;\n}\n\n.d-avatar--clickable {\n  --avatar-color-border: transparent;\n\n  cursor: pointer;\n  padding: 0;\n  background-color: transparent;\n\n  border-radius: var(--dt-size-radius-circle);\n  border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n\n  &:hover {\n    --avatar-color-border: var(--dt-color-border-default);\n  }\n\n  &:active {\n    --avatar-color-border: var(--dt-color-border-moderate);\n\n    transform: scale(0.98);\n  }\n}\n</style>\n"],"names":["DtPresence","DtIcon","getUniqueString","ICON_SIZE_MODIFIERS","getRandomElement"],"mappings":"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"}
+{"version":3,"file":"avatar.cjs","sources":["../../components/avatar/avatar_constants.js","../../common/storybook_utils.js","../../components/avatar/utils.js","../../components/avatar/avatar.vue"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","import iconNames from '@dialpad/dialtone-icons/icons.json';\nimport illustrationNames from '@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 component this will get the component name\n * @param defaultTemplate we will mount in this component\n * @param argsData storybook control args\n * @returns {component} the template component with props and args added.\n */\n\nexport function createRenderConfig (component, defaultTemplate, argsData) {\n  return {\n    components: { [component.name]: defaultTemplate },\n    props: [...Object.keys(component.props ?? {}), ...Object.keys(argsData)],\n    setup (props) {\n      return { props };\n    },\n    template: `<${component.name} v-bind=\"props\" />`,\n  };\n}\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIconNames () {\n  return [undefined, ...iconNames];\n}\n\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  getIconNames,\n  getIllustrationNames,\n  createRenderConfig,\n};\n","export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n","<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <dt-icon\n        v-else-if=\"iconName\"\n        :name=\"iconName\"\n        :aria-label=\"iconAriaLabel\"\n        :size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        data-qa=\"dt-avatar-icon\"\n      />\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"overlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <dt-icon\n        v-if=\"overlayIcon\"\n        class=\"d-avatar__overlay-icon\"\n        :name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence, DtIcon },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The icon that overlays the avatar\n     */\n    overlayIcon: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon name to be displayed on the avatar\n     */\n    iconName: {\n      type: String,\n      default: undefined,\n      validator: (name) => ICONS_LIST.includes(name),\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n    };\n  },\n\n  computed: {\n    isNotIconType () {\n      return !this.iconName;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n  background-color: transparent;\n  background-image: unset;\n}\n\n.d-avatar__count {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n  background-color: var(--dt-color-surface-contrast-opaque);\n  opacity: var(--dt-opacity-900);\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dt-size-radius-circle);\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n  color: var(--dt-color-foreground-primary-inverted);\n  width: 100%;\n}\n\n.d-avatar__overlay-text {\n  color: var(--dt-color-foreground-primary-inverted);\n  font-weight: var(--dt-font-weight-bold);\n  font-size: var(--dt-font-size-200);\n  width: 100%;\n  text-align: center;\n}\n\n.d-avatar--clickable {\n  --avatar-color-border: transparent;\n\n  cursor: pointer;\n  padding: 0;\n  background-color: transparent;\n\n  border-radius: var(--dt-size-radius-circle);\n  border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n\n  &:hover {\n    --avatar-color-border: var(--dt-color-border-default);\n  }\n\n  &:active {\n    --avatar-color-border: var(--dt-color-border-moderate);\n\n    transform: scale(0.98);\n  }\n}\n</style>\n"],"names":["DtPresence","DtIcon","getUniqueString","ICON_SIZE_MODIFIERS","getRandomElement"],"mappings":"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"}

package/dist/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  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","import iconNames from '@dialpad/dialtone-icons/icons.json';\n\n/**\n * Will use a Vue SFC to render the template rather than a template string.\n * This is useful for more complex components that are hard to work with and\n * get messy when rendered via a template string. Will pass args and argTypes\n * into the component, so it is able to be live edited with storybook controls addon.\n * @param component this will get the component name\n * @param defaultTemplate we will mount in this component\n * @param argsData storybook control args\n * @returns {component} the template component with props and args added.\n */\n\nexport function createRenderConfig (component, defaultTemplate, argsData) {\n  return {\n    components: { [component.name]: defaultTemplate },\n    props: [...Object.keys(component.props ?? {}), ...Object.keys(argsData)],\n    setup (props) {\n      return { props };\n    },\n    template: `<${component.name} v-bind=\"props\" />`,\n  };\n}\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIconNames () {\n  return [undefined, ...iconNames];\n}\n\nexport const generateTemplate = (component,\n  { props = [], excludeProps = [], customProps = [], childTemplate } = {}) => {\n  if (!component) {\n    console.warn('Generate template: Please provide a component');\n    return '';\n  }\n\n  const { name, props: componentProps } = component;\n  const finalProps = props.length ? props : Object.keys(componentProps);\n  const normalizedName = name.split(/(?=[A-Z])/).join('-').toLowerCase();\n\n  const startFragment = `<${normalizedName}`;\n\n  const propFragments = finalProps\n    .filter(prop => !excludeProps.includes(prop))\n    .map(prop => `:${prop}=\"${prop}\"`);\n\n  const endFragment = childTemplate ? `>${childTemplate}</${normalizedName}>` : ' />';\n\n  return [startFragment, ...propFragments, ...customProps, endFragment].join(' ');\n};\n\nexport default {\n  generateTemplate,\n  getIconNames,\n  createRenderConfig,\n};\n","export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n","<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <dt-icon\n        v-else-if=\"iconName\"\n        :name=\"iconName\"\n        :aria-label=\"iconAriaLabel\"\n        :size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        data-qa=\"dt-avatar-icon\"\n      />\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"overlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <dt-icon\n        v-if=\"overlayIcon\"\n        class=\"d-avatar__overlay-icon\"\n        :name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence, DtIcon },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The icon that overlays the avatar\n     */\n    overlayIcon: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon name to be displayed on the avatar\n     */\n    iconName: {\n      type: String,\n      default: undefined,\n      validator: (name) => ICONS_LIST.includes(name),\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n    };\n  },\n\n  computed: {\n    isNotIconType () {\n      return !this.iconName;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n  background-color: transparent;\n  background-image: unset;\n}\n\n.d-avatar__count {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n  background-color: var(--dt-color-surface-contrast-opaque);\n  opacity: var(--dt-opacity-900);\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dt-size-radius-circle);\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n  color: var(--dt-color-foreground-primary-inverted);\n  width: 100%;\n}\n\n.d-avatar__overlay-text {\n  color: var(--dt-color-foreground-primary-inverted);\n  font-weight: var(--dt-font-weight-bold);\n  font-size: var(--dt-font-size-200);\n  width: 100%;\n  text-align: center;\n}\n\n.d-avatar--clickable {\n  --avatar-color-border: transparent;\n\n  cursor: pointer;\n  padding: 0;\n  background-color: transparent;\n\n  border-radius: var(--dt-size-radius-circle);\n  border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n\n  &:hover {\n    --avatar-color-border: var(--dt-color-border-default);\n  }\n\n  &:active {\n    --avatar-color-border: var(--dt-color-border-moderate);\n\n    transform: scale(0.98);\n  }\n}\n</style>\n"],"names":[],"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  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n","import iconNames from '@dialpad/dialtone-icons/icons.json';\nimport illustrationNames from '@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 component this will get the component name\n * @param defaultTemplate we will mount in this component\n * @param argsData storybook control args\n * @returns {component} the template component with props and args added.\n */\n\nexport function createRenderConfig (component, defaultTemplate, argsData) {\n  return {\n    components: { [component.name]: defaultTemplate },\n    props: [...Object.keys(component.props ?? {}), ...Object.keys(argsData)],\n    setup (props) {\n      return { props };\n    },\n    template: `<${component.name} v-bind=\"props\" />`,\n  };\n}\n\n/**\n * Gets the full list of icon component names from the dialtone package\n * @returns {string[]} icon component names\n */\nexport function getIconNames () {\n  return [undefined, ...iconNames];\n}\n\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  getIconNames,\n  getIllustrationNames,\n  createRenderConfig,\n};\n","export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n","<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <dt-icon\n        v-else-if=\"iconName\"\n        :name=\"iconName\"\n        :aria-label=\"iconAriaLabel\"\n        :size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        data-qa=\"dt-avatar-icon\"\n      />\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"overlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <dt-icon\n        v-if=\"overlayIcon\"\n        class=\"d-avatar__overlay-icon\"\n        :name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport { DtIcon } from '@/components/icon';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { getIconNames } from '@/common/storybook_utils.js';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\nconst ICONS_LIST = getIconNames();\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  name: 'DtAvatar',\n  components: { DtPresence, DtIcon },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The icon that overlays the avatar\n     */\n    overlayIcon: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon name to be displayed on the avatar\n     */\n    iconName: {\n      type: String,\n      default: undefined,\n      validator: (name) => ICONS_LIST.includes(name),\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n    };\n  },\n\n  computed: {\n    isNotIconType () {\n      return !this.iconName;\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n//TODO: Move these classes to dialtone and document.\n.d-avatar--image-loaded {\n  background-color: transparent;\n  background-image: unset;\n}\n\n.d-avatar__count {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__presence {\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay {\n  background-color: var(--dt-color-surface-contrast-opaque);\n  opacity: var(--dt-opacity-900);\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dt-size-radius-circle);\n  z-index: var(--zi-base);\n}\n\n.d-avatar__overlay-icon {\n  color: var(--dt-color-foreground-primary-inverted);\n  width: 100%;\n}\n\n.d-avatar__overlay-text {\n  color: var(--dt-color-foreground-primary-inverted);\n  font-weight: var(--dt-font-weight-bold);\n  font-size: var(--dt-font-size-200);\n  width: 100%;\n  text-align: center;\n}\n\n.d-avatar--clickable {\n  --avatar-color-border: transparent;\n\n  cursor: pointer;\n  padding: 0;\n  background-color: transparent;\n\n  border-radius: var(--dt-size-radius-circle);\n  border: var(--dt-size-border-100) solid var(--avatar-color-border);\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: var(--dt-shadow-focus);\n  }\n\n  &:hover {\n    --avatar-color-border: var(--dt-color-border-default);\n  }\n\n  &:active {\n    --avatar-color-border: var(--dt-color-border-moderate);\n\n    transform: scale(0.98);\n  }\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/lib/badge.cjs

@@ -108,6 +108,21 @@ const _sfc_main = {
     labelClass: {
       type: [String, Array, Object],
       default: ""
+    },
+    /**
+     * Shows a subtle appearance for the badge
+     * Currently only affects the badge when type is bulletin.
+     */
+    subtle: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Outlines the badge with a border
+     */
+    outlined: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -140,6 +155,9 @@ const _sfc_main = {
       if (this.type === "ai" && this.kind === "count") {
         console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.");
       }
+      if (this.type !== "bulletin" && this.subtle) {
+        console.error("DtBadge error: subtle can only be used with type 'bulletin'");
+      }
     },
     validateDecorationPropCombination() {
       if (!this.decoration)
@@ -159,7 +177,9 @@ var _sfc_render = function render() {
     "d-badge",
     _vm.BADGE_TYPE_MODIFIERS[_vm.type],
     _vm.BADGE_KIND_MODIFIERS[_vm.kind],
-    _vm.BADGE_DECORATION_MODIFIERS[_vm.decoration]
+    _vm.BADGE_DECORATION_MODIFIERS[_vm.decoration],
+    { "d-badge--subtle": _vm.subtle },
+    { "d-badge--outlined": _vm.outlined }
   ], attrs: { "data-qa": "dt-badge" } }, [_vm.decoration ? _c("span", { staticClass: "d-badge__decorative" }) : _vm._e(), _vm.iconLeft || _vm.type === "ai" ? _c("span", { staticClass: "d-badge__icon-left" }, [_c("dt-icon", { attrs: { "name": _vm.iconLeft || "dialpad-ai", "size": "200" } })], 1) : _vm._e(), _c("span", { class: ["d-badge__label", _vm.labelClass] }, [_vm._t("default", function() {
     return [_vm._v(" " + _vm._s(_vm.text) + " ")];
   })], 2), _vm.iconRight ? _c("span", { staticClass: "d-badge__icon-right" }, [_c("dt-icon", { attrs: { "name": _vm.iconRight, "size": "200" } })], 1) : _vm._e()]);

package/dist/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    ]\"\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  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    },\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"],"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"],"mappings":"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"}

package/dist/lib/badge.js

@@ -106,6 +106,21 @@ const _sfc_main = {
     labelClass: {
       type: [String, Array, Object],
       default: ""
+    },
+    /**
+     * Shows a subtle appearance for the badge
+     * Currently only affects the badge when type is bulletin.
+     */
+    subtle: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Outlines the badge with a border
+     */
+    outlined: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -138,6 +153,9 @@ const _sfc_main = {
       if (this.type === "ai" && this.kind === "count") {
         console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.");
       }
+      if (this.type !== "bulletin" && this.subtle) {
+        console.error("DtBadge error: subtle can only be used with type 'bulletin'");
+      }
     },
     validateDecorationPropCombination() {
       if (!this.decoration)
@@ -157,7 +175,9 @@ var _sfc_render = function render() {
     "d-badge",
     _vm.BADGE_TYPE_MODIFIERS[_vm.type],
     _vm.BADGE_KIND_MODIFIERS[_vm.kind],
-    _vm.BADGE_DECORATION_MODIFIERS[_vm.decoration]
+    _vm.BADGE_DECORATION_MODIFIERS[_vm.decoration],
+    { "d-badge--subtle": _vm.subtle },
+    { "d-badge--outlined": _vm.outlined }
   ], attrs: { "data-qa": "dt-badge" } }, [_vm.decoration ? _c("span", { staticClass: "d-badge__decorative" }) : _vm._e(), _vm.iconLeft || _vm.type === "ai" ? _c("span", { staticClass: "d-badge__icon-left" }, [_c("dt-icon", { attrs: { "name": _vm.iconLeft || "dialpad-ai", "size": "200" } })], 1) : _vm._e(), _c("span", { class: ["d-badge__label", _vm.labelClass] }, [_vm._t("default", function() {
     return [_vm._v(" " + _vm._s(_vm.text) + " ")];
   })], 2), _vm.iconRight ? _c("span", { staticClass: "d-badge__icon-right" }, [_c("dt-icon", { attrs: { "name": _vm.iconRight, "size": "200" } })], 1) : _vm._e()]);

package/dist/lib/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","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    ]\"\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  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    },\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":[],"mappings":"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"}
+{"version":3,"file":"badge.js","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":[],"mappings":"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"}

package/dist/lib/banner.cjs

@@ -13,7 +13,7 @@ require("@dialpad/dialtone-icons/vue2");
 require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./button.cjs");
-require("../chunks/link_constants-Huj7D_hm.js");
+require("../chunks/link_constants-x8NwdqmA.js");
 const _sfc_main = {
   name: "DtBanner",
   components: {

package/dist/lib/banner.js

@@ -11,7 +11,7 @@ import "@dialpad/dialtone-icons/vue2";
 import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./button.js";
-import "../chunks/link_constants-nWVlXQBs.js";
+import "../chunks/link_constants-AfTWrr-n.js";
 const _sfc_main = {
   name: "DtBanner",
   components: {