@dialpad/dialtone-vue/dist/lib/contact-centers-row/contact-centers-row.js

Vue component library for Dialpad's design system Dialtone

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 "../emoji-text-wrapper/emoji-text-wrapper.js";
import { createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, mergeProps as g, normalizeClass as _, normalizeStyle as v, openBlock as y, renderSlot as b, resolveComponent as x, toDisplayString as S, toHandlers as C, withCtx as w, withModifiers as T } from "vue";
import { DtIconChevronDown as E, DtIconHeadphones as D } from "@dialpad/dialtone-icons/vue3";
//#region recipes/leftbar/contact_centers_row/contact_centers_row.vue
var O = {
	compatConfig: { MODE: 3 },
	name: "DtRecipeContactCentersRow",
	components: {
		DtButton: c,
		DtBadge: o,
		DtEmojiTextWrapper: l,
		DtIconHeadphones: D,
		DtIconChevronDown: E
	},
	inheritAttrs: !1,
	props: {
		ariaLabel: {
			type: String,
			default: ""
		},
		description: {
			type: String,
			required: !0
		},
		selected: {
			type: Boolean,
			default: !1
		},
		hideActions: {
			type: Boolean,
			default: !1
		},
		unreadCount: {
			type: String,
			default: null,
			validator(e) {
				return e ? /^\d+\+?$/.test(e) : !0;
			}
		}
	},
	emits: ["click", "click-menu"],
	data() {
		return {
			labelWidth: "auto",
			i18n: new s()
		};
	},
	computed: {
		leftbarContactCentersRowClasses() {
			return [
				"d-recipe-leftbar-row",
				"d-recipe-leftbar-row--contact-centers",
				{
					"d-recipe-leftbar-row__unread-count": this.showUnreadCount,
					"d-recipe-leftbar-row--selected": this.selected
				}
			];
		},
		getAriaLabel() {
			let e = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
			return this.ariaLabel ? this.ariaLabel : i([this.description, this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: e })]);
		},
		contactRowListeners() {
			return t(this.$attrs);
		},
		showUnreadCount() {
			return !!this.unreadCount;
		},
		menuButtonLabel() {
			return this.i18n.$t("DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL");
		}
	},
	watch: { $props: {
		deep: !0,
		async handler() {
			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,
		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) + 12) + "px";
		}
	}
}, k = [
	"data-qa",
	"aria-label",
	"title",
	"href"
], A = { class: "d-recipe-leftbar-row__alpha" }, j = {
	key: 0,
	class: "d-recipe-leftbar-row__omega"
}, M = { class: "d-recipe-leftbar-row__action-container" }, N = { class: "d-recipe-leftbar-row__bottom" };
function P(e, t, n, r, i, a) {
	let o = x("dt-icon-headphones"), s = x("dt-emoji-text-wrapper"), c = x("dt-badge"), l = x("dt-icon-chevron-down"), E = x("dt-button");
	return y(), f("div", g({ class: ["d-recipe-leftbar-row__container", { "d-recipe-leftbar-row__container--off-duty": e.$slots.timer }] }, a.addClassStyleAttrs(e.$attrs)), [p("div", {
		class: _(a.leftbarContactCentersRowClasses),
		"data-qa": "dt-recipe-contact-centers-row"
	}, [p("a", g({
		class: "d-recipe-leftbar-row__primary",
		"data-qa": e.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link",
		"aria-label": a.getAriaLabel,
		title: n.description,
		href: e.$attrs.href ?? "javascript:void(0)"
	}, a.removeClassStyleAttrs(e.$attrs), C(a.contactRowListeners, !0), { onClick: t[0] || (t[0] = (t) => e.$emit("click", t)) }), [p("div", A, [h(o, {
		size: "300",
		"data-qa": "dt-recipe-leftbar-row-icon"
	})]), p("div", {
		class: "d-recipe-leftbar-row__label",
		style: v(`flex-basis: ${i.labelWidth}`)
	}, [h(s, {
		class: "d-recipe-leftbar-row__description",
		"data-qa": "dt-recipe-leftbar-row-description",
		size: "200"
	}, {
		default: w(() => [m(S(n.description), 1)]),
		_: 1
	})], 4)], 16, k), n.hideActions ? d("", !0) : (y(), f("div", j, [b(e.$slots, "right"), p("div", M, [a.showUnreadCount ? (y(), u(c, {
		key: 0,
		class: "d-recipe-leftbar-row__unread-badge",
		"data-qa": "dt-recipe-leftbar-row-unread-badge",
		kind: "count",
		type: "bulletin"
	}, {
		default: w(() => [m(S(n.unreadCount), 1)]),
		_: 1
	})) : d("", !0), h(E, {
		class: "d-recipe-leftbar-row__action",
		"data-qa": "dt-recipe-leftbar-row-action-button",
		"aria-label": a.menuButtonLabel,
		title: a.menuButtonLabel,
		importance: "clear",
		size: "xs",
		circle: "",
		onClick: t[1] || (t[1] = T((t) => e.$emit("click-menu", t), ["stop"]))
	}, {
		icon: w(() => [h(l, { size: "100" })]),
		_: 1
	}, 8, ["aria-label", "title"])])]))], 2), p("div", N, [b(e.$slots, "timer")])], 16);
}
var F = /* @__PURE__ */ a(O, [["render", P]]);
//#endregion
export { F as default };

//# sourceMappingURL=contact-centers-row.js.map