@dialpad/dialtone 9.83.1 → 9.84.0

package/dist/vue3/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"callbar_button_with_popover.vue.js","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n  <div\n    class=\"dt-recipe--callbar-button-with-popover\"\n  >\n    <dt-recipe-callbar-button\n      :aria-label=\"ariaLabel\"\n      :disabled=\"disabled\"\n      :active=\"active\"\n      :danger=\"danger\"\n      :button-class=\"buttonClass\"\n      :button-width-size=\"buttonWidthSize\"\n      :text-class=\"textClass\"\n      class=\"dt-recipe--callbar-button-with-popover--main-button\"\n      @click=\"buttonClick\"\n    >\n      <template #icon>\n        <slot name=\"icon\" />\n      </template>\n      <template #tooltip>\n        <slot name=\"tooltip\" />\n      </template>\n      <slot />\n    </dt-recipe-callbar-button>\n    <dt-popover\n      v-if=\"showArrowButton\"\n      :id=\"id\"\n      :modal=\"false\"\n      :open=\"open\"\n      :placement=\"placement\"\n      :initial-focus-element=\"initialFocusElement\"\n      :show-close-button=\"showCloseButton\"\n      :offset=\"offset\"\n      padding=\"none\"\n      class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n      :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n      header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n      v-bind=\"$attrs\"\n      :open-popover=\"showPopover\"\n      @opened=\"onModalIsOpened\"\n    >\n      <template #anchor>\n        <dt-button\n          circle\n          importance=\"clear\"\n          size=\"lg\"\n          :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n                   { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n          width=\"2rem\"\n          :aria-label=\"arrowButtonLabel\"\n          :active=\"open\"\n          @click=\"arrowClick\"\n        >\n          <template #icon>\n            <dt-icon-chevron-up\n              class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n      <template #headerContent>\n        <slot name=\"headerContent\" />\n      </template>\n      <template #footerContent>\n        <slot name=\"footerContent\" />\n      </template>\n    </dt-popover>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIconChevronUp } from '@dialpad/dialtone-icons/vue3';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils, { warnIfUnmounted } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeCallbarButtonWithPopover',\n\n  components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIconChevronUp },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Aria label for the arrow. Cannot be empty.\n     */\n    arrowButtonLabel: {\n      type: String,\n      required: true,\n      validator: (label) => {\n        return !!label;\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * @values 'bottom', 'bottom-start', 'bottom-end',\n     *         'right', 'right-start', 'right-end',\n     *         'left', 'left-start', 'left-end',\n     *         'top', 'top-start', 'top-end'\n     * @default 'top'\n     */\n    placement: {\n      type: String,\n      default: 'top',\n    },\n\n    /**\n     *  Displaces the content box from its anchor element\n     *  by the specified number of pixels.\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 16],\n    },\n\n    /**\n     * The element that is focused when the popover is opened. This can be an\n     * HTMLElement within the popover, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: String,\n      default: 'first',\n    },\n\n    /**\n     * Determines visibility for close button\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Forces showing the arrow, even if the button is disabled.\n     * default is false\n     * @values true, false\n     */\n    forceShowArrow: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * We need this declaration because of how Vue3 informs the component about a listener.\n     * Spoiler alert: it doesn't.\n     * Vue3 intends to work as a real pub-sub, meaning the publisher has not a clue of who the subscribers are.\n     * This makes it impossible from the regular declaration (emits: ['click']) to check whether\n     * we actually have a click handler or not.\n     * We're hacking it by adding an onClick prop: https://github.com/vuejs/core/issues/5220\n    */\n    /* eslint-disable-next-line vue/no-unused-properties */\n    onClick: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * Additional class name for the popover content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * To auto open the modal popover.\n     */\n    openPopover: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when the arrow is clicked\n     */\n    'arrow-click',\n\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Emitted when modal popover is opened or closed.\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      open: false,\n    };\n  },\n\n  computed: {\n    showArrowButton () {\n      return this.forceShowArrow || !this.disabled;\n    },\n\n    isCompactMode () {\n      return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n    },\n\n    showPopover () {\n      if (!this.openPopover || this.open) {\n        this.syncOpenState();\n        return false;\n      }\n\n      return this.toggleOpen();\n    },\n  },\n\n  mounted () {\n    warnIfUnmounted(this.$el, this.$options.name);\n  },\n\n  methods: {\n    arrowClick (ev) {\n      this.$emit('arrow-click', ev);\n      return this.toggleOpen();\n    },\n\n    toggleOpen () {\n      return (this.open = !this.open);\n    },\n\n    syncOpenState () {\n      this.open = this.openPopover;\n    },\n\n    buttonClick (ev) {\n      // If no listener for the click event, the button click opens the popover\n      // the same as if the arrow was clicked.\n      if (!this.$props.onClick) {\n        this.arrowClick(ev);\n      } else {\n        this.$emit('click', ev);\n      }\n    },\n\n    onModalIsOpened (isOpened) {\n      this.open = isOpened;\n      this.$emit('opened', isOpened);\n    },\n  },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n  margin-top: var(--dt-space-450);\n  margin-left: calc(var(--dt-space-300-negative) * 5);\n  width: var(--dt-size-500);\n  height: var(--dt-size-500);\n  padding: var(--dt-space-400);\n  border-radius: var(--dt-size-300);\n\n  &.d-btn--active {\n    background: var(--dt-color-surface-moderate-opaque);\n  }\n\n  &--large {\n    margin-left: var(--dt-space-550-negative);\n  }\n\n  &__icon {\n    color: var(--dt-color-black-800);\n  }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n  .d-popover__header {\n    background: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-primary-inverted);\n\n    .d-btn {\n      color: var(--dt-color-foreground-primary-inverted);\n    }\n  }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n  --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n  flex: 1 1 100%;\n  overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n  display: flex;\n  align-items: flex-start;\n}\n</style>\n"],"names":["this","_openBlock","_createElementBlock","_createVNode","_renderSlot","_withCtx","_createBlock","_mergeProps","_normalizeClass","_createCommentVNode"],"mappings":"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"}

package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.cjs

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue3 = require("@dialpad/dialtone-icons/vue3");
+const ivr_node_constants = require("./ivr_node_constants.cjs");
+const vue = require("vue");
+;/* empty css                */
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+const card = require("../../../components/card/card.vue.cjs");
+const button = require("../../../components/button/button.vue.cjs");
+const dropdown = require("../../../components/dropdown/dropdown.vue.cjs");
+const typeToIcon = /* @__PURE__ */ new Map([
+  [ivr_node_constants.IVR_NODE_PROMPT_MENU, vue3.DtIconKeypad],
+  [ivr_node_constants.IVR_NODE_PROMPT_COLLECT, vue3.DtIconDialer],
+  [ivr_node_constants.IVR_NODE_PROMPT_PLAY, vue3.DtIconVolume2],
+  [ivr_node_constants.IVR_NODE_EXPERT, vue3.DtIconExpertNode],
+  [ivr_node_constants.IVR_NODE_BRANCH, vue3.DtIconBranch],
+  [ivr_node_constants.IVR_NODE_GO_TO, vue3.DtIconCallMerge],
+  [ivr_node_constants.IVR_NODE_ASSIGN, vue3.DtIconChevronsRight],
+  [ivr_node_constants.IVR_NODE_TRANSFER, vue3.DtIconTransfer],
+  [ivr_node_constants.IVR_NODE_HANGUP, vue3.DtIconPhoneHangUp]
+]);
+const _sfc_main = {
+  name: "DtRecipeIvrNode",
+  components: {
+    DtCard: card.default,
+    DtButton: button.default,
+    DtDropdown: dropdown.default,
+    DtIconKeypad: vue3.DtIconKeypad,
+    DtIconDialer: vue3.DtIconDialer,
+    DtIconVolume2: vue3.DtIconVolume2,
+    DtIconExpertNode: vue3.DtIconExpertNode,
+    DtIconBranch: vue3.DtIconBranch,
+    DtIconCallMerge: vue3.DtIconCallMerge,
+    DtIconChevronsRight: vue3.DtIconChevronsRight,
+    DtIconTransfer: vue3.DtIconTransfer,
+    DtIconPhoneHangUp: vue3.DtIconPhoneHangUp,
+    DtIconMoreVertical: vue3.DtIconMoreVertical
+  },
+  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: {
+    nodeListeners() {
+      return {
+        click: (e) => this.$emit("click", e)
+      };
+    },
+    nodeIcon() {
+      return typeToIcon.get(this.nodeType);
+    },
+    headerColor() {
+      const { normal, selected } = ivr_node_constants.IVR_NODE_COLOR_MAPPING[this.nodeType];
+      return this.isSelected ? selected : normal;
+    },
+    isGotoNode() {
+      return this.nodeType === ivr_node_constants.IVR_NODE_GO_TO;
+    }
+  },
+  methods: {
+    openMenu() {
+      this.isOpen = true;
+    }
+  }
+};
+const _hoisted_1 = { class: "ivr_node__header-left" };
+const _hoisted_2 = {
+  class: "ivr_node__label",
+  "data-qa": "ivr-node-label"
+};
+const _hoisted_3 = { class: "ivr_node__dropdown-list" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  const _component_dt_icon_more_vertical = vue.resolveComponent("dt-icon-more-vertical");
+  const _component_dt_dropdown = vue.resolveComponent("dt-dropdown");
+  const _component_dt_card = vue.resolveComponent("dt-card");
+  return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "ivr_node" }, vue.toHandlers($options.nodeListeners, true)), [
+    $props.dtmfKey ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      "data-qa": "dt-top-connector-dtmf",
+      class: vue.normalizeClass(["ivr-connector ivr-connector--dtmf", { "ivr-connector--dtmf--selected": $props.isSelected }])
+    }, vue.toDisplayString($props.dtmfKey), 3)) : vue.createCommentVNode("", true),
+    _ctx.$slots.connector ? vue.renderSlot(_ctx.$slots, "connector", { key: 1 }) : vue.createCommentVNode("", true),
+    !$props.dtmfKey && !_ctx.$slots.connector ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 2,
+      "data-qa": "dt-top-connector",
+      class: vue.normalizeClass(["ivr-connector", { "ivr-connector--selected": $props.isSelected }])
+    }, null, 2)) : vue.createCommentVNode("", true),
+    vue.createVNode(_component_dt_card, {
+      "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
+      "container-class": [
+        "d-w100p",
+        { "d-ba d-bar8 d-baw4": $props.isSelected },
+        $options.headerColor
+      ],
+      "header-class": [
+        "d-mtn1",
+        "d-bt",
+        "d-btw4",
+        "d-p0",
+        $options.headerColor,
+        { "d-btr4": !$props.isSelected }
+      ]
+    }, {
+      header: vue.withCtx(() => [
+        vue.createElementVNode("div", _hoisted_1, [
+          vue.createVNode(_component_dt_button, {
+            "aria-label": $props.nodeType,
+            importance: "clear",
+            kind: "muted",
+            "data-qa": "dt-ivr-node-icon"
+          }, {
+            icon: vue.withCtx(() => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.nodeIcon), {
+                size: "200",
+                class: vue.normalizeClass(["", { "ivr_node__goto_icon": $options.isGotoNode }])
+              }, null, 8, ["class"]))
+            ]),
+            _: 1
+          }, 8, ["aria-label"]),
+          vue.createElementVNode("p", _hoisted_2, vue.toDisplayString($props.nodeLabel), 1)
+        ]),
+        vue.createVNode(_component_dt_dropdown, {
+          open: $data.isOpen,
+          "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $data.isOpen = $event),
+          placement: "bottom"
+        }, {
+          anchor: vue.withCtx(() => [
+            vue.createVNode(_component_dt_button, {
+              importance: "clear",
+              kind: "muted",
+              "aria-label": $props.menuButtonAriaLabel,
+              onClick: vue.withModifiers($options.openMenu, ["stop", "prevent"])
+            }, {
+              icon: vue.withCtx(() => [
+                vue.createVNode(_component_dt_icon_more_vertical, { size: "200" })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "onClick"])
+          ]),
+          list: vue.withCtx(({ close }) => [
+            vue.createElementVNode("div", _hoisted_3, [
+              vue.renderSlot(_ctx.$slots, "menuItems", { close })
+            ])
+          ]),
+          _: 3
+        }, 8, ["open"])
+      ]),
+      content: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "content")
+      ]),
+      _: 3
+    }, 8, ["container-class", "header-class"])
+  ], 16);
+}
+const ivr_node = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = ivr_node;
+//# sourceMappingURL=ivr_node.vue.cjs.map

package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ivr_node.vue.cjs","sources":["../../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    class=\"ivr_node\"\n    v-on=\"nodeListeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"ivr-connector ivr-connector--dtmf\"\n      :class=\"{ 'ivr-connector--dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"ivr-connector\"\n      :class=\"{ 'ivr-connector--selected': isSelected }\"\n    />\n    <dt-card\n      content-class=\"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12\"\n      :container-class=\"[\n        'd-w100p',\n        { 'd-ba d-bar8 d-baw4': isSelected },\n        headerColor,\n      ]\"\n      :header-class=\"[\n        'd-mtn1',\n        'd-bt',\n        'd-btw4',\n        'd-p0',\n        headerColor,\n        { 'd-btr4': !isSelected },\n      ]\"\n    >\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"ivr_node__header-left\">\n          <dt-button\n            :aria-label=\"nodeType\"\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n          >\n            <template #icon>\n              <component\n                :is=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'ivr_node__goto_icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"ivr_node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          v-model:open=\"isOpen\"\n          placement=\"bottom\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\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 {\n  DtIconKeypad,\n  DtIconDialer,\n  DtIconVolume2,\n  DtIconExpertNode,\n  DtIconBranch,\n  DtIconCallMerge,\n  DtIconChevronsRight,\n  DtIconTransfer,\n  DtIconPhoneHangUp,\n  DtIconMoreVertical,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n  IVR_NODE_COLOR_MAPPING,\n  IVR_NODE_PROMPT_MENU,\n  IVR_NODE_PROMPT_COLLECT,\n  IVR_NODE_PROMPT_PLAY,\n  IVR_NODE_EXPERT,\n  IVR_NODE_BRANCH,\n  IVR_NODE_GO_TO,\n  IVR_NODE_ASSIGN,\n  IVR_NODE_TRANSFER,\n  IVR_NODE_HANGUP,\n} from './ivr_node_constants';\n\nconst typeToIcon = new Map([\n  [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n  [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n  [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n  [IVR_NODE_EXPERT, DtIconExpertNode],\n  [IVR_NODE_BRANCH, DtIconBranch],\n  [IVR_NODE_GO_TO, DtIconCallMerge],\n  [IVR_NODE_ASSIGN, DtIconChevronsRight],\n  [IVR_NODE_TRANSFER, DtIconTransfer],\n  [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIconKeypad,\n    DtIconDialer,\n    DtIconVolume2,\n    DtIconExpertNode,\n    DtIconBranch,\n    DtIconCallMerge,\n    DtIconChevronsRight,\n    DtIconTransfer,\n    DtIconPhoneHangUp,\n    DtIconMoreVertical,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeListeners () {\n      return {\n        click: (e) => this.$emit('click', e),\n      };\n    },\n\n    nodeIcon () {\n      return typeToIcon.get(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","DtIconKeypad","IVR_NODE_PROMPT_COLLECT","DtIconDialer","IVR_NODE_PROMPT_PLAY","DtIconVolume2","IVR_NODE_EXPERT","DtIconExpertNode","IVR_NODE_BRANCH","DtIconBranch","IVR_NODE_GO_TO","DtIconCallMerge","IVR_NODE_ASSIGN","DtIconChevronsRight","IVR_NODE_TRANSFER","DtIconTransfer","IVR_NODE_HANGUP","DtIconPhoneHangUp","DtCard","DtButton","DtDropdown","DtIconMoreVertical","IVR_NODE_COLOR_MAPPING","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_createCommentVNode","_renderSlot","_createVNode","_createElementVNode","_createBlock","_resolveDynamicComponent","_toDisplayString","_withModifiers","_withCtx"],"mappings":"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"}

package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.js

@@ -0,0 +1,205 @@
+import { DtIconKeypad, DtIconDialer, DtIconVolume2, DtIconExpertNode, DtIconBranch, DtIconCallMerge, DtIconChevronsRight, DtIconTransfer, DtIconPhoneHangUp, DtIconMoreVertical } from "@dialpad/dialtone-icons/vue3";
+import { IVR_NODE_GO_TO, IVR_NODE_PROMPT_MENU, IVR_NODE_PROMPT_COLLECT, IVR_NODE_PROMPT_PLAY, IVR_NODE_EXPERT, IVR_NODE_BRANCH, IVR_NODE_ASSIGN, IVR_NODE_TRANSFER, IVR_NODE_HANGUP, IVR_NODE_COLOR_MAPPING } from "./ivr_node_constants.js";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers, normalizeClass, toDisplayString, createCommentVNode, renderSlot, createVNode, withCtx, createElementVNode, createBlock, resolveDynamicComponent, withModifiers } from "vue";
+/* empty css              */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+import DtCard from "../../../components/card/card.vue.js";
+import DtButton from "../../../components/button/button.vue.js";
+import DtDropdown from "../../../components/dropdown/dropdown.vue.js";
+const typeToIcon = /* @__PURE__ */ new Map([
+  [IVR_NODE_PROMPT_MENU, DtIconKeypad],
+  [IVR_NODE_PROMPT_COLLECT, DtIconDialer],
+  [IVR_NODE_PROMPT_PLAY, DtIconVolume2],
+  [IVR_NODE_EXPERT, DtIconExpertNode],
+  [IVR_NODE_BRANCH, DtIconBranch],
+  [IVR_NODE_GO_TO, DtIconCallMerge],
+  [IVR_NODE_ASSIGN, DtIconChevronsRight],
+  [IVR_NODE_TRANSFER, DtIconTransfer],
+  [IVR_NODE_HANGUP, DtIconPhoneHangUp]
+]);
+const _sfc_main = {
+  name: "DtRecipeIvrNode",
+  components: {
+    DtCard,
+    DtButton,
+    DtDropdown,
+    DtIconKeypad,
+    DtIconDialer,
+    DtIconVolume2,
+    DtIconExpertNode,
+    DtIconBranch,
+    DtIconCallMerge,
+    DtIconChevronsRight,
+    DtIconTransfer,
+    DtIconPhoneHangUp,
+    DtIconMoreVertical
+  },
+  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: {
+    nodeListeners() {
+      return {
+        click: (e) => this.$emit("click", e)
+      };
+    },
+    nodeIcon() {
+      return typeToIcon.get(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;
+    }
+  }
+};
+const _hoisted_1 = { class: "ivr_node__header-left" };
+const _hoisted_2 = {
+  class: "ivr_node__label",
+  "data-qa": "ivr-node-label"
+};
+const _hoisted_3 = { class: "ivr_node__dropdown-list" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = resolveComponent("dt-button");
+  const _component_dt_icon_more_vertical = resolveComponent("dt-icon-more-vertical");
+  const _component_dt_dropdown = resolveComponent("dt-dropdown");
+  const _component_dt_card = resolveComponent("dt-card");
+  return openBlock(), createElementBlock("div", mergeProps({ class: "ivr_node" }, toHandlers($options.nodeListeners, true)), [
+    $props.dtmfKey ? (openBlock(), createElementBlock("div", {
+      key: 0,
+      "data-qa": "dt-top-connector-dtmf",
+      class: normalizeClass(["ivr-connector ivr-connector--dtmf", { "ivr-connector--dtmf--selected": $props.isSelected }])
+    }, toDisplayString($props.dtmfKey), 3)) : createCommentVNode("", true),
+    _ctx.$slots.connector ? renderSlot(_ctx.$slots, "connector", { key: 1 }) : createCommentVNode("", true),
+    !$props.dtmfKey && !_ctx.$slots.connector ? (openBlock(), createElementBlock("div", {
+      key: 2,
+      "data-qa": "dt-top-connector",
+      class: normalizeClass(["ivr-connector", { "ivr-connector--selected": $props.isSelected }])
+    }, null, 2)) : createCommentVNode("", true),
+    createVNode(_component_dt_card, {
+      "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
+      "container-class": [
+        "d-w100p",
+        { "d-ba d-bar8 d-baw4": $props.isSelected },
+        $options.headerColor
+      ],
+      "header-class": [
+        "d-mtn1",
+        "d-bt",
+        "d-btw4",
+        "d-p0",
+        $options.headerColor,
+        { "d-btr4": !$props.isSelected }
+      ]
+    }, {
+      header: withCtx(() => [
+        createElementVNode("div", _hoisted_1, [
+          createVNode(_component_dt_button, {
+            "aria-label": $props.nodeType,
+            importance: "clear",
+            kind: "muted",
+            "data-qa": "dt-ivr-node-icon"
+          }, {
+            icon: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent($options.nodeIcon), {
+                size: "200",
+                class: normalizeClass(["", { "ivr_node__goto_icon": $options.isGotoNode }])
+              }, null, 8, ["class"]))
+            ]),
+            _: 1
+          }, 8, ["aria-label"]),
+          createElementVNode("p", _hoisted_2, toDisplayString($props.nodeLabel), 1)
+        ]),
+        createVNode(_component_dt_dropdown, {
+          open: $data.isOpen,
+          "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $data.isOpen = $event),
+          placement: "bottom"
+        }, {
+          anchor: withCtx(() => [
+            createVNode(_component_dt_button, {
+              importance: "clear",
+              kind: "muted",
+              "aria-label": $props.menuButtonAriaLabel,
+              onClick: withModifiers($options.openMenu, ["stop", "prevent"])
+            }, {
+              icon: withCtx(() => [
+                createVNode(_component_dt_icon_more_vertical, { size: "200" })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "onClick"])
+          ]),
+          list: withCtx(({ close }) => [
+            createElementVNode("div", _hoisted_3, [
+              renderSlot(_ctx.$slots, "menuItems", { close })
+            ])
+          ]),
+          _: 3
+        }, 8, ["open"])
+      ]),
+      content: withCtx(() => [
+        renderSlot(_ctx.$slots, "content")
+      ]),
+      _: 3
+    }, 8, ["container-class", "header-class"])
+  ], 16);
+}
+const ivr_node = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  ivr_node as default
+};
+//# sourceMappingURL=ivr_node.vue.js.map

package/dist/vue3/recipes/cards/ivr_node/ivr_node.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ivr_node.vue.js","sources":["../../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    class=\"ivr_node\"\n    v-on=\"nodeListeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"ivr-connector ivr-connector--dtmf\"\n      :class=\"{ 'ivr-connector--dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"ivr-connector\"\n      :class=\"{ 'ivr-connector--selected': isSelected }\"\n    />\n    <dt-card\n      content-class=\"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12\"\n      :container-class=\"[\n        'd-w100p',\n        { 'd-ba d-bar8 d-baw4': isSelected },\n        headerColor,\n      ]\"\n      :header-class=\"[\n        'd-mtn1',\n        'd-bt',\n        'd-btw4',\n        'd-p0',\n        headerColor,\n        { 'd-btr4': !isSelected },\n      ]\"\n    >\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"ivr_node__header-left\">\n          <dt-button\n            :aria-label=\"nodeType\"\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n          >\n            <template #icon>\n              <component\n                :is=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'ivr_node__goto_icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"ivr_node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          v-model:open=\"isOpen\"\n          placement=\"bottom\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\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 {\n  DtIconKeypad,\n  DtIconDialer,\n  DtIconVolume2,\n  DtIconExpertNode,\n  DtIconBranch,\n  DtIconCallMerge,\n  DtIconChevronsRight,\n  DtIconTransfer,\n  DtIconPhoneHangUp,\n  DtIconMoreVertical,\n} from '@dialpad/dialtone-icons/vue3';\nimport {\n  IVR_NODE_COLOR_MAPPING,\n  IVR_NODE_PROMPT_MENU,\n  IVR_NODE_PROMPT_COLLECT,\n  IVR_NODE_PROMPT_PLAY,\n  IVR_NODE_EXPERT,\n  IVR_NODE_BRANCH,\n  IVR_NODE_GO_TO,\n  IVR_NODE_ASSIGN,\n  IVR_NODE_TRANSFER,\n  IVR_NODE_HANGUP,\n} from './ivr_node_constants';\n\nconst typeToIcon = new Map([\n  [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n  [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n  [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n  [IVR_NODE_EXPERT, DtIconExpertNode],\n  [IVR_NODE_BRANCH, DtIconBranch],\n  [IVR_NODE_GO_TO, DtIconCallMerge],\n  [IVR_NODE_ASSIGN, DtIconChevronsRight],\n  [IVR_NODE_TRANSFER, DtIconTransfer],\n  [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIconKeypad,\n    DtIconDialer,\n    DtIconVolume2,\n    DtIconExpertNode,\n    DtIconBranch,\n    DtIconCallMerge,\n    DtIconChevronsRight,\n    DtIconTransfer,\n    DtIconPhoneHangUp,\n    DtIconMoreVertical,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeListeners () {\n      return {\n        click: (e) => this.$emit('click', e),\n      };\n    },\n\n    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    headerColor () {\n      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.ivr_node {\n  width: 280px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  cursor: pointer;\n\n  &__header-left {\n    display: flex;\n    align-items: center;\n  }\n\n  &__label {\n    font-size: var(--dt-font-size-200);\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  &__dropdown-list {\n    width: var(--dt-size-825);\n  }\n}\n\n.ivr_node__goto_icon {\n  transform: rotate(90deg);\n}\n\n.ivr-connector {\n  z-index: var(--zi-base);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-color: var(--dt-color-purple-600);\n  background-color: var(--dt-color-purple-600);\n  width: var(--dt-size-400);\n  height: var(--dt-size-400);\n  border-radius: var(--dt-size-radius-circle);\n  margin-bottom: var(--dt-space-300-negative);\n\n  &--selected {\n    margin-bottom: var(--dt-space-400-negative);\n  }\n\n  &.ivr-connector--dtmf {\n    width: var(--dt-size-550);\n    height: var(--dt-size-550);\n    margin-bottom: var(--dt-space-450-negative);\n    color: var(--dt-color-neutral-white);\n    font-size: var(--dt-font-size-200);\n\n    &--selected {\n      margin-bottom: var(--dt-space-500-negative);\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_createCommentVNode","_renderSlot","_createVNode","_createElementVNode","_createBlock","_resolveDynamicComponent","_toDisplayString","_withModifiers","_withCtx"],"mappings":"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"}

package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ivr_node_constants.cjs","sources":["../../../../recipes/cards/ivr_node/ivr_node_constants.js"],"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"],"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;AAEY,MAAC,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;;;;;;;;;;;;;"}

package/dist/vue3/recipes/cards/ivr_node/ivr_node_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ivr_node_constants.js","sources":["../../../../recipes/cards/ivr_node/ivr_node_constants.js"],"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"],"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;AAEY,MAAC,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;"}

package/dist/vue3/recipes/chips/grouped_chip/grouped_chip.vue.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const common_utils = require("../../../common/utils.cjs");
+const vue = require("vue");
+;/* empty css                    */
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+const chip = require("../../../components/chip/chip.vue.cjs");
+const _sfc_main = {
+  name: "DtRecipeGroupedChip",
+  components: {
+    DtChip: chip.default
+  },
+  data() {
+    return {
+      hasSlotContent: common_utils.hasSlotContent
+    };
+  }
+};
+const _hoisted_1 = {
+  "data-qa": "grouped-chip",
+  class: "dt-grouped-chip"
+};
+const _hoisted_2 = {
+  key: 0,
+  "data-qa": "left-grouped-chip-icon"
+};
+const _hoisted_3 = {
+  key: 0,
+  "data-qa": "left-grouped-chip-content"
+};
+const _hoisted_4 = {
+  key: 0,
+  "data-qa": "right-grouped-chip-icon"
+};
+const _hoisted_5 = {
+  key: 0,
+  "data-qa": "right-grouped-chip-content"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_chip = vue.resolveComponent("dt-chip");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.createVNode(_component_dt_chip, {
+      "hide-close": true,
+      interactive: false,
+      "content-class": "d-fs100",
+      size: "xs",
+      "grouped-chip": true,
+      class: "dt-chip-content dt-chip-content--left"
+    }, vue.createSlots({
+      default: vue.withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.leftContent) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+          vue.renderSlot(_ctx.$slots, "leftContent")
+        ])) : vue.createCommentVNode("", true)
+      ]),
+      _: 2
+    }, [
+      $data.hasSlotContent(_ctx.$slots.leftIcon) ? {
+        name: "icon",
+        fn: vue.withCtx(() => [
+          $data.hasSlotContent(_ctx.$slots.leftIcon) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+            vue.renderSlot(_ctx.$slots, "leftIcon")
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1024),
+    vue.createVNode(_component_dt_chip, {
+      "hide-close": true,
+      interactive: false,
+      "content-class": "d-fs100",
+      size: "xs",
+      "grouped-chip": true,
+      class: "dt-chip-content dt-chip-content--right"
+    }, {
+      icon: vue.withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.rightIcon) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.renderSlot(_ctx.$slots, "rightIcon")
+        ])) : vue.createCommentVNode("", true)
+      ]),
+      default: vue.withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.rightContent) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          vue.renderSlot(_ctx.$slots, "rightContent")
+        ])) : vue.createCommentVNode("", true)
+      ]),
+      _: 3
+    })
+  ]);
+}
+const grouped_chip = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = grouped_chip;
+//# sourceMappingURL=grouped_chip.vue.cjs.map

package/dist/vue3/recipes/chips/grouped_chip/grouped_chip.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped_chip.vue.cjs","sources":["../../../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"grouped-chip\"\n    class=\"dt-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-grouped-chip {\n  display: inline-flex;\n  white-space: nowrap;\n  background-color: unset;\n  background-image: unset;\n}\n\n.dt-chip-content {\n  font-variant-numeric: tabular-nums;\n\n  &--left {\n    border-top-left-radius: var(--dt-size-radius-pill);\n    border-bottom-left-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-surface-moderate-opaque);\n    max-width: var(--dt-size-730);\n  }\n\n  &--right {\n    border-top-right-radius: var(--dt-size-radius-pill);\n    border-bottom-right-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-purple-200);\n    max-width: var(--dt-size-730);\n  }\n}\n</style>\n"],"names":["DtChip","hasSlotContent","_openBlock","_createElementBlock","_createVNode","_createSlots","_renderSlot","_createCommentVNode","_withCtx"],"mappings":";;;;;;;AAuEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA,KAAM;AAAA,EACP;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC,aAAc;AAAA;EAEjB;AACH;;EAjFI,WAAQ;AAAA,EACR,OAAM;;;EAHV,KAAA;AAAA,EAoBU,WAAQ;;;EApBlB,KAAA;AAAA,EA4BU,WAAQ;;;EA5BlB,KAAA;AAAA,EAgDU,WAAQ;;;EAhDlB,KAAA;AAAA,EAyDU,WAAQ;;;;AAxDhB,SAAAC,cAAA,GAAAC,uBA+DM,OA/DN,YA+DM;AAAA,IA3DJC,IAAAA,YA6BU,oBAAA;AAAA,MA5BP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA,IAXZ,GAAAC,gBAAA;AAAA,MAyBiB,qBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,WAAW,KADzCH,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJG,eAA2B,KAAA,QAAA,aAAA;AAAA,cA/BrCC,IAAA,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;MAcc,MAAc,eAAC,KAAM,OAAC,QAAQ;QAd5C,MAeS;AAAA,QAfT,IAAAC,IAAA,QAkBQ,MAKM;AAAA,UAJE,MAAc,eAAC,KAAM,OAAC,QAAQ,KADtCN,IAAAA,aAAAC,IAAAA,mBAKM,OALN,YAKM;AAAA,YADJG,eAAwB,KAAA,QAAA,UAAA;AAAA,gBAtBlCC,IAAA,mBAAA,IAAA,IAAA;AAAA;QAAA,KAAA;AAAA,UAAA;AAAA;IAqCIH,IAAAA,YA0BU,oBAAA;AAAA,MAzBP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAEK,kBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,SAAS,KADvCF,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJG,eAAyB,KAAA,QAAA,WAAA;AAAA,cAnDnCC,IAAA,mBAAA,IAAA,IAAA;AAAA;MAsDiB,qBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,YAAY,KAD1CL,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJG,eAA4B,KAAA,QAAA,cAAA;AAAA,cA5DtCC,IAAA,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;;;;;"}