@dialpad/dialtone 9.108.0-rebrand-2025-beta.1 → 9.109.0-rebrand-2025-beta.1

package/dist/vue3/recipes/leftbar/callbox/callbox.vue.cjs

@@ -111,32 +111,28 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = {
-  "data-qa": "dt-recipe-callbox",
-  class: "d-recipe-callbox"
-};
-const _hoisted_2 = {
   key: 0,
   "data-qa": "dt-recipe-callbox__video-wrapper",
   class: "d-recipe-callbox__video"
 };
-const _hoisted_3 = { class: "d-recipe-callbox__main-content-top" };
-const _hoisted_4 = { class: "d-recipe-callbox__content" };
-const _hoisted_5 = {
+const _hoisted_2 = { class: "d-recipe-callbox__main-content-top" };
+const _hoisted_3 = { class: "d-recipe-callbox__content" };
+const _hoisted_4 = {
   key: 0,
   "data-qa": "dt-recipe-callbox__badge-wrapper",
   class: "d-recipe-callbox__content-badge"
 };
-const _hoisted_6 = {
+const _hoisted_5 = {
   key: 1,
   "data-qa": "dt-recipe-callbox__subtitle-wrapper",
   class: "d-recipe-callbox__content-subtitle"
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   key: 1,
   "data-qa": "dt-recipe-callbox__right-wrapper",
   class: "d-recipe-callbox__right"
 };
-const _hoisted_8 = {
+const _hoisted_7 = {
   key: 0,
   "data-qa": "dt-recipe-callbox__bottom-wrapper",
   class: "d-recipe-callbox__main-content-bottom"
@@ -145,15 +141,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_pause = vue.resolveComponent("dt-icon-pause");
   const _component_dt_avatar = vue.resolveComponent("dt-avatar");
   const _component_dt_badge = vue.resolveComponent("dt-badge");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    _ctx.$slots.video ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+  return vue.openBlock(), vue.createElementBlock("div", {
+    "data-qa": "dt-recipe-callbox",
+    class: vue.normalizeClass([_ctx.$attrs.class, "d-recipe-callbox"]),
+    style: vue.normalizeStyle(_ctx.$attrs.style)
+  }, [
+    _ctx.$slots.video ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
       vue.renderSlot(_ctx.$slots, "video")
     ])) : vue.createCommentVNode("", true),
     vue.createElementVNode("div", {
       "data-qa": "dt-recipe-callbox__main-content",
       class: vue.normalizeClass(["d-recipe-callbox__main-content", $options.borderClass, { "d-recipe-callbox--clickable": $props.clickable }])
     }, [
-      vue.createElementVNode("div", _hoisted_3, [
+      vue.createElementVNode("div", _hoisted_2, [
         $options.shouldShowAvatar ? (vue.openBlock(), vue.createBlock(_component_dt_avatar, {
           key: 0,
           "avatar-class": "d-recipe-callbox__avatar",
@@ -173,7 +173,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             key: "0"
           } : void 0
         ]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_4, [
+        vue.createElementVNode("div", _hoisted_3, [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "span"), {
             "data-qa": "dt-recipe-callbox__title",
             class: "d-recipe-callbox__content-title",
@@ -184,7 +184,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 1
           }, 8, ["onClick"])),
-          _ctx.$slots.badge || $props.badgeText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          _ctx.$slots.badge || $props.badgeText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
             vue.renderSlot(_ctx.$slots, "badge", {}, () => [
               vue.createVNode(_component_dt_badge, {
                 class: vue.normalizeClass($options.badgeClass),
@@ -192,19 +192,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }, null, 8, ["class", "text"])
             ])
           ])) : vue.createCommentVNode("", true),
-          _ctx.$slots.subtitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+          _ctx.$slots.subtitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
             vue.renderSlot(_ctx.$slots, "subtitle")
           ])) : vue.createCommentVNode("", true)
         ]),
-        _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+        _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
           vue.renderSlot(_ctx.$slots, "right")
         ])) : vue.createCommentVNode("", true)
       ]),
-      _ctx.$slots.bottom ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+      _ctx.$slots.bottom ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
         vue.renderSlot(_ctx.$slots, "bottom")
       ])) : vue.createCommentVNode("", true)
     ], 2)
-  ]);
+  ], 6);
 }
 const callbox = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
 exports.default = callbox;

package/dist/vue3/recipes/leftbar/callbox/callbox.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"callbox.vue.cjs","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    class=\"d-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["DtBadge","DtAvatar","DtIconPause","CALLBOX_BADGE_COLORS","CALLBOX_BORDER_COLORS","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode","_normalizeClass","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"callbox.vue.cjs","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    :class=\"[$attrs.class, 'd-recipe-callbox']\"\n    :style=\"$attrs.style\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["DtBadge","DtAvatar","DtIconPause","CALLBOX_BADGE_COLORS","CALLBOX_BORDER_COLORS","_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_renderSlot","_createCommentVNode","_createElementVNode","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/vue3/recipes/leftbar/callbox/callbox.vue.js

@@ -2,7 +2,7 @@ import { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from "./callbox_constants
 import DtAvatar from "../../../components/avatar/avatar.vue.js";
 import DtBadge from "../../../components/badge/badge.vue.js";
 import { DtIconPause } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, createElementVNode, normalizeClass, createBlock, createSlots, withCtx, createVNode, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createCommentVNode, createElementVNode, createBlock, createSlots, withCtx, createVNode, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
   compatConfig: { MODE: 3 },
@@ -109,32 +109,28 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = {
-  "data-qa": "dt-recipe-callbox",
-  class: "d-recipe-callbox"
-};
-const _hoisted_2 = {
   key: 0,
   "data-qa": "dt-recipe-callbox__video-wrapper",
   class: "d-recipe-callbox__video"
 };
-const _hoisted_3 = { class: "d-recipe-callbox__main-content-top" };
-const _hoisted_4 = { class: "d-recipe-callbox__content" };
-const _hoisted_5 = {
+const _hoisted_2 = { class: "d-recipe-callbox__main-content-top" };
+const _hoisted_3 = { class: "d-recipe-callbox__content" };
+const _hoisted_4 = {
   key: 0,
   "data-qa": "dt-recipe-callbox__badge-wrapper",
   class: "d-recipe-callbox__content-badge"
 };
-const _hoisted_6 = {
+const _hoisted_5 = {
   key: 1,
   "data-qa": "dt-recipe-callbox__subtitle-wrapper",
   class: "d-recipe-callbox__content-subtitle"
 };
-const _hoisted_7 = {
+const _hoisted_6 = {
   key: 1,
   "data-qa": "dt-recipe-callbox__right-wrapper",
   class: "d-recipe-callbox__right"
 };
-const _hoisted_8 = {
+const _hoisted_7 = {
   key: 0,
   "data-qa": "dt-recipe-callbox__bottom-wrapper",
   class: "d-recipe-callbox__main-content-bottom"
@@ -143,15 +139,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_pause = resolveComponent("dt-icon-pause");
   const _component_dt_avatar = resolveComponent("dt-avatar");
   const _component_dt_badge = resolveComponent("dt-badge");
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    _ctx.$slots.video ? (openBlock(), createElementBlock("div", _hoisted_2, [
+  return openBlock(), createElementBlock("div", {
+    "data-qa": "dt-recipe-callbox",
+    class: normalizeClass([_ctx.$attrs.class, "d-recipe-callbox"]),
+    style: normalizeStyle(_ctx.$attrs.style)
+  }, [
+    _ctx.$slots.video ? (openBlock(), createElementBlock("div", _hoisted_1, [
       renderSlot(_ctx.$slots, "video")
     ])) : createCommentVNode("", true),
     createElementVNode("div", {
       "data-qa": "dt-recipe-callbox__main-content",
       class: normalizeClass(["d-recipe-callbox__main-content", $options.borderClass, { "d-recipe-callbox--clickable": $props.clickable }])
     }, [
-      createElementVNode("div", _hoisted_3, [
+      createElementVNode("div", _hoisted_2, [
         $options.shouldShowAvatar ? (openBlock(), createBlock(_component_dt_avatar, {
           key: 0,
           "avatar-class": "d-recipe-callbox__avatar",
@@ -171,7 +171,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             key: "0"
           } : void 0
         ]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_4, [
+        createElementVNode("div", _hoisted_3, [
           (openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "span"), {
             "data-qa": "dt-recipe-callbox__title",
             class: "d-recipe-callbox__content-title",
@@ -182,7 +182,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 1
           }, 8, ["onClick"])),
-          _ctx.$slots.badge || $props.badgeText ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          _ctx.$slots.badge || $props.badgeText ? (openBlock(), createElementBlock("div", _hoisted_4, [
             renderSlot(_ctx.$slots, "badge", {}, () => [
               createVNode(_component_dt_badge, {
                 class: normalizeClass($options.badgeClass),
@@ -190,19 +190,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }, null, 8, ["class", "text"])
             ])
           ])) : createCommentVNode("", true),
-          _ctx.$slots.subtitle ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          _ctx.$slots.subtitle ? (openBlock(), createElementBlock("div", _hoisted_5, [
             renderSlot(_ctx.$slots, "subtitle")
           ])) : createCommentVNode("", true)
         ]),
-        _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_7, [
+        _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_6, [
           renderSlot(_ctx.$slots, "right")
         ])) : createCommentVNode("", true)
       ]),
-      _ctx.$slots.bottom ? (openBlock(), createElementBlock("div", _hoisted_8, [
+      _ctx.$slots.bottom ? (openBlock(), createElementBlock("div", _hoisted_7, [
         renderSlot(_ctx.$slots, "bottom")
       ])) : createCommentVNode("", true)
     ], 2)
-  ]);
+  ], 6);
 }
 const callbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/recipes/leftbar/callbox/callbox.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"callbox.vue.js","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    class=\"d-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode","_normalizeClass","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"callbox.vue.js","sources":["../../../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    :class=\"[$attrs.class, 'd-recipe-callbox']\"\n    :style=\"$attrs.style\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"d-recipe-callbox__video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox__main-content\"\n      :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"d-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"d-recipe-callbox__avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        >\n          <template\n            v-if=\"isOnHold\"\n            #overlayIcon\n          >\n            <dt-icon-pause />\n          </template>\n        </dt-avatar>\n        <div class=\"d-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"d-recipe-callbox__content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox__badge-wrapper\"\n            class=\"d-recipe-callbox__content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n            class=\"d-recipe-callbox__content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox__right-wrapper\"\n          class=\"d-recipe-callbox__right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n        class=\"d-recipe-callbox__main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar, DtIconPause },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_renderSlot","_createCommentVNode","_createElementVNode","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":"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"}

package/dist/vue3/recipes/leftbar/contact_centers_row/contact_centers_row.vue.cjs

@@ -123,6 +123,8 @@ const _sfc_main = {
     this.resizeObserver.disconnect();
   },
   methods: {
+    removeClassStyleAttrs: common_utils.removeClassStyleAttrs,
+    addClassStyleAttrs: common_utils.addClassStyleAttrs,
     adjustLabelWidth() {
       var _a, _b, _c, _d, _e, _f;
       const labelWidth = ((_b = (_a = common_utils.returnFirstEl(this.$el)) == null ? void 0 : _a.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
@@ -147,12 +149,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_badge = vue.resolveComponent("dt-badge");
   const _component_dt_icon_chevron_down = vue.resolveComponent("dt-icon-chevron-down");
   const _component_dt_button = vue.resolveComponent("dt-button");
-  return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass([
+  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    class: [
       "d-recipe-leftbar-row__container",
       { "d-recipe-leftbar-row__container--off-duty": _ctx.$slots.timer }
-    ])
-  }, [
+    ]
+  }, $options.addClassStyleAttrs(_ctx.$attrs)), [
     vue.createElementVNode("div", {
       class: vue.normalizeClass($options.leftbarContactCentersRowClasses),
       "data-qa": "dt-recipe-contact-centers-row"
@@ -163,7 +165,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": $options.getAriaLabel,
         title: $props.description,
         href: _ctx.$attrs.href ?? "javascript:void(0)"
-      }, _ctx.$attrs, vue.toHandlers($options.contactRowListeners, true), {
+      }, $options.removeClassStyleAttrs(_ctx.$attrs), vue.toHandlers($options.contactRowListeners, true), {
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
       }), [
         vue.createElementVNode("div", _hoisted_2, [
@@ -223,7 +225,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createElementVNode("div", _hoisted_5, [
       vue.renderSlot(_ctx.$slots, "timer")
     ])
-  ], 2);
+  ], 16);
 }
 const contact_centers_row = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
 exports.default = contact_centers_row;

package/dist/vue3/recipes/leftbar/contact_centers_row/contact_centers_row.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact_centers_row.vue.cjs","sources":["../../../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"$attrs\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"d-recipe-leftbar-row__description\"\n            data-qa=\"dt-recipe-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div\n        v-if=\"!hideActions\"\n        class=\"d-recipe-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonAriaLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, returnFirstEl } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactCentersRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Making this true will hide the unread count badge, the chevron button, and the right slot\n     */\n    hideActions: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages, could be a string to support '99+'\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Aria label for the menu button.\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      async handler () {\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtBadge","DtEmojiTextWrapper","safeConcatStrings","extractVueListeners","returnFirstEl","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_normalizeStyle","_withCtx","_createTextVNode","_toDisplayString","_openBlock","_renderSlot","_createBlock","_createCommentVNode","_withModifiers"],"mappings":"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"}
+{"version":3,"file":"contact_centers_row.vue.cjs","sources":["../../../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"d-recipe-leftbar-row__description\"\n            data-qa=\"dt-recipe-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </div>\n      </a>\n      <div\n        v-if=\"!hideActions\"\n        class=\"d-recipe-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonAriaLabel\"\n            importance=\"clear\"\n            size=\"xs\"\n            circle\n            @click.stop=\"$emit('click-menu', $event)\"\n          >\n            <template #icon>\n              <dt-icon-chevron-down size=\"100\" />\n            </template>\n          </dt-button>\n        </div>\n      </div>\n    </div>\n    <div class=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactCentersRow',\n\n  components: {\n    DtButton,\n    DtBadge,\n    DtEmojiTextWrapper,\n    DtIconHeadphones,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Making this true will hide the unread count badge, the chevron button, and the right slot\n     */\n    hideActions: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages, could be a string to support '99+'\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Aria label for the menu button.\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Menu button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click-menu',\n  ],\n\n  data () {\n    return {\n      labelWidth: 'auto',\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      async handler () {\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtBadge","DtEmojiTextWrapper","safeConcatStrings","extractVueListeners","returnFirstEl","removeClassStyleAttrs","addClassStyleAttrs","_openBlock","_createElementBlock","_mergeProps","_createElementVNode","_normalizeClass","_toHandlers","_createVNode","_normalizeStyle","_withCtx","_createTextVNode","_toDisplayString","_renderSlot","_createBlock","_createCommentVNode","_withModifiers"],"mappings":";;;;;;;;;;AAsFA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAA,OAAQ;AAAA,IACR,SAAAC,MAAO;AAAA,IACP,oBAAAC,mBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,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,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,YAAY;AAAA;EAEf;AAAA,EAED,UAAU;AAAA,IACR,kCAAmC;AACjC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,UACE,sCAAsC,KAAK;AAAA,UAC3C,kCAAkC,KAAK;AAAA,QACxC;AAAA;IAEJ;AAAA,IAED,eAAgB;AACd,aAAO,KAAK,YACR,KAAK,YACLC,aAAiB,kBAAC,CAAC,KAAK,aAAa,KAAK,kBAAkB,CAAC;AAAA,IAClE;AAAA,IAED,sBAAuB;AACrB,aAAOC,aAAmB,oBAAC,KAAK,MAAM;AAAA,IACvC;AAAA,IAED,kBAAmB;AACjB,aAAO,CAAC,CAAC,KAAK;AAAA,IACf;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM,UAAW;AACf,cAAM,KAAK;AACX,aAAK,iBAAgB;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,iBAAiB,IAAI,eAAe,KAAK,gBAAgB;AAC9D,SAAK,eAAe,QAAQC,aAAa,cAAC,KAAK,GAAG,CAAC;AACnD,SAAK,iBAAgB;AAAA,EACtB;AAAA,EAED,eAAe,WAAY;AACzB,SAAK,eAAe;EACrB;AAAA,EAED,SAAS;AAAA,IACP,uBAAAC,aAAqB;AAAA,IACrB,oBAAAC,aAAkB;AAAA,IAElB,mBAAoB;;AAClB,YAAM,eAAaF,sCAAc,KAAK,GAAG,MAAtBA,mBAAyB,cAAc,sCAAvCA,mBAA0E,gBAAe;AAC5G,YAAM,eAAaA,sCAAc,KAAK,GAAG,MAAtBA,mBAAyB,cAAc,oCAAvCA,mBAAwE,gBAAe;AAC1G,YAAM,eAAaA,sCAAc,KAAK,GAAG,MAAtBA,mBAAyB,cAAc,oCAAvCA,mBAAwE,gBAAe;AAC1G,YAAM,WAAW;AACjB,WAAK,aAAa,cAAc,aAAa,aAAa,YAAY;AAAA,IACvE;AAAA,EACF;AACH;AAzOA,MAAA,aAAA,CAAA,WAAA,cAAA,SAAA,MAAA;AAsBa,MAAA,aAAA,EAAA,OAAM,8BAA6B;;EAtBhD,KAAA;AAAA,EA2CQ,OAAM;;AAGD,MAAA,aAAA,EAAA,OAAM,yCAAwC;AA0BlD,MAAA,aAAA,EAAA,OAAM,+BAA8B;;;;;;;AAvE3C,SAAAG,cAAA,GAAAC,uBA0EM,OA1ENC,IAAAA,WA0EM;AAAA,IAzEH,OAAK;AAAA;MAAkG,EAAA,6CAAA,KAAA,OAAO,MAAK;AAAA;EAI5G,GAAA,SAAA,mBAAmB,KAAM,MAAA,CAAA,GAAA;AAAA,IAEjCC,IAAAA,mBA+DM,OAAA;AAAA,MA9DH,OATPC,IAAAA,eASc,SAA+B,+BAAA;AAAA,MACvC,WAAQ;AAAA;MAERD,IAAA,mBA4BI,KA5BJD,eA4BI;AAAA,QA3BF,OAAM;AAAA,QACL,WAAS,KAAM,OAAA,SAAA,KAAA;AAAA,QACf,cAAY,SAAY;AAAA,QACxB,OAAO,OAAW;AAAA,QAClB,MAAM,KAAM,OAAC,QAAI;AAAA,MACV,GAAA,SAAA,sBAAsB,KAAA,MAAM,GACpCG,IAAAA,WAA0B,SAAD,qBAAA,IAAA,GAAA;AAAA,QACxB,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,SAAU,MAAM;AAAA;QAE7BF,IAAA,mBAKM,OALN,YAKM;AAAA,UAJJG,IAAAA,YAGE,+BAAA;AAAA,YAFA,MAAK;AAAA,YACL,WAAQ;AAAA;;QAGZH,IAAAA,mBAWM,OAAA;AAAA,UAVJ,OAAM;AAAA,UACL,OA9BXI,kCA8BiC,MAAU,UAAA,EAAA;AAAA;UAEjCD,IAAAA,YAMwB,kCAAA;AAAA,YALtB,OAAM;AAAA,YACN,WAAQ;AAAA,YACR,MAAK;AAAA;YAnCjB,SAAAE,IAAA,QAqCY,MAAiB;AAAA,cArC7BC,IAAAA,gBAAAC,IAAAA,gBAqCe,OAAW,WAAA,GAAA,CAAA;AAAA;YArC1B,GAAA;AAAA;;MAAA,GAAA,IAAA,UAAA;AAAA,OA0Ce,OAAW,eADpBV,IAAAA,aAAAC,IAAAA,mBA6BM,OA7BN,YA6BM;AAAA,QAzBJU,eAAqB,KAAA,QAAA,OAAA;AAAA,QACrBR,IAAA,mBAuBM,OAvBN,YAuBM;AAAA,UArBI,SAAe,oCADvBS,IAQW,YAAA,qBAAA;AAAA,YAvDrB,KAAA;AAAA,YAiDY,OAAM;AAAA,YACN,WAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAK;AAAA;YApDjB,SAAAJ,IAAA,QAsDY,MAAiB;AAAA,cAtD7BC,IAAAA,gBAAAC,IAAAA,gBAsDe,OAAW,WAAA,GAAA,CAAA;AAAA;YAtD1B,GAAA;AAAA,gBAAAG,IAAA,mBAAA,IAAA,IAAA;AAAA,UAwDUP,IAAAA,YAYY,sBAAA;AAAA,YAXV,OAAM;AAAA,YACN,WAAQ;AAAA,YACP,cAAY,OAAmB;AAAA,YAChC,YAAW;AAAA,YACX,MAAK;AAAA,YACL,QAAA;AAAA,YACC,SA/Db,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAQ,kBAAA,YA+DyB,KAAK,MAAA,cAAe,MAAM,GAAA,CAAA,MAAA,CAAA;AAAA;YAE5B,kBACT,MAAmC;AAAA,cAAnCR,IAAAA,YAAmC,iCAAA,EAAb,MAAK,MAAK,CAAA;AAAA;YAlE9C,GAAA;AAAA;;YAAAO,IAAA,mBAAA,IAAA,IAAA;AAAA;IAwEIV,IAAA,mBAEM,OAFN,YAEM;AAAA,MADJQ,eAAqB,KAAA,QAAA,OAAA;AAAA;;;;;"}

package/dist/vue3/recipes/leftbar/contact_centers_row/contact_centers_row.vue.js

@@ -1,8 +1,8 @@
-import { safeConcatStrings, extractVueListeners, returnFirstEl } from "../../../common/utils.js";
+import { safeConcatStrings, extractVueListeners, returnFirstEl, removeClassStyleAttrs, addClassStyleAttrs } from "../../../common/utils.js";
 import DtEmojiTextWrapper from "../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js";
 import DtIconChevronDown from "@dialpad/dialtone-icons/vue3/chevron-down";
 import DtIconHeadphones from "@dialpad/dialtone-icons/vue3/headphones";
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, toHandlers, createVNode, normalizeStyle, withCtx, createTextVNode, toDisplayString, renderSlot, createBlock, createCommentVNode, withModifiers } from "vue";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, toHandlers, createVNode, normalizeStyle, withCtx, createTextVNode, toDisplayString, renderSlot, createBlock, createCommentVNode, withModifiers } from "vue";
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 import DtButton from "../../../components/button/button.vue.js";
 import DtBadge from "../../../components/badge/badge.vue.js";
@@ -121,6 +121,8 @@ const _sfc_main = {
     this.resizeObserver.disconnect();
   },
   methods: {
+    removeClassStyleAttrs,
+    addClassStyleAttrs,
     adjustLabelWidth() {
       var _a, _b, _c, _d, _e, _f;
       const labelWidth = ((_b = (_a = returnFirstEl(this.$el)) == null ? void 0 : _a.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
@@ -145,12 +147,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_badge = resolveComponent("dt-badge");
   const _component_dt_icon_chevron_down = resolveComponent("dt-icon-chevron-down");
   const _component_dt_button = resolveComponent("dt-button");
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass([
+  return openBlock(), createElementBlock("div", mergeProps({
+    class: [
       "d-recipe-leftbar-row__container",
       { "d-recipe-leftbar-row__container--off-duty": _ctx.$slots.timer }
-    ])
-  }, [
+    ]
+  }, $options.addClassStyleAttrs(_ctx.$attrs)), [
     createElementVNode("div", {
       class: normalizeClass($options.leftbarContactCentersRowClasses),
       "data-qa": "dt-recipe-contact-centers-row"
@@ -161,7 +163,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": $options.getAriaLabel,
         title: $props.description,
         href: _ctx.$attrs.href ?? "javascript:void(0)"
-      }, _ctx.$attrs, toHandlers($options.contactRowListeners, true), {
+      }, $options.removeClassStyleAttrs(_ctx.$attrs), toHandlers($options.contactRowListeners, true), {
         onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
       }), [
         createElementVNode("div", _hoisted_2, [
@@ -221,7 +223,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createElementVNode("div", _hoisted_5, [
       renderSlot(_ctx.$slots, "timer")
     ])
-  ], 2);
+  ], 16);
 }
 const contact_centers_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/recipes/leftbar/contact_centers_row/contact_centers_row.vue.js.map

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

package/dist/vue3/recipes/leftbar/general_row/general_row.vue.cjs

@@ -258,6 +258,8 @@ const _sfc_main = {
     this.resizeObserver.disconnect();
   },
   methods: {
+    removeClassStyleAttrs: common_utils.removeClassStyleAttrs,
+    addClassStyleAttrs: common_utils.addClassStyleAttrs,
     validateProps() {
       if (this.type === general_row_constants.LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER && !Object.keys(general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {
         console.error(general_row_constants.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);
@@ -308,17 +310,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_badge = vue.resolveComponent("dt-badge");
   const _component_dt_icon_phone = vue.resolveComponent("dt-icon-phone");
   const _component_dt_button = vue.resolveComponent("dt-button");
-  return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass($options.leftbarGeneralRowClasses),
-    "data-qa": "dt-recipe-leftbar-row"
-  }, [
+  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.leftbarGeneralRowClasses }, $options.addClassStyleAttrs(_ctx.$attrs), { "data-qa": "dt-recipe-leftbar-row" }), [
     vue.createElementVNode("a", vue.mergeProps({
       class: "d-recipe-leftbar-row__primary",
       "data-qa": "data-qa" in _ctx.$attrs ? _ctx.$attrs["data-qa"] : "d-recipe-leftbar-row-link",
       "aria-label": $options.getAriaLabel,
       title: $props.description,
       href: "href" in _ctx.$attrs ? _ctx.$attrs.href : "javascript:void(0)"
-    }, _ctx.$attrs, vue.toHandlers($options.generalRowListeners, true)), [
+    }, $options.removeClassStyleAttrs(_ctx.$attrs), vue.toHandlers($options.generalRowListeners, true)), [
       vue.createElementVNode("div", _hoisted_2, [
         $props.isTyping ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _hoisted_7)) : vue.renderSlot(_ctx.$slots, "left", { key: 1 }, () => [
           vue.createVNode(_component_dt_recipe_leftbar_general_row_icon, {
@@ -430,7 +429,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         }, 8, ["message"])
       ])) : vue.createCommentVNode("", true)
     ])) : vue.createCommentVNode("", true)
-  ], 2);
+  ], 16);
 }
 const DtRecipeGeneralRow = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
 exports.default = DtRecipeGeneralRow;