@dialpad/dialtone-vue 3.129.0 → 3.129.2

package/dist/lib/empty-state.cjs

@@ -4,18 +4,27 @@ const vue = require("vue");
 const common_utils = require("../common/utils.cjs");
 const lib_illustration = require("./illustration.cjs");
 const icon_constants = require("../chunks/icon_constants-QYpmdE0R.js");
+const lib_stack = require("./stack.cjs");
 const lib_icon = require("./icon.cjs");
 require("../common/constants.cjs");
 require("@dialpad/dialtone-icons/vue3");
 require("@dialpad/dialtone-icons/illustrations.json");
 require("@dialpad/dialtone-icons/icons.json");
+require("../chunks/stack_constants-SMzMWnAQ.js");
 require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const EMPTY_STATE_SIZE_MODIFIERS = {
   sm: "d-empty-state--size-sm",
   md: "d-empty-state--size-md",
   lg: "d-empty-state--size-lg"
 };
-const _hoisted_1 = { key: 0 };
+const _hoisted_1 = {
+  key: 0,
+  class: "d-empty-state__icon"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "d-empty-state__illustration"
+};
 const _sfc_main = {
   __name: "empty_state",
   props: {
@@ -88,16 +97,40 @@ const _sfc_main = {
     });
     const sizeClass = vue.computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);
     const emptyStateClasses = vue.computed(() => ["d-empty-state", sizeClass.value]);
-    const emptyStateContentSpacing = vue.computed(() => {
+    const contentClass = vue.computed(() => {
+      switch (props.size) {
+        case "sm":
+          return "d-empty-state__content--sm";
+        case "md":
+          return "d-empty-state__content--md";
+        case "lg":
+          return "d-empty-state__content--lg";
+        default:
+          return "d-empty-state__content--lg";
+      }
+    });
+    const headlineClass = vue.computed(() => {
+      switch (props.size) {
+        case "sm":
+          return "d-headline--md";
+        case "md":
+          return "d-headline--xl";
+        case "lg":
+          return "d-headline--xxl";
+        default:
+          return "d-headline--xxl";
+      }
+    });
+    const bodyClass = vue.computed(() => {
       switch (props.size) {
         case "sm":
-          return "d-p16";
+          return "d-body--sm";
         case "md":
-          return "d-p32";
+          return "d-body--sm";
         case "lg":
-          return "d-p32";
+          return "d-body--md";
         default:
-          return "d-p32";
+          return "d-body--md";
       }
     });
     vue.onMounted(() => {
@@ -106,28 +139,40 @@ const _sfc_main = {
       }
     });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
+      return vue.openBlock(), vue.createBlock(vue.unref(lib_stack.DtStack), {
         class: vue.normalizeClass(emptyStateClasses.value)
-      }, [
-        __props.showIllustration ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          showIcon.value ? (vue.openBlock(), vue.createBlock(vue.unref(lib_icon.DtIcon), {
-            key: 0,
-            name: __props.iconName,
-            size: "800"
-          }, null, 8, ["name"])) : vue.createCommentVNode("", true),
-          showIllustrationComponent.value ? (vue.openBlock(), vue.createBlock(vue.unref(lib_illustration.DtIllustration), {
-            key: 1,
-            name: __props.illustrationName
-          }, null, 8, ["name"])) : vue.createCommentVNode("", true)
-        ], 64)) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(emptyStateContentSpacing.value)
-        }, [
-          vue.createElementVNode("h1", null, vue.toDisplayString(__props.headerText), 1),
-          __props.bodyText ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_1, vue.toDisplayString(__props.bodyText), 1)) : vue.createCommentVNode("", true)
-        ], 2),
-        vue.renderSlot(_ctx.$slots, "body")
-      ], 2);
+      }, {
+        default: vue.withCtx(() => [
+          __props.showIllustration ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            showIcon.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+              vue.createVNode(vue.unref(lib_icon.DtIcon), {
+                name: __props.iconName,
+                size: "800"
+              }, null, 8, ["name"])
+            ])) : vue.createCommentVNode("", true),
+            showIllustrationComponent.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
+              vue.createVNode(vue.unref(lib_illustration.DtIllustration), { name: __props.illustrationName }, null, 8, ["name"])
+            ])) : vue.createCommentVNode("", true)
+          ], 64)) : vue.createCommentVNode("", true),
+          vue.createVNode(vue.unref(lib_stack.DtStack), {
+            gap: "450",
+            class: vue.normalizeClass(["d-empty-state__content", contentClass.value])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(["d-empty-state__header-text", headlineClass.value])
+              }, vue.toDisplayString(__props.headerText), 3),
+              __props.bodyText ? (vue.openBlock(), vue.createElementBlock("p", {
+                key: 0,
+                class: vue.normalizeClass(["d-empty-state__body-text", bodyClass.value])
+              }, vue.toDisplayString(__props.bodyText), 3)) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          vue.renderSlot(_ctx.$slots, "body")
+        ]),
+        _: 3
+      }, 8, ["class"]);
     };
   }
 };

package/dist/lib/empty-state.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.cjs","sources":["../../components/empty_state/empty_state_constants.js","../../components/empty_state/empty_state.vue"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n};\n","<template>\n  <div :class=\"emptyStateClasses\">\n    <template v-if=\"showIllustration\">\n      <dt-icon\n        v-if=\"showIcon\"\n        :name=\"iconName\"\n        size=\"800\"\n      />\n\n      <dt-illustration\n        v-if=\"showIllustrationComponent\"\n        :name=\"illustrationName\"\n      />\n    </template>\n\n    <div :class=\"emptyStateContentSpacing\">\n      <h1>\n        {{ headerText }}\n      </h1>\n\n      <p v-if=\"bodyText\">\n        {{ bodyText }}\n      </p>\n    </div>\n\n    <slot name=\"body\" />\n  </div>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { EMPTY_STATE_SIZE_MODIFIERS } from './empty_state_constants.js';\nimport { DtIllustration, ILLUSTRATION_NAMES } from '@/components/illustration';\nimport { DtIcon, ICON_NAMES } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 'sm', 'md', 'lg'\n    */\n  size: {\n    type: String,\n    default: 'lg',\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n  },\n\n  /**\n    * The illustration name in kebab-case\n   * This only displays when size is 'lg' or 'md'\n   * This has priority over icon.\n    * @type {String}\n    */\n  illustrationName: {\n    type: String,\n    default: null,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n\n  /**\n    * The icon name in kebab-case\n   * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and\n   * Will always be shown in 'sm' size.\n    * @type {String}\n    */\n  iconName: {\n    type: String,\n    default: null,\n    validator: (name) => ICON_NAMES.includes(name),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Whether to show the illustration\n    * @type {Boolean}\n    */\n  showIllustration: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst notSmSize = computed(() => props.size !== 'sm');\n\nconst showIllustrationComponent = computed(() => props.illustrationName && notSmSize.value);\n\nconst showIcon = computed(() => {\n  if (!props.iconName) {\n    return false;\n  }\n  return !(props.illustrationName && notSmSize.value);\n});\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst emptyStateContentSpacing = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-p16';\n    case 'md':\n      return 'd-p32';\n    case 'lg':\n      return 'd-p32';\n    default:\n      return 'd-p32';\n  }\n});\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"names":["useSlots","computed","onMounted","hasSlotContent"],"mappings":";;;;;;;;;;;;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACgCA,UAAM,QAAQA,IAAQ,SAAA;AAEtB,UAAM,QAAQ;AA+Dd,UAAM,YAAYC,IAAAA,SAAS,MAAM,MAAM,SAAS,IAAI;AAEpD,UAAM,4BAA4BA,IAAQ,SAAC,MAAM,MAAM,oBAAoB,UAAU,KAAK;AAE1F,UAAM,WAAWA,IAAQ,SAAC,MAAM;AAC9B,UAAI,CAAC,MAAM,UAAU;AACnB,eAAO;AAAA,MACR;AACD,aAAO,EAAE,MAAM,oBAAoB,UAAU;AAAA,IAC/C,CAAC;AAED,UAAM,YAAYA,IAAQ,SAAC,MAAM,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoBA,IAAQ,SAAC,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,2BAA2BA,IAAQ,SAAC,MAAM;AAC9C,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAACC,aAAAA,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,KAAK,6FAA6F;AAAA,MAC3G;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"empty-state.cjs","sources":["../../components/empty_state/empty_state_constants.js","../../components/empty_state/empty_state.vue"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n};\n","<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <template v-if=\"showIllustration\">\n      <span\n        v-if=\"showIcon\"\n        class=\"d-empty-state__icon\"\n      >\n        <dt-icon\n          :name=\"iconName\"\n          size=\"800\"\n        />\n      </span>\n\n      <span\n        v-if=\"showIllustrationComponent\"\n        class=\"d-empty-state__illustration\"\n      >\n        <dt-illustration\n          :name=\"illustrationName\"\n        />\n      </span>\n    </template>\n\n    <dt-stack\n      gap=\"450\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <div :class=\"['d-empty-state__header-text', headlineClass]\">\n        {{ headerText }}\n      </div>\n\n      <p\n        v-if=\"bodyText\"\n        :class=\"['d-empty-state__body-text', bodyClass]\"\n      >\n        {{ bodyText }}\n      </p>\n    </dt-stack>\n\n    <slot name=\"body\" />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { EMPTY_STATE_SIZE_MODIFIERS } from './empty_state_constants.js';\nimport { DtIllustration, ILLUSTRATION_NAMES } from '@/components/illustration';\nimport { DtIcon, ICON_NAMES } from '@/components/icon';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 'sm', 'md', 'lg'\n    */\n  size: {\n    type: String,\n    default: 'lg',\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n  },\n\n  /**\n    * The illustration name in kebab-case\n   * This only displays when size is 'lg' or 'md'\n   * This has priority over icon.\n    * @type {String}\n    */\n  illustrationName: {\n    type: String,\n    default: null,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n\n  /**\n    * The icon name in kebab-case\n   * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and\n   * Will always be shown in 'sm' size.\n    * @type {String}\n    */\n  iconName: {\n    type: String,\n    default: null,\n    validator: (name) => ICON_NAMES.includes(name),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Whether to show the illustration\n    * @type {Boolean}\n    */\n  showIllustration: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst notSmSize = computed(() => props.size !== 'sm');\n\nconst showIllustrationComponent = computed(() => props.illustrationName && notSmSize.value);\n\nconst showIcon = computed(() => {\n  if (!props.iconName) {\n    return false;\n  }\n  return !(props.illustrationName && notSmSize.value);\n});\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-empty-state__content--sm';\n    case 'md':\n      return 'd-empty-state__content--md';\n    case 'lg':\n      return 'd-empty-state__content--lg';\n    default:\n      return 'd-empty-state__content--lg';\n  }\n});\n\nconst headlineClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-headline--md';\n    case 'md':\n      return 'd-headline--xl';\n    case 'lg':\n      return 'd-headline--xxl';\n    default:\n      return 'd-headline--xxl';\n  }\n});\n\nconst bodyClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-body--sm';\n    case 'md':\n      return 'd-body--sm';\n    case 'lg':\n      return 'd-body--md';\n    default:\n      return 'd-body--md';\n  }\n});\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"names":["useSlots","computed","onMounted","hasSlotContent"],"mappings":";;;;;;;;;;;;;;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiDA,UAAM,QAAQA,IAAQ,SAAA;AAEtB,UAAM,QAAQ;AA+Dd,UAAM,YAAYC,IAAAA,SAAS,MAAM,MAAM,SAAS,IAAI;AAEpD,UAAM,4BAA4BA,IAAQ,SAAC,MAAM,MAAM,oBAAoB,UAAU,KAAK;AAE1F,UAAM,WAAWA,IAAQ,SAAC,MAAM;AAC9B,UAAI,CAAC,MAAM,UAAU;AACnB,eAAO;AAAA,MACR;AACD,aAAO,EAAE,MAAM,oBAAoB,UAAU;AAAA,IAC/C,CAAC;AAED,UAAM,YAAYA,IAAQ,SAAC,MAAM,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoBA,IAAQ,SAAC,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,eAAeA,IAAQ,SAAC,MAAM;AAClC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,gBAAgBA,IAAQ,SAAC,MAAM;AACnC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,YAAYA,IAAQ,SAAC,MAAM;AAC/B,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAEDC,QAAAA,UAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAACC,aAAAA,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,KAAK,6FAA6F;AAAA,MAC3G;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/empty-state.js

@@ -1,19 +1,28 @@
-import { useSlots, computed, onMounted, openBlock, createElementBlock, normalizeClass, Fragment, createBlock, unref, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
+import { useSlots, computed, onMounted, openBlock, createBlock, unref, normalizeClass, withCtx, createElementBlock, Fragment, createVNode, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from "vue";
 import { hasSlotContent } from "../common/utils.js";
 import { ILLUSTRATION_NAMES, DtIllustration as _sfc_main$1 } from "./illustration.js";
 import { ICON_NAMES } from "../chunks/icon_constants-Dy4MEUJL.js";
+import { DtStack } from "./stack.js";
 import { DtIcon } from "./icon.js";
 import "../common/constants.js";
 import "@dialpad/dialtone-icons/vue3";
 import "@dialpad/dialtone-icons/illustrations.json";
 import "@dialpad/dialtone-icons/icons.json";
+import "../chunks/stack_constants-HraCekPm.js";
 import "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 const EMPTY_STATE_SIZE_MODIFIERS = {
   sm: "d-empty-state--size-sm",
   md: "d-empty-state--size-md",
   lg: "d-empty-state--size-lg"
 };
-const _hoisted_1 = { key: 0 };
+const _hoisted_1 = {
+  key: 0,
+  class: "d-empty-state__icon"
+};
+const _hoisted_2 = {
+  key: 1,
+  class: "d-empty-state__illustration"
+};
 const _sfc_main = {
   __name: "empty_state",
   props: {
@@ -86,16 +95,40 @@ const _sfc_main = {
     });
     const sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);
     const emptyStateClasses = computed(() => ["d-empty-state", sizeClass.value]);
-    const emptyStateContentSpacing = computed(() => {
+    const contentClass = computed(() => {
+      switch (props.size) {
+        case "sm":
+          return "d-empty-state__content--sm";
+        case "md":
+          return "d-empty-state__content--md";
+        case "lg":
+          return "d-empty-state__content--lg";
+        default:
+          return "d-empty-state__content--lg";
+      }
+    });
+    const headlineClass = computed(() => {
+      switch (props.size) {
+        case "sm":
+          return "d-headline--md";
+        case "md":
+          return "d-headline--xl";
+        case "lg":
+          return "d-headline--xxl";
+        default:
+          return "d-headline--xxl";
+      }
+    });
+    const bodyClass = computed(() => {
       switch (props.size) {
         case "sm":
-          return "d-p16";
+          return "d-body--sm";
         case "md":
-          return "d-p32";
+          return "d-body--sm";
         case "lg":
-          return "d-p32";
+          return "d-body--md";
         default:
-          return "d-p32";
+          return "d-body--md";
       }
     });
     onMounted(() => {
@@ -104,28 +137,40 @@ const _sfc_main = {
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
+      return openBlock(), createBlock(unref(DtStack), {
         class: normalizeClass(emptyStateClasses.value)
-      }, [
-        __props.showIllustration ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          showIcon.value ? (openBlock(), createBlock(unref(DtIcon), {
-            key: 0,
-            name: __props.iconName,
-            size: "800"
-          }, null, 8, ["name"])) : createCommentVNode("", true),
-          showIllustrationComponent.value ? (openBlock(), createBlock(unref(_sfc_main$1), {
-            key: 1,
-            name: __props.illustrationName
-          }, null, 8, ["name"])) : createCommentVNode("", true)
-        ], 64)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass(emptyStateContentSpacing.value)
-        }, [
-          createElementVNode("h1", null, toDisplayString(__props.headerText), 1),
-          __props.bodyText ? (openBlock(), createElementBlock("p", _hoisted_1, toDisplayString(__props.bodyText), 1)) : createCommentVNode("", true)
-        ], 2),
-        renderSlot(_ctx.$slots, "body")
-      ], 2);
+      }, {
+        default: withCtx(() => [
+          __props.showIllustration ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            showIcon.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
+              createVNode(unref(DtIcon), {
+                name: __props.iconName,
+                size: "800"
+              }, null, 8, ["name"])
+            ])) : createCommentVNode("", true),
+            showIllustrationComponent.value ? (openBlock(), createElementBlock("span", _hoisted_2, [
+              createVNode(unref(_sfc_main$1), { name: __props.illustrationName }, null, 8, ["name"])
+            ])) : createCommentVNode("", true)
+          ], 64)) : createCommentVNode("", true),
+          createVNode(unref(DtStack), {
+            gap: "450",
+            class: normalizeClass(["d-empty-state__content", contentClass.value])
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                class: normalizeClass(["d-empty-state__header-text", headlineClass.value])
+              }, toDisplayString(__props.headerText), 3),
+              __props.bodyText ? (openBlock(), createElementBlock("p", {
+                key: 0,
+                class: normalizeClass(["d-empty-state__body-text", bodyClass.value])
+              }, toDisplayString(__props.bodyText), 3)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          renderSlot(_ctx.$slots, "body")
+        ]),
+        _: 3
+      }, 8, ["class"]);
     };
   }
 };

package/dist/lib/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","sources":["../../components/empty_state/empty_state_constants.js","../../components/empty_state/empty_state.vue"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n};\n","<template>\n  <div :class=\"emptyStateClasses\">\n    <template v-if=\"showIllustration\">\n      <dt-icon\n        v-if=\"showIcon\"\n        :name=\"iconName\"\n        size=\"800\"\n      />\n\n      <dt-illustration\n        v-if=\"showIllustrationComponent\"\n        :name=\"illustrationName\"\n      />\n    </template>\n\n    <div :class=\"emptyStateContentSpacing\">\n      <h1>\n        {{ headerText }}\n      </h1>\n\n      <p v-if=\"bodyText\">\n        {{ bodyText }}\n      </p>\n    </div>\n\n    <slot name=\"body\" />\n  </div>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { EMPTY_STATE_SIZE_MODIFIERS } from './empty_state_constants.js';\nimport { DtIllustration, ILLUSTRATION_NAMES } from '@/components/illustration';\nimport { DtIcon, ICON_NAMES } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 'sm', 'md', 'lg'\n    */\n  size: {\n    type: String,\n    default: 'lg',\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n  },\n\n  /**\n    * The illustration name in kebab-case\n   * This only displays when size is 'lg' or 'md'\n   * This has priority over icon.\n    * @type {String}\n    */\n  illustrationName: {\n    type: String,\n    default: null,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n\n  /**\n    * The icon name in kebab-case\n   * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and\n   * Will always be shown in 'sm' size.\n    * @type {String}\n    */\n  iconName: {\n    type: String,\n    default: null,\n    validator: (name) => ICON_NAMES.includes(name),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Whether to show the illustration\n    * @type {Boolean}\n    */\n  showIllustration: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst notSmSize = computed(() => props.size !== 'sm');\n\nconst showIllustrationComponent = computed(() => props.illustrationName && notSmSize.value);\n\nconst showIcon = computed(() => {\n  if (!props.iconName) {\n    return false;\n  }\n  return !(props.illustrationName && notSmSize.value);\n});\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst emptyStateContentSpacing = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-p16';\n    case 'md':\n      return 'd-p32';\n    case 'lg':\n      return 'd-p32';\n    default:\n      return 'd-p32';\n  }\n});\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"names":[],"mappings":";;;;;;;;;;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACgCA,UAAM,QAAQ,SAAQ;AAEtB,UAAM,QAAQ;AA+Dd,UAAM,YAAY,SAAS,MAAM,MAAM,SAAS,IAAI;AAEpD,UAAM,4BAA4B,SAAS,MAAM,MAAM,oBAAoB,UAAU,KAAK;AAE1F,UAAM,WAAW,SAAS,MAAM;AAC9B,UAAI,CAAC,MAAM,UAAU;AACnB,eAAO;AAAA,MACR;AACD,aAAO,EAAE,MAAM,oBAAoB,UAAU;AAAA,IAC/C,CAAC;AAED,UAAM,YAAY,SAAS,MAAM,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoB,SAAS,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,2BAA2B,SAAS,MAAM;AAC9C,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,cAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAAC,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,KAAK,6FAA6F;AAAA,MAC3G;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"empty-state.js","sources":["../../components/empty_state/empty_state_constants.js","../../components/empty_state/empty_state.vue"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n};\n","<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <template v-if=\"showIllustration\">\n      <span\n        v-if=\"showIcon\"\n        class=\"d-empty-state__icon\"\n      >\n        <dt-icon\n          :name=\"iconName\"\n          size=\"800\"\n        />\n      </span>\n\n      <span\n        v-if=\"showIllustrationComponent\"\n        class=\"d-empty-state__illustration\"\n      >\n        <dt-illustration\n          :name=\"illustrationName\"\n        />\n      </span>\n    </template>\n\n    <dt-stack\n      gap=\"450\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <div :class=\"['d-empty-state__header-text', headlineClass]\">\n        {{ headerText }}\n      </div>\n\n      <p\n        v-if=\"bodyText\"\n        :class=\"['d-empty-state__body-text', bodyClass]\"\n      >\n        {{ bodyText }}\n      </p>\n    </dt-stack>\n\n    <slot name=\"body\" />\n  </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { EMPTY_STATE_SIZE_MODIFIERS } from './empty_state_constants.js';\nimport { DtIllustration, ILLUSTRATION_NAMES } from '@/components/illustration';\nimport { DtIcon, ICON_NAMES } from '@/components/icon';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n  /**\n    * The empty state size.\n    * @values 'sm', 'md', 'lg'\n    */\n  size: {\n    type: String,\n    default: 'lg',\n    validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n  },\n\n  /**\n    * The illustration name in kebab-case\n   * This only displays when size is 'lg' or 'md'\n   * This has priority over icon.\n    * @type {String}\n    */\n  illustrationName: {\n    type: String,\n    default: null,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n\n  /**\n    * The icon name in kebab-case\n   * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and\n   * Will always be shown in 'sm' size.\n    * @type {String}\n    */\n  iconName: {\n    type: String,\n    default: null,\n    validator: (name) => ICON_NAMES.includes(name),\n  },\n\n  /**\n    * Header text\n    * @type {String}\n    */\n  headerText: {\n    type: String,\n    required: true,\n  },\n\n  /**\n    * Body text\n    * @type {String}\n    */\n  bodyText: {\n    type: String,\n    default: null,\n  },\n\n  /**\n    * Whether to show the illustration\n    * @type {Boolean}\n    */\n  showIllustration: {\n    type: Boolean,\n    default: true,\n  },\n});\n\nconst notSmSize = computed(() => props.size !== 'sm');\n\nconst showIllustrationComponent = computed(() => props.illustrationName && notSmSize.value);\n\nconst showIcon = computed(() => {\n  if (!props.iconName) {\n    return false;\n  }\n  return !(props.illustrationName && notSmSize.value);\n});\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[props.size]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-empty-state__content--sm';\n    case 'md':\n      return 'd-empty-state__content--md';\n    case 'lg':\n      return 'd-empty-state__content--lg';\n    default:\n      return 'd-empty-state__content--lg';\n  }\n});\n\nconst headlineClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-headline--md';\n    case 'md':\n      return 'd-headline--xl';\n    case 'lg':\n      return 'd-headline--xxl';\n    default:\n      return 'd-headline--xxl';\n  }\n});\n\nconst bodyClass = computed(() => {\n  switch (props.size) {\n    case 'sm':\n      return 'd-body--sm';\n    case 'md':\n      return 'd-body--sm';\n    case 'lg':\n      return 'd-body--md';\n    default:\n      return 'd-body--md';\n  }\n});\n\nonMounted(() => {\n  if (!props.bodyText && !hasSlotContent(slots.body)) {\n    console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n  }\n});\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiDA,UAAM,QAAQ,SAAQ;AAEtB,UAAM,QAAQ;AA+Dd,UAAM,YAAY,SAAS,MAAM,MAAM,SAAS,IAAI;AAEpD,UAAM,4BAA4B,SAAS,MAAM,MAAM,oBAAoB,UAAU,KAAK;AAE1F,UAAM,WAAW,SAAS,MAAM;AAC9B,UAAI,CAAC,MAAM,UAAU;AACnB,eAAO;AAAA,MACR;AACD,aAAO,EAAE,MAAM,oBAAoB,UAAU;AAAA,IAC/C,CAAC;AAED,UAAM,YAAY,SAAS,MAAM,2BAA2B,MAAM,IAAI,CAAC;AAEvE,UAAM,oBAAoB,SAAS,MAAM,CAAC,iBAAiB,UAAU,KAAK,CAAC;AAE3E,UAAM,eAAe,SAAS,MAAM;AAClC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,gBAAgB,SAAS,MAAM;AACnC,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,UAAM,YAAY,SAAS,MAAM;AAC/B,cAAQ,MAAM,MAAI;AAAA,QAChB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACV;AAAA,IACH,CAAC;AAED,cAAU,MAAM;AACd,UAAI,CAAC,MAAM,YAAY,CAAC,eAAe,MAAM,IAAI,GAAG;AAClD,gBAAQ,KAAK,6FAA6F;AAAA,MAC3G;AAAA,IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/general-row.cjs

@@ -380,7 +380,7 @@ const _sfc_main = {
     }
   }
 };
-const _withScopeId = (n) => (vue.pushScopeId("data-v-6ac4ceaa"), n = n(), vue.popScopeId(), n);
+const _withScopeId = (n) => (vue.pushScopeId("data-v-ca21dc4b"), n = n(), vue.popScopeId(), n);
 const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
 const _hoisted_2 = { class: "dt-leftbar-row__alpha" };
 const _hoisted_3 = {
@@ -501,7 +501,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "data-qa": "dt-leftbar-row-unread-mention-badge",
             class: vue.normalizeClass([
               "dt-leftbar-row__unread-badge",
-              { "dt-leftbar-row__unread-mention-count-only-badge": $options.hasUnreadMentionCount },
               { "dt-leftbar-row__unread-mention-count-badge": $options.shouldApplyCustomStyleForCountBadge }
             ])
           }, {
@@ -545,7 +544,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : vue.createCommentVNode("", true)
   ], 2);
 }
-const DtRecipeGeneralRow = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6ac4ceaa"]]);
+const DtRecipeGeneralRow = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ca21dc4b"]]);
 exports.DtRecipeGeneralRow = DtRecipeGeneralRow;
 exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS;
 exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR;

package/dist/lib/general-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"general-row.cjs","sources":["../../recipes/leftbar/general_row/general_row_constants.js","../../recipes/leftbar/general_row/leftbar_general_row_icon.vue","../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  THREADS: 'threads',\n  LAUNCHPAD: 'launchpad',\n  LOCKED_CHANNEL: 'locked channel',\n  CONTACT_CENTER: 'contact center',\n  QUICK_START: 'quick start',\n  COACHING_GROUP: 'coaching group',\n  COACHING_CENTER: 'coaching center',\n  DIALBOT: 'dialbot',\n  ASSIGNED: 'assigned',\n  DIGITAL: 'digital',\n};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: 'layout-template',\n  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n  'locked channel unread': 'lock-filled',\n  'channel unread': 'hash-bold',\n  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n","<template>\n  <dt-icon\n    v-if=\"isIconType\"\n    :name=\"getIconName\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon\n      name=\"dialbot\"\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport {\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING as ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: { DtIcon },\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return ICON_MAPPING[this.type];\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'dt-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"generalRowListeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\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        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            :class=\"['dt-leftbar-row__unread-badge', {\n              'dt-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-mention-badge\"\n            :class=\"['dt-leftbar-row__unread-badge',\n                     { 'dt-leftbar-row__unread-mention-count-only-badge': hasUnreadMentionCount },\n                     { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"phone\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtIcon,\n    DtButton,\n    DtTooltip,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\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. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount || this.showUnreadMentionCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    generalRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton ||\n        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\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    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\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 = 16;\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":["_sfc_main","DtIcon","TYPES","ICON_MAPPING","COLORS","_createBlock","_createElementBlock","_createVNode","DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","extractVueListeners","safeConcatStrings","_createElementVNode","_mergeProps","_toHandlers","_openBlock","_renderSlot","_normalizeClass","_withModifiers"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAY,MAAC,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX;AAEY,MAAC,mCAAmC;AAAA,EAC9C,CAAC,0BAA0B,KAAK,GAAG;AAAA,EACnC,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,OAAO,GAAG;AAAA,EACrC,CAAC,0BAA0B,SAAS,GAAG;AAAA,EACvC,CAAC,0BAA0B,cAAc,GAAG;AAAA,EAC5C,CAAC,0BAA0B,WAAW,GAAG;AAAA,EACzC,CAAC,0BAA0B,cAAc,GAAG;AAAA,EAC5C,CAAC,0BAA0B,eAAe,GAAG;AAAA,EAC7C,yBAAyB;AAAA,EACzB,kBAAkB;AAAA,EAClB,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,OAAO,GAAG;AACvC;AAEY,MAAC,4CAA4C;AAAA,EACvD,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AACf;AAEY,MAAC,sDAAsD,kEACzC,OAAO,KAAK,yCAAyC,EAAE,KAAK,IAAI;AAE9E,MAAC,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;ACtBA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EACN,YAAY,EAAEC,QAAAA,SAAAA,OAAQ;AAAA,EACtB,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IAED,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IAED,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAO,CAAC,CAACC,0BAAM,SAASA,0BAAM,cAAc,EAAE,SAAS,KAAK,IAAI;AAAA,IACjE;AAAA,IAED,sBAAuB;AACrB,aAAO,KAAK,SAASA,0BAAM;AAAA,IAC5B;AAAA,IAED,gBAAiB;AACf,aAAO,KAAK,SAASA,0BAAM;AAAA,IAC5B;AAAA,IAED,cAAe;AACb,aAAOC,iCAAa,KAAK,IAAI;AAAA,IAC9B;AAAA,IAED,2BAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACAC,0CAAO,KAAK,KAAK;AAAA;IAEpB;AAAA,IAED,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA;IAEH;AAAA,EACF;AACH;;;SAhFU,SAAU,+BADlBC,IAIE,YAAA,oBAAA;AAAA;IAFC,MAAM,SAAW;AAAA,IACjB,MAAM,OAAQ;AAAA,mCAGJ,SAAmB,wCADhCC,IAGE,mBAAA,OAAA;AAAA;IADC,0BAAO,SAAwB,wBAAA;AAAA,iBAGrB,SAAa,kCAD1BA,IASM,mBAAA,OAAA;AAAA;IAPH,0BAAO,SAAc,cAAA;AAAA,IACtB,WAAQ;AAAA;IAERC,IAAAA,YAGE,oBAAA;AAAA,MAFA,MAAK;AAAA,MACL,MAAK;AAAA;;;;ACgJX,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,oBAAAC,qBAAkB;AAAA,IAClB,SAAAC,UAAO;AAAA,IACP,QAAAR,SAAM;AAAA,IACN,UAAAS,WAAQ;AAAA,IACR,WAAAC,YAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS;AACnB,eAAO,OAAO,OAAO,yBAAyB,EAAE,SAAS,IAAI;AAAA,MAC9D;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,UAAU;AACpB,eAAO,OAAO,KAAK,yCAAyC,EAAE,SAAS,KAAK;AAAA,MAC7E;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAS;AACnB,eAAO,+BAA+B,SAAS,IAAI;AAAA,MACpD;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe;AAAA,MACf,YAAY;AAAA;EAEf;AAAA,EAED,UAAU;AAAA,IACR,2BAA4B;AAC1B,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,6BAA6B,CAAC,KAAK;AAAA,UACnC,8BAA8B,KAAK;AAAA,UACnC,gCAAgC,KAAK,mBAAmB,KAAK;AAAA,UAC7D,4BAA4B,KAAK;AAAA,UACjC,yBAAyB,KAAK;AAAA,UAC9B,kCAAkC,KAAK;AAAA,QACxC;AAAA;IAEJ;AAAA,IAED,UAAW;AACT,cAAQ,KAAK,MAAI;AAAA,QACf,KAAK,0BAA0B;AAC7B,cAAI,KAAK;AAAY,mBAAO;AAC5B;AAAA,QACF,KAAK,0BAA0B;AAC7B,cAAI,KAAK;AAAY,mBAAO;AAC5B;AAAA,MACJ;AACA,aAAO,KAAK;AAAA,IACb;AAAA,IAED,sBAAuB;AACrB,aAAOC,aAAmB,oBAAC,KAAK,MAAM;AAAA,IACvC;AAAA,IAED,eAAgB;AACd,aAAO,KAAK,YACR,KAAK,YACLC,+BAAkB,CAAC,KAAK,aAAa,KAAK,oBAAoB,KAAK,cAAc,CAAC;AAAA,IACvF;AAAA,IAED,aAAc;AACZ,aAAO,KAAK,WAAW,KAAK,mBAAmB,KAAK,mBAAmB,KAAK,iBAC1E,KAAK;AAAA,IACR;AAAA,IAED,kBAAmB;AACjB,aAAO,CAAC,CAAC,KAAK,eAAe,KAAK;AAAA,IACnC;AAAA,IAED,yBAA0B;AACxB,aAAO,CAAC,CAAC,KAAK,sBAAsB,KAAK;AAAA,IAC1C;AAAA,IAED,iBAAkB;AAChB,aAAO,KAAK,gBAAgB;AAAA,IAC7B;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,uBAAuB;AAAA,IACpC;AAAA,IAED,sCAAuC;AACrC,aAAO,KAAK,kBAAkB,KAAK;AAAA,IACpC;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,MAAM,UAAW;AACf,aAAK,cAAa;AAClB,cAAM,KAAK;AACX,aAAK,iBAAgB;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,iBAAiB,IAAI,eAAe,KAAK,gBAAgB;AAC9D,SAAK,eAAe,QAAQ,KAAK,GAAG;AACpC,SAAK,iBAAgB;AAAA,EACtB;AAAA,EAED,eAAe,WAAY;AACzB,SAAK,eAAe;EACrB;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB;AACf,UAAI,KAAK,SAAS,0BAA0B,kBAC1C,CAAC,OAAO,KAAK,yCAAyC,EAAE,SAAS,KAAK,KAAK,GAAG;AAC9E,gBAAQ,MAAM,mDAAmD;AAAA,MACnE;AAAA,IACD;AAAA,IAED,mBAAoB;;AAClB,YAAM,eAAa,gBAAK,QAAL,mBAAU,cAAc,gCAAxB,mBAAqD,gBAAe;AACvF,YAAM,eAAa,gBAAK,QAAL,mBAAU,cAAc,8BAAxB,mBAAmD,gBAAe;AACrF,YAAM,eAAa,gBAAK,QAAL,mBAAU,cAAc,8BAAxB,mBAAmD,gBAAe;AACrF,YAAM,WAAW;AACjB,WAAK,aAAa,cAAc,aAAa,aAAa,YAAY;AAAA,IACvE;AAAA,EACF;AACH;;;AA7aQ,MAAA,aAAA,EAAA,OAAM,wBAAuB;;;EAI3B,OAAM;;sDAENC,uCAAQ,QAAA,MAAA,MAAA,EAAA,CAAA;sDAAAA,uCAAQ,QAAA,MAAA,MAAA,EAAA,CAAA;sDAAAA,uCAAQ,QAAA,MAAA,MAAA,EAAA,CAAA;;EAAxB;AAAA,EAAQ;AAAA,EAAQ;;;;EA+BpB,OAAM;;;;EAmBJ,OAAM;;;;EAyCN,OAAM;AAAA,EACN,WAAQ;;;;;;;;;0BAhHdR,IA6IM,mBAAA,OAAA;AAAA,IA5IH,0BAAO,SAAwB,wBAAA;AAAA,IAChC,WAAQ;AAAA;IAERQ,IAAA,mBA4CI,KA5CJC,eA4CI;AAAA,MA3CF,OAAM;AAAA,MACL,WAAO,aAAe,KAAM,SAAG,KAAM,OAAA,SAAA,IAAA;AAAA,MACrC,cAAY,SAAY;AAAA,MACxB,OAAO,OAAW;AAAA,MAClB,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA,OAC7B,KAAM,QACdC,IAAM,WAAoB,SAAD,qBAAA,IAAA,CAAA,GAAA;AAAA,MAEzBF,IAAA,mBAoBM,OApBN,YAoBM;AAAA,QAhBI,OAAQ,YADhBG,IAAAA,UAAA,GAAAX,IAAA,mBAKM,OALN,YAKM,UAAA,KACNY,IAAA,WAUO,iCAVP,MAUO;AAAA,UANLX,IAAAA,YAKE,+CAAA;AAAA,YAJC,MAAM,SAAO;AAAA,YACb,OAAO,OAAK;AAAA,YACZ,aAAW,OAAQ;AAAA,YACpB,WAAQ;AAAA;;;MAIdO,IAAAA,mBAaM,OAAA;AAAA,QAZJ,OAAM;AAAA,QACL,yCAAsB,MAAU,UAAA,EAAA;AAAA;QAEjCI,IAAAA,WAQO,0BARP,MAQO;AAAA,UAPLX,IAAAA,YAMwB,kCAAA;AAAA,YALtB,OAAM;AAAA,YACN,WAAQ;AAAA,YACR,MAAK;AAAA;iCAEL,MAAiB;AAAA,sDAAd,OAAW,WAAA,GAAA,CAAA;AAAA;;;;;;IAMd,SAAU,cADlBU,IAAAA,aAAAX,IAAAA,mBA2FM,OA3FN,YA2FM;AAAA,MAtFI,OAAO,4BADfD,IAca,YAAA,uBAAA;AAAA;QAZX,WAAU;AAAA,QACT,SAAS,OAAc;AAAA;QAEb,oBACT,MAMM;AAAA,UANNS,IAAAA,mBAMM,OAAA;AAAA,YALJ,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,WAAQ;AAAA,iCAEL,OAAO,OAAA,GAAA,GAAA;AAAA;;;MAKR,OAAe,mBADvBG,IAAAA,aAAAX,IAAAA,mBAQM,OARN,YAQM;AAAA,QAJJC,IAAAA,YAGE,oBAAA;AAAA,UAFA,MAAK;AAAA,UACL,MAAK;AAAA;YAII,SAAA,mBAAmB,SAAsB,2CADtDF,IA+Ba,YAAA,uBAAA;AAAA;QA7BV,SAAS,OAAkB;AAAA,QAC5B,WAAU;AAAA;QAEC,oBACT,MAWW;AAAA,UAVH,SAAe,oCADvBA,IAWW,YAAA,qBAAA;AAAA;YATT,MAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAQ;AAAA,YACP,OAAKc,IAAAA,eAAA,CAAA,gCAAA;AAAA,oDAAyG,SAAmC;AAAA;;iCAKlJ,MAAiB;AAAA,sDAAd,OAAW,WAAA,GAAA,CAAA;AAAA;;;UAGR,SAAsB,2CAD9Bd,IAWW,YAAA,qBAAA;AAAA;YATT,MAAK;AAAA,YACL,MAAK;AAAA,YACL,WAAQ;AAAA,YACP,OAAKc,IAAA,eAAA;AAAA,cAAA;AAAA,mEAA6G,SAAqB,sBAAA;AAAA,8DAAyE,SAAmC,oCAAA;AAAA;;iCAKpP,MAAwB;AAAA,sDAArB,OAAkB,kBAAA,GAAA,CAAA;AAAA;;;;;;MAKnB,OAAa,iBADrBF,IAAAA,aAAAX,IAAAA,mBA8BM,OA9BN,aA8BM;AAAA,QAzBJC,IAAAA,YAwBa,uBAAA;AAAA,UAvBV,SAAS,OAAiB;AAAA,UAC3B,WAAU;AAAA;UAEC,oBACT,MAiBY;AAAA,YAjBZA,IAAAA,YAiBY,sBAAA;AAAA,cAhBV,OAAM;AAAA,cACN,WAAQ;AAAA,cACP,QAAQ;AAAA,cACT,MAAK;AAAA,cACL,MAAK;AAAA,cACJ,cAAY,OAAiB;AAAA,cAC7B,+CAAO,MAAa,gBAAA;AAAA,cACpB,8CAAM,MAAa,gBAAA;AAAA,cACnB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAa,kBAAA,YAAO,KAAK,MAAA,QAAS,MAAM,GAAA,CAAA,MAAA,CAAA;AAAA;cAEtB,kBACT,MAGE;AAAA,gBAHFb,IAAAA,YAGE,oBAAA;AAAA,kBAFA,MAAK;AAAA,kBACL,MAAK;AAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"general-row.cjs","sources":["../../recipes/leftbar/general_row/general_row_constants.js","../../recipes/leftbar/general_row/leftbar_general_row_icon.vue","../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  THREADS: 'threads',\n  LAUNCHPAD: 'launchpad',\n  LOCKED_CHANNEL: 'locked channel',\n  CONTACT_CENTER: 'contact center',\n  QUICK_START: 'quick start',\n  COACHING_GROUP: 'coaching group',\n  COACHING_CENTER: 'coaching center',\n  DIALBOT: 'dialbot',\n  ASSIGNED: 'assigned',\n  DIGITAL: 'digital',\n};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: 'layout-template',\n  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n  'locked channel unread': 'lock-filled',\n  'channel unread': 'hash-bold',\n  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n","<template>\n  <dt-icon\n    v-if=\"isIconType\"\n    :name=\"getIconName\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon\n      name=\"dialbot\"\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport {\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING as ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: { DtIcon },\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return ICON_MAPPING[this.type];\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'dt-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"generalRowListeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\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        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            :class=\"['dt-leftbar-row__unread-badge', {\n              'dt-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-mention-badge\"\n            :class=\"['dt-leftbar-row__unread-badge',\n                     { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"phone\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtIcon,\n    DtButton,\n    DtTooltip,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\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. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount || this.showUnreadMentionCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    generalRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton ||\n        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\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    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\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 = 16;\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":["_sfc_main","DtIcon","TYPES","ICON_MAPPING","COLORS","_createBlock","_createElementBlock","_createVNode","DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","extractVueListeners","safeConcatStrings","_createElementVNode","_mergeProps","_toHandlers","_openBlock","_renderSlot","_normalizeClass","_withModifiers"],"mappings":"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"}

package/dist/lib/general-row.js

@@ -378,7 +378,7 @@ const _sfc_main = {
     }
   }
 };
-const _withScopeId = (n) => (pushScopeId("data-v-6ac4ceaa"), n = n(), popScopeId(), n);
+const _withScopeId = (n) => (pushScopeId("data-v-ca21dc4b"), n = n(), popScopeId(), n);
 const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
 const _hoisted_2 = { class: "dt-leftbar-row__alpha" };
 const _hoisted_3 = {
@@ -499,7 +499,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "data-qa": "dt-leftbar-row-unread-mention-badge",
             class: normalizeClass([
               "dt-leftbar-row__unread-badge",
-              { "dt-leftbar-row__unread-mention-count-only-badge": $options.hasUnreadMentionCount },
               { "dt-leftbar-row__unread-mention-count-badge": $options.shouldApplyCustomStyleForCountBadge }
             ])
           }, {
@@ -543,7 +542,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ], 2);
 }
-const DtRecipeGeneralRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-6ac4ceaa"]]);
+const DtRecipeGeneralRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ca21dc4b"]]);
 export {
   DtRecipeGeneralRow,
   LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,

package/dist/lib/general-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"general-row.js","sources":["../../recipes/leftbar/general_row/general_row_constants.js","../../recipes/leftbar/general_row/leftbar_general_row_icon.vue","../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  THREADS: 'threads',\n  LAUNCHPAD: 'launchpad',\n  LOCKED_CHANNEL: 'locked channel',\n  CONTACT_CENTER: 'contact center',\n  QUICK_START: 'quick start',\n  COACHING_GROUP: 'coaching group',\n  COACHING_CENTER: 'coaching center',\n  DIALBOT: 'dialbot',\n  ASSIGNED: 'assigned',\n  DIGITAL: 'digital',\n};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: 'layout-template',\n  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n  'locked channel unread': 'lock-filled',\n  'channel unread': 'hash-bold',\n  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n","<template>\n  <dt-icon\n    v-if=\"isIconType\"\n    :name=\"getIconName\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon\n      name=\"dialbot\"\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport {\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING as ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: { DtIcon },\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return ICON_MAPPING[this.type];\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'dt-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"generalRowListeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\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        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            :class=\"['dt-leftbar-row__unread-badge', {\n              'dt-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-mention-badge\"\n            :class=\"['dt-leftbar-row__unread-badge',\n                     { 'dt-leftbar-row__unread-mention-count-only-badge': hasUnreadMentionCount },\n                     { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"phone\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtIcon,\n    DtButton,\n    DtTooltip,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\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. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount || this.showUnreadMentionCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    generalRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton ||\n        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\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    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\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 = 16;\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":["_sfc_main","TYPES","ICON_MAPPING","COLORS","_createBlock","_createElementBlock","_createVNode","DtEmojiTextWrapper","_createElementVNode","_mergeProps","_toHandlers","_openBlock","_renderSlot","_normalizeClass","_withModifiers"],"mappings":"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"}
+{"version":3,"file":"general-row.js","sources":["../../recipes/leftbar/general_row/general_row_constants.js","../../recipes/leftbar/general_row/leftbar_general_row_icon.vue","../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  THREADS: 'threads',\n  LAUNCHPAD: 'launchpad',\n  LOCKED_CHANNEL: 'locked channel',\n  CONTACT_CENTER: 'contact center',\n  QUICK_START: 'quick start',\n  COACHING_GROUP: 'coaching group',\n  COACHING_CENTER: 'coaching center',\n  DIALBOT: 'dialbot',\n  ASSIGNED: 'assigned',\n  DIGITAL: 'digital',\n};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: 'layout-template',\n  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n  'locked channel unread': 'lock-filled',\n  'channel unread': 'hash-bold',\n  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n","<template>\n  <dt-icon\n    v-if=\"isIconType\"\n    :name=\"getIconName\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon\n      name=\"dialbot\"\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport {\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING as ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: { DtIcon },\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return ICON_MAPPING[this.type];\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'dt-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"generalRowListeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\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        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            :class=\"['dt-leftbar-row__unread-badge', {\n              'dt-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-mention-badge\"\n            :class=\"['dt-leftbar-row__unread-badge',\n                     { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"phone\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtIcon,\n    DtButton,\n    DtTooltip,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\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. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount || this.showUnreadMentionCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    generalRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton ||\n        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\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    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\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 = 16;\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":["_sfc_main","TYPES","ICON_MAPPING","COLORS","_createBlock","_createElementBlock","_createVNode","DtEmojiTextWrapper","_createElementVNode","_mergeProps","_toHandlers","_openBlock","_renderSlot","_normalizeClass","_withModifiers"],"mappings":"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"}

package/dist/lib/tooltip-directive.cjs

@@ -47,6 +47,7 @@ const DtTooltipDirective = {
               key: id,
               message,
               placement,
+              sticky: true,
               /**
                * Set the delay to false when running tests only.
                */

package/dist/lib/tooltip-directive.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-directive.cjs","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport { createApp, getCurrentInstance, h } from 'vue';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (app) {\n    let tooltipInstance;\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = createApp({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      mounted () {\n        tooltipInstance = getCurrentInstance();\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render () {\n        return h('div',\n          this.tooltips.map(({ id, message, placement }) => {\n            return h(DtTooltip, {\n              key: id,\n              message,\n              placement,\n              /**\n               * Set the delay to false when running tests only.\n               */\n              delay: process.env.NODE_ENV !== 'test',\n              externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n            });\n          }),\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.mount(mountPoint);\n\n    app.directive('dt-tooltip', {\n      beforeMount (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      updated (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unmounted (anchor) {\n        tooltipInstance.ctx.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n\n      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":["createApp","DtTooltip","getCurrentInstance","h","getUniqueString"],"mappings":";;;;;;;;;AAIY,MAAC,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAAS,KAAK;AACZ,QAAI;AACJ,UAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,aAAS,KAAK,YAAY,UAAU;AAEpC,UAAM,oBAAoB;AAC1B,UAAM,wBAAwBA,IAAAA,UAAU;AAAA,MACtC,MAAM;AAAA,MACN,YAAY,EAAEC,WAAAA,YAAAA,UAAW;AAAA,MACzB,OAAQ;AACN,eAAO;AAAA,UACL,UAAU,CAAE;AAAA,QACtB;AAAA,MACO;AAAA,MAED,UAAW;AACT,0BAAkBC,IAAkB,mBAAA;AAAA,MACrC;AAAA,MAED,SAAS;AAAA,QACP,mBAAoB,IAAI,SAAS,WAAW;AAC1C,gBAAM,QAAQ,KAAK,SAAS,UAAU,aAAW,QAAQ,OAAO,EAAE;AAClE,cAAI,UAAU,IAAI;AAEhB,iBAAK,SAAS,KAAK,EAAE,UAAU;AAC/B,iBAAK,SAAS,KAAK,EAAE,YAAY;AAAA,UAC7C,OAAiB;AAEL,iBAAK,SAAS,KAAK,EAAE,IAAI,SAAS,UAAS,CAAE;AAAA,UAC9C;AAAA,QACF;AAAA,QAED,cAAe,IAAI;AACjB,eAAK,WAAW,KAAK,SAAS,OAAO,aAAW,QAAQ,OAAO,EAAE;AAAA,QAClE;AAAA,MACF;AAAA,MAED,SAAU;AACR,eAAOC,IAAC;AAAA,UAAC;AAAA,UACP,KAAK,SAAS,IAAI,CAAC,EAAE,IAAI,SAAS,gBAAgB;AAChD,mBAAOA,IAAAA,EAAEF,YAAAA,WAAW;AAAA,cAClB,KAAK;AAAA,cACL;AAAA,cACA;AAAA;AAAA;AAAA;AAAA,cAIA,OAAO,QAAQ,IAAI,aAAa;AAAA,cAChC,gBAAgB,wBAAwB,EAAE;AAAA,YACxD,CAAa;AAAA,UACb,CAAW;AAAA,QACX;AAAA,MACO;AAAA,IACP,CAAK;AAED,0BAAsB,MAAM,UAAU;AAEtC,QAAI,UAAU,cAAc;AAAA,MAC1B,YAAa,QAAQ,SAAS;AAE5B,qBAAa,QAAQ,OAAO;AAAA,MAC7B;AAAA,MACD,QAAS,QAAQ,SAAS;AAExB,YAAI,QAAQ,UAAU,QAAQ,UAAU;AACtC,uBAAa,QAAQ,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACD,UAAW,QAAQ;AACjB,wBAAgB,IAAI,cAAc,OAAO,aAAa,oBAAoB,CAAC;AAAA,MAC5E;AAAA,IACP,CAAK;AAED,aAAS,aAAc,QAAQ,SAAS;AACtC,YAAM,YAAY,OAAO,aAAa,oBAAoB,KAAKG,aAAe,gBAAA;AAC9E,YAAM,UAAU,QAAQ;AACxB,YAAM,YAAY,QAAQ,OAAO;AAEjC,aAAO,aAAa,sBAAsB,SAAS;AAEnD,sBAAgB,IAAI,mBAAmB,WAAW,SAAS,SAAS;AAAA,IACrE;AAAA,EACF;AACH;;"}
+{"version":3,"file":"tooltip-directive.cjs","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport { createApp, getCurrentInstance, h } from 'vue';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (app) {\n    let tooltipInstance;\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = createApp({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      mounted () {\n        tooltipInstance = getCurrentInstance();\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render () {\n        return h('div',\n          this.tooltips.map(({ id, message, placement }) => {\n            return h(DtTooltip, {\n              key: id,\n              message,\n              placement,\n              sticky: true,\n              /**\n               * Set the delay to false when running tests only.\n               */\n              delay: process.env.NODE_ENV !== 'test',\n              externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n            });\n          }),\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.mount(mountPoint);\n\n    app.directive('dt-tooltip', {\n      beforeMount (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      updated (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unmounted (anchor) {\n        tooltipInstance.ctx.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n\n      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":["createApp","DtTooltip","getCurrentInstance","h","getUniqueString"],"mappings":";;;;;;;;;AAIY,MAAC,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAAS,KAAK;AACZ,QAAI;AACJ,UAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,aAAS,KAAK,YAAY,UAAU;AAEpC,UAAM,oBAAoB;AAC1B,UAAM,wBAAwBA,IAAAA,UAAU;AAAA,MACtC,MAAM;AAAA,MACN,YAAY,EAAEC,WAAAA,YAAAA,UAAW;AAAA,MACzB,OAAQ;AACN,eAAO;AAAA,UACL,UAAU,CAAE;AAAA,QACtB;AAAA,MACO;AAAA,MAED,UAAW;AACT,0BAAkBC,IAAkB,mBAAA;AAAA,MACrC;AAAA,MAED,SAAS;AAAA,QACP,mBAAoB,IAAI,SAAS,WAAW;AAC1C,gBAAM,QAAQ,KAAK,SAAS,UAAU,aAAW,QAAQ,OAAO,EAAE;AAClE,cAAI,UAAU,IAAI;AAEhB,iBAAK,SAAS,KAAK,EAAE,UAAU;AAC/B,iBAAK,SAAS,KAAK,EAAE,YAAY;AAAA,UAC7C,OAAiB;AAEL,iBAAK,SAAS,KAAK,EAAE,IAAI,SAAS,UAAS,CAAE;AAAA,UAC9C;AAAA,QACF;AAAA,QAED,cAAe,IAAI;AACjB,eAAK,WAAW,KAAK,SAAS,OAAO,aAAW,QAAQ,OAAO,EAAE;AAAA,QAClE;AAAA,MACF;AAAA,MAED,SAAU;AACR,eAAOC,IAAC;AAAA,UAAC;AAAA,UACP,KAAK,SAAS,IAAI,CAAC,EAAE,IAAI,SAAS,gBAAgB;AAChD,mBAAOA,IAAAA,EAAEF,YAAAA,WAAW;AAAA,cAClB,KAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA,QAAQ;AAAA;AAAA;AAAA;AAAA,cAIR,OAAO,QAAQ,IAAI,aAAa;AAAA,cAChC,gBAAgB,wBAAwB,EAAE;AAAA,YACxD,CAAa;AAAA,UACb,CAAW;AAAA,QACX;AAAA,MACO;AAAA,IACP,CAAK;AAED,0BAAsB,MAAM,UAAU;AAEtC,QAAI,UAAU,cAAc;AAAA,MAC1B,YAAa,QAAQ,SAAS;AAE5B,qBAAa,QAAQ,OAAO;AAAA,MAC7B;AAAA,MACD,QAAS,QAAQ,SAAS;AAExB,YAAI,QAAQ,UAAU,QAAQ,UAAU;AACtC,uBAAa,QAAQ,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACD,UAAW,QAAQ;AACjB,wBAAgB,IAAI,cAAc,OAAO,aAAa,oBAAoB,CAAC;AAAA,MAC5E;AAAA,IACP,CAAK;AAED,aAAS,aAAc,QAAQ,SAAS;AACtC,YAAM,YAAY,OAAO,aAAa,oBAAoB,KAAKG,aAAe,gBAAA;AAC9E,YAAM,UAAU,QAAQ;AACxB,YAAM,YAAY,QAAQ,OAAO;AAEjC,aAAO,aAAa,sBAAsB,SAAS;AAEnD,sBAAgB,IAAI,mBAAmB,WAAW,SAAS,SAAS;AAAA,IACrE;AAAA,EACF;AACH;;"}

package/dist/lib/tooltip-directive.js

@@ -45,6 +45,7 @@ const DtTooltipDirective = {
               key: id,
               message,
               placement,
+              sticky: true,
               /**
                * Set the delay to false when running tests only.
                */

package/dist/lib/tooltip-directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-directive.js","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport { createApp, getCurrentInstance, h } from 'vue';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (app) {\n    let tooltipInstance;\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = createApp({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      mounted () {\n        tooltipInstance = getCurrentInstance();\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render () {\n        return h('div',\n          this.tooltips.map(({ id, message, placement }) => {\n            return h(DtTooltip, {\n              key: id,\n              message,\n              placement,\n              /**\n               * Set the delay to false when running tests only.\n               */\n              delay: process.env.NODE_ENV !== 'test',\n              externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n            });\n          }),\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.mount(mountPoint);\n\n    app.directive('dt-tooltip', {\n      beforeMount (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      updated (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unmounted (anchor) {\n        tooltipInstance.ctx.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n\n      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":[],"mappings":";;;;;;;AAIY,MAAC,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAAS,KAAK;AACZ,QAAI;AACJ,UAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,aAAS,KAAK,YAAY,UAAU;AAEpC,UAAM,oBAAoB;AAC1B,UAAM,wBAAwB,UAAU;AAAA,MACtC,MAAM;AAAA,MACN,YAAY,EAAE,UAAW;AAAA,MACzB,OAAQ;AACN,eAAO;AAAA,UACL,UAAU,CAAE;AAAA,QACtB;AAAA,MACO;AAAA,MAED,UAAW;AACT,0BAAkB,mBAAkB;AAAA,MACrC;AAAA,MAED,SAAS;AAAA,QACP,mBAAoB,IAAI,SAAS,WAAW;AAC1C,gBAAM,QAAQ,KAAK,SAAS,UAAU,aAAW,QAAQ,OAAO,EAAE;AAClE,cAAI,UAAU,IAAI;AAEhB,iBAAK,SAAS,KAAK,EAAE,UAAU;AAC/B,iBAAK,SAAS,KAAK,EAAE,YAAY;AAAA,UAC7C,OAAiB;AAEL,iBAAK,SAAS,KAAK,EAAE,IAAI,SAAS,UAAS,CAAE;AAAA,UAC9C;AAAA,QACF;AAAA,QAED,cAAe,IAAI;AACjB,eAAK,WAAW,KAAK,SAAS,OAAO,aAAW,QAAQ,OAAO,EAAE;AAAA,QAClE;AAAA,MACF;AAAA,MAED,SAAU;AACR,eAAO;AAAA,UAAE;AAAA,UACP,KAAK,SAAS,IAAI,CAAC,EAAE,IAAI,SAAS,gBAAgB;AAChD,mBAAO,EAAE,WAAW;AAAA,cAClB,KAAK;AAAA,cACL;AAAA,cACA;AAAA;AAAA;AAAA;AAAA,cAIA,OAAO,QAAQ,IAAI,aAAa;AAAA,cAChC,gBAAgB,wBAAwB,EAAE;AAAA,YACxD,CAAa;AAAA,UACb,CAAW;AAAA,QACX;AAAA,MACO;AAAA,IACP,CAAK;AAED,0BAAsB,MAAM,UAAU;AAEtC,QAAI,UAAU,cAAc;AAAA,MAC1B,YAAa,QAAQ,SAAS;AAE5B,qBAAa,QAAQ,OAAO;AAAA,MAC7B;AAAA,MACD,QAAS,QAAQ,SAAS;AAExB,YAAI,QAAQ,UAAU,QAAQ,UAAU;AACtC,uBAAa,QAAQ,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACD,UAAW,QAAQ;AACjB,wBAAgB,IAAI,cAAc,OAAO,aAAa,oBAAoB,CAAC;AAAA,MAC5E;AAAA,IACP,CAAK;AAED,aAAS,aAAc,QAAQ,SAAS;AACtC,YAAM,YAAY,OAAO,aAAa,oBAAoB,KAAK,gBAAe;AAC9E,YAAM,UAAU,QAAQ;AACxB,YAAM,YAAY,QAAQ,OAAO;AAEjC,aAAO,aAAa,sBAAsB,SAAS;AAEnD,sBAAgB,IAAI,mBAAmB,WAAW,SAAS,SAAS;AAAA,IACrE;AAAA,EACF;AACH;"}
+{"version":3,"file":"tooltip-directive.js","sources":["../../directives/tooltip/tooltip.js"],"sourcesContent":["import { DtTooltip } from '@/components/tooltip';\nimport { getUniqueString } from '@/common/utils';\nimport { createApp, getCurrentInstance, h } from 'vue';\n\nexport const DtTooltipDirective = {\n  name: 'dt-tooltip-directive',\n  install (app) {\n    let tooltipInstance;\n    const mountPoint = document.createElement('div');\n    document.body.appendChild(mountPoint);\n\n    const DEFAULT_PLACEMENT = 'top';\n    const DtTooltipDirectiveApp = createApp({\n      name: 'DtTooltipDirectiveApp',\n      components: { DtTooltip },\n      data () {\n        return {\n          tooltips: [],\n        };\n      },\n\n      mounted () {\n        tooltipInstance = getCurrentInstance();\n      },\n\n      methods: {\n        addOrUpdateTooltip (id, message, placement) {\n          const index = this.tooltips.findIndex(tooltip => tooltip.id === id);\n          if (index !== -1) {\n            // Update existing tooltip\n            this.tooltips[index].message = message;\n            this.tooltips[index].placement = placement;\n          } else {\n            // Add new tooltip\n            this.tooltips.push({ id, message, placement });\n          }\n        },\n\n        removeTooltip (id) {\n          this.tooltips = this.tooltips.filter(tooltip => tooltip.id !== id);\n        },\n      },\n\n      render () {\n        return h('div',\n          this.tooltips.map(({ id, message, placement }) => {\n            return h(DtTooltip, {\n              key: id,\n              message,\n              placement,\n              sticky: true,\n              /**\n               * Set the delay to false when running tests only.\n               */\n              delay: process.env.NODE_ENV !== 'test',\n              externalAnchor: `[data-dt-tooltip-id=\"${id}\"]`,\n            });\n          }),\n        );\n      },\n    });\n\n    DtTooltipDirectiveApp.mount(mountPoint);\n\n    app.directive('dt-tooltip', {\n      beforeMount (anchor, binding) {\n        // Initial tooltip setup\n        setupTooltip(anchor, binding);\n      },\n      updated (anchor, binding) {\n        // Update tooltip on binding value change\n        if (binding.value !== binding.oldValue) {\n          setupTooltip(anchor, binding);\n        }\n      },\n      unmounted (anchor) {\n        tooltipInstance.ctx.removeTooltip(anchor.getAttribute('data-dt-tooltip-id'));\n      },\n    });\n\n    function setupTooltip (anchor, binding) {\n      const tooltipId = anchor.getAttribute('data-dt-tooltip-id') || getUniqueString();\n      const message = binding.value;\n      const placement = binding.arg || DEFAULT_PLACEMENT;\n\n      anchor.setAttribute('data-dt-tooltip-id', tooltipId);\n\n      tooltipInstance.ctx.addOrUpdateTooltip(tooltipId, message, placement);\n    }\n  },\n};\n\nexport default DtTooltipDirective;\n"],"names":[],"mappings":";;;;;;;AAIY,MAAC,qBAAqB;AAAA,EAChC,MAAM;AAAA,EACN,QAAS,KAAK;AACZ,QAAI;AACJ,UAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,aAAS,KAAK,YAAY,UAAU;AAEpC,UAAM,oBAAoB;AAC1B,UAAM,wBAAwB,UAAU;AAAA,MACtC,MAAM;AAAA,MACN,YAAY,EAAE,UAAW;AAAA,MACzB,OAAQ;AACN,eAAO;AAAA,UACL,UAAU,CAAE;AAAA,QACtB;AAAA,MACO;AAAA,MAED,UAAW;AACT,0BAAkB,mBAAkB;AAAA,MACrC;AAAA,MAED,SAAS;AAAA,QACP,mBAAoB,IAAI,SAAS,WAAW;AAC1C,gBAAM,QAAQ,KAAK,SAAS,UAAU,aAAW,QAAQ,OAAO,EAAE;AAClE,cAAI,UAAU,IAAI;AAEhB,iBAAK,SAAS,KAAK,EAAE,UAAU;AAC/B,iBAAK,SAAS,KAAK,EAAE,YAAY;AAAA,UAC7C,OAAiB;AAEL,iBAAK,SAAS,KAAK,EAAE,IAAI,SAAS,UAAS,CAAE;AAAA,UAC9C;AAAA,QACF;AAAA,QAED,cAAe,IAAI;AACjB,eAAK,WAAW,KAAK,SAAS,OAAO,aAAW,QAAQ,OAAO,EAAE;AAAA,QAClE;AAAA,MACF;AAAA,MAED,SAAU;AACR,eAAO;AAAA,UAAE;AAAA,UACP,KAAK,SAAS,IAAI,CAAC,EAAE,IAAI,SAAS,gBAAgB;AAChD,mBAAO,EAAE,WAAW;AAAA,cAClB,KAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA,QAAQ;AAAA;AAAA;AAAA;AAAA,cAIR,OAAO,QAAQ,IAAI,aAAa;AAAA,cAChC,gBAAgB,wBAAwB,EAAE;AAAA,YACxD,CAAa;AAAA,UACb,CAAW;AAAA,QACX;AAAA,MACO;AAAA,IACP,CAAK;AAED,0BAAsB,MAAM,UAAU;AAEtC,QAAI,UAAU,cAAc;AAAA,MAC1B,YAAa,QAAQ,SAAS;AAE5B,qBAAa,QAAQ,OAAO;AAAA,MAC7B;AAAA,MACD,QAAS,QAAQ,SAAS;AAExB,YAAI,QAAQ,UAAU,QAAQ,UAAU;AACtC,uBAAa,QAAQ,OAAO;AAAA,QAC7B;AAAA,MACF;AAAA,MACD,UAAW,QAAQ;AACjB,wBAAgB,IAAI,cAAc,OAAO,aAAa,oBAAoB,CAAC;AAAA,MAC5E;AAAA,IACP,CAAK;AAED,aAAS,aAAc,QAAQ,SAAS;AACtC,YAAM,YAAY,OAAO,aAAa,oBAAoB,KAAK,gBAAe;AAC9E,YAAM,UAAU,QAAQ;AACxB,YAAM,YAAY,QAAQ,OAAO;AAEjC,aAAO,aAAa,sBAAsB,SAAS;AAEnD,sBAAgB,IAAI,mBAAmB,WAAW,SAAS,SAAS;AAAA,IACrE;AAAA,EACF;AACH;"}

package/dist/style.css

@@ -313,7 +313,7 @@
   background-color: var(--dt-color-surface-contrast);
   color: var(--dt-color-foreground-secondary-inverted);
 }
-.dt-leftbar-row[data-v-6ac4ceaa] {
+.dt-leftbar-row[data-v-ca21dc4b] {
   --leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);
   --leftbar-row-radius: var(--dt-size-radius-pill);
@@ -344,65 +344,61 @@
   transition-timing-function: var(--ttf-out-quint);
   cursor: pointer;
 }
-.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):hover,
-.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):focus-within {
+.dt-leftbar-row[data-v-ca21dc4b]:not(.dt-leftbar-row--no-action):hover,
+.dt-leftbar-row[data-v-ca21dc4b]:not(.dt-leftbar-row--no-action):focus-within {
   --leftbar-row-unread-badge-display: none;
 }
-.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
-.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
+.dt-leftbar-row[data-v-ca21dc4b]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
+.dt-leftbar-row[data-v-ca21dc4b]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
   display: inline-flex;
 }
-.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
-.dt-leftbar-row[data-v-6ac4ceaa]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
+.dt-leftbar-row[data-v-ca21dc4b]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
+.dt-leftbar-row[data-v-ca21dc4b]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
   opacity: 1;
 }
-.dt-leftbar-row[data-v-6ac4ceaa]:hover,
-.dt-leftbar-row[data-v-6ac4ceaa]:focus-within {
+.dt-leftbar-row[data-v-ca21dc4b]:hover,
+.dt-leftbar-row[data-v-ca21dc4b]:focus-within {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
 }
-.dt-leftbar-row[data-v-6ac4ceaa]:hover .d-presence,
-.dt-leftbar-row[data-v-6ac4ceaa]:focus-within .d-presence {
+.dt-leftbar-row[data-v-ca21dc4b]:hover .d-presence,
+.dt-leftbar-row[data-v-ca21dc4b]:focus-within .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row[data-v-6ac4ceaa]:hover .d-avatar__count,
-.dt-leftbar-row[data-v-6ac4ceaa]:focus-within .d-avatar__count {
+.dt-leftbar-row[data-v-ca21dc4b]:hover .d-avatar__count,
+.dt-leftbar-row[data-v-ca21dc4b]:focus-within .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row--has-unread[data-v-6ac4ceaa] {
+.dt-leftbar-row--has-unread[data-v-ca21dc4b] {
   --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
   --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
   --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
 }
-.dt-leftbar-row--unread-count[data-v-6ac4ceaa] .dt-leftbar-row__action {
+.dt-leftbar-row--unread-count[data-v-ca21dc4b] .dt-leftbar-row__action {
   display: none;
 }
-.dt-leftbar-row__unread-count-badge[data-v-6ac4ceaa] {
+.dt-leftbar-row__unread-count-badge[data-v-ca21dc4b] {
   border-top-right-radius: var(--dt-size-radius-0);
   border-bottom-right-radius: var(--dt-size-radius-0);
 }
-.dt-leftbar-row__unread-mention-count-badge[data-v-6ac4ceaa] {
+.dt-leftbar-row__unread-mention-count-badge[data-v-ca21dc4b] {
   border-top-left-radius: var(--dt-size-radius-0);
   border-bottom-left-radius: var(--dt-size-radius-0);
   background-color: var(--dt-color-purple-500);
 }
-.dt-leftbar-row__unread-mention-count-only-badge[data-v-6ac4ceaa] {
-  background-color: var(--dt-color-purple-500);
-  color: var(--dt-color-foreground-primary-inverted);
-}
-.dt-leftbar-row--muted[data-v-6ac4ceaa] {
+.dt-leftbar-row--muted[data-v-ca21dc4b] {
   --leftbar-row-opacity: 60%;
 }
-.dt-leftbar-row--selected[data-v-6ac4ceaa] {
+.dt-leftbar-row--selected[data-v-ca21dc4b] {
   --leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);
   --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground);
 }
-.dt-leftbar-row--selected[data-v-6ac4ceaa] .d-presence {
+.dt-leftbar-row--selected[data-v-ca21dc4b] .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row--selected[data-v-6ac4ceaa] .d-avatar__count {
+.dt-leftbar-row--selected[data-v-ca21dc4b] .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row__is-typing[data-v-6ac4ceaa] {
+.dt-leftbar-row__is-typing[data-v-ca21dc4b] {
   --is-typing-size-shape: var(--dt-size-550);
   height: var(--is-typing-size-shape);
   width: var(--is-typing-size-shape);
@@ -414,7 +410,7 @@
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.75;
 }
-.dt-leftbar-row__is-typing span[data-v-6ac4ceaa] {
+.dt-leftbar-row__is-typing span[data-v-ca21dc4b] {
   transition: all 500ms ease;
   background: var(--dt-color-surface-strong);
   height: 4px;
@@ -423,18 +419,18 @@
   padding: 0;
   opacity: 0.3;
   border-radius: var(--dt-size-radius-pill);
-  animation: wave-6ac4ceaa 1.5s ease infinite;
+  animation: wave-ca21dc4b 1.5s ease infinite;
 }
-.dt-leftbar-row__is-typing span[data-v-6ac4ceaa]:nth-child(1) {
+.dt-leftbar-row__is-typing span[data-v-ca21dc4b]:nth-child(1) {
   animation-delay: 0ms;
 }
-.dt-leftbar-row__is-typing span[data-v-6ac4ceaa]:nth-child(2) {
+.dt-leftbar-row__is-typing span[data-v-ca21dc4b]:nth-child(2) {
   animation-delay: var(--td100);
 }
-.dt-leftbar-row__is-typing span[data-v-6ac4ceaa]:nth-child(3) {
+.dt-leftbar-row__is-typing span[data-v-ca21dc4b]:nth-child(3) {
   animation-delay: var(--td200);
 }
-.dt-leftbar-row__primary[data-v-6ac4ceaa] {
+.dt-leftbar-row__primary[data-v-ca21dc4b] {
   display: flex;
   align-items: center;
   flex: 1;
@@ -451,18 +447,18 @@
   padding: 0;
   border-radius: var(--leftbar-row-radius);
 }
-.dt-leftbar-row__primary[data-v-6ac4ceaa]:active {
+.dt-leftbar-row__primary[data-v-ca21dc4b]:active {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
 }
-.dt-leftbar-row__primary[data-v-6ac4ceaa]:focus-visible {
+.dt-leftbar-row__primary[data-v-ca21dc4b]:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
 }
-.dt-leftbar-row__action-button[data-v-6ac4ceaa] {
+.dt-leftbar-row__action-button[data-v-ca21dc4b] {
   opacity: 0;
   width: var(--leftbar-row-action-width);
   height: var(--leftbar-row-action-height);
 }
-.dt-leftbar-row__alpha[data-v-6ac4ceaa] {
+.dt-leftbar-row__alpha[data-v-ca21dc4b] {
   color: var(--leftbar-row-alpha-color-foreground);
   display: flex;
   box-sizing: border-box;
@@ -474,11 +470,11 @@
   height: var(--leftbar-row-alpha-height);
   border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
 }
-.dt-leftbar-row__label[data-v-6ac4ceaa] {
+.dt-leftbar-row__label[data-v-ca21dc4b] {
   flex: 0 1;
   min-width: 0;
 }
-.dt-leftbar-row__omega[data-v-6ac4ceaa] {
+.dt-leftbar-row__omega[data-v-ca21dc4b] {
   position: absolute;
   display: flex;
   right: var(--leftbar-row-action-position-right);
@@ -490,26 +486,26 @@
   box-sizing: border-box;
   border-radius: var(--leftbar-row-radius);
 }
-.dt-leftbar-row__unread-badge[data-v-6ac4ceaa] {
+.dt-leftbar-row__unread-badge[data-v-ca21dc4b] {
   display: var(--leftbar-row-unread-badge-display);
 }
-.dt-leftbar-row__active-voice[data-v-6ac4ceaa] {
+.dt-leftbar-row__active-voice[data-v-ca21dc4b] {
   color: var(--dt-color-purple-400);
   display: inline-flex;
-  -webkit-animation-name: opacity-pulsate-6ac4ceaa;
+  -webkit-animation-name: opacity-pulsate-ca21dc4b;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-fill-mode: both;
-  -moz-animation-name: opacity-pulsate-6ac4ceaa;
+  -moz-animation-name: opacity-pulsate-ca21dc4b;
   -moz-animation-duration: 1s;
   -moz-animation-iteration-count: infinite;
   -moz-animation-fill-mode: both;
-  animation-name: opacity-pulsate-6ac4ceaa;
+  animation-name: opacity-pulsate-ca21dc4b;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-fill-mode: both;
 }
-.dt-leftbar-row__dnd[data-v-6ac4ceaa] {
+.dt-leftbar-row__dnd[data-v-ca21dc4b] {
   padding-top: var(--dt-space-200);
   padding-right: var(--dt-space-300);
   color: var(--dt-color-foreground-tertiary);
@@ -517,26 +513,26 @@
   line-height: var(--dt-font-line-height-400);
   font-weight: var(--dt-font-weight-medium);
 }
-.dt-leftbar-row__container--off-duty[data-v-6ac4ceaa] {
+.dt-leftbar-row__container--off-duty[data-v-ca21dc4b] {
   border-radius: var(--dt-size-radius-500);
   background-color: var(--dt-badge-color-background-critical);
   border: var(--dt-size-100) solid var(--dt-color-border-subtle);
 }
-.dt-leftbar-row__container--off-duty[data-v-6ac4ceaa] .dt-leftbar-row__primary {
+.dt-leftbar-row__container--off-duty[data-v-ca21dc4b] .dt-leftbar-row__primary {
   margin: calc(var(--dt-size-100) * -1);
 }
-.dt-leftbar-row--contact-centers[data-v-6ac4ceaa] .dt-leftbar-row__alpha {
+.dt-leftbar-row--contact-centers[data-v-ca21dc4b] .dt-leftbar-row__alpha {
   padding-right: var(--dt-space-450);
   padding-left: var(--dt-space-450);
 }
-.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-6ac4ceaa] {
+.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-ca21dc4b] {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   min-width: var(--dt-size-600);
   height: var(--dt-size-500);
 }
-.dt-leftbar-row[data-v-6ac4ceaa] .dt-leftbar-row__description {
+.dt-leftbar-row[data-v-ca21dc4b] .dt-leftbar-row__description {
   display: block;
   font-weight: var(--leftbar-row-description-font-weight);
   font-size: var(--leftbar-row-description-font-size);
@@ -546,7 +542,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dt-leftbar-row[data-v-6ac4ceaa] .dt-leftbar-row__status {
+.dt-leftbar-row[data-v-ca21dc4b] .dt-leftbar-row__status {
   display: block;
   color: var(--leftbar-row-status-color-foreground);
   font-size: var(--leftbar-row-status-font-size);
@@ -556,30 +552,30 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.dt-leftbar-row[data-v-6ac4ceaa] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty):before {
+.dt-leftbar-row[data-v-ca21dc4b] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty):before {
   content: ' • ';
   color: var(--dt-theme-sidebar-status-color-foreground);
 }
-.dt-leftbar-row__icon-cc[data-v-6ac4ceaa] {
+.dt-leftbar-row__icon-cc[data-v-ca21dc4b] {
   border-radius: var(--dt-size-200);
   width: calc(var(--dt-size-300) * 3.5);
   height: calc(var(--dt-size-300) * 3.5);
 }
-.opacity-pulsate[data-v-6ac4ceaa] {
-  -webkit-animation-name: opacity-pulsate-6ac4ceaa;
+.opacity-pulsate[data-v-ca21dc4b] {
+  -webkit-animation-name: opacity-pulsate-ca21dc4b;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-fill-mode: both;
-  -moz-animation-name: opacity-pulsate-6ac4ceaa;
+  -moz-animation-name: opacity-pulsate-ca21dc4b;
   -moz-animation-duration: 1s;
   -moz-animation-iteration-count: infinite;
   -moz-animation-fill-mode: both;
-  animation-name: opacity-pulsate-6ac4ceaa;
+  animation-name: opacity-pulsate-ca21dc4b;
   animation-duration: 1s;
   animation-iteration-count: infinite;
   animation-fill-mode: both;
 }
-@-webkit-keyframes opacity-pulsate-6ac4ceaa {
+@-webkit-keyframes opacity-pulsate-ca21dc4b {
 0%,
   100% {
     opacity: 0.2;
@@ -588,7 +584,7 @@
     opacity: 1;
 }
 }
-@-moz-keyframes opacity-pulsate-6ac4ceaa {
+@-moz-keyframes opacity-pulsate-ca21dc4b {
 0%,
   100% {
     opacity: 0.2;
@@ -597,7 +593,7 @@
     opacity: 1;
 }
 }
-@keyframes opacity-pulsate-6ac4ceaa {
+@keyframes opacity-pulsate-ca21dc4b {
 0%,
   100% {
     opacity: 0.2;
@@ -606,7 +602,7 @@
     opacity: 1;
 }
 }
-@keyframes wave-6ac4ceaa {
+@keyframes wave-ca21dc4b {
 0%,
   50%,
   100% {
@@ -689,10 +685,6 @@
   border-bottom-left-radius: var(--dt-size-radius-0);
   background-color: var(--dt-color-purple-500);
 }
-.dt-leftbar-row__unread-mention-count-only-badge[data-v-094eaef1] {
-  background-color: var(--dt-color-purple-500);
-  color: var(--dt-color-foreground-primary-inverted);
-}
 .dt-leftbar-row--muted[data-v-094eaef1] {
   --leftbar-row-opacity: 60%;
 }

package/dist/types/components/empty_state/empty_state.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty_state.vue.d.ts","sourceRoot":"","sources":["../../../../components/empty_state/empty_state.vue.js"],"names":[],"mappings":";;;;;kBA2N2B,GAAG"}
+{"version":3,"file":"empty_state.vue.d.ts","sourceRoot":"","sources":["../../../../components/empty_state/empty_state.vue.js"],"names":[],"mappings":";;;;;kBAgR2B,GAAG"}

package/dist/types/components/root_layout/root_layout.vue.d.ts

@@ -191,9 +191,9 @@ declare const _default: import("vue").DefineComponent<{
     contentClass: string | Record<string, any> | unknown[];
     headerClass: string | Record<string, any> | unknown[];
     footerClass: string | Record<string, any> | unknown[];
+    bodyClass: string | Record<string, any> | unknown[];
     headerHeight: string;
     headerSticky: boolean;
-    bodyClass: string | Record<string, any> | unknown[];
     sidebarClass: string | Record<string, any> | unknown[];
     sidebarWidth: string;
     sidebarPosition: string;

package/dist/types/directives/tooltip/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../directives/tooltip/tooltip.js"],"names":[],"mappings":";;IAME,iCAkFC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../directives/tooltip/tooltip.js"],"names":[],"mappings":";;IAME,iCAmFC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone-vue",
-  "version": "3.129.0",
+  "version": "3.129.2",
   "description": "Vue component library for Dialpad's design system Dialtone",
   "files": [
     "dist"
@@ -32,7 +32,7 @@
     "regex-combined-emojis": "1.6.0",
     "tippy.js": "6.3.7",
     "@dialpad/dialtone-emojis": "1.0.7",
-    "@dialpad/dialtone-icons": "4.16.3"
+    "@dialpad/dialtone-icons": "4.17.1"
   },
   "devDependencies": {
     "@percy/cli": "1.28.2",
@@ -79,12 +79,12 @@
     "vue-tsc": "^1.8.25",
     "yo": "^5.0.0",
     "yorkie": "^2.0.0",
-    "@dialpad/dialtone-css": "8.34.0",
+    "@dialpad/dialtone-css": "8.35.0",
     "@dialpad/generator-dialtone": "0.1.0"
   },
   "peerDependencies": {
     "vue": ">=3.2",
-    "@dialpad/dialtone-css": "^8.34.0"
+    "@dialpad/dialtone-css": "^8.35.0"
   },
   "bugs": {
     "email": "dialtone@dialpad.com"