@dialpad/dialtone 9.108.0 → 9.109.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.
- package/README.md +0 -1
- package/dist/css/dialtone-default-theme.css +23 -17
- package/dist/css/dialtone-default-theme.min.css +1 -1
- package/dist/css/dialtone.css +23 -17
- package/dist/css/dialtone.min.css +1 -1
- package/dist/tokens/doc.json +17138 -17138
- package/dist/vue2/recipes/leftbar/callbox/callbox.vue.cjs +1 -1
- package/dist/vue2/recipes/leftbar/callbox/callbox.vue.cjs.map +1 -1
- package/dist/vue2/recipes/leftbar/callbox/callbox.vue.js +1 -1
- package/dist/vue2/recipes/leftbar/callbox/callbox.vue.js.map +1 -1
- package/dist/vue2/types/recipes/leftbar/callbox/callbox.vue.d.ts.map +1 -1
- package/dist/vue3/recipes/leftbar/callbox/callbox.vue.cjs +6 -2
- package/dist/vue3/recipes/leftbar/callbox/callbox.vue.cjs.map +1 -1
- package/dist/vue3/recipes/leftbar/callbox/callbox.vue.js +7 -3
- package/dist/vue3/recipes/leftbar/callbox/callbox.vue.js.map +1 -1
- package/dist/vue3/types/recipes/leftbar/callbox/callbox.vue.d.ts.map +1 -1
- package/package.json +6 -6
|
@@ -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
|
};
|
|
@@ -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":";;;;;;;
|
|
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;;;;;;;;;;;;;;;;;"}
|
|
@@ -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
|
};
|
|
@@ -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":";;;;;
|
|
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;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callbox.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/callbox/callbox.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"callbox.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/callbox/callbox.vue"],"names":[],"mappings":"AA0FA;"}
|
|
@@ -141,6 +141,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
141
141
|
const _component_dt_icon_pause = vue.resolveComponent("dt-icon-pause");
|
|
142
142
|
const _component_dt_avatar = vue.resolveComponent("dt-avatar");
|
|
143
143
|
const _component_dt_badge = vue.resolveComponent("dt-badge");
|
|
144
|
+
const _directive_dt_tooltip = vue.resolveDirective("dt-tooltip");
|
|
144
145
|
return vue.openBlock(), vue.createElementBlock("div", {
|
|
145
146
|
"data-qa": "dt-recipe-callbox",
|
|
146
147
|
class: vue.normalizeClass([_ctx.$attrs.class, "d-recipe-callbox"]),
|
|
@@ -174,16 +175,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
174
175
|
} : void 0
|
|
175
176
|
]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : vue.createCommentVNode("", true),
|
|
176
177
|
vue.createElementVNode("div", _hoisted_3, [
|
|
177
|
-
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "span"), {
|
|
178
|
+
vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "span"), {
|
|
178
179
|
"data-qa": "dt-recipe-callbox__title",
|
|
179
180
|
class: "d-recipe-callbox__content-title",
|
|
181
|
+
tabindex: "0",
|
|
180
182
|
onClick: $options.handleClick
|
|
181
183
|
}, {
|
|
182
184
|
default: vue.withCtx(() => [
|
|
183
185
|
vue.createTextVNode(vue.toDisplayString($props.title), 1)
|
|
184
186
|
]),
|
|
185
187
|
_: 1
|
|
186
|
-
}, 8, ["onClick"])),
|
|
188
|
+
}, 8, ["onClick"])), [
|
|
189
|
+
[_directive_dt_tooltip, $props.title]
|
|
190
|
+
]),
|
|
187
191
|
_ctx.$slots.badge || $props.badgeText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
|
|
188
192
|
vue.renderSlot(_ctx.$slots, "badge", {}, () => [
|
|
189
193
|
vue.createVNode(_component_dt_badge, {
|
|
@@ -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=\"[$attrs.class, 'd-recipe-callbox']\"\n :style=\"$attrs.style\"\n >\n <div\n v-if=\"$slots.video\"\n data-qa=\"dt-recipe-callbox__video-wrapper\"\n class=\"d-recipe-callbox__video\"\n >\n <!-- @slot Slot for video stream -->\n <slot name=\"video\" />\n </div>\n <div\n data-qa=\"dt-recipe-callbox__main-content\"\n :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n >\n <div\n class=\"d-recipe-callbox__main-content-top\"\n >\n <dt-avatar\n v-if=\"shouldShowAvatar\"\n avatar-class=\"d-recipe-callbox__avatar\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :full-name=\"avatarFullName\"\n :seed=\"avatarSeed\"\n :clickable=\"clickable\"\n size=\"sm\"\n @click=\"handleClick\"\n >\n <template\n v-if=\"isOnHold\"\n #overlayIcon\n >\n <dt-icon-pause />\n </template>\n </dt-avatar>\n <div class=\"d-recipe-callbox__content\">\n <component\n :is=\"clickable ? 'button' : 'span'\"\n data-qa=\"dt-recipe-callbox__title\"\n class=\"d-recipe-callbox__content-title\"\n @click=\"handleClick\"\n >\n {{ title }}\n </component>\n <div\n v-if=\"$slots.badge || badgeText\"\n data-qa=\"dt-recipe-callbox__badge-wrapper\"\n class=\"d-recipe-callbox__content-badge\"\n >\n <!-- @slot Slot for call center badge -->\n <slot name=\"badge\">\n <dt-badge\n :class=\"badgeClass\"\n :text=\"badgeText\"\n />\n </slot>\n </div>\n <div\n v-if=\"$slots.subtitle\"\n data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n class=\"d-recipe-callbox__content-subtitle\"\n >\n <!-- @slot Slot for subtitle -->\n <slot name=\"subtitle\" />\n </div>\n </div>\n <div\n v-if=\"$slots.right\"\n data-qa=\"dt-recipe-callbox__right-wrapper\"\n class=\"d-recipe-callbox__right\"\n >\n <!-- @slot Slot for right icons -->\n <slot name=\"right\" />\n </div>\n </div>\n <div\n v-if=\"$slots.bottom\"\n data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n class=\"d-recipe-callbox__main-content-bottom\"\n >\n <slot name=\"bottom\" />\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeCallbox',\n\n components: { DtBadge, DtAvatar, DtIconPause },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Text for the badge element\n */\n badgeText: {\n type: String,\n default: '',\n },\n\n /**\n * Color for the badge element\n * @values null, warning\n */\n badgeColor: {\n type: String,\n default: null,\n validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n },\n\n /**\n * Optional avatar image url.\n * If not provided it will use the initial of the name.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar's full name, used to extract initials\n * to display if `avatarSrc` is empty.\n */\n avatarFullName: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: '',\n },\n\n /**\n * Callbox title\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n },\n\n /**\n * Makes the callbox avatar and title clickable,\n * emits a click event when clicked.\n */\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls the avatars overlay icon\n */\n isOnHold: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Callbox click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n shouldShowAvatar () {\n return this.avatarFullName || this.avatarSrc;\n },\n\n badgeClass () {\n return CALLBOX_BADGE_COLORS[this.badgeColor];\n },\n\n borderClass () {\n return CALLBOX_BORDER_COLORS[this.borderColor];\n },\n },\n\n methods: {\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n"],"names":["DtBadge","DtAvatar","DtIconPause","CALLBOX_BADGE_COLORS","CALLBOX_BORDER_COLORS","_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_renderSlot","_createCommentVNode","_createElementVNode","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;
|
|
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=\"[$attrs.class, 'd-recipe-callbox']\"\n :style=\"$attrs.style\"\n >\n <div\n v-if=\"$slots.video\"\n data-qa=\"dt-recipe-callbox__video-wrapper\"\n class=\"d-recipe-callbox__video\"\n >\n <!-- @slot Slot for video stream -->\n <slot name=\"video\" />\n </div>\n <div\n data-qa=\"dt-recipe-callbox__main-content\"\n :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n >\n <div\n class=\"d-recipe-callbox__main-content-top\"\n >\n <dt-avatar\n v-if=\"shouldShowAvatar\"\n avatar-class=\"d-recipe-callbox__avatar\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :full-name=\"avatarFullName\"\n :seed=\"avatarSeed\"\n :clickable=\"clickable\"\n size=\"sm\"\n @click=\"handleClick\"\n >\n <template\n v-if=\"isOnHold\"\n #overlayIcon\n >\n <dt-icon-pause />\n </template>\n </dt-avatar>\n <div class=\"d-recipe-callbox__content\">\n <component\n :is=\"clickable ? 'button' : 'span'\"\n 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/vue3';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeCallbox',\n\n components: { DtBadge, DtAvatar, DtIconPause },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Text for the badge element\n */\n badgeText: {\n type: String,\n default: '',\n },\n\n /**\n * Color for the badge element\n * @values null, warning\n */\n badgeColor: {\n type: String,\n default: null,\n validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n },\n\n /**\n * Optional avatar image url.\n * If not provided it will use the initial of the name.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar's full name, used to extract initials\n * to display if `avatarSrc` is empty.\n */\n avatarFullName: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: '',\n },\n\n /**\n * Callbox title\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n },\n\n /**\n * Makes the callbox avatar and title clickable,\n * emits a click event when clicked.\n */\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls the avatars overlay icon\n */\n isOnHold: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Callbox click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n shouldShowAvatar () {\n return this.avatarFullName || this.avatarSrc;\n },\n\n badgeClass () {\n return CALLBOX_BADGE_COLORS[this.badgeColor];\n },\n\n borderClass () {\n return CALLBOX_BORDER_COLORS[this.borderColor];\n },\n },\n\n methods: {\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n"],"names":["DtBadge","DtAvatar","DtIconPause","CALLBOX_BADGE_COLORS","CALLBOX_BORDER_COLORS","_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_renderSlot","_createCommentVNode","_createElementVNode","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from "./callbox_constants
|
|
|
2
2
|
import DtAvatar from "../../../components/avatar/avatar.vue.js";
|
|
3
3
|
import DtBadge from "../../../components/badge/badge.vue.js";
|
|
4
4
|
import { DtIconPause } from "@dialpad/dialtone-icons/vue3";
|
|
5
|
-
import { resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createCommentVNode, createElementVNode, createBlock, createSlots, withCtx, createVNode, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
|
|
5
|
+
import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createCommentVNode, createElementVNode, createBlock, createSlots, withCtx, createVNode, withDirectives, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
|
|
6
6
|
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
|
|
7
7
|
const _sfc_main = {
|
|
8
8
|
compatConfig: { MODE: 3 },
|
|
@@ -139,6 +139,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
139
139
|
const _component_dt_icon_pause = resolveComponent("dt-icon-pause");
|
|
140
140
|
const _component_dt_avatar = resolveComponent("dt-avatar");
|
|
141
141
|
const _component_dt_badge = resolveComponent("dt-badge");
|
|
142
|
+
const _directive_dt_tooltip = resolveDirective("dt-tooltip");
|
|
142
143
|
return openBlock(), createElementBlock("div", {
|
|
143
144
|
"data-qa": "dt-recipe-callbox",
|
|
144
145
|
class: normalizeClass([_ctx.$attrs.class, "d-recipe-callbox"]),
|
|
@@ -172,16 +173,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
172
173
|
} : void 0
|
|
173
174
|
]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : createCommentVNode("", true),
|
|
174
175
|
createElementVNode("div", _hoisted_3, [
|
|
175
|
-
(openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "span"), {
|
|
176
|
+
withDirectives((openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "span"), {
|
|
176
177
|
"data-qa": "dt-recipe-callbox__title",
|
|
177
178
|
class: "d-recipe-callbox__content-title",
|
|
179
|
+
tabindex: "0",
|
|
178
180
|
onClick: $options.handleClick
|
|
179
181
|
}, {
|
|
180
182
|
default: withCtx(() => [
|
|
181
183
|
createTextVNode(toDisplayString($props.title), 1)
|
|
182
184
|
]),
|
|
183
185
|
_: 1
|
|
184
|
-
}, 8, ["onClick"])),
|
|
186
|
+
}, 8, ["onClick"])), [
|
|
187
|
+
[_directive_dt_tooltip, $props.title]
|
|
188
|
+
]),
|
|
185
189
|
_ctx.$slots.badge || $props.badgeText ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
|
186
190
|
renderSlot(_ctx.$slots, "badge", {}, () => [
|
|
187
191
|
createVNode(_component_dt_badge, {
|
|
@@ -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=\"[$attrs.class, 'd-recipe-callbox']\"\n :style=\"$attrs.style\"\n >\n <div\n v-if=\"$slots.video\"\n data-qa=\"dt-recipe-callbox__video-wrapper\"\n class=\"d-recipe-callbox__video\"\n >\n <!-- @slot Slot for video stream -->\n <slot name=\"video\" />\n </div>\n <div\n data-qa=\"dt-recipe-callbox__main-content\"\n :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n >\n <div\n class=\"d-recipe-callbox__main-content-top\"\n >\n <dt-avatar\n v-if=\"shouldShowAvatar\"\n avatar-class=\"d-recipe-callbox__avatar\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :full-name=\"avatarFullName\"\n :seed=\"avatarSeed\"\n :clickable=\"clickable\"\n size=\"sm\"\n @click=\"handleClick\"\n >\n <template\n v-if=\"isOnHold\"\n #overlayIcon\n >\n <dt-icon-pause />\n </template>\n </dt-avatar>\n <div class=\"d-recipe-callbox__content\">\n <component\n :is=\"clickable ? 'button' : 'span'\"\n data-qa=\"dt-recipe-callbox__title\"\n class=\"d-recipe-callbox__content-title\"\n @click=\"handleClick\"\n >\n {{ title }}\n </component>\n <div\n v-if=\"$slots.badge || badgeText\"\n data-qa=\"dt-recipe-callbox__badge-wrapper\"\n class=\"d-recipe-callbox__content-badge\"\n >\n <!-- @slot Slot for call center badge -->\n <slot name=\"badge\">\n <dt-badge\n :class=\"badgeClass\"\n :text=\"badgeText\"\n />\n </slot>\n </div>\n <div\n v-if=\"$slots.subtitle\"\n data-qa=\"dt-recipe-callbox__subtitle-wrapper\"\n class=\"d-recipe-callbox__content-subtitle\"\n >\n <!-- @slot Slot for subtitle -->\n <slot name=\"subtitle\" />\n </div>\n </div>\n <div\n v-if=\"$slots.right\"\n data-qa=\"dt-recipe-callbox__right-wrapper\"\n class=\"d-recipe-callbox__right\"\n >\n <!-- @slot Slot for right icons -->\n <slot name=\"right\" />\n </div>\n </div>\n <div\n v-if=\"$slots.bottom\"\n data-qa=\"dt-recipe-callbox__bottom-wrapper\"\n class=\"d-recipe-callbox__main-content-bottom\"\n >\n <slot name=\"bottom\" />\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\nimport { DtIconPause } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeCallbox',\n\n components: { DtBadge, DtAvatar, DtIconPause },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Text for the badge element\n */\n badgeText: {\n type: String,\n default: '',\n },\n\n /**\n * Color for the badge element\n * @values null, warning\n */\n badgeColor: {\n type: String,\n default: null,\n validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n },\n\n /**\n * Optional avatar image url.\n * If not provided it will use the initial of the name.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar's full name, used to extract initials\n * to display if `avatarSrc` is empty.\n */\n avatarFullName: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: '',\n },\n\n /**\n * Callbox title\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n },\n\n /**\n * Makes the callbox avatar and title clickable,\n * emits a click event when clicked.\n */\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls the avatars overlay icon\n */\n isOnHold: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Callbox click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n shouldShowAvatar () {\n return this.avatarFullName || this.avatarSrc;\n },\n\n badgeClass () {\n return CALLBOX_BADGE_COLORS[this.badgeColor];\n },\n\n borderClass () {\n return CALLBOX_BORDER_COLORS[this.borderColor];\n },\n },\n\n methods: {\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_renderSlot","_createCommentVNode","_createElementVNode","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":";;;;;;
|
|
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=\"[$attrs.class, 'd-recipe-callbox']\"\n :style=\"$attrs.style\"\n >\n <div\n v-if=\"$slots.video\"\n data-qa=\"dt-recipe-callbox__video-wrapper\"\n class=\"d-recipe-callbox__video\"\n >\n <!-- @slot Slot for video stream -->\n <slot name=\"video\" />\n </div>\n <div\n data-qa=\"dt-recipe-callbox__main-content\"\n :class=\"['d-recipe-callbox__main-content', borderClass, { 'd-recipe-callbox--clickable': clickable }]\"\n >\n <div\n class=\"d-recipe-callbox__main-content-top\"\n >\n <dt-avatar\n v-if=\"shouldShowAvatar\"\n avatar-class=\"d-recipe-callbox__avatar\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :full-name=\"avatarFullName\"\n :seed=\"avatarSeed\"\n :clickable=\"clickable\"\n size=\"sm\"\n @click=\"handleClick\"\n >\n <template\n v-if=\"isOnHold\"\n #overlayIcon\n >\n <dt-icon-pause />\n </template>\n </dt-avatar>\n <div class=\"d-recipe-callbox__content\">\n <component\n :is=\"clickable ? 'button' : 'span'\"\n 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/vue3';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeCallbox',\n\n components: { DtBadge, DtAvatar, DtIconPause },\n\n inheritAttrs: false,\n\n props: {\n /**\n * Text for the badge element\n */\n badgeText: {\n type: String,\n default: '',\n },\n\n /**\n * Color for the badge element\n * @values null, warning\n */\n badgeColor: {\n type: String,\n default: null,\n validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n },\n\n /**\n * Optional avatar image url.\n * If not provided it will use the initial of the name.\n */\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar's full name, used to extract initials\n * to display if `avatarSrc` is empty.\n */\n avatarFullName: {\n type: String,\n default: '',\n },\n\n /**\n * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n */\n avatarSeed: {\n type: String,\n default: '',\n },\n\n /**\n * Callbox title\n */\n title: {\n type: String,\n default: '',\n },\n\n /**\n * Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n },\n\n /**\n * Makes the callbox avatar and title clickable,\n * emits a click event when clicked.\n */\n clickable: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Controls the avatars overlay icon\n */\n isOnHold: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Callbox click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n computed: {\n shouldShowAvatar () {\n return this.avatarFullName || this.avatarSrc;\n },\n\n badgeClass () {\n return CALLBOX_BADGE_COLORS[this.badgeColor];\n },\n\n borderClass () {\n return CALLBOX_BORDER_COLORS[this.borderColor];\n },\n },\n\n methods: {\n handleClick (e) {\n if (!this.clickable) return;\n this.$emit('click', e);\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_normalizeStyle","_openBlock","_renderSlot","_createCommentVNode","_createElementVNode","_createBlock","_createSlots","_withCtx","_createVNode","_resolveDynamicComponent","_createTextVNode","_toDisplayString"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callbox.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/callbox/callbox.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"callbox.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/callbox/callbox.vue"],"names":[],"mappings":"AA2FA;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.109.0",
|
|
4
4
|
"description": "Dialpad's Dialtone design system monorepo",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -76,9 +76,9 @@
|
|
|
76
76
|
"overlayscrollbars": "2.10.0",
|
|
77
77
|
"regex-combined-emojis": "1.6.0",
|
|
78
78
|
"tippy.js": "6.3.7",
|
|
79
|
-
"@dialpad/dialtone-emojis": "1.1.
|
|
80
|
-
"@dialpad/dialtone-
|
|
81
|
-
"@dialpad/dialtone-
|
|
79
|
+
"@dialpad/dialtone-emojis": "1.1.2",
|
|
80
|
+
"@dialpad/dialtone-tokens": "1.41.2",
|
|
81
|
+
"@dialpad/dialtone-icons": "4.34.6"
|
|
82
82
|
},
|
|
83
83
|
"devDependencies": {
|
|
84
84
|
"@commitlint/cli": "^18.4.3",
|
|
@@ -86,8 +86,8 @@
|
|
|
86
86
|
"@dialpad/conventional-changelog-angular": "^1.1.1",
|
|
87
87
|
"@dialpad/semantic-release-changelog-json": "^1.0.0",
|
|
88
88
|
"@faker-js/faker": "8.4.1",
|
|
89
|
-
"@percy/cli": "1.
|
|
90
|
-
"@percy/storybook": "6.0.
|
|
89
|
+
"@percy/cli": "1.30.9",
|
|
90
|
+
"@percy/storybook": "6.0.3",
|
|
91
91
|
"@semantic-release/changelog": "^6.0.3",
|
|
92
92
|
"@semantic-release/exec": "^6.0.3",
|
|
93
93
|
"@semantic-release/git": "^10.0.1",
|