@dialpad/dialtone/dist/vue2/lib/ivr-node/ivr-node.js

Dialpad's Dialtone design system monorepo

import { DtIconKeypad as r, DtIconDialer as i, DtIconVolume2 as c, DtIconExpertNode as a, DtIconBranch as s, DtIconCallMerge as d, DtIconChevronsRight as _, DtIconTransfer as l, DtIconPhoneHangUp as p, DtIconMoreVertical as f, DtIconListBullet as u } from "@dialpad/dialtone-icons/vue2";
import { IVR_NODE_GO_TO as m, IVR_NODE_PROMPT_MENU as D, IVR_NODE_PROMPT_COLLECT as I, IVR_NODE_PROMPT_PLAY as v, IVR_NODE_EXPERT as y, IVR_NODE_BRANCH as N, IVR_NODE_ASSIGN as O, IVR_NODE_CUSTOMER_DATA as R, IVR_NODE_TRANSFER as E, IVR_NODE_HANGUP as A, IVR_NODE_CLASS_MAPPING as T } from "./ivr-node-constants.js";
import { n as L } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import h from "../card/card.js";
import C from "../button/button.js";
import S from "../dropdown/dropdown.js";
import b from "../../common/mixins/localization.js";
const V = /* @__PURE__ */ new Map([
  [D, r],
  [I, i],
  [v, c],
  [y, a],
  [N, s],
  [m, d],
  [O, _],
  [R, u],
  [E, l],
  [A, p]
]), M = {
  name: "DtRecipeIvrNode",
  components: {
    DtCard: h,
    DtButton: C,
    DtDropdown: S,
    DtIconKeypad: r,
    DtIconDialer: i,
    DtIconVolume2: c,
    DtIconExpertNode: a,
    DtIconBranch: s,
    DtIconCallMerge: d,
    DtIconChevronsRight: _,
    DtIconTransfer: l,
    DtIconPhoneHangUp: p,
    DtIconMoreVertical: f,
    DtIconListBullet: u
  },
  mixins: [b],
  props: {
    /**
     * type of IVR Node.
     */
    nodeType: {
      type: String,
      required: !0
    },
    /**
     * Descriptive label for the node name.
     */
    nodeLabel: {
      type: String,
      required: !0
    },
    /**
     * Selected state of the node
     */
    isSelected: {
      type: Boolean,
      default: !1
    },
    /**
     * DTMF input
     */
    dtmfKey: {
      type: String,
      default: null
    }
  },
  emits: [
    /**
     * Add node click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  data() {
    return {
      isOpen: !1
    };
  },
  computed: {
    nodeIcon() {
      return V.get(this.nodeType);
    },
    nodeClass() {
      const { normal: o, selected: e } = T[this.nodeType];
      return this.isSelected ? e : o;
    },
    isGotoNode() {
      return this.nodeType === m;
    },
    nodeAriaLabel() {
      const o = this.nodeType.toUpperCase();
      return this.i18n.$t(`DIALTONE_IVR_NODE_${o}_ARIA_LABEL`);
    },
    menuButtonAriaLabel() {
      return this.i18n.$t("DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL");
    }
  },
  methods: {
    openMenu() {
      this.isOpen = !0;
    }
  }
};
var P = function() {
  var e = this, t = e._self._c;
  return t("div", e._g({ class: [
    "d-recipe-ivr-node",
    e.nodeClass
  ] }, e.$listeners), [e.dtmfKey ? t("div", { staticClass: "d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf", class: { "d-recipe-ivr-node__connector-dtmf--selected": e.isSelected }, attrs: { "data-qa": "dt-top-connector-dtmf" } }, [e._v(" " + e._s(e.dtmfKey) + " ")]) : e._e(), e.$slots.connector ? e._t("connector") : e._e(), !e.dtmfKey && !e.$slots.connector ? t("div", { staticClass: "d-recipe-ivr-node__connector", class: { "d-recipe-ivr-node__connector--selected": e.isSelected }, attrs: { "data-qa": "dt-top-connector" } }) : e._e(), t("dt-card", { scopedSlots: e._u([{ key: "header", fn: function() {
    return [t("div", { staticClass: "d-recipe-ivr-node__header-left" }, [t("dt-button", { attrs: { importance: "clear", kind: "muted", "data-qa": "dt-ivr-node-icon", "aria-label": e.nodeAriaLabel, title: e.nodeAriaLabel }, scopedSlots: e._u([{ key: "icon", fn: function() {
      return [t(e.nodeIcon, { tag: "component", class: ["", { "d-recipe-ivr-node__goto-icon": e.isGotoNode }], attrs: { size: "200" } })];
    }, proxy: !0 }]) }), t("p", { staticClass: "d-recipe-ivr-node__label", attrs: { "data-qa": "ivr-node-label" } }, [e._v(" " + e._s(e.nodeLabel) + " ")])], 1), t("dt-dropdown", { attrs: { placement: "bottom", open: e.isOpen }, on: { "update:open": function(n) {
      e.isOpen = n;
    } }, scopedSlots: e._u([{ key: "anchor", fn: function() {
      return [t("dt-button", { attrs: { importance: "clear", kind: "muted", "aria-label": e.menuButtonAriaLabel, title: e.menuButtonAriaLabel }, on: { click: function(n) {
        return n.stopPropagation(), n.preventDefault(), e.openMenu.apply(null, arguments);
      } }, scopedSlots: e._u([{ key: "icon", fn: function() {
        return [t("dt-icon-more-vertical", { attrs: { size: "200" } })];
      }, proxy: !0 }]) })];
    }, proxy: !0 }, { key: "list", fn: function({ close: n }) {
      return [t("div", { staticClass: "d-recipe-ivr-node__dropdown-list" }, [e._t("menuItems", null, { close: n })], 2)];
    } }], null, !0) })];
  }, proxy: !0 }, { key: "content", fn: function() {
    return [e._t("content")];
  }, proxy: !0 }], null, !0) })], 2);
}, g = [], B = /* @__PURE__ */ L(
  M,
  P,
  g
);
const w = B.exports;
export {
  w as default
};
//# sourceMappingURL=ivr-node.js.map