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

Dialpad's Dialtone design system monorepo

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