@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/image-viewer.cjs

@@ -1,2 +1,244 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../chunks/modal-qEzlo0Sj.js"),l=require("./constants.cjs"),e=require("vue"),d=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),m=require("./button.cjs"),p=require("./icon.cjs");require("./utils.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const g={name:"DtImageViewer",components:{DtButton:m.DtButton,DtIcon:p.DtIcon},mixins:[c.M],props:{open:{type:Boolean,default:null},imageSrc:{type:String,required:!0},imageAlt:{type:String,required:!0},imageButtonClass:{type:String,required:!1,default:""},ariaLabel:{type:String,required:!0},closeAriaLabel:{type:String,required:!0}},emits:["opened","update:open"],data(){return{showCloseButton:!0,isOpen:!1}},computed:{modalListeners(){return{click:t=>{t.target===t.currentTarget&&this.close()},keydown:t=>{switch(t.code){case l.EVENT_KEYNAMES.esc:case l.EVENT_KEYNAMES.escape:this.close();break;case l.EVENT_KEYNAMES.tab:this.trapFocus(t);break}}}}},watch:{isOpen:{immediate:!0,handler(t){var o;t?this.previousActiveElement=document.activeElement:((o=this.previousActiveElement)==null||o.focus(),this.previousActiveElement=null)}},open:{handler:function(t){t!==null&&(this.isOpen=t)},immediate:!0}},methods:{openModal(){this.open===null&&(this.isOpen=!0,this.showCloseButton=!0,this.$emit("opened",!0),setTimeout(()=>{this.focusAfterOpen()}))},close(){this.isOpen=!1,this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},focusAfterOpen(){var t;(t=this.$refs.closeImage)==null||t.$el.focus()},trapFocus(t){this.isOpen&&this.focusTrappedTabPress(t)}}},_=["src","alt"],f=["aria-hidden"],h={"data-qa":"dt-image-viewer-full",class:"d-image-viewer__full",role:"dialog","aria-modal":"true"},v=["src","alt"];function w(t,o,i,C,r,s){const a=e.resolveComponent("dt-button"),u=e.resolveComponent("dt-icon");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(a,{"data-qa":"dt-image-viewer-preview",class:"d-image-viewer__preview-button","aria-label":i.ariaLabel,importance:"clear",onClick:s.openModal},{default:e.withCtx(()=>[e.createElementVNode("img",{class:e.normalizeClass(i.imageButtonClass),src:i.imageSrc,alt:i.imageAlt},null,10,_)]),_:1},8,["aria-label","onClick"]),r.isOpen?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:"body"},[e.createElementVNode("div",e.mergeProps({"aria-hidden":r.isOpen?"false":"true",class:"d-modal","data-qa":"dt-modal"},e.toHandlers(s.modalListeners,!0),{onMouseover:o[0]||(o[0]=n=>r.showCloseButton=!0),onMouseleave:o[1]||(o[1]=n=>r.showCloseButton=!1),onFocusin:o[2]||(o[2]=n=>r.showCloseButton=!0),onFocusout:o[3]||(o[3]=n=>r.showCloseButton=!1)}),[e.createElementVNode("div",h,[e.createElementVNode("img",{class:"d-image-viewer__full__image",src:i.imageSrc,alt:i.imageAlt},null,8,v)]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[r.showCloseButton?(e.openBlock(),e.createBlock(a,{key:0,ref:"closeImage","data-qa":"dt-image-viewer-close-btn",class:"d-modal__close",circle:"",size:"lg",importance:"clear",kind:"inverted","aria-label":i.closeAriaLabel,onClick:s.close},{icon:e.withCtx(()=>[e.createVNode(u,{class:"d-image-viewer__close-button",name:"close",size:"400"})]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("",!0)]),_:1})],16,f)])):e.createCommentVNode("",!0)])}const b=d._(g,[["render",w]]);exports.DtImageViewer=b;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const modal = require("../chunks/modal-VgxXAQFP.js");
+const common_constants = require("../common/constants.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const lib_button = require("./button.cjs");
+const lib_icon = require("./icon.cjs");
+require("../common/utils.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const _sfc_main = {
+  name: "DtImageViewer",
+  components: {
+    DtButton: lib_button.DtButton,
+    DtIcon: lib_icon.DtIcon
+  },
+  mixins: [modal.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
+     */
+    imageSrc: {
+      type: String,
+      required: true
+    },
+    /**
+     * Alt text of image
+     */
+    imageAlt: {
+      type: String,
+      required: true
+    },
+    /**
+     * Image Class
+     */
+    imageButtonClass: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * Aria label
+     */
+    ariaLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * Aria label for close button
+     */
+    closeAriaLabel: {
+      type: String,
+      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 {
+      showCloseButton: true,
+      isOpen: false
+    };
+  },
+  computed: {
+    modalListeners() {
+      return {
+        click: (event) => {
+          event.target === event.currentTarget && this.close();
+        },
+        keydown: (event) => {
+          switch (event.code) {
+            case common_constants.EVENT_KEYNAMES.esc:
+            case common_constants.EVENT_KEYNAMES.escape:
+              this.close();
+              break;
+            case common_constants.EVENT_KEYNAMES.tab:
+              this.trapFocus(event);
+              break;
+          }
+        }
+      };
+    }
+  },
+  watch: {
+    isOpen: {
+      immediate: true,
+      handler(isShowing) {
+        var _a;
+        if (isShowing) {
+          this.previousActiveElement = document.activeElement;
+        } else {
+          (_a = this.previousActiveElement) == null ? void 0 : _a.focus();
+          this.previousActiveElement = null;
+        }
+      }
+    },
+    open: {
+      handler: function(open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    openModal() {
+      if (this.open !== null) {
+        return;
+      }
+      this.isOpen = true;
+      this.showCloseButton = true;
+      this.$emit("opened", true);
+      setTimeout(() => {
+        this.focusAfterOpen();
+      });
+    },
+    close() {
+      this.isOpen = false;
+      this.$emit("opened", false);
+      if (this.open !== null) {
+        this.$emit("update:open", false);
+      }
+    },
+    focusAfterOpen() {
+      var _a;
+      (_a = this.$refs.closeImage) == null ? void 0 : _a.$el.focus();
+    },
+    trapFocus(e) {
+      if (this.isOpen) {
+        this.focusTrappedTabPress(e);
+      }
+    }
+  }
+};
+const _hoisted_1 = ["src", "alt"];
+const _hoisted_2 = ["aria-hidden"];
+const _hoisted_3 = {
+  "data-qa": "dt-image-viewer-full",
+  class: "d-image-viewer__full",
+  role: "dialog",
+  "aria-modal": "true"
+};
+const _hoisted_4 = ["src", "alt"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  return vue.openBlock(), vue.createElementBlock("div", null, [
+    vue.createVNode(_component_dt_button, {
+      "data-qa": "dt-image-viewer-preview",
+      class: "d-image-viewer__preview-button",
+      "aria-label": $props.ariaLabel,
+      importance: "clear",
+      onClick: $options.openModal
+    }, {
+      default: vue.withCtx(() => [
+        vue.createElementVNode("img", {
+          class: vue.normalizeClass($props.imageButtonClass),
+          src: $props.imageSrc,
+          alt: $props.imageAlt
+        }, null, 10, _hoisted_1)
+      ]),
+      _: 1
+    }, 8, ["aria-label", "onClick"]),
+    $data.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+      key: 0,
+      to: "body"
+    }, [
+      vue.createElementVNode("div", vue.mergeProps({
+        "aria-hidden": !$data.isOpen ? "true" : "false",
+        class: "d-modal",
+        "data-qa": "dt-modal"
+      }, vue.toHandlers($options.modalListeners, true), {
+        onMouseover: _cache[0] || (_cache[0] = ($event) => $data.showCloseButton = true),
+        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)
+      }), [
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.createElementVNode("img", {
+            class: "d-image-viewer__full__image",
+            src: $props.imageSrc,
+            alt: $props.imageAlt
+          }, null, 8, _hoisted_4)
+        ]),
+        vue.createVNode(vue.Transition, { name: "fade" }, {
+          default: vue.withCtx(() => [
+            $data.showCloseButton ? (vue.openBlock(), vue.createBlock(_component_dt_button, {
+              key: 0,
+              ref: "closeImage",
+              "data-qa": "dt-image-viewer-close-btn",
+              class: "d-modal__close",
+              circle: "",
+              size: "lg",
+              importance: "clear",
+              kind: "inverted",
+              "aria-label": $props.closeAriaLabel,
+              onClick: $options.close
+            }, {
+              icon: vue.withCtx(() => [
+                vue.createVNode(_component_dt_icon, {
+                  class: "d-image-viewer__close-button",
+                  name: "close",
+                  size: "400"
+                })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "onClick"])) : vue.createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 16, _hoisted_2)
+    ])) : vue.createCommentVNode("", true)
+  ]);
+}
+const DtImageViewer = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtImageViewer = DtImageViewer;
 //# sourceMappingURL=image-viewer.cjs.map

package/dist/lib/image-viewer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.cjs","sources":["../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      to=\"body\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeAriaLabel\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Aria label for close button\n     */\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n        },\n      };\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      this.$refs.closeImage?.$el.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIcon","Modal","event","EVENT_KEYNAMES","isShowing","_a","open","e","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_createElementVNode","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon"],"mappings":"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"}
+{"version":3,"file":"image-viewer.cjs","sources":["../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      to=\"body\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeAriaLabel\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Aria label for close button\n     */\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n        },\n      };\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      this.$refs.closeImage?.$el.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtIcon","Modal","EVENT_KEYNAMES","_createElementBlock","_createVNode","_createElementVNode","_createBlock","_Teleport","_mergeProps","_toHandlers","_Transition"],"mappings":"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"}

package/dist/lib/image-viewer.js

@@ -1,21 +1,21 @@
-import { M as h } from "../chunks/modal-VuMFkZFH.js";
-import { EVENT_KEYNAMES as l } from "./constants.js";
-import { resolveComponent as d, openBlock as n, createElementBlock as _, createVNode as u, withCtx as m, createElementVNode as s, normalizeClass as v, createBlock as p, Teleport as w, mergeProps as b, toHandlers as C, Transition as k, createCommentVNode as f } from "vue";
-import { _ as B } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtButton as A } from "./button.js";
-import { DtIcon as y } from "./icon.js";
-import "./utils.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import { Modal } from "../chunks/modal-XOr4kiNZ.js";
+import { EVENT_KEYNAMES } from "../common/constants.js";
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, createBlock, Teleport, mergeProps, toHandlers, Transition, createCommentVNode } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtButton } from "./button.js";
+import { DtIcon } from "./icon.js";
+import "../common/utils.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-const E = {
+const _sfc_main = {
   name: "DtImageViewer",
   components: {
-    DtButton: A,
-    DtIcon: y
+    DtButton,
+    DtIcon
   },
-  mixins: [h],
+  mixins: [Modal],
   props: {
     /**
      * Controls whether the image modal is shown. Leaving this null will have the image modal
@@ -33,21 +33,21 @@ const E = {
      */
     imageSrc: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Alt text of image
      */
     imageAlt: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Image Class
      */
     imageButtonClass: {
       type: String,
-      required: !1,
+      required: false,
       default: ""
     },
     /**
@@ -55,14 +55,14 @@ const E = {
      */
     ariaLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Aria label for close button
      */
     closeAriaLabel: {
       type: String,
-      required: !0
+      required: true
     }
   },
   emits: [
@@ -81,24 +81,24 @@ const E = {
   ],
   data() {
     return {
-      showCloseButton: !0,
-      isOpen: !1
+      showCloseButton: true,
+      isOpen: false
     };
   },
   computed: {
     modalListeners() {
       return {
-        click: (e) => {
-          e.target === e.currentTarget && this.close();
+        click: (event) => {
+          event.target === event.currentTarget && this.close();
         },
-        keydown: (e) => {
-          switch (e.code) {
-            case l.esc:
-            case l.escape:
+        keydown: (event) => {
+          switch (event.code) {
+            case EVENT_KEYNAMES.esc:
+            case EVENT_KEYNAMES.escape:
               this.close();
               break;
-            case l.tab:
-              this.trapFocus(e);
+            case EVENT_KEYNAMES.tab:
+              this.trapFocus(event);
               break;
           }
         }
@@ -107,85 +107,109 @@ const E = {
   },
   watch: {
     isOpen: {
-      immediate: !0,
-      handler(e) {
-        var t;
-        e ? this.previousActiveElement = document.activeElement : ((t = this.previousActiveElement) == null || t.focus(), this.previousActiveElement = null);
+      immediate: true,
+      handler(isShowing) {
+        var _a;
+        if (isShowing) {
+          this.previousActiveElement = document.activeElement;
+        } else {
+          (_a = this.previousActiveElement) == null ? void 0 : _a.focus();
+          this.previousActiveElement = null;
+        }
       }
     },
     open: {
-      handler: function(e) {
-        e !== null && (this.isOpen = e);
+      handler: function(open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
       },
-      immediate: !0
+      immediate: true
     }
   },
   methods: {
     openModal() {
-      this.open === null && (this.isOpen = !0, this.showCloseButton = !0, this.$emit("opened", !0), setTimeout(() => {
+      if (this.open !== null) {
+        return;
+      }
+      this.isOpen = true;
+      this.showCloseButton = true;
+      this.$emit("opened", true);
+      setTimeout(() => {
         this.focusAfterOpen();
-      }));
+      });
     },
     close() {
-      this.isOpen = !1, this.$emit("opened", !1), this.open !== null && this.$emit("update:open", !1);
+      this.isOpen = false;
+      this.$emit("opened", false);
+      if (this.open !== null) {
+        this.$emit("update:open", false);
+      }
     },
     focusAfterOpen() {
-      var e;
-      (e = this.$refs.closeImage) == null || e.$el.focus();
+      var _a;
+      (_a = this.$refs.closeImage) == null ? void 0 : _a.$el.focus();
     },
     trapFocus(e) {
-      this.isOpen && this.focusTrappedTabPress(e);
+      if (this.isOpen) {
+        this.focusTrappedTabPress(e);
+      }
     }
   }
-}, O = ["src", "alt"], q = ["aria-hidden"], S = {
+};
+const _hoisted_1 = ["src", "alt"];
+const _hoisted_2 = ["aria-hidden"];
+const _hoisted_3 = {
   "data-qa": "dt-image-viewer-full",
   class: "d-image-viewer__full",
   role: "dialog",
   "aria-modal": "true"
-}, M = ["src", "alt"];
-function T(e, t, o, L, i, r) {
-  const c = d("dt-button"), g = d("dt-icon");
-  return n(), _("div", null, [
-    u(c, {
+};
+const _hoisted_4 = ["src", "alt"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_button = resolveComponent("dt-button");
+  const _component_dt_icon = resolveComponent("dt-icon");
+  return openBlock(), createElementBlock("div", null, [
+    createVNode(_component_dt_button, {
       "data-qa": "dt-image-viewer-preview",
       class: "d-image-viewer__preview-button",
-      "aria-label": o.ariaLabel,
+      "aria-label": $props.ariaLabel,
       importance: "clear",
-      onClick: r.openModal
+      onClick: $options.openModal
     }, {
-      default: m(() => [
-        s("img", {
-          class: v(o.imageButtonClass),
-          src: o.imageSrc,
-          alt: o.imageAlt
-        }, null, 10, O)
+      default: withCtx(() => [
+        createElementVNode("img", {
+          class: normalizeClass($props.imageButtonClass),
+          src: $props.imageSrc,
+          alt: $props.imageAlt
+        }, null, 10, _hoisted_1)
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]),
-    i.isOpen ? (n(), p(w, {
+    $data.isOpen ? (openBlock(), createBlock(Teleport, {
       key: 0,
       to: "body"
     }, [
-      s("div", b({
-        "aria-hidden": i.isOpen ? "false" : "true",
+      createElementVNode("div", mergeProps({
+        "aria-hidden": !$data.isOpen ? "true" : "false",
         class: "d-modal",
         "data-qa": "dt-modal"
-      }, C(r.modalListeners, !0), {
-        onMouseover: t[0] || (t[0] = (a) => i.showCloseButton = !0),
-        onMouseleave: t[1] || (t[1] = (a) => i.showCloseButton = !1),
-        onFocusin: t[2] || (t[2] = (a) => i.showCloseButton = !0),
-        onFocusout: t[3] || (t[3] = (a) => i.showCloseButton = !1)
+      }, toHandlers($options.modalListeners, true), {
+        onMouseover: _cache[0] || (_cache[0] = ($event) => $data.showCloseButton = true),
+        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)
       }), [
-        s("div", S, [
-          s("img", {
+        createElementVNode("div", _hoisted_3, [
+          createElementVNode("img", {
             class: "d-image-viewer__full__image",
-            src: o.imageSrc,
-            alt: o.imageAlt
-          }, null, 8, M)
+            src: $props.imageSrc,
+            alt: $props.imageAlt
+          }, null, 8, _hoisted_4)
         ]),
-        u(k, { name: "fade" }, {
-          default: m(() => [
-            i.showCloseButton ? (n(), p(c, {
+        createVNode(Transition, { name: "fade" }, {
+          default: withCtx(() => [
+            $data.showCloseButton ? (openBlock(), createBlock(_component_dt_button, {
               key: 0,
               ref: "closeImage",
               "data-qa": "dt-image-viewer-close-btn",
@@ -194,27 +218,27 @@ function T(e, t, o, L, i, r) {
               size: "lg",
               importance: "clear",
               kind: "inverted",
-              "aria-label": o.closeAriaLabel,
-              onClick: r.close
+              "aria-label": $props.closeAriaLabel,
+              onClick: $options.close
             }, {
-              icon: m(() => [
-                u(g, {
+              icon: withCtx(() => [
+                createVNode(_component_dt_icon, {
                   class: "d-image-viewer__close-button",
                   name: "close",
                   size: "400"
                 })
               ]),
               _: 1
-            }, 8, ["aria-label", "onClick"])) : f("", !0)
+            }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)
           ]),
           _: 1
         })
-      ], 16, q)
-    ])) : f("", !0)
+      ], 16, _hoisted_2)
+    ])) : createCommentVNode("", true)
   ]);
 }
-const j = /* @__PURE__ */ B(E, [["render", T]]);
+const DtImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  j as DtImageViewer
+  DtImageViewer
 };
 //# sourceMappingURL=image-viewer.js.map