@dialpad/dialtone-vue 3.56.0 → 3.56.2

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [3.56.2](https://github.com/dialpad/dialtone-vue/compare/v3.56.1...v3.56.2) (2023-03-31)
+
+
+### Bug Fixes
+
+* **Image Viewer:** dt image viewer visual testing ([#874](https://github.com/dialpad/dialtone-vue/issues/874)) ([5400412](https://github.com/dialpad/dialtone-vue/commit/5400412963d2d3408e1556f6ca0f986a8bdc4c3d))
+* **Recipe Callbar Btn:** transparent background when btn is in disabled state ([#876](https://github.com/dialpad/dialtone-vue/issues/876)) ([1031e72](https://github.com/dialpad/dialtone-vue/commit/1031e72bcb8ee1d441a4b205bfbbca91536cd74b))
+
+## [3.56.1](https://github.com/dialpad/dialtone-vue/compare/v3.56.0...v3.56.1) (2023-03-30)
+
+
+### Bug Fixes
+
+* **Recipe Callbar Btn:** show tooltip when the callbar button is disa… ([#873](https://github.com/dialpad/dialtone-vue/issues/873)) ([c77a90b](https://github.com/dialpad/dialtone-vue/commit/c77a90b4f16d4b6a5fdc3361f6dd6a05d5ccb673))
+
 # [3.56.0](https://github.com/dialpad/dialtone-vue/compare/v3.55.0...v3.56.0) (2023-03-30)
 
 

package/dist/dialtone-vue.common.js

@@ -12762,18 +12762,18 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 ;// CONCATENATED MODULE: ./components/dropdown/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]!./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+;// 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/image_viewer/image_viewer.vue?vue&type=template&id=9b4c7502
 
-const image_viewervue_type_template_id_2229fad0_hoisted_1 = ["src", "alt"];
-const image_viewervue_type_template_id_2229fad0_hoisted_2 = ["aria-hidden"];
-const image_viewervue_type_template_id_2229fad0_hoisted_3 = {
+const image_viewervue_type_template_id_9b4c7502_hoisted_1 = ["src", "alt"];
+const image_viewervue_type_template_id_9b4c7502_hoisted_2 = ["aria-hidden"];
+const image_viewervue_type_template_id_9b4c7502_hoisted_3 = {
   "data-qa": "dt-image-viewer-full",
   class: "d-p0 d-bar0 d-wmx80p d-hmx80p",
   role: "dialog",
   "aria-modal": "true"
 };
-const image_viewervue_type_template_id_2229fad0_hoisted_4 = ["src", "alt"];
-function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props, $setup, $data, $options) {
+const image_viewervue_type_template_id_9b4c7502_hoisted_4 = ["src", "alt"];
+function image_viewervue_type_template_id_9b4c7502_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_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
@@ -12782,19 +12782,19 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     "data-qa": "dt-image-viewer-preview",
     "aria-label": $props.ariaLabel,
     importance: "clear",
-    onClick: $options.open
+    onClick: $options.openModal
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($props.imageButtonClass),
       src: $props.imageSrc,
       alt: $props.imageAlt
-    }, null, 10, image_viewervue_type_template_id_2229fad0_hoisted_1)]),
+    }, null, 10, image_viewervue_type_template_id_9b4c7502_hoisted_1)]),
     _: 1
-  }, 8, ["aria-label", "onClick"]), $data.show ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
+  }, 8, ["aria-label", "onClick"]), $data.isOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
     key: 0,
     to: "body"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-    "aria-hidden": $options.isOpen,
+    "aria-hidden": !$data.isOpen ? 'true' : 'false',
     class: "d-modal",
     "data-qa": "dt-modal"
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.modalListeners, true), {
@@ -12802,11 +12802,11 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     onMouseleave: _cache[1] || (_cache[1] = $event => $data.showCloseButton = false),
     onFocusin: _cache[2] || (_cache[2] = $event => $data.showCloseButton = true),
     onFocusout: _cache[3] || (_cache[3] = $event => $data.showCloseButton = false)
-  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_2229fad0_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_9b4c7502_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
     class: "d-wmx100p d-hmx100p",
     src: $props.imageSrc,
     alt: $props.imageAlt
-  }, null, 8, image_viewervue_type_template_id_2229fad0_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
+  }, null, 8, image_viewervue_type_template_id_9b4c7502_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
     name: "fade"
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
@@ -12828,9 +12828,9 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
       _: 1
     }, 8, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
     _: 1
-  })], 16, image_viewervue_type_template_id_2229fad0_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+  })], 16, image_viewervue_type_template_id_9b4c7502_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=9b4c7502
 
 ;// 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]!./components/image_viewer/image_viewer.vue?vue&type=script&lang=js
 
@@ -12845,6 +12845,18 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
   },
   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
      */
@@ -12886,19 +12898,28 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
       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 {
         click: event => {
@@ -12921,7 +12942,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
 
   },
   watch: {
-    show: {
+    isOpen: {
       immediate: true,
 
       handler(isShowing) {
@@ -12937,19 +12958,38 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
         }
       }
 
+    },
+    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() {
@@ -12959,7 +12999,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     },
 
     trapFocus(e) {
-      if (this.show) {
+      if (this.isOpen) {
         this.focusTrappedTabPress(e);
       }
     }
@@ -12974,7 +13014,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
 
 
 ;
-const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_2229fad0_render]])
+const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_9b4c7502_render]])
 
 /* harmony default export */ const image_viewer = (image_viewer_exports_);
 ;// CONCATENATED MODULE: ./components/image_viewer/index.js
@@ -21494,9 +21534,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=27e6bf78
+;// 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=b3920b20
 
-function callbar_buttonvue_type_template_id_27e6bf78_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_b3920b20_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");
@@ -21505,25 +21545,28 @@ function callbar_buttonvue_type_template_id_27e6bf78_render(_ctx, _cache, $props
     id: $props.id,
     offset: [0, -12]
   }, {
-    anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)({
+        'd-c-not-allowed': $props.disabled
+      })
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
       importance: $props.circle ? 'outlined' : 'clear',
       kind: "muted",
       "icon-position": "top",
-      disabled: $props.disabled,
+      "aria-disabled": $props.disabled,
       "aria-label": $props.ariaLabel,
       "label-class": $options.callbarButtonTextClass,
       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")]),
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
       _: 3
-    }, 8, ["importance", "disabled", "aria-label", "label-class", "width", "class"])]),
+    }, 8, ["importance", "aria-disabled", "aria-label", "label-class", "width", "class"])], 2)]),
     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=27e6bf78
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=b3920b20
 
 ;// 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
 
@@ -21630,11 +21673,13 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
   },
   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,
         'd-btn--icon-only': 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
       }];
     },
 
@@ -21659,10 +21704,10 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 });
 ;// 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=27e6bf78&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=b3920b20&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=27e6bf78&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=b3920b20&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -21672,7 +21717,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_27e6bf78_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_b3920b20_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js

package/dist/dialtone-vue.umd.js

@@ -12772,18 +12772,18 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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/image_viewer/image_viewer.vue?vue&type=template&id=9b4c7502
 
-const image_viewervue_type_template_id_2229fad0_hoisted_1 = ["src", "alt"];
-const image_viewervue_type_template_id_2229fad0_hoisted_2 = ["aria-hidden"];
-const image_viewervue_type_template_id_2229fad0_hoisted_3 = {
+const image_viewervue_type_template_id_9b4c7502_hoisted_1 = ["src", "alt"];
+const image_viewervue_type_template_id_9b4c7502_hoisted_2 = ["aria-hidden"];
+const image_viewervue_type_template_id_9b4c7502_hoisted_3 = {
   "data-qa": "dt-image-viewer-full",
   class: "d-p0 d-bar0 d-wmx80p d-hmx80p",
   role: "dialog",
   "aria-modal": "true"
 };
-const image_viewervue_type_template_id_2229fad0_hoisted_4 = ["src", "alt"];
-function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props, $setup, $data, $options) {
+const image_viewervue_type_template_id_9b4c7502_hoisted_4 = ["src", "alt"];
+function image_viewervue_type_template_id_9b4c7502_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_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
@@ -12792,19 +12792,19 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     "data-qa": "dt-image-viewer-preview",
     "aria-label": $props.ariaLabel,
     importance: "clear",
-    onClick: $options.open
+    onClick: $options.openModal
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($props.imageButtonClass),
       src: $props.imageSrc,
       alt: $props.imageAlt
-    }, null, 10, image_viewervue_type_template_id_2229fad0_hoisted_1)]),
+    }, null, 10, image_viewervue_type_template_id_9b4c7502_hoisted_1)]),
     _: 1
-  }, 8, ["aria-label", "onClick"]), $data.show ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
+  }, 8, ["aria-label", "onClick"]), $data.isOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
     key: 0,
     to: "body"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-    "aria-hidden": $options.isOpen,
+    "aria-hidden": !$data.isOpen ? 'true' : 'false',
     class: "d-modal",
     "data-qa": "dt-modal"
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.modalListeners, true), {
@@ -12812,11 +12812,11 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     onMouseleave: _cache[1] || (_cache[1] = $event => $data.showCloseButton = false),
     onFocusin: _cache[2] || (_cache[2] = $event => $data.showCloseButton = true),
     onFocusout: _cache[3] || (_cache[3] = $event => $data.showCloseButton = false)
-  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_2229fad0_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_9b4c7502_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
     class: "d-wmx100p d-hmx100p",
     src: $props.imageSrc,
     alt: $props.imageAlt
-  }, null, 8, image_viewervue_type_template_id_2229fad0_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
+  }, null, 8, image_viewervue_type_template_id_9b4c7502_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
     name: "fade"
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
@@ -12838,9 +12838,9 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
       _: 1
     }, 8, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
     _: 1
-  })], 16, image_viewervue_type_template_id_2229fad0_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+  })], 16, image_viewervue_type_template_id_9b4c7502_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=9b4c7502
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/image_viewer/image_viewer.vue?vue&type=script&lang=js
 
@@ -12855,6 +12855,18 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
   },
   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
      */
@@ -12896,19 +12908,28 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
       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 {
         click: event => {
@@ -12931,7 +12952,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
 
   },
   watch: {
-    show: {
+    isOpen: {
       immediate: true,
 
       handler(isShowing) {
@@ -12947,19 +12968,38 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
         }
       }
 
+    },
+    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() {
@@ -12969,7 +13009,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     },
 
     trapFocus(e) {
-      if (this.show) {
+      if (this.isOpen) {
         this.focusTrappedTabPress(e);
       }
     }
@@ -12984,7 +13024,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
 
 
 ;
-const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_2229fad0_render]])
+const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_9b4c7502_render]])
 
 /* harmony default export */ const image_viewer = (image_viewer_exports_);
 ;// CONCATENATED MODULE: ./components/image_viewer/index.js
@@ -21504,9 +21544,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-82.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=27e6bf78
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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=b3920b20
 
-function callbar_buttonvue_type_template_id_27e6bf78_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_b3920b20_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");
@@ -21515,25 +21555,28 @@ function callbar_buttonvue_type_template_id_27e6bf78_render(_ctx, _cache, $props
     id: $props.id,
     offset: [0, -12]
   }, {
-    anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
+    anchor: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", {
+      class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)({
+        'd-c-not-allowed': $props.disabled
+      })
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_button, {
       importance: $props.circle ? 'outlined' : 'clear',
       kind: "muted",
       "icon-position": "top",
-      disabled: $props.disabled,
+      "aria-disabled": $props.disabled,
       "aria-label": $props.ariaLabel,
       "label-class": $options.callbarButtonTextClass,
       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")]),
+      default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default"), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")]),
       _: 3
-    }, 8, ["importance", "disabled", "aria-label", "label-class", "width", "class"])]),
+    }, 8, ["importance", "aria-disabled", "aria-label", "label-class", "width", "class"])], 2)]),
     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=27e6bf78
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=b3920b20
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.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
 
@@ -21640,11 +21683,13 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
   },
   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,
         'd-btn--icon-only': 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
       }];
     },
 
@@ -21669,10 +21714,10 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 });
 ;// 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-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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=27e6bf78&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-74.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-74.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-74.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-74.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=b3920b20&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=27e6bf78&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=b3920b20&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -21682,7 +21727,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_27e6bf78_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_b3920b20_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js