@dialpad/dialtone-vue 2.67.0 → 2.69.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [2.69.0](https://github.com/dialpad/dialtone-vue/compare/v2.68.0...v2.69.0) (2023-03-16)
+
+
+### Bug Fixes
+
+* dialtone-icons version ([#823](https://github.com/dialpad/dialtone-vue/issues/823)) ([0cde468](https://github.com/dialpad/dialtone-vue/commit/0cde468de8db4c9eeb9f44653e271f1b5d9b78fd))
+* popover fallback placements ([#821](https://github.com/dialpad/dialtone-vue/issues/821)) ([a18ac48](https://github.com/dialpad/dialtone-vue/commit/a18ac482c84c9d73fbee695d6a89c3051c8b28cb))
+
+
+### Features
+
+* **Leftbar Contact Row:** add hasCallButton ([#826](https://github.com/dialpad/dialtone-vue/issues/826)) ([000cd5a](https://github.com/dialpad/dialtone-vue/commit/000cd5a272a0a0fbe53984311b8c6351acdd6c5d))
+
+# [2.68.0](https://github.com/dialpad/dialtone-vue/compare/v2.67.0...v2.68.0) (2023-03-15)
+
+
+### Code Refactoring
+
+* modify dt-recipe-callbar component to have common styles baked in ([#811](https://github.com/dialpad/dialtone-vue/issues/811)) ([4bebf71](https://github.com/dialpad/dialtone-vue/commit/4bebf71f8836ff83db0fa36336480195283629ca))
+
+
+### Features
+
+* **Dt Recipe Ivr Node:** add new ivr top connector slot ([#819](https://github.com/dialpad/dialtone-vue/issues/819)) ([d45a305](https://github.com/dialpad/dialtone-vue/commit/d45a3050bd1fa5ad6dc5fc198c49ea4bc6b55c61))
+
 # [2.67.0](https://github.com/dialpad/dialtone-vue/compare/v2.66.0...v2.67.0) (2023-03-15)
 
 

package/dist/dialtone-vue.common.js

@@ -378,7 +378,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}.ivr-connector{z-index:var(--zi-base1);display:flex;justify-content:center;align-items:center;border-color:var(--purple-600);background-color:var(--purple-600)}", ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -2603,6 +2603,25 @@ function debounce(func) {
   clearTimeout(TIMER);
   TIMER = setTimeout(func, timeout);
 }
+/**
+ * Checks if the element is out of the viewport
+ * https://gomakethings.com/how-to-check-if-any-part-of-an-element-is-out-of-the-viewport-with-vanilla-js/
+ * @param  {HTMLElement} element The element to check
+ * @return {Object} A set of booleans for each side of the element
+ */
+
+function isOutOfViewPort(element) {
+  const bounding = element.getBoundingClientRect();
+  const isOut = {
+    top: bounding.top < 0,
+    left: bounding.left < 0,
+    bottom: bounding.bottom > (window.innerHeight || document.documentElement.clientHeight),
+    right: bounding.right > (window.innerWidth || document.documentElement.clientWidth)
+  };
+  isOut.any = Object.values(isOut).some(val => val);
+  isOut.all = Object.values(isOut).every(val => val);
+  return isOut;
+}
 /* harmony default export */ const utils = ({
   getUniqueString,
   getRandomElement,
@@ -2613,7 +2632,8 @@ function debounce(func) {
   htmlFragment,
   flushPromises,
   kebabCaseToPascalCase,
-  debounce
+  debounce,
+  isOutOfViewPort
 });
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/presence/presence.vue?vue&type=template&id=77957bb3&
 var presencevue_type_template_id_77957bb3_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-presence",attrs:{"data-qa":"dt-presence","role":"status","aria-live":_vm.$attrs.ariaLive || 'off'}},[(_vm.srText)?_c('span',{staticClass:"sr-only",attrs:{"data-qa":"dt-presence-sr-text"}},[_vm._v(_vm._s(_vm.srText)+" ")]):_vm._e(),_c('div',{staticClass:"d-presence__inner",class:{
@@ -8190,8 +8210,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
 var dropdownvue_type_template_id_359f1c8b_staticRenderFns = []
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=cdba9054&
-var popovervue_type_template_id_cdba9054_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/popover/popover.vue?vue&type=template&id=683dbc64&
+var popovervue_type_template_id_683dbc64_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
           'aria-expanded': _vm.isOpen.toString(),
           'aria-controls': _vm.id,
           'aria-haspopup': _vm.role,
@@ -8202,7 +8222,7 @@ var popovervue_type_template_id_cdba9054_render = function () {var _vm=this;var
           'd-popover__content',
           _vm.POPOVER_PADDING_CLASSES[_vm.padding],
           _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
-var popovervue_type_template_id_cdba9054_staticRenderFns = []
+var popovervue_type_template_id_683dbc64_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13617,6 +13637,7 @@ var popover_header_footer_component = normalizeComponent(
     isOpen(isOpen, isPrev) {
       if (isOpen) {
         this.initTippyInstance();
+        this.tip.show();
       } else if (!isOpen && isPrev !== isOpen) {
         this.removeEventListeners();
         this.tip.hide();
@@ -13632,16 +13653,14 @@ var popover_header_footer_component = normalizeComponent(
 
     if (this.isOpen) {
       this.initTippyInstance();
+      this.tip.show();
     } // rootMargin here must be greater than the margin of the height we are setting in calculatedMaxHeight which
     // currently is var(--space-300) (4px). If not the intersectionObserver will continually trigger in an infinite
     // loop.
     // threshold 1.0 makes this trigger every time the dialog "touches" the edge of the viewport.
 
 
-    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport, {
-      rootMargin: '-8px',
-      threshold: 1.0
-    });
+    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);
     this.intersectionObserver.observe(this.popoverContentEl);
   },
 
@@ -13659,8 +13678,12 @@ var popover_header_footer_component = normalizeComponent(
    ******************/
   methods: {
     hasIntersectedViewport(entries) {
-      const dialog = entries === null || entries === void 0 ? void 0 : entries[0];
-      this.isOutsideViewport = !(dialog !== null && dialog !== void 0 && dialog.isIntersecting);
+      var _entries$;
+
+      const dialog = entries === null || entries === void 0 ? void 0 : (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.target;
+      if (!dialog) return;
+      const isOut = isOutOfViewPort(dialog);
+      this.isOutsideViewport = isOut.bottom || isOut.top;
     },
 
     popperOptions() {
@@ -13771,6 +13794,9 @@ var popover_header_footer_component = normalizeComponent(
 
         if (element.tagName.toLowerCase() === 'body') {
           element.classList.add('d-of-hidden');
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.add('d-zi-popover');
         }
@@ -13788,6 +13814,9 @@ var popover_header_footer_component = normalizeComponent(
 
         if (element.tagName.toLowerCase() === 'body') {
           element.classList.remove('d-of-hidden');
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.remove('d-zi-popover');
         }
@@ -13808,6 +13837,8 @@ var popover_header_footer_component = normalizeComponent(
       if (this.contentWidth === null) {
         this.popoverContentEl.style.width = 'auto';
       }
+
+      this.addEventListeners();
     },
 
     async onLeaveTransitionComplete() {
@@ -13820,7 +13851,7 @@ var popover_header_footer_component = normalizeComponent(
       }
 
       (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
-      this.enableScrolling();
+      await this.enableScrolling();
       this.$emit('opened', false);
 
       if (this.open !== null) {
@@ -13830,7 +13861,7 @@ var popover_header_footer_component = normalizeComponent(
 
     async onEnterTransitionComplete() {
       this.focusInitialElement();
-      this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
+      await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
 
       await this.$nextTick();
       this.$emit('opened', true, this.$refs.popover__content);
@@ -13936,11 +13967,6 @@ var popover_header_footer_component = normalizeComponent(
         onClickOutside: this.onClickOutside,
         onShow: this.onShow
       });
-      this.tip.setProps({
-        zIndex: this.modal ? 650 : this.calculateAnchorZindex()
-      });
-      this.tip.show();
-      this.addEventListeners();
     }
 
   }
@@ -13962,8 +13988,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(230);
 
 var popover_component = normalizeComponent(
   popover_popovervue_type_script_lang_js_,
-  popovervue_type_template_id_cdba9054_render,
-  popovervue_type_template_id_cdba9054_staticRenderFns,
+  popovervue_type_template_id_683dbc64_render,
+  popovervue_type_template_id_683dbc64_staticRenderFns,
   false,
   null,
   null,
@@ -22184,9 +22210,9 @@ var combobox_multi_select_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=83ef55d6&
-var callbar_buttonvue_type_template_id_83ef55d6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":"d-fs-100","width":_vm.buttonWidth}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
-var callbar_buttonvue_type_template_id_83ef55d6_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=86672db0&
+var callbar_buttonvue_type_template_id_86672db0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":_vm.callbarButtonTextClass,"width":_vm.buttonWidth}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
+var callbar_buttonvue_type_template_id_86672db0_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js&
@@ -22303,6 +22329,14 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
       default: ''
     },
 
+    /**
+     * Additional class name for the button text.
+     */
+    textClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
     /*
      * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.
      */
@@ -22322,13 +22356,17 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
   'click'],
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', {
+      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', 'd-fc-black-900', {
         'dt-recipe-callbar-button--circle': this.circle,
         'dt-recipe-callbar-button--active': this.active,
         'dt-recipe-callbar-button--danger': this.danger
       }];
     },
 
+    callbarButtonTextClass() {
+      return ['d-fs-100 lg:d-d-none md:d-d-none sm:d-d-none', this.textClass];
+    },
+
     buttonWidth() {
       switch (this.buttonWidthSize) {
         case 'sm':
@@ -22361,8 +22399,8 @@ var callbar_buttonvue_type_style_index_0_lang_less_ = __webpack_require__(759);
 
 var callbar_button_component = normalizeComponent(
   callbar_button_callbar_buttonvue_type_script_lang_js_,
-  callbar_buttonvue_type_template_id_83ef55d6_render,
-  callbar_buttonvue_type_template_id_83ef55d6_staticRenderFns,
+  callbar_buttonvue_type_template_id_86672db0_render,
+  callbar_buttonvue_type_template_id_86672db0_staticRenderFns,
   false,
   null,
   null,
@@ -22373,9 +22411,9 @@ var callbar_button_component = normalizeComponent(
 /* harmony default export */ const callbar_button = (callbar_button_component.exports);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=86437b7c&
-var callbar_button_with_popovervue_type_template_id_86437b7c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-d-flex d-ai-center"},[_c('dt-recipe-callbar-button',{staticClass:"dt-recipe--callbar-button-with-popover--main-button",attrs:{"aria-label":_vm.ariaLabel,"disabled":_vm.disabled,"active":_vm.active,"danger":_vm.danger,"button-class":_vm.buttonClass,"button-width-size":_vm.buttonWidthSize},on:{"click":_vm.buttonClick}},[_vm._t("icon",null,{"slot":"icon"}),_vm._t("tooltip",null,{"slot":"tooltip"}),_vm._t("default")],2),(_vm.showArrowButton)?_c('dt-popover',_vm._b({staticClass:"dt-recipe--callbar-button-with-popover--popover-wrapper",attrs:{"id":_vm.id,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.initialFocusElement,"show-close-button":_vm.showCloseButton,"padding":"none","dialog-class":['dt-recipe--callbar-button-with-popover--popover', _vm.contentClass],"header-class":"d-d-flex d-ai-center d-fw-normal d-px12"},on:{"opened":_vm.onModalIsOpened},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',{class:['dt-recipe--callbar-button-with-popover--arrow', _vm.isCompactMode ? 'd-mln16' : 'd-mln24'],attrs:{"circle":"","importance":"clear","size":"lg","width":"2rem","aria-label":_vm.arrowButtonLabel,"active":_vm.open},on:{"click":_vm.arrowClick},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"chevron-up","size":"200"}})]},proxy:true}],null,false,3340821372)})]},proxy:true}],null,false,821174459)},'dt-popover',_vm.$attrs,false),[_vm._t("content",null,{"slot":"content"}),_vm._t("headerContent",null,{"slot":"headerContent"}),_vm._t("footerContent",null,{"slot":"footerContent"})],2):_vm._e()],1)}
-var callbar_button_with_popovervue_type_template_id_86437b7c_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=template&id=6c396bca&
+var callbar_button_with_popovervue_type_template_id_6c396bca_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"d-d-flex d-ai-center"},[_c('dt-recipe-callbar-button',{staticClass:"dt-recipe--callbar-button-with-popover--main-button",attrs:{"aria-label":_vm.ariaLabel,"disabled":_vm.disabled,"active":_vm.active,"danger":_vm.danger,"button-class":_vm.buttonClass,"button-width-size":_vm.buttonWidthSize,"text-class":_vm.textClass},on:{"click":_vm.buttonClick}},[_vm._t("icon",null,{"slot":"icon"}),_vm._t("tooltip",null,{"slot":"tooltip"}),_vm._t("default")],2),(_vm.showArrowButton)?_c('dt-popover',_vm._b({staticClass:"dt-recipe--callbar-button-with-popover--popover-wrapper",attrs:{"id":_vm.id,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.initialFocusElement,"show-close-button":_vm.showCloseButton,"padding":"none","dialog-class":['dt-recipe--callbar-button-with-popover--popover', _vm.contentClass],"header-class":"d-d-flex d-ai-center d-fw-normal d-px12"},on:{"opened":_vm.onModalIsOpened},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',{class:['dt-recipe--callbar-button-with-popover--arrow', _vm.isCompactMode ? 'd-mln16' : 'd-mln24'],attrs:{"circle":"","importance":"clear","size":"lg","width":"2rem","aria-label":_vm.arrowButtonLabel,"active":_vm.open},on:{"click":_vm.arrowClick},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"chevron-up","size":"200"}})]},proxy:true}],null,false,3340821372)})]},proxy:true}],null,false,821174459)},'dt-popover',_vm.$attrs,false),[_vm._t("content",null,{"slot":"content"}),_vm._t("headerContent",null,{"slot":"headerContent"}),_vm._t("footerContent",null,{"slot":"footerContent"})],2):_vm._e()],1)}
+var callbar_button_with_popovervue_type_template_id_6c396bca_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js&
@@ -22452,6 +22490,7 @@ var callbar_button_with_popovervue_type_template_id_86437b7c_staticRenderFns = [
 //
 //
 //
+//
 
 
 
@@ -22589,6 +22628,14 @@ var callbar_button_with_popovervue_type_template_id_86437b7c_staticRenderFns = [
       default: ''
     },
 
+    /**
+     * Additional class name for the button text.
+     */
+    textClass: {
+      type: [String, Array, Object],
+      default: ''
+    },
+
     /*
      * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.
      */
@@ -22674,8 +22721,8 @@ var callbar_button_with_popovervue_type_style_index_0_lang_less_ = __webpack_req
 
 var callbar_button_with_popover_component = normalizeComponent(
   callbar_button_with_popover_callbar_button_with_popovervue_type_script_lang_js_,
-  callbar_button_with_popovervue_type_template_id_86437b7c_render,
-  callbar_button_with_popovervue_type_template_id_86437b7c_staticRenderFns,
+  callbar_button_with_popovervue_type_template_id_6c396bca_render,
+  callbar_button_with_popovervue_type_template_id_6c396bca_staticRenderFns,
   false,
   null,
   null,
@@ -22948,8 +22995,8 @@ var top_banner_info_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./recipes/notices/top_banner_info/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=5b6f101b&
-var ivr_nodevue_type_template_id_5b6f101b_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g({staticClass:"d-d-flex d-fd-column d-ai-center d-c-pointer ivr_node__width"},_vm.$listeners),[(_vm.dtmfKey)?_c('div',{staticClass:"d-zi-base1 d-ai-center d-jc-center d-d-flex d-w24 d-h24 d-bar-circle d-bc-purple-600 d-bgc-purple-600 d-mbn12 d-fc-white d-fs-200",class:{ 'd-mbn16': _vm.isSelected },attrs:{"data-qa":"dt-top-connector-dtmf"}},[_vm._v(" "+_vm._s(_vm.dtmfKey)+" ")]):_c('div',{staticClass:"d-zi-base1 d-d-flex d-w8 d-h8 d-bar-circle d-bc-purple-600 d-bgc-purple-600 d-mbn4",class:{ 'd-mbn8': _vm.isSelected },attrs:{"data-qa":"dt-top-connector"}}),_c('dt-card',{attrs:{"content-class":"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12","container-class":[
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/cards/ivr_node/ivr_node.vue?vue&type=template&id=0696f265&
+var ivr_nodevue_type_template_id_0696f265_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g({staticClass:"d-d-flex d-fd-column d-ai-center d-c-pointer ivr_node__width"},_vm.$listeners),[(_vm.dtmfKey)?_c('div',{staticClass:"ivr-connector d-w24 d-h24 d-bar-circle d-mbn12 d-fc-white d-fs-200",class:{ 'd-mbn16': _vm.isSelected },attrs:{"data-qa":"dt-top-connector-dtmf"}},[_vm._v(" "+_vm._s(_vm.dtmfKey)+" ")]):_vm._e(),(_vm.$slots.connector)?_vm._t("connector"):_vm._e(),(!_vm.dtmfKey && !_vm.$slots.connector)?_c('div',{staticClass:"ivr-connector d-w8 d-h8 d-bar-circle d-mbn4",class:{ 'd-mbn8': _vm.isSelected },attrs:{"data-qa":"dt-top-connector"}}):_vm._e(),_c('dt-card',{attrs:{"content-class":"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12","container-class":[
       'd-w100p',
       { 'd-ba d-bar8 d-baw4': _vm.isSelected },
       _vm.headerColor ],"header-class":[
@@ -22960,8 +23007,8 @@ var ivr_nodevue_type_template_id_5b6f101b_render = function () {var _vm=this;var
       _vm.headerColor,
       { 'd-btr4': !_vm.isSelected } ]},scopedSlots:_vm._u([{key:"header",fn:function(){return [_c('div',{staticClass:"d-d-flex d-ai-center"},[_c('dt-button',{attrs:{"aria-label":_vm.nodeType,"importance":"clear","data-qa":"dt-ivr-node-icon"},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{class:['d-fc-black-900', { 'ivr_node__goto_icon': _vm.isGotoNode }],attrs:{"name":_vm.nodeIcon,"size":"200"}})]},proxy:true}])}),_c('p',{staticClass:"d-fs-200 d-fw-bold",attrs:{"data-qa":"ivr-node-label"}},[_vm._v(" "+_vm._s(_vm.nodeLabel)+" ")])],1),_c('dt-dropdown',{attrs:{"placement":"bottom","open":_vm.isOpen},on:{"update:open":function($event){_vm.isOpen=$event}},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',{attrs:{"importance":"clear","aria-label":_vm.menuButtonAriaLabel},on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return _vm.openMenu.apply(null, arguments)}},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{staticClass:"d-fc-black-900",attrs:{"name":"more-vertical","size":"200"}})]},proxy:true}])})]},proxy:true},{key:"list",fn:function(ref){
     var close = ref.close;
-return [_c('div',{staticClass:"d-w164"},[_vm._t("menuItems",null,{"close":close})],2)]}}],null,true)})]},proxy:true},{key:"content",fn:function(){return [_vm._t("content")]},proxy:true}],null,true)})],1)}
-var ivr_nodevue_type_template_id_5b6f101b_staticRenderFns = []
+return [_c('div',{staticClass:"d-w164"},[_vm._t("menuItems",null,{"close":close})],2)]}}],null,true)})]},proxy:true},{key:"content",fn:function(){return [_vm._t("content")]},proxy:true}],null,true)})],2)}
+var ivr_nodevue_type_template_id_0696f265_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/cards/ivr_node/ivr_node_constants.js
@@ -23115,6 +23162,8 @@ const IVR_NODE_COLOR_MAPPING = {
 //
 //
 //
+//
+//
 
 
 
@@ -23226,8 +23275,8 @@ var ivr_nodevue_type_style_index_0_lang_less_ = __webpack_require__(212);
 
 var ivr_node_component = normalizeComponent(
   ivr_node_ivr_nodevue_type_script_lang_js_,
-  ivr_nodevue_type_template_id_5b6f101b_render,
-  ivr_nodevue_type_template_id_5b6f101b_staticRenderFns,
+  ivr_nodevue_type_template_id_0696f265_render,
+  ivr_nodevue_type_template_id_0696f265_staticRenderFns,
   false,
   null,
   null,
@@ -24576,9 +24625,9 @@ var group_row_component = normalizeComponent(
 /* harmony default export */ const group_row = (group_row_component.exports);
 ;// CONCATENATED MODULE: ./recipes/leftbar/group_row/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=6a63c490&
-var contact_rowvue_type_template_id_6a63c490_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-general-row',_vm._g({attrs:{"unread-count":_vm.unreadCount,"description":(_vm.name + " " + _vm.presenceText + " " + _vm.userStatus),"has-unreads":_vm.hasUnreads,"selected":_vm.selected,"has-call-button":true,"muted":_vm.muted,"is-typing":_vm.isTyping,"call-button-tooltip":_vm.callButtonTooltip,"unread-count-tooltip":_vm.unreadCountTooltip},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('dt-avatar',{attrs:{"size":"sm","seed":_vm.avatarSeed,"presence":_vm.avatarPresence}},[(_vm.avatarSrc)?_c('img',{attrs:{"data-qa":"dt-avatar-image","src":_vm.avatarSrc,"alt":_vm.name}}):(_vm.noInitials)?[_c('dt-icon',{attrs:{"name":"user","size":"200"}})]:[_vm._v(" "+_vm._s(_vm.avatarInitial)+" ")]],2)]},proxy:true},{key:"label",fn:function(){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.name)+" ")]),_c('div',{staticClass:"dt-leftbar-row__status"},[(_vm.presenceText)?_c('span',{class:['dt-leftbar-row__meta-context', _vm.presenceColorClass],attrs:{"data-qa":"dt-leftbar-row-presence-text"}},[_vm._v(" "+_vm._s(_vm.presenceText)+" ")]):_vm._e(),(_vm.userStatus)?_c('dt-emoji-text-wrapper',{staticClass:"dt-leftbar-row__meta-custom",attrs:{"size":"100","element-type":"span","data-qa":"dt-leftbar-row-user-status"}},[_vm._v(" "+_vm._s(_vm.userStatus)+" ")]):_vm._e()],1)]},proxy:true}])},_vm.$listeners))}
-var contact_rowvue_type_template_id_6a63c490_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/leftbar/contact_row/contact_row.vue?vue&type=template&id=5d3cfbea&
+var contact_rowvue_type_template_id_5d3cfbea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-general-row',_vm._g({attrs:{"unread-count":_vm.unreadCount,"description":(_vm.name + " " + _vm.presenceText + " " + _vm.userStatus),"has-unreads":_vm.hasUnreads,"selected":_vm.selected,"has-call-button":_vm.hasCallButton,"muted":_vm.muted,"is-typing":_vm.isTyping,"call-button-tooltip":_vm.callButtonTooltip,"unread-count-tooltip":_vm.unreadCountTooltip},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('dt-avatar',{attrs:{"size":"sm","seed":_vm.avatarSeed,"presence":_vm.avatarPresence}},[(_vm.avatarSrc)?_c('img',{attrs:{"data-qa":"dt-avatar-image","src":_vm.avatarSrc,"alt":_vm.name}}):(_vm.noInitials)?[_c('dt-icon',{attrs:{"name":"user","size":"200"}})]:[_vm._v(" "+_vm._s(_vm.avatarInitial)+" ")]],2)]},proxy:true},{key:"label",fn:function(){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.name)+" ")]),_c('div',{staticClass:"dt-leftbar-row__status"},[(_vm.presenceText)?_c('span',{class:['dt-leftbar-row__meta-context', _vm.presenceColorClass],attrs:{"data-qa":"dt-leftbar-row-presence-text"}},[_vm._v(" "+_vm._s(_vm.presenceText)+" ")]):_vm._e(),(_vm.userStatus)?_c('dt-emoji-text-wrapper',{staticClass:"dt-leftbar-row__meta-custom",attrs:{"size":"100","element-type":"span","data-qa":"dt-leftbar-row-user-status"}},[_vm._v(" "+_vm._s(_vm.userStatus)+" ")]):_vm._e()],1)]},proxy:true}])},_vm.$listeners))}
+var contact_rowvue_type_template_id_5d3cfbea_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/leftbar/contact_row/contact_row.vue?vue&type=script&lang=js&
@@ -24763,6 +24812,14 @@ var contact_rowvue_type_template_id_6a63c490_staticRenderFns = []
       default: false
     },
 
+    /**
+     * Whether the contact row should display a call button when hovered.
+     */
+    hasCallButton: {
+      type: Boolean,
+      default: true
+    },
+
     /**
      * Text shown when the call button is hovered.
      */
@@ -24831,8 +24888,8 @@ var contact_rowvue_type_template_id_6a63c490_staticRenderFns = []
 ;
 var contact_row_component = normalizeComponent(
   contact_row_contact_rowvue_type_script_lang_js_,
-  contact_rowvue_type_template_id_6a63c490_render,
-  contact_rowvue_type_template_id_6a63c490_staticRenderFns,
+  contact_rowvue_type_template_id_5d3cfbea_render,
+  contact_rowvue_type_template_id_5d3cfbea_staticRenderFns,
   false,
   null,
   null,