@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
198 lines (197 loc) • 6.64 kB
JavaScript
import { DtIconKeypad, DtIconDialer, DtIconVolume2, DtIconExpertNode, DtIconBranch, DtIconCallMerge, DtIconChevronsRight, DtIconTransfer, DtIconPhoneHangUp, DtIconMoreVertical, DtIconListBullet } from "@dialpad/dialtone-icons/vue3";
import { IVR_NODE_GO_TO, IVR_NODE_PROMPT_MENU, IVR_NODE_PROMPT_COLLECT, IVR_NODE_PROMPT_PLAY, IVR_NODE_EXPERT, IVR_NODE_BRANCH, IVR_NODE_ASSIGN, IVR_NODE_CUSTOMER_DATA, IVR_NODE_TRANSFER, IVR_NODE_HANGUP, IVR_NODE_CLASS_MAPPING } from "./ivr_node_constants.js";
import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers, normalizeClass, toDisplayString, createCommentVNode, renderSlot, createVNode, withCtx, createElementVNode, createBlock, resolveDynamicComponent, withModifiers } from "vue";
import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
import DtCard from "../../../components/card/card.vue.js";
import DtButton from "../../../components/button/button.vue.js";
import DtDropdown from "../../../components/dropdown/dropdown.vue.js";
const typeToIcon = /* @__PURE__ */ new Map([
[IVR_NODE_PROMPT_MENU, DtIconKeypad],
[IVR_NODE_PROMPT_COLLECT, DtIconDialer],
[IVR_NODE_PROMPT_PLAY, DtIconVolume2],
[IVR_NODE_EXPERT, DtIconExpertNode],
[IVR_NODE_BRANCH, DtIconBranch],
[IVR_NODE_GO_TO, DtIconCallMerge],
[IVR_NODE_ASSIGN, DtIconChevronsRight],
[IVR_NODE_CUSTOMER_DATA, DtIconListBullet],
[IVR_NODE_TRANSFER, DtIconTransfer],
[IVR_NODE_HANGUP, DtIconPhoneHangUp]
]);
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeIvrNode",
components: {
DtCard,
DtButton,
DtDropdown,
DtIconKeypad,
DtIconDialer,
DtIconVolume2,
DtIconExpertNode,
DtIconBranch,
DtIconCallMerge,
DtIconChevronsRight,
DtIconTransfer,
DtIconPhoneHangUp,
DtIconMoreVertical,
DtIconListBullet
},
props: {
/**
* type of IVR Node.
*/
nodeType: {
type: String,
required: true
},
/**
* Descriptive label for the node name.
*/
nodeLabel: {
type: String,
required: true
},
/**
* Selected state of the node
*/
isSelected: {
type: Boolean,
default: false
},
/**
* Translated aria-label for header menu button
*/
menuButtonAriaLabel: {
type: String,
required: true
},
/**
* DTMF input
*/
dtmfKey: {
type: String,
default: null
}
},
emits: [
/**
* Add node click event
*
* @event click
* @type {PointerEvent | KeyboardEvent}
*/
"click"
],
data() {
return {
isOpen: false
};
},
computed: {
nodeListeners() {
return {
click: (e) => this.$emit("click", e)
};
},
nodeIcon() {
return typeToIcon.get(this.nodeType);
},
nodeClass() {
const { normal, selected } = IVR_NODE_CLASS_MAPPING[this.nodeType];
return this.isSelected ? selected : normal;
},
isGotoNode() {
return this.nodeType === IVR_NODE_GO_TO;
}
},
methods: {
openMenu() {
this.isOpen = true;
}
}
};
const _hoisted_1 = { class: "d-recipe-ivr-node__header-left" };
const _hoisted_2 = {
class: "d-recipe-ivr-node__label",
"data-qa": "ivr-node-label"
};
const _hoisted_3 = { class: "d-recipe-ivr-node__dropdown-list" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_button = resolveComponent("dt-button");
const _component_dt_icon_more_vertical = resolveComponent("dt-icon-more-vertical");
const _component_dt_dropdown = resolveComponent("dt-dropdown");
const _component_dt_card = resolveComponent("dt-card");
return openBlock(), createElementBlock("div", mergeProps({
class: [
"d-recipe-ivr-node",
$options.nodeClass
]
}, toHandlers($options.nodeListeners, true)), [
$props.dtmfKey ? (openBlock(), createElementBlock("div", {
key: 0,
"data-qa": "dt-top-connector-dtmf",
class: normalizeClass(["d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf", { "d-recipe-ivr-node__connector-dtmf--selected": $props.isSelected }])
}, toDisplayString($props.dtmfKey), 3)) : createCommentVNode("", true),
_ctx.$slots.connector ? renderSlot(_ctx.$slots, "connector", { key: 1 }) : createCommentVNode("", true),
!$props.dtmfKey && !_ctx.$slots.connector ? (openBlock(), createElementBlock("div", {
key: 2,
"data-qa": "dt-top-connector",
class: normalizeClass(["d-recipe-ivr-node__connector", { "d-recipe-ivr-node__connector--selected": $props.isSelected }])
}, null, 2)) : createCommentVNode("", true),
createVNode(_component_dt_card, null, {
header: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createVNode(_component_dt_button, {
"aria-label": $props.nodeType,
importance: "clear",
kind: "muted",
"data-qa": "dt-ivr-node-icon"
}, {
icon: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent($options.nodeIcon), {
size: "200",
class: normalizeClass(["", { "d-recipe-ivr-node__goto-icon": $options.isGotoNode }])
}, null, 8, ["class"]))
]),
_: 1
}, 8, ["aria-label"]),
createElementVNode("p", _hoisted_2, toDisplayString($props.nodeLabel), 1)
]),
createVNode(_component_dt_dropdown, {
open: $data.isOpen,
"onUpdate:open": _cache[0] || (_cache[0] = ($event) => $data.isOpen = $event),
placement: "bottom"
}, {
anchor: withCtx(() => [
createVNode(_component_dt_button, {
importance: "clear",
kind: "muted",
"aria-label": $props.menuButtonAriaLabel,
onClick: withModifiers($options.openMenu, ["stop", "prevent"])
}, {
icon: withCtx(() => [
createVNode(_component_dt_icon_more_vertical, { size: "200" })
]),
_: 1
}, 8, ["aria-label", "onClick"])
]),
list: withCtx(({ close }) => [
createElementVNode("div", _hoisted_3, [
renderSlot(_ctx.$slots, "menuItems", { close })
])
]),
_: 3
}, 8, ["open"])
]),
content: withCtx(() => [
renderSlot(_ctx.$slots, "content")
]),
_: 3
})
], 16);
}
const ivr_node = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
ivr_node as default
};
//# sourceMappingURL=ivr_node.vue.js.map