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

Dialpad's Dialtone design system monorepo

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

//# sourceMappingURL=ivr-node.js.map