@dialpad/dialtone 9.71.0-beta.1 → 9.71.0

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

@@ -0,0 +1,189 @@
+import { IVR_NODE_ICON_TYPES, IVR_NODE_GO_TO, IVR_NODE_COLOR_MAPPING } from "./ivr_node_constants.js";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers, normalizeClass, toDisplayString, createCommentVNode, renderSlot, createVNode, withCtx, createElementVNode, 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";
+import DtIcon from "../../../components/icon/icon.vue.js";
+const _sfc_main = {
+  name: "DtRecipeIvrNode",
+  components: {
+    DtCard,
+    DtButton,
+    DtDropdown,
+    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: {
+    nodeListeners() {
+      return {
+        click: (e) => this.$emit("click", e)
+      };
+    },
+    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;
+    }
+  }
+};
+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_icon = resolveComponent("dt-icon");
+  const _component_dt_button = resolveComponent("dt-button");
+  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(() => [
+              createVNode(_component_dt_icon, {
+                name: $options.nodeIcon,
+                size: "200",
+                class: normalizeClass(["", { "ivr_node__goto_icon": $options.isGotoNode }])
+              }, null, 8, ["name", "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, {
+                  name: "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              <dt-icon\n                :name=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'ivr_node__goto_icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"ivr_node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          v-model:open=\"isOpen\"\n          placement=\"bottom\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"more-vertical\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"ivr_node__dropdown-list\">\n              <slot\n                name=\"menuItems\"\n                :close=\"close\"\n              />\n            </div>\n          </template>\n        </dt-dropdown>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </dt-card>\n  </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport { DtIcon } from '@/components/icon';\nimport {\n  IVR_NODE_ICON_TYPES, IVR_NODE_COLOR_MAPPING, IVR_NODE_GO_TO,\n} from './ivr_node_constants';\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIcon,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeListeners () {\n      return {\n        click: (e) => this.$emit('click', e),\n      };\n    },\n\n    nodeIcon () {\n      return IVR_NODE_ICON_TYPES[this.nodeType];\n    },\n\n    headerColor () {\n      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.ivr_node {\n  width: 280px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  cursor: pointer;\n\n  &__header-left {\n    display: flex;\n    align-items: center;\n  }\n\n  &__label {\n    font-size: var(--dt-font-size-200);\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  &__dropdown-list {\n    width: var(--dt-size-825);\n  }\n}\n\n.ivr_node__goto_icon {\n  transform: rotate(90deg);\n}\n\n.ivr-connector {\n  z-index: var(--zi-base);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-color: var(--dt-color-purple-600);\n  background-color: var(--dt-color-purple-600);\n  width: var(--dt-size-400);\n  height: var(--dt-size-400);\n  border-radius: var(--dt-size-radius-circle);\n  margin-bottom: var(--dt-space-300-negative);\n\n  &--selected {\n    margin-bottom: var(--dt-space-400-negative);\n  }\n\n  &.ivr-connector--dtmf {\n    width: var(--dt-size-550);\n    height: var(--dt-size-550);\n    margin-bottom: var(--dt-space-450-negative);\n    color: var(--dt-color-neutral-white);\n    font-size: var(--dt-font-size-200);\n\n    &--selected {\n      margin-bottom: var(--dt-space-500-negative);\n    }\n  }\n}\n</style>\n"],"names":["_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot","_createVNode","_createElementVNode","_toDisplayString","_withCtx"],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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_ASSIGN = "assign";
+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_ASSIGN]: "chevrons-right",
+  [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",
+  [IVR_NODE_ASSIGN]: "Assign"
+};
+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_ASSIGN]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,
+  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL
+};
+exports.IVR_NODE_ASSIGN = IVR_NODE_ASSIGN;
+exports.IVR_NODE_BRANCH = IVR_NODE_BRANCH;
+exports.IVR_NODE_COLOR_MAPPING = IVR_NODE_COLOR_MAPPING;
+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_constants.cjs.map

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

@@ -0,0 +1,71 @@
+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_ASSIGN = "assign";
+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_ASSIGN]: "chevrons-right",
+  [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",
+  [IVR_NODE_ASSIGN]: "Assign"
+};
+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_ASSIGN]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,
+  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL
+};
+export {
+  IVR_NODE_ASSIGN,
+  IVR_NODE_BRANCH,
+  IVR_NODE_COLOR_MAPPING,
+  IVR_NODE_EXPERT,
+  IVR_NODE_GO_TO,
+  IVR_NODE_HANGUP,
+  IVR_NODE_ICON_TYPES,
+  IVR_NODE_LABELS,
+  IVR_NODE_PROMPT_COLLECT,
+  IVR_NODE_PROMPT_MENU,
+  IVR_NODE_PROMPT_PLAY,
+  IVR_NODE_TRANSFER
+};
+//# sourceMappingURL=ivr_node_constants.js.map

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,90 @@
+"use strict";
+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
+  },
+  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(_sfc_main, [["render", _sfc_render]]);
+module.exports = 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","_renderSlot"],"mappings":";;;;;;AAuEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA;AAAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC,aAAc;AAAA;EAEjB;AACH;;EAjFI,WAAQ;AAAA,EACR,OAAM;;;;EAiBA,WAAQ;;;;EAQR,WAAQ;;;;EAoBR,WAAQ;;;;EASR,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;MAcK,qBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,WAAW,KADzCF,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJE,eAA2B,KAAA,QAAA,aAAA;AAAA;;;;MAjBvB,MAAc,eAAC,KAAM,OAAC,QAAQ;cACnC;AAAA,wBAGD,MAKM;AAAA,UAJE,MAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,IAAAA,aAAAC,IAAAA,mBAKM,OALN,YAKM;AAAA,YADJE,eAAwB,KAAA,QAAA,UAAA;AAAA;;;;;IAe9BD,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,UADJE,eAAyB,KAAA,QAAA,WAAA;AAAA;;MAGlB,qBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,YAAY,KAD1CH,IAAAA,aAAAC,IAAAA,mBAMM,OANN,YAMM;AAAA,UADJE,eAA4B,KAAA,QAAA,cAAA;AAAA;;;;;;;;"}

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

@@ -0,0 +1,91 @@
+import { hasSlotContent } from "../../../common/utils.js";
+import { resolveComponent, openBlock, createElementBlock, createVNode, createSlots, withCtx, renderSlot, createCommentVNode } from "vue";
+/* empty css                  */
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
+import DtChip from "../../../components/chip/chip.vue.js";
+const _sfc_main = {
+  name: "DtRecipeGroupedChip",
+  components: {
+    DtChip
+  },
+  data() {
+    return {
+      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 = resolveComponent("dt-chip");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    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"
+    }, createSlots({
+      default: withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.leftContent) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "leftContent")
+        ])) : createCommentVNode("", true)
+      ]),
+      _: 2
+    }, [
+      $data.hasSlotContent(_ctx.$slots.leftIcon) ? {
+        name: "icon",
+        fn: withCtx(() => [
+          $data.hasSlotContent(_ctx.$slots.leftIcon) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            renderSlot(_ctx.$slots, "leftIcon")
+          ])) : createCommentVNode("", true)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1024),
+    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: withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.rightIcon) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          renderSlot(_ctx.$slots, "rightIcon")
+        ])) : createCommentVNode("", true)
+      ]),
+      default: withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.rightContent) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          renderSlot(_ctx.$slots, "rightContent")
+        ])) : createCommentVNode("", true)
+      ]),
+      _: 3
+    })
+  ]);
+}
+const grouped_chip = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  grouped_chip as default
+};
+//# sourceMappingURL=grouped_chip.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grouped_chip.vue.js","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":["_openBlock","_createElementBlock","_createVNode","_renderSlot"],"mappings":";;;;;AAuEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;EAjFI,WAAQ;AAAA,EACR,OAAM;;;;EAiBA,WAAQ;;;;EAQR,WAAQ;;;;EAoBR,WAAQ;;;;EASR,WAAQ;;;;AAxDhB,SAAAA,UAAA,GAAAC,mBA+DM,OA/DN,YA+DM;AAAA,IA3DJC,YA6BU,oBAAA;AAAA,MA5BP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAcK,iBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,WAAW,KADzCF,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJE,WAA2B,KAAA,QAAA,aAAA;AAAA;;;;MAjBvB,MAAc,eAAC,KAAM,OAAC,QAAQ;cACnC;AAAA,oBAGD,MAKM;AAAA,UAJE,MAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,aAAAC,mBAKM,OALN,YAKM;AAAA,YADJE,WAAwB,KAAA,QAAA,UAAA;AAAA;;;;;IAe9BD,YA0BU,oBAAA;AAAA,MAzBP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAEK,cACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,SAAS,KADvCF,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJE,WAAyB,KAAA,QAAA,WAAA;AAAA;;MAGlB,iBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,YAAY,KAD1CH,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJE,WAA4B,KAAA,QAAA,cAAA;AAAA;;;;;;;"}