@dialpad/dialtone-vue 2.74.0 → 2.74.2

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [2.74.2](https://github.com/dialpad/dialtone-vue/compare/v2.74.1...v2.74.2) (2023-03-31)
+
+
+### Bug Fixes
+
+* **Image Viewer:** dt image viewer visual testing ([#865](https://github.com/dialpad/dialtone-vue/issues/865)) ([f530286](https://github.com/dialpad/dialtone-vue/commit/f5302866f7c4d10a5be604d2fbd108fc71af9e28))
+* **Recipe Callbar Btn:** transparent background when btn is in disabled state ([#875](https://github.com/dialpad/dialtone-vue/issues/875)) ([fff9350](https://github.com/dialpad/dialtone-vue/commit/fff93500ac01ec626c78f3d0fde7757b82f1f800))
+
+## [2.74.1](https://github.com/dialpad/dialtone-vue/compare/v2.74.0...v2.74.1) (2023-03-30)
+
+
+### Bug Fixes
+
+* **Recipe Callbar Btn:** show tooltip when the callbar button is disa… ([#866](https://github.com/dialpad/dialtone-vue/issues/866)) ([b88ec69](https://github.com/dialpad/dialtone-vue/commit/b88ec697bfa23faa3d1d55a44c0ec53a8287665a))
+
 # [2.74.0](https://github.com/dialpad/dialtone-vue/compare/v2.73.0...v2.74.0) (2023-03-30)
 
 

package/dist/dialtone-vue.common.js

@@ -14677,9 +14677,9 @@ var dropdown_separator_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/dropdown/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!./components/image_viewer/image_viewer.vue?vue&type=template&id=3214f60f&
-var image_viewervue_type_template_id_3214f60f_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('dt-button',{attrs:{"data-qa":"dt-image-viewer-preview","aria-label":_vm.ariaLabel,"importance":"clear"},on:{"click":_vm.open}},[_c('img',{class:_vm.imageButtonClass,attrs:{"src":_vm.imageSrc,"alt":_vm.imageAlt}})]),(_vm.show)?_c('portal',[_c('div',_vm._g({staticClass:"d-modal",attrs:{"aria-hidden":_vm.isOpen,"data-qa":"dt-modal"},on:{"mouseover":function($event){_vm.showCloseButton = true},"mouseleave":function($event){_vm.showCloseButton = false},"focusin":function($event){_vm.showCloseButton = true},"focusout":function($event){_vm.showCloseButton = false}}},_vm.modalListeners),[_c('div',{staticClass:"d-p0 d-bar0 d-wmx80p d-hmx80p",attrs:{"data-qa":"dt-image-viewer-full","role":"dialog","aria-modal":"true"}},[_c('img',{staticClass:"d-wmx100p d-hmx100p",attrs:{"src":_vm.imageSrc,"alt":_vm.imageAlt}})]),_c('transition',{attrs:{"name":"fade"}},[(_vm.showCloseButton)?_c('dt-button',{ref:"closeImage",staticClass:"d-modal__close",attrs:{"data-qa":"dt-image-viewer-close-btn","circle":"","size":"lg","importance":"clear","kind":"inverted","aria-label":_vm.closeAriaLabel},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"close","size":"400"}})]},proxy:true}],null,false,1709155279)}):_vm._e()],1)],1)]):_vm._e()],1)}
-var image_viewervue_type_template_id_3214f60f_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/image_viewer/image_viewer.vue?vue&type=template&id=18c60894&
+var image_viewervue_type_template_id_18c60894_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('dt-button',{attrs:{"data-qa":"dt-image-viewer-preview","aria-label":_vm.ariaLabel,"importance":"clear"},on:{"click":_vm.openModal}},[_c('img',{class:_vm.imageButtonClass,attrs:{"src":_vm.imageSrc,"alt":_vm.imageAlt}})]),(_vm.isOpen)?_c('portal',[_c('div',_vm._g({staticClass:"d-modal",attrs:{"aria-hidden":!_vm.isOpen ? 'true' : 'false',"data-qa":"dt-modal"},on:{"mouseover":function($event){_vm.showCloseButton = true},"mouseleave":function($event){_vm.showCloseButton = false},"focusin":function($event){_vm.showCloseButton = true},"focusout":function($event){_vm.showCloseButton = false}}},_vm.modalListeners),[_c('div',{staticClass:"d-p0 d-bar0 d-wmx80p d-hmx80p",attrs:{"data-qa":"dt-image-viewer-full","role":"dialog","aria-modal":"true"}},[_c('img',{staticClass:"d-wmx100p d-hmx100p",attrs:{"src":_vm.imageSrc,"alt":_vm.imageAlt}})]),_c('transition',{attrs:{"name":"fade"}},[(_vm.showCloseButton)?_c('dt-button',{ref:"closeImage",staticClass:"d-modal__close",attrs:{"data-qa":"dt-image-viewer-close-btn","circle":"","size":"lg","importance":"clear","kind":"inverted","aria-label":_vm.closeAriaLabel},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"close","size":"400"}})]},proxy:true}],null,false,1709155279)}):_vm._e()],1)],1)]):_vm._e()],1)}
+var image_viewervue_type_template_id_18c60894_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!./components/image_viewer/image_viewer.vue?vue&type=script&lang=js&
@@ -14760,6 +14760,18 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
   },
   mixins: [modal],
   props: {
+    /**
+     * Controls whether the image modal is shown. Leaving this null will have the image modal
+     * trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+
     /**
      * URL of the image to be shown
      */
@@ -14801,19 +14813,28 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
       required: true
     }
   },
+  emits: [
+  /**
+   * Emitted when popover is shown or hidden
+   *
+   * @event opened
+   * @type {Boolean}
+   */
+  'opened',
+  /**
+   * Event fired to sync the open prop with the parent component
+   * @event update:open
+   */
+  'update:open'],
 
   data() {
     return {
-      show: false,
-      showCloseButton: true
+      showCloseButton: true,
+      isOpen: false
     };
   },
 
   computed: {
-    isOpen() {
-      return `${!this.show}`;
-    },
-
     modalListeners() {
       return { ...this.$listeners,
         click: event => {
@@ -14836,7 +14857,7 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
 
   },
   watch: {
-    show: {
+    isOpen: {
       immediate: true,
 
       handler(isShowing) {
@@ -14852,19 +14873,38 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
         }
       }
 
+    },
+    open: {
+      handler: function (open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
     }
   },
   methods: {
-    open() {
-      this.show = true;
+    openModal() {
+      // Has custom control passed in
+      if (this.open !== null) {
+        return;
+      }
+
+      this.isOpen = true;
       this.showCloseButton = true;
+      this.$emit('opened', true);
       setTimeout(() => {
         this.focusAfterOpen();
       });
     },
 
     close() {
-      this.show = false;
+      this.isOpen = false;
+      this.$emit('opened', false);
+
+      if (this.open !== null) {
+        this.$emit('update:open', false);
+      }
     },
 
     focusAfterOpen() {
@@ -14874,7 +14914,7 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
     },
 
     trapFocus(e) {
-      if (this.show) {
+      if (this.isOpen) {
         this.focusTrappedTabPress(e);
       }
     }
@@ -14893,8 +14933,8 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
 ;
 var image_viewer_component = normalizeComponent(
   image_viewer_image_viewervue_type_script_lang_js_,
-  image_viewervue_type_template_id_3214f60f_render,
-  image_viewervue_type_template_id_3214f60f_staticRenderFns,
+  image_viewervue_type_template_id_18c60894_render,
+  image_viewervue_type_template_id_18c60894_staticRenderFns,
   false,
   null,
   null,
@@ -22616,9 +22656,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=54dca072&
-var callbar_buttonvue_type_template_id_54dca072_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_54dca072_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=9499378e&
+var callbar_buttonvue_type_template_id_9499378e_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('span',{class:{ 'd-c-not-allowed': _vm.disabled }},[_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","aria-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)],1)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
+var callbar_buttonvue_type_template_id_9499378e_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&
@@ -22650,6 +22690,10 @@ var callbar_buttonvue_type_template_id_54dca072_staticRenderFns = []
 //
 //
 //
+//
+//
+//
+//
 
 
 
@@ -22762,10 +22806,12 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
   'click'],
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', 'd-fc-primary', {
+      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', {
         'dt-recipe-callbar-button--circle': this.circle,
         'dt-recipe-callbar-button--active': this.active,
-        'dt-recipe-callbar-button--danger': this.danger
+        'dt-recipe-callbar-button--danger': this.danger,
+        'd-btn--disabled d-bgc-transparent': this.disabled,
+        'd-fc-primary': !this.disabled
       }];
     },
 
@@ -22805,8 +22851,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_54dca072_render,
-  callbar_buttonvue_type_template_id_54dca072_staticRenderFns,
+  callbar_buttonvue_type_template_id_9499378e_render,
+  callbar_buttonvue_type_template_id_9499378e_staticRenderFns,
   false,
   null,
   null,

package/dist/dialtone-vue.umd.js

@@ -14687,9 +14687,9 @@ var dropdown_separator_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/dropdown/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!./components/image_viewer/image_viewer.vue?vue&type=template&id=3214f60f&
-var image_viewervue_type_template_id_3214f60f_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('dt-button',{attrs:{"data-qa":"dt-image-viewer-preview","aria-label":_vm.ariaLabel,"importance":"clear"},on:{"click":_vm.open}},[_c('img',{class:_vm.imageButtonClass,attrs:{"src":_vm.imageSrc,"alt":_vm.imageAlt}})]),(_vm.show)?_c('portal',[_c('div',_vm._g({staticClass:"d-modal",attrs:{"aria-hidden":_vm.isOpen,"data-qa":"dt-modal"},on:{"mouseover":function($event){_vm.showCloseButton = true},"mouseleave":function($event){_vm.showCloseButton = false},"focusin":function($event){_vm.showCloseButton = true},"focusout":function($event){_vm.showCloseButton = false}}},_vm.modalListeners),[_c('div',{staticClass:"d-p0 d-bar0 d-wmx80p d-hmx80p",attrs:{"data-qa":"dt-image-viewer-full","role":"dialog","aria-modal":"true"}},[_c('img',{staticClass:"d-wmx100p d-hmx100p",attrs:{"src":_vm.imageSrc,"alt":_vm.imageAlt}})]),_c('transition',{attrs:{"name":"fade"}},[(_vm.showCloseButton)?_c('dt-button',{ref:"closeImage",staticClass:"d-modal__close",attrs:{"data-qa":"dt-image-viewer-close-btn","circle":"","size":"lg","importance":"clear","kind":"inverted","aria-label":_vm.closeAriaLabel},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"close","size":"400"}})]},proxy:true}],null,false,1709155279)}):_vm._e()],1)],1)]):_vm._e()],1)}
-var image_viewervue_type_template_id_3214f60f_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/image_viewer/image_viewer.vue?vue&type=template&id=18c60894&
+var image_viewervue_type_template_id_18c60894_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('dt-button',{attrs:{"data-qa":"dt-image-viewer-preview","aria-label":_vm.ariaLabel,"importance":"clear"},on:{"click":_vm.openModal}},[_c('img',{class:_vm.imageButtonClass,attrs:{"src":_vm.imageSrc,"alt":_vm.imageAlt}})]),(_vm.isOpen)?_c('portal',[_c('div',_vm._g({staticClass:"d-modal",attrs:{"aria-hidden":!_vm.isOpen ? 'true' : 'false',"data-qa":"dt-modal"},on:{"mouseover":function($event){_vm.showCloseButton = true},"mouseleave":function($event){_vm.showCloseButton = false},"focusin":function($event){_vm.showCloseButton = true},"focusout":function($event){_vm.showCloseButton = false}}},_vm.modalListeners),[_c('div',{staticClass:"d-p0 d-bar0 d-wmx80p d-hmx80p",attrs:{"data-qa":"dt-image-viewer-full","role":"dialog","aria-modal":"true"}},[_c('img',{staticClass:"d-wmx100p d-hmx100p",attrs:{"src":_vm.imageSrc,"alt":_vm.imageAlt}})]),_c('transition',{attrs:{"name":"fade"}},[(_vm.showCloseButton)?_c('dt-button',{ref:"closeImage",staticClass:"d-modal__close",attrs:{"data-qa":"dt-image-viewer-close-btn","circle":"","size":"lg","importance":"clear","kind":"inverted","aria-label":_vm.closeAriaLabel},on:{"click":_vm.close},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('dt-icon',{attrs:{"name":"close","size":"400"}})]},proxy:true}],null,false,1709155279)}):_vm._e()],1)],1)]):_vm._e()],1)}
+var image_viewervue_type_template_id_18c60894_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/image_viewer/image_viewer.vue?vue&type=script&lang=js&
@@ -14770,6 +14770,18 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
   },
   mixins: [modal],
   props: {
+    /**
+     * Controls whether the image modal is shown. Leaving this null will have the image modal
+     * trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+
     /**
      * URL of the image to be shown
      */
@@ -14811,19 +14823,28 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
       required: true
     }
   },
+  emits: [
+  /**
+   * Emitted when popover is shown or hidden
+   *
+   * @event opened
+   * @type {Boolean}
+   */
+  'opened',
+  /**
+   * Event fired to sync the open prop with the parent component
+   * @event update:open
+   */
+  'update:open'],
 
   data() {
     return {
-      show: false,
-      showCloseButton: true
+      showCloseButton: true,
+      isOpen: false
     };
   },
 
   computed: {
-    isOpen() {
-      return `${!this.show}`;
-    },
-
     modalListeners() {
       return { ...this.$listeners,
         click: event => {
@@ -14846,7 +14867,7 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
 
   },
   watch: {
-    show: {
+    isOpen: {
       immediate: true,
 
       handler(isShowing) {
@@ -14862,19 +14883,38 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
         }
       }
 
+    },
+    open: {
+      handler: function (open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
     }
   },
   methods: {
-    open() {
-      this.show = true;
+    openModal() {
+      // Has custom control passed in
+      if (this.open !== null) {
+        return;
+      }
+
+      this.isOpen = true;
       this.showCloseButton = true;
+      this.$emit('opened', true);
       setTimeout(() => {
         this.focusAfterOpen();
       });
     },
 
     close() {
-      this.show = false;
+      this.isOpen = false;
+      this.$emit('opened', false);
+
+      if (this.open !== null) {
+        this.$emit('update:open', false);
+      }
     },
 
     focusAfterOpen() {
@@ -14884,7 +14924,7 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
     },
 
     trapFocus(e) {
-      if (this.show) {
+      if (this.isOpen) {
         this.focusTrappedTabPress(e);
       }
     }
@@ -14903,8 +14943,8 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
 ;
 var image_viewer_component = normalizeComponent(
   image_viewer_image_viewervue_type_script_lang_js_,
-  image_viewervue_type_template_id_3214f60f_render,
-  image_viewervue_type_template_id_3214f60f_staticRenderFns,
+  image_viewervue_type_template_id_18c60894_render,
+  image_viewervue_type_template_id_18c60894_staticRenderFns,
   false,
   null,
   null,
@@ -22626,9 +22666,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=54dca072&
-var callbar_buttonvue_type_template_id_54dca072_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_54dca072_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=9499378e&
+var callbar_buttonvue_type_template_id_9499378e_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('span',{class:{ 'd-c-not-allowed': _vm.disabled }},[_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","aria-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)],1)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
+var callbar_buttonvue_type_template_id_9499378e_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[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&
@@ -22660,6 +22700,10 @@ var callbar_buttonvue_type_template_id_54dca072_staticRenderFns = []
 //
 //
 //
+//
+//
+//
+//
 
 
 
@@ -22772,10 +22816,12 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
   'click'],
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', 'd-fc-primary', {
+      return [this.buttonClass, 'dt-recipe-callbar-button', 'd-px0', {
         'dt-recipe-callbar-button--circle': this.circle,
         'dt-recipe-callbar-button--active': this.active,
-        'dt-recipe-callbar-button--danger': this.danger
+        'dt-recipe-callbar-button--danger': this.danger,
+        'd-btn--disabled d-bgc-transparent': this.disabled,
+        'd-fc-primary': !this.disabled
       }];
     },
 
@@ -22815,8 +22861,8 @@ var callbar_buttonvue_type_style_index_0_lang_less_ = __webpack_require__(736);
 
 var callbar_button_component = normalizeComponent(
   callbar_button_callbar_buttonvue_type_script_lang_js_,
-  callbar_buttonvue_type_template_id_54dca072_render,
-  callbar_buttonvue_type_template_id_54dca072_staticRenderFns,
+  callbar_buttonvue_type_template_id_9499378e_render,
+  callbar_buttonvue_type_template_id_9499378e_staticRenderFns,
   false,
   null,
   null,