@dialpad/dialtone 9.99.0 → 9.100.0

package/dist/vue2/components/item_layout/item_layout.vue.cjs

@@ -18,12 +18,74 @@ const _sfc_main = {
     unstyled: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Set the class for the left section.
+     */
+    leftClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the content section.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the title section.
+     */
+    titleClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the subtitle section.
+     */
+    subtitleClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the bottom section.
+     */
+    bottomClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the right section.
+     */
+    rightClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the selected section.
+     */
+    selectedClass: {
+      type: String,
+      default: ""
+    }
+  },
+  methods: {
+    /**
+     * Generate dynamic grid template columns
+     */
+    dynamicGridTemplateColumns() {
+      const leftContentColumn = this.$slots.left ? "auto" : "";
+      const rightContentColumn = this.$slots.right ? "auto" : "";
+      const selectedContentColumn = this.$slots.selected ? "auto" : "";
+      return `
+        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};
+      `;
     }
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c(_vm.as, { tag: "component", class: _vm.unstyled ? "d-item-layout--custom" : "d-item-layout" }, [_vm.$slots.left ? _c("section", { staticClass: "d-item-layout--left", attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [_vm._t("left")], 2) : _vm._e(), _c("section", { staticClass: "d-item-layout--content", attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [_vm.$slots.default ? _c("div", { staticClass: "d-item-layout--title", attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [_vm._t("default")], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { class: ["d-item-layout--subtitle", { "d-item-layout--subtitle--with-title": _vm.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e(), _vm.$slots.bottom ? _c("div", { staticClass: "d-item-layout--bottom", attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()]), _vm.$slots.right ? _c("section", { staticClass: "d-item-layout--right", attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [_vm._t("right")], 2) : _vm._e(), _vm.$slots.selected ? _c("section", { staticClass: "d-item-layout--selected", attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [_vm._t("selected")], 2) : _vm._e()]);
+  return _c(_vm.as, { tag: "component", class: _vm.unstyled ? "d-item-layout--custom" : "d-item-layout", style: _vm.unstyled && _vm.dynamicGridTemplateColumns() }, [_vm.$slots.left ? _c("section", { class: [_vm.leftClass, "d-item-layout__left"], attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [_vm._t("left")], 2) : _vm._e(), _c("section", { class: [_vm.contentClass, "d-item-layout__content"], attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [_vm.$slots.default ? _c("div", { class: [_vm.titleClass, "d-item-layout__title"], attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [_vm._t("default")], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { class: [_vm.subtitleClass, "d-item-layout__subtitle", { "d-item-layout__subtitle-with-title": _vm.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e(), _vm.$slots.bottom ? _c("div", { class: [_vm.bottomClass, "d-item-layout__bottom"], attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()]), _vm.$slots.right ? _c("section", { class: [_vm.rightClass, "d-item-layout__right"], attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [_vm._t("right")], 2) : _vm._e(), _vm.$slots.selected ? _c("section", { class: [_vm.selectedClass, "d-item-layout__selected"], attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [_vm._t("selected")], 2) : _vm._e()]);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(

package/dist/vue2/components/item_layout/item_layout.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"item_layout.vue.cjs","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n  >\n    <section\n      v-if=\"$slots.left\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      class=\"d-item-layout--left\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      class=\"d-item-layout--content\"\n    >\n      <div\n        v-if=\"$slots.default\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        class=\"d-item-layout--title\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"$slots.subtitle\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"['d-item-layout--subtitle', { 'd-item-layout--subtitle--with-title': $slots.default }]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        class=\"d-item-layout--bottom\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"$slots.right\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      class=\"d-item-layout--right\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"$slots.selected\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      class=\"d-item-layout--selected\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;AAmEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;"}
+{"version":3,"file":"item_layout.vue.cjs","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"$slots.left\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[leftClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"$slots.default\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"$slots.subtitle\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[subtitleClass, 'd-item-layout__subtitle', { 'd-item-layout__subtitle-with-title': $slots.default }]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[bottomClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"$slots.right\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[rightClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"$slots.selected\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the left section.\n     */\n    leftClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the bottom section.\n     */\n    bottomClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the right section.\n     */\n    rightClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = this.$slots.left ? 'auto' : '';\n      const rightContentColumn = this.$slots.right ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;AAoEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA,IAIA,6BAAA;AACA,YAAA,oBAAA,KAAA,OAAA,OAAA,SAAA;AACA,YAAA,qBAAA,KAAA,OAAA,QAAA,SAAA;AACA,YAAA,wBAAA,KAAA,OAAA,WAAA,SAAA;AAEA,aAAA;AAAA,iCACA,iBAAA,QAAA,kBAAA,IAAA,qBAAA;AAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/vue2/components/item_layout/item_layout.vue.js

@@ -16,12 +16,74 @@ const _sfc_main = {
     unstyled: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Set the class for the left section.
+     */
+    leftClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the content section.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the title section.
+     */
+    titleClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the subtitle section.
+     */
+    subtitleClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the bottom section.
+     */
+    bottomClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the right section.
+     */
+    rightClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the selected section.
+     */
+    selectedClass: {
+      type: String,
+      default: ""
+    }
+  },
+  methods: {
+    /**
+     * Generate dynamic grid template columns
+     */
+    dynamicGridTemplateColumns() {
+      const leftContentColumn = this.$slots.left ? "auto" : "";
+      const rightContentColumn = this.$slots.right ? "auto" : "";
+      const selectedContentColumn = this.$slots.selected ? "auto" : "";
+      return `
+        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};
+      `;
     }
   }
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c(_vm.as, { tag: "component", class: _vm.unstyled ? "d-item-layout--custom" : "d-item-layout" }, [_vm.$slots.left ? _c("section", { staticClass: "d-item-layout--left", attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [_vm._t("left")], 2) : _vm._e(), _c("section", { staticClass: "d-item-layout--content", attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [_vm.$slots.default ? _c("div", { staticClass: "d-item-layout--title", attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [_vm._t("default")], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { class: ["d-item-layout--subtitle", { "d-item-layout--subtitle--with-title": _vm.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e(), _vm.$slots.bottom ? _c("div", { staticClass: "d-item-layout--bottom", attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()]), _vm.$slots.right ? _c("section", { staticClass: "d-item-layout--right", attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [_vm._t("right")], 2) : _vm._e(), _vm.$slots.selected ? _c("section", { staticClass: "d-item-layout--selected", attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [_vm._t("selected")], 2) : _vm._e()]);
+  return _c(_vm.as, { tag: "component", class: _vm.unstyled ? "d-item-layout--custom" : "d-item-layout", style: _vm.unstyled && _vm.dynamicGridTemplateColumns() }, [_vm.$slots.left ? _c("section", { class: [_vm.leftClass, "d-item-layout__left"], attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [_vm._t("left")], 2) : _vm._e(), _c("section", { class: [_vm.contentClass, "d-item-layout__content"], attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [_vm.$slots.default ? _c("div", { class: [_vm.titleClass, "d-item-layout__title"], attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [_vm._t("default")], 2) : _vm._e(), _vm.$slots.subtitle ? _c("div", { class: [_vm.subtitleClass, "d-item-layout__subtitle", { "d-item-layout__subtitle-with-title": _vm.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [_vm._t("subtitle")], 2) : _vm._e(), _vm.$slots.bottom ? _c("div", { class: [_vm.bottomClass, "d-item-layout__bottom"], attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [_vm._t("bottom")], 2) : _vm._e()]), _vm.$slots.right ? _c("section", { class: [_vm.rightClass, "d-item-layout__right"], attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [_vm._t("right")], 2) : _vm._e(), _vm.$slots.selected ? _c("section", { class: [_vm.selectedClass, "d-item-layout__selected"], attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [_vm._t("selected")], 2) : _vm._e()]);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(

package/dist/vue2/components/item_layout/item_layout.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"item_layout.vue.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n  >\n    <section\n      v-if=\"$slots.left\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      class=\"d-item-layout--left\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      class=\"d-item-layout--content\"\n    >\n      <div\n        v-if=\"$slots.default\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        class=\"d-item-layout--title\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"$slots.subtitle\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"['d-item-layout--subtitle', { 'd-item-layout--subtitle--with-title': $slots.default }]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        class=\"d-item-layout--bottom\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"$slots.right\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      class=\"d-item-layout--right\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"$slots.selected\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      class=\"d-item-layout--selected\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";AAmEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}
+{"version":3,"file":"item_layout.vue.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"$slots.left\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[leftClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"$slots.default\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"$slots.subtitle\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[subtitleClass, 'd-item-layout__subtitle', { 'd-item-layout__subtitle-with-title': $slots.default }]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[bottomClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"$slots.right\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[rightClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"$slots.selected\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the left section.\n     */\n    leftClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the bottom section.\n     */\n    bottomClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the right section.\n     */\n    rightClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = this.$slots.left ? 'auto' : '';\n      const rightContentColumn = this.$slots.right ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";AAoEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA,IAIA,6BAAA;AACA,YAAA,oBAAA,KAAA,OAAA,OAAA,SAAA;AACA,YAAA,qBAAA,KAAA,OAAA,QAAA,SAAA;AACA,YAAA,wBAAA,KAAA,OAAA,WAAA,SAAA;AAEA,aAAA;AAAA,iCACA,iBAAA,QAAA,kBAAA,IAAA,qBAAA;AAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/vue2/components/list_item/list_item.vue.cjs

@@ -109,13 +109,9 @@ const _sfc_main = {
     };
   },
   computed: {
-    listItemType() {
-      switch (this.type) {
-        case list_item_constants.LIST_ITEM_TYPES.DEFAULT:
-          return item_layout.default;
-        default:
-          return null;
-      }
+    isDefaultType() {
+      if (this.type === list_item_constants.LIST_ITEM_TYPES.DEFAULT) return true;
+      return false;
     },
     listItemListeners() {
       return {
@@ -170,16 +166,19 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c(_vm.elementType, _vm._g({ tag: "component", class: ["d-list-item", {
-    "d-list-item--focusable": _vm.isFocusable,
-    "d-list-item--highlighted": _vm.isHighlighted,
-    "d-list-item--static": !_vm.isHoverable
-  }], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.listItemType ? _c(_vm.listItemType, { tag: "component", scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
+  return _c(_vm.elementType, _vm._g({ tag: "component", class: [
+    "d-list-item",
+    {
+      "d-list-item--focusable": _vm.isFocusable,
+      "d-list-item--highlighted": _vm.isHighlighted,
+      "d-list-item--static": !_vm.isHoverable
+    }
+  ], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.isDefaultType ? _c("dt-item-layout", { staticClass: "d-list-item__wrapper", attrs: { "unstyled": "", "left-class": "d-list-item__left", "content-class": "d-list-item__content", "title-class": "d-list-item__title", "subtitle-class": "d-list-item__subtitle", "bottom-class": "d-list-item__bottom", "right-class": "d-list-item__right", "selected-class": "d-list-item__selected" }, scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
     return { key: slotName, fn: function() {
       return [_vm._t(slotName)];
     }, proxy: true };
   }), _vm.selected ? { key: "selected", fn: function() {
-    return [_c("dt-icon-check", { staticClass: "d-list-item--selected-icon", attrs: { "size": "400" } })];
+    return [_c("dt-icon-check", { attrs: { "size": "400" } })];
   }, proxy: true } : null], null, true) }) : _vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];

package/dist/vue2/components/list_item/list_item.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['d-list-item', {\n      'd-list-item--focusable': isFocusable,\n      'd-list-item--highlighted': isHighlighted,\n      'd-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check\n          size=\"400\"\n          class=\"d-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue2';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES"],"mappings":"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"}
+{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      class=\"d-list-item__wrapper\"\n      left-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      bottom-class=\"d-list-item__bottom\"\n      right-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"400\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue2';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      if (this.type === LIST_ITEM_TYPES.DEFAULT) return true;\n      return false;\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES"],"mappings":"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"}

package/dist/vue2/components/list_item/list_item.vue.js

@@ -107,13 +107,9 @@ const _sfc_main = {
     };
   },
   computed: {
-    listItemType() {
-      switch (this.type) {
-        case LIST_ITEM_TYPES.DEFAULT:
-          return DtItemLayout;
-        default:
-          return null;
-      }
+    isDefaultType() {
+      if (this.type === LIST_ITEM_TYPES.DEFAULT) return true;
+      return false;
     },
     listItemListeners() {
       return {
@@ -168,16 +164,19 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c(_vm.elementType, _vm._g({ tag: "component", class: ["d-list-item", {
-    "d-list-item--focusable": _vm.isFocusable,
-    "d-list-item--highlighted": _vm.isHighlighted,
-    "d-list-item--static": !_vm.isHoverable
-  }], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.listItemType ? _c(_vm.listItemType, { tag: "component", scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
+  return _c(_vm.elementType, _vm._g({ tag: "component", class: [
+    "d-list-item",
+    {
+      "d-list-item--focusable": _vm.isFocusable,
+      "d-list-item--highlighted": _vm.isHighlighted,
+      "d-list-item--static": !_vm.isHoverable
+    }
+  ], attrs: { "id": _vm.id, "tabindex": _vm.isFocusable ? 0 : -1, "role": _vm.role, "aria-selected": _vm.role === "listitem" ? void 0 : _vm.isHighlighted } }, _vm.listItemListeners), [_vm.isDefaultType ? _c("dt-item-layout", { staticClass: "d-list-item__wrapper", attrs: { "unstyled": "", "left-class": "d-list-item__left", "content-class": "d-list-item__content", "title-class": "d-list-item__title", "subtitle-class": "d-list-item__subtitle", "bottom-class": "d-list-item__bottom", "right-class": "d-list-item__right", "selected-class": "d-list-item__selected" }, scopedSlots: _vm._u([_vm._l(_vm.$slots, function(_, slotName) {
     return { key: slotName, fn: function() {
       return [_vm._t(slotName)];
     }, proxy: true };
   }), _vm.selected ? { key: "selected", fn: function() {
-    return [_c("dt-icon-check", { staticClass: "d-list-item--selected-icon", attrs: { "size": "400" } })];
+    return [_c("dt-icon-check", { attrs: { "size": "400" } })];
   }, proxy: true } : null], null, true) }) : _vm._t("default")], 2);
 };
 var _sfc_staticRenderFns = [];

package/dist/vue2/components/list_item/list_item.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"list_item.vue.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['d-list-item', {\n      'd-list-item--focusable': isFocusable,\n      'd-list-item--highlighted': isHighlighted,\n      'd-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check\n          size=\"400\"\n          class=\"d-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue2';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"list_item.vue.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"[\n      'd-list-item',\n      {\n        'd-list-item--focusable': isFocusable,\n        'd-list-item--highlighted': isHighlighted,\n        'd-list-item--static': !isHoverable,\n      }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <dt-item-layout\n      v-if=\"isDefaultType\"\n      unstyled\n      class=\"d-list-item__wrapper\"\n      left-class=\"d-list-item__left\"\n      content-class=\"d-list-item__content\"\n      title-class=\"d-list-item__title\"\n      subtitle-class=\"d-list-item__subtitle\"\n      bottom-class=\"d-list-item__bottom\"\n      right-class=\"d-list-item__right\"\n      selected-class=\"d-list-item__selected\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check size=\"400\" />\n      </template>\n    </dt-item-layout>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue2';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    isDefaultType () {\n      if (this.type === LIST_ITEM_TYPES.DEFAULT) return true;\n      return false;\n    },\n\n    listItemListeners () {\n      return {\n        ...this.$listeners,\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;AAwDA,MAAA,QAAA,CAAA,YAAA,YAAA,QAAA;AAMA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKA,QAAA;AAAA,IACA,aAAA,EAAA,SAAA,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,MAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAA,MAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,gBAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,OAAA,eAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,2BAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,OAAA,0BAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,UAAA,KAAA,SAAA,gBAAA,QAAA,QAAA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,SAAA,WAAA;AACA,cAAA,CAAA,SAAA,OAAA,EAAA,SAAA,MAAA,KAAA,YAAA,CAAA,GAAA;AACA,iBAAA,QAAA,KAAA;AAAA,UACA;AACA,eAAA,MAAA,WAAA,KAAA;AAAA,QACA;AAAA,QAEA,WAAA,WAAA;AACA,eAAA,aAAA,KAAA;AACA,eAAA,MAAA,aAAA,KAAA;AAAA,QACA;AAAA,QAEA,YAAA,WAAA;AACA,eAAA,aAAA,KAAA;AACA,eAAA,MAAA,cAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AACA,UAAA,KAAA,aAAA;AACA,eAAA,KAAA,eAAA,KAAA,YAAA,IAAA,KAAA,OAAA,KAAA,gBAAA,KAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA,IAEA,cAAA;AAEA,aAAA,KAAA,mBAAA,2BAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AACA,aAAA,KAAA,mBAAA,2BAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA,GAAA;AACA,WAAA,MAAA,SAAA,CAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/dialtone-vue.cjs

@@ -354,6 +354,7 @@ exports.DtRecipeCallbarButtonWithPopover = callbar_button_with_popover.default;
 exports.DtRecipeIvrNode = ivr_node.default;
 exports.IVR_NODE_ASSIGN = ivr_node_constants.IVR_NODE_ASSIGN;
 exports.IVR_NODE_BRANCH = ivr_node_constants.IVR_NODE_BRANCH;
+exports.IVR_NODE_CUSTOMER_DATA = ivr_node_constants.IVR_NODE_CUSTOMER_DATA;
 exports.IVR_NODE_EXPERT = ivr_node_constants.IVR_NODE_EXPERT;
 exports.IVR_NODE_GO_TO = ivr_node_constants.IVR_NODE_GO_TO;
 exports.IVR_NODE_HANGUP = ivr_node_constants.IVR_NODE_HANGUP;

package/dist/vue2/dialtone-vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialtone-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialtone-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/dialtone-vue.js

@@ -106,7 +106,7 @@ import { default as default66 } from "./recipes/buttons/callbar_button/callbar_b
 import { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from "./recipes/buttons/callbar_button/callbar_button_constants.js";
 import { default as default67 } from "./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.js";
 import { default as default68 } from "./recipes/cards/ivr_node/ivr_node.vue.js";
-import { IVR_NODE_ASSIGN, IVR_NODE_BRANCH, 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 } from "./recipes/cards/ivr_node/ivr_node_constants.js";
+import { IVR_NODE_ASSIGN, IVR_NODE_BRANCH, IVR_NODE_CUSTOMER_DATA, 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 } from "./recipes/cards/ivr_node/ivr_node_constants.js";
 import { default as default69 } from "./recipes/chips/grouped_chip/grouped_chip.vue.js";
 import { default as default70 } from "./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js";
 import { CHIP_SIZES, CHIP_TOP_POSITION, MULTI_SELECT_SIZES } from "./recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js";
@@ -277,6 +277,7 @@ export {
   INVALID_COMBINATION,
   IVR_NODE_ASSIGN,
   IVR_NODE_BRANCH,
+  IVR_NODE_CUSTOMER_DATA,
   IVR_NODE_EXPERT,
   IVR_NODE_GO_TO,
   IVR_NODE_HANGUP,

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

@@ -5,6 +5,7 @@ const ivr_node_constants = require("../recipes/cards/ivr_node/ivr_node_constants
 exports.DtRecipeIvrNode = ivr_node.default;
 exports.IVR_NODE_ASSIGN = ivr_node_constants.IVR_NODE_ASSIGN;
 exports.IVR_NODE_BRANCH = ivr_node_constants.IVR_NODE_BRANCH;
+exports.IVR_NODE_CUSTOMER_DATA = ivr_node_constants.IVR_NODE_CUSTOMER_DATA;
 exports.IVR_NODE_EXPERT = ivr_node_constants.IVR_NODE_EXPERT;
 exports.IVR_NODE_GO_TO = ivr_node_constants.IVR_NODE_GO_TO;
 exports.IVR_NODE_HANGUP = ivr_node_constants.IVR_NODE_HANGUP;

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

@@ -1 +1 @@
-{"version":3,"file":"ivr-node.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ivr-node.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

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

@@ -1,9 +1,10 @@
 import { default as default2 } from "../recipes/cards/ivr_node/ivr_node.vue.js";
-import { IVR_NODE_ASSIGN, IVR_NODE_BRANCH, 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 } from "../recipes/cards/ivr_node/ivr_node_constants.js";
+import { IVR_NODE_ASSIGN, IVR_NODE_BRANCH, IVR_NODE_CUSTOMER_DATA, 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 } from "../recipes/cards/ivr_node/ivr_node_constants.js";
 export {
   default2 as DtRecipeIvrNode,
   IVR_NODE_ASSIGN,
   IVR_NODE_BRANCH,
+  IVR_NODE_CUSTOMER_DATA,
   IVR_NODE_EXPERT,
   IVR_NODE_GO_TO,
   IVR_NODE_HANGUP,

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

@@ -14,6 +14,7 @@ const typeToIcon = /* @__PURE__ */ new Map([
   [ivr_node_constants.IVR_NODE_BRANCH, vue2.DtIconBranch],
   [ivr_node_constants.IVR_NODE_GO_TO, vue2.DtIconCallMerge],
   [ivr_node_constants.IVR_NODE_ASSIGN, vue2.DtIconChevronsRight],
+  [ivr_node_constants.IVR_NODE_CUSTOMER_DATA, vue2.DtIconListBullet],
   [ivr_node_constants.IVR_NODE_TRANSFER, vue2.DtIconTransfer],
   [ivr_node_constants.IVR_NODE_HANGUP, vue2.DtIconPhoneHangUp]
 ]);
@@ -32,7 +33,8 @@ const _sfc_main = {
     DtIconChevronsRight: vue2.DtIconChevronsRight,
     DtIconTransfer: vue2.DtIconTransfer,
     DtIconPhoneHangUp: vue2.DtIconPhoneHangUp,
-    DtIconMoreVertical: vue2.DtIconMoreVertical
+    DtIconMoreVertical: vue2.DtIconMoreVertical,
+    DtIconListBullet: vue2.DtIconListBullet
   },
   props: {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"ivr_node.vue.cjs","sources":["../../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-ivr-node',\n      nodeClass,\n    ]\"\n    v-on=\"$listeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n      :class=\"{ 'd-recipe-ivr-node__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=\"d-recipe-ivr-node__connector\"\n      :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n    />\n    <dt-card>\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"d-recipe-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=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"d-recipe-ivr-node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          placement=\"bottom\"\n          :open.sync=\"isOpen\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"d-recipe-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/vue2';\nimport {\n  IVR_NODE_CLASS_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    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    nodeClass () {\n      const { normal, selected } = IVR_NODE_CLASS_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"],"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_CLASS_MAPPING"],"mappings":";;;;;;;;AAkHA,MAAA,aAAA,oBAAA,IAAA;AAAA,EACA,CAAAA,mBAAAA,sBAAAC,KAAAA,YAAA;AAAA,EACA,CAAAC,mBAAAA,yBAAAC,KAAAA,YAAA;AAAA,EACA,CAAAC,mBAAAA,sBAAAC,KAAAA,aAAA;AAAA,EACA,CAAAC,mBAAAA,iBAAAC,KAAAA,gBAAA;AAAA,EACA,CAAAC,mBAAAA,iBAAAC,KAAAA,YAAA;AAAA,EACA,CAAAC,mBAAAA,gBAAAC,KAAAA,eAAA;AAAA,EACA,CAAAC,mBAAAA,iBAAAC,KAAAA,mBAAA;AAAA,EACA,CAAAC,mBAAAA,mBAAAC,KAAAA,cAAA;AAAA,EACA,CAAAC,mBAAAA,iBAAAC,KAAAA,iBAAA;AACA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC,KAAA;AAAA,IACA,UAAAC,OAAA;AAAA,IACA,YAAAC,SAAA;AAAA,IACA,cAAAnB,KAAA;AAAA,IACA,cAAAE,KAAA;AAAA,IACA,eAAAE,KAAA;AAAA,IACA,kBAAAE,KAAA;AAAA,IACA,cAAAE,KAAA;AAAA,IACA,iBAAAE,KAAA;AAAA,IACA,qBAAAE,KAAA;AAAA,IACA,gBAAAE,KAAA;AAAA,IACA,mBAAAE,KAAA;AAAA,IACA,oBAAAI,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,WAAA,IAAA,KAAA,QAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,YAAA,EAAA,QAAA,SAAA,IAAAC,mBAAAA,uBAAA,KAAA,QAAA;AACA,aAAA,KAAA,aAAA,WAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,aAAAZ;IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ivr_node.vue.cjs","sources":["../../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-ivr-node',\n      nodeClass,\n    ]\"\n    v-on=\"$listeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n      :class=\"{ 'd-recipe-ivr-node__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=\"d-recipe-ivr-node__connector\"\n      :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n    />\n    <dt-card>\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"d-recipe-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=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"d-recipe-ivr-node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          placement=\"bottom\"\n          :open.sync=\"isOpen\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"d-recipe-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  DtIconListBullet,\n} from '@dialpad/dialtone-icons/vue2';\nimport {\n  IVR_NODE_CLASS_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  IVR_NODE_CUSTOMER_DATA,\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_CUSTOMER_DATA, DtIconListBullet],\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    DtIconListBullet,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    nodeClass () {\n      const { normal, selected } = IVR_NODE_CLASS_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"],"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_CUSTOMER_DATA","DtIconListBullet","IVR_NODE_TRANSFER","DtIconTransfer","IVR_NODE_HANGUP","DtIconPhoneHangUp","DtCard","DtButton","DtDropdown","DtIconMoreVertical","IVR_NODE_CLASS_MAPPING"],"mappings":";;;;;;;;AAoHA,MAAA,aAAA,oBAAA,IAAA;AAAA,EACA,CAAAA,mBAAAA,sBAAAC,KAAAA,YAAA;AAAA,EACA,CAAAC,mBAAAA,yBAAAC,KAAAA,YAAA;AAAA,EACA,CAAAC,mBAAAA,sBAAAC,KAAAA,aAAA;AAAA,EACA,CAAAC,mBAAAA,iBAAAC,KAAAA,gBAAA;AAAA,EACA,CAAAC,mBAAAA,iBAAAC,KAAAA,YAAA;AAAA,EACA,CAAAC,mBAAAA,gBAAAC,KAAAA,eAAA;AAAA,EACA,CAAAC,mBAAAA,iBAAAC,KAAAA,mBAAA;AAAA,EACA,CAAAC,mBAAAA,wBAAAC,KAAAA,gBAAA;AAAA,EACA,CAAAC,mBAAAA,mBAAAC,KAAAA,cAAA;AAAA,EACA,CAAAC,mBAAAA,iBAAAC,KAAAA,iBAAA;AACA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC,KAAA;AAAA,IACA,UAAAC,OAAA;AAAA,IACA,YAAAC,SAAA;AAAA,IACA,cAAArB,KAAA;AAAA,IACA,cAAAE,KAAA;AAAA,IACA,eAAAE,KAAA;AAAA,IACA,kBAAAE,KAAA;AAAA,IACA,cAAAE,KAAA;AAAA,IACA,iBAAAE,KAAA;AAAA,IACA,qBAAAE,KAAA;AAAA,IACA,gBAAAI,KAAA;AAAA,IACA,mBAAAE,KAAA;AAAA,IACA,oBAAAI,KAAA;AAAA,IACA,kBAAAR,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,WAAA,IAAA,KAAA,QAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,YAAA,EAAA,QAAA,SAAA,IAAAS,mBAAAA,uBAAA,KAAA,QAAA;AACA,aAAA,KAAA,aAAA,WAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,aAAAd;IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,5 +1,5 @@
-import { DtIconKeypad, DtIconDialer, DtIconVolume2, DtIconExpertNode, DtIconBranch, DtIconCallMerge, DtIconChevronsRight, DtIconTransfer, DtIconPhoneHangUp, DtIconMoreVertical } from "@dialpad/dialtone-icons/vue2";
-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_CLASS_MAPPING } from "./ivr_node_constants.js";
+import { DtIconKeypad, DtIconDialer, DtIconVolume2, DtIconExpertNode, DtIconBranch, DtIconCallMerge, DtIconChevronsRight, DtIconTransfer, DtIconPhoneHangUp, DtIconMoreVertical, DtIconListBullet } from "@dialpad/dialtone-icons/vue2";
+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_CUSTOMER_DATA, IVR_NODE_TRANSFER, IVR_NODE_HANGUP, IVR_NODE_CLASS_MAPPING } from "./ivr_node_constants.js";
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtCard from "../../../components/card/card.vue.js";
 import DtButton from "../../../components/button/button.vue.js";
@@ -12,6 +12,7 @@ const typeToIcon = /* @__PURE__ */ new Map([
   [IVR_NODE_BRANCH, DtIconBranch],
   [IVR_NODE_GO_TO, DtIconCallMerge],
   [IVR_NODE_ASSIGN, DtIconChevronsRight],
+  [IVR_NODE_CUSTOMER_DATA, DtIconListBullet],
   [IVR_NODE_TRANSFER, DtIconTransfer],
   [IVR_NODE_HANGUP, DtIconPhoneHangUp]
 ]);
@@ -30,7 +31,8 @@ const _sfc_main = {
     DtIconChevronsRight,
     DtIconTransfer,
     DtIconPhoneHangUp,
-    DtIconMoreVertical
+    DtIconMoreVertical,
+    DtIconListBullet
   },
   props: {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"ivr_node.vue.js","sources":["../../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-ivr-node',\n      nodeClass,\n    ]\"\n    v-on=\"$listeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n      :class=\"{ 'd-recipe-ivr-node__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=\"d-recipe-ivr-node__connector\"\n      :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n    />\n    <dt-card>\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"d-recipe-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=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"d-recipe-ivr-node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          placement=\"bottom\"\n          :open.sync=\"isOpen\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"d-recipe-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/vue2';\nimport {\n  IVR_NODE_CLASS_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    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    nodeClass () {\n      const { normal, selected } = IVR_NODE_CLASS_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"],"names":[],"mappings":";;;;;;AAkHA,MAAA,aAAA,oBAAA,IAAA;AAAA,EACA,CAAA,sBAAA,YAAA;AAAA,EACA,CAAA,yBAAA,YAAA;AAAA,EACA,CAAA,sBAAA,aAAA;AAAA,EACA,CAAA,iBAAA,gBAAA;AAAA,EACA,CAAA,iBAAA,YAAA;AAAA,EACA,CAAA,gBAAA,eAAA;AAAA,EACA,CAAA,iBAAA,mBAAA;AAAA,EACA,CAAA,mBAAA,cAAA;AAAA,EACA,CAAA,iBAAA,iBAAA;AACA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,WAAA,IAAA,KAAA,QAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,YAAA,EAAA,QAAA,SAAA,IAAA,uBAAA,KAAA,QAAA;AACA,aAAA,KAAA,aAAA,WAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ivr_node.vue.js","sources":["../../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-ivr-node',\n      nodeClass,\n    ]\"\n    v-on=\"$listeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n      :class=\"{ 'd-recipe-ivr-node__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=\"d-recipe-ivr-node__connector\"\n      :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n    />\n    <dt-card>\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"d-recipe-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=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"d-recipe-ivr-node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          placement=\"bottom\"\n          :open.sync=\"isOpen\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"d-recipe-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  DtIconListBullet,\n} from '@dialpad/dialtone-icons/vue2';\nimport {\n  IVR_NODE_CLASS_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  IVR_NODE_CUSTOMER_DATA,\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_CUSTOMER_DATA, DtIconListBullet],\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    DtIconListBullet,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    nodeClass () {\n      const { normal, selected } = IVR_NODE_CLASS_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"],"names":[],"mappings":";;;;;;AAoHA,MAAA,aAAA,oBAAA,IAAA;AAAA,EACA,CAAA,sBAAA,YAAA;AAAA,EACA,CAAA,yBAAA,YAAA;AAAA,EACA,CAAA,sBAAA,aAAA;AAAA,EACA,CAAA,iBAAA,gBAAA;AAAA,EACA,CAAA,iBAAA,YAAA;AAAA,EACA,CAAA,gBAAA,eAAA;AAAA,EACA,CAAA,iBAAA,mBAAA;AAAA,EACA,CAAA,wBAAA,gBAAA;AAAA,EACA,CAAA,mBAAA,cAAA;AAAA,EACA,CAAA,iBAAA,iBAAA;AACA,CAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAA,WAAA,IAAA,KAAA,QAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,YAAA,EAAA,QAAA,SAAA,IAAA,uBAAA,KAAA,QAAA;AACA,aAAA,KAAA,aAAA,WAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,aAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}