@dialpad/dialtone-vue 3.127.0 → 3.129.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-lu2o2f4r.js");
 const input = require("./chunks/input-ttnte8zB.js");
 const input_group = require("./chunks/input_group-M-D25pOJ.js");
 const keyboard_list_navigation = require("./chunks/keyboard_list_navigation-fJnl_Iox.js");
@@ -93,7 +93,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("@dialpad/dialtone-emojis");
 require("@dialpad/dialtone-icons/icons.json");
 require("./chunks/_plugin-vue_export-helper-fhnQq0tA.js");
@@ -162,6 +161,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;
@@ -260,6 +260,7 @@ exports.DtLazyShow = lib_lazyShow.DtLazyShow;
 exports.DtLink = lib_link.DtLink;
 exports.LINK_KIND_MODIFIERS = link_constants.LINK_KIND_MODIFIERS;
 exports.LINK_VARIANTS = link_constants.LINK_VARIANTS;
+exports.getLinkKindModifier = link_constants.getLinkKindModifier;
 exports.DtListItem = lib_listItem.DtListItem;
 exports.LIST_ITEM_NAVIGATION_TYPES = list_item_constants.LIST_ITEM_NAVIGATION_TYPES;
 exports.LIST_ITEM_TYPES = list_item_constants.LIST_ITEM_TYPES;

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-GVD15GIB.js";
 import { CheckableMixin, GroupableMixin, InputMixin } from "./chunks/input-NmYDD5bn.js";
 import { InputGroupMixin } from "./chunks/input_group-jWnq2DJT.js";
 import { KeyboardNavigation } from "./chunks/keyboard_list_navigation-ScXhrxya.js";
@@ -39,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-AfTWrr-n.js";
+import { LINK_KIND_MODIFIERS, LINK_VARIANTS, getLinkKindModifier } 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";
@@ -91,7 +91,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 "@dialpad/dialtone-emojis";
 import "@dialpad/dialtone-icons/icons.json";
 import "./chunks/_plugin-vue_export-helper-caHeSgYY.js";
@@ -342,6 +341,7 @@ export {
   emojiImageUrlLarge,
   emojiImageUrlSmall,
   emojiJson,
+  emojiRegex,
   emojiShortCodeRegex,
   emojiVersion,
   filterFormattedMessages,
@@ -356,6 +356,7 @@ export {
   formatShort,
   getDateMedium,
   getEmojiData,
+  getLinkKindModifier,
   getUniqueString,
   getValidationState,
   relativeDate,

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/badge.cjs

@@ -109,6 +109,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() {
@@ -141,6 +156,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)
@@ -173,7 +191,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "d-badge",
       $data.BADGE_TYPE_MODIFIERS[$props.type],
       $data.BADGE_KIND_MODIFIERS[$props.kind],
-      $data.BADGE_DECORATION_MODIFIERS[$props.decoration]
+      $data.BADGE_DECORATION_MODIFIERS[$props.decoration],
+      { "d-badge--subtle": $props.subtle },
+      { "d-badge--outlined": $props.outlined }
     ]),
     "data-qa": "dt-badge"
   }, [

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

package/dist/lib/badge.js

@@ -107,6 +107,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() {
@@ -139,6 +154,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)
@@ -171,7 +189,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "d-badge",
       $data.BADGE_TYPE_MODIFIERS[$props.type],
       $data.BADGE_KIND_MODIFIERS[$props.kind],
-      $data.BADGE_DECORATION_MODIFIERS[$props.decoration]
+      $data.BADGE_DECORATION_MODIFIERS[$props.decoration],
+      { "d-badge--subtle": $props.subtle },
+      { "d-badge--outlined": $props.outlined }
     ]),
     "data-qa": "dt-badge"
   }, [

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":["_createElementBlock","_normalizeClass","_openBlock","_createVNode","_createElementVNode","_renderSlot"],"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":["_createElementBlock","_normalizeClass","_openBlock","_createVNode","_createElementVNode","_renderSlot"],"mappings":"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"}

package/dist/lib/button.cjs

@@ -107,7 +107,7 @@ const _sfc_main = {
     },
     /**
      * The color of the link and button if the button is styled as a link.
-     * @values default, warning, danger, success, muted, inverted
+     * @values default, warning, danger, success, muted
      * @see DtLink
      */
     linkKind: {
@@ -115,6 +115,15 @@ const _sfc_main = {
       default: "default",
       validator: (lk) => Object.keys(link_constants.LINK_KIND_MODIFIERS).includes(lk)
     },
+    /**
+     * Determines whether the link should have inverted styling if the button is styled as a link.
+     * @values true, false
+     * @see DtLink
+     */
+    linkInverted: {
+      type: Boolean,
+      default: false
+    },
     /**
      * HTML button disabled attribute
      * <a
@@ -273,7 +282,7 @@ const _sfc_main = {
       if (this.link) {
         return [
           "d-link",
-          link_constants.LINK_KIND_MODIFIERS[this.linkKind],
+          link_constants.getLinkKindModifier(this.linkKind, this.linkInverted),
           BUTTON_SIZE_MODIFIERS[this.size]
         ];
       }

package/dist/lib/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","sources":["../../components/button/button_constants.js","../../components/button/button.vue"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  primary: 'd-btn--primary',\n  outlined: 'd-btn--outlined',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n","<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-bind=\"$attrs\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted, inverted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          LINK_KIND_MODIFIERS[this.linkKind],\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return this.$slots.icon && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !this.$slots.default;\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["LINK_KIND_MODIFIERS","hasSlotContent","warn","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"button.cjs","sources":["../../components/button/button_constants.js","../../components/button/button.vue"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  primary: 'd-btn--primary',\n  outlined: 'd-btn--outlined',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n","<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-bind=\"$attrs\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return this.$slots.icon && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !this.$slots.default;\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["LINK_KIND_MODIFIERS","hasSlotContent","warn","getLinkKindModifier","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/lib/button.js

@@ -1,7 +1,7 @@
 import { warn, openBlock, createElementBlock, mergeProps, toHandlers, normalizeClass, renderSlot, createCommentVNode } from "vue";
 import { hasSlotContent } from "../common/utils.js";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import { LINK_KIND_MODIFIERS } from "../chunks/link_constants-AfTWrr-n.js";
+import { LINK_KIND_MODIFIERS, getLinkKindModifier } from "../chunks/link_constants-AfTWrr-n.js";
 import "../common/constants.js";
 const BUTTON_SIZE_MODIFIERS = {
   xs: "d-btn--xs",
@@ -105,7 +105,7 @@ const _sfc_main = {
     },
     /**
      * The color of the link and button if the button is styled as a link.
-     * @values default, warning, danger, success, muted, inverted
+     * @values default, warning, danger, success, muted
      * @see DtLink
      */
     linkKind: {
@@ -113,6 +113,15 @@ const _sfc_main = {
       default: "default",
       validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk)
     },
+    /**
+     * Determines whether the link should have inverted styling if the button is styled as a link.
+     * @values true, false
+     * @see DtLink
+     */
+    linkInverted: {
+      type: Boolean,
+      default: false
+    },
     /**
      * HTML button disabled attribute
      * <a
@@ -271,7 +280,7 @@ const _sfc_main = {
       if (this.link) {
         return [
           "d-link",
-          LINK_KIND_MODIFIERS[this.linkKind],
+          getLinkKindModifier(this.linkKind, this.linkInverted),
           BUTTON_SIZE_MODIFIERS[this.size]
         ];
       }

package/dist/lib/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../components/button/button_constants.js","../../components/button/button.vue"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  primary: 'd-btn--primary',\n  outlined: 'd-btn--outlined',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n","<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-bind=\"$attrs\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted, inverted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          LINK_KIND_MODIFIERS[this.linkKind],\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return this.$slots.icon && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !this.$slots.default;\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../components/button/button_constants.js","../../components/button/button.vue"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  primary: 'd-btn--primary',\n  outlined: 'd-btn--outlined',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n","<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-bind=\"$attrs\"\n    v-on=\"buttonListeners\"\n  >\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"['d-btn__label', 'base-button__label', labelClass]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  name: 'DtButton',\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">\n     *   CSS width attribute\n     * </a>\n     * values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, muted, danger, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          console.warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return this.$slots.icon && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !this.$slots.default;\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/lib/contact-centers-row.cjs

@@ -8,8 +8,7 @@ const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const lib_button = require("./button.cjs");
 const lib_badge = require("./badge.cjs");
-require("../common/emoji.cjs");
-require("emoji-regex");
+require("../chunks/index-lu2o2f4r.js");
 require("@dialpad/dialtone-emojis");
 require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");

package/dist/lib/contact-centers-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact-centers-row.cjs","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'dt-leftbar-row__container',\n      { 'dt-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"dt-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"$attrs\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"dt-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"dt-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div class=\"dt-leftbar-row__omega\">\n        <slot name=\"right\" />\n        <div class=\"dt-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"dt-leftbar-row__unread-badge\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"dt-leftbar-row__action\"\n            data-qa=\"dt-leftbar-row-action-button\"\n            :aria-label=\"menuButtonAriaLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"dt-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Aria label for the menu button.\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'dt-leftbar-row',\n        'dt-leftbar-row--contact-centers',\n        {\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return this.unreadCount > 0;\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      handler () {\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtButton","DtBadge","DtEmojiTextWrapper","safeConcatStrings","extractVueListeners","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_renderSlot","_createBlock","_withModifiers"],"mappings":"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"}
+{"version":3,"file":"contact-centers-row.cjs","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'dt-leftbar-row__container',\n      { 'dt-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"dt-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"$attrs\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"dt-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"dt-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div class=\"dt-leftbar-row__omega\">\n        <slot name=\"right\" />\n        <div class=\"dt-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"dt-leftbar-row__unread-badge\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"dt-leftbar-row__action\"\n            data-qa=\"dt-leftbar-row-action-button\"\n            :aria-label=\"menuButtonAriaLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"dt-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Aria label for the menu button.\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'dt-leftbar-row',\n        'dt-leftbar-row--contact-centers',\n        {\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return this.unreadCount > 0;\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      handler () {\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtButton","DtBadge","DtEmojiTextWrapper","safeConcatStrings","extractVueListeners","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_renderSlot","_createBlock","_withModifiers"],"mappings":"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"}

package/dist/lib/contact-centers-row.js

@@ -6,8 +6,7 @@ import { resolveComponent, openBlock, createElementBlock, normalizeClass, create
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtButton } from "./button.js";
 import { DtBadge } from "./badge.js";
-import "../common/emoji.js";
-import "emoji-regex";
+import "../chunks/index-GVD15GIB.js";
 import "@dialpad/dialtone-emojis";
 import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";