@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
198 lines (197 loc) • 6.94 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue3 = require("@dialpad/dialtone-icons/vue3");
const ivr_node_constants = require("./ivr_node_constants.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
const card = require("../../../components/card/card.vue.cjs");
const button = require("../../../components/button/button.vue.cjs");
const dropdown = require("../../../components/dropdown/dropdown.vue.cjs");
const typeToIcon = /* @__PURE__ */ new Map([
[ivr_node_constants.IVR_NODE_PROMPT_MENU, vue3.DtIconKeypad],
[ivr_node_constants.IVR_NODE_PROMPT_COLLECT, vue3.DtIconDialer],
[ivr_node_constants.IVR_NODE_PROMPT_PLAY, vue3.DtIconVolume2],
[ivr_node_constants.IVR_NODE_EXPERT, vue3.DtIconExpertNode],
[ivr_node_constants.IVR_NODE_BRANCH, vue3.DtIconBranch],
[ivr_node_constants.IVR_NODE_GO_TO, vue3.DtIconCallMerge],
[ivr_node_constants.IVR_NODE_ASSIGN, vue3.DtIconChevronsRight],
[ivr_node_constants.IVR_NODE_CUSTOMER_DATA, vue3.DtIconListBullet],
[ivr_node_constants.IVR_NODE_TRANSFER, vue3.DtIconTransfer],
[ivr_node_constants.IVR_NODE_HANGUP, vue3.DtIconPhoneHangUp]
]);
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtRecipeIvrNode",
components: {
DtCard: card.default,
DtButton: button.default,
DtDropdown: dropdown.default,
DtIconKeypad: vue3.DtIconKeypad,
DtIconDialer: vue3.DtIconDialer,
DtIconVolume2: vue3.DtIconVolume2,
DtIconExpertNode: vue3.DtIconExpertNode,
DtIconBranch: vue3.DtIconBranch,
DtIconCallMerge: vue3.DtIconCallMerge,
DtIconChevronsRight: vue3.DtIconChevronsRight,
DtIconTransfer: vue3.DtIconTransfer,
DtIconPhoneHangUp: vue3.DtIconPhoneHangUp,
DtIconMoreVertical: vue3.DtIconMoreVertical,
DtIconListBullet: vue3.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_constants.IVR_NODE_CLASS_MAPPING[this.nodeType];
return this.isSelected ? selected : normal;
},
isGotoNode() {
return this.nodeType === ivr_node_constants.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 = vue.resolveComponent("dt-button");
const _component_dt_icon_more_vertical = vue.resolveComponent("dt-icon-more-vertical");
const _component_dt_dropdown = vue.resolveComponent("dt-dropdown");
const _component_dt_card = vue.resolveComponent("dt-card");
return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
class: [
"d-recipe-ivr-node",
$options.nodeClass
]
}, vue.toHandlers($options.nodeListeners, true)), [
$props.dtmfKey ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
"data-qa": "dt-top-connector-dtmf",
class: vue.normalizeClass(["d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf", { "d-recipe-ivr-node__connector-dtmf--selected": $props.isSelected }])
}, vue.toDisplayString($props.dtmfKey), 3)) : vue.createCommentVNode("", true),
_ctx.$slots.connector ? vue.renderSlot(_ctx.$slots, "connector", { key: 1 }) : vue.createCommentVNode("", true),
!$props.dtmfKey && !_ctx.$slots.connector ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
"data-qa": "dt-top-connector",
class: vue.normalizeClass(["d-recipe-ivr-node__connector", { "d-recipe-ivr-node__connector--selected": $props.isSelected }])
}, null, 2)) : vue.createCommentVNode("", true),
vue.createVNode(_component_dt_card, null, {
header: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createVNode(_component_dt_button, {
"aria-label": $props.nodeType,
importance: "clear",
kind: "muted",
"data-qa": "dt-ivr-node-icon"
}, {
icon: vue.withCtx(() => [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.nodeIcon), {
size: "200",
class: vue.normalizeClass(["", { "d-recipe-ivr-node__goto-icon": $options.isGotoNode }])
}, null, 8, ["class"]))
]),
_: 1
}, 8, ["aria-label"]),
vue.createElementVNode("p", _hoisted_2, vue.toDisplayString($props.nodeLabel), 1)
]),
vue.createVNode(_component_dt_dropdown, {
open: $data.isOpen,
"onUpdate:open": _cache[0] || (_cache[0] = ($event) => $data.isOpen = $event),
placement: "bottom"
}, {
anchor: vue.withCtx(() => [
vue.createVNode(_component_dt_button, {
importance: "clear",
kind: "muted",
"aria-label": $props.menuButtonAriaLabel,
onClick: vue.withModifiers($options.openMenu, ["stop", "prevent"])
}, {
icon: vue.withCtx(() => [
vue.createVNode(_component_dt_icon_more_vertical, { size: "200" })
]),
_: 1
}, 8, ["aria-label", "onClick"])
]),
list: vue.withCtx(({ close }) => [
vue.createElementVNode("div", _hoisted_3, [
vue.renderSlot(_ctx.$slots, "menuItems", { close })
])
]),
_: 3
}, 8, ["open"])
]),
content: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "content")
]),
_: 3
})
], 16);
}
const ivr_node = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = ivr_node;
//# sourceMappingURL=ivr_node.vue.cjs.map