@dialpad/dialtone-vue/dist/lib/modal/modal.cjs

Vue component library for Dialpad's design system Dialtone

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@dialpad/dialtone-icons/vue2"),n=require("../../common/mixins/modal.cjs"),a=require("./modal-constants.cjs"),l=require("../../common/utils/index.cjs"),o=require("../../common/constants/index.cjs"),r=require("../../shared/sr_only_close_button.cjs"),d=require("../../localization/index.cjs"),c=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),u=require("../button/button.cjs"),_=require("../lazy-show/lazy-show.cjs"),h=require("../notice/notice-constants.cjs"),m={name:"DtModal",components:{DtLazyShow:_.default,DtButton:u.default,DtIconClose:i.DtIconClose,SrOnlyCloseButton:r.default},mixins:[n.default],props:{copy:{type:String,default:""},describedById:{type:String,default:""},labelledById:{type:String,default:function(){return l.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:""},bannerTitle:{type:String,default:""},kind:{type:String,default:"default",validator:e=>Object.keys(a.MODAL_KIND_MODIFIERS).includes(e)},size:{type:String,default:"default",validator:e=>Object.keys(a.MODAL_SIZE_MODIFIERS).includes(e)},modalClass:{type:[String,Object,Array],default:""},dialogClass:{type:[String,Object,Array],default:""},contentClass:{type:[String,Object,Array],default:""},bannerKind:{type:String,default:"warning",validate(e){return h.NOTICE_KINDS.includes(e)}},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:e=>e==="first"||e instanceof HTMLElement||e.startsWith("#")}},emits:["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:o.EVENT_KEYNAMES,i18n:new d.DialtoneLocalization}},computed:{modalListeners(){return{...this.$listeners,click:e=>{this.closeOnClick&&e.target===e.currentTarget?this.close():this.show&&e.target!==e.currentTarget&&this.handleModalClick(e),this.$emit("click",e)},keydown:e=>{switch(e.code){case o.EVENT_KEYNAMES.esc:case o.EVENT_KEYNAMES.escape:this.close();break;case o.EVENT_KEYNAMES.tab:this.trapFocus(e);break}this.$emit("keydown",e)},"after-enter":async()=>{this.$emit("update:show",!0),await this.setFocusAfterTransition()}}},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(e){var t;e?(this.previousActiveElement=document.activeElement,l.disableRootScrolling(this.$el.getRootNode().host)):(l.enableRootScrolling(this.$el.getRootNode().host),(t=this.previousActiveElement)==null||t.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(e){this.show&&this.focusTrappedTabPress(e)},handleModalClick(e){const t=e.target,s=this._getFocusableElements();s.length&&!s.includes(t)&&(s.includes(document.activeElement)||this.focusFirstElement())}}};var f=function(){var t=this,s=t._self._c;return s("dt-lazy-show",t._g({class:["d-modal",t.MODAL_KIND_MODIFIERS[t.kind],t.MODAL_SIZE_MODIFIERS[t.size],t.modalClass],attrs:{transition:"d-zoom",show:t.show,"data-qa":"dt-modal","aria-hidden":t.open}},t.modalListeners),[t.show&&(t.$slots.banner||t.bannerTitle)?s("div",{class:["d-modal__banner",t.bannerClass,t.bannerKindClass],attrs:{"data-qa":"dt-modal-banner"}},[t._t("banner",function(){return[t._v(" "+t._s(t.bannerTitle)+" ")]})],2):t._e(),s("transition",{attrs:{appear:"",name:"d-modal__dialog"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],class:["d-modal__dialog",{"d-modal__dialog--scrollable":t.fixedHeaderFooter},t.dialogClass],attrs:{role:"dialog","aria-modal":"true","aria-describedby":t.describedById,"aria-labelledby":t.labelledById}},[t.$slots.header?s("div",{staticClass:"d-modal__header",attrs:{id:t.labelledById,"data-qa":"dt-modal-title"}},[t._t("header")],2):s("h2",{staticClass:"d-modal__header",attrs:{id:t.labelledById,"data-qa":"dt-modal-title"}},[t._v(" "+t._s(t.title)+" ")]),t.$slots.default?s("div",{class:["d-modal__content",t.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[t._t("default")],2):s("p",{class:["d-modal__content",t.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[t._v(" "+t._s(t.copy)+" ")]),t.hasFooterSlot?s("footer",{staticClass:"d-modal__footer"},[t._t("footer")],2):t._e(),t.hideClose?s("sr-only-close-button",{on:{close:t.close}}):s("dt-button",{staticClass:"d-modal__close",attrs:{"data-qa":"dt-modal-close-button",circle:"",size:"lg",importance:"clear","aria-label":t.closeButtonTitle,title:t.closeButtonTitle},on:{click:t.close},scopedSlots:t._u([{key:"icon",fn:function(){return[s("dt-icon-close",{attrs:{size:"400"}})]},proxy:!0}])})],1)])],1)},E=[],b=c.n(m,f,E);const y=b.exports;exports.default=y;
//# sourceMappingURL=modal.cjs.map