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