@dialpad/dialtone-vue 3.46.2 → 3.47.0

package/dist/dialtone-vue.common.js

@@ -1192,7 +1192,9 @@ __webpack_require__.d(__webpack_exports__, {
   "DtRecipeComboboxMultiSelect": () => (/* reexport */ combobox_multi_select),
   "DtRecipeComboboxWithPopover": () => (/* reexport */ combobox_with_popover),
   "DtRecipeContactInfo": () => (/* reexport */ contact_info),
+  "DtRecipeContactRow": () => (/* reexport */ contact_row),
   "DtRecipeGeneralRow": () => (/* reexport */ general_row),
+  "DtRecipeGroupRow": () => (/* reexport */ group_row),
   "DtRecipeGroupedChip": () => (/* reexport */ grouped_chip),
   "DtRecipeIvrNode": () => (/* reexport */ ivr_node),
   "DtRecipeTopBannerInfo": () => (/* reexport */ top_banner_info),
@@ -1262,6 +1264,7 @@ __webpack_require__.d(__webpack_exports__, {
   "TOOLTIP_STICKY_VALUES": () => (/* reexport */ TOOLTIP_STICKY_VALUES),
   "USER_STATUS_COLOR_MODIFIERS": () => (/* reexport */ USER_STATUS_COLOR_MODIFIERS),
   "VALIDATION_MESSAGE_TYPES": () => (/* reexport */ VALIDATION_MESSAGE_TYPES),
+  "VALID_WIDTH_SIZE": () => (/* reexport */ VALID_WIDTH_SIZE),
   "filterFormattedMessages": () => (/* reexport */ filterFormattedMessages),
   "formatMessages": () => (/* reexport */ formatMessages),
   "getUniqueString": () => (/* reexport */ getUniqueString),
@@ -1288,7 +1291,7 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=47ab284e
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=0795f071
 
 const _hoisted_1 = ["id"];
 const _hoisted_2 = {
@@ -1321,7 +1324,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-presence"
   }), null, 16, ["presence", "class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 14, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=47ab284e
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=0795f071
 
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
@@ -1795,7 +1798,7 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 
   computed: {
     avatarClasses() {
-      return ['d-avatar', AVATAR_SIZE_MODIFIERS[this.size], this.avatarClass, {
+      return ['d-avatar', AVATAR_SIZE_MODIFIERS[this.validatedSize], this.avatarClass, {
         'd-avatar--no-gradient': !this.gradient,
         'd-avatar--group': this.showGroup
       }];
@@ -1825,6 +1828,11 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 
     formattedGroup() {
       return this.group > 99 ? '99+' : this.group;
+    },
+
+    validatedSize() {
+      // TODO: Group only supports xs size for now. Remove this when we support other sizes.
+      return this.group ? 'xs' : this.size;
     }
 
   },
@@ -1885,9 +1893,9 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
     formatInitials(initials) {
       if (!initials) return;
 
-      if (this.size === 'xs') {
+      if (this.validatedSize === 'xs') {
         this.formattedInitials = '';
-      } else if (this.size === 'sm') {
+      } else if (this.validatedSize === 'sm') {
         this.formattedInitials = initials.trim()[0];
       } else {
         this.formattedInitials = initials.trim().slice(0, 2);
@@ -1960,10 +1968,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=47ab284e&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=0795f071&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=47ab284e&lang=less
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=0795f071&lang=less
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
@@ -3109,6 +3117,7 @@ const focusableElementsList = `button,[href],input,select,textarea,details,[tabi
     _getFocusableElements() {
       let el = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.$el;
       let includeNegativeTabIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (!el) return [];
       const focusableContent = [...el.querySelectorAll(focusableElementsList)];
       return focusableContent.filter(fc => {
         const style = window.getComputedStyle(fc);
@@ -18509,17 +18518,17 @@ const stack_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(stackvue_typ
 /* harmony default export */ const stack = (stack_exports_);
 ;// CONCATENATED MODULE: ./components/stack/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=935fbcea
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=bdafd0f4
 
-const combobox_with_popovervue_type_template_id_935fbcea_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_935fbcea_hoisted_2 = {
+const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_2 = {
   ref: "header"
 };
-const combobox_with_popovervue_type_template_id_935fbcea_hoisted_3 = ["onMouseleave", "onFocusout"];
-const combobox_with_popovervue_type_template_id_935fbcea_hoisted_4 = {
+const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_3 = ["onMouseleave", "onFocusout"];
+const combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_4 = {
   ref: "footer"
 };
-function combobox_with_popovervue_type_template_id_935fbcea_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_with_popovervue_type_template_id_bdafd0f4_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
   const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
@@ -18558,7 +18567,7 @@ function combobox_with_popovervue_type_template_id_935fbcea_render(_ctx, _cache,
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
         inputProps: inputProps,
         onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_935fbcea_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
       let {
@@ -18604,22 +18613,22 @@ function combobox_with_popovervue_type_template_id_935fbcea_render(_ctx, _cache,
         }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
           key: 2,
           listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_935fbcea_hoisted_3)]),
+        })], 42, combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_3)]),
         _: 2
       }, [$data.hasSlotContent(_ctx.$slots.header) ? {
         name: "headerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_935fbcea_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)]),
         key: "0"
       } : undefined, $data.hasSlotContent(_ctx.$slots.footer) ? {
         name: "footerContent",
-        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_935fbcea_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
+        fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_with_popovervue_type_template_id_bdafd0f4_hoisted_4, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)]),
         key: "1"
       } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "append-to", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])];
     }),
     _: 3
   }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=935fbcea
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=bdafd0f4
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
 /* eslint-disable vuejs-accessibility/no-static-element-interactions */
@@ -18967,12 +18976,12 @@ function combobox_with_popovervue_type_template_id_935fbcea_render(_ctx, _cache,
     },
 
     onFocusOut(e) {
+      var _this$$refs$popover$t, _e$composedPath;
+
       // Check if the focus change was to another target within the combobox component
-      const isComboboxStillFocused = Object.keys(this.$refs).some(refName => {
-        const ref = this.$refs[refName];
-        return ref.$el ? ref.$el.contains(e.target) : ref.contains(e.target);
-      });
-      if (isComboboxStillFocused) return; // If outside the combobox then close
+      const popoverEl = (_this$$refs$popover$t = this.$refs.popover.tip) === null || _this$$refs$popover$t === void 0 ? void 0 : _this$$refs$popover$t.popper;
+      const comboboxEl = this.$refs.input;
+      if ((_e$composedPath = e.composedPath()) !== null && _e$composedPath !== void 0 && _e$composedPath.some(el => [popoverEl, comboboxEl].includes(el))) return; // If outside the combobox then close
 
       this.closeComboboxList();
     },
@@ -18995,7 +19004,7 @@ function combobox_with_popovervue_type_template_id_935fbcea_render(_ctx, _cache,
 
 
 ;
-const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_935fbcea_render]])
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_bdafd0f4_render]])
 
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
@@ -19720,9 +19729,9 @@ const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=8f55595a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=5a354a3a
 
-function callbar_buttonvue_type_template_id_8f55595a_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_5a354a3a_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_tooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-tooltip");
@@ -19738,23 +19747,24 @@ function callbar_buttonvue_type_template_id_8f55595a_render(_ctx, _cache, $props
       disabled: $props.disabled,
       "aria-label": $props.ariaLabel,
       "label-class": "d-fs-100",
-      width: "8.4rem",
+      width: $options.buttonWidth,
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.callbarButtonClass)
     }, {
       icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
       default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
       _: 3
-    }, 8, ["importance", "disabled", "aria-label", "class"])]),
+    }, 8, ["importance", "disabled", "aria-label", "width", "class"])]),
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "tooltip")]),
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=8f55595a
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=5a354a3a
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
 
 
 
+const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 /* harmony default export */ const callbar_buttonvue_type_script_lang_js = ({
   name: 'DtRecipeCallbarButton',
   components: {
@@ -19834,6 +19844,15 @@ function callbar_buttonvue_type_template_id_8f55595a_render(_ctx, _cache, $props
     buttonClass: {
       type: [String, Array, Object],
       default: ''
+    },
+
+    /*
+     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.
+     */
+    buttonWidthSize: {
+      type: String,
+      default: 'xl',
+      validator: size => VALID_WIDTH_SIZE.includes(size)
     }
   },
   computed: {
@@ -19844,16 +19863,29 @@ function callbar_buttonvue_type_template_id_8f55595a_render(_ctx, _cache, $props
         'dt-recipe-callbar-button--active': this.active,
         'dt-recipe-callbar-button--danger': this.danger
       }];
+    },
+
+    buttonWidth() {
+      switch (this.buttonWidthSize) {
+        case 'sm':
+          return '4.5rem';
+
+        case 'md':
+          return '6rem';
+
+        default:
+          return '8.4rem';
+      }
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=8f55595a&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=5a354a3a&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=8f55595a&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=5a354a3a&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -19863,17 +19895,17 @@ function callbar_buttonvue_type_template_id_8f55595a_render(_ctx, _cache, $props
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_8f55595a_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_5a354a3a_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=cd71689c
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=fef43d00
 
-const callbar_button_with_popovervue_type_template_id_cd71689c_hoisted_1 = {
-  class: "dt-recipe--callbar-button-with-popover--button"
+const callbar_button_with_popovervue_type_template_id_fef43d00_hoisted_1 = {
+  class: "d-d-flex d-ai-center"
 };
-function callbar_button_with_popovervue_type_template_id_cd71689c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_button_with_popovervue_type_template_id_fef43d00_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_recipe_callbar_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-callbar-button");
 
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
@@ -19882,12 +19914,13 @@ function callbar_button_with_popovervue_type_template_id_cd71689c_render(_ctx, _
 
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", callbar_button_with_popovervue_type_template_id_cd71689c_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_callbar_button, {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", callbar_button_with_popovervue_type_template_id_fef43d00_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_callbar_button, {
     "aria-label": $props.ariaLabel,
     disabled: $props.disabled,
     active: $props.active,
     danger: $props.danger,
     "button-class": $props.buttonClass,
+    "button-width-size": $props.buttonWidthSize,
     class: "dt-recipe--callbar-button-with-popover--main-button",
     onClick: $options.buttonClick
   }, {
@@ -19895,7 +19928,7 @@ function callbar_button_with_popovervue_type_template_id_cd71689c_render(_ctx, _
     tooltip: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "tooltip")]),
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")]),
     _: 3
-  }, 8, ["aria-label", "disabled", "active", "danger", "button-class", "onClick"]), $options.showArrowButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, 8, ["aria-label", "disabled", "active", "danger", "button-class", "button-width-size", "onClick"]), $options.showArrowButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_popover, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0,
     id: $props.id,
     open: $data.open,
@@ -19913,7 +19946,7 @@ function callbar_button_with_popovervue_type_template_id_cd71689c_render(_ctx, _
       circle: "",
       importance: "clear",
       size: "lg",
-      class: "dt-recipe--callbar-button-with-popover--arrow",
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-recipe--callbar-button-with-popover--arrow', $options.isCompactMode ? 'd-mln16' : 'd-mln24']),
       width: "2rem",
       "aria-label": $props.arrowButtonLabel,
       active: $data.open,
@@ -19924,14 +19957,14 @@ function callbar_button_with_popovervue_type_template_id_cd71689c_render(_ctx, _
         size: "200"
       })]),
       _: 1
-    }, 8, ["aria-label", "active", "onClick"])]),
+    }, 8, ["class", "aria-label", "active", "onClick"])]),
     content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "content")]),
     headerContent: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "headerContent")]),
     footerContent: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footerContent")]),
     _: 3
   }, 16, ["id", "open", "placement", "initial-focus-element", "show-close-button", "dialog-class", "onOpened"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=cd71689c
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=fef43d00
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js
 
@@ -20086,6 +20119,15 @@ function callbar_button_with_popovervue_type_template_id_cd71689c_render(_ctx, _
       default: ''
     },
 
+    /*
+     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.
+     */
+    buttonWidthSize: {
+      type: String,
+      default: 'xl',
+      validator: size => VALID_WIDTH_SIZE.includes(size)
+    },
+
     /**
      * Additional class name for the popover content wrapper element.
      */
@@ -20116,6 +20158,10 @@ function callbar_button_with_popovervue_type_template_id_cd71689c_render(_ctx, _
   computed: {
     showArrowButton() {
       return this.forceShowArrow || !this.disabled;
+    },
+
+    isCompactMode() {
+      return this.buttonWidthSize === 'sm';
     }
 
   },
@@ -20143,10 +20189,10 @@ function callbar_button_with_popovervue_type_template_id_cd71689c_render(_ctx, _
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=cd71689c&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=fef43d00&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=cd71689c&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&id=fef43d00&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue
 
@@ -20156,7 +20202,7 @@ function callbar_button_with_popovervue_type_template_id_cd71689c_render(_ctx, _
 ;
 
 
-const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_button_with_popovervue_type_script_lang_js, [['render',callbar_button_with_popovervue_type_template_id_cd71689c_render]])
+const callbar_button_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_button_with_popovervue_type_script_lang_js, [['render',callbar_button_with_popovervue_type_template_id_fef43d00_render]])
 
 /* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/index.js
@@ -20753,51 +20799,87 @@ const grouped_chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group
 /* harmony default export */ const grouped_chip = (grouped_chip_exports_);
 ;// CONCATENATED MODULE: ./recipes/chips/grouped_chip/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/general_row/general_row.vue?vue&type=template&id=4d53a955
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/general_row/general_row.vue?vue&type=template&id=06ebf262
 
-const general_rowvue_type_template_id_4d53a955_hoisted_1 = {
+const general_rowvue_type_template_id_06ebf262_hoisted_1 = {
   class: "dt-leftbar-row__alpha"
 };
-const general_rowvue_type_template_id_4d53a955_hoisted_2 = {
+const general_rowvue_type_template_id_06ebf262_hoisted_2 = {
   class: "dt-leftbar-row__label"
 };
-const general_rowvue_type_template_id_4d53a955_hoisted_3 = {
+const general_rowvue_type_template_id_06ebf262_hoisted_3 = {
   class: "dt-leftbar-row__omega"
 };
-function general_rowvue_type_template_id_4d53a955_render(_ctx, _cache, $props, $setup, $data, $options) {
+const general_rowvue_type_template_id_06ebf262_hoisted_4 = {
+  key: 0,
+  class: "dt-leftbar-row__dnd"
+};
+const general_rowvue_type_template_id_06ebf262_hoisted_5 = {
+  key: 1,
+  class: "dt-leftbar-row__active-voice"
+};
+const general_rowvue_type_template_id_06ebf262_hoisted_6 = {
+  key: 0,
+  class: "dt-leftbar-row__action",
+  "data-qa": "dt-leftbar-row-action"
+};
+function general_rowvue_type_template_id_06ebf262_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_recipe_leftbar_general_row_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-leftbar-general-row-icon");
 
   const _component_dt_emoji_text_wrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-emoji-text-wrapper");
 
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
+
   const _component_dt_badge = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-badge");
 
+  const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
+
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($options.leftbarGeneralRowClasses),
     "data-qa": "dt-leftbar-row"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("button", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     class: "dt-leftbar-row__primary",
     "data-qa": "dt-leftbar-row-link"
-  }, _ctx.$attrs), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_4d53a955_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_leftbar_general_row_icon, {
+  }, _ctx.$attrs), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_06ebf262_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "left", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_recipe_leftbar_general_row_icon, {
     type: $options.getIcon,
     color: $props.color,
     "data-qa": "dt-leftbar-row-icon"
-  }, null, 8, ["type", "color"])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_4d53a955_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_emoji_text_wrapper, {
+  }, null, 8, ["type", "color"])])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_06ebf262_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "label", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_emoji_text_wrapper, {
     class: "dt-leftbar-row__description",
     "data-qa": "dt-leftbar-row-description"
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.description), 1)]),
     _: 1
-  })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_4d53a955_hoisted_3, [$options.hasUnreadMessages ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_badge, {
-    key: 0,
+  })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", general_rowvue_type_template_id_06ebf262_hoisted_3, [$props.dndText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", general_rowvue_type_template_id_06ebf262_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.dndText), 1)) : $props.activeVoiceChat ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", general_rowvue_type_template_id_06ebf262_hoisted_5, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+    size: "300",
+    name: "activity"
+  })])) : !!$props.unreadCount && $props.hasUnreads ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_badge, {
+    key: 2,
     kind: "count",
     type: "bulletin",
     "data-qa": "dt-leftbar-row-unread-badge"
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.unreadCount), 1)]),
     _: 1
-  })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 16)], 2);
+  })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])], 16), $props.hasCallButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", general_rowvue_type_template_id_06ebf262_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    class: "dt-leftbar-row__action-button",
+    "data-qa": "dt-leftbar-row-action-call-button",
+    circle: "",
+    size: "xs",
+    kind: "inverted",
+    onFocus: _cache[0] || (_cache[0] = $event => $data.actionFocused = true),
+    onBlur: _cache[1] || (_cache[1] = $event => $data.actionFocused = false),
+    onMouseout: _cache[2] || (_cache[2] = $event => $data.actionFocused = false),
+    onClick: _cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => _ctx.$emit('call', $event), ["stop"]))
+  }, {
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: "phone",
+      size: "200"
+    })]),
+    _: 1
+  })])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
 }
-;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue?vue&type=template&id=4d53a955
+;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue?vue&type=template&id=06ebf262
 
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row_constants.js
 const LEFTBAR_GENERAL_ROW_TYPES = {
@@ -20807,7 +20889,9 @@ const LEFTBAR_GENERAL_ROW_TYPES = {
   THREADS: 'threads',
   LOCKED_CHANNEL: 'locked channel',
   CONTACT_CENTER: 'contact center',
-  DIALBOT: 'dialbot'
+  DIALBOT: 'dialbot',
+  ASSIGNED: 'assigned',
+  DIGITAL: 'digital'
 };
 const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {
   [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',
@@ -20816,20 +20900,28 @@ const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {
   [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',
   [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',
   'locked channel unread': 'lock-filled',
-  'channel unread': 'hash-bold'
+  'channel unread': 'hash-bold',
+  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',
+  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'message'
 };
 const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {
-  purple: 'd-bgc-purple-300',
-  blue: 'd-bgc-blue-300',
-  green: 'd-bgc-green-300',
-  red: 'd-bgc-red-300',
-  magenta: 'd-bgc-magenta-300',
-  gold: 'd-bgc-gold-300'
+  'magenta-200': 'd-bgc-magenta-200',
+  'green-200': 'd-bgc-green-200',
+  'gold-300': 'd-bgc-gold-300',
+  'purple-600': 'd-bgc-purple-600',
+  'magenta-300': 'd-bgc-magenta-300',
+  'purple-300': 'd-bgc-purple-300',
+  'green-500': 'd-bgc-green-500',
+  'purple-100': 'd-bgc-purple-100',
+  'magenta-400': 'd-bgc-magenta-400',
+  'magenta-100': 'd-bgc-magenta-100'
 };
+const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' + 'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');
 /* harmony default export */ const general_row_constants = ({
   LEFTBAR_GENERAL_ROW_TYPES,
   LEFTBAR_GENERAL_ROW_ICON_MAPPING,
-  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS
+  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,
+  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=147e0534
 
@@ -21225,6 +21317,7 @@ const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_typ
 
 
 
+
 /**
  * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.
  * @see https://dialpad.design/components/emoji_text_wrapper.html
@@ -21243,6 +21336,15 @@ const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_typ
     elementType: {
       type: String,
       default: 'div'
+    },
+
+    /**
+     * The icon size to render the emojis at: 100 to 800
+     */
+    size: {
+      type: String,
+      default: '500',
+      validator: t => Object.keys(ICON_SIZE_MODIFIERS).includes(t)
     }
   },
 
@@ -21268,6 +21370,7 @@ const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_typ
         if (replaceList.includes(item)) {
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.h)(emoji, { ...this.$attrs,
             class: 'd-mx4 d-d-inline-block',
+            size: this.size,
             code: item
           });
         }
@@ -21447,11 +21550,16 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
 
 
 
+
+
+
 /* harmony default export */ const general_rowvue_type_script_lang_js = ({
   name: 'DtRecipeGeneralRow',
   components: {
     DtEmojiTextWrapper: emoji_text_wrapper,
     DtBadge: badge,
+    DtIcon: icon,
+    DtButton: button_button,
     DtRecipeLeftbarGeneralRowIcon: leftbar_general_row_icon
   },
   inheritAttrs: false,
@@ -21487,6 +21595,15 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
       }
     },
 
+    /**
+     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
+     * the unread count badge.
+     */
+    hasUnreads: {
+      type: Boolean,
+      default: false
+    },
+
     /**
      * Number of unread messages
      */
@@ -21501,32 +21618,83 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
     selected: {
       type: Boolean,
       default: false
+    },
+
+    /**
+     * Gives a faded style to be used when muted
+     */
+    muted: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Shows styling to represent an active voice chat. This will display over unreadCount.
+     */
+    activeVoiceChat: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Acronym used to represent "Do not Disturb" state. If entered will display the entered text over
+     * unreadCount and activeVoiceChat.
+     */
+    dndText: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Whether the row should have a call button. Usually only applicable to individual contact rows.
+     */
+    hasCallButton: {
+      type: Boolean,
+      default: false
     }
   },
+  emits: [
+  /**
+   * Call button clicked
+   *
+   * @event call
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'call'],
+
+  data() {
+    return {
+      actionFocused: false
+    };
+  },
+
   computed: {
     leftbarGeneralRowClasses() {
-      return ['dt-leftbar-row', 'dt-leftbar-row--no-action', {
-        'dt-leftbar-row--has-unread': this.hasUnreadMessages,
-        'dt-leftbar-row--selected': this.selected
+      return ['dt-leftbar-row', {
+        'dt-leftbar-row--no-action': !this.hasCallButton,
+        'dt-leftbar-row--has-unread': this.hasUnreads,
+        'dt-leftbar-row--selected': this.selected,
+        'dt-leftbar-row--muted': this.muted,
+        'dt-leftbar-row--action-focused': this.actionFocused
       }];
     },
 
     getIcon() {
       switch (this.type) {
         case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:
-          if (this.hasUnreadMessages) return 'channel unread';
+          if (this.hasUnreads) return 'channel unread';
           break;
 
         case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:
-          if (this.hasUnreadMessages) return 'locked channel unread';
+          if (this.hasUnreads) return 'locked channel unread';
           break;
       }
 
       return this.type;
     },
 
-    hasUnreadMessages() {
-      return isNaN(Number(this.unreadCount)) ? !!this.unreadCount : Number(this.unreadCount) > 0;
+    generalRowListeners() {
+      return extractVueListeners(this.$attrs);
     }
 
   },
@@ -21544,7 +21712,7 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
   methods: {
     validateProps() {
       if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER && !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {
-        console.error('If type is contact center, color must be one of the following: ' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', '));
+        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);
       }
     }
 
@@ -21552,10 +21720,10 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
 });
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/general_row/general_row.vue?vue&type=style&index=0&id=4d53a955&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/general_row/general_row.vue?vue&type=style&index=0&id=06ebf262&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue?vue&type=style&index=0&id=4d53a955&lang=less
+;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue?vue&type=style&index=0&id=06ebf262&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/general_row.vue
 
@@ -21565,12 +21733,365 @@ const leftbar_general_row_icon_exports_ = /*#__PURE__*/(0,exportHelper/* default
 ;
 
 
-const general_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(general_rowvue_type_script_lang_js, [['render',general_rowvue_type_template_id_4d53a955_render]])
+const general_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(general_rowvue_type_script_lang_js, [['render',general_rowvue_type_template_id_06ebf262_render]])
 
 /* harmony default export */ const general_row = (general_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/general_row/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=29f5cb33
+
+const group_rowvue_type_template_id_29f5cb33_hoisted_1 = ["src", "alt"];
+function group_rowvue_type_template_id_29f5cb33_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
+
+  const _component_dt_recipe_general_row = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-general-row");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_recipe_general_row, {
+    description: $props.names,
+    "unread-count": $props.unreadCount,
+    "has-unreads": $props.hasUnreads,
+    selected: $props.selected
+  }, {
+    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_avatar, {
+      initials: $props.avatarInitials,
+      group: $props.groupCount
+    }, {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+        "data-qa": "dt-avatar-image",
+        src: $props.avatarSrc,
+        alt: $props.avatarInitials
+      }, null, 8, group_rowvue_type_template_id_29f5cb33_hoisted_1)]),
+      _: 1
+    }, 8, ["initials", "group"])]),
+    _: 1
+  }, 8, ["description", "unread-count", "has-unreads", "selected"]);
+}
+;// CONCATENATED MODULE: ./recipes/leftbar/group_row/group_row.vue?vue&type=template&id=29f5cb33
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/group_row/group_row.vue?vue&type=script&lang=js
+
+
+/* harmony default export */ const group_rowvue_type_script_lang_js = ({
+  name: 'DtRecipeGroupRow',
+  components: {
+    DtAvatar: avatar,
+    DtRecipeGeneralRow: general_row
+  },
+  props: {
+    /**
+     * Optional avatar image url.
+     * if provided, it's also required to provide a value in the `avatarInitials` prop to use
+     * in the alt attribute of the avatar.
+     */
+    avatarSrc: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Initials to display on the avatar if avatarSrc is not provided or
+     * alt attr if avatarSrc is provided.
+     */
+    avatarInitials: {
+      type: String,
+      default: '',
+      required: true
+    },
+
+    /**
+     * Number displayed in avatar to count group members
+     */
+    groupCount: {
+      type: Number,
+      required: true
+    },
+
+    /**
+     * Names of the group members
+     */
+    names: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Number of unread messages
+     */
+    unreadCount: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
+     * the unread count badge.
+     */
+    hasUnreads: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Determines if the row is selected
+     */
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+  /**
+   * Native click event on the row itself
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click']
+});
+;// CONCATENATED MODULE: ./recipes/leftbar/group_row/group_row.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./recipes/leftbar/group_row/group_row.vue
+
+
+
+
+;
+const group_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(group_rowvue_type_script_lang_js, [['render',group_rowvue_type_template_id_29f5cb33_render]])
+
+/* harmony default export */ const group_row = (group_row_exports_);
+;// CONCATENATED MODULE: ./recipes/leftbar/group_row/index.js
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=8a190578
+
+const contact_rowvue_type_template_id_8a190578_hoisted_1 = ["src", "alt"];
+const contact_rowvue_type_template_id_8a190578_hoisted_2 = {
+  class: "dt-leftbar-row__status"
+};
+function contact_rowvue_type_template_id_8a190578_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
+
+  const _component_dt_avatar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-avatar");
+
+  const _component_dt_emoji_text_wrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-emoji-text-wrapper");
+
+  const _component_dt_recipe_general_row = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-recipe-general-row");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_recipe_general_row, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    "unread-count": $props.unreadCount,
+    "has-unreads": $props.hasUnreads,
+    selected: $props.selected,
+    "has-call-button": true,
+    muted: $props.muted
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.contactRowListeners), {
+    onCall: _cache[0] || (_cache[0] = $event => _ctx.$emit('call', $event))
+  }), {
+    left: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_avatar, {
+      size: "sm",
+      seed: $props.avatarSeed,
+      presence: $props.avatarPresence
+    }, {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$props.avatarSrc ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("img", {
+        key: 0,
+        "data-qa": "dt-avatar-image",
+        src: $props.avatarSrc,
+        alt: $props.name
+      }, null, 8, contact_rowvue_type_template_id_8a190578_hoisted_1)) : $props.noInitials ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_icon, {
+        key: 1,
+        name: "user",
+        size: "200"
+      })) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, {
+        key: 2
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($options.avatarInitial), 1)], 64))]),
+      _: 1
+    }, 8, ["seed", "presence"])]),
+    label: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_emoji_text_wrapper, {
+      class: "dt-leftbar-row__description",
+      "data-qa": "dt-leftbar-row-description",
+      size: "200"
+    }, {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.name), 1)]),
+      _: 1
+    }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", contact_rowvue_type_template_id_8a190578_hoisted_2, [$props.presenceText ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+      key: 0,
+      "data-qa": "dt-leftbar-row-presence-text",
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['dt-leftbar-row__meta-context', $options.presenceColorClass])
+    }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.presenceText), 3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $props.userStatus ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_emoji_text_wrapper, {
+      key: 1,
+      size: "100",
+      "element-type": "span",
+      "data-qa": "dt-leftbar-row-user-status",
+      class: "dt-leftbar-row__meta-custom"
+    }, {
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.userStatus), 1)]),
+      _: 1
+    })) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)])]),
+    _: 1
+  }, 16, ["unread-count", "has-unreads", "selected", "muted"]);
+}
+;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=8a190578
+
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/contact_row/contact_row.vue?vue&type=script&lang=js
+
+
+
+
+
+
+/* harmony default export */ const contact_rowvue_type_script_lang_js = ({
+  name: 'DtRecipeGroupRow',
+  components: {
+    DtAvatar: avatar,
+    DtIcon: icon,
+    DtRecipeGeneralRow: general_row,
+    DtEmojiTextWrapper: emoji_text_wrapper
+  },
+  props: {
+    /**
+     * Optional avatar image url.
+     * If not provided it will use the initial of the name.
+     */
+    avatarSrc: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'active', 'busy', 'away', 'offline'. defaults to active.
+     * @values active, busy, away, offline
+     */
+    avatarPresence: {
+      type: String,
+      default: PRESENCE_STATES.ACTIVE,
+      validator: role => {
+        return PRESENCE_STATES_LIST.includes(role);
+      }
+    },
+
+    /**
+     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
+     */
+    avatarSeed: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Text describing the user's presence, such as "in a meeting"
+     */
+    presenceText: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Name of the contact
+     */
+    name: {
+      type: String,
+      required: true
+    },
+
+    /**
+     * Status as set by the user.
+     */
+    userStatus: {
+      type: String,
+      default: ''
+    },
+
+    /**
+     * Gives a faded style to be used when muted
+     */
+    muted: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Number of unread messages
+     */
+    unreadCount: {
+      type: String,
+      default: null
+    },
+
+    /**
+     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
+     * the unread count badge.
+     */
+    hasUnreads: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Determines if the row is selected
+     */
+    selected: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Initials will never be shown. Instead it will show a "User" icon.
+     */
+    noInitials: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+  /**
+   * Call button clicked
+   *
+   * @event call
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'call'],
+  computed: {
+    presenceColorClass() {
+      switch (this.avatarPresence) {
+        case 'active':
+          return 'd-fc-success';
+
+        case 'busy':
+          return 'd-fc-critical';
+
+        case 'away':
+          return 'd-fc-warning';
+
+        default:
+          return undefined;
+      }
+    },
+
+    contactRowListeners() {
+      return extractVueListeners(this.$attrs);
+    },
+
+    avatarInitial() {
+      var _this$name$;
+
+      return (_this$name$ = this.name[0]) !== null && _this$name$ !== void 0 ? _this$name$ : '';
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/contact_row.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/contact_row.vue
+
+
+
+
+;
+const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contact_rowvue_type_script_lang_js, [['render',contact_rowvue_type_template_id_8a190578_render]])
+
+/* harmony default export */ const contact_row = (contact_row_exports_);
+;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/index.js
+
 ;// CONCATENATED MODULE: ./common/mixins/index.js
 
 
@@ -21624,6 +22145,8 @@ const general_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(genera
 
 
 
+
+
  // Mixins
 
  // Constants