@dialpad/dialtone-vue 2.127.0 → 2.127.1

package/dist/lib/item-layout.js

@@ -1,5 +1,5 @@
-import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-const s = {
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+const _sfc_main = {
   name: "DtItemLayout",
   props: {
     /**
@@ -15,25 +15,27 @@ const s = {
      */
     unstyled: {
       type: Boolean,
-      default: !1
+      default: false
     }
   }
 };
-var l = function() {
-  var t = this, e = t._self._c;
-  return e(t.as, { tag: "component", class: t.unstyled ? "dt-item-layout--custom" : "dt-item-layout" }, [t.$slots.left ? e("section", { staticClass: "dt-item-layout--left", attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [t._t("left")], 2) : t._e(), e("section", { staticClass: "dt-item-layout--content", attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [t.$slots.default ? e("div", { staticClass: "dt-item-layout--title", attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [t._t("default")], 2) : t._e(), t.$slots.subtitle ? e("div", { class: ["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": t.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [t._t("subtitle")], 2) : t._e(), t.$slots.bottom ? e("div", { staticClass: "dt-item-layout--bottom", attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [t._t("bottom")], 2) : t._e()]), t.$slots.right ? e("section", { staticClass: "dt-item-layout--right", attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [t._t("right")], 2) : t._e(), t.$slots.selected ? e("section", { staticClass: "dt-item-layout--selected", attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [t._t("selected")], 2) : t._e()]);
-}, o = [], i = /* @__PURE__ */ a(
-  s,
-  l,
-  o,
-  !1,
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c(_vm.as, { tag: "component", class: _vm.unstyled ? "dt-item-layout--custom" : "dt-item-layout" }, [_vm.$slots.left ? _c("section", { staticClass: "dt-item-layout--left", attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [_vm._t("left")], 2) : _vm._e(), _c("section", { staticClass: "dt-item-layout--content", attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [_vm.$slots.default ? _c("div", { staticClass: "dt-item-layout--title", attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [_vm._t("default")], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { class: ["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": _vm.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e(), _vm.$slots.bottom ? _c("div", { staticClass: "dt-item-layout--bottom", attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()]), _vm.$slots.right ? _c("section", { staticClass: "dt-item-layout--right", attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [_vm._t("right")], 2) : _vm._e(), _vm.$slots.selected ? _c("section", { staticClass: "dt-item-layout--selected", attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [_vm._t("selected")], 2) : _vm._e()]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const u = i.exports;
+const DtItemLayout = __component__.exports;
 export {
-  u as DtItemLayout
+  DtItemLayout
 };
 //# sourceMappingURL=item-layout.js.map

package/dist/lib/item-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-layout.js","sources":["../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'dt-item-layout--custom' : 'dt-item-layout'\"\n  >\n    <section\n      v-if=\"$slots.left\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      class=\"dt-item-layout--left\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      class=\"dt-item-layout--content\"\n    >\n      <div\n        v-if=\"$slots.default\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        class=\"dt-item-layout--title\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"$slots.subtitle\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"['dt-item-layout--subtitle', { 'dt-item-layout--subtitle--with-title': $slots.default }]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        class=\"dt-item-layout--bottom\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"$slots.right\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      class=\"dt-item-layout--right\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"$slots.selected\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      class=\"dt-item-layout--selected\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main"],"mappings":";AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"item-layout.js","sources":["../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'dt-item-layout--custom' : 'dt-item-layout'\"\n  >\n    <section\n      v-if=\"$slots.left\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      class=\"dt-item-layout--left\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      class=\"dt-item-layout--content\"\n    >\n      <div\n        v-if=\"$slots.default\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        class=\"dt-item-layout--title\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"$slots.subtitle\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"['dt-item-layout--subtitle', { 'dt-item-layout--subtitle--with-title': $slots.default }]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        class=\"dt-item-layout--bottom\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"$slots.right\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      class=\"dt-item-layout--right\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"$slots.selected\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      class=\"dt-item-layout--selected\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";AAmEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/lib/ivr-node.cjs

@@ -1,2 +1,210 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js"),R=require("./card.cjs"),m=require("./button.cjs"),E=require("../chunks/dropdown-zhMEz3bn.js"),N=require("./icon.cjs");require("vue");require("../chunks/link_constants-Kn6kP4i1.js");require("../chunks/keyboard_list_navigation-N74Bpdq7.js");require("../chunks/dropdown_constants-KHFvVI2L.js");require("./utils.cjs");require("./constants.cjs");require("../chunks/sr_only_close_button-ErijKGYR.js");require("./popover.cjs");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("@linusborg/vue-simple-portal");require("../chunks/modal-qEzlo0Sj.js");require("./lazy-show.cjs");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("../chunks/list_item_constants-Tsz5CO1m.js");const c="promptmenu",s="promptcollect",d="promptplay",a="gotoexpert",o="goto",i="branch",l="transfer",u="hangup",p={[c]:"keypad",[s]:"dialer",[d]:"volume-2",[a]:"expert-node",[i]:"branch",[o]:"call-merge",[l]:"transfer",[u]:"phone-hang-up"},I={[c]:"Menu",[s]:"Collect",[d]:"Play",[a]:"Expert",[i]:"Branch",[o]:"Go-to",[l]:"Transfer",[u]:"Hangup"},r={PROMPT:{normal:"d-bc-blue-200",selected:"d-bc-blue-300"},LOGIC:{normal:"d-bc-purple-200",selected:"d-bc-purple-400"},TERMINAL:{normal:"d-bc-red-100",selected:"d-bc-red-200"}},b={[c]:r.PROMPT,[s]:r.PROMPT,[d]:r.PROMPT,[a]:r.LOGIC,[i]:r.LOGIC,[o]:r.LOGIC,[l]:r.TERMINAL,[u]:r.TERMINAL},f={name:"DtRecipeIvrNode",components:{DtCard:R.DtCard,DtButton:m.DtButton,DtDropdown:E.D,DtIcon:N.DtIcon},props:{nodeType:{type:String,required:!0},nodeLabel:{type:String,required:!0},isSelected:{type:Boolean,default:!1},menuButtonAriaLabel:{type:String,required:!0},dtmfKey:{type:String,default:null}},emits:["click"],data(){return{isOpen:!1}},computed:{nodeIcon(){return p[this.nodeType]},headerColor(){const{normal:_,selected:e}=b[this.nodeType];return this.isSelected?e:_},isGotoNode(){return this.nodeType===o}},methods:{openMenu(){this.isOpen=!0}}};var D=function(){var e=this,t=e._self._c;return t("div",e._g({staticClass:"ivr_node"},e.$listeners),[e.dtmfKey?t("div",{staticClass:"ivr-connector ivr-connector--dtmf",class:{"ivr-connector--dtmf--selected":e.isSelected},attrs:{"data-qa":"dt-top-connector-dtmf"}},[e._v(" "+e._s(e.dtmfKey)+" ")]):e._e(),e.$slots.connector?e._t("connector"):e._e(),!e.dtmfKey&&!e.$slots.connector?t("div",{staticClass:"ivr-connector",class:{"ivr-connector--selected":e.isSelected},attrs:{"data-qa":"dt-top-connector"}}):e._e(),t("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":e.isSelected},e.headerColor],"header-class":["d-mtn1","d-bt","d-btw4","d-p0",e.headerColor,{"d-btr4":!e.isSelected}]},scopedSlots:e._u([{key:"header",fn:function(){return[t("div",{staticClass:"ivr_node__header-left"},[t("dt-button",{attrs:{"aria-label":e.nodeType,importance:"clear",kind:"muted","data-qa":"dt-ivr-node-icon"},scopedSlots:e._u([{key:"icon",fn:function(){return[t("dt-icon",{class:["",{ivr_node__goto_icon:e.isGotoNode}],attrs:{name:e.nodeIcon,size:"200"}})]},proxy:!0}])}),t("p",{staticClass:"ivr_node__label",attrs:{"data-qa":"ivr-node-label"}},[e._v(" "+e._s(e.nodeLabel)+" ")])],1),t("dt-dropdown",{attrs:{placement:"bottom",open:e.isOpen},on:{"update:open":function(n){e.isOpen=n}},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("dt-button",{attrs:{importance:"clear",kind:"muted","aria-label":e.menuButtonAriaLabel},on:{click:function(n){return n.stopPropagation(),n.preventDefault(),e.openMenu.apply(null,arguments)}},scopedSlots:e._u([{key:"icon",fn:function(){return[t("dt-icon",{attrs:{name:"more-vertical",size:"200"}})]},proxy:!0}])})]},proxy:!0},{key:"list",fn:function({close:n}){return[t("div",{staticClass:"ivr_node__dropdown-list"},[e._t("menuItems",null,{close:n})],2)]}}],null,!0)})]},proxy:!0},{key:"content",fn:function(){return[e._t("content")]},proxy:!0}],null,!0)})],2)},P=[],y=O.n(f,D,P,!1,null,null,null,null);const v=y.exports;exports.DtRecipeIvrNode=v;exports.IVR_NODE_BRANCH=i;exports.IVR_NODE_EXPERT=a;exports.IVR_NODE_GO_TO=o;exports.IVR_NODE_HANGUP=u;exports.IVR_NODE_ICON_TYPES=p;exports.IVR_NODE_LABELS=I;exports.IVR_NODE_PROMPT_COLLECT=s;exports.IVR_NODE_PROMPT_MENU=c;exports.IVR_NODE_PROMPT_PLAY=d;exports.IVR_NODE_TRANSFER=l;
+"use strict";
+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-IaLNHmVd.js");
+const lib_icon = require("./icon.cjs");
+require("vue");
+require("../chunks/link_constants-Huj7D_hm.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-ZaGdAHz7.js");
+require("./popover.cjs");
+require("../chunks/popover_constants-JwBF9h1Z.js");
+require("tippy.js");
+require("@linusborg/vue-simple-portal");
+require("../chunks/modal-VgxXAQFP.js");
+require("./lazy-show.cjs");
+require("@dialpad/dialtone-icons/vue2");
+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";
+const IVR_NODE_PROMPT_COLLECT = "promptcollect";
+const IVR_NODE_PROMPT_PLAY = "promptplay";
+const IVR_NODE_EXPERT = "gotoexpert";
+const IVR_NODE_GO_TO = "goto";
+const IVR_NODE_BRANCH = "branch";
+const IVR_NODE_TRANSFER = "transfer";
+const IVR_NODE_HANGUP = "hangup";
+const IVR_NODE_ICON_TYPES = {
+  [IVR_NODE_PROMPT_MENU]: "keypad",
+  [IVR_NODE_PROMPT_COLLECT]: "dialer",
+  [IVR_NODE_PROMPT_PLAY]: "volume-2",
+  [IVR_NODE_EXPERT]: "expert-node",
+  [IVR_NODE_BRANCH]: "branch",
+  [IVR_NODE_GO_TO]: "call-merge",
+  [IVR_NODE_TRANSFER]: "transfer",
+  [IVR_NODE_HANGUP]: "phone-hang-up"
+};
+const IVR_NODE_LABELS = {
+  [IVR_NODE_PROMPT_MENU]: "Menu",
+  [IVR_NODE_PROMPT_COLLECT]: "Collect",
+  [IVR_NODE_PROMPT_PLAY]: "Play",
+  [IVR_NODE_EXPERT]: "Expert",
+  [IVR_NODE_BRANCH]: "Branch",
+  [IVR_NODE_GO_TO]: "Go-to",
+  [IVR_NODE_TRANSFER]: "Transfer",
+  [IVR_NODE_HANGUP]: "Hangup"
+};
+const IVR_NODE_COLORS = {
+  PROMPT: {
+    normal: "d-bc-blue-200",
+    selected: "d-bc-blue-300"
+  },
+  LOGIC: {
+    normal: "d-bc-purple-200",
+    selected: "d-bc-purple-400"
+  },
+  TERMINAL: {
+    normal: "d-bc-red-100",
+    selected: "d-bc-red-200"
+  }
+};
+const IVR_NODE_COLOR_MAPPING = {
+  [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,
+  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,
+  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,
+  [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,
+  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL
+};
+const _sfc_main = {
+  name: "DtRecipeIvrNode",
+  components: {
+    DtCard: lib_card.DtCard,
+    DtButton: lib_button.DtButton,
+    DtDropdown: dropdown.DtDropdown,
+    DtIcon: lib_icon.DtIcon
+  },
+  props: {
+    /**
+     * type of IVR Node.
+     */
+    nodeType: {
+      type: String,
+      required: true
+    },
+    /**
+     * Descriptive label for the node name.
+     */
+    nodeLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * Selected state of the node
+     */
+    isSelected: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Translated aria-label for header menu button
+     */
+    menuButtonAriaLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * DTMF input
+     */
+    dtmfKey: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    /**
+     * Add node click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  data() {
+    return {
+      isOpen: false
+    };
+  },
+  computed: {
+    nodeIcon() {
+      return IVR_NODE_ICON_TYPES[this.nodeType];
+    },
+    headerColor() {
+      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];
+      return this.isSelected ? selected : normal;
+    },
+    isGotoNode() {
+      return this.nodeType === IVR_NODE_GO_TO;
+    }
+  },
+  methods: {
+    openMenu() {
+      this.isOpen = true;
+    }
+  }
+};
+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);
+};
+var _sfc_staticRenderFns = [];
+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_BRANCH = IVR_NODE_BRANCH;
+exports.IVR_NODE_EXPERT = IVR_NODE_EXPERT;
+exports.IVR_NODE_GO_TO = IVR_NODE_GO_TO;
+exports.IVR_NODE_HANGUP = IVR_NODE_HANGUP;
+exports.IVR_NODE_ICON_TYPES = IVR_NODE_ICON_TYPES;
+exports.IVR_NODE_LABELS = IVR_NODE_LABELS;
+exports.IVR_NODE_PROMPT_COLLECT = IVR_NODE_PROMPT_COLLECT;
+exports.IVR_NODE_PROMPT_MENU = IVR_NODE_PROMPT_MENU;
+exports.IVR_NODE_PROMPT_PLAY = IVR_NODE_PROMPT_PLAY;
+exports.IVR_NODE_TRANSFER = IVR_NODE_TRANSFER;
 //# sourceMappingURL=ivr-node.cjs.map

package/dist/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';\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=\"$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_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_COLORS","IVR_NODE_COLOR_MAPPING","_sfc_main","DtCard","DtButton","DtDropdown","DtIcon","normal","selected"],"mappings":"i6BAAY,MAACA,EAAuB,aACvBC,EAA0B,gBAC1BC,EAAuB,aACvBC,EAAkB,aAClBC,EAAiB,OACjBC,EAAkB,SAClBC,EAAoB,WACpBC,EAAkB,SAElBC,EAAsB,CACjC,CAACR,CAAoB,EAAG,SACxB,CAACC,CAAuB,EAAG,SAC3B,CAACC,CAAoB,EAAG,WACxB,CAACC,CAAe,EAAG,cACnB,CAACE,CAAe,EAAG,SACnB,CAACD,CAAc,EAAG,aAClB,CAACE,CAAiB,EAAG,WACrB,CAACC,CAAe,EAAG,eACrB,EAEaE,EAAkB,CAC7B,CAACT,CAAoB,EAAG,OACxB,CAACC,CAAuB,EAAG,UAC3B,CAACC,CAAoB,EAAG,OACxB,CAACC,CAAe,EAAG,SACnB,CAACE,CAAe,EAAG,SACnB,CAACD,CAAc,EAAG,QAClB,CAACE,CAAiB,EAAG,WACrB,CAACC,CAAe,EAAG,QACrB,EAEMG,EAAkB,CACtB,OAAQ,CACN,OAAQ,gBACR,SAAU,eACX,EACD,MAAO,CACL,OAAQ,kBACR,SAAU,iBACX,EACD,SAAU,CACR,OAAQ,eACR,SAAU,cACX,CACH,EAEaC,EAAyB,CACpC,CAACX,CAAoB,EAAGU,EAAgB,OACxC,CAACT,CAAuB,EAAGS,EAAgB,OAC3C,CAACR,CAAoB,EAAGQ,EAAgB,OACxC,CAACP,CAAe,EAAGO,EAAgB,MACnC,CAACL,CAAe,EAAGK,EAAgB,MACnC,CAACN,CAAc,EAAGM,EAAgB,MAClC,CAACJ,CAAiB,EAAGI,EAAgB,SACrC,CAACH,CAAe,EAAGG,EAAgB,QACrC,ECsDAE,EAAA,CACA,KAAA,kBAEA,WAAA,CACA,OAAAC,EAAA,OACA,SAAAC,EAAA,SACA,WAAAC,EAAA,EACA,OAAAC,EAAA,MACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,oBAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,QAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,MAAA,CACA,MAAA,CACA,OAAA,EACA,CACA,EAEA,SAAA,CACA,UAAA,CACA,OAAAR,EAAA,KAAA,QAAA,CACA,EAEA,aAAA,CACA,KAAA,CAAA,OAAAS,EAAA,SAAAC,CAAA,EAAAP,EAAA,KAAA,QAAA,EACA,OAAA,KAAA,WAAAO,EAAAD,CACA,EAEA,YAAA,CACA,OAAA,KAAA,WAAAb,CACA,CACA,EAEA,QAAA,CACA,UAAA,CACA,KAAA,OAAA,EACA,CACA,CACA"}
+{"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';\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=\"$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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"}