@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
142 lines (141 loc) • 5.72 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue2 = require("@dialpad/dialtone-icons/vue2");
const ivr_node_constants = require("./ivr_node_constants.cjs");
const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.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, vue2.DtIconKeypad],
[ivr_node_constants.IVR_NODE_PROMPT_COLLECT, vue2.DtIconDialer],
[ivr_node_constants.IVR_NODE_PROMPT_PLAY, vue2.DtIconVolume2],
[ivr_node_constants.IVR_NODE_EXPERT, vue2.DtIconExpertNode],
[ivr_node_constants.IVR_NODE_BRANCH, vue2.DtIconBranch],
[ivr_node_constants.IVR_NODE_GO_TO, vue2.DtIconCallMerge],
[ivr_node_constants.IVR_NODE_ASSIGN, vue2.DtIconChevronsRight],
[ivr_node_constants.IVR_NODE_CUSTOMER_DATA, vue2.DtIconListBullet],
[ivr_node_constants.IVR_NODE_TRANSFER, vue2.DtIconTransfer],
[ivr_node_constants.IVR_NODE_HANGUP, vue2.DtIconPhoneHangUp]
]);
const _sfc_main = {
name: "DtRecipeIvrNode",
components: {
DtCard: card.default,
DtButton: button.default,
DtDropdown: dropdown.default,
DtIconKeypad: vue2.DtIconKeypad,
DtIconDialer: vue2.DtIconDialer,
DtIconVolume2: vue2.DtIconVolume2,
DtIconExpertNode: vue2.DtIconExpertNode,
DtIconBranch: vue2.DtIconBranch,
DtIconCallMerge: vue2.DtIconCallMerge,
DtIconChevronsRight: vue2.DtIconChevronsRight,
DtIconTransfer: vue2.DtIconTransfer,
DtIconPhoneHangUp: vue2.DtIconPhoneHangUp,
DtIconMoreVertical: vue2.DtIconMoreVertical,
DtIconListBullet: vue2.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: {
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;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", _vm._g({ class: [
"d-recipe-ivr-node",
_vm.nodeClass
] }, _vm.$listeners), [_vm.dtmfKey ? _c("div", { staticClass: "d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf", class: { "d-recipe-ivr-node__connector-dtmf--selected": _vm.isSelected }, attrs: { "data-qa": "dt-top-connector-dtmf" } }, [_vm._v(" " + _vm._s(_vm.dtmfKey) + " ")]) : _vm._e(), _vm.$slots.connector ? _vm._t("connector") : _vm._e(), !_vm.dtmfKey && !_vm.$slots.connector ? _c("div", { staticClass: "d-recipe-ivr-node__connector", class: { "d-recipe-ivr-node__connector--selected": _vm.isSelected }, attrs: { "data-qa": "dt-top-connector" } }) : _vm._e(), _c("dt-card", { scopedSlots: _vm._u([{ key: "header", fn: function() {
return [_c("div", { staticClass: "d-recipe-ivr-node__header-left" }, [_c("dt-button", { attrs: { "aria-label": _vm.nodeType, "importance": "clear", "kind": "muted", "data-qa": "dt-ivr-node-icon" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c(_vm.nodeIcon, { tag: "component", class: ["", { "d-recipe-ivr-node__goto-icon": _vm.isGotoNode }], attrs: { "size": "200" } })];
}, proxy: true }]) }), _c("p", { staticClass: "d-recipe-ivr-node__label", attrs: { "data-qa": "ivr-node-label" } }, [_vm._v(" " + _vm._s(_vm.nodeLabel) + " ")])], 1), _c("dt-dropdown", { attrs: { "placement": "bottom", "open": _vm.isOpen }, on: { "update:open": function($event) {
_vm.isOpen = $event;
} }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
return [_c("dt-button", { attrs: { "importance": "clear", "kind": "muted", "aria-label": _vm.menuButtonAriaLabel }, on: { "click": function($event) {
$event.stopPropagation();
$event.preventDefault();
return _vm.openMenu.apply(null, arguments);
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("dt-icon-more-vertical", { attrs: { "size": "200" } })];
}, proxy: true }]) })];
}, proxy: true }, { key: "list", fn: function({ close }) {
return [_c("div", { staticClass: "d-recipe-ivr-node__dropdown-list" }, [_vm._t("menuItems", null, { "close": close })], 2)];
} }], null, true) })];
}, proxy: true }, { key: "content", fn: function() {
return [_vm._t("content")];
}, proxy: true }], null, true) })], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const ivr_node = __component__.exports;
exports.default = ivr_node;
//# sourceMappingURL=ivr_node.vue.cjs.map