@dialpad/dialtone 9.69.1 → 9.70.0-beta.1
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/dist/tokens/doc.json +5291 -5291
- package/dist/vue3/component-documentation.json +1 -1
- package/dist/vue3/dialtone-vue.cjs +1 -1
- package/dist/vue3/dialtone-vue.js +1 -1
- package/dist/vue3/lib/avatar.cjs +31 -45
- package/dist/vue3/lib/avatar.cjs.map +1 -1
- package/dist/vue3/lib/avatar.js +33 -47
- package/dist/vue3/lib/avatar.js.map +1 -1
- package/dist/vue3/lib/callbox.cjs +14 -6
- package/dist/vue3/lib/callbox.cjs.map +1 -1
- package/dist/vue3/lib/callbox.js +15 -7
- package/dist/vue3/lib/callbox.js.map +1 -1
- package/dist/vue3/lib/contact-info.cjs +28 -10
- package/dist/vue3/lib/contact-info.cjs.map +1 -1
- package/dist/vue3/lib/contact-info.js +29 -11
- package/dist/vue3/lib/contact-info.js.map +1 -1
- package/dist/vue3/lib/contact-row.cjs +14 -9
- package/dist/vue3/lib/contact-row.cjs.map +1 -1
- package/dist/vue3/lib/contact-row.js +15 -10
- package/dist/vue3/lib/contact-row.js.map +1 -1
- package/dist/vue3/lib/feed-item-row.cjs +16 -10
- package/dist/vue3/lib/feed-item-row.cjs.map +1 -1
- package/dist/vue3/lib/feed-item-row.js +17 -11
- package/dist/vue3/lib/feed-item-row.js.map +1 -1
- package/dist/vue3/style.css +49 -49
- package/dist/vue3/types/components/avatar/avatar.vue.d.ts +6 -34
- package/dist/vue3/types/components/avatar/avatar.vue.d.ts.map +1 -1
- package/dist/vue3/types/components/chip/chip.vue.d.ts +1 -1
- package/dist/vue3/types/components/collapsible/collapsible.vue.d.ts +1 -1
- package/dist/vue3/types/components/split_button/split_button-omega.vue.d.ts +1 -1
- package/dist/vue3/types/recipes/buttons/callbar_button/callbar_button.vue.d.ts +1 -1
- package/dist/vue3/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts +1 -1
- package/dist/vue3/types/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts +0 -1
- package/dist/vue3/types/recipes/conversation_view/feed_item_row/feed_item_row.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/item_layout/contact_info/contact_info.vue.d.ts +3 -3
- package/dist/vue3/types/recipes/leftbar/callbox/callbox.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/leftbar/contact_row/contact_row.vue.d.ts +0 -1
- package/dist/vue3/types/recipes/leftbar/contact_row/contact_row.vue.d.ts.map +1 -1
- package/dist/vue3/types/recipes/leftbar/general_row/general_row.vue.d.ts +1 -1
- package/package.json +1 -1
- package/dist/vue3/types/common/storybook_utils.d.ts +0 -25
- package/dist/vue3/types/common/storybook_utils.d.ts.map +0 -1
|
@@ -2,15 +2,15 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const lib_avatar = require("./avatar.cjs");
|
|
4
4
|
const lib_badge = require("./badge.cjs");
|
|
5
|
+
const vue3 = require("@dialpad/dialtone-icons/vue3");
|
|
5
6
|
const vue = require("vue");
|
|
6
7
|
const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
|
|
7
8
|
require("../common/utils.cjs");
|
|
8
9
|
require("../common/constants.cjs");
|
|
9
|
-
require("@dialpad/dialtone-icons/icons.js");
|
|
10
10
|
require("../chunks/icon_constants-da57m7BZ.js");
|
|
11
|
+
require("@dialpad/dialtone-icons/icons.js");
|
|
11
12
|
require("./presence.cjs");
|
|
12
13
|
require("./icon.cjs");
|
|
13
|
-
require("@dialpad/dialtone-icons/vue3");
|
|
14
14
|
const CALLBOX_BADGE_COLORS = {
|
|
15
15
|
warning: "dt-recipe-callbox-badge--warning"
|
|
16
16
|
};
|
|
@@ -21,7 +21,7 @@ const CALLBOX_BORDER_COLORS = {
|
|
|
21
21
|
};
|
|
22
22
|
const _sfc_main = {
|
|
23
23
|
name: "DtRecipeCallbox",
|
|
24
|
-
components: { DtBadge: lib_badge.DtBadge, DtAvatar: lib_avatar.DtAvatar },
|
|
24
|
+
components: { DtBadge: lib_badge.DtBadge, DtAvatar: lib_avatar.DtAvatar, DtIconPause: vue3.DtIconPause },
|
|
25
25
|
inheritAttrs: false,
|
|
26
26
|
props: {
|
|
27
27
|
/**
|
|
@@ -155,6 +155,7 @@ const _hoisted_8 = {
|
|
|
155
155
|
class: "dt-recipe-callbox--main-content-bottom"
|
|
156
156
|
};
|
|
157
157
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
158
|
+
const _component_dt_icon_pause = vue.resolveComponent("dt-icon-pause");
|
|
158
159
|
const _component_dt_avatar = vue.resolveComponent("dt-avatar");
|
|
159
160
|
const _component_dt_badge = vue.resolveComponent("dt-badge");
|
|
160
161
|
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
|
|
@@ -174,10 +175,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
174
175
|
"full-name": $props.avatarFullName,
|
|
175
176
|
seed: $props.avatarSeed,
|
|
176
177
|
clickable: $props.clickable,
|
|
177
|
-
"overlay-icon": $props.isOnHold ? "pause" : null,
|
|
178
178
|
size: "sm",
|
|
179
179
|
onClick: $options.handleClick
|
|
180
|
-
},
|
|
180
|
+
}, vue.createSlots({ _: 2 }, [
|
|
181
|
+
$props.isOnHold ? {
|
|
182
|
+
name: "overlayIcon",
|
|
183
|
+
fn: vue.withCtx(() => [
|
|
184
|
+
vue.createVNode(_component_dt_icon_pause)
|
|
185
|
+
]),
|
|
186
|
+
key: "0"
|
|
187
|
+
} : void 0
|
|
188
|
+
]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : vue.createCommentVNode("", true),
|
|
181
189
|
vue.createElementVNode("div", _hoisted_4, [
|
|
182
190
|
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "span"), {
|
|
183
191
|
"data-qa": "dt-recipe-callbox--title",
|
|
@@ -211,7 +219,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
211
219
|
], 2)
|
|
212
220
|
]);
|
|
213
221
|
}
|
|
214
|
-
const callbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
222
|
+
const callbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0d10d03a"]]);
|
|
215
223
|
exports.CALLBOX_BADGE_COLORS = CALLBOX_BADGE_COLORS;
|
|
216
224
|
exports.CALLBOX_BORDER_COLORS = CALLBOX_BORDER_COLORS;
|
|
217
225
|
exports.DtRecipeCallbox = callbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callbox.cjs","sources":["../../recipes/leftbar/callbox/callbox_constants.js","../../recipes/leftbar/callbox/callbox.vue"],"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","<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 :overlay-icon=\"isOnHold ? 'pause' : null\"\n size=\"sm\"\n @click=\"handleClick\"\n />\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';\n\nexport default {\n name: 'DtRecipeCallbox',\n\n components: { DtBadge, DtAvatar },\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","_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass","_createBlock","_resolveDynamicComponent","_createVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"callbox.cjs","sources":["../../recipes/leftbar/callbox/callbox_constants.js","../../recipes/leftbar/callbox/callbox.vue"],"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","<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","_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass","_createBlock","_createVNode","_resolveDynamicComponent"],"mappings":"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"}
|
package/dist/vue3/lib/callbox.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { DtAvatar } from "./avatar.js";
|
|
2
2
|
import { DtBadge } from "./badge.js";
|
|
3
|
-
import {
|
|
3
|
+
import { DtIconPause } from "@dialpad/dialtone-icons/vue3";
|
|
4
|
+
import { resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, createElementVNode, normalizeClass, createBlock, createSlots, withCtx, createVNode, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
|
|
4
5
|
import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
|
|
5
6
|
import "../common/utils.js";
|
|
6
7
|
import "../common/constants.js";
|
|
7
|
-
import "@dialpad/dialtone-icons/icons.js";
|
|
8
8
|
import "../chunks/icon_constants-H9ahUVCG.js";
|
|
9
|
+
import "@dialpad/dialtone-icons/icons.js";
|
|
9
10
|
import "./presence.js";
|
|
10
11
|
import "./icon.js";
|
|
11
|
-
import "@dialpad/dialtone-icons/vue3";
|
|
12
12
|
const CALLBOX_BADGE_COLORS = {
|
|
13
13
|
warning: "dt-recipe-callbox-badge--warning"
|
|
14
14
|
};
|
|
@@ -19,7 +19,7 @@ const CALLBOX_BORDER_COLORS = {
|
|
|
19
19
|
};
|
|
20
20
|
const _sfc_main = {
|
|
21
21
|
name: "DtRecipeCallbox",
|
|
22
|
-
components: { DtBadge, DtAvatar },
|
|
22
|
+
components: { DtBadge, DtAvatar, DtIconPause },
|
|
23
23
|
inheritAttrs: false,
|
|
24
24
|
props: {
|
|
25
25
|
/**
|
|
@@ -153,6 +153,7 @@ const _hoisted_8 = {
|
|
|
153
153
|
class: "dt-recipe-callbox--main-content-bottom"
|
|
154
154
|
};
|
|
155
155
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
156
|
+
const _component_dt_icon_pause = resolveComponent("dt-icon-pause");
|
|
156
157
|
const _component_dt_avatar = resolveComponent("dt-avatar");
|
|
157
158
|
const _component_dt_badge = resolveComponent("dt-badge");
|
|
158
159
|
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
@@ -172,10 +173,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
172
173
|
"full-name": $props.avatarFullName,
|
|
173
174
|
seed: $props.avatarSeed,
|
|
174
175
|
clickable: $props.clickable,
|
|
175
|
-
"overlay-icon": $props.isOnHold ? "pause" : null,
|
|
176
176
|
size: "sm",
|
|
177
177
|
onClick: $options.handleClick
|
|
178
|
-
},
|
|
178
|
+
}, createSlots({ _: 2 }, [
|
|
179
|
+
$props.isOnHold ? {
|
|
180
|
+
name: "overlayIcon",
|
|
181
|
+
fn: withCtx(() => [
|
|
182
|
+
createVNode(_component_dt_icon_pause)
|
|
183
|
+
]),
|
|
184
|
+
key: "0"
|
|
185
|
+
} : void 0
|
|
186
|
+
]), 1032, ["image-src", "full-name", "seed", "clickable", "onClick"])) : createCommentVNode("", true),
|
|
179
187
|
createElementVNode("div", _hoisted_4, [
|
|
180
188
|
(openBlock(), createBlock(resolveDynamicComponent($props.clickable ? "button" : "span"), {
|
|
181
189
|
"data-qa": "dt-recipe-callbox--title",
|
|
@@ -209,7 +217,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
209
217
|
], 2)
|
|
210
218
|
]);
|
|
211
219
|
}
|
|
212
|
-
const callbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
220
|
+
const callbox = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0d10d03a"]]);
|
|
213
221
|
export {
|
|
214
222
|
CALLBOX_BADGE_COLORS,
|
|
215
223
|
CALLBOX_BORDER_COLORS,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"callbox.js","sources":["../../recipes/leftbar/callbox/callbox_constants.js","../../recipes/leftbar/callbox/callbox.vue"],"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","<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 :overlay-icon=\"isOnHold ? 'pause' : null\"\n size=\"sm\"\n @click=\"handleClick\"\n />\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';\n\nexport default {\n name: 'DtRecipeCallbox',\n\n components: { DtBadge, DtAvatar },\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","_createElementVNode","_normalizeClass","_createBlock","_resolveDynamicComponent","_createVNode"],"mappings":";;;;;;;;;;;AAAY,MAAC,uBAAuB;AAAA,EAClC,SAAS;AACX;AAEY,MAAC,wBAAwB;AAAA,EACnC,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ;ACgFA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAE,SAAS,SAAU;AAAA,EAEjC,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,UAAU,UAAU,QAAQ,OAAO,KAAK,oBAAoB,EAAE,SAAS,KAAK;AAAA,IACzF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,UAAU,OAAO,KAAK,qBAAqB,EAAE,SAAS,KAAK;AAAA,IACxE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,mBAAoB;AAClB,aAAO,KAAK,kBAAkB,KAAK;AAAA,IACpC;AAAA,IAED,aAAc;AACZ,aAAO,qBAAqB,KAAK,UAAU;AAAA,IAC5C;AAAA,IAED,cAAe;AACb,aAAO,sBAAsB,KAAK,WAAW;AAAA,IAC9C;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,YAAa,GAAG;AACd,UAAI,CAAC,KAAK;AAAW;AACrB,WAAK,MAAM,SAAS,CAAC;AAAA,IACtB;AAAA,EACF;AACH;;EA5MI,WAAQ;AAAA,EACR,OAAM;;;;EAIJ,WAAQ;AAAA,EACR,OAAM;;AAUJ,MAAA,aAAA,EAAA,OAAM,sCAAqC;AActC,MAAA,aAAA,EAAA,OAAM,6BAA4B;;;EAWnC,WAAQ;AAAA,EACR,OAAM;;;;EAYN,WAAQ;AAAA,EACR,OAAM;;;;EAQR,WAAQ;AAAA,EACR,OAAM;;;;EAQR,WAAQ;AAAA,EACR,OAAM;;;;;AA1EZ,SAAAA,UAAA,GAAAC,mBA+EM,OA/EN,YA+EM;AAAA,IA1EI,KAAA,OAAO,SADfD,aAAAC,mBAOM,OAPN,YAOM;AAAA,MADJC,WAAqB,KAAA,QAAA,SAAA,CAAA,GAAA,QAAA,IAAA;AAAA;IAEvBC,mBAkEM,OAAA;AAAA,MAjEJ,WAAQ;AAAA,MACP,OAAKC,eAAA,CAAA,mCAAsC,SAAW,aAAA,EAAA,gCAAoC,OAAS,UAAA,CAAA,CAAA;AAAA;MAEpGD,mBAsDM,OAtDN,YAsDM;AAAA,QAlDI,SAAgB,iCADxBE,YAWE,sBAAA;AAAA;UATA,gBAAa;AAAA,UACZ,aAAW,OAAS;AAAA,UACrB,aAAU;AAAA,UACT,aAAW,OAAc;AAAA,UACzB,MAAM,OAAU;AAAA,UAChB,WAAW,OAAS;AAAA,UACpB,gBAAc,OAAQ,WAAA,UAAA;AAAA,UACvB,MAAK;AAAA,UACJ,SAAO,SAAW;AAAA;QAErBF,mBA8BM,OA9BN,YA8BM;AAAA,WA7BJH,UAAA,GAAAK,YAOYC,wBANL,OAAS,YAAA,WAAA,MAAA,GAAA;AAAA,YACd,WAAQ;AAAA,YACR,OAAM;AAAA,YACL,SAAO,SAAW;AAAA;6BAEnB,MAAW;AAAA,8CAAR,OAAK,KAAA,GAAA,CAAA;AAAA;;;UAGF,KAAM,OAAC,SAAS,OAAS,aADjCN,aAAAC,mBAYM,OAZN,YAYM;AAAA,YANJC,WAKO,0BALP,MAKO;AAAA,cAJLK,YAGE,qBAAA;AAAA,gBAFC,sBAAO,SAAU,UAAA;AAAA,gBACjB,MAAM,OAAS;AAAA;;;UAKd,KAAA,OAAO,YADfP,aAAAC,mBAOM,OAPN,YAOM;AAAA,YADJC,WAAwB,KAAA,QAAA,YAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;QAIpB,KAAA,OAAO,SADfF,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAqB,KAAA,QAAA,SAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;MAIjB,KAAA,OAAO,UADfF,aAAAC,mBAMM,OANN,YAMM;AAAA,QADJC,WAAsB,KAAA,QAAA,UAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;;;"}
|
|
1
|
+
{"version":3,"file":"callbox.js","sources":["../../recipes/leftbar/callbox/callbox_constants.js","../../recipes/leftbar/callbox/callbox.vue"],"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","<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","_createElementVNode","_normalizeClass","_createBlock","_createVNode","_resolveDynamicComponent"],"mappings":"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"}
|
|
@@ -6,11 +6,9 @@ const vue = require("vue");
|
|
|
6
6
|
const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
|
|
7
7
|
require("../common/utils.cjs");
|
|
8
8
|
require("../common/constants.cjs");
|
|
9
|
-
require("@dialpad/dialtone-icons/icons.js");
|
|
10
9
|
require("../chunks/icon_constants-da57m7BZ.js");
|
|
10
|
+
require("@dialpad/dialtone-icons/icons.js");
|
|
11
11
|
require("./presence.cjs");
|
|
12
|
-
require("./icon.cjs");
|
|
13
|
-
require("@dialpad/dialtone-icons/vue3");
|
|
14
12
|
const _sfc_main = {
|
|
15
13
|
name: "DtRecipeContactInfo",
|
|
16
14
|
components: {
|
|
@@ -63,7 +61,7 @@ const _sfc_main = {
|
|
|
63
61
|
* Avatar icon to display if `avatarSrc` is empty.
|
|
64
62
|
*/
|
|
65
63
|
avatarIcon: {
|
|
66
|
-
type:
|
|
64
|
+
type: Object,
|
|
67
65
|
default: null
|
|
68
66
|
},
|
|
69
67
|
/**
|
|
@@ -168,11 +166,24 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
168
166
|
"full-name": avatar.fullName,
|
|
169
167
|
"image-src": avatar.src,
|
|
170
168
|
"image-alt": "",
|
|
171
|
-
"icon-name": $props.avatarIcon,
|
|
172
|
-
"overlay-icon": avatar.icon,
|
|
173
169
|
"overlay-text": avatar.text,
|
|
174
170
|
"avatar-class": [{ "d-mln24": index > 0, "d-bc-brand": !!avatar.halo }]
|
|
175
|
-
},
|
|
171
|
+
}, vue.createSlots({ _: 2 }, [
|
|
172
|
+
$props.avatarIcon ? {
|
|
173
|
+
name: "icon",
|
|
174
|
+
fn: vue.withCtx(({ iconSize }) => [
|
|
175
|
+
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.avatarIcon), { size: iconSize }, null, 8, ["size"]))
|
|
176
|
+
]),
|
|
177
|
+
key: "0"
|
|
178
|
+
} : void 0,
|
|
179
|
+
avatar.icon ? {
|
|
180
|
+
name: "overlayIcon",
|
|
181
|
+
fn: vue.withCtx(() => [
|
|
182
|
+
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(avatar.icon)))
|
|
183
|
+
]),
|
|
184
|
+
key: "1"
|
|
185
|
+
} : void 0
|
|
186
|
+
]), 1032, ["size", "seed", "full-name", "image-src", "overlay-text", "avatar-class"]);
|
|
176
187
|
}), 128))
|
|
177
188
|
])) : (vue.openBlock(), vue.createBlock(_component_dt_avatar, {
|
|
178
189
|
key: 1,
|
|
@@ -180,11 +191,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
180
191
|
"full-name": $props.avatarFullName,
|
|
181
192
|
"image-src": $props.avatarSrc,
|
|
182
193
|
"image-alt": "",
|
|
183
|
-
"icon-name": $props.avatarIcon,
|
|
184
194
|
seed: $props.avatarSeed,
|
|
185
195
|
color: $props.avatarColor,
|
|
186
196
|
presence: $props.presence
|
|
187
|
-
},
|
|
197
|
+
}, vue.createSlots({ _: 2 }, [
|
|
198
|
+
$props.avatarIcon ? {
|
|
199
|
+
name: "icon",
|
|
200
|
+
fn: vue.withCtx(({ iconSize }) => [
|
|
201
|
+
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.avatarIcon), { size: iconSize }, null, 8, ["size"]))
|
|
202
|
+
]),
|
|
203
|
+
key: "0"
|
|
204
|
+
} : void 0
|
|
205
|
+
]), 1032, ["size", "full-name", "image-src", "seed", "color", "presence"]))
|
|
188
206
|
], 8, _hoisted_1)
|
|
189
207
|
]),
|
|
190
208
|
key: "0"
|
|
@@ -209,6 +227,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
209
227
|
} : void 0
|
|
210
228
|
]), 1032, ["role"]);
|
|
211
229
|
}
|
|
212
|
-
const contact_info = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
230
|
+
const contact_info = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b6ccb4a8"]]);
|
|
213
231
|
exports.DtRecipeContactInfo = contact_info;
|
|
214
232
|
//# sourceMappingURL=contact-info.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contact-info.cjs","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 :icon-name=\"avatarIcon\"\n :overlay-icon=\"avatar.icon\"\n :overlay-text=\"avatar.text\"\n :avatar-class=\"[{ 'd-mln24': index > 0, 'd-bc-brand': !!avatar.halo }]\"\n />\n </span>\n <dt-avatar\n v-else\n :size=\"avatarSize\"\n :full-name=\"avatarFullName\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :icon-name=\"avatarIcon\"\n :seed=\"avatarSeed\"\n :color=\"avatarColor\"\n :presence=\"presence\"\n />\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 * Avatar icon to display if `avatarSrc` is empty.\n */\n avatarIcon: {\n type: String,\n default: null,\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(.dt-item-layout) {\n flex: 1 1 0;\n }\n\n &:deep(.dt-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(.dt-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(.dt-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":["DtAvatar","DtItemLayout","_createBlock","_createElementVNode","_renderSlot","_openBlock","_createElementBlock","_Fragment","_renderList"],"mappings":";;;;;;;;;;;;;AAuFA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAA,WAAQ;AAAA,kBACRC,eAAY;AAAA,EACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,cAAc;AAAA,EAEtB,SAAS;AAAA,IACP,cAAe;AACb,WAAK,MAAM,cAAc;AAAA,IAC1B;AAAA,EACF;AACH;;;;EAjMU,OAAM;;AA8BL,MAAA,aAAA,EAAA,WAAQ,sBAAqB;AAO7B,MAAA,aAAA,EAAA,WAAQ,wBAAuB;AAU/B,MAAA,aAAA,EAAA,WAAQ,sBAAqB;AAU7B,MAAA,aAAA,EAAA,WAAQ,qBAAoB;;;;0BA1ErCC,IA+EiB,YAAA,2BAAA;AAAA,IA9Ed,MAAM,OAAI;AAAA,IACX,WAAQ;AAAA,IACR,OAAM;AAAA;IA2CK,qBACT,MAGM;AAAA,MAHNC,IAAA,mBAGM,OAHN,YAGM;AAAA,QADJC,IAAsB,WAAA,KAAA,QAAA,UAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;IAIf,sBACT,MAGM;AAAA,MAHND,IAAA,mBAGM,OAHN,YAGM;AAAA,QADJC,IAAwB,WAAA,KAAA,QAAA,YAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;;IAlDpB,OAAU;YACf;AAAA,sBAED,MAmCS;AAAA,QAnCTD,IAAAA,mBAmCS,UAAA;AAAA,UAlCP,OAAM;AAAA,UACN,WAAQ;AAAA,UACP,mBAAiB,OAAgB;AAAA,UACjC,gDAAO,SAAW,eAAA,SAAA,YAAA,GAAA,IAAA;AAAA;UAGX,OAAU,cADlBE,IAAAA,aAAAC,IAAAA,mBAiBO,QAjBP,YAiBO;AAAA,aAbLD,IAAAA,UAAA,IAAA,GAAAC,IAAA,mBAYEC,cAX0B,MAAAC,IAAA,WAAA,OAAA,YAAlB,CAAA,QAAQ,UAAK;sCADvBN,IAYE,YAAA,sBAAA;AAAA,gBAVC,KAAK;AAAA,gBACL,MAAM,OAAU;AAAA,gBAChB,MAAM,OAAO;AAAA,gBACb,aAAW,OAAO;AAAA,gBAClB,aAAW,OAAO;AAAA,gBACnB,aAAU;AAAA,gBACT,aAAW,OAAU;AAAA,gBACrB,gBAAc,OAAO;AAAA,gBACrB,gBAAc,OAAO;AAAA,gBACrB,gBAA4B,CAAA,EAAA,WAAA,QAA2B,GAAA,cAAA,CAAA,CAAA,OAAO,MAAI;AAAA;;kCAGvEA,IAUE,YAAA,sBAAA;AAAA;YARC,MAAM,OAAU;AAAA,YAChB,aAAW,OAAc;AAAA,YACzB,aAAW,OAAS;AAAA,YACrB,aAAU;AAAA,YACT,aAAW,OAAU;AAAA,YACrB,MAAM,OAAU;AAAA,YAChB,OAAO,OAAW;AAAA,YAClB,UAAU,OAAQ;AAAA;;;;;IAmBjB,KAAA,OAAO;YACZ;AAAA,sBAED,MAGM;AAAA,QAHNC,IAAA,mBAGM,OAHN,YAGM;AAAA,UADJC,IAAsB,WAAA,KAAA,QAAA,UAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;;IAKlB,KAAA,OAAO;YACZ;AAAA,sBAED,MAGM;AAAA,QAHND,IAAA,mBAGM,OAHN,YAGM;AAAA,UADJC,IAAqB,WAAA,KAAA,QAAA,SAAA,CAAA,GAAA,QAAA,IAAA;AAAA;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"contact-info.cjs","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 v-if=\"avatarIcon\"\n #icon=\"{ iconSize }\"\n >\n <component\n :is=\"avatarIcon\"\n :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 v-if=\"avatarIcon\"\n #icon=\"{ iconSize }\"\n >\n <component\n :is=\"avatarIcon\"\n :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 * Avatar icon to display if `avatarSrc` is empty.\n */\n avatarIcon: {\n type: Object,\n default: null,\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(.dt-item-layout) {\n flex: 1 1 0;\n }\n\n &:deep(.dt-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(.dt-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(.dt-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":["DtAvatar","DtItemLayout","_createBlock","_createElementVNode","_renderSlot","_openBlock","_createElementBlock","_Fragment","_renderList","_withCtx","_resolveDynamicComponent"],"mappings":"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"}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { DtItemLayout } from "./item-layout.js";
|
|
2
2
|
import { DtAvatar } from "./avatar.js";
|
|
3
|
-
import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, renderSlot, createElementBlock, Fragment, renderList } from "vue";
|
|
3
|
+
import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createElementVNode, renderSlot, createElementBlock, Fragment, renderList, resolveDynamicComponent } from "vue";
|
|
4
4
|
import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
|
|
5
5
|
import "../common/utils.js";
|
|
6
6
|
import "../common/constants.js";
|
|
7
|
-
import "@dialpad/dialtone-icons/icons.js";
|
|
8
7
|
import "../chunks/icon_constants-H9ahUVCG.js";
|
|
8
|
+
import "@dialpad/dialtone-icons/icons.js";
|
|
9
9
|
import "./presence.js";
|
|
10
|
-
import "./icon.js";
|
|
11
|
-
import "@dialpad/dialtone-icons/vue3";
|
|
12
10
|
const _sfc_main = {
|
|
13
11
|
name: "DtRecipeContactInfo",
|
|
14
12
|
components: {
|
|
@@ -61,7 +59,7 @@ const _sfc_main = {
|
|
|
61
59
|
* Avatar icon to display if `avatarSrc` is empty.
|
|
62
60
|
*/
|
|
63
61
|
avatarIcon: {
|
|
64
|
-
type:
|
|
62
|
+
type: Object,
|
|
65
63
|
default: null
|
|
66
64
|
},
|
|
67
65
|
/**
|
|
@@ -166,11 +164,24 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
166
164
|
"full-name": avatar.fullName,
|
|
167
165
|
"image-src": avatar.src,
|
|
168
166
|
"image-alt": "",
|
|
169
|
-
"icon-name": $props.avatarIcon,
|
|
170
|
-
"overlay-icon": avatar.icon,
|
|
171
167
|
"overlay-text": avatar.text,
|
|
172
168
|
"avatar-class": [{ "d-mln24": index > 0, "d-bc-brand": !!avatar.halo }]
|
|
173
|
-
},
|
|
169
|
+
}, createSlots({ _: 2 }, [
|
|
170
|
+
$props.avatarIcon ? {
|
|
171
|
+
name: "icon",
|
|
172
|
+
fn: withCtx(({ iconSize }) => [
|
|
173
|
+
(openBlock(), createBlock(resolveDynamicComponent($props.avatarIcon), { size: iconSize }, null, 8, ["size"]))
|
|
174
|
+
]),
|
|
175
|
+
key: "0"
|
|
176
|
+
} : void 0,
|
|
177
|
+
avatar.icon ? {
|
|
178
|
+
name: "overlayIcon",
|
|
179
|
+
fn: withCtx(() => [
|
|
180
|
+
(openBlock(), createBlock(resolveDynamicComponent(avatar.icon)))
|
|
181
|
+
]),
|
|
182
|
+
key: "1"
|
|
183
|
+
} : void 0
|
|
184
|
+
]), 1032, ["size", "seed", "full-name", "image-src", "overlay-text", "avatar-class"]);
|
|
174
185
|
}), 128))
|
|
175
186
|
])) : (openBlock(), createBlock(_component_dt_avatar, {
|
|
176
187
|
key: 1,
|
|
@@ -178,11 +189,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
178
189
|
"full-name": $props.avatarFullName,
|
|
179
190
|
"image-src": $props.avatarSrc,
|
|
180
191
|
"image-alt": "",
|
|
181
|
-
"icon-name": $props.avatarIcon,
|
|
182
192
|
seed: $props.avatarSeed,
|
|
183
193
|
color: $props.avatarColor,
|
|
184
194
|
presence: $props.presence
|
|
185
|
-
},
|
|
195
|
+
}, createSlots({ _: 2 }, [
|
|
196
|
+
$props.avatarIcon ? {
|
|
197
|
+
name: "icon",
|
|
198
|
+
fn: withCtx(({ iconSize }) => [
|
|
199
|
+
(openBlock(), createBlock(resolveDynamicComponent($props.avatarIcon), { size: iconSize }, null, 8, ["size"]))
|
|
200
|
+
]),
|
|
201
|
+
key: "0"
|
|
202
|
+
} : void 0
|
|
203
|
+
]), 1032, ["size", "full-name", "image-src", "seed", "color", "presence"]))
|
|
186
204
|
], 8, _hoisted_1)
|
|
187
205
|
]),
|
|
188
206
|
key: "0"
|
|
@@ -207,7 +225,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
207
225
|
} : void 0
|
|
208
226
|
]), 1032, ["role"]);
|
|
209
227
|
}
|
|
210
|
-
const contact_info = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-
|
|
228
|
+
const contact_info = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b6ccb4a8"]]);
|
|
211
229
|
export {
|
|
212
230
|
contact_info as DtRecipeContactInfo
|
|
213
231
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"contact-info.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 :icon-name=\"avatarIcon\"\n :overlay-icon=\"avatar.icon\"\n :overlay-text=\"avatar.text\"\n :avatar-class=\"[{ 'd-mln24': index > 0, 'd-bc-brand': !!avatar.halo }]\"\n />\n </span>\n <dt-avatar\n v-else\n :size=\"avatarSize\"\n :full-name=\"avatarFullName\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n :icon-name=\"avatarIcon\"\n :seed=\"avatarSeed\"\n :color=\"avatarColor\"\n :presence=\"presence\"\n />\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 * Avatar icon to display if `avatarSrc` is empty.\n */\n avatarIcon: {\n type: String,\n default: null,\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(.dt-item-layout) {\n flex: 1 1 0;\n }\n\n &:deep(.dt-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(.dt-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(.dt-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","_createElementVNode","_renderSlot","_openBlock","_createElementBlock","_Fragment","_renderList"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"contact-info.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 v-if=\"avatarIcon\"\n #icon=\"{ iconSize }\"\n >\n <component\n :is=\"avatarIcon\"\n :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 v-if=\"avatarIcon\"\n #icon=\"{ iconSize }\"\n >\n <component\n :is=\"avatarIcon\"\n :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 * Avatar icon to display if `avatarSrc` is empty.\n */\n avatarIcon: {\n type: Object,\n default: null,\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(.dt-item-layout) {\n flex: 1 1 0;\n }\n\n &:deep(.dt-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(.dt-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(.dt-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","_createElementVNode","_renderSlot","_openBlock","_createElementBlock","_Fragment","_renderList","_withCtx","_resolveDynamicComponent"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
|
3
3
|
const lib_emojiTextWrapper = require("./emoji-text-wrapper.cjs");
|
|
4
4
|
const lib_avatar = require("./avatar.cjs");
|
|
5
5
|
const common_utils = require("../common/utils.cjs");
|
|
6
|
+
const vue3 = require("@dialpad/dialtone-icons/vue3");
|
|
6
7
|
const vue = require("vue");
|
|
7
8
|
const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
|
|
8
9
|
const lib_generalRow = require("./general-row.cjs");
|
|
@@ -13,9 +14,8 @@ require("@dialpad/dialtone-icons/icons.js");
|
|
|
13
14
|
require("./emoji.cjs");
|
|
14
15
|
require("./skeleton.cjs");
|
|
15
16
|
require("./presence.cjs");
|
|
16
|
-
require("./icon.cjs");
|
|
17
|
-
require("@dialpad/dialtone-icons/vue3");
|
|
18
17
|
require("../common/constants.cjs");
|
|
18
|
+
require("./icon.cjs");
|
|
19
19
|
require("./badge.cjs");
|
|
20
20
|
require("./button.cjs");
|
|
21
21
|
require("../chunks/link_constants-x8NwdqmA.js");
|
|
@@ -27,7 +27,8 @@ const _sfc_main = {
|
|
|
27
27
|
components: {
|
|
28
28
|
DtAvatar: lib_avatar.DtAvatar,
|
|
29
29
|
DtRecipeGeneralRow: lib_generalRow.DtRecipeGeneralRow,
|
|
30
|
-
DtEmojiTextWrapper: lib_emojiTextWrapper.DtEmojiTextWrapper
|
|
30
|
+
DtEmojiTextWrapper: lib_emojiTextWrapper.DtEmojiTextWrapper,
|
|
31
|
+
DtIconUser: vue3.DtIconUser
|
|
31
32
|
},
|
|
32
33
|
inheritAttrs: false,
|
|
33
34
|
props: {
|
|
@@ -170,14 +171,12 @@ const _sfc_main = {
|
|
|
170
171
|
},
|
|
171
172
|
contactDescription() {
|
|
172
173
|
return common_utils.safeConcatStrings([this.name, this.presenceText, this.userStatus]);
|
|
173
|
-
},
|
|
174
|
-
iconName() {
|
|
175
|
-
return this.noInitials ? "user" : null;
|
|
176
174
|
}
|
|
177
175
|
}
|
|
178
176
|
};
|
|
179
177
|
const _hoisted_1 = { class: "dt-leftbar-row__status" };
|
|
180
178
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
179
|
+
const _component_dt_icon_user = vue.resolveComponent("dt-icon-user");
|
|
181
180
|
const _component_dt_avatar = vue.resolveComponent("dt-avatar");
|
|
182
181
|
const _component_dt_emoji_text_wrapper = vue.resolveComponent("dt-emoji-text-wrapper");
|
|
183
182
|
const _component_dt_recipe_general_row = vue.resolveComponent("dt-recipe-general-row");
|
|
@@ -199,12 +198,18 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
|
199
198
|
"full-name": $props.name,
|
|
200
199
|
"image-src": $props.avatarSrc,
|
|
201
200
|
"image-alt": "",
|
|
202
|
-
"icon-name": $options.iconName,
|
|
203
|
-
"icon-size": "200",
|
|
204
201
|
size: "sm",
|
|
205
202
|
seed: $props.avatarSeed,
|
|
206
203
|
presence: $props.avatarPresence
|
|
207
|
-
},
|
|
204
|
+
}, vue.createSlots({ _: 2 }, [
|
|
205
|
+
$props.noInitials ? {
|
|
206
|
+
name: "icon",
|
|
207
|
+
fn: vue.withCtx(() => [
|
|
208
|
+
vue.createVNode(_component_dt_icon_user, { size: 200 })
|
|
209
|
+
]),
|
|
210
|
+
key: "0"
|
|
211
|
+
} : void 0
|
|
212
|
+
]), 1032, ["full-name", "image-src", "seed", "presence"])
|
|
208
213
|
]),
|
|
209
214
|
label: vue.withCtx(() => [
|
|
210
215
|
vue.createVNode(_component_dt_emoji_text_wrapper, {
|