@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/lib/illustration.cjs

@@ -1,32 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vue = require("vue");
-const vue3 = require("@dialpad/dialtone-icons/vue3");
-const illustrationNames = require("@dialpad/dialtone-icons/illustrations.js");
-const ILLUSTRATION_NAMES = illustrationNames;
-const _sfc_main = {
-  __name: "illustration",
-  props: {
-    /**
-       * The illustration name in kebab-case
-       */
-    name: {
-      type: String,
-      required: true,
-      validator: (name) => ILLUSTRATION_NAMES.includes(name)
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const illustration = vue.computed(() => vue3.illustrations[`./src/illustrations/${props.name}.vue`]);
-    return (_ctx, _cache) => {
-      return illustration.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(illustration.value), {
-        key: 0,
-        "data-qa": _ctx.$attrs["data-qa"] ?? "dt-illustration"
-      }, null, 8, ["data-qa"])) : vue.createCommentVNode("", true);
-    };
-  }
-};
-exports.DtIllustration = _sfc_main;
-exports.ILLUSTRATION_NAMES = ILLUSTRATION_NAMES;
+const illustration = require("../components/illustration/illustration.vue.cjs");
+const illustration_constants = require("../components/illustration/illustration_constants.cjs");
+exports.DtIllustration = illustration;
+exports.ILLUSTRATION_NAMES = illustration_constants.ILLUSTRATION_NAMES;
 //# sourceMappingURL=illustration.cjs.map

package/dist/lib/illustration.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"illustration.cjs","sources":["../../components/illustration/illustration_constants.js","../../components/illustration/illustration.vue"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n","<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":["computed","illustrations"],"mappings":";;;;;AAEY,MAAC,qBAAqB;;;;;;;;;;;;;;ACWlC,UAAM,QAAQ;AAWd,UAAM,eAAeA,IAAAA,SAAS,MAAMC,KAAAA,cAAc,uBAAuB,MAAM,IAAI,MAAM,CAAC;;;;;;;;;;;"}
+{"version":3,"file":"illustration.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/lib/illustration.js

@@ -1,32 +1,7 @@
-import { computed, openBlock, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
-import { illustrations } from "@dialpad/dialtone-icons/vue3";
-import illustrationNames from "@dialpad/dialtone-icons/illustrations.js";
-const ILLUSTRATION_NAMES = illustrationNames;
-const _sfc_main = {
-  __name: "illustration",
-  props: {
-    /**
-       * The illustration name in kebab-case
-       */
-    name: {
-      type: String,
-      required: true,
-      validator: (name) => ILLUSTRATION_NAMES.includes(name)
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);
-    return (_ctx, _cache) => {
-      return illustration.value ? (openBlock(), createBlock(resolveDynamicComponent(illustration.value), {
-        key: 0,
-        "data-qa": _ctx.$attrs["data-qa"] ?? "dt-illustration"
-      }, null, 8, ["data-qa"])) : createCommentVNode("", true);
-    };
-  }
-};
+import { default as default2 } from "../components/illustration/illustration.vue.js";
+import { ILLUSTRATION_NAMES } from "../components/illustration/illustration_constants.js";
 export {
-  _sfc_main as DtIllustration,
+  default2 as DtIllustration,
   ILLUSTRATION_NAMES
 };
 //# sourceMappingURL=illustration.js.map

package/dist/lib/illustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"illustration.js","sources":["../../components/illustration/illustration_constants.js","../../components/illustration/illustration.vue"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n","<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":[],"mappings":";;;AAEY,MAAC,qBAAqB;;;;;;;;;;;;;;ACWlC,UAAM,QAAQ;AAWd,UAAM,eAAe,SAAS,MAAM,cAAc,uBAAuB,MAAM,IAAI,MAAM,CAAC;;;;;;;;;"}
+{"version":3,"file":"illustration.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/lib/image-viewer.cjs

@@ -1,254 +1,5 @@
 "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-x8NwdqmA.js");
-require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-da57m7BZ.js");
-require("@dialpad/dialtone-icons/icons.js");
-const _sfc_main = {
-  name: "DtImageViewer",
-  components: {
-    DtButton: lib_button.DtButton,
-    DtIcon: lib_icon.DtIcon
-  },
-  mixins: [modal.Modal],
-  props: {
-    /**
-     * By default the portal appends to the body of the root parent. We can modify
-     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.
-     * The appendTo prop expects a CSS selector string or an actual DOM node.
-     * type: string | HTMLElement, default: 'body'
-    */
-    appendTo: {
-      type: String,
-      default: "body"
-    },
-    /**
-     * 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: $props.appendTo
-    }, [
-      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)
-    ], 8, ["to"])) : vue.createCommentVNode("", true)
-  ]);
-}
-const DtImageViewer = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
-exports.DtImageViewer = DtImageViewer;
+const image_viewer = require("../components/image_viewer/image_viewer.vue.cjs");
+exports.DtImageViewer = image_viewer;
 //# 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=\"appendTo\"\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     * By default the portal appends to the body of the root parent. We can modify\n     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.\n     * The appendTo prop expects a CSS selector string or an actual DOM node.\n     * type: string | HTMLElement, default: 'body'\n    */\n    appendTo: {\n      type: String,\n      default: 'body',\n    },\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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"}
+{"version":3,"file":"image-viewer.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/lib/image-viewer.js

@@ -1,254 +1,5 @@
-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-AfTWrr-n.js";
-import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
-const _sfc_main = {
-  name: "DtImageViewer",
-  components: {
-    DtButton,
-    DtIcon
-  },
-  mixins: [Modal],
-  props: {
-    /**
-     * By default the portal appends to the body of the root parent. We can modify
-     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.
-     * The appendTo prop expects a CSS selector string or an actual DOM node.
-     * type: string | HTMLElement, default: 'body'
-    */
-    appendTo: {
-      type: String,
-      default: "body"
-    },
-    /**
-     * 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 EVENT_KEYNAMES.esc:
-            case EVENT_KEYNAMES.escape:
-              this.close();
-              break;
-            case 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 = 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": $props.ariaLabel,
-      importance: "clear",
-      onClick: $options.openModal
-    }, {
-      default: withCtx(() => [
-        createElementVNode("img", {
-          class: normalizeClass($props.imageButtonClass),
-          src: $props.imageSrc,
-          alt: $props.imageAlt
-        }, null, 10, _hoisted_1)
-      ]),
-      _: 1
-    }, 8, ["aria-label", "onClick"]),
-    $data.isOpen ? (openBlock(), createBlock(Teleport, {
-      key: 0,
-      to: $props.appendTo
-    }, [
-      createElementVNode("div", mergeProps({
-        "aria-hidden": !$data.isOpen ? "true" : "false",
-        class: "d-modal",
-        "data-qa": "dt-modal"
-      }, 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)
-      }), [
-        createElementVNode("div", _hoisted_3, [
-          createElementVNode("img", {
-            class: "d-image-viewer__full__image",
-            src: $props.imageSrc,
-            alt: $props.imageAlt
-          }, null, 8, _hoisted_4)
-        ]),
-        createVNode(Transition, { name: "fade" }, {
-          default: withCtx(() => [
-            $data.showCloseButton ? (openBlock(), 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: withCtx(() => [
-                createVNode(_component_dt_icon, {
-                  class: "d-image-viewer__close-button",
-                  name: "close",
-                  size: "400"
-                })
-              ]),
-              _: 1
-            }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        })
-      ], 16, _hoisted_2)
-    ], 8, ["to"])) : createCommentVNode("", true)
-  ]);
-}
-const DtImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+import { default as default2 } from "../components/image_viewer/image_viewer.vue.js";
 export {
-  DtImageViewer
+  default2 as DtImageViewer
 };
 //# sourceMappingURL=image-viewer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","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=\"appendTo\"\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     * By default the portal appends to the body of the root parent. We can modify\n     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.\n     * The appendTo prop expects a CSS selector string or an actual DOM node.\n     * type: string | HTMLElement, default: 'body'\n    */\n    appendTo: {\n      type: String,\n      default: 'body',\n    },\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":["_createElementBlock","_createVNode","_createElementVNode","_createBlock","_Teleport","_mergeProps","_toHandlers","_Transition"],"mappings":"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"}
+{"version":3,"file":"image-viewer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}