UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

1 lines 8 kB
{"version":3,"file":"callbox.cjs","names":[],"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"],"mappings":"yWAkGA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,kBAEN,WAAY,CAAE,QAAA,EAAA,QAAS,SAAA,EAAA,QAAU,YAAA,EAAA,YAAa,CAE9C,aAAc,GAEd,MAAO,CAIL,UAAW,CACT,KAAM,OACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,OACN,QAAS,KACT,UAAY,GAAU,IAAU,MAAQ,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAM,CAC1F,CAMD,UAAW,CACT,KAAM,OACN,QAAS,GACV,CAMD,eAAgB,CACd,KAAM,OACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,OACN,QAAS,GACV,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAMD,YAAa,CACX,KAAM,OACN,QAAS,UACT,UAAY,GAAU,OAAO,KAAK,EAAA,sBAAsB,CAAC,SAAS,EAAM,CACzE,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAO,CAOL,QACD,CAED,SAAU,CACR,kBAAoB,CAClB,OAAO,KAAK,gBAAkB,KAAK,WAGrC,YAAc,CACZ,OAAO,EAAA,qBAAqB,KAAK,aAGnC,aAAe,CACb,OAAO,EAAA,sBAAsB,KAAK,cAErC,CAED,QAAS,CACP,YAAa,EAAG,CACT,KAAK,WACV,KAAK,MAAM,QAAS,EAAE,EAEzB,CACF,UAjNK,UAAQ,mCACR,MAAM,8BAUJ,MAAM,qCAAoC,IAoBrC,MAAM,4BAA2B,UAalC,UAAQ,mCACR,MAAM,4CAYN,UAAQ,sCACR,MAAM,+CAQR,UAAQ,mCACR,MAAM,oCAQR,UAAQ,oCACR,MAAM,kRAKN,MAAA,CAvFJ,UAAQ,oBACP,OAAA,EAAA,EAAA,gBAAK,CAAG,EAAA,OAAO,MAAK,mBAAA,CAAA,CACpB,OAAA,EAAA,EAAA,gBAAO,EAAA,OAAO,MAAK,GAGZ,EAAA,OAAO,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAMT,MAPN,EAOM,EAAA,EAAA,EAAA,YADiB,EAAA,OAAA,QAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBA4EjB,MAAA,CAzEJ,UAAQ,kCACP,OAAA,EAAA,EAAA,gBAAK,CAAA,iCAAqC,EAAA,YAAW,CAAA,8BAAmC,EAAA,UAAS,CAAA,CAAA,4BAgE5F,MA9DN,EA8DM,CA1DI,EAAA,mBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAgBI,EAAA,OAfV,eAAa,2BACZ,YAAW,EAAA,UACZ,YAAU,GACT,YAAW,EAAA,eACX,KAAM,EAAA,WACN,UAAW,EAAA,UACZ,KAAK,KACJ,QAAO,EAAA,sCAGA,EAAA,SAAA,MACL,mCAEgB,EAAA,EAAA,EAAA,aAAA,EAAA,CAAA,CAAA,0IAmCf,MAhCN,EAgCM,yFA9BG,EAAA,UAAS,SAAA,OAAA,CAAA,CAEd,UAAQ,2BACR,MAAM,kCACN,SAAS,IACR,QAAO,EAAA,wCAEG,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAR,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,0BANM,EAAA,MAAK,CAAA,CAAA,CASb,EAAA,OAAO,OAAS,EAAA,YAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAWlB,MAZN,EAYM,EAAA,EAAA,EAAA,YADG,EAAA,OAAA,QAAA,EAAA,KAAA,EAAA,EAAA,EAAA,aADH,EAAA,CAFC,OAAA,EAAA,EAAA,gBAAO,EAAA,WAAU,CACjB,KAAM,EAAA,yEAKL,EAAA,OAAO,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAMT,MAPN,EAOM,EAAA,EAAA,EAAA,YADoB,EAAA,OAAA,WAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,GAIpB,EAAA,OAAO,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAMT,MAPN,EAOM,EAAA,EAAA,EAAA,YADiB,EAAA,OAAA,QAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,GAIjB,EAAA,OAAO,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKT,MANN,EAMM,EAAA,EAAA,EAAA,YADkB,EAAA,OAAA,SAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA"}