@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
147 lines (146 loc) • 5.74 kB
JavaScript
import { safeConcatStrings as l } from "../../common/utils/index.js";
import { DtIconHeadphones as p, DtIconChevronDown as u } from "@dialpad/dialtone-icons/vue2";
import { n as _ } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import b from "../button/button.js";
import h from "../badge/badge.js";
import f from "../emoji-text-wrapper/emoji-text-wrapper.js";
import m from "../../common/mixins/localization.js";
const w = {
name: "DtRecipeContactCentersRow",
components: {
DtButton: b,
DtBadge: h,
DtEmojiTextWrapper: f,
DtIconHeadphones: p,
DtIconChevronDown: u
},
mixins: [m],
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(r) {
return r ? /^\d+\+?$/.test(r) : !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"
};
},
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 r = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
return this.ariaLabel ? this.ariaLabel : l([
this.description,
this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: r })
]);
},
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(this.$el), this.adjustLabelWidth();
},
beforeDestroy: function() {
this.resizeObserver.disconnect();
},
methods: {
adjustLabelWidth() {
var i, s, o, n, c, d;
const r = ((s = (i = this.$el) == null ? void 0 : i.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : s.clientWidth) || 0, t = ((n = (o = this.$el) == null ? void 0 : o.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : n.clientWidth) || 0, e = ((d = (c = this.$el) == null ? void 0 : c.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : d.clientWidth) || 0, a = 12;
this.labelWidth = r - (t + e + a) + "px";
}
}
};
var C = function() {
var t = this, e = t._self._c;
return e("div", { class: [
"d-recipe-leftbar-row__container",
{ "d-recipe-leftbar-row__container--off-duty": t.$slots.timer }
] }, [e("div", { class: t.leftbarContactCentersRowClasses, attrs: { "data-qa": "dt-recipe-contact-centers-row" } }, [e("a", t._g(t._b({ staticClass: "d-recipe-leftbar-row__primary", attrs: { "data-qa": t.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link", "aria-label": t.getAriaLabel, title: t.description, href: t.$attrs.href ?? "javascript:void(0)" } }, "a", t.$attrs, !1), t.$listeners), [e("div", { staticClass: "d-recipe-leftbar-row__alpha" }, [e("dt-icon-headphones", { attrs: { size: "300", "data-qa": "dt-recipe-leftbar-row-icon" } })], 1), e("div", { staticClass: "d-recipe-leftbar-row__label", style: `flex-basis: ${t.labelWidth}` }, [e("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__description", attrs: { "data-qa": "dt-recipe-leftbar-row-description", size: "200" } }, [t._v(" " + t._s(t.description) + " ")])], 1)]), e("div", { directives: [{ name: "show", rawName: "v-show", value: !t.hideActions, expression: "!hideActions" }], staticClass: "d-recipe-leftbar-row__omega" }, [t._t("right"), e("div", { staticClass: "d-recipe-leftbar-row__action-container" }, [t.showUnreadCount ? e("dt-badge", { staticClass: "d-recipe-leftbar-row__unread-badge", attrs: { "data-qa": "dt-recipe-leftbar-row-unread-badge", kind: "count", type: "bulletin" } }, [t._v(" " + t._s(t.unreadCount) + " ")]) : t._e(), e("dt-button", { staticClass: "d-recipe-leftbar-row__action", attrs: { "data-qa": "dt-recipe-leftbar-row-action-button", "aria-label": t.menuButtonLabel, title: t.menuButtonLabel, importance: "clear", size: "xs", circle: "" }, on: { click: function(a) {
return a.stopPropagation(), t.$emit("click-menu", a);
} }, scopedSlots: t._u([{ key: "icon", fn: function() {
return [e("dt-icon-chevron-down", { attrs: { size: "100" } })];
}, proxy: !0 }]) })], 1)], 2)]), e("div", { staticClass: "d-recipe-leftbar-row__bottom" }, [t._t("timer")], 2)]);
}, v = [], g = /* @__PURE__ */ _(
w,
C,
v
);
const N = g.exports;
export {
N as default
};
//# sourceMappingURL=contact-centers-row.js.map