@dialpad/dialtone 9.86.0 → 9.86.2

package/dist/vue3/recipes/item_layout/contact_info/contact_info.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact_info.vue.js","sources":["../../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"dt-contact-info\"\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"dt-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"dt-contact-info--avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[{ 'd-mln24': index > 0, 'd-bc-brand': !!avatar.halo }]\"\n          >\n            <template\n              #icon=\"{ iconSize }\"\n            >\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template\n            #icon=\"{ iconSize }\"\n          >\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div data-qa=\"contact-info-header\">\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div data-qa=\"contact-info-subtitle\">\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.bottom\"\n      #bottom\n    >\n      <div data-qa=\"contact-info-bottom\">\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\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: null,\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-contact-info {\n  --contact-info-avatar-border-color: var(--dt-color-surface-primary);\n\n  display: flex;\n\n  &:deep(.d-item-layout) {\n    flex: 1 1 0;\n  }\n\n  &:deep(.d-item-layout--content) {\n    /*\n    DP-74536: Add `min-width` to make the width of \"contact info\" adjustable.\n    */\n    min-width: var(--dt-space-825);\n  }\n\n  &:deep(.d-item-layout--left) {\n    /*\n    DP-74536: To make 'Avatar' in fixed position when resizing the window.\n    */\n    min-width: var(--dt-space-650);\n    justify-content: flex-start;\n    align-items: center;\n  }\n\n  &:deep(.d-item-layout--right) {\n    /*\n    DP-74536: Remove `min-width` which cause extra unused empty space on the right of \"contact info\".\n    */\n    min-width: 0;\n    align-items: center;\n  }\n\n  &__left {\n    position: relative;\n    background-color: transparent;\n    background-image: none;\n    border-width: 0;\n    cursor: pointer;\n  }\n\n  &--avatars {\n    margin-right: var(--dt-space-300-negative);\n    display: flex;\n    flex-direction: row;\n\n    .d-avatar {\n      border-radius: var(--dt-size-radius-pill);\n      border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);\n      box-sizing: unset;\n    }\n  }\n}\n</style>\n"],"names":["_createBlock","_createSlots","_createElementVNode","_renderSlot","_withCtx","_openBlock","_createElementBlock","_Fragment","_renderList","_resolveDynamicComponent"],"mappings":"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"}
+{"version":3,"file":"contact_info.vue.js","sources":["../../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"dt-recipe-contact-info\"\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"dt-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"dt-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[{ 'd-mln24': index > 0, 'd-bc-brand': !!avatar.halo }]\"\n          >\n            <template\n              #icon=\"{ iconSize }\"\n            >\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template\n            #icon=\"{ iconSize }\"\n          >\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div data-qa=\"contact-info-header\">\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div data-qa=\"contact-info-subtitle\">\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.bottom\"\n      #bottom\n    >\n      <div data-qa=\"contact-info-bottom\">\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\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: null,\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar color to display if `avatarSrc` is empty.\n     */\n    avatarColor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_createBlock","_createSlots","_createElementVNode","_renderSlot","_withCtx","_openBlock","_createElementBlock","_Fragment","_renderList","_resolveDynamicComponent"],"mappings":"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"}

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

@@ -5,7 +5,6 @@ const avatar = require("../../../components/avatar/avatar.vue.cjs");
 const badge = require("../../../components/badge/badge.vue.cjs");
 const vue3 = require("@dialpad/dialtone-icons/vue3");
 const vue = require("vue");
-;/* empty css               */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
   name: "DtRecipeCallbox",
@@ -116,30 +115,30 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = {
   key: 0,
-  "data-qa": "dt-recipe-callbox--video-wrapper",
-  class: "dt-recipe-callbox--video"
+  "data-qa": "dt-recipe-callbox__video-wrapper",
+  class: "dt-recipe-callbox__video"
 };
-const _hoisted_3 = { class: "dt-recipe-callbox--main-content-top" };
-const _hoisted_4 = { class: "dt-recipe-callbox--content" };
+const _hoisted_3 = { class: "dt-recipe-callbox__main-content-top" };
+const _hoisted_4 = { class: "dt-recipe-callbox__content" };
 const _hoisted_5 = {
   key: 0,
-  "data-qa": "dt-recipe-callbox--badge-wrapper",
-  class: "dt-recipe-callbox--content-badge"
+  "data-qa": "dt-recipe-callbox__badge-wrapper",
+  class: "dt-recipe-callbox__content-badge"
 };
 const _hoisted_6 = {
   key: 1,
-  "data-qa": "dt-recipe-callbox--subtitle-wrapper",
-  class: "dt-recipe-callbox--content-subtitle"
+  "data-qa": "dt-recipe-callbox__subtitle-wrapper",
+  class: "dt-recipe-callbox__content-subtitle"
 };
 const _hoisted_7 = {
   key: 1,
-  "data-qa": "dt-recipe-callbox--right-wrapper",
-  class: "dt-recipe-callbox--right"
+  "data-qa": "dt-recipe-callbox__right-wrapper",
+  class: "dt-recipe-callbox__right"
 };
 const _hoisted_8 = {
   key: 0,
-  "data-qa": "dt-recipe-callbox--bottom-wrapper",
-  class: "dt-recipe-callbox--main-content-bottom"
+  "data-qa": "dt-recipe-callbox__bottom-wrapper",
+  class: "dt-recipe-callbox__main-content-bottom"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_pause = vue.resolveComponent("dt-icon-pause");
@@ -147,16 +146,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   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, [
-      vue.renderSlot(_ctx.$slots, "video", {}, void 0, true)
+      vue.renderSlot(_ctx.$slots, "video")
     ])) : vue.createCommentVNode("", true),
     vue.createElementVNode("div", {
-      "data-qa": "dt-recipe-callbox--main-content",
-      class: vue.normalizeClass(["dt-recipe-callbox--main-content", $options.borderClass, { "dt-recipe-callbox--clickable": $props.clickable }])
+      "data-qa": "dt-recipe-callbox__main-content",
+      class: vue.normalizeClass(["dt-recipe-callbox__main-content", $options.borderClass, { "dt-recipe-callbox--clickable": $props.clickable }])
     }, [
       vue.createElementVNode("div", _hoisted_3, [
         $options.shouldShowAvatar ? (vue.openBlock(), vue.createBlock(_component_dt_avatar, {
           key: 0,
-          "avatar-class": "dt-recipe-callbox--avatar",
+          "avatar-class": "dt-recipe-callbox__avatar",
           "image-src": $props.avatarSrc,
           "image-alt": "",
           "full-name": $props.avatarFullName,
@@ -175,8 +174,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_4, [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "span"), {
-            "data-qa": "dt-recipe-callbox--title",
-            class: "dt-recipe-callbox--content-title",
+            "data-qa": "dt-recipe-callbox__title",
+            class: "dt-recipe-callbox__content-title",
             onClick: $options.handleClick
           }, {
             default: vue.withCtx(() => [
@@ -190,22 +189,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 class: vue.normalizeClass($options.badgeClass),
                 text: $props.badgeText
               }, null, 8, ["class", "text"])
-            ], true)
+            ])
           ])) : vue.createCommentVNode("", true),
           _ctx.$slots.subtitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
-            vue.renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)
+            vue.renderSlot(_ctx.$slots, "subtitle")
           ])) : vue.createCommentVNode("", true)
         ]),
         _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
-          vue.renderSlot(_ctx.$slots, "right", {}, void 0, true)
+          vue.renderSlot(_ctx.$slots, "right")
         ])) : vue.createCommentVNode("", true)
       ]),
       _ctx.$slots.bottom ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
-        vue.renderSlot(_ctx.$slots, "bottom", {}, void 0, true)
+        vue.renderSlot(_ctx.$slots, "bottom")
       ])) : vue.createCommentVNode("", true)
     ], 2)
   ]);
 }
-const callbox = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0d10d03a"]]);
+const callbox = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
 exports.default = callbox;
 //# sourceMappingURL=callbox.vue.cjs.map

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=\"dt-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox--video-wrapper\"\n      class=\"dt-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=\"['dt-recipe-callbox--main-content', borderClass, { 'dt-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"dt-recipe-callbox--main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"dt-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=\"dt-recipe-callbox--content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox--title\"\n            class=\"dt-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=\"dt-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=\"dt-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=\"dt-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=\"dt-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  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\n<style lang=\"less\" scoped>\n.dt-recipe-callbox {\n  padding: 0;\n  color: var(--dt-color-foreground-primary);\n  background-color: var(--dt-color-surface-primary);\n  border-radius: var(--dt-size-radius-300);\n\n  &--video {\n    display: flex;\n    border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;\n    overflow: clip;\n    margin-bottom: var(--dt-space-300-negative);\n  }\n\n  &--main-content {\n    padding: 0;\n    border-radius: var(--dt-size-radius-300);\n    border: var(--dt-size-border-100) solid transparent;\n    align-items: stretch;\n\n    &.dt-recipe-callbox--border-default {\n      border-color: var(--dt-color-border-default);\n    }\n\n    &.dt-recipe-callbox--border-ai {\n      background:\n        linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;\n    }\n\n    &.dt-recipe-callbox--border-critical {\n      background:\n        radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        radial-gradient(circle, #E7301D, #F78B23) border-box;\n    }\n\n    &-top {\n      display: flex;\n      align-items: center;\n      padding: var(--dt-space-350) var(--dt-space-400);\n    }\n\n    &-bottom {\n      border-top: 1px solid var(--dt-color-border-subtle);\n    }\n  }\n\n  &--avatar {\n    margin-right: var(--dt-space-400);\n  }\n\n  &--content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 0 auto;\n    min-width: 0;\n\n    &-title {\n      overflow: clip;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      color: var(--dt-color-foreground-primary);\n      background-color: var(--dt-color-surface-primary);\n      font-weight: var(--dt-font-weight-bold);\n      border: none;\n      padding: 0;\n      width: 0;\n      min-width: 100%;\n      text-align: left;\n      user-select: text;\n      line-height: normal;\n    }\n\n    &-badge {\n      line-height: normal;\n    }\n\n    &-subtitle {\n      padding: 0;\n      font-size: var(--dt-font-size-100);\n      color: var(--dt-color-foreground-tertiary);\n      line-height: normal;\n      overflow: hidden;\n      width: 0;\n      min-width: 100%;\n    }\n  }\n\n  &--right {\n    display: flex;\n    justify-content: right;\n  }\n\n  &--clickable {\n    .dt-recipe-callbox--content-title {\n      cursor: pointer;\n      user-select: none;\n      border-radius: var(--dt-size-100);\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: var(--dt-shadow-focus);\n      }\n\n      &:hover, &:active {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  .dt-recipe-callbox-badge--warning {\n    background-color: var(--dt-color-surface-warning);\n  }\n}\n</style>\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=\"dt-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"dt-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=\"['dt-recipe-callbox__main-content', borderClass, { 'dt-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"dt-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"dt-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=\"dt-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"dt-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=\"dt-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=\"dt-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=\"dt-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=\"dt-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  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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"}

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

@@ -3,7 +3,6 @@ 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";
-/* empty css             */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
   name: "DtRecipeCallbox",
@@ -114,30 +113,30 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = {
   key: 0,
-  "data-qa": "dt-recipe-callbox--video-wrapper",
-  class: "dt-recipe-callbox--video"
+  "data-qa": "dt-recipe-callbox__video-wrapper",
+  class: "dt-recipe-callbox__video"
 };
-const _hoisted_3 = { class: "dt-recipe-callbox--main-content-top" };
-const _hoisted_4 = { class: "dt-recipe-callbox--content" };
+const _hoisted_3 = { class: "dt-recipe-callbox__main-content-top" };
+const _hoisted_4 = { class: "dt-recipe-callbox__content" };
 const _hoisted_5 = {
   key: 0,
-  "data-qa": "dt-recipe-callbox--badge-wrapper",
-  class: "dt-recipe-callbox--content-badge"
+  "data-qa": "dt-recipe-callbox__badge-wrapper",
+  class: "dt-recipe-callbox__content-badge"
 };
 const _hoisted_6 = {
   key: 1,
-  "data-qa": "dt-recipe-callbox--subtitle-wrapper",
-  class: "dt-recipe-callbox--content-subtitle"
+  "data-qa": "dt-recipe-callbox__subtitle-wrapper",
+  class: "dt-recipe-callbox__content-subtitle"
 };
 const _hoisted_7 = {
   key: 1,
-  "data-qa": "dt-recipe-callbox--right-wrapper",
-  class: "dt-recipe-callbox--right"
+  "data-qa": "dt-recipe-callbox__right-wrapper",
+  class: "dt-recipe-callbox__right"
 };
 const _hoisted_8 = {
   key: 0,
-  "data-qa": "dt-recipe-callbox--bottom-wrapper",
-  class: "dt-recipe-callbox--main-content-bottom"
+  "data-qa": "dt-recipe-callbox__bottom-wrapper",
+  class: "dt-recipe-callbox__main-content-bottom"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_pause = resolveComponent("dt-icon-pause");
@@ -145,16 +144,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_badge = resolveComponent("dt-badge");
   return openBlock(), createElementBlock("div", _hoisted_1, [
     _ctx.$slots.video ? (openBlock(), createElementBlock("div", _hoisted_2, [
-      renderSlot(_ctx.$slots, "video", {}, void 0, true)
+      renderSlot(_ctx.$slots, "video")
     ])) : createCommentVNode("", true),
     createElementVNode("div", {
-      "data-qa": "dt-recipe-callbox--main-content",
-      class: normalizeClass(["dt-recipe-callbox--main-content", $options.borderClass, { "dt-recipe-callbox--clickable": $props.clickable }])
+      "data-qa": "dt-recipe-callbox__main-content",
+      class: normalizeClass(["dt-recipe-callbox__main-content", $options.borderClass, { "dt-recipe-callbox--clickable": $props.clickable }])
     }, [
       createElementVNode("div", _hoisted_3, [
         $options.shouldShowAvatar ? (openBlock(), createBlock(_component_dt_avatar, {
           key: 0,
-          "avatar-class": "dt-recipe-callbox--avatar",
+          "avatar-class": "dt-recipe-callbox__avatar",
           "image-src": $props.avatarSrc,
           "image-alt": "",
           "full-name": $props.avatarFullName,
@@ -173,8 +172,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_4, [
           (openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "span"), {
-            "data-qa": "dt-recipe-callbox--title",
-            class: "dt-recipe-callbox--content-title",
+            "data-qa": "dt-recipe-callbox__title",
+            class: "dt-recipe-callbox__content-title",
             onClick: $options.handleClick
           }, {
             default: withCtx(() => [
@@ -188,23 +187,23 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 class: normalizeClass($options.badgeClass),
                 text: $props.badgeText
               }, null, 8, ["class", "text"])
-            ], true)
+            ])
           ])) : createCommentVNode("", true),
           _ctx.$slots.subtitle ? (openBlock(), createElementBlock("div", _hoisted_6, [
-            renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)
+            renderSlot(_ctx.$slots, "subtitle")
           ])) : createCommentVNode("", true)
         ]),
         _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_7, [
-          renderSlot(_ctx.$slots, "right", {}, void 0, true)
+          renderSlot(_ctx.$slots, "right")
         ])) : createCommentVNode("", true)
       ]),
       _ctx.$slots.bottom ? (openBlock(), createElementBlock("div", _hoisted_8, [
-        renderSlot(_ctx.$slots, "bottom", {}, void 0, true)
+        renderSlot(_ctx.$slots, "bottom")
       ])) : createCommentVNode("", true)
     ], 2)
   ]);
 }
-const callbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0d10d03a"]]);
+const callbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
   callbox as default
 };

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=\"dt-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox--video-wrapper\"\n      class=\"dt-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=\"['dt-recipe-callbox--main-content', borderClass, { 'dt-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"dt-recipe-callbox--main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"dt-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=\"dt-recipe-callbox--content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox--title\"\n            class=\"dt-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=\"dt-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=\"dt-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=\"dt-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=\"dt-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  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\n<style lang=\"less\" scoped>\n.dt-recipe-callbox {\n  padding: 0;\n  color: var(--dt-color-foreground-primary);\n  background-color: var(--dt-color-surface-primary);\n  border-radius: var(--dt-size-radius-300);\n\n  &--video {\n    display: flex;\n    border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;\n    overflow: clip;\n    margin-bottom: var(--dt-space-300-negative);\n  }\n\n  &--main-content {\n    padding: 0;\n    border-radius: var(--dt-size-radius-300);\n    border: var(--dt-size-border-100) solid transparent;\n    align-items: stretch;\n\n    &.dt-recipe-callbox--border-default {\n      border-color: var(--dt-color-border-default);\n    }\n\n    &.dt-recipe-callbox--border-ai {\n      background:\n        linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;\n    }\n\n    &.dt-recipe-callbox--border-critical {\n      background:\n        radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        radial-gradient(circle, #E7301D, #F78B23) border-box;\n    }\n\n    &-top {\n      display: flex;\n      align-items: center;\n      padding: var(--dt-space-350) var(--dt-space-400);\n    }\n\n    &-bottom {\n      border-top: 1px solid var(--dt-color-border-subtle);\n    }\n  }\n\n  &--avatar {\n    margin-right: var(--dt-space-400);\n  }\n\n  &--content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 0 auto;\n    min-width: 0;\n\n    &-title {\n      overflow: clip;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      color: var(--dt-color-foreground-primary);\n      background-color: var(--dt-color-surface-primary);\n      font-weight: var(--dt-font-weight-bold);\n      border: none;\n      padding: 0;\n      width: 0;\n      min-width: 100%;\n      text-align: left;\n      user-select: text;\n      line-height: normal;\n    }\n\n    &-badge {\n      line-height: normal;\n    }\n\n    &-subtitle {\n      padding: 0;\n      font-size: var(--dt-font-size-100);\n      color: var(--dt-color-foreground-tertiary);\n      line-height: normal;\n      overflow: hidden;\n      width: 0;\n      min-width: 100%;\n    }\n  }\n\n  &--right {\n    display: flex;\n    justify-content: right;\n  }\n\n  &--clickable {\n    .dt-recipe-callbox--content-title {\n      cursor: pointer;\n      user-select: none;\n      border-radius: var(--dt-size-100);\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: var(--dt-shadow-focus);\n      }\n\n      &:hover, &:active {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  .dt-recipe-callbox-badge--warning {\n    background-color: var(--dt-color-surface-warning);\n  }\n}\n</style>\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=\"dt-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox__video-wrapper\"\n      class=\"dt-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=\"['dt-recipe-callbox__main-content', borderClass, { 'dt-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"dt-recipe-callbox__main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"dt-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=\"dt-recipe-callbox__content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox__title\"\n            class=\"dt-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=\"dt-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=\"dt-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=\"dt-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=\"dt-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  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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"}

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

@@ -4,9 +4,9 @@ const CALLBOX_BADGE_COLORS = {
   warning: "dt-recipe-callbox-badge--warning"
 };
 const CALLBOX_BORDER_COLORS = {
-  default: "dt-recipe-callbox--border-default",
-  ai: "dt-recipe-callbox--border-ai",
-  critical: "dt-recipe-callbox--border-critical"
+  default: "dt-recipe-callbox__border-default",
+  ai: "dt-recipe-callbox__border-ai",
+  critical: "dt-recipe-callbox__border-critical"
 };
 exports.CALLBOX_BADGE_COLORS = CALLBOX_BADGE_COLORS;
 exports.CALLBOX_BORDER_COLORS = CALLBOX_BORDER_COLORS;

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

@@ -1 +1 @@
-{"version":3,"file":"callbox_constants.cjs","sources":["../../../../recipes/leftbar/callbox/callbox_constants.js"],"sourcesContent":["export const CALLBOX_BADGE_COLORS = {\n  warning: 'dt-recipe-callbox-badge--warning',\n};\n\nexport const CALLBOX_BORDER_COLORS = {\n  default: 'dt-recipe-callbox--border-default',\n  ai: 'dt-recipe-callbox--border-ai',\n  critical: 'dt-recipe-callbox--border-critical',\n};\n\nexport default {\n  CALLBOX_BADGE_COLORS,\n  CALLBOX_BORDER_COLORS,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,uBAAuB;AAAA,EAClC,SAAS;AACX;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;;;"}
+{"version":3,"file":"callbox_constants.cjs","sources":["../../../../recipes/leftbar/callbox/callbox_constants.js"],"sourcesContent":["export const CALLBOX_BADGE_COLORS = {\n  warning: 'dt-recipe-callbox-badge--warning',\n};\n\nexport const CALLBOX_BORDER_COLORS = {\n  default: 'dt-recipe-callbox__border-default',\n  ai: 'dt-recipe-callbox__border-ai',\n  critical: 'dt-recipe-callbox__border-critical',\n};\n\nexport default {\n  CALLBOX_BADGE_COLORS,\n  CALLBOX_BORDER_COLORS,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,uBAAuB;AAAA,EAClC,SAAS;AACX;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;;;"}

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

@@ -2,9 +2,9 @@ const CALLBOX_BADGE_COLORS = {
   warning: "dt-recipe-callbox-badge--warning"
 };
 const CALLBOX_BORDER_COLORS = {
-  default: "dt-recipe-callbox--border-default",
-  ai: "dt-recipe-callbox--border-ai",
-  critical: "dt-recipe-callbox--border-critical"
+  default: "dt-recipe-callbox__border-default",
+  ai: "dt-recipe-callbox__border-ai",
+  critical: "dt-recipe-callbox__border-critical"
 };
 export {
   CALLBOX_BADGE_COLORS,

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

@@ -1 +1 @@
-{"version":3,"file":"callbox_constants.js","sources":["../../../../recipes/leftbar/callbox/callbox_constants.js"],"sourcesContent":["export const CALLBOX_BADGE_COLORS = {\n  warning: 'dt-recipe-callbox-badge--warning',\n};\n\nexport const CALLBOX_BORDER_COLORS = {\n  default: 'dt-recipe-callbox--border-default',\n  ai: 'dt-recipe-callbox--border-ai',\n  critical: 'dt-recipe-callbox--border-critical',\n};\n\nexport default {\n  CALLBOX_BADGE_COLORS,\n  CALLBOX_BORDER_COLORS,\n};\n"],"names":[],"mappings":"AAAY,MAAC,uBAAuB;AAAA,EAClC,SAAS;AACX;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;"}
+{"version":3,"file":"callbox_constants.js","sources":["../../../../recipes/leftbar/callbox/callbox_constants.js"],"sourcesContent":["export const CALLBOX_BADGE_COLORS = {\n  warning: 'dt-recipe-callbox-badge--warning',\n};\n\nexport const CALLBOX_BORDER_COLORS = {\n  default: 'dt-recipe-callbox__border-default',\n  ai: 'dt-recipe-callbox__border-ai',\n  critical: 'dt-recipe-callbox__border-critical',\n};\n\nexport default {\n  CALLBOX_BADGE_COLORS,\n  CALLBOX_BORDER_COLORS,\n};\n"],"names":[],"mappings":"AAAY,MAAC,uBAAuB;AAAA,EAClC,SAAS;AACX;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;"}

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

@@ -5,7 +5,6 @@ const emoji_text_wrapper = require("../../../components/emoji_text_wrapper/emoji
 const DtIconChevronDown = require("@dialpad/dialtone-icons/vue3/chevron-down");
 const DtIconHeadphones = require("@dialpad/dialtone-icons/vue3/headphones");
 const vue = require("vue");
-;/* empty css                           */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
 const button = require("../../../components/button/button.vue.cjs");
 const badge = require("../../../components/badge/badge.vue.cjs");
@@ -87,11 +86,11 @@ const _sfc_main = {
   computed: {
     leftbarContactCentersRowClasses() {
       return [
-        "dt-leftbar-row",
-        "dt-leftbar-row--contact-centers",
+        "dt-recipe-leftbar-row",
+        "dt-recipe-leftbar-row--contact-centers",
         {
-          "dt-leftbar-row--unread-count": this.showUnreadCount,
-          "dt-leftbar-row--selected": this.selected
+          "dt-recipe-leftbar-row__unread-count": this.showUnreadCount,
+          "dt-recipe-leftbar-row--selected": this.selected
         }
       ];
     },
@@ -125,22 +124,22 @@ const _sfc_main = {
   methods: {
     adjustLabelWidth() {
       var _a, _b, _c, _d, _e, _f;
-      const labelWidth = ((_b = (_a = this.$el) == null ? void 0 : _a.querySelector(".dt-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
-      const omegaWidth = ((_d = (_c = this.$el) == null ? void 0 : _c.querySelector(".dt-leftbar-row__omega")) == null ? void 0 : _d.clientWidth) || 0;
-      const alphaWidth = ((_f = (_e = this.$el) == null ? void 0 : _e.querySelector(".dt-leftbar-row__alpha")) == null ? void 0 : _f.clientWidth) || 0;
+      const labelWidth = ((_b = (_a = this.$el) == null ? void 0 : _a.querySelector(".dt-recipe-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
+      const omegaWidth = ((_d = (_c = this.$el) == null ? void 0 : _c.querySelector(".dt-recipe-leftbar-row__omega")) == null ? void 0 : _d.clientWidth) || 0;
+      const alphaWidth = ((_f = (_e = this.$el) == null ? void 0 : _e.querySelector(".dt-recipe-leftbar-row__alpha")) == null ? void 0 : _f.clientWidth) || 0;
       const paddings = 12;
       this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + "px";
     }
   }
 };
 const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
-const _hoisted_2 = { class: "dt-leftbar-row__alpha" };
+const _hoisted_2 = { class: "dt-recipe-leftbar-row__alpha" };
 const _hoisted_3 = {
   key: 0,
-  class: "dt-leftbar-row__omega"
+  class: "dt-recipe-leftbar-row__omega"
 };
-const _hoisted_4 = { class: "dt-leftbar-row__action-container" };
-const _hoisted_5 = { class: "dt-leftbar-row__bottom" };
+const _hoisted_4 = { class: "dt-recipe-leftbar-row__action-container" };
+const _hoisted_5 = { class: "dt-recipe-leftbar-row__bottom" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon_headphones = vue.resolveComponent("dt-icon-headphones");
   const _component_dt_emoji_text_wrapper = vue.resolveComponent("dt-emoji-text-wrapper");
@@ -149,8 +148,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = vue.resolveComponent("dt-button");
   return vue.openBlock(), vue.createElementBlock("div", {
     class: vue.normalizeClass([
-      "dt-leftbar-row__container",
-      { "dt-leftbar-row__container--off-duty": _ctx.$slots.timer }
+      "dt-recipe-leftbar-row__container",
+      { "dt-recipe-leftbar-row__container--off-duty": _ctx.$slots.timer }
     ])
   }, [
     vue.createElementVNode("div", {
@@ -158,8 +157,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       "data-qa": "dt-recipe-contact-centers-row"
     }, [
       vue.createElementVNode("a", vue.mergeProps({
-        class: "dt-leftbar-row__primary",
-        "data-qa": _ctx.$attrs["data-qa"] ?? "dt-leftbar-row-link",
+        class: "dt-recipe-leftbar-row__primary",
+        "data-qa": _ctx.$attrs["data-qa"] ?? "dt-recipe-leftbar-row-link",
         "aria-label": $options.getAriaLabel,
         title: $props.description,
         href: _ctx.$attrs.href ?? "javascript:void(0)"
@@ -169,16 +168,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         vue.createElementVNode("div", _hoisted_2, [
           vue.createVNode(_component_dt_icon_headphones, {
             size: "300",
-            "data-qa": "dt-leftbar-row-icon"
+            "data-qa": "dt-recipe-leftbar-row-icon"
           })
         ]),
         vue.createElementVNode("div", {
-          class: "dt-leftbar-row__label",
+          class: "dt-recipe-leftbar-row__label",
           style: vue.normalizeStyle(`flex-basis: ${$data.labelWidth}`)
         }, [
           vue.createVNode(_component_dt_emoji_text_wrapper, {
-            class: "dt-leftbar-row__description",
-            "data-qa": "dt-leftbar-row-description",
+            class: "dt-recipe-leftbar-row__description",
+            "data-qa": "dt-recipe-leftbar-row-description",
             size: "200"
           }, {
             default: vue.withCtx(() => [
@@ -189,12 +188,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ], 4)
       ], 16, _hoisted_1),
       !$props.hideActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-        vue.renderSlot(_ctx.$slots, "right", {}, void 0, true),
+        vue.renderSlot(_ctx.$slots, "right"),
         vue.createElementVNode("div", _hoisted_4, [
           $options.showUnreadCount ? (vue.openBlock(), vue.createBlock(_component_dt_badge, {
             key: 0,
-            class: "dt-leftbar-row__unread-badge",
-            "data-qa": "dt-leftbar-row-unread-badge",
+            class: "dt-recipe-leftbar-row__unread-badge",
+            "data-qa": "dt-recipe-leftbar-row-unread-badge",
             kind: "count",
             type: "bulletin"
           }, {
@@ -204,8 +203,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             _: 1
           })) : vue.createCommentVNode("", true),
           vue.createVNode(_component_dt_button, {
-            class: "dt-leftbar-row__action",
-            "data-qa": "dt-leftbar-row-action-button",
+            class: "dt-recipe-leftbar-row__action",
+            "data-qa": "dt-recipe-leftbar-row-action-button",
             "aria-label": $props.menuButtonAriaLabel,
             importance: "clear",
             size: "xs",
@@ -221,10 +220,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ])) : vue.createCommentVNode("", true)
     ], 2),
     vue.createElementVNode("div", _hoisted_5, [
-      vue.renderSlot(_ctx.$slots, "timer", {}, void 0, true)
+      vue.renderSlot(_ctx.$slots, "timer")
     ])
   ], 2);
 }
-const contact_centers_row = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0f361db5"]]);
+const contact_centers_row = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
 exports.default = contact_centers_row;
 //# sourceMappingURL=contact_centers_row.vue.cjs.map