@dialpad/dialtone/dist/vue3/lib/callbox/callbox.js

Dialpad's Dialtone design system monorepo

import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import t from "../avatar/avatar.js";
import n from "../badge/badge.js";
import { CALLBOX_BADGE_COLORS as r, CALLBOX_BORDER_COLORS as i } from "./callbox-constants.js";
import { createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderSlot as h, resolveComponent as g, resolveDirective as _, resolveDynamicComponent as v, toDisplayString as y, withCtx as b, withDirectives as x } from "vue";
import { DtIconPause as S } from "@dialpad/dialtone-icons/vue3";
//#region recipes/leftbar/callbox/callbox.vue
var C = {
	compatConfig: { MODE: 3 },
	name: "DtRecipeCallbox",
	components: {
		DtBadge: n,
		DtAvatar: t,
		DtIconPause: S
	},
	inheritAttrs: !1,
	props: {
		badgeText: {
			type: String,
			default: ""
		},
		badgeColor: {
			type: String,
			default: null,
			validator: (e) => e === null || Object.keys(r).includes(e)
		},
		avatarSrc: {
			type: String,
			default: ""
		},
		avatarFullName: {
			type: String,
			default: ""
		},
		avatarSeed: {
			type: String,
			default: ""
		},
		title: {
			type: String,
			default: ""
		},
		borderColor: {
			type: String,
			default: "default",
			validator: (e) => Object.keys(i).includes(e)
		},
		clickable: {
			type: Boolean,
			default: !1
		},
		isOnHold: {
			type: Boolean,
			default: !1
		}
	},
	emits: ["click"],
	computed: {
		shouldShowAvatar() {
			return this.avatarFullName || this.avatarSrc;
		},
		badgeClass() {
			return r[this.badgeColor];
		},
		borderClass() {
			return i[this.borderColor];
		}
	},
	methods: { handleClick(e) {
		this.clickable && this.$emit("click", e);
	} }
}, w = {
	key: 0,
	"data-qa": "dt-recipe-callbox__video-wrapper",
	class: "d-recipe-callbox__video"
}, T = { class: "d-recipe-callbox__main-content-top" }, E = { class: "d-recipe-callbox__content" }, D = {
	key: 0,
	"data-qa": "dt-recipe-callbox__badge-wrapper",
	class: "d-recipe-callbox__content-badge"
}, O = {
	key: 1,
	"data-qa": "dt-recipe-callbox__subtitle-wrapper",
	class: "d-recipe-callbox__content-subtitle"
}, k = {
	key: 1,
	"data-qa": "dt-recipe-callbox__right-wrapper",
	class: "d-recipe-callbox__right"
}, A = {
	key: 0,
	"data-qa": "dt-recipe-callbox__bottom-wrapper",
	class: "d-recipe-callbox__main-content-bottom"
};
function j(e, t, n, r, i, S) {
	let C = g("dt-icon-pause"), j = g("dt-avatar"), M = g("dt-badge"), N = _("dt-tooltip");
	return m(), s("div", {
		"data-qa": "dt-recipe-callbox",
		class: f([e.$attrs.class, "d-recipe-callbox"]),
		style: p(e.$attrs.style)
	}, [e.$slots.video ? (m(), s("div", w, [h(e.$slots, "video")])) : o("", !0), c("div", {
		"data-qa": "dt-recipe-callbox__main-content",
		class: f([
			"d-recipe-callbox__main-content",
			S.borderClass,
			{ "d-recipe-callbox--clickable": n.clickable }
		])
	}, [c("div", T, [
		S.shouldShowAvatar ? (m(), a(j, {
			key: 0,
			"avatar-class": "d-recipe-callbox__avatar",
			"image-src": n.avatarSrc,
			"image-alt": "",
			"full-name": n.avatarFullName,
			seed: n.avatarSeed,
			clickable: n.clickable,
			size: "sm",
			onClick: S.handleClick
		}, l({ _: 2 }, [n.isOnHold ? {
			name: "overlayIcon",
			fn: b(() => [d(C)]),
			key: "0"
		} : void 0]), 1032, [
			"image-src",
			"full-name",
			"seed",
			"clickable",
			"onClick"
		])) : o("", !0),
		c("div", E, [
			x((m(), a(v(n.clickable ? "button" : "span"), {
				"data-qa": "dt-recipe-callbox__title",
				class: "d-recipe-callbox__content-title",
				tabindex: "0",
				onClick: S.handleClick
			}, {
				default: b(() => [u(y(n.title), 1)]),
				_: 1
			}, 8, ["onClick"])), [[N, n.title]]),
			e.$slots.badge || n.badgeText ? (m(), s("div", D, [h(e.$slots, "badge", {}, () => [d(M, {
				class: f(S.badgeClass),
				text: n.badgeText
			}, null, 8, ["class", "text"])])])) : o("", !0),
			e.$slots.subtitle ? (m(), s("div", O, [h(e.$slots, "subtitle")])) : o("", !0)
		]),
		e.$slots.right ? (m(), s("div", k, [h(e.$slots, "right")])) : o("", !0)
	]), e.$slots.bottom ? (m(), s("div", A, [h(e.$slots, "bottom")])) : o("", !0)], 2)], 6);
}
var M = /* @__PURE__ */ e(C, [["render", j]]);
//#endregion
export { M as default };

//# sourceMappingURL=callbox.js.map