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

Vue component library for Dialpad's design system Dialtone

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../common/mixins/modal.cjs"),o=require("../../common/constants/index.cjs"),n=require("@dialpad/dialtone-icons/vue2"),r=require("../../node_modules/@linusborg/vue-simple-portal.cjs"),l=require("../../shared/sr_only_close_button.cjs"),u=require("../../localization/index.cjs"),c=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),d=require("../button/button.cjs"),m={name:"DtImageViewer",components:{Portal:r.Portal,SrOnlyCloseButton:l.default,DtButton:d.default,DtIconClose:n.DtIconClose},mixins:[a.default],props:{appendTo:{type:String,default:"body"},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}},emits:["opened","update:open"],data(){return{showCloseButton:!0,isOpen:!1,i18n:new u.DialtoneLocalization}},computed:{modalListeners(){return{...this.$listeners,click:t=>{t.target===t.currentTarget&&this.close()},keydown:t=>{switch(t.code){case o.EVENT_KEYNAMES.esc:case o.EVENT_KEYNAMES.escape:this.close();break;case o.EVENT_KEYNAMES.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=c.n(m,p,_);const g=f.exports;exports.default=g;
//# sourceMappingURL=image-viewer.cjs.map