primevue 3.18.0 → 3.19.0

package/dialog/dialog.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),t=require("primevue/utils"),n=require("primevue/ripple"),i=require("primevue/portal");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(n),l=o(i),s={name:"Dialog",inheritAttrs:!1,emits:["update:visible","show","hide","after-hide","maximize","unmaximize","dragend"],props:{header:null,footer:null,visible:Boolean,modal:Boolean,contentStyle:null,contentClass:String,rtl:Boolean,maximizable:Boolean,dismissableMask:Boolean,closable:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},position:{type:String,default:"center"},breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0},keepInViewport:{type:Boolean,default:!0},minX:{type:Number,default:0},minY:{type:Number,default:0},appendTo:{type:String,default:"body"},_instance:null},provide(){return{dialogRef:e.computed((()=>this._instance))}},data(){return{containerVisible:this.visible,maximized:!1}},documentKeydownListener:null,container:null,mask:null,styleElement:null,dragging:null,documentDragListener:null,documentDragEndListener:null,lastPageX:null,lastPageY:null,updated(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask&&this.autoZIndex&&t.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(e){e.setAttribute(this.attributeSelector,"")},onEnter(){this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners(),this.autoZIndex&&t.ZIndexUtils.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal)},onBeforeLeave(){this.modal&&t.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&t.ZIndexUtils.clear(this.mask),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners(),this.$emit("after-hide")},onMaskClick(e){this.dismissableMask&&this.closable&&this.modal&&this.mask===e.target&&this.close()},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?t.DomHandler.addClass(document.body,"p-overflow-hidden"):t.DomHandler.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&t.DomHandler.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&t.DomHandler.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){if(9===e.which){e.preventDefault();let n=t.DomHandler.getFocusableElements(this.container);if(n&&n.length>0)if(document.activeElement){let t=n.indexOf(document.activeElement);e.shiftKey?-1==t||0===t?n[n.length-1].focus():n[t-1].focus():-1==t||t===n.length-1?n[0].focus():n[t+1].focus()}else n[0].focus()}else 27===e.which&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},getPositionClass(){const e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((e=>e===this.position));return e?`p-dialog-${e}`:""},containerRef(e){this.container=e},maskRef(e){this.mask=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-dialog[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag(e){t.DomHandler.hasClass(e.target,"p-dialog-header-icon")||t.DomHandler.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",t.DomHandler.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener(){this.documentDragListener=e=>{if(this.dragging){let n=t.DomHandler.getOuterWidth(this.container),i=t.DomHandler.getOuterHeight(this.container),o=e.pageX-this.lastPageX,a=e.pageY-this.lastPageY,l=this.container.getBoundingClientRect(),s=l.left+o,r=l.top+a,d=t.DomHandler.getViewport();this.container.style.position="fixed",this.keepInViewport?(s>=this.minX&&s+n<d.width&&(this.lastPageX=e.pageX,this.container.style.left=s+"px"),r>=this.minY&&r+i<d.height&&(this.lastPageY=e.pageY,this.container.style.top=r+"px")):(this.lastPageX=e.pageX,this.container.style.left=s+"px",this.lastPageY=e.pageY,this.container.style.top=r+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener(){this.documentDragEndListener=e=>{this.dragging&&(this.dragging=!1,t.DomHandler.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",e))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maskClass(){return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.modal},this.getPositionClass()]},dialogClass(){return["p-dialog p-component",{"p-dialog-rtl":this.rtl,"p-dialog-maximized":this.maximizable&&this.maximized,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},maximizeIconClass(){return["p-dialog-header-maximize-icon pi",{"pi-window-maximize":!this.maximized,"pi-window-minimize":this.maximized}]},ariaId:()=>t.UniqueComponentId(),ariaLabelledById(){return null!=this.header?this.ariaId+"_header":null},attributeSelector:()=>t.UniqueComponentId(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:a.default},components:{Portal:l.default}};const r=["aria-labelledby","aria-modal"],d=["id"],m={class:"p-dialog-header-icons"},p=["aria-label"],c=[e.createElementVNode("span",{class:"p-dialog-header-close-icon pi pi-times"},null,-1)],g={key:1,class:"p-dialog-footer"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-dialog-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-dialog {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    -webkit-transform: scale(1);\n            transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog-footer {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-dialog .p-dialog-header-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Fluid */\n.p-fluid .p-dialog-footer .p-button {\n    width: auto;\n}\n\n/* Animation */\n/* Center */\n.p-dialog-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-dialog-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n\n/* Top, Bottom, Left, Right, Top* and Bottom* */\n.p-dialog-top .p-dialog,\n.p-dialog-bottom .p-dialog,\n.p-dialog-left .p-dialog,\n.p-dialog-right .p-dialog,\n.p-dialog-topleft .p-dialog,\n.p-dialog-topright .p-dialog,\n.p-dialog-bottomleft .p-dialog,\n.p-dialog-bottomright .p-dialog {\n    margin: 0.75rem;\n    -webkit-transform: translate3d(0px, 0px, 0px);\n            transform: translate3d(0px, 0px, 0px);\n}\n.p-dialog-top .p-dialog-enter-active,\n.p-dialog-top .p-dialog-leave-active,\n.p-dialog-bottom .p-dialog-enter-active,\n.p-dialog-bottom .p-dialog-leave-active,\n.p-dialog-left .p-dialog-enter-active,\n.p-dialog-left .p-dialog-leave-active,\n.p-dialog-right .p-dialog-enter-active,\n.p-dialog-right .p-dialog-leave-active,\n.p-dialog-topleft .p-dialog-enter-active,\n.p-dialog-topleft .p-dialog-leave-active,\n.p-dialog-topright .p-dialog-enter-active,\n.p-dialog-topright .p-dialog-leave-active,\n.p-dialog-bottomleft .p-dialog-enter-active,\n.p-dialog-bottomleft .p-dialog-leave-active,\n.p-dialog-bottomright .p-dialog-enter-active,\n.p-dialog-bottomright .p-dialog-leave-active {\n    -webkit-transition: all 0.3s ease-out;\n    transition: all 0.3s ease-out;\n}\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, -100%, 0px);\n            transform: translate3d(0px, -100%, 0px);\n}\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, 100%, 0px);\n            transform: translate3d(0px, 100%, 0px);\n}\n.p-dialog-left .p-dialog-enter-from,\n.p-dialog-left .p-dialog-leave-to,\n.p-dialog-topleft .p-dialog-enter-from,\n.p-dialog-topleft .p-dialog-leave-to,\n.p-dialog-bottomleft .p-dialog-enter-from,\n.p-dialog-bottomleft .p-dialog-leave-to {\n    -webkit-transform: translate3d(-100%, 0px, 0px);\n            transform: translate3d(-100%, 0px, 0px);\n}\n.p-dialog-right .p-dialog-enter-from,\n.p-dialog-right .p-dialog-leave-to,\n.p-dialog-topright .p-dialog-enter-from,\n.p-dialog-topright .p-dialog-leave-to,\n.p-dialog-bottomright .p-dialog-enter-from,\n.p-dialog-bottomright .p-dialog-leave-to {\n    -webkit-transform: translate3d(100%, 0px, 0px);\n            transform: translate3d(100%, 0px, 0px);\n}\n\n/* Maximize */\n.p-dialog-maximized {\n    -webkit-transition: none;\n    transition: none;\n    -webkit-transform: none;\n            transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    top: 0px !important;\n    left: 0px !important;\n    max-height: 100%;\n    height: 100%;\n}\n.p-dialog-maximized .p-dialog-content {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n\n/* Position */\n.p-dialog-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-dialog-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-dialog-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n"),s.render=function(t,n,i,o,a,l){const s=e.resolveComponent("Portal"),h=e.resolveDirective("ripple");return e.openBlock(),e.createBlock(s,{appendTo:i.appendTo},{default:e.withCtx((()=>[a.containerVisible?(e.openBlock(),e.createElementBlock("div",{key:0,ref:l.maskRef,class:e.normalizeClass(l.maskClass),onClick:n[3]||(n[3]=(...e)=>l.onMaskClick&&l.onMaskClick(...e))},[e.createVNode(e.Transition,{name:"p-dialog",onBeforeEnter:l.onBeforeEnter,onEnter:l.onEnter,onBeforeLeave:l.onBeforeLeave,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave,appear:""},{default:e.withCtx((()=>[i.visible?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,ref:l.containerRef,class:l.dialogClass},t.$attrs,{role:"dialog","aria-labelledby":l.ariaLabelledById,"aria-modal":i.modal}),[i.showHeader?(e.openBlock(),e.createElementBlock("div",{key:0,class:"p-dialog-header",onMousedown:n[2]||(n[2]=(...e)=>l.initDrag&&l.initDrag(...e))},[e.renderSlot(t.$slots,"header",{},(()=>[i.header?(e.openBlock(),e.createElementBlock("span",{key:0,id:l.ariaLabelledById,class:"p-dialog-title"},e.toDisplayString(i.header),9,d)):e.createCommentVNode("",!0)])),e.createElementVNode("div",m,[i.maximizable?e.withDirectives((e.openBlock(),e.createElementBlock("button",{key:0,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:n[0]||(n[0]=(...e)=>l.maximize&&l.maximize(...e)),type:"button",tabindex:"-1"},[e.createElementVNode("span",{class:e.normalizeClass(l.maximizeIconClass)},null,2)])),[[h]]):e.createCommentVNode("",!0),i.closable?e.withDirectives((e.openBlock(),e.createElementBlock("button",{key:1,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:n[1]||(n[1]=(...e)=>l.close&&l.close(...e)),"aria-label":i.ariaCloseLabel,type:"button"},c,8,p)),[[h]]):e.createCommentVNode("",!0)])],32)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(l.contentStyleClass),style:e.normalizeStyle(i.contentStyle)},[e.renderSlot(t.$slots,"default")],6),i.footer||t.$slots.footer?(e.openBlock(),e.createElementBlock("div",g,[e.renderSlot(t.$slots,"footer",{},(()=>[e.createTextVNode(e.toDisplayString(i.footer),1)]))])):e.createCommentVNode("",!0)],16,r)):e.createCommentVNode("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):e.createCommentVNode("",!0)])),_:3},8,["appendTo"])},module.exports=s;
+"use strict";var e=require("primevue/focustrap"),t=require("primevue/portal"),n=require("primevue/ripple"),i=require("primevue/utils"),o=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(e),s=a(t),r={name:"Dialog",inheritAttrs:!1,emits:["update:visible","show","hide","after-hide","maximize","unmaximize","dragend"],props:{header:{type:null,default:null},footer:{type:null,default:null},visible:{type:Boolean,default:!1},modal:{type:Boolean,default:null},contentStyle:{type:null,default:null},contentClass:{type:String,default:null},contentProps:{type:null,default:null},rtl:{type:Boolean,default:null},maximizable:{type:Boolean,default:!1},dismissableMask:{type:Boolean,default:!1},closable:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},position:{type:String,default:"center"},breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0},keepInViewport:{type:Boolean,default:!0},minX:{type:Number,default:0},minY:{type:Number,default:0},appendTo:{type:String,default:"body"},closeIcon:{type:String,default:"pi pi-times"},maximizeIcon:{type:String,default:"pi pi-window-maximize"},minimizeIcon:{type:String,default:"pi pi-window-minimize"},closeButtonProps:{type:null,default:null},_instance:null},provide(){return{dialogRef:o.computed((()=>this._instance))}},data(){return{containerVisible:this.visible,maximized:!1}},documentKeydownListener:null,container:null,mask:null,content:null,headerContainer:null,footerContainer:null,maximizableButton:null,closeButton:null,styleElement:null,dragging:null,documentDragListener:null,documentDragEndListener:null,lastPageX:null,lastPageY:null,updated(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask&&this.autoZIndex&&i.ZIndexUtils.clear(this.mask),this.container=null,this.mask=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(e){e.setAttribute(this.attributeSelector,"")},onEnter(){this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners(),this.autoZIndex&&i.ZIndexUtils.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal)},onBeforeLeave(){this.modal&&i.DomHandler.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&i.ZIndexUtils.clear(this.mask),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners(),this.$emit("after-hide")},onMaskClick(e){this.dismissableMask&&this.closable&&this.modal&&this.mask===e.target&&this.close()},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.default&&e(this.content);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=this.$slots.footer&&e(this.footerContainer),t||(t=e(this.container)))),t&&t.focus()},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?i.DomHandler.addClass(document.body,"p-overflow-hidden"):i.DomHandler.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&i.DomHandler.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&i.DomHandler.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){"Escape"===e.code&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},getPositionClass(){const e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((e=>e===this.position));return e?`p-dialog-${e}`:""},containerRef(e){this.container=e},maskRef(e){this.mask=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},footerContainerRef(e){this.footerContainer=e},maximizableRef(e){this.maximizableButton=e},closeButtonRef(e){this.closeButton=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-dialog[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag(e){i.DomHandler.hasClass(e.target,"p-dialog-header-icon")||i.DomHandler.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",i.DomHandler.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener(){this.documentDragListener=e=>{if(this.dragging){let t=i.DomHandler.getOuterWidth(this.container),n=i.DomHandler.getOuterHeight(this.container),o=e.pageX-this.lastPageX,a=e.pageY-this.lastPageY,l=this.container.getBoundingClientRect(),s=l.left+o,r=l.top+a,d=i.DomHandler.getViewport();this.container.style.position="fixed",this.keepInViewport?(s>=this.minX&&s+t<d.width&&(this.lastPageX=e.pageX,this.container.style.left=s+"px"),r>=this.minY&&r+n<d.height&&(this.lastPageY=e.pageY,this.container.style.top=r+"px")):(this.lastPageX=e.pageX,this.container.style.left=s+"px",this.lastPageY=e.pageY,this.container.style.top=r+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener(){this.documentDragEndListener=e=>{this.dragging&&(this.dragging=!1,i.DomHandler.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",e))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maskClass(){return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.modal},this.getPositionClass()]},dialogClass(){return["p-dialog p-component",{"p-dialog-rtl":this.rtl,"p-dialog-maximized":this.maximizable&&this.maximized,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},maximizeIconClass(){return["p-dialog-header-maximize-icon",{[this.maximizeIcon]:!this.maximized,[this.minimizeIcon]:this.maximized}]},ariaId:()=>i.UniqueComponentId(),ariaLabelledById(){return null!=this.header||null!==this.$attrs["aria-labelledby"]?this.ariaId+"_header":null},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},attributeSelector:()=>i.UniqueComponentId(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:a(n).default,focustrap:l.default},components:{Portal:s.default}};const d=["aria-labelledby","aria-modal"],p=["id"],m={class:"p-dialog-header-icons"},c=["tabindex"],g=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-dialog-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-dialog {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    -webkit-transform: scale(1);\n            transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog-footer {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-dialog .p-dialog-header-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Fluid */\n.p-fluid .p-dialog-footer .p-button {\n    width: auto;\n}\n\n/* Animation */\n/* Center */\n.p-dialog-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-dialog-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n\n/* Top, Bottom, Left, Right, Top* and Bottom* */\n.p-dialog-top .p-dialog,\n.p-dialog-bottom .p-dialog,\n.p-dialog-left .p-dialog,\n.p-dialog-right .p-dialog,\n.p-dialog-topleft .p-dialog,\n.p-dialog-topright .p-dialog,\n.p-dialog-bottomleft .p-dialog,\n.p-dialog-bottomright .p-dialog {\n    margin: 0.75rem;\n    -webkit-transform: translate3d(0px, 0px, 0px);\n            transform: translate3d(0px, 0px, 0px);\n}\n.p-dialog-top .p-dialog-enter-active,\n.p-dialog-top .p-dialog-leave-active,\n.p-dialog-bottom .p-dialog-enter-active,\n.p-dialog-bottom .p-dialog-leave-active,\n.p-dialog-left .p-dialog-enter-active,\n.p-dialog-left .p-dialog-leave-active,\n.p-dialog-right .p-dialog-enter-active,\n.p-dialog-right .p-dialog-leave-active,\n.p-dialog-topleft .p-dialog-enter-active,\n.p-dialog-topleft .p-dialog-leave-active,\n.p-dialog-topright .p-dialog-enter-active,\n.p-dialog-topright .p-dialog-leave-active,\n.p-dialog-bottomleft .p-dialog-enter-active,\n.p-dialog-bottomleft .p-dialog-leave-active,\n.p-dialog-bottomright .p-dialog-enter-active,\n.p-dialog-bottomright .p-dialog-leave-active {\n    -webkit-transition: all 0.3s ease-out;\n    transition: all 0.3s ease-out;\n}\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, -100%, 0px);\n            transform: translate3d(0px, -100%, 0px);\n}\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, 100%, 0px);\n            transform: translate3d(0px, 100%, 0px);\n}\n.p-dialog-left .p-dialog-enter-from,\n.p-dialog-left .p-dialog-leave-to,\n.p-dialog-topleft .p-dialog-enter-from,\n.p-dialog-topleft .p-dialog-leave-to,\n.p-dialog-bottomleft .p-dialog-enter-from,\n.p-dialog-bottomleft .p-dialog-leave-to {\n    -webkit-transform: translate3d(-100%, 0px, 0px);\n            transform: translate3d(-100%, 0px, 0px);\n}\n.p-dialog-right .p-dialog-enter-from,\n.p-dialog-right .p-dialog-leave-to,\n.p-dialog-topright .p-dialog-enter-from,\n.p-dialog-topright .p-dialog-leave-to,\n.p-dialog-bottomright .p-dialog-enter-from,\n.p-dialog-bottomright .p-dialog-leave-to {\n    -webkit-transform: translate3d(100%, 0px, 0px);\n            transform: translate3d(100%, 0px, 0px);\n}\n\n/* Maximize */\n.p-dialog-maximized {\n    -webkit-transition: none;\n    transition: none;\n    -webkit-transform: none;\n            transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    top: 0px !important;\n    left: 0px !important;\n    max-height: 100%;\n    height: 100%;\n}\n.p-dialog-maximized .p-dialog-content {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n\n/* Position */\n.p-dialog-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-dialog-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-dialog-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n"),r.render=function(e,t,n,i,a,l){const s=o.resolveComponent("Portal"),r=o.resolveDirective("ripple"),u=o.resolveDirective("focustrap");return o.openBlock(),o.createBlock(s,{appendTo:n.appendTo},{default:o.withCtx((()=>[a.containerVisible?(o.openBlock(),o.createElementBlock("div",{key:0,ref:l.maskRef,class:o.normalizeClass(l.maskClass),onClick:t[3]||(t[3]=(...e)=>l.onMaskClick&&l.onMaskClick(...e))},[o.createVNode(o.Transition,{name:"p-dialog",onBeforeEnter:l.onBeforeEnter,onEnter:l.onEnter,onBeforeLeave:l.onBeforeLeave,onLeave:l.onLeave,onAfterLeave:l.onAfterLeave,appear:""},{default:o.withCtx((()=>[n.visible?o.withDirectives((o.openBlock(),o.createElementBlock("div",o.mergeProps({key:0,ref:l.containerRef,class:l.dialogClass,role:"dialog","aria-labelledby":l.ariaLabelledById,"aria-modal":n.modal},e.$attrs),[n.showHeader?(o.openBlock(),o.createElementBlock("div",{key:0,ref:l.headerContainerRef,class:"p-dialog-header",onMousedown:t[2]||(t[2]=(...e)=>l.initDrag&&l.initDrag(...e))},[o.renderSlot(e.$slots,"header",{},(()=>[n.header?(o.openBlock(),o.createElementBlock("span",{key:0,id:l.ariaLabelledById,class:"p-dialog-title"},o.toDisplayString(n.header),9,p)):o.createCommentVNode("",!0)])),o.createElementVNode("div",m,[n.maximizable?o.withDirectives((o.openBlock(),o.createElementBlock("button",{key:0,ref:l.maximizableRef,autofocus:"",class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[0]||(t[0]=(...e)=>l.maximize&&l.maximize(...e)),type:"button",tabindex:n.maximizable?"0":"-1"},[o.createElementVNode("span",{class:o.normalizeClass(l.maximizeIconClass)},null,2)],8,c)),[[r]]):o.createCommentVNode("",!0),n.closable?o.withDirectives((o.openBlock(),o.createElementBlock("button",o.mergeProps({key:1,ref:l.closeButtonRef,autofocus:"",class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[1]||(t[1]=(...e)=>l.close&&l.close(...e)),"aria-label":l.closeAriaLabel,type:"button"},n.closeButtonProps),[o.createElementVNode("span",{class:o.normalizeClass(["p-dialog-header-close-icon",n.closeIcon])},null,2)],16,g)),[[r]]):o.createCommentVNode("",!0)])],544)):o.createCommentVNode("",!0),o.createElementVNode("div",o.mergeProps({ref:l.contentRef,class:l.contentStyleClass,style:n.contentStyle},n.contentProps),[o.renderSlot(e.$slots,"default")],16),n.footer||e.$slots.footer?(o.openBlock(),o.createElementBlock("div",{key:1,ref:l.footerContainerRef,class:"p-dialog-footer"},[o.renderSlot(e.$slots,"footer",{},(()=>[o.createTextVNode(o.toDisplayString(n.footer),1)]))],512)):o.createCommentVNode("",!0)],16,d)),[[u,{focusTrapDisabled:!n.modal}]]):o.createCommentVNode("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):o.createCommentVNode("",!0)])),_:3},8,["appendTo"])},module.exports=r;

package/dialog/dialog.esm.js

@@ -1,22 +1,54 @@
-import { computed, resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createElementBlock, normalizeClass, createVNode, Transition, mergeProps, renderSlot, toDisplayString, createCommentVNode, createElementVNode, withDirectives, normalizeStyle, createTextVNode } from 'vue';
-import { ZIndexUtils, DomHandler, UniqueComponentId } from 'primevue/utils';
-import Ripple from 'primevue/ripple';
+import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
+import Ripple from 'primevue/ripple';
+import { ZIndexUtils, DomHandler, UniqueComponentId } from 'primevue/utils';
+import { computed, resolveComponent, resolveDirective, openBlock, createBlock, withCtx, createElementBlock, normalizeClass, createVNode, Transition, withDirectives, mergeProps, renderSlot, toDisplayString, createCommentVNode, createElementVNode, createTextVNode } from 'vue';
 
 var script = {
     name: 'Dialog',
     inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
     props: {
-        header: null,
-        footer: null,
-        visible: Boolean,
-        modal: Boolean,
-        contentStyle: null,
-        contentClass: String,
-        rtl: Boolean,
-        maximizable: Boolean,
-        dismissableMask: Boolean,
+        header: {
+            type: null,
+            default: null
+        },
+        footer: {
+            type: null,
+            default: null
+        },
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        modal: {
+            type: Boolean,
+            default: null
+        },
+        contentStyle: {
+            type: null,
+            default: null
+        },
+        contentClass: {
+            type: String,
+            default: null
+        },
+        contentProps: {
+            type: null,
+            default: null
+        },
+        rtl: {
+            type: Boolean,
+            default: null
+        },
+        maximizable: {
+            type: Boolean,
+            default: false
+        },
+        dismissableMask: {
+            type: Boolean,
+            default: false
+        },
         closable: {
             type: Boolean,
             default: true
@@ -37,10 +69,6 @@ var script = {
             type: Boolean,
             default: true
         },
-        ariaCloseLabel: {
-            type: String,
-            default: 'close'
-        },
         position: {
             type: String,
             default: 'center'
@@ -69,6 +97,22 @@ var script = {
             type: String,
             default: 'body'
         },
+        closeIcon: {
+            type: String,
+            default: 'pi pi-times'
+        },
+        maximizeIcon: {
+            type: String,
+            default: 'pi pi-window-maximize'
+        },
+        minimizeIcon: {
+            type: String,
+            default: 'pi pi-window-minimize'
+        },
+        closeButtonProps: {
+            type: null,
+            default: null
+        },
         _instance: null
     },
     provide() {
@@ -85,6 +129,11 @@ var script = {
     documentKeydownListener: null,
     container: null,
     mask: null,
+    content: null,
+    headerContainer: null,
+    footerContainer: null,
+    maximizableButton: null,
+    closeButton: null,
     styleElement: null,
     dragging: null,
     documentDragListener: null,
@@ -154,11 +203,25 @@ var script = {
             }
         },
         focus() {
-            let focusTarget = this.container.querySelector('[autofocus]');
+            const findFocusableElement = (container) => {
+                return container.querySelector('[autofocus]');
+            };
+
+            let focusTarget = this.$slots.default && findFocusableElement(this.content);
 
-            if (focusTarget) {
-                focusTarget.focus();
+            if (!focusTarget) {
+                focusTarget = this.$slots.header && findFocusableElement(this.headerContainer);
+
+                if (!focusTarget) {
+                    focusTarget = this.$slots.footer && findFocusableElement(this.footerContainer);
+
+                    if (!focusTarget) {
+                        focusTarget = findFocusableElement(this.container);
+                    }
+                }
             }
+
+            focusTarget && focusTarget.focus();
         },
         maximize(event) {
             if (this.maximized) {
@@ -185,26 +248,7 @@ var script = {
             }
         },
         onKeyDown(event) {
-            if (event.which === 9) {
-                event.preventDefault();
-                let focusableElements = DomHandler.getFocusableElements(this.container);
-
-                if (focusableElements && focusableElements.length > 0) {
-                    if (!document.activeElement) {
-                        focusableElements[0].focus();
-                    } else {
-                        let focusedIndex = focusableElements.indexOf(document.activeElement);
-
-                        if (event.shiftKey) {
-                            if (focusedIndex == -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
-                            else focusableElements[focusedIndex - 1].focus();
-                        } else {
-                            if (focusedIndex == -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
-                            else focusableElements[focusedIndex + 1].focus();
-                        }
-                    }
-                }
-            } else if (event.which === 27 && this.closeOnEscape) {
+            if (event.code === 'Escape' && this.closeOnEscape) {
                 this.close();
             }
         },
@@ -232,6 +276,21 @@ var script = {
         maskRef(el) {
             this.mask = el;
         },
+        contentRef(el) {
+            this.content = el;
+        },
+        headerContainerRef(el) {
+            this.headerContainer = el;
+        },
+        footerContainerRef(el) {
+            this.footerContainer = el;
+        },
+        maximizableRef(el) {
+            this.maximizableButton = el;
+        },
+        closeButtonRef(el) {
+            this.closeButton = el;
+        },
         createStyle() {
             if (!this.styleElement) {
                 this.styleElement = document.createElement('style');
@@ -365,10 +424,10 @@ var script = {
         },
         maximizeIconClass() {
             return [
-                'p-dialog-header-maximize-icon pi',
+                'p-dialog-header-maximize-icon',
                 {
-                    'pi-window-maximize': !this.maximized,
-                    'pi-window-minimize': this.maximized
+                    [this.maximizeIcon]: !this.maximized,
+                    [this.minimizeIcon]: this.maximized
                 }
             ];
         },
@@ -376,7 +435,10 @@ var script = {
             return UniqueComponentId();
         },
         ariaLabelledById() {
-            return this.header != null ? this.ariaId + '_header' : null;
+            return this.header != null || this.$attrs['aria-labelledby'] !== null ? this.ariaId + '_header' : null;
+        },
+        closeAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         },
         attributeSelector() {
             return UniqueComponentId();
@@ -386,7 +448,8 @@ var script = {
         }
     },
     directives: {
-        ripple: Ripple
+        ripple: Ripple,
+        focustrap: FocusTrap
     },
     components: {
         Portal: Portal
@@ -396,19 +459,13 @@ var script = {
 const _hoisted_1 = ["aria-labelledby", "aria-modal"];
 const _hoisted_2 = ["id"];
 const _hoisted_3 = { class: "p-dialog-header-icons" };
-const _hoisted_4 = ["aria-label"];
-const _hoisted_5 = /*#__PURE__*/createElementVNode("span", { class: "p-dialog-header-close-icon pi pi-times" }, null, -1);
-const _hoisted_6 = [
-  _hoisted_5
-];
-const _hoisted_7 = {
-  key: 1,
-  class: "p-dialog-footer"
-};
+const _hoisted_4 = ["tabindex"];
+const _hoisted_5 = ["aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Portal = resolveComponent("Portal");
   const _directive_ripple = resolveDirective("ripple");
+  const _directive_focustrap = resolveDirective("focustrap");
 
   return (openBlock(), createBlock(_component_Portal, { appendTo: $props.appendTo }, {
     default: withCtx(() => [
@@ -430,18 +487,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             }, {
               default: withCtx(() => [
                 ($props.visible)
-                  ? (openBlock(), createElementBlock("div", mergeProps({
+                  ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
                       key: 0,
                       ref: $options.containerRef,
-                      class: $options.dialogClass
-                    }, _ctx.$attrs, {
+                      class: $options.dialogClass,
                       role: "dialog",
                       "aria-labelledby": $options.ariaLabelledById,
                       "aria-modal": $props.modal
-                    }), [
+                    }, _ctx.$attrs), [
                       ($props.showHeader)
                         ? (openBlock(), createElementBlock("div", {
                             key: 0,
+                            ref: $options.headerContainerRef,
                             class: "p-dialog-header",
                             onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.initDrag && $options.initDrag(...args)))
                           }, [
@@ -458,46 +515,61 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               ($props.maximizable)
                                 ? withDirectives((openBlock(), createElementBlock("button", {
                                     key: 0,
+                                    ref: $options.maximizableRef,
+                                    autofocus: "",
                                     class: "p-dialog-header-icon p-dialog-header-maximize p-link",
                                     onClick: _cache[0] || (_cache[0] = (...args) => ($options.maximize && $options.maximize(...args))),
                                     type: "button",
-                                    tabindex: "-1"
+                                    tabindex: $props.maximizable ? '0' : '-1'
                                   }, [
                                     createElementVNode("span", {
                                       class: normalizeClass($options.maximizeIconClass)
                                     }, null, 2)
-                                  ])), [
+                                  ], 8, _hoisted_4)), [
                                     [_directive_ripple]
                                   ])
                                 : createCommentVNode("", true),
                               ($props.closable)
-                                ? withDirectives((openBlock(), createElementBlock("button", {
+                                ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
                                     key: 1,
+                                    ref: $options.closeButtonRef,
+                                    autofocus: "",
                                     class: "p-dialog-header-icon p-dialog-header-close p-link",
                                     onClick: _cache[1] || (_cache[1] = (...args) => ($options.close && $options.close(...args))),
-                                    "aria-label": $props.ariaCloseLabel,
+                                    "aria-label": $options.closeAriaLabel,
                                     type: "button"
-                                  }, _hoisted_6, 8, _hoisted_4)), [
+                                  }, $props.closeButtonProps), [
+                                    createElementVNode("span", {
+                                      class: normalizeClass(['p-dialog-header-close-icon', $props.closeIcon])
+                                    }, null, 2)
+                                  ], 16, _hoisted_5)), [
                                     [_directive_ripple]
                                   ])
                                 : createCommentVNode("", true)
                             ])
-                          ], 32))
+                          ], 544))
                         : createCommentVNode("", true),
-                      createElementVNode("div", {
-                        class: normalizeClass($options.contentStyleClass),
-                        style: normalizeStyle($props.contentStyle)
-                      }, [
+                      createElementVNode("div", mergeProps({
+                        ref: $options.contentRef,
+                        class: $options.contentStyleClass,
+                        style: $props.contentStyle
+                      }, $props.contentProps), [
                         renderSlot(_ctx.$slots, "default")
-                      ], 6),
+                      ], 16),
                       ($props.footer || _ctx.$slots.footer)
-                        ? (openBlock(), createElementBlock("div", _hoisted_7, [
+                        ? (openBlock(), createElementBlock("div", {
+                            key: 1,
+                            ref: $options.footerContainerRef,
+                            class: "p-dialog-footer"
+                          }, [
                             renderSlot(_ctx.$slots, "footer", {}, () => [
                               createTextVNode(toDisplayString($props.footer), 1)
                             ])
-                          ]))
+                          ], 512))
                         : createCommentVNode("", true)
-                    ], 16, _hoisted_1))
+                    ], 16, _hoisted_1)), [
+                      [_directive_focustrap, { focusTrapDisabled: !$props.modal }]
+                    ])
                   : createCommentVNode("", true)
               ]),
               _: 3

package/dialog/dialog.esm.min.js

@@ -1 +1 @@
-import{computed as e,resolveComponent as t,resolveDirective as n,openBlock as i,createBlock as a,withCtx as o,createElementBlock as l,normalizeClass as s,createVNode as d,Transition as r,mergeProps as p,renderSlot as m,toDisplayString as g,createCommentVNode as c,createElementVNode as h,withDirectives as f,normalizeStyle as u,createTextVNode as b}from"vue";import{ZIndexUtils as x,DomHandler as y,UniqueComponentId as v}from"primevue/utils";import k from"primevue/ripple";import w from"primevue/portal";var L={name:"Dialog",inheritAttrs:!1,emits:["update:visible","show","hide","after-hide","maximize","unmaximize","dragend"],props:{header:null,footer:null,visible:Boolean,modal:Boolean,contentStyle:null,contentClass:String,rtl:Boolean,maximizable:Boolean,dismissableMask:Boolean,closable:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"},position:{type:String,default:"center"},breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0},keepInViewport:{type:Boolean,default:!0},minX:{type:Number,default:0},minY:{type:Number,default:0},appendTo:{type:String,default:"body"},_instance:null},provide(){return{dialogRef:e((()=>this._instance))}},data(){return{containerVisible:this.visible,maximized:!1}},documentKeydownListener:null,container:null,mask:null,styleElement:null,dragging:null,documentDragListener:null,documentDragEndListener:null,lastPageX:null,lastPageY:null,updated(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask&&this.autoZIndex&&x.clear(this.mask),this.container=null,this.mask=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(e){e.setAttribute(this.attributeSelector,"")},onEnter(){this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners(),this.autoZIndex&&x.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal)},onBeforeLeave(){this.modal&&y.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&x.clear(this.mask),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners(),this.$emit("after-hide")},onMaskClick(e){this.dismissableMask&&this.closable&&this.modal&&this.mask===e.target&&this.close()},focus(){let e=this.container.querySelector("[autofocus]");e&&e.focus()},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?y.addClass(document.body,"p-overflow-hidden"):y.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&y.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&y.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){if(9===e.which){e.preventDefault();let t=y.getFocusableElements(this.container);if(t&&t.length>0)if(document.activeElement){let n=t.indexOf(document.activeElement);e.shiftKey?-1==n||0===n?t[t.length-1].focus():t[n-1].focus():-1==n||n===t.length-1?t[0].focus():t[n+1].focus()}else t[0].focus()}else 27===e.which&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},getPositionClass(){const e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((e=>e===this.position));return e?`p-dialog-${e}`:""},containerRef(e){this.container=e},maskRef(e){this.mask=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-dialog[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag(e){y.hasClass(e.target,"p-dialog-header-icon")||y.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",y.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener(){this.documentDragListener=e=>{if(this.dragging){let t=y.getOuterWidth(this.container),n=y.getOuterHeight(this.container),i=e.pageX-this.lastPageX,a=e.pageY-this.lastPageY,o=this.container.getBoundingClientRect(),l=o.left+i,s=o.top+a,d=y.getViewport();this.container.style.position="fixed",this.keepInViewport?(l>=this.minX&&l+t<d.width&&(this.lastPageX=e.pageX,this.container.style.left=l+"px"),s>=this.minY&&s+n<d.height&&(this.lastPageY=e.pageY,this.container.style.top=s+"px")):(this.lastPageX=e.pageX,this.container.style.left=l+"px",this.lastPageY=e.pageY,this.container.style.top=s+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener(){this.documentDragEndListener=e=>{this.dragging&&(this.dragging=!1,y.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",e))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maskClass(){return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.modal},this.getPositionClass()]},dialogClass(){return["p-dialog p-component",{"p-dialog-rtl":this.rtl,"p-dialog-maximized":this.maximizable&&this.maximized,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},maximizeIconClass(){return["p-dialog-header-maximize-icon pi",{"pi-window-maximize":!this.maximized,"pi-window-minimize":this.maximized}]},ariaId:()=>v(),ariaLabelledById(){return null!=this.header?this.ariaId+"_header":null},attributeSelector:()=>v(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:k},components:{Portal:w}};const D=["aria-labelledby","aria-modal"],E=["id"],z={class:"p-dialog-header-icons"},C=["aria-label"],B=[h("span",{class:"p-dialog-header-close-icon pi pi-times"},null,-1)],S={key:1,class:"p-dialog-footer"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-dialog-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-dialog {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    -webkit-transform: scale(1);\n            transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog-footer {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-dialog .p-dialog-header-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Fluid */\n.p-fluid .p-dialog-footer .p-button {\n    width: auto;\n}\n\n/* Animation */\n/* Center */\n.p-dialog-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-dialog-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n\n/* Top, Bottom, Left, Right, Top* and Bottom* */\n.p-dialog-top .p-dialog,\n.p-dialog-bottom .p-dialog,\n.p-dialog-left .p-dialog,\n.p-dialog-right .p-dialog,\n.p-dialog-topleft .p-dialog,\n.p-dialog-topright .p-dialog,\n.p-dialog-bottomleft .p-dialog,\n.p-dialog-bottomright .p-dialog {\n    margin: 0.75rem;\n    -webkit-transform: translate3d(0px, 0px, 0px);\n            transform: translate3d(0px, 0px, 0px);\n}\n.p-dialog-top .p-dialog-enter-active,\n.p-dialog-top .p-dialog-leave-active,\n.p-dialog-bottom .p-dialog-enter-active,\n.p-dialog-bottom .p-dialog-leave-active,\n.p-dialog-left .p-dialog-enter-active,\n.p-dialog-left .p-dialog-leave-active,\n.p-dialog-right .p-dialog-enter-active,\n.p-dialog-right .p-dialog-leave-active,\n.p-dialog-topleft .p-dialog-enter-active,\n.p-dialog-topleft .p-dialog-leave-active,\n.p-dialog-topright .p-dialog-enter-active,\n.p-dialog-topright .p-dialog-leave-active,\n.p-dialog-bottomleft .p-dialog-enter-active,\n.p-dialog-bottomleft .p-dialog-leave-active,\n.p-dialog-bottomright .p-dialog-enter-active,\n.p-dialog-bottomright .p-dialog-leave-active {\n    -webkit-transition: all 0.3s ease-out;\n    transition: all 0.3s ease-out;\n}\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, -100%, 0px);\n            transform: translate3d(0px, -100%, 0px);\n}\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, 100%, 0px);\n            transform: translate3d(0px, 100%, 0px);\n}\n.p-dialog-left .p-dialog-enter-from,\n.p-dialog-left .p-dialog-leave-to,\n.p-dialog-topleft .p-dialog-enter-from,\n.p-dialog-topleft .p-dialog-leave-to,\n.p-dialog-bottomleft .p-dialog-enter-from,\n.p-dialog-bottomleft .p-dialog-leave-to {\n    -webkit-transform: translate3d(-100%, 0px, 0px);\n            transform: translate3d(-100%, 0px, 0px);\n}\n.p-dialog-right .p-dialog-enter-from,\n.p-dialog-right .p-dialog-leave-to,\n.p-dialog-topright .p-dialog-enter-from,\n.p-dialog-topright .p-dialog-leave-to,\n.p-dialog-bottomright .p-dialog-enter-from,\n.p-dialog-bottomright .p-dialog-leave-to {\n    -webkit-transform: translate3d(100%, 0px, 0px);\n            transform: translate3d(100%, 0px, 0px);\n}\n\n/* Maximize */\n.p-dialog-maximized {\n    -webkit-transition: none;\n    transition: none;\n    -webkit-transform: none;\n            transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    top: 0px !important;\n    left: 0px !important;\n    max-height: 100%;\n    height: 100%;\n}\n.p-dialog-maximized .p-dialog-content {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n\n/* Position */\n.p-dialog-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-dialog-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-dialog-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n"),L.render=function(e,x,y,v,k,w){const L=t("Portal"),$=n("ripple");return i(),a(L,{appendTo:y.appendTo},{default:o((()=>[k.containerVisible?(i(),l("div",{key:0,ref:w.maskRef,class:s(w.maskClass),onClick:x[3]||(x[3]=(...e)=>w.onMaskClick&&w.onMaskClick(...e))},[d(r,{name:"p-dialog",onBeforeEnter:w.onBeforeEnter,onEnter:w.onEnter,onBeforeLeave:w.onBeforeLeave,onLeave:w.onLeave,onAfterLeave:w.onAfterLeave,appear:""},{default:o((()=>[y.visible?(i(),l("div",p({key:0,ref:w.containerRef,class:w.dialogClass},e.$attrs,{role:"dialog","aria-labelledby":w.ariaLabelledById,"aria-modal":y.modal}),[y.showHeader?(i(),l("div",{key:0,class:"p-dialog-header",onMousedown:x[2]||(x[2]=(...e)=>w.initDrag&&w.initDrag(...e))},[m(e.$slots,"header",{},(()=>[y.header?(i(),l("span",{key:0,id:w.ariaLabelledById,class:"p-dialog-title"},g(y.header),9,E)):c("",!0)])),h("div",z,[y.maximizable?f((i(),l("button",{key:0,class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:x[0]||(x[0]=(...e)=>w.maximize&&w.maximize(...e)),type:"button",tabindex:"-1"},[h("span",{class:s(w.maximizeIconClass)},null,2)])),[[$]]):c("",!0),y.closable?f((i(),l("button",{key:1,class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:x[1]||(x[1]=(...e)=>w.close&&w.close(...e)),"aria-label":y.ariaCloseLabel,type:"button"},B,8,C)),[[$]]):c("",!0)])],32)):c("",!0),h("div",{class:s(w.contentStyleClass),style:u(y.contentStyle)},[m(e.$slots,"default")],6),y.footer||e.$slots.footer?(i(),l("div",S,[m(e.$slots,"footer",{},(()=>[b(g(y.footer),1)]))])):c("",!0)],16,D)):c("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):c("",!0)])),_:3},8,["appendTo"])};export{L as default};
+import e from"primevue/focustrap";import t from"primevue/portal";import n from"primevue/ripple";import{ZIndexUtils as i,DomHandler as a,UniqueComponentId as o}from"primevue/utils";import{computed as l,resolveComponent as s,resolveDirective as r,openBlock as d,createBlock as p,withCtx as m,createElementBlock as c,normalizeClass as g,createVNode as h,Transition as u,withDirectives as f,mergeProps as b,renderSlot as x,toDisplayString as y,createCommentVNode as v,createElementVNode as k,createTextVNode as w}from"vue";var L={name:"Dialog",inheritAttrs:!1,emits:["update:visible","show","hide","after-hide","maximize","unmaximize","dragend"],props:{header:{type:null,default:null},footer:{type:null,default:null},visible:{type:Boolean,default:!1},modal:{type:Boolean,default:null},contentStyle:{type:null,default:null},contentClass:{type:String,default:null},contentProps:{type:null,default:null},rtl:{type:Boolean,default:null},maximizable:{type:Boolean,default:!1},dismissableMask:{type:Boolean,default:!1},closable:{type:Boolean,default:!0},closeOnEscape:{type:Boolean,default:!0},showHeader:{type:Boolean,default:!0},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},position:{type:String,default:"center"},breakpoints:{type:Object,default:null},draggable:{type:Boolean,default:!0},keepInViewport:{type:Boolean,default:!0},minX:{type:Number,default:0},minY:{type:Number,default:0},appendTo:{type:String,default:"body"},closeIcon:{type:String,default:"pi pi-times"},maximizeIcon:{type:String,default:"pi pi-window-maximize"},minimizeIcon:{type:String,default:"pi pi-window-minimize"},closeButtonProps:{type:null,default:null},_instance:null},provide(){return{dialogRef:l((()=>this._instance))}},data(){return{containerVisible:this.visible,maximized:!1}},documentKeydownListener:null,container:null,mask:null,content:null,headerContainer:null,footerContainer:null,maximizableButton:null,closeButton:null,styleElement:null,dragging:null,documentDragListener:null,documentDragEndListener:null,lastPageX:null,lastPageY:null,updated(){this.visible&&(this.containerVisible=this.visible)},beforeUnmount(){this.unbindDocumentState(),this.unbindGlobalListeners(),this.destroyStyle(),this.mask&&this.autoZIndex&&i.clear(this.mask),this.container=null,this.mask=null},mounted(){this.breakpoints&&this.createStyle()},methods:{close(){this.$emit("update:visible",!1)},onBeforeEnter(e){e.setAttribute(this.attributeSelector,"")},onEnter(){this.$emit("show"),this.focus(),this.enableDocumentSettings(),this.bindGlobalListeners(),this.autoZIndex&&i.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal)},onBeforeLeave(){this.modal&&a.addClass(this.mask,"p-component-overlay-leave")},onLeave(){this.$emit("hide")},onAfterLeave(){this.autoZIndex&&i.clear(this.mask),this.containerVisible=!1,this.unbindDocumentState(),this.unbindGlobalListeners(),this.$emit("after-hide")},onMaskClick(e){this.dismissableMask&&this.closable&&this.modal&&this.mask===e.target&&this.close()},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.default&&e(this.content);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=this.$slots.footer&&e(this.footerContainer),t||(t=e(this.container)))),t&&t.focus()},maximize(e){this.maximized?(this.maximized=!1,this.$emit("unmaximize",e)):(this.maximized=!0,this.$emit("maximize",e)),this.modal||(this.maximized?a.addClass(document.body,"p-overflow-hidden"):a.removeClass(document.body,"p-overflow-hidden"))},enableDocumentSettings(){(this.modal||this.maximizable&&this.maximized)&&a.addClass(document.body,"p-overflow-hidden")},unbindDocumentState(){(this.modal||this.maximizable&&this.maximized)&&a.removeClass(document.body,"p-overflow-hidden")},onKeyDown(e){"Escape"===e.code&&this.closeOnEscape&&this.close()},bindDocumentKeyDownListener(){this.documentKeydownListener||(this.documentKeydownListener=this.onKeyDown.bind(this),window.document.addEventListener("keydown",this.documentKeydownListener))},unbindDocumentKeyDownListener(){this.documentKeydownListener&&(window.document.removeEventListener("keydown",this.documentKeydownListener),this.documentKeydownListener=null)},getPositionClass(){const e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((e=>e===this.position));return e?`p-dialog-${e}`:""},containerRef(e){this.container=e},maskRef(e){this.mask=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},footerContainerRef(e){this.footerContainer=e},maximizableRef(e){this.maximizableButton=e},closeButtonRef(e){this.closeButton=e},createStyle(){if(!this.styleElement){this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e="";for(let t in this.breakpoints)e+=`\n                        @media screen and (max-width: ${t}) {\n                            .p-dialog[${this.attributeSelector}] {\n                                width: ${this.breakpoints[t]} !important;\n                            }\n                        }\n                    `;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)},initDrag(e){a.hasClass(e.target,"p-dialog-header-icon")||a.hasClass(e.target.parentElement,"p-dialog-header-icon")||this.draggable&&(this.dragging=!0,this.lastPageX=e.pageX,this.lastPageY=e.pageY,this.container.style.margin="0",a.addClass(document.body,"p-unselectable-text"))},bindGlobalListeners(){this.draggable&&(this.bindDocumentDragListener(),this.bindDocumentDragEndListener()),this.closeOnEscape&&this.closable&&this.bindDocumentKeyDownListener()},unbindGlobalListeners(){this.unbindDocumentDragListener(),this.unbindDocumentDragEndListener(),this.unbindDocumentKeyDownListener()},bindDocumentDragListener(){this.documentDragListener=e=>{if(this.dragging){let t=a.getOuterWidth(this.container),n=a.getOuterHeight(this.container),i=e.pageX-this.lastPageX,o=e.pageY-this.lastPageY,l=this.container.getBoundingClientRect(),s=l.left+i,r=l.top+o,d=a.getViewport();this.container.style.position="fixed",this.keepInViewport?(s>=this.minX&&s+t<d.width&&(this.lastPageX=e.pageX,this.container.style.left=s+"px"),r>=this.minY&&r+n<d.height&&(this.lastPageY=e.pageY,this.container.style.top=r+"px")):(this.lastPageX=e.pageX,this.container.style.left=s+"px",this.lastPageY=e.pageY,this.container.style.top=r+"px")}},window.document.addEventListener("mousemove",this.documentDragListener)},unbindDocumentDragListener(){this.documentDragListener&&(window.document.removeEventListener("mousemove",this.documentDragListener),this.documentDragListener=null)},bindDocumentDragEndListener(){this.documentDragEndListener=e=>{this.dragging&&(this.dragging=!1,a.removeClass(document.body,"p-unselectable-text"),this.$emit("dragend",e))},window.document.addEventListener("mouseup",this.documentDragEndListener)},unbindDocumentDragEndListener(){this.documentDragEndListener&&(window.document.removeEventListener("mouseup",this.documentDragEndListener),this.documentDragEndListener=null)}},computed:{maskClass(){return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":this.modal},this.getPositionClass()]},dialogClass(){return["p-dialog p-component",{"p-dialog-rtl":this.rtl,"p-dialog-maximized":this.maximizable&&this.maximized,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},maximizeIconClass(){return["p-dialog-header-maximize-icon",{[this.maximizeIcon]:!this.maximized,[this.minimizeIcon]:this.maximized}]},ariaId:()=>o(),ariaLabelledById(){return null!=this.header||null!==this.$attrs["aria-labelledby"]?this.ariaId+"_header":null},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0},attributeSelector:()=>o(),contentStyleClass(){return["p-dialog-content",this.contentClass]}},directives:{ripple:n,focustrap:e},components:{Portal:t}};const D=["aria-labelledby","aria-modal"],z=["id"],C={class:"p-dialog-header-icons"},E=["tabindex"],B=["aria-label"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&i.firstChild?i.insertBefore(a,i.firstChild):i.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-dialog-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    pointer-events: none;\n}\n.p-dialog-mask.p-component-overlay {\n    pointer-events: auto;\n}\n.p-dialog {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    pointer-events: auto;\n    max-height: 90%;\n    -webkit-transform: scale(1);\n            transform: scale(1);\n}\n.p-dialog-content {\n    overflow-y: auto;\n}\n.p-dialog-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog-footer {\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-dialog .p-dialog-header-icons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-dialog .p-dialog-header-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Fluid */\n.p-fluid .p-dialog-footer .p-button {\n    width: auto;\n}\n\n/* Animation */\n/* Center */\n.p-dialog-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-dialog-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-dialog-enter-from,\n.p-dialog-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n\n/* Top, Bottom, Left, Right, Top* and Bottom* */\n.p-dialog-top .p-dialog,\n.p-dialog-bottom .p-dialog,\n.p-dialog-left .p-dialog,\n.p-dialog-right .p-dialog,\n.p-dialog-topleft .p-dialog,\n.p-dialog-topright .p-dialog,\n.p-dialog-bottomleft .p-dialog,\n.p-dialog-bottomright .p-dialog {\n    margin: 0.75rem;\n    -webkit-transform: translate3d(0px, 0px, 0px);\n            transform: translate3d(0px, 0px, 0px);\n}\n.p-dialog-top .p-dialog-enter-active,\n.p-dialog-top .p-dialog-leave-active,\n.p-dialog-bottom .p-dialog-enter-active,\n.p-dialog-bottom .p-dialog-leave-active,\n.p-dialog-left .p-dialog-enter-active,\n.p-dialog-left .p-dialog-leave-active,\n.p-dialog-right .p-dialog-enter-active,\n.p-dialog-right .p-dialog-leave-active,\n.p-dialog-topleft .p-dialog-enter-active,\n.p-dialog-topleft .p-dialog-leave-active,\n.p-dialog-topright .p-dialog-enter-active,\n.p-dialog-topright .p-dialog-leave-active,\n.p-dialog-bottomleft .p-dialog-enter-active,\n.p-dialog-bottomleft .p-dialog-leave-active,\n.p-dialog-bottomright .p-dialog-enter-active,\n.p-dialog-bottomright .p-dialog-leave-active {\n    -webkit-transition: all 0.3s ease-out;\n    transition: all 0.3s ease-out;\n}\n.p-dialog-top .p-dialog-enter-from,\n.p-dialog-top .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, -100%, 0px);\n            transform: translate3d(0px, -100%, 0px);\n}\n.p-dialog-bottom .p-dialog-enter-from,\n.p-dialog-bottom .p-dialog-leave-to {\n    -webkit-transform: translate3d(0px, 100%, 0px);\n            transform: translate3d(0px, 100%, 0px);\n}\n.p-dialog-left .p-dialog-enter-from,\n.p-dialog-left .p-dialog-leave-to,\n.p-dialog-topleft .p-dialog-enter-from,\n.p-dialog-topleft .p-dialog-leave-to,\n.p-dialog-bottomleft .p-dialog-enter-from,\n.p-dialog-bottomleft .p-dialog-leave-to {\n    -webkit-transform: translate3d(-100%, 0px, 0px);\n            transform: translate3d(-100%, 0px, 0px);\n}\n.p-dialog-right .p-dialog-enter-from,\n.p-dialog-right .p-dialog-leave-to,\n.p-dialog-topright .p-dialog-enter-from,\n.p-dialog-topright .p-dialog-leave-to,\n.p-dialog-bottomright .p-dialog-enter-from,\n.p-dialog-bottomright .p-dialog-leave-to {\n    -webkit-transform: translate3d(100%, 0px, 0px);\n            transform: translate3d(100%, 0px, 0px);\n}\n\n/* Maximize */\n.p-dialog-maximized {\n    -webkit-transition: none;\n    transition: none;\n    -webkit-transform: none;\n            transform: none;\n    width: 100vw !important;\n    height: 100vh !important;\n    top: 0px !important;\n    left: 0px !important;\n    max-height: 100%;\n    height: 100%;\n}\n.p-dialog-maximized .p-dialog-content {\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n\n/* Position */\n.p-dialog-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-dialog-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-dialog-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-topright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-dialog-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomleft {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-dialog-bottomright {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-confirm-dialog .p-dialog-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n"),L.render=function(e,t,n,i,a,o){const l=s("Portal"),L=r("ripple"),S=r("focustrap");return d(),p(l,{appendTo:n.appendTo},{default:m((()=>[a.containerVisible?(d(),c("div",{key:0,ref:o.maskRef,class:g(o.maskClass),onClick:t[3]||(t[3]=(...e)=>o.onMaskClick&&o.onMaskClick(...e))},[h(u,{name:"p-dialog",onBeforeEnter:o.onBeforeEnter,onEnter:o.onEnter,onBeforeLeave:o.onBeforeLeave,onLeave:o.onLeave,onAfterLeave:o.onAfterLeave,appear:""},{default:m((()=>[n.visible?f((d(),c("div",b({key:0,ref:o.containerRef,class:o.dialogClass,role:"dialog","aria-labelledby":o.ariaLabelledById,"aria-modal":n.modal},e.$attrs),[n.showHeader?(d(),c("div",{key:0,ref:o.headerContainerRef,class:"p-dialog-header",onMousedown:t[2]||(t[2]=(...e)=>o.initDrag&&o.initDrag(...e))},[x(e.$slots,"header",{},(()=>[n.header?(d(),c("span",{key:0,id:o.ariaLabelledById,class:"p-dialog-title"},y(n.header),9,z)):v("",!0)])),k("div",C,[n.maximizable?f((d(),c("button",{key:0,ref:o.maximizableRef,autofocus:"",class:"p-dialog-header-icon p-dialog-header-maximize p-link",onClick:t[0]||(t[0]=(...e)=>o.maximize&&o.maximize(...e)),type:"button",tabindex:n.maximizable?"0":"-1"},[k("span",{class:g(o.maximizeIconClass)},null,2)],8,E)),[[L]]):v("",!0),n.closable?f((d(),c("button",b({key:1,ref:o.closeButtonRef,autofocus:"",class:"p-dialog-header-icon p-dialog-header-close p-link",onClick:t[1]||(t[1]=(...e)=>o.close&&o.close(...e)),"aria-label":o.closeAriaLabel,type:"button"},n.closeButtonProps),[k("span",{class:g(["p-dialog-header-close-icon",n.closeIcon])},null,2)],16,B)),[[L]]):v("",!0)])],544)):v("",!0),k("div",b({ref:o.contentRef,class:o.contentStyleClass,style:n.contentStyle},n.contentProps),[x(e.$slots,"default")],16),n.footer||e.$slots.footer?(d(),c("div",{key:1,ref:o.footerContainerRef,class:"p-dialog-footer"},[x(e.$slots,"footer",{},(()=>[w(y(n.footer),1)]))],512)):v("",!0)],16,D)),[[S,{focusTrapDisabled:!n.modal}]]):v("",!0)])),_:3},8,["onBeforeEnter","onEnter","onBeforeLeave","onLeave","onAfterLeave"])],2)):v("",!0)])),_:3},8,["appendTo"])};export{L as default};