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

Vue component library for Dialpad's design system Dialtone

import { DtIconListBullet as r, DtIconMoreVertical as f, DtIconPhoneHangUp as i, DtIconTransfer as c, DtIconChevronsRight as a, DtIconCallMerge as s, DtIconBranch as d, DtIconExpertNode as _, DtIconVolume2 as l, DtIconDialer as p, DtIconKeypad as u } from "@dialpad/dialtone-icons/vue2";
import { IVR_NODE_GO_TO as m, IVR_NODE_CLASS_MAPPING as D, IVR_NODE_PROMPT_MENU as I, IVR_NODE_PROMPT_COLLECT as v, IVR_NODE_PROMPT_PLAY as y, IVR_NODE_EXPERT as N, IVR_NODE_BRANCH as O, IVR_NODE_ASSIGN as R, IVR_NODE_CUSTOMER_DATA as E, IVR_NODE_TRANSFER as A, IVR_NODE_HANGUP as T } from "./ivr-node-constants.js";
import { DialtoneLocalization as L } from "../../localization/index.js";
import { n as h } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import C from "../dropdown/dropdown.js";
import S from "../button/button.js";
import b from "../card/card.js";
const V = /* @__PURE__ */ new Map([
  [I, u],
  [v, p],
  [y, l],
  [N, _],
  [O, d],
  [m, s],
  [R, a],
  [E, r],
  [A, c],
  [T, i]
]), P = {
  name: "DtRecipeIvrNode",
  components: {
    DtCard: b,
    DtButton: S,
    DtDropdown: C,
    DtIconKeypad: u,
    DtIconDialer: p,
    DtIconVolume2: l,
    DtIconExpertNode: _,
    DtIconBranch: d,
    DtIconCallMerge: s,
    DtIconChevronsRight: a,
    DtIconTransfer: c,
    DtIconPhoneHangUp: i,
    DtIconMoreVertical: f,
    DtIconListBullet: r
  },
  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,
      i18n: new L()
    };
  },
  computed: {
    nodeIcon() {
      return V.get(this.nodeType);
    },
    nodeClass() {
      const { normal: o, selected: e } = D[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 g = 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);
}, M = [], B = /* @__PURE__ */ h(
  P,
  g,
  M
);
const $ = B.exports;
export {
  $ as default
};
//# sourceMappingURL=ivr-node.js.map