@dialpad/dialtone-vue 2.74.1 → 2.74.3

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [2.74.3](https://github.com/dialpad/dialtone-vue/compare/v2.74.2...v2.74.3) (2023-03-31)
+
+
+### Bug Fixes
+
+* **Avatar:** null protect firstElementChild ([8cc0b40](https://github.com/dialpad/dialtone-vue/commit/8cc0b409fa2347fba70cdabe9afd47d7cd0c108f))
+
+## [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)
 
 

package/dist/dialtone-vue.common.js

@@ -2378,7 +2378,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ const setPublicPath = (null);
 
-;// 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/avatar/avatar.vue?vue&type=template&id=327f7469&
+;// 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/avatar/avatar.vue?vue&type=template&id=f4cb04e8&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.avatarClasses,style:(_vm.initialKindStyle),attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_c('div',{ref:"canvas",class:[_vm.canvasClass, 'd-avatar__canvas']},[(_vm.showDefaultSlot)?_vm._t("default"):_vm._e(),(_vm.showInitials)?_c('span',{staticClass:"d-ps-absolute d-zi-base",class:_vm.AVATAR_KIND_MODIFIERS.initials},[_vm._v(" "+_vm._s(_vm.formattedInitials)+" ")]):_vm._e()],2),(_vm.showGroup)?_c('span',{staticClass:"d-avatar__count d-zi-base1",attrs:{"data-qa":"dt-avatar-count"}},[_vm._v(_vm._s(_vm.formattedGroup))]):_vm._e(),(_vm.presence && !_vm.showGroup)?_c('dt-presence',_vm._b({staticClass:"d-zi-base1",class:[
       'd-avatar__presence',
       _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size] ],attrs:{"presence":_vm.presence,"data-qa":"dt-presence"}},'dt-presence',_vm.presenceProps,false)):_vm._e()],1)}
@@ -3109,10 +3109,12 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 
   methods: {
     async init() {
+      var _this$$refs$canvas;
+
       if (this.initializing) return;
       this.kind = null;
       await this.$nextTick();
-      const firstChild = this.$refs.canvas.firstElementChild || this.$refs.canvas;
+      const firstChild = ((_this$$refs$canvas = this.$refs.canvas) === null || _this$$refs$canvas === void 0 ? void 0 : _this$$refs$canvas.firstElementChild) || this.$refs.canvas;
       this.formatInitials(this.initials);
       this.setKind(firstChild);
       this.kindHandler(firstChild);
@@ -14677,9 +14679,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 +14762,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 +14815,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 +14859,7 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
 
   },
   watch: {
-    show: {
+    isOpen: {
       immediate: true,
 
       handler(isShowing) {
@@ -14852,19 +14875,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 +14916,7 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
     },
 
     trapFocus(e) {
-      if (this.show) {
+      if (this.isOpen) {
         this.focusTrappedTabPress(e);
       }
     }
@@ -14893,8 +14935,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 +22658,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=0594eb7a&
-var callbar_buttonvue_type_template_id_0594eb7a_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_0594eb7a_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&
@@ -22754,16 +22796,6 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
       type: String,
       default: 'xl',
       validator: size => VALID_WIDTH_SIZE.includes(size)
-    },
-
-    /**
-     * Whether to show the tooltip text. Sometimes we want to show it when the button is disabled.
-     * @values true, false
-     * @see https://dialpad.design/components/button.html#disabled
-     */
-    showTooltip: {
-      type: Boolean,
-      default: false
     }
   },
   emits: [
@@ -22780,7 +22812,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
         'dt-recipe-callbar-button--circle': this.circle,
         'dt-recipe-callbar-button--active': this.active,
         'dt-recipe-callbar-button--danger': this.danger,
-        'd-btn--disabled': this.disabled,
+        'd-btn--disabled d-bgc-transparent': this.disabled,
         'd-fc-primary': !this.disabled
       }];
     },
@@ -22821,8 +22853,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_0594eb7a_render,
-  callbar_buttonvue_type_template_id_0594eb7a_staticRenderFns,
+  callbar_buttonvue_type_template_id_9499378e_render,
+  callbar_buttonvue_type_template_id_9499378e_staticRenderFns,
   false,
   null,
   null,

package/dist/dialtone-vue.umd.js

@@ -2388,7 +2388,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ const setPublicPath = (null);
 
-;// 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/avatar/avatar.vue?vue&type=template&id=327f7469&
+;// 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/avatar/avatar.vue?vue&type=template&id=f4cb04e8&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.avatarClasses,style:(_vm.initialKindStyle),attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_c('div',{ref:"canvas",class:[_vm.canvasClass, 'd-avatar__canvas']},[(_vm.showDefaultSlot)?_vm._t("default"):_vm._e(),(_vm.showInitials)?_c('span',{staticClass:"d-ps-absolute d-zi-base",class:_vm.AVATAR_KIND_MODIFIERS.initials},[_vm._v(" "+_vm._s(_vm.formattedInitials)+" ")]):_vm._e()],2),(_vm.showGroup)?_c('span',{staticClass:"d-avatar__count d-zi-base1",attrs:{"data-qa":"dt-avatar-count"}},[_vm._v(_vm._s(_vm.formattedGroup))]):_vm._e(),(_vm.presence && !_vm.showGroup)?_c('dt-presence',_vm._b({staticClass:"d-zi-base1",class:[
       'd-avatar__presence',
       _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size] ],attrs:{"presence":_vm.presence,"data-qa":"dt-presence"}},'dt-presence',_vm.presenceProps,false)):_vm._e()],1)}
@@ -3119,10 +3119,12 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 
   methods: {
     async init() {
+      var _this$$refs$canvas;
+
       if (this.initializing) return;
       this.kind = null;
       await this.$nextTick();
-      const firstChild = this.$refs.canvas.firstElementChild || this.$refs.canvas;
+      const firstChild = ((_this$$refs$canvas = this.$refs.canvas) === null || _this$$refs$canvas === void 0 ? void 0 : _this$$refs$canvas.firstElementChild) || this.$refs.canvas;
       this.formatInitials(this.initials);
       this.setKind(firstChild);
       this.kindHandler(firstChild);
@@ -14687,9 +14689,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 +14772,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 +14825,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 +14869,7 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
 
   },
   watch: {
-    show: {
+    isOpen: {
       immediate: true,
 
       handler(isShowing) {
@@ -14862,19 +14885,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 +14926,7 @@ var image_viewervue_type_template_id_3214f60f_staticRenderFns = []
     },
 
     trapFocus(e) {
-      if (this.show) {
+      if (this.isOpen) {
         this.focusTrappedTabPress(e);
       }
     }
@@ -14903,8 +14945,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 +22668,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=0594eb7a&
-var callbar_buttonvue_type_template_id_0594eb7a_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_0594eb7a_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&
@@ -22764,16 +22806,6 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
       type: String,
       default: 'xl',
       validator: size => VALID_WIDTH_SIZE.includes(size)
-    },
-
-    /**
-     * Whether to show the tooltip text. Sometimes we want to show it when the button is disabled.
-     * @values true, false
-     * @see https://dialpad.design/components/button.html#disabled
-     */
-    showTooltip: {
-      type: Boolean,
-      default: false
     }
   },
   emits: [
@@ -22790,7 +22822,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
         'dt-recipe-callbar-button--circle': this.circle,
         'dt-recipe-callbar-button--active': this.active,
         'dt-recipe-callbar-button--danger': this.danger,
-        'd-btn--disabled': this.disabled,
+        'd-btn--disabled d-bgc-transparent': this.disabled,
         'd-fc-primary': !this.disabled
       }];
     },
@@ -22831,8 +22863,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_0594eb7a_render,
-  callbar_buttonvue_type_template_id_0594eb7a_staticRenderFns,
+  callbar_buttonvue_type_template_id_9499378e_render,
+  callbar_buttonvue_type_template_id_9499378e_staticRenderFns,
   false,
   null,
   null,