@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 _=require("@dialpad/dialtone-icons/vue3"),h=require("../../common/mixins/modal.cjs"),a=require("./modal-constants.cjs"),s=require("../../common/utils/index.cjs"),i=require("../../common/constants/index.cjs"),y=require("../../common/mixins/sr-only-close-button.cjs"),f=require("../../shared/sr_only_close_button.cjs"),e=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),E=require("../lazy-show/lazy-show.cjs"),S=require("../button/button.cjs"),C=require("../notice/notice-constants.cjs"),k={compatConfig:{MODE:3},name:"DtModal",components:{DtLazyShow:E.default,DtButton:S.default,DtIconClose:_.DtIconClose,SrOnlyCloseButton:f.default},mixins:[h.default,y.default],props:{closeButtonProps:{type:Object,required:!0,validator:t=>!!t.ariaLabel},copy:{type:String,default:""},describedById:{type:String,default:""},labelledById:{type:String,default:function(){return s.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:i.EVENT_KEYNAMES,hasSlotContent:s.hasSlotContent}},computed:{modalListeners(){return{click:t=>{this.closeOnClick&&(t.target===t.currentTarget&&this.close(),this.$emit("click",t))},keydown:t=>{switch(t.code){case i.EVENT_KEYNAMES.esc:case i.EVENT_KEYNAMES.escape:this.close();break;case i.EVENT_KEYNAMES.tab:this.trapFocus(t);break}this.$emit("keydown",t)},"after-enter":t=>{this.$emit("update:show",!0),t.target===t.currentTarget&&this.setFocusAfterTransition()}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return a.MODAL_BANNER_KINDS[this.bannerKind]}},watch:{show:{handler(t){var r;t?(this.previousActiveElement=document.activeElement,s.disableRootScrolling(s.returnFirstEl(this.$el).getRootNode().host)):(s.enableRootScrolling(s.returnFirstEl(this.$el).getRootNode().host),(r=this.previousActiveElement)==null||r.focus(),this.previousActiveElement=null)}},$props:{immediate:!0,deep:!0,handler(){this.validateProps()}}},methods:{close(){this.$emit("update:show",!1)},setFocusAfterTransition(){this.initialFocusElement==="first"?this.focusFirstElement():this.initialFocusElement.startsWith("#")?this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(t){this.show&&this.focusTrappedTabPress(t)},validateProps(){this.hideClose&&!this.visuallyHiddenClose&&console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props
        need to be set so the component always includes a close button`)}}},g=["aria-describedby","aria-labelledby"],I=["id"],B=["id"],p={key:4,class:"d-modal__footer"};function D(t,r,o,O,n,l){const d=e.resolveComponent("dt-icon-close"),c=e.resolveComponent("dt-button"),u=e.resolveComponent("sr-only-close-button"),m=e.resolveComponent("dt-lazy-show");return e.openBlock(),e.createBlock(m,e.mergeProps({transition:"d-zoom",show:o.show,class:["d-modal",n.MODAL_KIND_MODIFIERS[o.kind],n.MODAL_SIZE_MODIFIERS[o.size],o.modalClass],"data-qa":"dt-modal","aria-hidden":l.open},e.toHandlers(l.modalListeners)),{default:e.withCtx(()=>[o.show&&(n.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},[n.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,I)):(e.openBlock(),e.createElementBlock("h2",{key:1,id:o.labelledById,class:"d-modal__header","data-qa":"dt-modal-title"},e.toDisplayString(o.title),9,B)),n.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",p,[e.renderSlot(t.$slots,"footer")])):e.createCommentVNode("",!0),o.hideClose?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(c,e.mergeProps({key:5,class:"d-modal__close",circle:"",size:"lg",importance:"clear","aria-label":o.closeButtonProps.ariaLabel},o.closeButtonProps,{onClick:l.close}),{icon:e.withCtx(()=>[e.createVNode(d,{size:"400"})]),_:1},16,["aria-label","onClick"])),t.showVisuallyHiddenClose?(e.openBlock(),e.createBlock(u,{key:6,"visually-hidden-close-label":t.visuallyHiddenCloseLabel,onClose:l.close},null,8,["visually-hidden-close-label","onClose"])):e.createCommentVNode("",!0)],10,g),[[e.vShow,o.show]])]),_:3})]),_:3},16,["show","class","aria-hidden"])}const N=b._(k,[["render",D]]);exports.default=N;
//# sourceMappingURL=modal.cjs.map