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

Dialpad's Dialtone design system monorepo

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