@dialpad/dialtone-vue 2.181.0 → 2.182.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/recipes/leftbar/callbox/callbox.vue.cjs +1 -1
  2. package/dist/recipes/leftbar/callbox/callbox.vue.cjs.map +1 -1
  3. package/dist/recipes/leftbar/callbox/callbox.vue.js +1 -1
  4. package/dist/recipes/leftbar/callbox/callbox.vue.js.map +1 -1
  5. package/dist/types/recipes/leftbar/callbox/callbox.vue.d.ts.map +1 -1
  6. package/package.json +5 -5
package/dist/recipes/leftbar/callbox/callbox.vue.cjs CHANGED
@@ -112,7 +112,7 @@ var _sfc_render = function render() {
112
112
  var _vm = this, _c = _vm._self._c;
113
113
  return _c("div", { staticClass: "d-recipe-callbox", attrs: { "data-qa": "dt-recipe-callbox" } }, [_vm.$slots.video ? _c("div", { staticClass: "d-recipe-callbox__video", attrs: { "data-qa": "dt-recipe-callbox__video-wrapper" } }, [_vm._t("video")], 2) : _vm._e(), _c("div", { class: ["d-recipe-callbox__main-content", _vm.borderClass, { "d-recipe-callbox--clickable": _vm.clickable }], attrs: { "data-qa": "dt-recipe-callbox__main-content" } }, [_c("div", { staticClass: "d-recipe-callbox__main-content-top" }, [_vm.shouldShowAvatar ? _c("dt-avatar", { attrs: { "avatar-class": "d-recipe-callbox__avatar", "image-src": _vm.avatarSrc, "image-alt": "", "full-name": _vm.avatarFullName, "seed": _vm.avatarSeed, "clickable": _vm.clickable, "size": "sm" }, on: { "click": _vm.handleClick }, scopedSlots: _vm._u([_vm.isOnHold ? { key: "overlayIcon", fn: function() {
114
114
  return [_c("dt-icon-pause")];
115
- }, proxy: true } : null], null, true) }) : _vm._e(), _c("div", { staticClass: "d-recipe-callbox__content" }, [_c(_vm.clickable ? "button" : "span", { tag: "component", staticClass: "d-recipe-callbox__content-title", attrs: { "data-qa": "dt-recipe-callbox__title" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "d-recipe-callbox__content-badge", attrs: { "data-qa": "dt-recipe-callbox__badge-wrapper" } }, [_vm._t("badge", function() {
115
+ }, proxy: true } : null], null, true) }) : _vm._e(), _c("div", { staticClass: "d-recipe-callbox__content" }, [_c(_vm.clickable ? "button" : "span", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.title, expression: "title" }], tag: "component", staticClass: "d-recipe-callbox__content-title", attrs: { "data-qa": "dt-recipe-callbox__title", "tabindex": "0" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "d-recipe-callbox__content-badge", attrs: { "data-qa": "dt-recipe-callbox__badge-wrapper" } }, [_vm._t("badge", function() {
116
116
  return [_c("dt-badge", { class: _vm.badgeClass, attrs: { "text": _vm.badgeText } })];
117
117
  })], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { staticClass: "d-recipe-callbox__content-subtitle", attrs: { "data-qa": "dt-recipe-callbox__subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e()], 1), _vm.$slots.right ? _c("div", { staticClass: "d-recipe-callbox__right", attrs: { "data-qa": "dt-recipe-callbox__right-wrapper" } }, [_vm._t("right")], 2) : _vm._e()], 1), _vm.$slots.bottom ? _c("div", { staticClass: "d-recipe-callbox__main-content-bottom", attrs: { "data-qa": "dt-recipe-callbox__bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()])]);
118
118
  };
package/dist/recipes/leftbar/callbox/callbox.vue.cjs.map CHANGED
@@ -1 +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/vue2';\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"],"mappings":";;;;;;;AA+FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAAA,SAAAA,MAAAA,mBAAAC,OAAA,SAAA,aAAAC,iBAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAAC,kBAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAAC,uCAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAAD,kBAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAC,kBAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
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 v-dt-tooltip=\"title\"\n data-qa=\"dt-recipe-callbox__title\"\n class=\"d-recipe-callbox__content-title\"\n tabindex=\"0\"\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/vue2';\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"],"mappings":";;;;;;;AAiGA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAAA,SAAAA,MAAAA,mBAAAC,OAAA,SAAA,aAAAC,iBAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAAC,kBAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAAC,uCAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAAD,kBAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAC,kBAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
package/dist/recipes/leftbar/callbox/callbox.vue.js CHANGED
@@ -110,7 +110,7 @@ var _sfc_render = function render() {
110
110
  var _vm = this, _c = _vm._self._c;
111
111
  return _c("div", { staticClass: "d-recipe-callbox", attrs: { "data-qa": "dt-recipe-callbox" } }, [_vm.$slots.video ? _c("div", { staticClass: "d-recipe-callbox__video", attrs: { "data-qa": "dt-recipe-callbox__video-wrapper" } }, [_vm._t("video")], 2) : _vm._e(), _c("div", { class: ["d-recipe-callbox__main-content", _vm.borderClass, { "d-recipe-callbox--clickable": _vm.clickable }], attrs: { "data-qa": "dt-recipe-callbox__main-content" } }, [_c("div", { staticClass: "d-recipe-callbox__main-content-top" }, [_vm.shouldShowAvatar ? _c("dt-avatar", { attrs: { "avatar-class": "d-recipe-callbox__avatar", "image-src": _vm.avatarSrc, "image-alt": "", "full-name": _vm.avatarFullName, "seed": _vm.avatarSeed, "clickable": _vm.clickable, "size": "sm" }, on: { "click": _vm.handleClick }, scopedSlots: _vm._u([_vm.isOnHold ? { key: "overlayIcon", fn: function() {
112
112
  return [_c("dt-icon-pause")];
113
- }, proxy: true } : null], null, true) }) : _vm._e(), _c("div", { staticClass: "d-recipe-callbox__content" }, [_c(_vm.clickable ? "button" : "span", { tag: "component", staticClass: "d-recipe-callbox__content-title", attrs: { "data-qa": "dt-recipe-callbox__title" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "d-recipe-callbox__content-badge", attrs: { "data-qa": "dt-recipe-callbox__badge-wrapper" } }, [_vm._t("badge", function() {
113
+ }, proxy: true } : null], null, true) }) : _vm._e(), _c("div", { staticClass: "d-recipe-callbox__content" }, [_c(_vm.clickable ? "button" : "span", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.title, expression: "title" }], tag: "component", staticClass: "d-recipe-callbox__content-title", attrs: { "data-qa": "dt-recipe-callbox__title", "tabindex": "0" }, on: { "click": _vm.handleClick } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _vm.$slots.badge || _vm.badgeText ? _c("div", { staticClass: "d-recipe-callbox__content-badge", attrs: { "data-qa": "dt-recipe-callbox__badge-wrapper" } }, [_vm._t("badge", function() {
114
114
  return [_c("dt-badge", { class: _vm.badgeClass, attrs: { "text": _vm.badgeText } })];
115
115
  })], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { staticClass: "d-recipe-callbox__content-subtitle", attrs: { "data-qa": "dt-recipe-callbox__subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e()], 1), _vm.$slots.right ? _c("div", { staticClass: "d-recipe-callbox__right", attrs: { "data-qa": "dt-recipe-callbox__right-wrapper" } }, [_vm._t("right")], 2) : _vm._e()], 1), _vm.$slots.bottom ? _c("div", { staticClass: "d-recipe-callbox__main-content-bottom", attrs: { "data-qa": "dt-recipe-callbox__bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()])]);
116
116
  };
package/dist/recipes/leftbar/callbox/callbox.vue.js.map CHANGED
@@ -1 +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/vue2';\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":[],"mappings":";;;;;AA+FA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,SAAA,UAAA,YAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
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 v-dt-tooltip=\"title\"\n data-qa=\"dt-recipe-callbox__title\"\n class=\"d-recipe-callbox__content-title\"\n tabindex=\"0\"\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/vue2';\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":[],"mappings":";;;;;AAiGA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,SAAA,UAAA,YAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,UAAA,QAAA,OAAA,KAAA,oBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,qBAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,kBAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,qBAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,sBAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
package/dist/types/recipes/leftbar/callbox/callbox.vue.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"callbox.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/callbox/callbox.vue"],"names":[],"mappings":"AAwFA;"}
1
+ {"version":3,"file":"callbox.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/callbox/callbox.vue"],"names":[],"mappings":"AA0FA;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dialpad/dialtone-vue",
3
- "version": "2.181.0",
3
+ "version": "2.182.0",
4
4
  "description": "Vue component library for Dialpad's design system Dialtone",
5
5
  "files": [
6
6
  "dist"
@@ -38,8 +38,8 @@
38
38
  "overlayscrollbars": "2.10.0",
39
39
  "regex-combined-emojis": "1.6.0",
40
40
  "tippy.js": "6.3.7",
41
- "@dialpad/dialtone-icons": "4.34.5",
42
- "@dialpad/dialtone-emojis": "1.1.1"
41
+ "@dialpad/dialtone-emojis": "1.1.2",
42
+ "@dialpad/dialtone-icons": "4.34.6"
43
43
  },
44
44
  "devDependencies": {
45
45
  "@storybook/addon-a11y": "7.6.20",
@@ -51,12 +51,12 @@
51
51
  "react": "17.0.2",
52
52
  "storybook-dark-mode": "^3.0.3",
53
53
  "vue": "^2.7.15",
54
- "@dialpad/dialtone-css": "8.50.6",
54
+ "@dialpad/dialtone-css": "8.51.0",
55
55
  "@dialpad/generator-dialtone": "0.1.0"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "vue": ">=2.6",
59
- "@dialpad/dialtone-css": "^8.50.6"
59
+ "@dialpad/dialtone-css": "^8.51.0"
60
60
  },
61
61
  "bugs": {
62
62
  "email": "dialtone@dialpad.com"