@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
152 lines (151 loc) • 6.26 kB
JavaScript
"use strict";
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/vue2/chevron-down");
const DtIconHeadphones = require("@dialpad/dialtone-icons/vue2/headphones");
const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
const button = require("../../../components/button/button.vue.cjs");
const badge = require("../../../components/badge/badge.vue.cjs");
const _sfc_main = {
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]);
},
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(this.$el);
this.adjustLabelWidth();
},
beforeDestroy: function() {
this.resizeObserver.disconnect();
},
methods: {
adjustLabelWidth() {
var _a, _b, _c, _d, _e, _f;
const labelWidth = ((_b = (_a = this.$el) == null ? void 0 : _a.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
const omegaWidth = ((_d = (_c = this.$el) == null ? void 0 : _c.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : _d.clientWidth) || 0;
const alphaWidth = ((_f = (_e = 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";
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { class: [
"d-recipe-leftbar-row__container",
{ "d-recipe-leftbar-row__container--off-duty": _vm.$slots.timer }
] }, [_c("div", { class: _vm.leftbarContactCentersRowClasses, attrs: { "data-qa": "dt-recipe-contact-centers-row" } }, [_c("a", _vm._g(_vm._b({ staticClass: "d-recipe-leftbar-row__primary", attrs: { "data-qa": _vm.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link", "aria-label": _vm.getAriaLabel, "title": _vm.description, "href": _vm.$attrs.href ?? "javascript:void(0)" } }, "a", _vm.$attrs, false), _vm.$listeners), [_c("div", { staticClass: "d-recipe-leftbar-row__alpha" }, [_c("dt-icon-headphones", { attrs: { "size": "300", "data-qa": "dt-recipe-leftbar-row-icon" } })], 1), _c("div", { staticClass: "d-recipe-leftbar-row__label", style: `flex-basis: ${_vm.labelWidth}` }, [_c("dt-emoji-text-wrapper", { staticClass: "d-recipe-leftbar-row__description", attrs: { "data-qa": "dt-recipe-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.description) + " ")])], 1)]), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.hideActions, expression: "!hideActions" }], staticClass: "d-recipe-leftbar-row__omega" }, [_vm._t("right"), _c("div", { staticClass: "d-recipe-leftbar-row__action-container" }, [_vm.showUnreadCount ? _c("dt-badge", { staticClass: "d-recipe-leftbar-row__unread-badge", attrs: { "data-qa": "dt-recipe-leftbar-row-unread-badge", "kind": "count", "type": "bulletin" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _c("dt-button", { staticClass: "d-recipe-leftbar-row__action", attrs: { "data-qa": "dt-recipe-leftbar-row-action-button", "aria-label": _vm.menuButtonAriaLabel, "importance": "clear", "size": "xs", "circle": "" }, on: { "click": function($event) {
$event.stopPropagation();
return _vm.$emit("click-menu", $event);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("dt-icon-chevron-down", { attrs: { "size": "100" } })];
}, proxy: true }]) })], 1)], 2)]), _c("div", { staticClass: "d-recipe-leftbar-row__bottom" }, [_vm._t("timer")], 2)]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const contact_centers_row = __component__.exports;
exports.default = contact_centers_row;
//# sourceMappingURL=contact_centers_row.vue.cjs.map