@dialpad/dialtone/dist/vue3/lib/general-row/general-row.js

Dialpad's Dialtone design system monorepo

import { addClassStyleAttrs as e, extractVueListeners as t, removeClassStyleAttrs as n, returnFirstEl as r, safeConcatStrings as i } from "../../common/utils/index.js";
import { t as a } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import o from "../badge/badge.js";
import { DialtoneLocalization as s } from "../../localization/index.js";
import c from "../button/button.js";
import l from "../tooltip/tooltip.js";
import u from "../emoji-text-wrapper/emoji-text-wrapper.js";
import { LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as d, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR as f, LEFTBAR_GENERAL_ROW_ICON_SIZES as p, LEFTBAR_GENERAL_ROW_TYPES as m } from "./general-row-constants.js";
import h from "./leftbar-general-row-icon.js";
import { createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createTextVNode as b, createVNode as x, mergeProps as S, normalizeClass as C, normalizeStyle as w, openBlock as T, renderSlot as E, resolveComponent as D, resolveDirective as O, toDisplayString as k, toHandlers as A, withCtx as j, withDirectives as M, withModifiers as N } from "vue";
import { DtIconPhone as P, DtIconWaveform as F } from "@dialpad/dialtone-icons/vue3";
//#region recipes/leftbar/general_row/general_row.vue
var I = {
	compatConfig: { MODE: 3 },
	name: "DtRecipeGeneralRow",
	components: {
		DtEmojiTextWrapper: u,
		DtBadge: o,
		DtButton: c,
		DtTooltip: l,
		DtIconPhone: P,
		DtIconWaveform: F,
		DtRecipeLeftbarGeneralRowIcon: h
	},
	inheritAttrs: !1,
	props: {
		type: {
			type: String,
			default: "inbox",
			validator: (e) => Object.values(m).includes(e)
		},
		ariaLabel: {
			type: String,
			default: ""
		},
		description: {
			type: String,
			required: !0
		},
		color: {
			type: String,
			default: null,
			validator: (e) => Object.keys(d).includes(e)
		},
		channelSetting: {
			type: String,
			default: null
		},
		hasUnreads: {
			type: Boolean,
			default: !1
		},
		unreadCount: {
			type: String,
			default: null
		},
		unreadMentionCount: {
			type: String,
			default: null
		},
		selected: {
			type: Boolean,
			default: !1
		},
		muted: {
			type: Boolean,
			default: !1
		},
		activeVoiceChat: {
			type: Boolean,
			default: !1
		},
		dndText: {
			type: String,
			default: ""
		},
		hasCallButton: {
			type: Boolean,
			default: !1
		},
		isTyping: {
			type: Boolean,
			default: !1
		},
		iconSize: {
			type: String,
			default: "300",
			validator: (e) => p.includes(e)
		}
	},
	emits: ["call"],
	data() {
		return {
			actionFocused: !1,
			labelWidth: "100%",
			i18n: new s()
		};
	},
	computed: {
		leftbarGeneralRowClasses() {
			return ["d-recipe-leftbar-row", {
				"d-recipe-leftbar-row--no-action": !this.hasCallButton,
				"d-recipe-leftbar-row--has-unread": this.hasUnreads,
				"d-recipe-leftbar-row__unread-count": this.showUnreadCount || this.showUnreadMentionCount,
				"d-recipe-leftbar-row--selected": this.selected,
				"d-recipe-leftbar-row--muted": this.muted,
				"d-recipe-leftbar-row--action-focused": this.actionFocused
			}];
		},
		getIcon() {
			switch (this.type) {
				case m.CHANNELS:
					if (this.hasUnreads) return "channel unread";
					break;
				case m.LOCKED_CHANNEL:
					if (this.hasUnreads) return "locked channel unread";
					break;
			}
			return this.type;
		},
		generalRowListeners() {
			return t(this.$attrs);
		},
		getAriaLabel() {
			return this.ariaLabel ? this.ariaLabel : i([
				this.typingTooltip,
				this.description,
				this.unreadCountTooltip,
				this.dndTextTooltip,
				this.activeVoiceChatTooltip
			]);
		},
		hasActions() {
			return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton || this.showUnreadMentionCount;
		},
		showUnreadCount() {
			return !!this.unreadCount && this.hasUnreads;
		},
		showUnreadMentionCount() {
			return !!this.unreadMentionCount && this.hasUnreads;
		},
		hasUnreadCount() {
			return this.unreadCount !== null;
		},
		hasUnreadMentionCount() {
			return this.unreadMentionCount !== null;
		},
		shouldApplyCustomStyleForCountBadge() {
			return this.hasUnreadCount && this.hasUnreadMentionCount;
		},
		shouldApplyCustomStyleForMentionOnly() {
			return this.channelSetting === "always" && !this.hasUnreadCount && this.hasUnreadMentionCount;
		},
		messageCount() {
			return isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
		},
		mentionCount() {
			return isNaN(this.unreadMentionCount) ? this.unreadMentionCount : Number(this.unreadMentionCount);
		},
		unreadCountTooltip() {
			return i([this.unreadCount && this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: this.messageCount }), this.unreadMentionCount && this.i18n.$t("DIALTONE_UNREAD_MENTION_COUNT_TEXT", { unreadCount: this.mentionCount })]);
		},
		dndTextTooltip() {
			return this.dndText && this.i18n.$t("DIALTONE_GENERAL_ROW_DND_TEXT_TOOLTIP");
		},
		activeVoiceChatTooltip() {
			return this.activeVoiceChat && this.i18n.$t("DIALTONE_GENERAL_ROW_ACTIVE_VOICE_CHAT_TEXT");
		},
		callButtonTooltip() {
			return this.i18n.$t("DIALTONE_GENERAL_ROW_CALL_BUTTON_TOOLTIP");
		},
		typingTooltip() {
			return this.isTyping && this.i18n.$t("DIALTONE_TYPING_TEXT");
		}
	},
	watch: { $props: {
		immediate: !0,
		deep: !0,
		async handler() {
			this.validateProps(), await this.$nextTick(), this.adjustLabelWidth();
		}
	} },
	mounted() {
		this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(r(this.$el)), this.adjustLabelWidth();
	},
	beforeUnmount: function() {
		this.resizeObserver.disconnect();
	},
	methods: {
		removeClassStyleAttrs: n,
		addClassStyleAttrs: e,
		validateProps() {
			this.type === m.CONTACT_CENTER && !Object.keys(d).includes(this.color) && console.error(f);
		},
		adjustLabelWidth() {
			this.labelWidth = (r(this.$el)?.querySelector(".d-recipe-leftbar-row__primary")?.clientWidth || 0) - ((r(this.$el)?.querySelector(".d-recipe-leftbar-row__omega")?.clientWidth || 0) + (r(this.$el)?.querySelector(".d-recipe-leftbar-row__alpha")?.clientWidth || 0) + 16) + "px";
		}
	}
}, L = [
	"data-qa",
	"aria-label",
	"title",
	"href"
], R = { class: "d-recipe-leftbar-row__alpha" }, z = {
	key: 0,
	class: "d-recipe-leftbar-row__is-typing"
}, B = {
	key: 0,
	class: "d-recipe-leftbar-row__omega"
}, V = {
	key: 1,
	class: "d-recipe-leftbar-row__active-voice"
}, H = {
	key: 3,
	class: "d-recipe-leftbar-row__action",
	"data-qa": "dt-recipe-leftbar-row-action"
};
function U(e, t, n, r, i, a) {
	let o = D("dt-recipe-leftbar-general-row-icon"), s = D("dt-emoji-text-wrapper"), c = D("dt-tooltip"), l = D("dt-icon-waveform"), u = D("dt-badge"), d = D("dt-icon-phone"), f = D("dt-button"), p = O("dt-tooltip");
	return T(), v("div", S({ class: a.leftbarGeneralRowClasses }, a.addClassStyleAttrs(e.$attrs), { "data-qa": "dt-recipe-leftbar-row" }), [y("a", S({
		class: "d-recipe-leftbar-row__primary",
		"data-qa": "data-qa" in e.$attrs ? e.$attrs["data-qa"] : "d-recipe-leftbar-row-link",
		"aria-label": a.getAriaLabel,
		title: n.description,
		href: "href" in e.$attrs ? e.$attrs.href : "javascript:void(0)"
	}, a.removeClassStyleAttrs(e.$attrs), A(a.generalRowListeners, !0)), [y("div", R, [n.isTyping ? M((T(), v("div", z, [...t[3] || (t[3] = [
		y("span", null, null, -1),
		y("span", null, null, -1),
		y("span", null, null, -1)
	])])), [[p, a.typingTooltip]]) : E(e.$slots, "left", { key: 1 }, () => [x(o, {
		type: a.getIcon,
		color: n.color,
		"icon-size": n.iconSize,
		"data-qa": "dt-recipe-leftbar-row-icon"
	}, null, 8, [
		"type",
		"color",
		"icon-size"
	])])]), y("div", {
		class: "d-recipe-leftbar-row__label",
		style: w(`flex-basis: ${i.labelWidth}`)
	}, [E(e.$slots, "label", {}, () => [x(s, {
		class: "d-recipe-leftbar-row__description",
		"data-qa": "dt-recipe-leftbar-row-description",
		size: "200"
	}, {
		default: j(() => [b(k(n.description), 1)]),
		_: 1
	})])], 4)], 16, L), a.hasActions ? (T(), v("div", B, [
		n.dndText ? (T(), g(c, {
			key: 0,
			placement: "top",
			message: a.dndTextTooltip
		}, {
			anchor: j(() => [y("div", {
				ref: "d-recipe-leftbar-row-dnd",
				class: "d-recipe-leftbar-row__dnd",
				"data-qa": "dt-recipe-leftbar-row-dnd"
			}, k(n.dndText), 513)]),
			_: 1
		}, 8, ["message"])) : _("", !0),
		n.activeVoiceChat ? M((T(), v("div", V, [x(l, { size: "300" })])), [[p, a.activeVoiceChatTooltip]]) : a.showUnreadCount || a.showUnreadMentionCount ? (T(), g(c, {
			key: 2,
			message: a.unreadCountTooltip,
			placement: "top"
		}, {
			anchor: j(() => [a.showUnreadCount ? (T(), g(u, {
				key: 0,
				kind: "count",
				type: "bulletin",
				"data-qa": "dt-recipe-leftbar-row-unread-badge",
				class: C(["d-recipe-leftbar-row__unread-badge", { "d-recipe-leftbar-row__unread-count-badge": a.shouldApplyCustomStyleForCountBadge }])
			}, {
				default: j(() => [b(k(n.unreadCount), 1)]),
				_: 1
			}, 8, ["class"])) : _("", !0), a.showUnreadMentionCount ? (T(), g(u, {
				key: 1,
				kind: "count",
				type: "bulletin",
				"data-qa": "dt-recipe-leftbar-row-unread-mention-badge",
				class: C([
					"d-recipe-leftbar-row__unread-badge",
					{ "d-recipe-leftbar-row__unread-mention-count-badge": a.shouldApplyCustomStyleForCountBadge },
					{ "d-recipe-leftbar-row__unread-mention-only-count-badge": a.shouldApplyCustomStyleForMentionOnly }
				])
			}, {
				default: j(() => [b(k(n.unreadMentionCount), 1)]),
				_: 1
			}, 8, ["class"])) : _("", !0)]),
			_: 1
		}, 8, ["message"])) : _("", !0),
		n.hasCallButton ? (T(), v("div", H, [x(c, {
			message: a.callButtonTooltip,
			placement: "top"
		}, {
			anchor: j(() => [x(f, {
				class: "d-recipe-leftbar-row__action-button",
				"data-qa": "dt-recipe-leftbar-row-action-call-button",
				circle: "",
				size: "xs",
				kind: "inverted",
				"aria-label": a.callButtonTooltip,
				onFocus: t[0] || (t[0] = (e) => i.actionFocused = !0),
				onBlur: t[1] || (t[1] = (e) => i.actionFocused = !1),
				onClick: t[2] || (t[2] = N((t) => e.$emit("call", t), ["stop"]))
			}, {
				icon: j(() => [x(d, { size: "200" })]),
				_: 1
			}, 8, ["aria-label"])]),
			_: 1
		}, 8, ["message"])])) : _("", !0)
	])) : _("", !0)], 16);
}
var W = /* @__PURE__ */ a(I, [["render", U]]);
//#endregion
export { W as default };

//# sourceMappingURL=general-row.js.map