@dialpad/dialtone-vue/dist/lib/image-viewer/image-viewer.js

Vue component library for Dialpad's design system Dialtone

import a from "../../common/mixins/modal.js";
import { EVENT_KEYNAMES as o } from "../../common/constants/index.js";
import { DtIconClose as r } from "@dialpad/dialtone-icons/vue2";
import { Portal as n } from "../../node_modules/@linusborg/vue-simple-portal.js";
import l from "../../shared/sr_only_close_button.js";
import { DialtoneLocalization as c } from "../../localization/index.js";
import { n as u } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import m from "../button/button.js";
const d = {
  name: "DtImageViewer",
  components: {
    Portal: n,
    SrOnlyCloseButton: l,
    DtButton: m,
    DtIconClose: r
  },
  mixins: [a],
  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: !0
    },
    /**
     * Alt text of image
     */
    imageAlt: {
      type: String,
      required: !0
    },
    /**
     * Image Class
     */
    imageButtonClass: {
      type: String,
      required: !1,
      default: ""
    },
    /**
     * Aria label
     */
    ariaLabel: {
      type: String,
      required: !0
    }
  },
  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: !0,
      isOpen: !1,
      i18n: new c()
    };
  },
  computed: {
    modalListeners() {
      return {
        ...this.$listeners,
        click: (t) => {
          t.target === t.currentTarget && this.close();
        },
        keydown: (t) => {
          switch (t.code) {
            case o.esc:
            case o.escape:
              this.close();
              break;
            case o.tab:
              this.trapFocus(t);
              break;
          }
        }
      };
    },
    closeButtonTitle() {
      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
    }
  },
  watch: {
    isOpen: {
      immediate: !0,
      handler(t) {
        var e;
        t ? this.previousActiveElement = document.activeElement : ((e = this.previousActiveElement) == null || e.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);
    }
  }
};
var p = function() {
  var e = this, s = e._self._c;
  return s("div", [s("dt-button", { staticClass: "d-image-viewer__preview-button", attrs: { "data-qa": "dt-image-viewer-preview", "aria-label": e.ariaLabel, importance: "clear" }, on: { click: e.openModal } }, [s("img", { class: e.imageButtonClass, attrs: { src: e.imageSrc, alt: e.imageAlt } })]), e.isOpen ? s("portal", { attrs: { selector: e.appendTo } }, [s("div", e._g({ staticClass: "d-modal", attrs: { "aria-hidden": e.isOpen ? "false" : "true", "data-qa": "dt-modal" }, on: { mouseover: function(i) {
    e.showCloseButton = !0;
  }, mouseleave: function(i) {
    e.showCloseButton = !1;
  }, focusin: function(i) {
    e.showCloseButton = !0;
  }, focusout: function(i) {
    e.showCloseButton = !1;
  } } }, e.modalListeners), [s("div", { staticClass: "d-image-viewer__full", attrs: { "data-qa": "dt-image-viewer-full", role: "dialog", "aria-modal": "true" } }, [s("img", { staticClass: "d-image-viewer__full__image", attrs: { src: e.imageSrc, alt: e.imageAlt } })]), s("transition", { attrs: { name: "fade" } }, [e.showCloseButton ? s("dt-button", { ref: "closeImage", staticClass: "d-modal__close", attrs: { "data-qa": "dt-image-viewer-close-btn", circle: "", size: "lg", importance: "clear", kind: "inverted", "aria-label": e.closeButtonTitle, title: e.closeButtonTitle }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
    return [s("dt-icon-close", { staticClass: "d-image-viewer__close-button", attrs: { size: "400" } })];
  }, proxy: !0 }], null, !1, 3317018023) }) : s("sr-only-close-button", { on: { close: e.close } })], 1)], 1)]) : e._e()], 1);
}, f = [], h = /* @__PURE__ */ u(
  d,
  p,
  f
);
const T = h.exports;
export {
  T as default
};
//# sourceMappingURL=image-viewer.js.map