@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
233 lines (232 loc) • 8.4 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const common_utils = require("../../../common/utils.cjs");
const emoji_text_wrapper = require("../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs");
const DtIconChevronDown = require("@dialpad/dialtone-icons/vue3/chevron-down");
const DtIconHeadphones = require("@dialpad/dialtone-icons/vue3/headphones");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
const button = require("../../../components/button/button.vue.cjs");
const badge = require("../../../components/badge/badge.vue.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeContactCentersRow",
components: {
DtButton: button.default,
DtBadge: badge.default,
DtEmojiTextWrapper: emoji_text_wrapper.default,
DtIconHeadphones,
DtIconChevronDown
},
inheritAttrs: false,
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: true
},
/**
* Determines if the row is selected
*/
selected: {
type: Boolean,
default: false
},
/**
* Making this true will hide the unread count badge, the chevron button, and the right slot
*/
hideActions: {
type: Boolean,
default: false
},
/**
* Number of unread messages, could be a string to support '99+'
*/
unreadCount: {
type: String,
default: null
},
/**
* Aria label for the menu button.
*/
menuButtonAriaLabel: {
type: String,
required: true
}
},
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() {
return this.ariaLabel ? this.ariaLabel : common_utils.safeConcatStrings([this.description, this.unreadCountTooltip]);
},
contactRowListeners() {
return common_utils.extractVueListeners(this.$attrs);
},
showUnreadCount() {
return !!this.unreadCount;
}
},
watch: {
$props: {
deep: true,
async handler() {
await this.$nextTick();
this.adjustLabelWidth();
}
}
},
mounted() {
this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);
this.resizeObserver.observe(common_utils.returnFirstEl(this.$el));
this.adjustLabelWidth();
},
beforeUnmount: function() {
this.resizeObserver.disconnect();
},
methods: {
removeClassStyleAttrs: common_utils.removeClassStyleAttrs,
addClassStyleAttrs: common_utils.addClassStyleAttrs,
adjustLabelWidth() {
var _a, _b, _c, _d, _e, _f;
const labelWidth = ((_b = (_a = common_utils.returnFirstEl(this.$el)) == null ? void 0 : _a.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
const omegaWidth = ((_d = (_c = common_utils.returnFirstEl(this.$el)) == null ? void 0 : _c.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : _d.clientWidth) || 0;
const alphaWidth = ((_f = (_e = common_utils.returnFirstEl(this.$el)) == null ? void 0 : _e.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : _f.clientWidth) || 0;
const paddings = 12;
this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + "px";
}
}
};
const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
const _hoisted_2 = { class: "d-recipe-leftbar-row__alpha" };
const _hoisted_3 = {
key: 0,
class: "d-recipe-leftbar-row__omega"
};
const _hoisted_4 = { class: "d-recipe-leftbar-row__action-container" };
const _hoisted_5 = { class: "d-recipe-leftbar-row__bottom" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_headphones = vue.resolveComponent("dt-icon-headphones");
const _component_dt_emoji_text_wrapper = vue.resolveComponent("dt-emoji-text-wrapper");
const _component_dt_badge = vue.resolveComponent("dt-badge");
const _component_dt_icon_chevron_down = vue.resolveComponent("dt-icon-chevron-down");
const _component_dt_button = vue.resolveComponent("dt-button");
return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
class: [
"d-recipe-leftbar-row__container",
{ "d-recipe-leftbar-row__container--off-duty": _ctx.$slots.timer }
]
}, $options.addClassStyleAttrs(_ctx.$attrs)), [
vue.createElementVNode("div", {
class: vue.normalizeClass($options.leftbarContactCentersRowClasses),
"data-qa": "dt-recipe-contact-centers-row"
}, [
vue.createElementVNode("a", vue.mergeProps({
class: "d-recipe-leftbar-row__primary",
"data-qa": _ctx.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link",
"aria-label": $options.getAriaLabel,
title: $props.description,
href: _ctx.$attrs.href ?? "javascript:void(0)"
}, $options.removeClassStyleAttrs(_ctx.$attrs), vue.toHandlers($options.contactRowListeners, true), {
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
}), [
vue.createElementVNode("div", _hoisted_2, [
vue.createVNode(_component_dt_icon_headphones, {
size: "300",
"data-qa": "dt-recipe-leftbar-row-icon"
})
]),
vue.createElementVNode("div", {
class: "d-recipe-leftbar-row__label",
style: vue.normalizeStyle(`flex-basis: ${$data.labelWidth}`)
}, [
vue.createVNode(_component_dt_emoji_text_wrapper, {
class: "d-recipe-leftbar-row__description",
"data-qa": "dt-recipe-leftbar-row-description",
size: "200"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString($props.description), 1)
]),
_: 1
})
], 4)
], 16, _hoisted_1),
!$props.hideActions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
vue.renderSlot(_ctx.$slots, "right"),
vue.createElementVNode("div", _hoisted_4, [
$options.showUnreadCount ? (vue.openBlock(), vue.createBlock(_component_dt_badge, {
key: 0,
class: "d-recipe-leftbar-row__unread-badge",
"data-qa": "dt-recipe-leftbar-row-unread-badge",
kind: "count",
type: "bulletin"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString($props.unreadCount), 1)
]),
_: 1
})) : vue.createCommentVNode("", true),
vue.createVNode(_component_dt_button, {
class: "d-recipe-leftbar-row__action",
"data-qa": "dt-recipe-leftbar-row-action-button",
"aria-label": $props.menuButtonAriaLabel,
importance: "clear",
size: "xs",
circle: "",
onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => _ctx.$emit("click-menu", $event), ["stop"]))
}, {
icon: vue.withCtx(() => [
vue.createVNode(_component_dt_icon_chevron_down, { size: "100" })
]),
_: 1
}, 8, ["aria-label"])
])
])) : vue.createCommentVNode("", true)
], 2),
vue.createElementVNode("div", _hoisted_5, [
vue.renderSlot(_ctx.$slots, "timer")
])
], 16);
}
const contact_centers_row = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = contact_centers_row;
//# sourceMappingURL=contact_centers_row.vue.cjs.map