@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue2/lib/ivr-node.cjs

@@ -3,23 +3,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
 const lib_card = require("./card.cjs");
 const lib_button = require("./button.cjs");
-const dropdown = require("../chunks/dropdown-mjrYu_mK.js");
+const dropdown = require("../chunks/dropdown-pHxnQPzT.js");
 const lib_icon = require("./icon.cjs");
 require("vue");
 require("../chunks/link_constants-x8NwdqmA.js");
-require("../chunks/keyboard_list_navigation-x3D6RcC7.js");
+require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
 require("../chunks/dropdown_constants-2pGCXy7m.js");
 require("../common/utils.cjs");
 require("../common/constants.cjs");
-require("../chunks/sr_only_close_button-2Q9Ny1Nc.js");
+require("../chunks/sr_only_close_button-ZaGdAHz7.js");
 require("./popover.cjs");
-require("../chunks/popover_constants-h9MD6WUt.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
 require("@linusborg/vue-simple-portal");
-require("../chunks/modal-OaWxzqNt.js");
+require("../chunks/modal-VgxXAQFP.js");
 require("./lazy-show.cjs");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-VEA0wI5C.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("../chunks/list_item_constants-EiqkqZvP.js");
 const IVR_NODE_PROMPT_MENU = "promptmenu";
@@ -142,10 +142,7 @@ const _sfc_main = {
       return IVR_NODE_ICON_TYPES[this.nodeType];
     },
     headerColor() {
-      const {
-        normal,
-        selected
-      } = IVR_NODE_COLOR_MAPPING[this.nodeType];
+      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];
       return this.isSelected ? selected : normal;
     },
     isGotoNode() {
@@ -160,133 +157,48 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", _vm._g({
-    staticClass: "ivr_node"
-  }, _vm.$listeners), [_vm.dtmfKey ? _c("div", {
-    staticClass: "ivr-connector ivr-connector--dtmf",
-    class: {
-      "ivr-connector--dtmf--selected": _vm.isSelected
-    },
-    attrs: {
-      "data-qa": "dt-top-connector-dtmf"
-    }
-  }, [_vm._v(" " + _vm._s(_vm.dtmfKey) + " ")]) : _vm._e(), _vm.$slots.connector ? _vm._t("connector") : _vm._e(), !_vm.dtmfKey && !_vm.$slots.connector ? _c("div", {
-    staticClass: "ivr-connector",
-    class: {
-      "ivr-connector--selected": _vm.isSelected
-    },
-    attrs: {
-      "data-qa": "dt-top-connector"
-    }
-  }) : _vm._e(), _c("dt-card", {
-    attrs: {
-      "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
-      "container-class": ["d-w100p", {
-        "d-ba d-bar8 d-baw4": _vm.isSelected
-      }, _vm.headerColor],
-      "header-class": ["d-mtn1", "d-bt", "d-btw4", "d-p0", _vm.headerColor, {
-        "d-btr4": !_vm.isSelected
-      }]
-    },
-    scopedSlots: _vm._u([{
-      key: "header",
-      fn: function() {
-        return [_c("div", {
-          staticClass: "ivr_node__header-left"
-        }, [_c("dt-button", {
-          attrs: {
-            "aria-label": _vm.nodeType,
-            "importance": "clear",
-            "kind": "muted",
-            "data-qa": "dt-ivr-node-icon"
-          },
-          scopedSlots: _vm._u([{
-            key: "icon",
-            fn: function() {
-              return [_c("dt-icon", {
-                class: ["", {
-                  "ivr_node__goto_icon": _vm.isGotoNode
-                }],
-                attrs: {
-                  "name": _vm.nodeIcon,
-                  "size": "200"
-                }
-              })];
-            },
-            proxy: true
-          }])
-        }), _c("p", {
-          staticClass: "ivr_node__label",
-          attrs: {
-            "data-qa": "ivr-node-label"
-          }
-        }, [_vm._v(" " + _vm._s(_vm.nodeLabel) + " ")])], 1), _c("dt-dropdown", {
-          attrs: {
-            "placement": "bottom",
-            "open": _vm.isOpen
-          },
-          on: {
-            "update:open": function($event) {
-              _vm.isOpen = $event;
-            }
-          },
-          scopedSlots: _vm._u([{
-            key: "anchor",
-            fn: function() {
-              return [_c("dt-button", {
-                attrs: {
-                  "importance": "clear",
-                  "kind": "muted",
-                  "aria-label": _vm.menuButtonAriaLabel
-                },
-                on: {
-                  "click": function($event) {
-                    $event.stopPropagation();
-                    $event.preventDefault();
-                    return _vm.openMenu.apply(null, arguments);
-                  }
-                },
-                scopedSlots: _vm._u([{
-                  key: "icon",
-                  fn: function() {
-                    return [_c("dt-icon", {
-                      attrs: {
-                        "name": "more-vertical",
-                        "size": "200"
-                      }
-                    })];
-                  },
-                  proxy: true
-                }])
-              })];
-            },
-            proxy: true
-          }, {
-            key: "list",
-            fn: function({
-              close
-            }) {
-              return [_c("div", {
-                staticClass: "ivr_node__dropdown-list"
-              }, [_vm._t("menuItems", null, {
-                "close": close
-              })], 2)];
-            }
-          }], null, true)
-        })];
-      },
-      proxy: true
-    }, {
-      key: "content",
-      fn: function() {
-        return [_vm._t("content")];
-      },
-      proxy: true
-    }], null, true)
-  })], 2);
+  return _c("div", _vm._g({ staticClass: "ivr_node" }, _vm.$listeners), [_vm.dtmfKey ? _c("div", { staticClass: "ivr-connector ivr-connector--dtmf", class: { "ivr-connector--dtmf--selected": _vm.isSelected }, attrs: { "data-qa": "dt-top-connector-dtmf" } }, [_vm._v(" " + _vm._s(_vm.dtmfKey) + " ")]) : _vm._e(), _vm.$slots.connector ? _vm._t("connector") : _vm._e(), !_vm.dtmfKey && !_vm.$slots.connector ? _c("div", { staticClass: "ivr-connector", class: { "ivr-connector--selected": _vm.isSelected }, attrs: { "data-qa": "dt-top-connector" } }) : _vm._e(), _c("dt-card", { attrs: { "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12", "container-class": [
+    "d-w100p",
+    { "d-ba d-bar8 d-baw4": _vm.isSelected },
+    _vm.headerColor
+  ], "header-class": [
+    "d-mtn1",
+    "d-bt",
+    "d-btw4",
+    "d-p0",
+    _vm.headerColor,
+    { "d-btr4": !_vm.isSelected }
+  ] }, scopedSlots: _vm._u([{ key: "header", fn: function() {
+    return [_c("div", { staticClass: "ivr_node__header-left" }, [_c("dt-button", { attrs: { "aria-label": _vm.nodeType, "importance": "clear", "kind": "muted", "data-qa": "dt-ivr-node-icon" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("dt-icon", { class: ["", { "ivr_node__goto_icon": _vm.isGotoNode }], attrs: { "name": _vm.nodeIcon, "size": "200" } })];
+    }, proxy: true }]) }), _c("p", { staticClass: "ivr_node__label", attrs: { "data-qa": "ivr-node-label" } }, [_vm._v(" " + _vm._s(_vm.nodeLabel) + " ")])], 1), _c("dt-dropdown", { attrs: { "placement": "bottom", "open": _vm.isOpen }, on: { "update:open": function($event) {
+      _vm.isOpen = $event;
+    } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+      return [_c("dt-button", { attrs: { "importance": "clear", "kind": "muted", "aria-label": _vm.menuButtonAriaLabel }, on: { "click": function($event) {
+        $event.stopPropagation();
+        $event.preventDefault();
+        return _vm.openMenu.apply(null, arguments);
+      } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_c("dt-icon", { attrs: { "name": "more-vertical", "size": "200" } })];
+      }, proxy: true }]) })];
+    }, proxy: true }, { key: "list", fn: function({ close }) {
+      return [_c("div", { staticClass: "ivr_node__dropdown-list" }, [_vm._t("menuItems", null, { "close": close })], 2)];
+    } }], null, true) })];
+  }, proxy: true }, { key: "content", fn: function() {
+    return [_vm._t("content")];
+  }, proxy: true }], null, true) })], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const ivr_node = __component__.exports;
 exports.DtRecipeIvrNode = ivr_node;
 exports.IVR_NODE_ASSIGN = IVR_NODE_ASSIGN;

package/dist/vue2/lib/ivr-node.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ivr-node.cjs","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_ASSIGN]: 'chevrons-right',\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  [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=\"$listeners\"\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          placement=\"bottom\"\n          :open.sync=\"isOpen\"\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    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":["IVR_NODE_PROMPT_MENU","IVR_NODE_PROMPT_COLLECT","IVR_NODE_PROMPT_PLAY","IVR_NODE_EXPERT","IVR_NODE_GO_TO","IVR_NODE_BRANCH","IVR_NODE_TRANSFER","IVR_NODE_HANGUP","IVR_NODE_ASSIGN","IVR_NODE_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_COLORS","PROMPT","normal","selected","LOGIC","TERMINAL","IVR_NODE_COLOR_MAPPING","_sfc_main","name","components","DtCard","DtButton","DtDropdown","DtIcon","props","nodeType","type","String","required","nodeLabel","isSelected","Boolean","default","menuButtonAriaLabel","dtmfKey","emits","data","isOpen","computed","nodeIcon","headerColor","isGotoNode","methods","openMenu"],"mappings":"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"}
+{"version":3,"file":"ivr-node.cjs","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_ASSIGN]: 'chevrons-right',\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  [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=\"$listeners\"\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          placement=\"bottom\"\n          :open.sync=\"isOpen\"\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    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":["DtCard","DtButton","DtDropdown","DtIcon"],"mappings":"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"}

package/dist/vue2/lib/ivr-node.js

@@ -1,23 +1,23 @@
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
 import { DtCard } from "./card.js";
 import { DtButton } from "./button.js";
-import { DtDropdown } from "../chunks/dropdown-YdCyJ5Dq.js";
+import { DtDropdown } from "../chunks/dropdown-6UoczdUY.js";
 import { DtIcon } from "./icon.js";
 import "vue";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/keyboard_list_navigation-YIqTuw1W.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.js";
 import "../chunks/dropdown_constants-w1MXGC3Z.js";
 import "../common/utils.js";
 import "../common/constants.js";
-import "../chunks/sr_only_close_button-IjMVfBDE.js";
+import "../chunks/sr_only_close_button-81bHIpPu.js";
 import "./popover.js";
-import "../chunks/popover_constants-6YkPPbnk.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
 import "@linusborg/vue-simple-portal";
-import "../chunks/modal-8X6poIZW.js";
+import "../chunks/modal-XOr4kiNZ.js";
 import "./lazy-show.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-TdxqLsS2.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "../chunks/list_item_constants-u1xcN9Dd.js";
 const IVR_NODE_PROMPT_MENU = "promptmenu";
@@ -140,10 +140,7 @@ const _sfc_main = {
       return IVR_NODE_ICON_TYPES[this.nodeType];
     },
     headerColor() {
-      const {
-        normal,
-        selected
-      } = IVR_NODE_COLOR_MAPPING[this.nodeType];
+      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];
       return this.isSelected ? selected : normal;
     },
     isGotoNode() {
@@ -158,133 +155,48 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", _vm._g({
-    staticClass: "ivr_node"
-  }, _vm.$listeners), [_vm.dtmfKey ? _c("div", {
-    staticClass: "ivr-connector ivr-connector--dtmf",
-    class: {
-      "ivr-connector--dtmf--selected": _vm.isSelected
-    },
-    attrs: {
-      "data-qa": "dt-top-connector-dtmf"
-    }
-  }, [_vm._v(" " + _vm._s(_vm.dtmfKey) + " ")]) : _vm._e(), _vm.$slots.connector ? _vm._t("connector") : _vm._e(), !_vm.dtmfKey && !_vm.$slots.connector ? _c("div", {
-    staticClass: "ivr-connector",
-    class: {
-      "ivr-connector--selected": _vm.isSelected
-    },
-    attrs: {
-      "data-qa": "dt-top-connector"
-    }
-  }) : _vm._e(), _c("dt-card", {
-    attrs: {
-      "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
-      "container-class": ["d-w100p", {
-        "d-ba d-bar8 d-baw4": _vm.isSelected
-      }, _vm.headerColor],
-      "header-class": ["d-mtn1", "d-bt", "d-btw4", "d-p0", _vm.headerColor, {
-        "d-btr4": !_vm.isSelected
-      }]
-    },
-    scopedSlots: _vm._u([{
-      key: "header",
-      fn: function() {
-        return [_c("div", {
-          staticClass: "ivr_node__header-left"
-        }, [_c("dt-button", {
-          attrs: {
-            "aria-label": _vm.nodeType,
-            "importance": "clear",
-            "kind": "muted",
-            "data-qa": "dt-ivr-node-icon"
-          },
-          scopedSlots: _vm._u([{
-            key: "icon",
-            fn: function() {
-              return [_c("dt-icon", {
-                class: ["", {
-                  "ivr_node__goto_icon": _vm.isGotoNode
-                }],
-                attrs: {
-                  "name": _vm.nodeIcon,
-                  "size": "200"
-                }
-              })];
-            },
-            proxy: true
-          }])
-        }), _c("p", {
-          staticClass: "ivr_node__label",
-          attrs: {
-            "data-qa": "ivr-node-label"
-          }
-        }, [_vm._v(" " + _vm._s(_vm.nodeLabel) + " ")])], 1), _c("dt-dropdown", {
-          attrs: {
-            "placement": "bottom",
-            "open": _vm.isOpen
-          },
-          on: {
-            "update:open": function($event) {
-              _vm.isOpen = $event;
-            }
-          },
-          scopedSlots: _vm._u([{
-            key: "anchor",
-            fn: function() {
-              return [_c("dt-button", {
-                attrs: {
-                  "importance": "clear",
-                  "kind": "muted",
-                  "aria-label": _vm.menuButtonAriaLabel
-                },
-                on: {
-                  "click": function($event) {
-                    $event.stopPropagation();
-                    $event.preventDefault();
-                    return _vm.openMenu.apply(null, arguments);
-                  }
-                },
-                scopedSlots: _vm._u([{
-                  key: "icon",
-                  fn: function() {
-                    return [_c("dt-icon", {
-                      attrs: {
-                        "name": "more-vertical",
-                        "size": "200"
-                      }
-                    })];
-                  },
-                  proxy: true
-                }])
-              })];
-            },
-            proxy: true
-          }, {
-            key: "list",
-            fn: function({
-              close
-            }) {
-              return [_c("div", {
-                staticClass: "ivr_node__dropdown-list"
-              }, [_vm._t("menuItems", null, {
-                "close": close
-              })], 2)];
-            }
-          }], null, true)
-        })];
-      },
-      proxy: true
-    }, {
-      key: "content",
-      fn: function() {
-        return [_vm._t("content")];
-      },
-      proxy: true
-    }], null, true)
-  })], 2);
+  return _c("div", _vm._g({ staticClass: "ivr_node" }, _vm.$listeners), [_vm.dtmfKey ? _c("div", { staticClass: "ivr-connector ivr-connector--dtmf", class: { "ivr-connector--dtmf--selected": _vm.isSelected }, attrs: { "data-qa": "dt-top-connector-dtmf" } }, [_vm._v(" " + _vm._s(_vm.dtmfKey) + " ")]) : _vm._e(), _vm.$slots.connector ? _vm._t("connector") : _vm._e(), !_vm.dtmfKey && !_vm.$slots.connector ? _c("div", { staticClass: "ivr-connector", class: { "ivr-connector--selected": _vm.isSelected }, attrs: { "data-qa": "dt-top-connector" } }) : _vm._e(), _c("dt-card", { attrs: { "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12", "container-class": [
+    "d-w100p",
+    { "d-ba d-bar8 d-baw4": _vm.isSelected },
+    _vm.headerColor
+  ], "header-class": [
+    "d-mtn1",
+    "d-bt",
+    "d-btw4",
+    "d-p0",
+    _vm.headerColor,
+    { "d-btr4": !_vm.isSelected }
+  ] }, scopedSlots: _vm._u([{ key: "header", fn: function() {
+    return [_c("div", { staticClass: "ivr_node__header-left" }, [_c("dt-button", { attrs: { "aria-label": _vm.nodeType, "importance": "clear", "kind": "muted", "data-qa": "dt-ivr-node-icon" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("dt-icon", { class: ["", { "ivr_node__goto_icon": _vm.isGotoNode }], attrs: { "name": _vm.nodeIcon, "size": "200" } })];
+    }, proxy: true }]) }), _c("p", { staticClass: "ivr_node__label", attrs: { "data-qa": "ivr-node-label" } }, [_vm._v(" " + _vm._s(_vm.nodeLabel) + " ")])], 1), _c("dt-dropdown", { attrs: { "placement": "bottom", "open": _vm.isOpen }, on: { "update:open": function($event) {
+      _vm.isOpen = $event;
+    } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+      return [_c("dt-button", { attrs: { "importance": "clear", "kind": "muted", "aria-label": _vm.menuButtonAriaLabel }, on: { "click": function($event) {
+        $event.stopPropagation();
+        $event.preventDefault();
+        return _vm.openMenu.apply(null, arguments);
+      } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_c("dt-icon", { attrs: { "name": "more-vertical", "size": "200" } })];
+      }, proxy: true }]) })];
+    }, proxy: true }, { key: "list", fn: function({ close }) {
+      return [_c("div", { staticClass: "ivr_node__dropdown-list" }, [_vm._t("menuItems", null, { "close": close })], 2)];
+    } }], null, true) })];
+  }, proxy: true }, { key: "content", fn: function() {
+    return [_vm._t("content")];
+  }, proxy: true }], null, true) })], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const ivr_node = __component__.exports;
 export {
   ivr_node as DtRecipeIvrNode,

package/dist/vue2/lib/ivr-node.js.map

@@ -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';\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_ASSIGN]: 'chevrons-right',\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  [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=\"$listeners\"\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          placement=\"bottom\"\n          :open.sync=\"isOpen\"\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    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":["IVR_NODE_PROMPT_MENU","IVR_NODE_PROMPT_COLLECT","IVR_NODE_PROMPT_PLAY","IVR_NODE_EXPERT","IVR_NODE_GO_TO","IVR_NODE_BRANCH","IVR_NODE_TRANSFER","IVR_NODE_HANGUP","IVR_NODE_ASSIGN","IVR_NODE_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_COLORS","PROMPT","normal","selected","LOGIC","TERMINAL","IVR_NODE_COLOR_MAPPING","_sfc_main","name","components","DtCard","DtButton","DtDropdown","DtIcon","props","nodeType","type","String","required","nodeLabel","isSelected","Boolean","default","menuButtonAriaLabel","dtmfKey","emits","data","isOpen","computed","nodeIcon","headerColor","isGotoNode","methods","openMenu"],"mappings":"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"}
+{"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_ASSIGN]: 'chevrons-right',\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  [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=\"$listeners\"\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          placement=\"bottom\"\n          :open.sync=\"isOpen\"\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    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":[],"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;AACnB,MAAC,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,eAAe,GAAG;AAAA,EACnB,CAAC,iBAAiB,GAAG;AAAA,EACrB,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,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,oBAAA,KAAA,QAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,YAAA,EAAA,QAAA,SAAA,IAAA,uBAAA,KAAA,QAAA;AACA,aAAA,KAAA,aAAA,WAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/keyboard-shortcut.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
 const lib_icon = require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-VEA0wI5C.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 const SHORTCUTS_ICON_ALIASES = {
   "{win}": "layout-grid",
@@ -55,10 +55,7 @@ const _sfc_main = {
   },
   computed: {
     icons() {
-      return {
-        ...SHORTCUTS_ICON_ALIASES,
-        ...SHORTCUTS_ICON_SEPARATOR
-      };
+      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };
     },
     shortcutWithSeparator() {
       return this.shortcut.replace(this.separator, "{plus}");
@@ -78,39 +75,30 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("kbd", {
-    class: ["d-keyboard-shortcut", {
-      "d-keyboard-shortcut--inverted": _vm.inverted
-    }]
-  }, [_vm.screenReaderText ? _c("span", {
-    staticClass: "d-keyboard-shortcut--sr-only"
-  }, [_vm._v(" " + _vm._s(_vm.screenReaderText) + " ")]) : _vm._e(), _vm._l(_vm.formattedShortcutSplit, function(item, i) {
-    return [_vm.icons[item] ? _c("dt-icon", {
-      key: `${i}-${item}`,
-      class: ["d-keyboard-shortcut__icon", {
-        "d-keyboard-shortcut__icon--inverted": _vm.inverted
-      }],
-      attrs: {
-        "name": _vm.icons[item],
-        "size": "100",
-        "aria-hidden": "true"
-      }
-    }) : _c("span", {
-      key: `${i}-${item}`,
-      class: ["d-keyboard-shortcut__item", {
-        "d-keyboard-shortcut__item--inverted": _vm.inverted
-      }],
-      attrs: {
-        "aria-hidden": "true"
-      },
-      domProps: {
-        "innerHTML": _vm._s(item)
-      }
-    })];
+  return _c("kbd", { class: [
+    "d-keyboard-shortcut",
+    { "d-keyboard-shortcut--inverted": _vm.inverted }
+  ] }, [_vm.screenReaderText ? _c("span", { staticClass: "d-keyboard-shortcut--sr-only" }, [_vm._v(" " + _vm._s(_vm.screenReaderText) + " ")]) : _vm._e(), _vm._l(_vm.formattedShortcutSplit, function(item, i) {
+    return [_vm.icons[item] ? _c("dt-icon", { key: `${i}-${item}`, class: [
+      "d-keyboard-shortcut__icon",
+      { "d-keyboard-shortcut__icon--inverted": _vm.inverted }
+    ], attrs: { "name": _vm.icons[item], "size": "100", "aria-hidden": "true" } }) : _c("span", { key: `${i}-${item}`, class: [
+      "d-keyboard-shortcut__item",
+      { "d-keyboard-shortcut__item--inverted": _vm.inverted }
+    ], attrs: { "aria-hidden": "true" }, domProps: { "innerHTML": _vm._s(item) } })];
   })], 2);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
 const keyboard_shortcut = __component__.exports;
 exports.DtKeyboardShortcut = keyboard_shortcut;
 exports.SHORTCUTS_ALIASES_LIST = SHORTCUTS_ALIASES_LIST;