@dialpad/dialtone/dist/vue2/recipes/cards/ivr_node/ivr_node.vue.js

Dialpad's Dialtone design system monorepo

import { DtIconKeypad, DtIconDialer, DtIconVolume2, DtIconExpertNode, DtIconBranch, DtIconCallMerge, DtIconChevronsRight, DtIconTransfer, DtIconPhoneHangUp, DtIconMoreVertical, DtIconListBullet } from "@dialpad/dialtone-icons/vue2";
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 normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.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 = {
  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: {
    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;
    }
  }
};
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__ */ normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const ivr_node = __component__.exports;
export {
  ivr_node as default
};
//# sourceMappingURL=ivr_node.vue.js.map