@dialpad/dialtone 9.59.0-beta.1 → 9.59.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -59
- package/dist/css/dialtone.css +4734 -171
- package/dist/css/dialtone.min.css +1 -1
- package/dist/tokens/css/variables-dark.css +941 -0
- package/dist/tokens/css/variables-expressive-dark.css +942 -0
- package/dist/tokens/css/variables-expressive-light.css +822 -0
- package/dist/tokens/css/variables-expressive-sm-dark.css +942 -0
- package/dist/tokens/css/variables-expressive-sm-light.css +822 -0
- package/dist/tokens/css/variables-light.css +821 -0
- package/dist/tokens/css/variables-tmo-dark.css +941 -0
- package/dist/tokens/css/variables-tmo-light.css +821 -0
- package/dist/tokens/doc.json +72758 -79566
- package/dist/tokens/less/variables-dark.less +938 -0
- package/dist/tokens/less/variables-expressive-dark.less +939 -0
- package/dist/tokens/less/variables-expressive-light.less +819 -0
- package/dist/tokens/less/variables-expressive-sm-dark.less +939 -0
- package/dist/tokens/less/variables-expressive-sm-light.less +819 -0
- package/dist/tokens/less/variables-light.less +818 -0
- package/dist/tokens/less/variables-tmo-dark.less +938 -0
- package/dist/tokens/less/variables-tmo-light.less +818 -0
- package/dist/tokens/tokens-dark.json +933 -0
- package/dist/tokens/tokens-light.json +813 -0
- package/dist/vue2/lib/ivr-node.cjs +6 -2
- package/dist/vue2/lib/ivr-node.cjs.map +1 -1
- package/dist/vue2/lib/ivr-node.js +6 -2
- package/dist/vue2/lib/ivr-node.js.map +1 -1
- package/dist/vue2/lib/tooltip.cjs +3 -1
- package/dist/vue2/lib/tooltip.cjs.map +1 -1
- package/dist/vue2/lib/tooltip.js +3 -1
- package/dist/vue2/lib/tooltip.js.map +1 -1
- package/dist/vue2/types/recipes/cards/ivr_node/ivr_node_constants.d.ts +6 -0
- package/dist/vue2/types/recipes/cards/ivr_node/ivr_node_constants.d.ts.map +1 -1
- package/dist/vue3/lib/ivr-node.cjs +6 -2
- package/dist/vue3/lib/ivr-node.cjs.map +1 -1
- package/dist/vue3/lib/ivr-node.js +6 -2
- package/dist/vue3/lib/ivr-node.js.map +1 -1
- package/dist/vue3/types/recipes/cards/ivr_node/ivr_node_constants.d.ts +6 -0
- package/dist/vue3/types/recipes/cards/ivr_node/ivr_node_constants.d.ts.map +1 -1
- package/package.json +2 -9
- package/dist/css/tokens/tokens-base-dark.css +0 -938
- package/dist/css/tokens/tokens-base-light.css +0 -718
- package/dist/css/tokens/tokens-dp-dark.css +0 -1795
- package/dist/css/tokens/tokens-dp-light.css +0 -1795
- package/dist/css/tokens/tokens-expressive-dark.css +0 -1801
- package/dist/css/tokens/tokens-expressive-light.css +0 -1801
- package/dist/css/tokens/tokens-expressive-sm-dark.css +0 -1801
- package/dist/css/tokens/tokens-expressive-sm-light.css +0 -1801
- package/dist/css/tokens/tokens-tmo-dark.css +0 -1795
- package/dist/css/tokens/tokens-tmo-light.css +0 -1795
- package/dist/themes/config.cjs +0 -1
- package/dist/themes/config.js +0 -17
- package/dist/themes/dp-dark.cjs +0 -1
- package/dist/themes/dp-dark.js +0 -14
- package/dist/themes/dp-light.cjs +0 -1
- package/dist/themes/dp-light.js +0 -14
- package/dist/themes/expressive-dark.cjs +0 -1
- package/dist/themes/expressive-dark.js +0 -14
- package/dist/themes/expressive-light.cjs +0 -1
- package/dist/themes/expressive-light.js +0 -14
- package/dist/themes/expressive-sm-dark.cjs +0 -1
- package/dist/themes/expressive-sm-dark.js +0 -14
- package/dist/themes/expressive-sm-light.cjs +0 -1
- package/dist/themes/expressive-sm-light.js +0 -14
- package/dist/themes/tmo-dark.cjs +0 -1
- package/dist/themes/tmo-dark.js +0 -14
- package/dist/themes/tmo-light.cjs +0 -1
- package/dist/themes/tmo-light.js +0 -14
- package/dist/tokens/css/tokens-base-dark.css +0 -938
- package/dist/tokens/css/tokens-base-light.css +0 -718
- package/dist/tokens/css/tokens-dp-dark.css +0 -1795
- package/dist/tokens/css/tokens-dp-light.css +0 -1795
- package/dist/tokens/css/tokens-expressive-dark.css +0 -1801
- package/dist/tokens/css/tokens-expressive-light.css +0 -1801
- package/dist/tokens/css/tokens-expressive-sm-dark.css +0 -1801
- package/dist/tokens/css/tokens-expressive-sm-light.css +0 -1801
- package/dist/tokens/css/tokens-tmo-dark.css +0 -1795
- package/dist/tokens/css/tokens-tmo-light.css +0 -1795
- package/dist/tokens/less/tokens-base-dark.less +0 -488
- package/dist/tokens/less/tokens-base-light.less +0 -368
- package/dist/tokens/less/tokens-dp-dark.less +0 -451
- package/dist/tokens/less/tokens-dp-light.less +0 -451
- package/dist/tokens/less/tokens-expressive-dark.less +0 -457
- package/dist/tokens/less/tokens-expressive-light.less +0 -457
- package/dist/tokens/less/tokens-expressive-sm-dark.less +0 -457
- package/dist/tokens/less/tokens-expressive-sm-light.less +0 -457
- package/dist/tokens/less/tokens-tmo-dark.less +0 -451
- package/dist/tokens/less/tokens-tmo-light.less +0 -451
- package/dist/tokens/tokens-base-dark.json +0 -486
- package/dist/tokens/tokens-base-light.json +0 -366
- package/dist/tokens/tokens-dp-dark.json +0 -449
- package/dist/tokens/tokens-dp-light.json +0 -449
- package/dist/tokens/tokens-expressive-dark.json +0 -455
- package/dist/tokens/tokens-expressive-light.json +0 -455
- package/dist/tokens/tokens-expressive-sm-dark.json +0 -455
- package/dist/tokens/tokens-expressive-sm-light.json +0 -455
- package/dist/tokens/tokens-tmo-dark.json +0 -449
- package/dist/tokens/tokens-tmo-light.json +0 -449
- package/dist/tokens-base-dark-gxR6WJuq.js +0 -4
- package/dist/tokens-base-dark-lGwOt-Tx.cjs +0 -1
- package/dist/tokens-base-light-Exwmf79i.cjs +0 -1
- package/dist/tokens-base-light-Xfc5qwVj.js +0 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ivr-node.js","sources":["../../recipes/cards/ivr_node/ivr_node_constants.js","../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\n\nexport const IVR_NODE_ICON_TYPES = {\n [IVR_NODE_PROMPT_MENU]: 'keypad',\n [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n [IVR_NODE_EXPERT]: 'expert-node',\n [IVR_NODE_BRANCH]: 'branch',\n [IVR_NODE_GO_TO]: 'call-merge',\n [IVR_NODE_TRANSFER]: 'transfer',\n [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n [IVR_NODE_PROMPT_MENU]: 'Menu',\n [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n [IVR_NODE_PROMPT_PLAY]: 'Play',\n [IVR_NODE_EXPERT]: 'Expert',\n [IVR_NODE_BRANCH]: 'Branch',\n [IVR_NODE_GO_TO]: 'Go-to',\n [IVR_NODE_TRANSFER]: 'Transfer',\n [IVR_NODE_HANGUP]: 'Hangup',\n};\n\nconst IVR_NODE_COLORS = {\n PROMPT: {\n normal: 'd-bc-blue-200',\n selected: 'd-bc-blue-300',\n },\n LOGIC: {\n normal: 'd-bc-purple-200',\n selected: 'd-bc-purple-400',\n },\n TERMINAL: {\n normal: 'd-bc-red-100',\n selected: 'd-bc-red-200',\n },\n};\n\nexport const IVR_NODE_COLOR_MAPPING = {\n [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,\n [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,\n [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,\n [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,\n [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,\n [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,\n [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,\n [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL,\n};\n","<template>\n <div\n class=\"ivr_node\"\n v-on=\"nodeListeners\"\n >\n <div\n v-if=\"dtmfKey\"\n data-qa=\"dt-top-connector-dtmf\"\n class=\"ivr-connector ivr-connector--dtmf\"\n :class=\"{ 'ivr-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=\"ivr-connector\"\n :class=\"{ 'ivr-connector--selected': isSelected }\"\n />\n <dt-card\n content-class=\"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12\"\n :container-class=\"[\n 'd-w100p',\n { 'd-ba d-bar8 d-baw4': isSelected },\n headerColor,\n ]\"\n :header-class=\"[\n 'd-mtn1',\n 'd-bt',\n 'd-btw4',\n 'd-p0',\n headerColor,\n { 'd-btr4': !isSelected },\n ]\"\n >\n <template #header>\n <!-- node label and icon section on left of the header -->\n <div class=\"ivr_node__header-left\">\n <dt-button\n :aria-label=\"nodeType\"\n importance=\"clear\"\n kind=\"muted\"\n data-qa=\"dt-ivr-node-icon\"\n >\n <template #icon>\n <dt-icon\n :name=\"nodeIcon\"\n size=\"200\"\n :class=\"['', { 'ivr_node__goto_icon': isGotoNode }]\"\n />\n </template>\n </dt-button>\n <p\n class=\"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 @click.stop.prevent=\"openMenu\"\n >\n <template #icon>\n <dt-icon\n name=\"more-vertical\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <template #list=\"{ close }\">\n <div class=\"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 { DtIcon } from '@/components/icon';\nimport {\n IVR_NODE_ICON_TYPES, IVR_NODE_COLOR_MAPPING, IVR_NODE_GO_TO,\n} from './ivr_node_constants';\n\nexport default {\n name: 'DtRecipeIvrNode',\n\n components: {\n DtCard,\n DtButton,\n DtDropdown,\n DtIcon,\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 * Translated aria-label for header menu button\n */\n menuButtonAriaLabel: {\n type: String,\n required: true,\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 };\n },\n\n computed: {\n nodeListeners () {\n return {\n click: (e) => this.$emit('click', e),\n };\n },\n\n nodeIcon () {\n return IVR_NODE_ICON_TYPES[this.nodeType];\n },\n\n headerColor () {\n const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];\n return this.isSelected ? selected : normal;\n },\n\n isGotoNode () {\n return this.nodeType === IVR_NODE_GO_TO;\n },\n },\n\n methods: {\n openMenu () {\n this.isOpen = true;\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.ivr_node {\n width: 280px;\n display: flex;\n flex-direction: column;\n align-items: center;\n cursor: pointer;\n\n &__header-left {\n display: flex;\n align-items: center;\n }\n\n &__label {\n font-size: var(--dt-font-size-200);\n font-weight: var(--dt-font-weight-bold);\n }\n\n &__dropdown-list {\n width: var(--dt-size-825);\n }\n}\n\n.ivr_node__goto_icon {\n transform: rotate(90deg);\n}\n\n.ivr-connector {\n z-index: var(--zi-base);\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: var(--dt-color-purple-600);\n background-color: var(--dt-color-purple-600);\n width: var(--dt-size-400);\n height: var(--dt-size-400);\n border-radius: var(--dt-size-radius-circle);\n margin-bottom: var(--dt-space-300-negative);\n\n &--selected {\n margin-bottom: var(--dt-space-400-negative);\n }\n\n &.ivr-connector--dtmf {\n width: var(--dt-size-550);\n height: var(--dt-size-550);\n margin-bottom: var(--dt-space-450-negative);\n color: var(--dt-color-neutral-white);\n font-size: var(--dt-font-size-200);\n\n &--selected {\n margin-bottom: var(--dt-space-500-negative);\n }\n }\n}\n</style>\n"],"names":["_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createVNode","_createElementVNode","_toDisplayString","_withCtx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ivr-node.js","sources":["../../recipes/cards/ivr_node/ivr_node_constants.js","../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\nexport const IVR_NODE_ASSIGN = 'assign';\n\nexport const IVR_NODE_ICON_TYPES = {\n [IVR_NODE_PROMPT_MENU]: 'keypad',\n [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n [IVR_NODE_EXPERT]: 'expert-node',\n [IVR_NODE_BRANCH]: 'branch',\n [IVR_NODE_GO_TO]: 'call-merge',\n [IVR_NODE_TRANSFER]: 'transfer',\n [IVR_NODE_HANGUP]: 'phone-hang-up',\n [IVR_NODE_ASSIGN]: 'chevrons-right',\n};\n\nexport const IVR_NODE_LABELS = {\n [IVR_NODE_PROMPT_MENU]: 'Menu',\n [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n [IVR_NODE_PROMPT_PLAY]: 'Play',\n [IVR_NODE_EXPERT]: 'Expert',\n [IVR_NODE_BRANCH]: 'Branch',\n [IVR_NODE_GO_TO]: 'Go-to',\n [IVR_NODE_TRANSFER]: 'Transfer',\n [IVR_NODE_HANGUP]: 'Hangup',\n [IVR_NODE_ASSIGN]: 'Assign',\n};\n\nconst IVR_NODE_COLORS = {\n PROMPT: {\n normal: 'd-bc-blue-200',\n selected: 'd-bc-blue-300',\n },\n LOGIC: {\n normal: 'd-bc-purple-200',\n selected: 'd-bc-purple-400',\n },\n TERMINAL: {\n normal: 'd-bc-red-100',\n selected: 'd-bc-red-200',\n },\n};\n\nexport const IVR_NODE_COLOR_MAPPING = {\n [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,\n [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,\n [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,\n [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,\n [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,\n [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,\n [IVR_NODE_ASSIGN]: IVR_NODE_COLORS.LOGIC,\n [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,\n [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL,\n};\n","<template>\n <div\n class=\"ivr_node\"\n v-on=\"nodeListeners\"\n >\n <div\n v-if=\"dtmfKey\"\n data-qa=\"dt-top-connector-dtmf\"\n class=\"ivr-connector ivr-connector--dtmf\"\n :class=\"{ 'ivr-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=\"ivr-connector\"\n :class=\"{ 'ivr-connector--selected': isSelected }\"\n />\n <dt-card\n content-class=\"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12\"\n :container-class=\"[\n 'd-w100p',\n { 'd-ba d-bar8 d-baw4': isSelected },\n headerColor,\n ]\"\n :header-class=\"[\n 'd-mtn1',\n 'd-bt',\n 'd-btw4',\n 'd-p0',\n headerColor,\n { 'd-btr4': !isSelected },\n ]\"\n >\n <template #header>\n <!-- node label and icon section on left of the header -->\n <div class=\"ivr_node__header-left\">\n <dt-button\n :aria-label=\"nodeType\"\n importance=\"clear\"\n kind=\"muted\"\n data-qa=\"dt-ivr-node-icon\"\n >\n <template #icon>\n <dt-icon\n :name=\"nodeIcon\"\n size=\"200\"\n :class=\"['', { 'ivr_node__goto_icon': isGotoNode }]\"\n />\n </template>\n </dt-button>\n <p\n class=\"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 @click.stop.prevent=\"openMenu\"\n >\n <template #icon>\n <dt-icon\n name=\"more-vertical\"\n size=\"200\"\n />\n </template>\n </dt-button>\n </template>\n <template #list=\"{ close }\">\n <div class=\"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 { DtIcon } from '@/components/icon';\nimport {\n IVR_NODE_ICON_TYPES, IVR_NODE_COLOR_MAPPING, IVR_NODE_GO_TO,\n} from './ivr_node_constants';\n\nexport default {\n name: 'DtRecipeIvrNode',\n\n components: {\n DtCard,\n DtButton,\n DtDropdown,\n DtIcon,\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 * Translated aria-label for header menu button\n */\n menuButtonAriaLabel: {\n type: String,\n required: true,\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 };\n },\n\n computed: {\n nodeListeners () {\n return {\n click: (e) => this.$emit('click', e),\n };\n },\n\n nodeIcon () {\n return IVR_NODE_ICON_TYPES[this.nodeType];\n },\n\n headerColor () {\n const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];\n return this.isSelected ? selected : normal;\n },\n\n isGotoNode () {\n return this.nodeType === IVR_NODE_GO_TO;\n },\n },\n\n methods: {\n openMenu () {\n this.isOpen = true;\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.ivr_node {\n width: 280px;\n display: flex;\n flex-direction: column;\n align-items: center;\n cursor: pointer;\n\n &__header-left {\n display: flex;\n align-items: center;\n }\n\n &__label {\n font-size: var(--dt-font-size-200);\n font-weight: var(--dt-font-weight-bold);\n }\n\n &__dropdown-list {\n width: var(--dt-size-825);\n }\n}\n\n.ivr_node__goto_icon {\n transform: rotate(90deg);\n}\n\n.ivr-connector {\n z-index: var(--zi-base);\n display: flex;\n justify-content: center;\n align-items: center;\n border-color: var(--dt-color-purple-600);\n background-color: var(--dt-color-purple-600);\n width: var(--dt-size-400);\n height: var(--dt-size-400);\n border-radius: var(--dt-size-radius-circle);\n margin-bottom: var(--dt-space-300-negative);\n\n &--selected {\n margin-bottom: var(--dt-space-400-negative);\n }\n\n &.ivr-connector--dtmf {\n width: var(--dt-size-550);\n height: var(--dt-size-550);\n margin-bottom: var(--dt-space-450-negative);\n color: var(--dt-color-neutral-white);\n font-size: var(--dt-font-size-200);\n\n &--selected {\n margin-bottom: var(--dt-space-500-negative);\n }\n }\n}\n</style>\n"],"names":["_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createVNode","_createElementVNode","_toDisplayString","_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAY,MAAC,uBAAuB;AACxB,MAAC,0BAA0B;AAC3B,MAAC,uBAAuB;AACxB,MAAC,kBAAkB;AACnB,MAAC,iBAAiB;AAClB,MAAC,kBAAkB;AACnB,MAAC,oBAAoB;AACrB,MAAC,kBAAkB;AACxB,MAAM,kBAAkB;AAEnB,MAAC,sBAAsB;AAAA,EACjC,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,iBAAiB,GAAG;AAAA,EACrB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AACrB;AAEY,MAAC,kBAAkB;AAAA,EAC7B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,uBAAuB,GAAG;AAAA,EAC3B,CAAC,oBAAoB,GAAG;AAAA,EACxB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,cAAc,GAAG;AAAA,EAClB,CAAC,iBAAiB,GAAG;AAAA,EACrB,CAAC,eAAe,GAAG;AAAA,EACnB,CAAC,eAAe,GAAG;AACrB;AAEA,MAAM,kBAAkB;AAAA,EACtB,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AACH;AAEO,MAAM,yBAAyB;AAAA,EACpC,CAAC,oBAAoB,GAAG,gBAAgB;AAAA,EACxC,CAAC,uBAAuB,GAAG,gBAAgB;AAAA,EAC3C,CAAC,oBAAoB,GAAG,gBAAgB;AAAA,EACxC,CAAC,eAAe,GAAG,gBAAgB;AAAA,EACnC,CAAC,eAAe,GAAG,gBAAgB;AAAA,EACnC,CAAC,cAAc,GAAG,gBAAgB;AAAA,EAClC,CAAC,eAAe,GAAG,gBAAgB;AAAA,EACnC,CAAC,iBAAiB,GAAG,gBAAgB;AAAA,EACrC,CAAC,eAAe,GAAG,gBAAgB;AACrC;ACkDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,QAAQ;AAAA;EAEX;AAAA,EAED,UAAU;AAAA,IACR,gBAAiB;AACf,aAAO;AAAA,QACL,OAAO,CAAC,MAAM,KAAK,MAAM,SAAS,CAAC;AAAA;IAEtC;AAAA,IAED,WAAY;AACV,aAAO,oBAAoB,KAAK,QAAQ;AAAA,IACzC;AAAA,IAED,cAAe;AACb,YAAM,EAAE,QAAQ,SAAS,IAAI,uBAAuB,KAAK,QAAQ;AACjE,aAAO,KAAK,aAAa,WAAW;AAAA,IACrC;AAAA,IAED,aAAc;AACZ,aAAO,KAAK,aAAa;AAAA,IAC1B;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,WAAY;AACV,WAAK,SAAS;AAAA,IACf;AAAA,EACF;AACH;AApKa,MAAA,aAAA,EAAA,OAAM,wBAAuB;;EAgB9B,OAAM;AAAA,EACN,WAAQ;;AA0BH,MAAA,aAAA,EAAA,OAAM,0BAAyB;;;;;;sBAnF9CA,mBAgGM,OAhGNC,WAgGM,EA/FJ,OAAM,WAAU,GAChBC,WAAoB,SAAD,eAAA,IAAA,CAAA,GAAA;AAAA,IAGX,OAAO,wBADfF,mBAOM,OAAA;AAAA;MALJ,WAAQ;AAAA,MACR,OAAKG,eAAA,CAAC,qCAAmC,EAAA,iCACE,OAAU,WAAA,CAAA,CAAA;AAAA,uBAElD,OAAO,OAAA,GAAA,CAAA;IAGJ,KAAA,OAAO,YADfC,WAGE,KAAA,QAAA,aAAA,EAAA,KAAA,GAAA;KAEO,OAAO,WAAA,CAAK,KAAM,OAAC,0BAD5BJ,mBAKE,OAAA;AAAA;MAHA,WAAQ;AAAA,MACR,OAAKG,eAAA,CAAC,iBAAe,EAAA,2BACgB,OAAU,WAAA,CAAA,CAAA;AAAA;IAEjDE,YAyEU,oBAAA;AAAA,MAxER,iBAAc;AAAA,MACb,mBAAe;AAAA;gCAAuD,OAAU,WAAA;AAAA,QAAY,SAAW;AAAA;MAKvG,gBAAY;AAAA;;;;QAAgF,SAAW;AAAA,qBAAuB,OAAU,WAAA;AAAA;;MAS9H,gBAET,MAqBM;AAAA,QArBNC,mBAqBM,OArBN,YAqBM;AAAA,UApBJD,YAaY,sBAAA;AAAA,YAZT,cAAY,OAAQ;AAAA,YACrB,YAAW;AAAA,YACX,MAAK;AAAA,YACL,WAAQ;AAAA;YAEG,cACT,MAIE;AAAA,cAJFA,YAIE,oBAAA;AAAA,gBAHC,MAAM,SAAQ;AAAA,gBACf,MAAK;AAAA,gBACJ,oDAAqC,SAAU,WAAA,CAAA,CAAA;AAAA;;;;UAItDC,mBAKI,KALJ,YAKIC,gBADC,OAAS,SAAA,GAAA,CAAA;AAAA;QAIhBF,YA2Bc,wBAAA;AAAA,UA1BJ,MAAM,MAAM;AAAA,iEAAN,MAAM,SAAA;AAAA,UACpB,WAAU;AAAA;UAEC,gBACT,MAYY;AAAA,YAZZA,YAYY,sBAAA;AAAA,cAXV,YAAW;AAAA,cACX,MAAK;AAAA,cACJ,cAAY,OAAmB;AAAA,cAC/B,uBAAoB,SAAQ,UAAA,CAAA,QAAA,SAAA,CAAA;AAAA;cAElB,cACT,MAGE;AAAA,gBAHFA,YAGE,oBAAA;AAAA,kBAFA,MAAK;AAAA,kBACL,MAAK;AAAA;;;;;UAKF,MAAIG,QACb,CAKM,EANW,YAAK;AAAA,YACtBF,mBAKM,OALN,YAKM;AAAA,cAJJF,WAGE,KAAA,QAAA,aAAA,EADC,OAAY;AAAA;;;;;MAMZ,iBACT,MAAuB;AAAA,QAAvBA,WAAuB,KAAA,QAAA,SAAA;AAAA;;;;;;"}
|
|
@@ -6,6 +6,7 @@ export const IVR_NODE_GO_TO: "goto";
|
|
|
6
6
|
export const IVR_NODE_BRANCH: "branch";
|
|
7
7
|
export const IVR_NODE_TRANSFER: "transfer";
|
|
8
8
|
export const IVR_NODE_HANGUP: "hangup";
|
|
9
|
+
export const IVR_NODE_ASSIGN: "assign";
|
|
9
10
|
export namespace IVR_NODE_ICON_TYPES {
|
|
10
11
|
let promptmenu: string;
|
|
11
12
|
let promptcollect: string;
|
|
@@ -15,6 +16,7 @@ export namespace IVR_NODE_ICON_TYPES {
|
|
|
15
16
|
let goto: string;
|
|
16
17
|
let transfer: string;
|
|
17
18
|
let hangup: string;
|
|
19
|
+
let assign: string;
|
|
18
20
|
}
|
|
19
21
|
export namespace IVR_NODE_LABELS {
|
|
20
22
|
let promptmenu_1: string;
|
|
@@ -33,6 +35,8 @@ export namespace IVR_NODE_LABELS {
|
|
|
33
35
|
export { transfer_1 as transfer };
|
|
34
36
|
let hangup_1: string;
|
|
35
37
|
export { hangup_1 as hangup };
|
|
38
|
+
let assign_1: string;
|
|
39
|
+
export { assign_1 as assign };
|
|
36
40
|
}
|
|
37
41
|
export namespace IVR_NODE_COLOR_MAPPING {
|
|
38
42
|
import promptmenu_2 = IVR_NODE_COLORS.PROMPT;
|
|
@@ -47,6 +51,8 @@ export namespace IVR_NODE_COLOR_MAPPING {
|
|
|
47
51
|
export { branch_2 as branch };
|
|
48
52
|
import goto_2 = IVR_NODE_COLORS.LOGIC;
|
|
49
53
|
export { goto_2 as goto };
|
|
54
|
+
import assign_2 = IVR_NODE_COLORS.LOGIC;
|
|
55
|
+
export { assign_2 as assign };
|
|
50
56
|
import transfer_2 = IVR_NODE_COLORS.TERMINAL;
|
|
51
57
|
export { transfer_2 as transfer };
|
|
52
58
|
import hangup_2 = IVR_NODE_COLORS.TERMINAL;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ivr_node_constants.d.ts","sourceRoot":"","sources":["../../../../../recipes/cards/ivr_node/ivr_node_constants.js"],"names":[],"mappings":"AAAA,gDAAiD;AACjD,sDAAuD;AACvD,gDAAiD;AACjD,2CAA4C;AAC5C,oCAAqC;AACrC,uCAAwC;AACxC,2CAA4C;AAC5C,uCAAwC"}
|
|
1
|
+
{"version":3,"file":"ivr_node_constants.d.ts","sourceRoot":"","sources":["../../../../../recipes/cards/ivr_node/ivr_node_constants.js"],"names":[],"mappings":"AAAA,gDAAiD;AACjD,sDAAuD;AACvD,gDAAiD;AACjD,2CAA4C;AAC5C,oCAAqC;AACrC,uCAAwC;AACxC,2CAA4C;AAC5C,uCAAwC;AACxC,uCAAwC"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dialpad/dialtone",
|
|
3
|
-
"version": "9.59.0
|
|
3
|
+
"version": "9.59.0",
|
|
4
4
|
"description": "Dialpad's Dialtone design system monorepo",
|
|
5
|
-
"type": "module",
|
|
6
5
|
"files": [
|
|
7
6
|
"dist"
|
|
8
7
|
],
|
|
@@ -33,10 +32,6 @@
|
|
|
33
32
|
"import": "./dist/vue3/*.js",
|
|
34
33
|
"require": "./dist/vue3/*.cjs"
|
|
35
34
|
},
|
|
36
|
-
"./themes": {
|
|
37
|
-
"import": "./dist/themes/*.js",
|
|
38
|
-
"require": "./dist/themes/*.cjs"
|
|
39
|
-
},
|
|
40
35
|
"./*": "./dist/*"
|
|
41
36
|
},
|
|
42
37
|
"dependencies": {
|
|
@@ -69,8 +64,7 @@
|
|
|
69
64
|
"stylelint": "15.11.0",
|
|
70
65
|
"tippy.js": "6.3.7",
|
|
71
66
|
"@dialpad/dialtone-emojis": "1.0.7",
|
|
72
|
-
"@dialpad/dialtone-icons": "4.25.0"
|
|
73
|
-
"@dialpad/dialtone-tokens": "1.32.0"
|
|
67
|
+
"@dialpad/dialtone-icons": "4.25.0"
|
|
74
68
|
},
|
|
75
69
|
"devDependencies": {
|
|
76
70
|
"@commitlint/cli": "^18.4.3",
|
|
@@ -111,7 +105,6 @@
|
|
|
111
105
|
"stylelint-config-standard": "^33.0.0",
|
|
112
106
|
"stylelint-less": "1.0.4",
|
|
113
107
|
"stylelint-no-px": "^1.0.1",
|
|
114
|
-
"vite": "^5.0.0",
|
|
115
108
|
"vitest": "^1.0.4",
|
|
116
109
|
"vue-docgen-api": "^4.75.0",
|
|
117
110
|
"wait-on": "^7.2.0"
|