@dialpad/dialtone/dist/vue3/lib/image-viewer/image-viewer.cjs.map

Dialpad's Dialtone design system monorepo

{"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=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                class=\"d-image-viewer__close-button\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n          <sr-only-close-button\n            v-else\n            @close=\"close\"\n          />\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\n    SrOnlyCloseButton,\n    DtButton,\n    DtIconClose,\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    /**\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  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      i18n: new DialtoneLocalization(),\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    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\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      returnFirstEl(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","SrOnlyCloseButton","DtButton","DtIconClose","Modal","DialtoneLocalization","event","EVENT_KEYNAMES","isShowing","_a","open","returnFirstEl","e","_hoisted_1","_hoisted_2","_hoisted_4","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_withCtx","_createElementVNode","_normalizeClass","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_component_sr_only_close_button","_createCommentVNode"],"mappings":"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"}