@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
223 lines (222 loc) • 7.13 kB
JavaScript
import { addClassStyleAttrs as S, removeClassStyleAttrs as A, returnFirstEl as u, extractVueListeners as E, safeConcatStrings as N } from "../../common/utils/index.js";
import { DtIconChevronDown as W, DtIconHeadphones as k } from "@dialpad/dialtone-icons/vue3";
import { DialtoneLocalization as D } from "../../localization/index.js";
import { resolveComponent as i, createElementBlock as f, openBlock as h, mergeProps as w, createElementVNode as o, normalizeClass as T, createCommentVNode as C, toHandlers as q, createVNode as _, normalizeStyle as B, withCtx as b, createTextVNode as y, toDisplayString as v, renderSlot as L, createBlock as $, withModifiers as z } from "vue";
import { _ as O } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import R from "../emoji-text-wrapper/emoji-text-wrapper.js";
import j from "../badge/badge.js";
import U from "../button/button.js";
const V = {
compatConfig: { MODE: 3 },
name: "DtRecipeContactCentersRow",
components: {
DtButton: U,
DtBadge: j,
DtEmojiTextWrapper: R,
DtIconHeadphones: k,
DtIconChevronDown: W
},
inheritAttrs: !1,
props: {
/**
* Will be read out by a screen reader upon focus of this row. If not defined "description" will be read.
*/
ariaLabel: {
type: String,
default: ""
},
/**
* Text displayed next to the icon. Required.
*/
description: {
type: String,
required: !0
},
/**
* Determines if the row is selected
*/
selected: {
type: Boolean,
default: !1
},
/**
* Making this true will hide the unread count badge, the chevron button, and the right slot
*/
hideActions: {
type: Boolean,
default: !1
},
/**
* Number of unread messages, could be a string to support '99+'
*/
unreadCount: {
type: String,
default: null,
validator(e) {
return e ? /^\d+\+?$/.test(e) : !0;
}
}
},
emits: [
/**
* Native click event on the row itself
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"click",
/**
* Menu button clicked
*
* @event call
* @type {PointerEvent | KeyboardEvent}
*/
"click-menu"
],
data() {
return {
labelWidth: "auto",
i18n: new D()
};
},
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() {
const e = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
return this.ariaLabel ? this.ariaLabel : N([
this.description,
this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: e })
]);
},
contactRowListeners() {
return E(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(u(this.$el)), this.adjustLabelWidth();
},
beforeUnmount: function() {
this.resizeObserver.disconnect();
},
methods: {
removeClassStyleAttrs: A,
addClassStyleAttrs: S,
adjustLabelWidth() {
var n, t, s, l, d, c;
const e = ((t = (n = u(this.$el)) == null ? void 0 : n.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : t.clientWidth) || 0, r = ((l = (s = u(this.$el)) == null ? void 0 : s.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : l.clientWidth) || 0, a = ((c = (d = u(this.$el)) == null ? void 0 : d.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : c.clientWidth) || 0, m = 12;
this.labelWidth = e - (r + a + m) + "px";
}
}
}, x = ["data-qa", "aria-label", "title", "href"], I = { class: "d-recipe-leftbar-row__alpha" }, M = {
key: 0,
class: "d-recipe-leftbar-row__omega"
}, H = { class: "d-recipe-leftbar-row__action-container" }, F = { class: "d-recipe-leftbar-row__bottom" };
function G(e, r, a, m, n, t) {
const s = i("dt-icon-headphones"), l = i("dt-emoji-text-wrapper"), d = i("dt-badge"), c = i("dt-icon-chevron-down"), g = i("dt-button");
return h(), f("div", w({
class: [
"d-recipe-leftbar-row__container",
{ "d-recipe-leftbar-row__container--off-duty": e.$slots.timer }
]
}, t.addClassStyleAttrs(e.$attrs)), [
o("div", {
class: T(t.leftbarContactCentersRowClasses),
"data-qa": "dt-recipe-contact-centers-row"
}, [
o("a", w({
class: "d-recipe-leftbar-row__primary",
"data-qa": e.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link",
"aria-label": t.getAriaLabel,
title: a.description,
href: e.$attrs.href ?? "javascript:void(0)"
}, t.removeClassStyleAttrs(e.$attrs), q(t.contactRowListeners, !0), {
onClick: r[0] || (r[0] = (p) => e.$emit("click", p))
}), [
o("div", I, [
_(s, {
size: "300",
"data-qa": "dt-recipe-leftbar-row-icon"
})
]),
o("div", {
class: "d-recipe-leftbar-row__label",
style: B(`flex-basis: ${n.labelWidth}`)
}, [
_(l, {
class: "d-recipe-leftbar-row__description",
"data-qa": "dt-recipe-leftbar-row-description",
size: "200"
}, {
default: b(() => [
y(v(a.description), 1)
]),
_: 1
})
], 4)
], 16, x),
a.hideActions ? C("", !0) : (h(), f("div", M, [
L(e.$slots, "right"),
o("div", H, [
t.showUnreadCount ? (h(), $(d, {
key: 0,
class: "d-recipe-leftbar-row__unread-badge",
"data-qa": "dt-recipe-leftbar-row-unread-badge",
kind: "count",
type: "bulletin"
}, {
default: b(() => [
y(v(a.unreadCount), 1)
]),
_: 1
})) : C("", !0),
_(g, {
class: "d-recipe-leftbar-row__action",
"data-qa": "dt-recipe-leftbar-row-action-button",
"aria-label": t.menuButtonLabel,
title: t.menuButtonLabel,
importance: "clear",
size: "xs",
circle: "",
onClick: r[1] || (r[1] = z((p) => e.$emit("click-menu", p), ["stop"]))
}, {
icon: b(() => [
_(c, { size: "100" })
]),
_: 1
}, 8, ["aria-label", "title"])
])
]))
], 2),
o("div", F, [
L(e.$slots, "timer")
])
], 16);
}
const te = /* @__PURE__ */ O(V, [["render", G]]);
export {
te as default
};
//# sourceMappingURL=contact-centers-row.js.map