@dialpad/dialtone/dist/vue3/lib/modal/modal.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("@dialpad/dialtone-icons/vue3"),h=require("../../common/mixins/modal.cjs"),a=require("./modal-constants.cjs"),n=require("../../common/utils/index.cjs"),r=require("../../common/constants/index.cjs"),f=require("../../shared/sr_only_close_button.cjs"),E=require("../../localization/index.cjs"),e=require("vue"),y=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),S=require("../button/button.cjs"),b=require("../lazy-show/lazy-show.cjs"),C=require("../notice/notice-constants.cjs"),k={compatConfig:{MODE:3},name:"DtModal",components:{DtLazyShow:b.default,DtButton:S.default,DtIconClose:m.DtIconClose,SrOnlyCloseButton:f.default},mixins:[h.default],props:{copy:{type:String,default:""},describedById:{type:String,default:""},labelledById:{type:String,default:function(){return n.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:""},bannerTitle:{type:String,default:""},kind:{type:String,default:"default",validator:t=>Object.keys(a.MODAL_KIND_MODIFIERS).includes(t)},size:{type:String,default:"default",validator:t=>Object.keys(a.MODAL_SIZE_MODIFIERS).includes(t)},modalClass:{type:[String,Object,Array],default:""},dialogClass:{type:[String,Object,Array],default:""},contentClass:{type:[String,Object,Array],default:""},bannerKind:{type:String,default:"warning",validate(t){return C.NOTICE_KINDS.includes(t)}},bannerClass:{type:[String,Object,Array],default:""},hideClose:{type:Boolean,default:!1},closeOnClick:{type:Boolean,default:!0},fixedHeaderFooter:{type:Boolean,default:!0},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:t=>t==="first"||t instanceof HTMLElement||t.startsWith("#")}},emits:["click","keydown","update:show"],data(){return{MODAL_KIND_MODIFIERS:a.MODAL_KIND_MODIFIERS,MODAL_SIZE_MODIFIERS:a.MODAL_SIZE_MODIFIERS,MODAL_BANNER_KINDS:a.MODAL_BANNER_KINDS,EVENT_KEYNAMES:r.EVENT_KEYNAMES,hasSlotContent:n.hasSlotContent,i18n:new E.DialtoneLocalization}},computed:{modalListeners(){return{click:t=>{this.closeOnClick&&t.target===t.currentTarget?this.close():this.show&&t.target!==t.currentTarget&&this.handleModalClick(t),this.$emit("click",t)},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}this.$emit("keydown",t)},"after-enter":async()=>{this.$emit("update:show",!0),await this.setFocusAfterTransition()},focusin:t=>{this.show&&!this.$el.contains(t.target)&&(t.preventDefault(),this.focusFirstElement())}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return a.MODAL_BANNER_KINDS[this.bannerKind]},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},watch:{show:{handler(t){var s;t?(this.previousActiveElement=document.activeElement,n.disableRootScrolling(n.returnFirstEl(this.$el).getRootNode().host)):(n.enableRootScrolling(n.returnFirstEl(this.$el).getRootNode().host),(s=this.previousActiveElement)==null||s.focus(),this.previousActiveElement=null)}}},methods:{close(){this.$emit("update:show",!1)},async setFocusAfterTransition(){this.initialFocusElement==="first"?await this.focusFirstElement():this.initialFocusElement.startsWith("#")?await this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(t){this.show&&this.focusTrappedTabPress(t)},handleModalClick(t){const s=t.target,o=this._getFocusableElements();o.length&&!o.includes(s)&&(o.includes(document.activeElement)||this.focusFirstElement())}}},g=["aria-describedby","aria-labelledby"],D=["id"],I=["id"],B={key:4,class:"d-modal__footer"};function N(t,s,o,O,i,l){const d=e.resolveComponent("sr-only-close-button"),c=e.resolveComponent("dt-icon-close"),u=e.resolveComponent("dt-button"),_=e.resolveComponent("dt-lazy-show");return e.openBlock(),e.createBlock(_,e.mergeProps({transition:"d-zoom",show:o.show,class:["d-modal",i.MODAL_KIND_MODIFIERS[o.kind],i.MODAL_SIZE_MODIFIERS[o.size],o.modalClass],"data-qa":"dt-modal","aria-hidden":l.open},e.toHandlers(l.modalListeners)),{default:e.withCtx(()=>[o.show&&(i.hasSlotContent(t.$slots.banner)||o.bannerTitle)?(e.openBlock(),e.createElementBlock("div",{key:0,"data-qa":"dt-modal-banner",class:e.normalizeClass(["d-modal__banner",o.bannerClass,l.bannerKindClass])},[e.renderSlot(t.$slots,"banner",{},()=>[e.createTextVNode(e.toDisplayString(o.bannerTitle),1)])],2)):e.createCommentVNode("",!0),e.createVNode(e.Transition,{appear:"",name:"d-modal__dialog"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["d-modal__dialog",{"d-modal__dialog--scrollable":o.fixedHeaderFooter},o.dialogClass]),role:"dialog","aria-modal":"true","aria-describedby":o.describedById,"aria-labelledby":o.labelledById},[i.hasSlotContent(t.$slots.header)?(e.openBlock(),e.createElementBlock("div",{key:0,id:o.labelledById,class:"d-modal__header","data-qa":"dt-modal-title"},[e.renderSlot(t.$slots,"header")],8,D)):(e.openBlock(),e.createElementBlock("h2",{key:1,id:o.labelledById,class:"d-modal__header","data-qa":"dt-modal-title"},e.toDisplayString(o.title),9,I)),i.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["d-modal__content",o.contentClass]),"data-qa":"dt-modal-copy"},[e.renderSlot(t.$slots,"default")],2)):(e.openBlock(),e.createElementBlock("p",{key:3,class:e.normalizeClass(["d-modal__content",o.contentClass]),"data-qa":"dt-modal-copy"},e.toDisplayString(o.copy),3)),l.hasFooterSlot?(e.openBlock(),e.createElementBlock("footer",B,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0),o.hideClose?(e.openBlock(),e.createBlock(d,{key:5,onClose:l.close},null,8,["onClose"])):(e.openBlock(),e.createBlock(u,{key:6,class:"d-modal__close","data-qa":"dt-modal-close-button",circle:"",size:"lg",importance:"clear","aria-label":l.closeButtonTitle,title:l.closeButtonTitle,onClick:l.close},{icon:e.withCtx(()=>[e.createVNode(c,{size:"400"})]),_:1},8,["aria-label","title","onClick"]))],10,g),[[e.vShow,o.show]])]),_:3})]),_:3},16,["show","class","aria-hidden"])}const w=y._(k,[["render",N]]);exports.default=w;
//# sourceMappingURL=modal.cjs.map