@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
3 lines (2 loc) • 3.87 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../../common/mixins/modal.cjs"),m=require("../../common/utils/index.cjs"),r=require("../../common/constants/index.cjs"),_=require("@dialpad/dialtone-icons/vue3"),p=require("../../shared/sr_only_close_button.cjs"),f=require("../../localization/index.cjs"),e=require("vue"),g=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),h=require("../button/button.cjs"),v={compatConfig:{MODE:3},name:"DtImageViewer",components:{SrOnlyCloseButton:p.default,DtButton:h.default,DtIconClose:_.DtIconClose},mixins:[d.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 f.DialtoneLocalization}},computed:{modalListeners(){return{click:t=>{t.target===t.currentTarget&&this.close()},keydown:t=>{switch(t.code){case r.EVENT_KEYNAMES.esc:case r.EVENT_KEYNAMES.escape:this.close();break;case r.EVENT_KEYNAMES.tab:this.trapFocus(t);break}}}},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},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,o;(o=m.returnFirstEl((t=this.$refs.closeImage)==null?void 0:t.$el))==null||o.focus()},trapFocus(t){this.isOpen&&this.focusTrappedTabPress(t)}}},C=["src","alt"],w=["aria-hidden"],E={"data-qa":"dt-image-viewer-full",class:"d-image-viewer__full",role:"dialog","aria-modal":"true"},b=["src","alt"];function B(t,o,n,T,l,i){const a=e.resolveComponent("dt-button"),c=e.resolveComponent("dt-icon-close"),u=e.resolveComponent("sr-only-close-button");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(a,{"data-qa":"dt-image-viewer-preview",class:"d-image-viewer__preview-button","aria-label":n.ariaLabel,importance:"clear",onClick:i.openModal},{default:e.withCtx(()=>[e.createElementVNode("img",{class:e.normalizeClass(n.imageButtonClass),src:n.imageSrc,alt:n.imageAlt},null,10,C)]),_:1},8,["aria-label","onClick"]),l.isOpen?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:n.appendTo},[e.createElementVNode("div",e.mergeProps({"aria-hidden":l.isOpen?"false":"true",class:"d-modal","data-qa":"dt-modal"},e.toHandlers(i.modalListeners,!0),{onMouseover:o[0]||(o[0]=s=>l.showCloseButton=!0),onMouseleave:o[1]||(o[1]=s=>l.showCloseButton=!1),onFocusin:o[2]||(o[2]=s=>l.showCloseButton=!0),onFocusout:o[3]||(o[3]=s=>l.showCloseButton=!1)}),[e.createElementVNode("div",E,[e.createElementVNode("img",{class:"d-image-viewer__full__image",src:n.imageSrc,alt:n.imageAlt},null,8,b)]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[l.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.closeButtonTitle,title:i.closeButtonTitle,onClick:i.close},{icon:e.withCtx(()=>[e.createVNode(c,{class:"d-image-viewer__close-button",size:"400"})]),_:1},8,["aria-label","title","onClick"])):(e.openBlock(),e.createBlock(u,{key:1,onClose:i.close},null,8,["onClose"]))]),_:1})],16,w)],8,["to"])):e.createCommentVNode("",!0)])}const k=g._(v,[["render",B]]);exports.default=k;
//# sourceMappingURL=image-viewer.cjs.map