@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 8.72 kB
Source Map (JSON)
{"version":3,"file":"ivr-node.cjs","names":[],"sources":["../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'd-recipe-ivr-node',\n nodeClass,\n ]\"\n v-on=\"nodeListeners\"\n >\n <div\n v-if=\"dtmfKey\"\n data-qa=\"dt-top-connector-dtmf\"\n class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n :class=\"{ 'd-recipe-ivr-node__connector-dtmf--selected': isSelected }\"\n >\n {{ dtmfKey }}\n </div>\n <slot\n v-if=\"$slots.connector\"\n name=\"connector\"\n />\n <div\n v-if=\"!dtmfKey && !$slots.connector\"\n data-qa=\"dt-top-connector\"\n class=\"d-recipe-ivr-node__connector\"\n :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n />\n <dt-card>\n <template #header>\n <!-- node label and icon section on left of the header -->\n <div class=\"d-recipe-ivr-node__header-left\">\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n data-qa=\"dt-ivr-node-icon\"\n :aria-label=\"nodeAriaLabel\"\n :title=\"nodeAriaLabel\"\n >\n <template #icon>\n <component\n :is=\"nodeIcon\"\n size=\"200\"\n :class=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n />\n </template>\n </dt-button>\n <p\n class=\"d-recipe-ivr-node__label\"\n data-qa=\"ivr-node-label\"\n >\n {{ nodeLabel }}\n </p>\n </div>\n <!-- node menu for actions like edit, copy, delete -->\n <dt-dropdown\n v-model:open=\"isOpen\"\n placement=\"bottom\"\n >\n <template #anchor>\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n :aria-label=\"menuButtonAriaLabel\"\n :title=\"menuButtonAriaLabel\"\n @click.stop.prevent=\"openMenu\"\n >\n <template #icon>\n <dt-icon-more-vertical size=\"200\" />\n </template>\n </dt-button>\n </template>\n <template #list=\"{ close }\">\n <div class=\"d-recipe-ivr-node__dropdown-list\">\n <slot\n name=\"menuItems\"\n :close=\"close\"\n />\n </div>\n </template>\n </dt-dropdown>\n </template>\n <template #content>\n <slot name=\"content\" />\n </template>\n </dt-card>\n </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport {\n DtIconKeypad,\n DtIconDialer,\n DtIconVolume2,\n DtIconExpertNode,\n DtIconBranch,\n DtIconCallMerge,\n DtIconChevronsRight,\n DtIconTransfer,\n DtIconPhoneHangUp,\n DtIconMoreVertical,\n DtIconListBullet,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n IVR_NODE_CLASS_MAPPING,\n IVR_NODE_PROMPT_MENU,\n IVR_NODE_PROMPT_COLLECT,\n IVR_NODE_PROMPT_PLAY,\n IVR_NODE_EXPERT,\n IVR_NODE_BRANCH,\n IVR_NODE_GO_TO,\n IVR_NODE_ASSIGN,\n IVR_NODE_TRANSFER,\n IVR_NODE_HANGUP,\n IVR_NODE_CUSTOMER_DATA,\n} from './ivr_node_constants';\nimport { DialtoneLocalization } from '@/localization';\n\nconst typeToIcon = new Map([\n [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n [IVR_NODE_EXPERT, DtIconExpertNode],\n [IVR_NODE_BRANCH, DtIconBranch],\n [IVR_NODE_GO_TO, DtIconCallMerge],\n [IVR_NODE_ASSIGN, DtIconChevronsRight],\n [IVR_NODE_CUSTOMER_DATA, DtIconListBullet],\n [IVR_NODE_TRANSFER, DtIconTransfer],\n [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeIvrNode',\n\n components: {\n DtCard,\n DtButton,\n DtDropdown,\n DtIconKeypad,\n DtIconDialer,\n DtIconVolume2,\n DtIconExpertNode,\n DtIconBranch,\n DtIconCallMerge,\n DtIconChevronsRight,\n DtIconTransfer,\n DtIconPhoneHangUp,\n DtIconMoreVertical,\n DtIconListBullet,\n },\n\n props: {\n\n /**\n * type of IVR Node.\n */\n nodeType: {\n type: String,\n required: true,\n },\n\n /**\n * Descriptive label for the node name.\n */\n\n nodeLabel: {\n type: String,\n required: true,\n },\n\n /**\n * Selected state of the node\n */\n isSelected: {\n type: Boolean,\n default: false,\n },\n\n /**\n * DTMF input\n */\n dtmfKey: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /**\n * Add node click event\n *\n * @event click\n * @type {PointerEvent | KeyboardEvent}\n */\n 'click',\n ],\n\n data () {\n return {\n isOpen: false,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n nodeListeners () {\n return {\n click: (e) => this.$emit('click', e),\n };\n },\n\n nodeIcon () {\n return typeToIcon.get(this.nodeType);\n },\n\n nodeClass () {\n const { normal, selected } = IVR_NODE_CLASS_MAPPING[this.nodeType];\n return this.isSelected ? selected : normal;\n },\n\n isGotoNode () {\n return this.nodeType === IVR_NODE_GO_TO;\n },\n\n nodeAriaLabel () {\n const nodeType = this.nodeType.toUpperCase();\n return this.i18n.$t(`DIALTONE_IVR_NODE_${nodeType}_ARIA_LABEL`);\n },\n\n menuButtonAriaLabel () {\n return this.i18n.$t('DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL');\n },\n },\n\n methods: {\n openMenu () {\n this.isOpen = true;\n },\n },\n};\n</script>\n"],"mappings":"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"}