@dialpad/dialtone-vue 2.159.0-beta.1 → 2.159.0

package/dist/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.cjs

@@ -1,16 +1,16 @@
 "use strict";
 const vue2 = require("@tiptap/vue-2");
-const vue2$1 = require("@dialpad/dialtone-icons/vue2");
 ;/* empty css                   */
 const _pluginVue2_normalizer = require("../../../../_virtual/_plugin-vue2_normalizer.cjs");
 const item_layout = require("../../../../components/item_layout/item_layout.vue.cjs");
+const icon = require("../../../../components/icon/icon.vue.cjs");
 const button = require("../../../../components/button/button.vue.cjs");
 const _sfc_main = {
   name: "MeetingPill",
   components: {
     NodeViewWrapper: vue2.NodeViewWrapper,
     DtItemLayout: item_layout,
-    DtIconClose: vue2$1.DtIconClose,
+    DtIcon: icon,
     DtButton: button
   },
   props: vue2.nodeViewProps,
@@ -27,7 +27,7 @@ var _sfc_render = function render() {
     return [_c("div", { staticClass: "dt-message-input-meeting-pill__icon" }, [_c("dt-icon", { attrs: { "name": "video", "size": "400" } })], 1)];
   }, proxy: true }, { key: "right", fn: function() {
     return [_c("div", { staticClass: "dt-message-input-meeting-pill__close" }, [_c("dt-button", { attrs: { "circle": "", "aria-label": _vm.node.attrs["close-button-aria-label"], "size": "xs", "importance": "clear" }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon-close", { attrs: { "size": "300" } })];
+      return [_c("dt-icon", { attrs: { "name": "close", "size": "300" } })];
     }, proxy: true }]) })], 1)];
   }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.node.attrs.text) + " ")])], 1);
 };

package/dist/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MeetingPill.vue.cjs","sources":["../../../../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue"],"sourcesContent":["<template>\n  <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n    <dt-item-layout\n      class=\"dt-message-input-meeting-pill__layout\"\n      unstyled\n    >\n      <template #left>\n        <div class=\"dt-message-input-meeting-pill__icon\">\n          <dt-icon\n            name=\"video\"\n            size=\"400\"\n          />\n        </div>\n      </template>\n      {{ node.attrs.text }}\n      <template #right>\n        <div class=\"dt-message-input-meeting-pill__close\">\n          <dt-button\n            circle\n            :aria-label=\"node.attrs['close-button-aria-label']\"\n            size=\"xs\"\n            importance=\"clear\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                size=\"300\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </template>\n    </dt-item-layout>\n  </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'MeetingPill',\n\n  components: {\n    NodeViewWrapper,\n    DtItemLayout,\n    DtIconClose,\n    DtButton,\n  },\n\n  props: nodeViewProps,\n\n  emits: ['meeting-pill-close'],\n\n  methods: {\n    close (e) {\n      this.$parent.$emit('meeting-pill-close', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n  display: inline-block;\n\n  &__layout {\n    gap: var(--dt-space-400);\n    grid-template-areas: 'left content right';\n    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n    align-items: center;\n    max-width: var(--dt-size-905);\n    padding-left: var(--dt-space-400);\n    padding-right: var(--dt-space-400);\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n    border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n    border-radius: var(--dt-size-radius-300);\n    font: var(--dt-typography-headline-md);\n  }\n\n  &__icon {\n    display: flex;\n    align-items: center;\n    padding: var(--dt-space-350);\n  }\n\n  &__close {\n    display: flex;\n    justify-content: flex-end;\n  }\n}\n</style>\n"],"names":["NodeViewWrapper","DtItemLayout","DtIconClose","DtButton","nodeViewProps"],"mappings":";;;;;;;AA0CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,iBAAAA,KAAA;AAAA,IACA,cAAAC;AAAAA,IACA,aAAAC,OAAA;AAAA,IACA,UAAAC;AAAAA,EACA;AAAA,EAEA,OAAAC,KAAA;AAAA,EAEA,OAAA,CAAA,oBAAA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,GAAA;AACA,WAAA,QAAA,MAAA,sBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MeetingPill.vue.cjs","sources":["../../../../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue"],"sourcesContent":["<template>\n  <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n    <dt-item-layout\n      class=\"dt-message-input-meeting-pill__layout\"\n      unstyled\n    >\n      <template #left>\n        <div class=\"dt-message-input-meeting-pill__icon\">\n          <dt-icon\n            name=\"video\"\n            size=\"400\"\n          />\n        </div>\n      </template>\n      {{ node.attrs.text }}\n      <template #right>\n        <div class=\"dt-message-input-meeting-pill__close\">\n          <dt-button\n            circle\n            :aria-label=\"node.attrs['close-button-aria-label']\"\n            size=\"xs\"\n            importance=\"clear\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                name=\"close\"\n                size=\"300\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </template>\n    </dt-item-layout>\n  </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'MeetingPill',\n\n  components: {\n    NodeViewWrapper,\n    DtItemLayout,\n    DtIcon,\n    DtButton,\n  },\n\n  props: nodeViewProps,\n\n  emits: ['meeting-pill-close'],\n\n  methods: {\n    close (e) {\n      this.$parent.$emit('meeting-pill-close', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n  display: inline-block;\n\n  &__layout {\n    gap: var(--dt-space-400);\n    grid-template-areas: 'left content right';\n    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n    align-items: center;\n    max-width: var(--dt-size-905);\n    padding-left: var(--dt-space-400);\n    padding-right: var(--dt-space-400);\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n    border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n    border-radius: var(--dt-size-radius-300);\n    font: var(--dt-typography-headline-md);\n  }\n\n  &__icon {\n    display: flex;\n    align-items: center;\n    padding: var(--dt-space-350);\n  }\n\n  &__close {\n    display: flex;\n    justify-content: flex-end;\n  }\n}\n</style>\n"],"names":["NodeViewWrapper","DtItemLayout","DtIcon","DtButton","nodeViewProps"],"mappings":";;;;;;;AA2CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,iBAAAA,KAAA;AAAA,IACA,cAAAC;AAAAA,IACA,QAAAC;AAAAA,IACA,UAAAC;AAAAA,EACA;AAAA,EAEA,OAAAC,KAAA;AAAA,EAEA,OAAA,CAAA,oBAAA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,GAAA;AACA,WAAA,QAAA,MAAA,sBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.js

@@ -1,15 +1,15 @@
 import { NodeViewWrapper, nodeViewProps } from "@tiptap/vue-2";
-import { DtIconClose } from "@dialpad/dialtone-icons/vue2";
 /* empty css                 */
 import normalizeComponent from "../../../../_virtual/_plugin-vue2_normalizer.js";
 import DtItemLayout from "../../../../components/item_layout/item_layout.vue.js";
+import DtIcon from "../../../../components/icon/icon.vue.js";
 import DtButton from "../../../../components/button/button.vue.js";
 const _sfc_main = {
   name: "MeetingPill",
   components: {
     NodeViewWrapper,
     DtItemLayout,
-    DtIconClose,
+    DtIcon,
     DtButton
   },
   props: nodeViewProps,
@@ -26,7 +26,7 @@ var _sfc_render = function render() {
     return [_c("div", { staticClass: "dt-message-input-meeting-pill__icon" }, [_c("dt-icon", { attrs: { "name": "video", "size": "400" } })], 1)];
   }, proxy: true }, { key: "right", fn: function() {
     return [_c("div", { staticClass: "dt-message-input-meeting-pill__close" }, [_c("dt-button", { attrs: { "circle": "", "aria-label": _vm.node.attrs["close-button-aria-label"], "size": "xs", "importance": "clear" }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon-close", { attrs: { "size": "300" } })];
+      return [_c("dt-icon", { attrs: { "name": "close", "size": "300" } })];
     }, proxy: true }]) })], 1)];
   }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.node.attrs.text) + " ")])], 1);
 };

package/dist/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"MeetingPill.vue.js","sources":["../../../../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue"],"sourcesContent":["<template>\n  <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n    <dt-item-layout\n      class=\"dt-message-input-meeting-pill__layout\"\n      unstyled\n    >\n      <template #left>\n        <div class=\"dt-message-input-meeting-pill__icon\">\n          <dt-icon\n            name=\"video\"\n            size=\"400\"\n          />\n        </div>\n      </template>\n      {{ node.attrs.text }}\n      <template #right>\n        <div class=\"dt-message-input-meeting-pill__close\">\n          <dt-button\n            circle\n            :aria-label=\"node.attrs['close-button-aria-label']\"\n            size=\"xs\"\n            importance=\"clear\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                size=\"300\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </template>\n    </dt-item-layout>\n  </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'MeetingPill',\n\n  components: {\n    NodeViewWrapper,\n    DtItemLayout,\n    DtIconClose,\n    DtButton,\n  },\n\n  props: nodeViewProps,\n\n  emits: ['meeting-pill-close'],\n\n  methods: {\n    close (e) {\n      this.$parent.$emit('meeting-pill-close', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n  display: inline-block;\n\n  &__layout {\n    gap: var(--dt-space-400);\n    grid-template-areas: 'left content right';\n    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n    align-items: center;\n    max-width: var(--dt-size-905);\n    padding-left: var(--dt-space-400);\n    padding-right: var(--dt-space-400);\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n    border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n    border-radius: var(--dt-size-radius-300);\n    font: var(--dt-typography-headline-md);\n  }\n\n  &__icon {\n    display: flex;\n    align-items: center;\n    padding: var(--dt-space-350);\n  }\n\n  &__close {\n    display: flex;\n    justify-content: flex-end;\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;AA0CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,EAEA,OAAA,CAAA,oBAAA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,GAAA;AACA,WAAA,QAAA,MAAA,sBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MeetingPill.vue.js","sources":["../../../../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue"],"sourcesContent":["<template>\n  <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n    <dt-item-layout\n      class=\"dt-message-input-meeting-pill__layout\"\n      unstyled\n    >\n      <template #left>\n        <div class=\"dt-message-input-meeting-pill__icon\">\n          <dt-icon\n            name=\"video\"\n            size=\"400\"\n          />\n        </div>\n      </template>\n      {{ node.attrs.text }}\n      <template #right>\n        <div class=\"dt-message-input-meeting-pill__close\">\n          <dt-button\n            circle\n            :aria-label=\"node.attrs['close-button-aria-label']\"\n            size=\"xs\"\n            importance=\"clear\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                name=\"close\"\n                size=\"300\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </template>\n    </dt-item-layout>\n  </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'MeetingPill',\n\n  components: {\n    NodeViewWrapper,\n    DtItemLayout,\n    DtIcon,\n    DtButton,\n  },\n\n  props: nodeViewProps,\n\n  emits: ['meeting-pill-close'],\n\n  methods: {\n    close (e) {\n      this.$parent.$emit('meeting-pill-close', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n  display: inline-block;\n\n  &__layout {\n    gap: var(--dt-space-400);\n    grid-template-areas: 'left content right';\n    grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n    align-items: center;\n    max-width: var(--dt-size-905);\n    padding-left: var(--dt-space-400);\n    padding-right: var(--dt-space-400);\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n    border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n    border-radius: var(--dt-size-radius-300);\n    font: var(--dt-typography-headline-md);\n  }\n\n  &__icon {\n    display: flex;\n    align-items: center;\n    padding: var(--dt-space-350);\n  }\n\n  &__close {\n    display: flex;\n    justify-content: flex-end;\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;AA2CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,EAEA,OAAA,CAAA,oBAAA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,GAAA;AACA,WAAA,QAAA,MAAA,sBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/recipes/header/settings_menu_button/settings_menu_button.vue.cjs

@@ -1,13 +1,13 @@
 "use strict";
 const button = require("../../../components/button/button.vue.cjs");
-const vue2 = require("@dialpad/dialtone-icons/vue2");
 ;/* empty css                            */
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
+const icon = require("../../../components/icon/icon.vue.cjs");
 const _sfc_main = {
   name: "DtRecipeSettingsMenuButton",
   components: {
     DtButton: button,
-    DtIconMoreVertical: vue2.DtIconMoreVertical
+    DtIcon: icon
   },
   props: {
     /**
@@ -40,9 +40,9 @@ const _sfc_main = {
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _vm.updateAvailable ? _c("dt-button", _vm._g({ staticClass: "settings-menu-button-update", attrs: { "importance": "outlined", "size": "xs", "icon-position": "right", "aria-label": _vm.ariaLabel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon-more-vertical", { attrs: { "size": "300" } })];
-  }, proxy: true }], null, false, 3727801736) }, _vm.$listeners), [_vm._t("default")], 2) : _c("dt-button", _vm._g({ staticClass: "settings-menu-button", attrs: { "importance": "clear", "kind": "inverted", "aria-label": _vm.ariaLabel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon-more-vertical", { attrs: { "size": "300" } })];
+    return [_c("dt-icon", { attrs: { "name": "more-vertical", "size": "300" } })];
+  }, proxy: true }], null, false, 3418040308) }, _vm.$listeners), [_vm._t("default")], 2) : _c("dt-button", _vm._g({ staticClass: "settings-menu-button", attrs: { "importance": "clear", "kind": "inverted", "aria-label": _vm.ariaLabel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "more-vertical", "size": "300" } })];
   }, proxy: true }]) }, _vm.$listeners));
 };
 var _sfc_staticRenderFns = [];
@@ -52,7 +52,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
   _sfc_staticRenderFns,
   false,
   null,
-  "be46bf19"
+  "4ee1371d"
 );
 const settings_menu_button = __component__.exports;
 module.exports = settings_menu_button;

package/dist/recipes/header/settings_menu_button/settings_menu_button.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"settings_menu_button.vue.cjs","sources":["../../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIconMoreVertical } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIconMoreVertical,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":["DtButton","DtIconMoreVertical"],"mappings":";;;;;AAqCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA;AAAAA,IACA,oBAAAC,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAEA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"settings_menu_button.vue.cjs","sources":["../../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":["DtButton","DtIcon"],"mappings":";;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAA;AAAAA,IACA,QAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAEA;;;;;;;;;;;;;;;;;;;;"}

package/dist/recipes/header/settings_menu_button/settings_menu_button.vue.js

@@ -1,12 +1,12 @@
 import DtButton from "../../../components/button/button.vue.js";
-import { DtIconMoreVertical } from "@dialpad/dialtone-icons/vue2";
 /* empty css                          */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
+import DtIcon from "../../../components/icon/icon.vue.js";
 const _sfc_main = {
   name: "DtRecipeSettingsMenuButton",
   components: {
     DtButton,
-    DtIconMoreVertical
+    DtIcon
   },
   props: {
     /**
@@ -39,9 +39,9 @@ const _sfc_main = {
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _vm.updateAvailable ? _c("dt-button", _vm._g({ staticClass: "settings-menu-button-update", attrs: { "importance": "outlined", "size": "xs", "icon-position": "right", "aria-label": _vm.ariaLabel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon-more-vertical", { attrs: { "size": "300" } })];
-  }, proxy: true }], null, false, 3727801736) }, _vm.$listeners), [_vm._t("default")], 2) : _c("dt-button", _vm._g({ staticClass: "settings-menu-button", attrs: { "importance": "clear", "kind": "inverted", "aria-label": _vm.ariaLabel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon-more-vertical", { attrs: { "size": "300" } })];
+    return [_c("dt-icon", { attrs: { "name": "more-vertical", "size": "300" } })];
+  }, proxy: true }], null, false, 3418040308) }, _vm.$listeners), [_vm._t("default")], 2) : _c("dt-button", _vm._g({ staticClass: "settings-menu-button", attrs: { "importance": "clear", "kind": "inverted", "aria-label": _vm.ariaLabel }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "more-vertical", "size": "300" } })];
   }, proxy: true }]) }, _vm.$listeners));
 };
 var _sfc_staticRenderFns = [];
@@ -51,7 +51,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "be46bf19"
+  "4ee1371d"
 );
 const settings_menu_button = __component__.exports;
 export {

package/dist/recipes/header/settings_menu_button/settings_menu_button.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings_menu_button.vue.js","sources":["../../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <template #icon>\n      <dt-icon-more-vertical\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIconMoreVertical } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIconMoreVertical,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;AAqCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAEA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"settings_menu_button.vue.js","sources":["../../../../recipes/header/settings_menu_button/settings_menu_button.vue"],"sourcesContent":["<template>\n  <dt-button\n    v-if=\"updateAvailable\"\n    importance=\"outlined\"\n    size=\"xs\"\n    icon-position=\"right\"\n    class=\"settings-menu-button-update\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <slot />\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n  <dt-button\n    v-else\n    importance=\"clear\"\n    kind=\"inverted\"\n    class=\"settings-menu-button\"\n    :aria-label=\"ariaLabel\"\n    v-on=\"$listeners\"\n  >\n    <template #icon>\n      <dt-icon\n        name=\"more-vertical\"\n        size=\"300\"\n      />\n    </template>\n  </dt-button>\n</template>\n\n<script>\nimport DtButton from '@/components/button/button.vue';\nimport { DtIcon } from '@/components/icon';\n\nexport default {\n  name: 'DtRecipeSettingsMenuButton',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Determines whether the button should display the update state\n     * default is false\n     * @values true, false\n     */\n    updateAvailable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n};\n</script>\n\n<style scoped lang=\"less\">\n.settings-menu-button {\n  padding: var(--dt-space-0);\n  border-radius: var(--dt-size-550);\n  height: var(--dt-size-600);\n  width: var(--dt-size-550);\n  color: var(--dt-theme-topbar-button-color-foreground);\n  background-color: var(--dt-theme-topbar-button-color-background);\n\n  &:hover {\n    background-color: var(--dt-theme-topbar-button-color-background-hover);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n\n  &:active {\n    background-color: var(--dt-theme-topbar-button-color-background-active);\n  }\n}\n\n.settings-menu-button-update {\n  background-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  color: var(--dt-color-blue-500);\n  border-color: hsla(var(--dt-color-blue-200-hsl) / 25%);\n  border-radius: var(--dt-size-radius-pill);\n  height: var(--dt-size-600);\n\n  &:hover {\n    background-color: hsla(var(--dt-color-blue-200-hsl) / 50%);\n    color: var(--dt-theme-topbar-button-color-foreground-hover);\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAEA;;;;;;;;;;;;;;;;;;;"}

package/dist/recipes/leftbar/general_row/general_row.vue.cjs

@@ -1,12 +1,12 @@
 "use strict";
 const general_row_constants = require("./general_row_constants.cjs");
-const vue2 = require("@dialpad/dialtone-icons/vue2");
 const emoji_text_wrapper = require("../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs");
 const leftbar_general_row_icon = require("./leftbar_general_row_icon.vue.cjs");
 const common_utils = require("../../../common/utils.cjs");
 ;/* empty css                   */
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const badge = require("../../../components/badge/badge.vue.cjs");
+const icon = require("../../../components/icon/icon.vue.cjs");
 const button = require("../../../components/button/button.vue.cjs");
 const tooltip = require("../../../components/tooltip/tooltip.vue.cjs");
 const _sfc_main = {
@@ -14,10 +14,9 @@ const _sfc_main = {
   components: {
     DtEmojiTextWrapper: emoji_text_wrapper,
     DtBadge: badge,
+    DtIcon: icon,
     DtButton: button,
     DtTooltip: tooltip,
-    DtIconPhone: vue2.DtIconPhone,
-    DtIconWaveform: vue2.DtIconWaveform,
     DtRecipeLeftbarGeneralRowIcon: leftbar_general_row_icon
   },
   inheritAttrs: false,
@@ -283,7 +282,7 @@ var _sfc_render = function render() {
     return [_c("dt-emoji-text-wrapper", { staticClass: "dt-leftbar-row__description", attrs: { "data-qa": "dt-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.description) + " ")])];
   })], 2)]), _vm.hasActions ? _c("div", { staticClass: "dt-leftbar-row__omega" }, [_vm.dndText ? _c("dt-tooltip", { attrs: { "placement": "top", "message": _vm.dndTextTooltip }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("div", { ref: "dt-leftbar-row-dnd", staticClass: "dt-leftbar-row__dnd", attrs: { "data-qa": "dt-leftbar-row-dnd" } }, [_vm._v(" " + _vm._s(_vm.dndText) + " ")])];
-  }, proxy: true }], null, false, 490758222) }) : _vm._e(), _vm.activeVoiceChat ? _c("div", { staticClass: "dt-leftbar-row__active-voice" }, [_c("dt-icon-waveform", { attrs: { "size": "300" } })], 1) : _vm.showUnreadCount || _vm.showUnreadMentionCount ? _c("dt-tooltip", { attrs: { "message": _vm.unreadCountTooltip, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+  }, proxy: true }], null, false, 490758222) }) : _vm._e(), _vm.activeVoiceChat ? _c("div", { staticClass: "dt-leftbar-row__active-voice" }, [_c("dt-icon", { attrs: { "size": "300", "name": "waveform" } })], 1) : _vm.showUnreadCount || _vm.showUnreadMentionCount ? _c("dt-tooltip", { attrs: { "message": _vm.unreadCountTooltip, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_vm.showUnreadCount ? _c("dt-badge", { class: ["dt-leftbar-row__unread-badge", {
       "dt-leftbar-row__unread-count-badge": _vm.shouldApplyCustomStyleForCountBadge
     }], attrs: { "kind": "count", "type": "bulletin", "data-qa": "dt-leftbar-row-unread-badge" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _vm.showUnreadMentionCount ? _c("dt-badge", { class: [
@@ -300,9 +299,9 @@ var _sfc_render = function render() {
       $event.stopPropagation();
       return _vm.$emit("call", $event);
     } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon-phone", { attrs: { "size": "200" } })];
-    }, proxy: true }], null, false, 2193255039) })];
-  }, proxy: true }], null, false, 502128978) })], 1) : _vm._e()], 1) : _vm._e()]);
+      return [_c("dt-icon", { attrs: { "name": "phone", "size": "200" } })];
+    }, proxy: true }], null, false, 990728611) })];
+  }, proxy: true }], null, false, 4239858356) })], 1) : _vm._e()], 1) : _vm._e()]);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
@@ -311,7 +310,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
   _sfc_staticRenderFns,
   false,
   null,
-  "5a114d36"
+  "f626c1e7"
 );
 const DtRecipeGeneralRow = __component__.exports;
 module.exports = DtRecipeGeneralRow;

package/dist/recipes/leftbar/general_row/general_row.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"general_row.vue.cjs","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"$listeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon-waveform\n          size=\"300\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            :class=\"['dt-leftbar-row__unread-badge', {\n              'dt-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-mention-badge\"\n            :class=\"['dt-leftbar-row__unread-badge',\n                     { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n                     { 'dt-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon-phone\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIconPhone, DtIconWaveform } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtButton,\n    DtTooltip,\n    DtIconPhone,\n    DtIconWaveform,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * The channel setting, either 'mention' or 'always'.\n     * @values 'mention', 'always', null.\n     */\n    channelSetting: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount || this.showUnreadMentionCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton ||\n        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n\n    /**\n     * When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n     * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).\n     * @returns {boolean}\n     */\n    shouldApplyCustomStyleForMentionOnly () {\n      return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","DtIconPhone","DtIconWaveform","DtRecipeLeftbarGeneralRowIcon","LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_ICON_SIZES","safeConcatStrings","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR"],"mappings":"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"}
+{"version":3,"file":"general_row.vue.cjs","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"$listeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            :class=\"['dt-leftbar-row__unread-badge', {\n              'dt-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-mention-badge\"\n            :class=\"['dt-leftbar-row__unread-badge',\n                     { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n                     { 'dt-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"phone\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtIcon,\n    DtButton,\n    DtTooltip,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * The channel setting, either 'mention' or 'always'.\n     * @values 'mention', 'always', null.\n     */\n    channelSetting: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount || this.showUnreadMentionCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton ||\n        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n\n    /**\n     * When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n     * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).\n     * @returns {boolean}\n     */\n    shouldApplyCustomStyleForMentionOnly () {\n      return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtEmojiTextWrapper","DtBadge","DtIcon","DtButton","DtTooltip","DtRecipeLeftbarGeneralRowIcon","LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_ICON_SIZES","safeConcatStrings","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR"],"mappings":"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"}

package/dist/recipes/leftbar/general_row/general_row.vue.js

@@ -1,11 +1,11 @@
 import { LEFTBAR_GENERAL_ROW_TYPES, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS, LEFTBAR_GENERAL_ROW_ICON_SIZES, LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR } from "./general_row_constants.js";
-import { DtIconPhone, DtIconWaveform } from "@dialpad/dialtone-icons/vue2";
 import DtEmojiTextWrapper from "../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.js";
 import DtRecipeLeftbarGeneralRowIcon from "./leftbar_general_row_icon.vue.js";
 import { safeConcatStrings } from "../../../common/utils.js";
 /* empty css                 */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtBadge from "../../../components/badge/badge.vue.js";
+import DtIcon from "../../../components/icon/icon.vue.js";
 import DtButton from "../../../components/button/button.vue.js";
 import DtTooltip from "../../../components/tooltip/tooltip.vue.js";
 const _sfc_main = {
@@ -13,10 +13,9 @@ const _sfc_main = {
   components: {
     DtEmojiTextWrapper,
     DtBadge,
+    DtIcon,
     DtButton,
     DtTooltip,
-    DtIconPhone,
-    DtIconWaveform,
     DtRecipeLeftbarGeneralRowIcon
   },
   inheritAttrs: false,
@@ -282,7 +281,7 @@ var _sfc_render = function render() {
     return [_c("dt-emoji-text-wrapper", { staticClass: "dt-leftbar-row__description", attrs: { "data-qa": "dt-leftbar-row-description", "size": "200" } }, [_vm._v(" " + _vm._s(_vm.description) + " ")])];
   })], 2)]), _vm.hasActions ? _c("div", { staticClass: "dt-leftbar-row__omega" }, [_vm.dndText ? _c("dt-tooltip", { attrs: { "placement": "top", "message": _vm.dndTextTooltip }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("div", { ref: "dt-leftbar-row-dnd", staticClass: "dt-leftbar-row__dnd", attrs: { "data-qa": "dt-leftbar-row-dnd" } }, [_vm._v(" " + _vm._s(_vm.dndText) + " ")])];
-  }, proxy: true }], null, false, 490758222) }) : _vm._e(), _vm.activeVoiceChat ? _c("div", { staticClass: "dt-leftbar-row__active-voice" }, [_c("dt-icon-waveform", { attrs: { "size": "300" } })], 1) : _vm.showUnreadCount || _vm.showUnreadMentionCount ? _c("dt-tooltip", { attrs: { "message": _vm.unreadCountTooltip, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+  }, proxy: true }], null, false, 490758222) }) : _vm._e(), _vm.activeVoiceChat ? _c("div", { staticClass: "dt-leftbar-row__active-voice" }, [_c("dt-icon", { attrs: { "size": "300", "name": "waveform" } })], 1) : _vm.showUnreadCount || _vm.showUnreadMentionCount ? _c("dt-tooltip", { attrs: { "message": _vm.unreadCountTooltip, "placement": "top" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_vm.showUnreadCount ? _c("dt-badge", { class: ["dt-leftbar-row__unread-badge", {
       "dt-leftbar-row__unread-count-badge": _vm.shouldApplyCustomStyleForCountBadge
     }], attrs: { "kind": "count", "type": "bulletin", "data-qa": "dt-leftbar-row-unread-badge" } }, [_vm._v(" " + _vm._s(_vm.unreadCount) + " ")]) : _vm._e(), _vm.showUnreadMentionCount ? _c("dt-badge", { class: [
@@ -299,9 +298,9 @@ var _sfc_render = function render() {
       $event.stopPropagation();
       return _vm.$emit("call", $event);
     } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon-phone", { attrs: { "size": "200" } })];
-    }, proxy: true }], null, false, 2193255039) })];
-  }, proxy: true }], null, false, 502128978) })], 1) : _vm._e()], 1) : _vm._e()]);
+      return [_c("dt-icon", { attrs: { "name": "phone", "size": "200" } })];
+    }, proxy: true }], null, false, 990728611) })];
+  }, proxy: true }], null, false, 4239858356) })], 1) : _vm._e()], 1) : _vm._e()]);
 };
 var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
@@ -310,7 +309,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "5a114d36"
+  "f626c1e7"
 );
 const DtRecipeGeneralRow = __component__.exports;
 export {

package/dist/recipes/leftbar/general_row/general_row.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"general_row.vue.js","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"$listeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon-waveform\n          size=\"300\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            :class=\"['dt-leftbar-row__unread-badge', {\n              'dt-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-mention-badge\"\n            :class=\"['dt-leftbar-row__unread-badge',\n                     { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n                     { 'dt-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon-phone\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIconPhone, DtIconWaveform } from '@dialpad/dialtone-icons/vue2';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtButton,\n    DtTooltip,\n    DtIconPhone,\n    DtIconWaveform,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * The channel setting, either 'mention' or 'always'.\n     * @values 'mention', 'always', null.\n     */\n    channelSetting: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount || this.showUnreadMentionCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton ||\n        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n\n    /**\n     * When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n     * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).\n     * @returns {boolean}\n     */\n    shouldApplyCustomStyleForMentionOnly () {\n      return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"general_row.vue.js","sources":["../../../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"$listeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount || showUnreadMentionCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            :class=\"['dt-leftbar-row__unread-badge', {\n              'dt-leftbar-row__unread-count-badge':\n                shouldApplyCustomStyleForCountBadge,\n            }]\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-badge\n            v-if=\"showUnreadMentionCount\"\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-mention-badge\"\n            :class=\"['dt-leftbar-row__unread-badge',\n                     { 'dt-leftbar-row__unread-mention-count-badge': shouldApplyCustomStyleForCountBadge },\n                     { 'dt-leftbar-row__unread-mention-only-count-badge': shouldApplyCustomStyleForMentionOnly },\n            ]\"\n          >\n            {{ unreadMentionCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"phone\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtIcon,\n    DtButton,\n    DtTooltip,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * The channel setting, either 'mention' or 'always'.\n     * @values 'mention', 'always', null.\n     */\n    channelSetting: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount || this.showUnreadMentionCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton ||\n        this.showUnreadMentionCount;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n\n    showUnreadMentionCount () {\n      return !!this.unreadMentionCount && this.hasUnreads;\n    },\n\n    hasUnreadCount () {\n      return this.unreadCount !== null;\n    },\n\n    hasUnreadMentionCount () {\n      return this.unreadMentionCount !== null;\n    },\n\n    shouldApplyCustomStyleForCountBadge () {\n      return this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n\n    /**\n     * When a channel in 'always' setting, meaning the user should see both unread count and unread mention count,\n     * if there are only mention messages, we should apply the theme design tokens var(--dt-theme-mention-color-[background||foreground]-strong).\n     * @returns {boolean}\n     */\n    shouldApplyCustomStyleForMentionOnly () {\n      return this.channelSetting === 'always' && !this.hasUnreadCount && this.hasUnreadMentionCount;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":[],"mappings":"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"}

package/dist/recipes/leftbar/general_row/general_row_constants.cjs

@@ -16,6 +16,22 @@ const LEFTBAR_GENERAL_ROW_TYPES = {
   DIGITAL: "digital",
   SCHEDULED: "scheduled"
 };
+const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {
+  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: "inbox",
+  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: "contacts",
+  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: "hash",
+  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: "thread",
+  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: "layout-template",
+  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: "lock",
+  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: "sparkle",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: "users",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: "external-link",
+  "locked channel unread": "lock-filled",
+  "channel unread": "hash-bold",
+  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: "at-sign",
+  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: "laptop-2",
+  [LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED]: "calendar-clock"
+};
 const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {
   "magenta-200": "d-bgc-magenta-200",
   "green-200": "d-bgc-green-200",
@@ -36,6 +52,7 @@ const LEFTBAR_GENERAL_ROW_ICON_SIZES = [
 ];
 exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS;
 exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR;
+exports.LEFTBAR_GENERAL_ROW_ICON_MAPPING = LEFTBAR_GENERAL_ROW_ICON_MAPPING;
 exports.LEFTBAR_GENERAL_ROW_ICON_SIZES = LEFTBAR_GENERAL_ROW_ICON_SIZES;
 exports.LEFTBAR_GENERAL_ROW_TYPES = LEFTBAR_GENERAL_ROW_TYPES;
 //# sourceMappingURL=general_row_constants.cjs.map

package/dist/recipes/leftbar/general_row/general_row_constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"general_row_constants.cjs","sources":["../../../../recipes/leftbar/general_row/general_row_constants.js"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  THREADS: 'threads',\n  LAUNCHPAD: 'launchpad',\n  LOCKED_CHANNEL: 'locked channel',\n  CONTACT_CENTER: 'contact center',\n  QUICK_START: 'quick start',\n  COACHING_GROUP: 'coaching group',\n  COACHING_CENTER: 'coaching center',\n  DIALBOT: 'dialbot',\n  ASSIGNED: 'assigned',\n  DIGITAL: 'digital',\n  SCHEDULED: 'scheduled',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEY,MAAC,4CAA4C;AAAA,EACvD,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AACf;AAEY,MAAC,sDAAsD,kEACzC,OAAO,KAAK,yCAAyC,EAAE,KAAK,IAAI;AAE9E,MAAC,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;;;;;"}
+{"version":3,"file":"general_row_constants.cjs","sources":["../../../../recipes/leftbar/general_row/general_row_constants.js"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  THREADS: 'threads',\n  LAUNCHPAD: 'launchpad',\n  LOCKED_CHANNEL: 'locked channel',\n  CONTACT_CENTER: 'contact center',\n  QUICK_START: 'quick start',\n  COACHING_GROUP: 'coaching group',\n  COACHING_CENTER: 'coaching center',\n  DIALBOT: 'dialbot',\n  ASSIGNED: 'assigned',\n  DIGITAL: 'digital',\n  SCHEDULED: 'scheduled',\n};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: 'layout-template',\n  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n  'locked channel unread': 'lock-filled',\n  'channel unread': 'hash-bold',\n  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n  [LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED]: 'calendar-clock',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEY,MAAC,mCAAmC;AAAA,EAC9C,CAAC,0BAA0B,KAAK,GAAG;AAAA,EACnC,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,OAAO,GAAG;AAAA,EACrC,CAAC,0BAA0B,SAAS,GAAG;AAAA,EACvC,CAAC,0BAA0B,cAAc,GAAG;AAAA,EAC5C,CAAC,0BAA0B,WAAW,GAAG;AAAA,EACzC,CAAC,0BAA0B,cAAc,GAAG;AAAA,EAC5C,CAAC,0BAA0B,eAAe,GAAG;AAAA,EAC7C,yBAAyB;AAAA,EACzB,kBAAkB;AAAA,EAClB,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,OAAO,GAAG;AAAA,EACrC,CAAC,0BAA0B,SAAS,GAAG;AACzC;AAEY,MAAC,4CAA4C;AAAA,EACvD,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AACf;AAEY,MAAC,sDAAsD,kEACzC,OAAO,KAAK,yCAAyC,EAAE,KAAK,IAAI;AAE9E,MAAC,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;;;;;;"}

package/dist/recipes/leftbar/general_row/general_row_constants.js

@@ -14,6 +14,22 @@ const LEFTBAR_GENERAL_ROW_TYPES = {
   DIGITAL: "digital",
   SCHEDULED: "scheduled"
 };
+const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {
+  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: "inbox",
+  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: "contacts",
+  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: "hash",
+  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: "thread",
+  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: "layout-template",
+  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: "lock",
+  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: "sparkle",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: "users",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: "external-link",
+  "locked channel unread": "lock-filled",
+  "channel unread": "hash-bold",
+  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: "at-sign",
+  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: "laptop-2",
+  [LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED]: "calendar-clock"
+};
 const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {
   "magenta-200": "d-bgc-magenta-200",
   "green-200": "d-bgc-green-200",
@@ -35,6 +51,7 @@ const LEFTBAR_GENERAL_ROW_ICON_SIZES = [
 export {
   LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,
   LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,
+  LEFTBAR_GENERAL_ROW_ICON_MAPPING,
   LEFTBAR_GENERAL_ROW_ICON_SIZES,
   LEFTBAR_GENERAL_ROW_TYPES
 };

package/dist/recipes/leftbar/general_row/general_row_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"general_row_constants.js","sources":["../../../../recipes/leftbar/general_row/general_row_constants.js"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  THREADS: 'threads',\n  LAUNCHPAD: 'launchpad',\n  LOCKED_CHANNEL: 'locked channel',\n  CONTACT_CENTER: 'contact center',\n  QUICK_START: 'quick start',\n  COACHING_GROUP: 'coaching group',\n  COACHING_CENTER: 'coaching center',\n  DIALBOT: 'dialbot',\n  ASSIGNED: 'assigned',\n  DIGITAL: 'digital',\n  SCHEDULED: 'scheduled',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n"],"names":[],"mappings":"AAAY,MAAC,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEY,MAAC,4CAA4C;AAAA,EACvD,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AACf;AAEY,MAAC,sDAAsD,kEACzC,OAAO,KAAK,yCAAyC,EAAE,KAAK,IAAI;AAE9E,MAAC,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;"}
+{"version":3,"file":"general_row_constants.js","sources":["../../../../recipes/leftbar/general_row/general_row_constants.js"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  THREADS: 'threads',\n  LAUNCHPAD: 'launchpad',\n  LOCKED_CHANNEL: 'locked channel',\n  CONTACT_CENTER: 'contact center',\n  QUICK_START: 'quick start',\n  COACHING_GROUP: 'coaching group',\n  COACHING_CENTER: 'coaching center',\n  DIALBOT: 'dialbot',\n  ASSIGNED: 'assigned',\n  DIGITAL: 'digital',\n  SCHEDULED: 'scheduled',\n};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n  [LEFTBAR_GENERAL_ROW_TYPES.LAUNCHPAD]: 'layout-template',\n  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n  'locked channel unread': 'lock-filled',\n  'channel unread': 'hash-bold',\n  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n  [LEFTBAR_GENERAL_ROW_TYPES.SCHEDULED]: 'calendar-clock',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n"],"names":[],"mappings":"AAAY,MAAC,4BAA4B;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEY,MAAC,mCAAmC;AAAA,EAC9C,CAAC,0BAA0B,KAAK,GAAG;AAAA,EACnC,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,OAAO,GAAG;AAAA,EACrC,CAAC,0BAA0B,SAAS,GAAG;AAAA,EACvC,CAAC,0BAA0B,cAAc,GAAG;AAAA,EAC5C,CAAC,0BAA0B,WAAW,GAAG;AAAA,EACzC,CAAC,0BAA0B,cAAc,GAAG;AAAA,EAC5C,CAAC,0BAA0B,eAAe,GAAG;AAAA,EAC7C,yBAAyB;AAAA,EACzB,kBAAkB;AAAA,EAClB,CAAC,0BAA0B,QAAQ,GAAG;AAAA,EACtC,CAAC,0BAA0B,OAAO,GAAG;AAAA,EACrC,CAAC,0BAA0B,SAAS,GAAG;AACzC;AAEY,MAAC,4CAA4C;AAAA,EACvD,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AACf;AAEY,MAAC,sDAAsD,kEACzC,OAAO,KAAK,yCAAyC,EAAE,KAAK,IAAI;AAE9E,MAAC,iCAAiC;AAAA,EAC5C;AAAA,EACA;AACF;"}