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

Dialpad's Dialtone design system monorepo

import { DtIconListBullet as N, DtIconMoreVertical as S, DtIconPhoneHangUp as f, DtIconTransfer as E, DtIconChevronsRight as O, DtIconCallMerge as v, DtIconBranch as R, DtIconExpertNode as A, DtIconVolume2 as L, DtIconDialer as h, DtIconKeypad as y } from "@dialpad/dialtone-icons/vue3";
import { IVR_NODE_GO_TO as T, IVR_NODE_CLASS_MAPPING as B, IVR_NODE_PROMPT_MENU as M, IVR_NODE_PROMPT_COLLECT as k, IVR_NODE_PROMPT_PLAY as P, IVR_NODE_EXPERT as g, IVR_NODE_BRANCH as w, IVR_NODE_ASSIGN as U, IVR_NODE_CUSTOMER_DATA as q, IVR_NODE_TRANSFER as G, IVR_NODE_HANGUP as K } from "./ivr-node-constants.js";
import { DialtoneLocalization as z } from "../../localization/index.js";
import { resolveComponent as i, createElementBlock as l, openBlock as d, mergeProps as H, toHandlers as F, createCommentVNode as s, renderSlot as _, createVNode as r, normalizeClass as m, toDisplayString as I, withCtx as n, createElementVNode as p, createBlock as X, resolveDynamicComponent as Y, withModifiers as j } from "vue";
import { _ as x } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import J from "../dropdown/dropdown.js";
import Q from "../button/button.js";
import W from "../card/card.js";
const Z = /* @__PURE__ */ new Map([
  [M, y],
  [k, h],
  [P, L],
  [g, A],
  [w, R],
  [T, v],
  [U, O],
  [q, N],
  [G, E],
  [K, f]
]), $ = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeIvrNode",
  components: {
    DtCard: W,
    DtButton: Q,
    DtDropdown: J,
    DtIconKeypad: y,
    DtIconDialer: h,
    DtIconVolume2: L,
    DtIconExpertNode: A,
    DtIconBranch: R,
    DtIconCallMerge: v,
    DtIconChevronsRight: O,
    DtIconTransfer: E,
    DtIconPhoneHangUp: f,
    DtIconMoreVertical: S,
    DtIconListBullet: N
  },
  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 z()
    };
  },
  computed: {
    nodeListeners() {
      return {
        click: (e) => this.$emit("click", e)
      };
    },
    nodeIcon() {
      return Z.get(this.nodeType);
    },
    nodeClass() {
      const { normal: e, selected: c } = B[this.nodeType];
      return this.isSelected ? c : e;
    },
    isGotoNode() {
      return this.nodeType === T;
    },
    nodeAriaLabel() {
      const e = this.nodeType.toUpperCase();
      return this.i18n.$t(`DIALTONE_IVR_NODE_${e}_ARIA_LABEL`);
    },
    menuButtonAriaLabel() {
      return this.i18n.$t("DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL");
    }
  },
  methods: {
    openMenu() {
      this.isOpen = !0;
    }
  }
}, ee = { class: "d-recipe-ivr-node__header-left" }, te = {
  class: "d-recipe-ivr-node__label",
  "data-qa": "ivr-node-label"
}, oe = { class: "d-recipe-ivr-node__dropdown-list" };
function ne(e, c, o, re, u, t) {
  const D = i("dt-button"), C = i("dt-icon-more-vertical"), V = i("dt-dropdown"), b = i("dt-card");
  return d(), l("div", H({
    class: [
      "d-recipe-ivr-node",
      t.nodeClass
    ]
  }, F(t.nodeListeners, !0)), [
    o.dtmfKey ? (d(), l("div", {
      key: 0,
      "data-qa": "dt-top-connector-dtmf",
      class: m(["d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf", { "d-recipe-ivr-node__connector-dtmf--selected": o.isSelected }])
    }, I(o.dtmfKey), 3)) : s("", !0),
    e.$slots.connector ? _(e.$slots, "connector", { key: 1 }) : s("", !0),
    !o.dtmfKey && !e.$slots.connector ? (d(), l("div", {
      key: 2,
      "data-qa": "dt-top-connector",
      class: m(["d-recipe-ivr-node__connector", { "d-recipe-ivr-node__connector--selected": o.isSelected }])
    }, null, 2)) : s("", !0),
    r(b, null, {
      header: n(() => [
        p("div", ee, [
          r(D, {
            importance: "clear",
            kind: "muted",
            "data-qa": "dt-ivr-node-icon",
            "aria-label": t.nodeAriaLabel,
            title: t.nodeAriaLabel
          }, {
            icon: n(() => [
              (d(), X(Y(t.nodeIcon), {
                size: "200",
                class: m(["", { "d-recipe-ivr-node__goto-icon": t.isGotoNode }])
              }, null, 8, ["class"]))
            ]),
            _: 1
          }, 8, ["aria-label", "title"]),
          p("p", te, I(o.nodeLabel), 1)
        ]),
        r(V, {
          open: u.isOpen,
          "onUpdate:open": c[0] || (c[0] = (a) => u.isOpen = a),
          placement: "bottom"
        }, {
          anchor: n(() => [
            r(D, {
              importance: "clear",
              kind: "muted",
              "aria-label": t.menuButtonAriaLabel,
              title: t.menuButtonAriaLabel,
              onClick: j(t.openMenu, ["stop", "prevent"])
            }, {
              icon: n(() => [
                r(C, { size: "200" })
              ]),
              _: 1
            }, 8, ["aria-label", "title", "onClick"])
          ]),
          list: n(({ close: a }) => [
            p("div", oe, [
              _(e.$slots, "menuItems", { close: a })
            ])
          ]),
          _: 3
        }, 8, ["open"])
      ]),
      content: n(() => [
        _(e.$slots, "content")
      ]),
      _: 3
    })
  ], 16);
}
const pe = /* @__PURE__ */ x($, [["render", ne]]);
export {
  pe as default
};
//# sourceMappingURL=ivr-node.js.map