@progress/kendo-vue-popup 8.1.0-develop.5 → 8.1.0-develop.7

package/Popup.d.ts

@@ -8,6 +8,7 @@
 import { PropType } from 'vue';
 import { Position } from './models/Position';
 import { PopupProps } from './models/PopupProps';
+import { MouseDownOutsideEvent } from './models/Events';
 /**
  * @hidden
  */
@@ -63,11 +64,13 @@ declare const Popup: import('vue').DefineComponent<import('vue').ExtractPropType
         type: PropType<string>;
         default: string;
     };
-    onOpen: PropType<(event: import('.').PopupOpenEvent) => void>;
-    onClose: PropType<(event: import('.').PopupCloseEvent) => void>;
+    onOpen: PropType<(event: import('./models/Events').OpenEvent) => void>;
+    onClose: PropType<(event: import('./models/Events').CloseEvent) => void>;
+    onMousedownoutside: PropType<(event: MouseDownOutsideEvent) => void>;
 }>, {}, {
     hasMounted: boolean;
 }, {}, {
+    handleMouseDown(event: MouseEvent): void;
     onOpened(): void;
     onClosing(): void;
     onClosed(): void;
@@ -134,8 +137,9 @@ declare const Popup: import('vue').DefineComponent<import('vue').ExtractPropType
         type: PropType<string>;
         default: string;
     };
-    onOpen: PropType<(event: import('.').PopupOpenEvent) => void>;
-    onClose: PropType<(event: import('.').PopupCloseEvent) => void>;
+    onOpen: PropType<(event: import('./models/Events').OpenEvent) => void>;
+    onClose: PropType<(event: import('./models/Events').CloseEvent) => void>;
+    onMousedownoutside: PropType<(event: MouseDownOutsideEvent) => void>;
 }>> & Readonly<{}>, {
     animate: boolean;
     anchor: string;

package/Popup.js

@@ -5,9 +5,9 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),_=require("@progress/kendo-vue-animation"),s=require("./util.js"),v=require("./services/alignService.js"),A=require("./services/domService.js"),S=require("./services/positionService.js"),d=require("@progress/kendo-vue-common"),C=require("./package-metadata.js");function $(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!c.isVNode(t)}const y=100,E=1,P={left:-1e3,top:0},m="k-animation-container-shown",g="k-popup",b=c.defineComponent({name:"Popup",props:{appendTo:{type:String,default:""},anchor:{type:[String,Object],default:""},className:String,id:String,popupClass:String,collision:{type:Object,default:function(){return{horizontal:s.CollisionType.fit,vertical:s.CollisionType.flip}}},anchorAlign:{type:Object,default:function(){return{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.bottom}}},popupAlign:{type:Object,default:function(){return{horizontal:s.AlignPoint.left,vertical:s.AlignPoint.top}}},offset:{type:Object,default:function(){return P}},show:{type:Boolean,default:!1},animate:{type:[Boolean,Object],default:!0},direction:{type:String,default:"down"},onOpen:Function,onClose:Function},inject:{kCurrentZIndex:{default:null}},data(){return{hasMounted:!1}},created(){d.validatePackage(C.packageMetadata),this.mountedAppendTo=void 0,this.mountedAnchor=void 0,this._clonedElement=void 0,this._flipped=!1,this._offsetTop=0,this._offsetLeft=-1e3,this._exitingAnimation=!1,this._prevShow=!1,this._prevShow=this.$props.show,this._domService=new A.DOMService,this._alignService=new v.AlignService(this._domService),this._positionService=new S.PositionService(this._domService),this.reposition=s.throttle(this.reposition.bind(this),s.FRAME_DURATION)},mounted(){d.canUseDOM&&(this.mountedAppendTo=this.appendTo?this.getParentRef(this.appendTo):document.body,this.mountedAnchor=this.anchor?this.getParentRef(this.anchor,!0):document.body),this._parentElement=this.$el.parentElement,this._clonedElement=this.$el.cloneNode(!0),this.hasMounted=!0,this.mountedAppendTo.appendChild(this.$el)},updated(){this._prevShow=this.$props.show},unmounted(){this.detachRepositionHandlers()},beforeUnmount(){this._parentElement&&this._parentElement.appendChild(this.$el)},methods:{onOpened(){const t=this.$el;this.$props.show&&t.classList.add(m),this.attachRepositionHandlers(t),this.$emit("open",{target:this})},onClosing(){this.$props.show||this.$el.classList.remove(m),this.detachRepositionHandlers()},onClosed(){this._exitingAnimation&&(this._exitingAnimation=!1,this.$forceUpdate()),this.$emit("close",{target:this})},transitionDuration(){const t=this.$props.animate;let i=0,e=0;return t&&(t===!0?i=e=void 0:(i=t.openDuration,e=t.closeDuration)),{transitionEnterDuration:i,transitionExitDuration:e}},getParentRef(t,i){let e=this.$parent;for(;!e.$refs[t];){if(e&&e.kendoAnchorRef&&i)return e.kendoAnchorRef;if(e=e.$parent,!e&&d.canUseDOM)return document.getElementById(t)||document.body}return e.$refs[t].$el||e.$refs[t]},position(t,i,e){const{anchorAlign:n,popupAlign:r,collision:l,offset:p}=t,o=e?this.mountedAnchor:document.body,a=this._alignService.alignElement({anchor:e?o:void 0,element:i,elementAlign:r,anchorAlign:n,offset:p});return this._positionService.positionElement({anchor:o,anchorAlign:n,collisions:l,element:i,currentLocation:a,elementAlign:r})},calculatePosition(t,i){if(!i||!s.isWindowAvailable()||!d.canUseDOM)return{flipped:!1,offset:t.offset};const e=d.getDefaultSlots(this),n=document.createElement("div"),r=this.$el&&this.$el.firstChild&&this.$el.firstChild.firstChild?this.$el.firstChild.firstChild.cloneNode(!0):null,l=r&&r.getBoundingClientRect?r:this._clonedElement;if(l)n.appendChild(l);else{const o=e&&e[0].props?e[0].props.class:"",a=this.$props.popupClass;n.innerHTML=`<div class="k-animation-container k-animation-container-relative">
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),_=require("@progress/kendo-vue-animation"),l=require("./util.js"),w=require("./services/alignService.js"),A=require("./services/domService.js"),v=require("./services/positionService.js"),p=require("@progress/kendo-vue-common"),C=require("./package-metadata.js");function S(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!c.isVNode(t)}const E=100,$=1,y={left:-1e3,top:0},m="k-animation-container-shown",g="k-popup",P=c.defineComponent({name:"Popup",props:{appendTo:{type:String,default:""},anchor:{type:[String,Object],default:""},className:String,id:String,popupClass:String,collision:{type:Object,default:function(){return{horizontal:l.CollisionType.fit,vertical:l.CollisionType.flip}}},anchorAlign:{type:Object,default:function(){return{horizontal:l.AlignPoint.left,vertical:l.AlignPoint.bottom}}},popupAlign:{type:Object,default:function(){return{horizontal:l.AlignPoint.left,vertical:l.AlignPoint.top}}},offset:{type:Object,default:function(){return y}},show:{type:Boolean,default:!1},animate:{type:[Boolean,Object],default:!0},direction:{type:String,default:"down"},onOpen:Function,onClose:Function,onMousedownoutside:Function},inject:{kCurrentZIndex:{default:null}},data(){return{hasMounted:!1}},created(){p.validatePackage(C.packageMetadata),this.mountedAppendTo=void 0,this.mountedAnchor=void 0,this._clonedElement=void 0,this._flipped=!1,this._offsetTop=0,this._offsetLeft=-1e3,this._exitingAnimation=!1,this._prevShow=!1,this._prevShow=this.$props.show,this._domService=new A.DOMService,this._alignService=new w.AlignService(this._domService),this._positionService=new v.PositionService(this._domService),this.reposition=l.throttle(this.reposition.bind(this),l.FRAME_DURATION)},mounted(){p.canUseDOM&&(this.mountedAppendTo=this.appendTo?this.getParentRef(this.appendTo):document.body,this.mountedAnchor=this.anchor?this.getParentRef(this.anchor,!0):document.body),this._parentElement=this.$el.parentElement,this._clonedElement=this.$el.cloneNode(!0),this.hasMounted=!0,this.mountedAppendTo.appendChild(this.$el)},updated(){this._prevShow=this.$props.show},unmounted(){this.detachRepositionHandlers(),window==null||window.removeEventListener("mousedown",this.handleMouseDown)},beforeUnmount(){this._parentElement&&this._parentElement.appendChild(this.$el)},methods:{handleMouseDown(t){var n,s;const i=((n=t==null?void 0:t.target)==null?void 0:n.closest(".k-animation-container"))===null,e=((s=this.mountedAnchor)==null?void 0:s.contains(t==null?void 0:t.target))||!1;if(i){const r={target:this,event:t,isAnchorClicked:e};this.$emit("mousedownoutside",r),window==null||window.removeEventListener("mousedown",this.handleMouseDown)}},onOpened(){const t=this.$el;window==null||window.addEventListener("mousedown",this.handleMouseDown),this.$props.show&&t.classList.add(m),this.attachRepositionHandlers(t),this.$emit("open",{target:this})},onClosing(){this.$props.show||this.$el.classList.remove(m),this.detachRepositionHandlers()},onClosed(){this._exitingAnimation&&(this._exitingAnimation=!1,this.$forceUpdate()),this.$emit("close",{target:this})},transitionDuration(){const t=this.$props.animate;let i=0,e=0;return t&&(t===!0?i=e=void 0:(i=t.openDuration,e=t.closeDuration)),{transitionEnterDuration:i,transitionExitDuration:e}},getParentRef(t,i){let e=this.$parent;for(;!e.$refs[t];){if(e&&e.kendoAnchorRef&&i)return e.kendoAnchorRef;if(e=e.$parent,!e&&p.canUseDOM)return document.getElementById(t)||document.body}return e.$refs[t].$el||e.$refs[t]},position(t,i,e){const{anchorAlign:n,popupAlign:s,collision:r,offset:d}=t,o=e?this.mountedAnchor:document.body,a=this._alignService.alignElement({anchor:e?o:void 0,element:i,elementAlign:s,anchorAlign:n,offset:d});return this._positionService.positionElement({anchor:o,anchorAlign:n,collisions:r,element:i,currentLocation:a,elementAlign:s})},calculatePosition(t,i){if(!i||!l.isWindowAvailable()||!p.canUseDOM)return{flipped:!1,offset:t.offset};const e=p.getDefaultSlots(this),n=document.createElement("div"),s=this.$el&&this.$el.firstChild&&this.$el.firstChild.firstChild?this.$el.firstChild.firstChild.cloneNode(!0):null,r=s&&s.getBoundingClientRect?s:this._clonedElement;if(r)n.appendChild(r);else{const o=e&&e[0].props?e[0].props.class:"",a=this.$props.popupClass;n.innerHTML=`<div class="k-animation-container k-animation-container-relative">
                         <div class="k-popup k-animation-container k-animation-container-relative">
                             <div class="${o} ${a}" >
                             </div>
                         </div>
-                </div>`}if(i.appendChild(n),n&&n.firstChild){const o=n.firstChild;o.style.position="absolute",o.style.visibility="hidden",o.style.display="block",o.style.left="-1000",o.style.top="0";const a=e&&e[0].props?e[0].props.style:{};if(a)for(const[h,f]of Object.entries(a))o.style[h]=f}const p=this.position(t,n.firstChild,this.$props.anchor);return n.parentNode.removeChild(n),p},attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=this._domService.scrollableParents(this.$props.anchor?this.mountedAnchor:t),this._scrollableParents.map(i=>i.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)},detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(t=>t.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)},reposition(){this._clonedElement=this.$el.cloneNode(!0),this.$forceUpdate()},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex+E:y}},render(){const{className:t,popupClass:i,show:e,id:n}=this.$props,r=d.getDefaultSlots(this),l=r,p=s.isWindowAvailable()?this.$props.appendTo?this.mountedAppendTo||this.getParentRef(this.$props.appendTo):document.body:void 0;if(this.$props.show){const u=this.calculatePosition(this.$props,p);this._offsetLeft=u.offset.left,this._offsetTop=u.offset.top,this._flipped=!!u.flipped}const o=this.$props.direction==="down"?this._flipped?"up":"down":this._flipped?"down":"up",{transitionEnterDuration:a,transitionExitDuration:h}=this.transitionDuration(),f=this.getCurrentZIndex();return this._exitingAnimation=this._exitingAnimation||this._prevShow&&!e,this.hasMounted?e||this._exitingAnimation&&p?c.createVNode(_.Slide,{id:n,role:this.appendTo?"":"region",componentChildClassName:[i,g],className:t,onEntered:this.onOpened,onExiting:this.onClosing,onExited:this.onClosed,direction:o,style:{zIndex:f,position:"absolute",top:this._offsetTop+"px",left:this._offsetLeft+"px"},transitionEnterDuration:a,transitionExitDuration:h,appear:e},$(l)?l:{default:()=>[l]}):null:c.createVNode("div",{style:{display:"none"},class:t},[c.createVNode("div",{class:[i,g]},[r])])}});exports.Popup=b;
+                </div>`}if(i.appendChild(n),n&&n.firstChild){const o=n.firstChild;o.style.position="absolute",o.style.visibility="hidden",o.style.display="block",o.style.left="-1000",o.style.top="0";const a=e&&e[0].props?e[0].props.style:{};if(a)for(const[h,f]of Object.entries(a))o.style[h]=f}const d=this.position(t,n.firstChild,this.$props.anchor);return n.parentNode.removeChild(n),d},attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=this._domService.scrollableParents(this.$props.anchor?this.mountedAnchor:t),this._scrollableParents.map(i=>i.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)},detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(t=>t.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)},reposition(){this._clonedElement=this.$el.cloneNode(!0),this.$forceUpdate()},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex+$:E}},render(){const{className:t,popupClass:i,show:e,id:n}=this.$props,s=p.getDefaultSlots(this),r=s,d=l.isWindowAvailable()?this.$props.appendTo?this.mountedAppendTo||this.getParentRef(this.$props.appendTo):document.body:void 0;if(this.$props.show){const u=this.calculatePosition(this.$props,d);this._offsetLeft=u.offset.left,this._offsetTop=u.offset.top,this._flipped=!!u.flipped}const o=this.$props.direction==="down"?this._flipped?"up":"down":this._flipped?"down":"up",{transitionEnterDuration:a,transitionExitDuration:h}=this.transitionDuration(),f=this.getCurrentZIndex();return this._exitingAnimation=this._exitingAnimation||this._prevShow&&!e,this.hasMounted?e||this._exitingAnimation&&d?c.createVNode(_.Slide,{id:n,role:this.appendTo?"":"region",componentChildClassName:[i,g],className:t,onEntered:this.onOpened,onExiting:this.onClosing,onExited:this.onClosed,direction:o,style:{zIndex:f,position:"absolute",top:this._offsetTop+"px",left:this._offsetLeft+"px"},transitionEnterDuration:a,transitionExitDuration:h,appear:e},S(r)?r:{default:()=>[r]}):null:c.createVNode("div",{style:{display:"none"},class:t},[c.createVNode("div",{class:[i,g]},[s])])}});exports.Popup=P;

package/Popup.mjs

@@ -5,21 +5,21 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as A, createVNode as f, isVNode as C } from "vue";
+import { defineComponent as v, createVNode as u, isVNode as C } from "vue";
 import { Slide as E } from "@progress/kendo-vue-animation";
-import { isWindowAvailable as m, throttle as y, AlignPoint as h, CollisionType as _, FRAME_DURATION as S } from "./util.mjs";
-import { AlignService as b } from "./services/alignService.mjs";
+import { isWindowAvailable as m, throttle as $, AlignPoint as h, CollisionType as _, FRAME_DURATION as y } from "./util.mjs";
+import { AlignService as S } from "./services/alignService.mjs";
 import { DOMService as P } from "./services/domService.mjs";
-import { PositionService as w } from "./services/positionService.mjs";
-import { getDefaultSlots as g, canUseDOM as u, validatePackage as O } from "@progress/kendo-vue-common";
-import { packageMetadata as T } from "./package-metadata.mjs";
-function x(t) {
+import { PositionService as b } from "./services/positionService.mjs";
+import { getDefaultSlots as g, canUseDOM as f, validatePackage as O } from "@progress/kendo-vue-common";
+import { packageMetadata as D } from "./package-metadata.mjs";
+function T(t) {
   return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !C(t);
 }
-const D = 100, N = 1, k = {
+const x = 100, k = 1, N = {
   left: -1e3,
   top: 0
-}, v = "k-animation-container-shown", $ = "k-popup", F = /* @__PURE__ */ A({
+}, w = "k-animation-container-shown", A = "k-popup", Z = /* @__PURE__ */ v({
   name: "Popup",
   props: {
     appendTo: {
@@ -63,7 +63,7 @@ const D = 100, N = 1, k = {
     offset: {
       type: Object,
       default: function() {
-        return k;
+        return N;
       }
     },
     show: {
@@ -79,7 +79,8 @@ const D = 100, N = 1, k = {
       default: "down"
     },
     onOpen: Function,
-    onClose: Function
+    onClose: Function,
+    onMousedownoutside: Function
   },
   inject: {
     kCurrentZIndex: {
@@ -92,29 +93,41 @@ const D = 100, N = 1, k = {
     };
   },
   created() {
-    O(T), this.mountedAppendTo = void 0, this.mountedAnchor = void 0, this._clonedElement = void 0, this._flipped = !1, this._offsetTop = 0, this._offsetLeft = -1e3, this._exitingAnimation = !1, this._prevShow = !1, this._prevShow = this.$props.show, this._domService = new P(), this._alignService = new b(this._domService), this._positionService = new w(this._domService), this.reposition = y(this.reposition.bind(this), S);
+    O(D), this.mountedAppendTo = void 0, this.mountedAnchor = void 0, this._clonedElement = void 0, this._flipped = !1, this._offsetTop = 0, this._offsetLeft = -1e3, this._exitingAnimation = !1, this._prevShow = !1, this._prevShow = this.$props.show, this._domService = new P(), this._alignService = new S(this._domService), this._positionService = new b(this._domService), this.reposition = $(this.reposition.bind(this), y);
   },
   mounted() {
-    u && (this.mountedAppendTo = this.appendTo ? this.getParentRef(this.appendTo) : document.body, this.mountedAnchor = this.anchor ? this.getParentRef(this.anchor, !0) : document.body), this._parentElement = this.$el.parentElement, this._clonedElement = this.$el.cloneNode(!0), this.hasMounted = !0, this.mountedAppendTo.appendChild(this.$el);
+    f && (this.mountedAppendTo = this.appendTo ? this.getParentRef(this.appendTo) : document.body, this.mountedAnchor = this.anchor ? this.getParentRef(this.anchor, !0) : document.body), this._parentElement = this.$el.parentElement, this._clonedElement = this.$el.cloneNode(!0), this.hasMounted = !0, this.mountedAppendTo.appendChild(this.$el);
   },
   updated() {
     this._prevShow = this.$props.show;
   },
   unmounted() {
-    this.detachRepositionHandlers();
+    this.detachRepositionHandlers(), window == null || window.removeEventListener("mousedown", this.handleMouseDown);
   },
   beforeUnmount() {
     this._parentElement && this._parentElement.appendChild(this.$el);
   },
   methods: {
+    handleMouseDown(t) {
+      var n, s;
+      const i = ((n = t == null ? void 0 : t.target) == null ? void 0 : n.closest(".k-animation-container")) === null, e = ((s = this.mountedAnchor) == null ? void 0 : s.contains(t == null ? void 0 : t.target)) || !1;
+      if (i) {
+        const r = {
+          target: this,
+          event: t,
+          isAnchorClicked: e
+        };
+        this.$emit("mousedownoutside", r), window == null || window.removeEventListener("mousedown", this.handleMouseDown);
+      }
+    },
     onOpened() {
       const t = this.$el;
-      this.$props.show && t.classList.add(v), this.attachRepositionHandlers(t), this.$emit("open", {
+      window == null || window.addEventListener("mousedown", this.handleMouseDown), this.$props.show && t.classList.add(w), this.attachRepositionHandlers(t), this.$emit("open", {
         target: this
       });
     },
     onClosing() {
-      this.$props.show || this.$el.classList.remove(v), this.detachRepositionHandlers();
+      this.$props.show || this.$el.classList.remove(w), this.detachRepositionHandlers();
     },
     onClosed() {
       this._exitingAnimation && (this._exitingAnimation = !1, this.$forceUpdate()), this.$emit("close", {
@@ -134,7 +147,7 @@ const D = 100, N = 1, k = {
       for (; !e.$refs[t]; ) {
         if (e && e.kendoAnchorRef && i)
           return e.kendoAnchorRef;
-        if (e = e.$parent, !e && u)
+        if (e = e.$parent, !e && f)
           return document.getElementById(t) || document.body;
       }
       return e.$refs[t].$el || e.$refs[t];
@@ -162,7 +175,7 @@ const D = 100, N = 1, k = {
       });
     },
     calculatePosition(t, i) {
-      if (!i || !m() || !u)
+      if (!i || !m() || !f)
         return {
           flipped: !1,
           offset: t.offset
@@ -184,8 +197,8 @@ const D = 100, N = 1, k = {
         o.style.position = "absolute", o.style.visibility = "hidden", o.style.display = "block", o.style.left = "-1000", o.style.top = "0";
         const l = e && e[0].props ? e[0].props.style : {};
         if (l)
-          for (const [p, c] of Object.entries(l))
-            o.style[p] = c;
+          for (const [d, c] of Object.entries(l))
+            o.style[d] = c;
       }
       const a = this.position(t, n.firstChild, this.$props.anchor);
       return n.parentNode.removeChild(n), a;
@@ -200,7 +213,7 @@ const D = 100, N = 1, k = {
       this._clonedElement = this.$el.cloneNode(!0), this.$forceUpdate();
     },
     getCurrentZIndex() {
-      return this.kCurrentZIndex ? this.kCurrentZIndex + N : D;
+      return this.kCurrentZIndex ? this.kCurrentZIndex + k : x;
     }
   },
   render() {
@@ -211,17 +224,17 @@ const D = 100, N = 1, k = {
       id: n
     } = this.$props, s = g(this), r = s, a = m() ? this.$props.appendTo ? this.mountedAppendTo || this.getParentRef(this.$props.appendTo) : document.body : void 0;
     if (this.$props.show) {
-      const d = this.calculatePosition(this.$props, a);
-      this._offsetLeft = d.offset.left, this._offsetTop = d.offset.top, this._flipped = !!d.flipped;
+      const p = this.calculatePosition(this.$props, a);
+      this._offsetLeft = p.offset.left, this._offsetTop = p.offset.top, this._flipped = !!p.flipped;
     }
     const o = this.$props.direction === "down" ? this._flipped ? "up" : "down" : this._flipped ? "down" : "up", {
       transitionEnterDuration: l,
-      transitionExitDuration: p
+      transitionExitDuration: d
     } = this.transitionDuration(), c = this.getCurrentZIndex();
-    return this._exitingAnimation = this._exitingAnimation || this._prevShow && !e, this.hasMounted ? e || this._exitingAnimation && a ? f(E, {
+    return this._exitingAnimation = this._exitingAnimation || this._prevShow && !e, this.hasMounted ? e || this._exitingAnimation && a ? u(E, {
       id: n,
       role: this.appendTo ? "" : "region",
-      componentChildClassName: [i, $],
+      componentChildClassName: [i, A],
       className: t,
       onEntered: this.onOpened,
       onExiting: this.onClosing,
@@ -234,20 +247,20 @@ const D = 100, N = 1, k = {
         left: this._offsetLeft + "px"
       },
       transitionEnterDuration: l,
-      transitionExitDuration: p,
+      transitionExitDuration: d,
       appear: e
-    }, x(r) ? r : {
+    }, T(r) ? r : {
       default: () => [r]
-    }) : null : f("div", {
+    }) : null : u("div", {
       style: {
         display: "none"
       },
       class: t
-    }, [f("div", {
-      class: [i, $]
+    }, [u("div", {
+      class: [i, A]
     }, [s])]);
   }
 });
 export {
-  F as Popup
+  Z as Popup
 };

package/dist/cdn/js/kendo-vue-popup.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("vue"),require("@progress/kendo-vue-animation"),require("@progress/kendo-popup-common"),require("@progress/kendo-vue-common")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-animation","@progress/kendo-popup-common","@progress/kendo-vue-common"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoVuePopup={},t.Vue,t.KendoVueAnimation,t.KendoPopupCommon,t.KendoVueCommon)}(this,function(t,e,n,o,i){"use strict";const s=(t,e)=>t||{height:0,left:e.left,top:e.top,width:0},r=()=>"undefined"!=typeof document&&!!document.body,l=()=>"undefined"!=typeof window,d=/auto|scroll/,a=t=>{const e=window.getComputedStyle(t);return`${e.overflow}${e.overflowX}${e.overflowY}`},p=1e3/60,c=(()=>{if(!r())return!1;const t=document.createElement("div");if(t.style.transform="matrix(10, 0, 0, 10, 0, 0)",t.innerHTML="<div>child</div>",document.body.appendChild(t),t&&t.firstChild){const e=t.firstChild;e.style.position="fixed",e.style.top="10px"}const e=10!==t.children[0].getBoundingClientRect().top;return document.body.removeChild(t),e})(),h="fit",u="flip",f="left",m="bottom",g="top";class v{constructor(t){this._dom=t}alignElement(t){const{anchor:e,element:n,anchorAlign:o,elementAlign:i,offset:s}=t,r=this._dom.hasOffsetParent(n)?this.relativeRect(e,n,s):this.absoluteRect(e,n,s);return this._dom.align({anchorAlign:o,anchorRect:r,elementAlign:i,elementRect:this._dom.offset(n)})}absoluteRect(t,e,n){const o=this._dom,i=((t,e)=>e?{height:t.height,left:t.left-e.left,top:t.top-e.top,width:t.width}:t)(s(o.offset(t),n),o.stackingElementOffset(e)),r=o.stackingElementScroll(e),l=o.addScroll(i,r),d=this.elementScrollPosition(t,e),a=o.removeScroll(l,d);return a.left+=window.scrollX||window.pageXOffset,a.top+=window.scrollY||window.pageYOffset,a}elementScrollPosition(t,e){return t?{x:0,y:0}:this._dom.scrollPosition(e)}relativeRect(t,e,n){return s(this._dom.position(t,e),n)}}class w{addOffset(t,e){return{left:t.left+e.left,top:t.top+e.top}}align(t){return o.align(t)}boundingOffset(t){return o.boundingOffset(t)}getWindow(){return l()?window:null}isBodyOffset(t){return o.isBodyOffset(t)}hasOffsetParent(t){if(!t)return!1;const e=t.offsetParent;return e&&!("BODY"===e.nodeName&&"static"===window.getComputedStyle(e).position)}offset(t){return t?o.offset(t):null}staticOffset(t){if(!t)return null;const{left:e,top:n}=t.style;t.style.left="0px",t.style.top="0px";const i=o.offset(t);return t.style.left=e,t.style.top=n,i}position(t,e){if(!t||!e)return null;const n=o.siblingContainer(t,e);return o.positionWithScroll(t,n)}relativeOffset(t,e){return o.applyLocationOffset(this.offset(t),e,this.isBodyOffset(t))}addScroll(t,e){return o.addScroll(t,e)}removeScroll(t,e){return o.removeScroll(t,e)}restrictToView(t){return o.restrictToView(t)}scrollPosition(t){return o.scrollPosition(t)}scrollableParents(t){return(t=>{const e=[];if(!r()||!l())return e;let n=t.parentElement;for(;n;)d.test(a(n))&&e.push(n),n=n.parentElement;return e.push(window),e})(t)}stackingElementOffset(t){const e=this.getRelativeContextElement(t);return e?o.offset(e):null}stackingElementScroll(t){const e=this.getRelativeContextElement(t);return e?{x:e.scrollLeft,y:e.scrollTop}:{x:0,y:0}}stackingElementViewPort(t){const e=this.getRelativeContextElement(t);return e?{height:e.scrollHeight,width:e.scrollWidth}:null}getRelativeContextElement(t){if(!t||!c)return null;let e=t.parentElement;for(;e;){if("none"!==window.getComputedStyle(e).transform)return e;e=e.parentElement}return null}useRelativePosition(t){return!!this.getRelativeContextElement(t)}windowViewPort(t){return o.getWindowViewPort(t)}zIndex(t,e){return((t,e)=>{if(!t||!r()||!l())return null;const n=o.siblingContainer(t,e);if(!n)return null;const i=[t].concat(o.parents(t,n)).reduce((t,e)=>{const n=e.style.zIndex||window.getComputedStyle(e).zIndex,o=parseInt(n,10);return o>t?o:t},0);return i?i+1:null})(t,e)}zoomLevel(){return r()&&l()?parseFloat((document.documentElement.clientWidth/window.innerWidth).toFixed(2)):1}isZoomed(){return this.zoomLevel()>1}}class y{constructor(t){this._dom=t}positionElement(t){const{anchor:e,currentLocation:n,element:o,anchorAlign:i,elementAlign:r,collisions:l}=t,d=this._dom,a=t.viewPort||d.stackingElementViewPort(o)||d.windowViewPort(o),p=s(d.offset(e),n),c=((t,e)=>e?{height:t.height,left:e.left,top:e.top,width:t.width}:t)(d.staticOffset(o),n),h=this.elementRect(o,c),u=d.restrictToView({anchorAlign:i,anchorRect:p,collisions:l,elementAlign:r,elementRect:h,viewPort:a});return{flipped:u.flipped,offset:d.addOffset(c,u.offset)}}elementRect(t,e){return this._dom.removeScroll(e,this._dom.scrollPosition(t))}}const _={name:"@progress/kendo-vue-popup",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:1657007252,version:"8.1.0-develop.5",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"};const C={left:-1e3,top:0},E="k-animation-container-shown",b="k-popup",$=e.defineComponent({name:"Popup",props:{appendTo:{type:String,default:""},anchor:{type:[String,Object],default:""},className:String,id:String,popupClass:String,collision:{type:Object,default:function(){return{horizontal:h,vertical:u}}},anchorAlign:{type:Object,default:function(){return{horizontal:f,vertical:m}}},popupAlign:{type:Object,default:function(){return{horizontal:f,vertical:g}}},offset:{type:Object,default:function(){return C}},show:{type:Boolean,default:!1},animate:{type:[Boolean,Object],default:!0},direction:{type:String,default:"down"},onOpen:Function,onClose:Function},inject:{kCurrentZIndex:{default:null}},data:()=>({hasMounted:!1}),created(){i.validatePackage(_),this.mountedAppendTo=void 0,this.mountedAnchor=void 0,this._clonedElement=void 0,this._flipped=!1,this._offsetTop=0,this._offsetLeft=-1e3,this._exitingAnimation=!1,this._prevShow=!1,this._prevShow=this.$props.show,this._domService=new w,this._alignService=new v(this._domService),this._positionService=new y(this._domService),this.reposition=function(t,e,n={}){let o,i,s,r,l=0;n=n||{};const d=function(){l=!1===n.leading?0:(new Date).getTime(),o=null,r=t.apply(i,s),o||(i=s=null)};return function(){const a=(new Date).getTime();!l&&!1===n.leading&&(l=a);const p=e-(a-l);return i=this,s=arguments,p<=0||p>e?(o&&(clearTimeout(o),o=null),l=a,r=t.apply(i,s),o||(i=s=null)):!o&&!1!==n.trailing&&(o=setTimeout(d,p)),r}}(this.reposition.bind(this),p)},mounted(){i.canUseDOM&&(this.mountedAppendTo=this.appendTo?this.getParentRef(this.appendTo):document.body,this.mountedAnchor=this.anchor?this.getParentRef(this.anchor,!0):document.body),this._parentElement=this.$el.parentElement,this._clonedElement=this.$el.cloneNode(!0),this.hasMounted=!0,this.mountedAppendTo.appendChild(this.$el)},updated(){this._prevShow=this.$props.show},unmounted(){this.detachRepositionHandlers()},beforeUnmount(){this._parentElement&&this._parentElement.appendChild(this.$el)},methods:{onOpened(){const t=this.$el;this.$props.show&&t.classList.add(E),this.attachRepositionHandlers(t),this.$emit("open",{target:this})},onClosing(){this.$props.show||this.$el.classList.remove(E),this.detachRepositionHandlers()},onClosed(){this._exitingAnimation&&(this._exitingAnimation=!1,this.$forceUpdate()),this.$emit("close",{target:this})},transitionDuration(){const t=this.$props.animate;let e=0,n=0;return t&&(!0===t?e=n=void 0:(e=t.openDuration,n=t.closeDuration)),{transitionEnterDuration:e,transitionExitDuration:n}},getParentRef(t,e){let n=this.$parent;for(;!n.$refs[t];){if(n&&n.kendoAnchorRef&&e)return n.kendoAnchorRef;if(n=n.$parent,!n&&i.canUseDOM)return document.getElementById(t)||document.body}return n.$refs[t].$el||n.$refs[t]},position(t,e,n){const{anchorAlign:o,popupAlign:i,collision:s,offset:r}=t,l=n?this.mountedAnchor:document.body,d=this._alignService.alignElement({anchor:n?l:void 0,element:e,elementAlign:i,anchorAlign:o,offset:r});return this._positionService.positionElement({anchor:l,anchorAlign:o,collisions:s,element:e,currentLocation:d,elementAlign:i})},calculatePosition(t,e){if(!e||!l()||!i.canUseDOM)return{flipped:!1,offset:t.offset};const n=i.getDefaultSlots(this),o=document.createElement("div"),s=this.$el&&this.$el.firstChild&&this.$el.firstChild.firstChild?this.$el.firstChild.firstChild.cloneNode(!0):null,r=s&&s.getBoundingClientRect?s:this._clonedElement;if(r)o.appendChild(r);else{const t=n&&n[0].props?n[0].props.class:"",e=this.$props.popupClass;o.innerHTML=`<div class="k-animation-container k-animation-container-relative">\n                        <div class="k-popup k-animation-container k-animation-container-relative">\n                            <div class="${t} ${e}" >\n                            </div>\n                        </div>\n                </div>`}if(e.appendChild(o),o&&o.firstChild){const t=o.firstChild;t.style.position="absolute",t.style.visibility="hidden",t.style.display="block",t.style.left="-1000",t.style.top="0";const e=n&&n[0].props?n[0].props.style:{};if(e)for(const[n,o]of Object.entries(e))t.style[n]=o}const d=this.position(t,o.firstChild,this.$props.anchor);return o.parentNode.removeChild(o),d},attachRepositionHandlers(t){this.detachRepositionHandlers(),this._scrollableParents=this._domService.scrollableParents(this.$props.anchor?this.mountedAnchor:t),this._scrollableParents.map(t=>t.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)},detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(t=>t.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)},reposition(){this._clonedElement=this.$el.cloneNode(!0),this.$forceUpdate()},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex+1:100}},render(){const{className:t,popupClass:o,show:s,id:r}=this.$props,d=i.getDefaultSlots(this),a=d,p=l()?this.$props.appendTo?this.mountedAppendTo||this.getParentRef(this.$props.appendTo):document.body:void 0;if(this.$props.show){const t=this.calculatePosition(this.$props,p);this._offsetLeft=t.offset.left,this._offsetTop=t.offset.top,this._flipped=!!t.flipped}const c="down"===this.$props.direction?this._flipped?"up":"down":this._flipped?"down":"up",{transitionEnterDuration:h,transitionExitDuration:u}=this.transitionDuration(),f=this.getCurrentZIndex();return this._exitingAnimation=this._exitingAnimation||this._prevShow&&!s,this.hasMounted?s||this._exitingAnimation&&p?e.createVNode(n.Slide,{id:r,role:this.appendTo?"":"region",componentChildClassName:[o,b],className:t,onEntered:this.onOpened,onExiting:this.onClosing,onExited:this.onClosed,direction:c,style:{zIndex:f,position:"absolute",top:this._offsetTop+"px",left:this._offsetLeft+"px"},transitionEnterDuration:h,transitionExitDuration:u,appear:s},function(t){return"function"==typeof t||"[object Object]"===Object.prototype.toString.call(t)&&!e.isVNode(t)}(a)?a:{default:()=>[a]}):null:e.createVNode("div",{style:{display:"none"},class:t},[e.createVNode("div",{class:[o,b]},[d])])}});t.Popup=$});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-vue-animation"),require("@progress/kendo-popup-common"),require("@progress/kendo-vue-common")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-vue-animation","@progress/kendo-popup-common","@progress/kendo-vue-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVuePopup={},e.Vue,e.KendoVueAnimation,e.KendoPopupCommon,e.KendoVueCommon)}(this,function(e,t,n,o,i){"use strict";const s=(e,t)=>e||{height:0,left:t.left,top:t.top,width:0},r=()=>"undefined"!=typeof document&&!!document.body,l=()=>"undefined"!=typeof window,d=/auto|scroll/,a=e=>{const t=window.getComputedStyle(e);return`${t.overflow}${t.overflowX}${t.overflowY}`},c=1e3/60,p=(()=>{if(!r())return!1;const e=document.createElement("div");if(e.style.transform="matrix(10, 0, 0, 10, 0, 0)",e.innerHTML="<div>child</div>",document.body.appendChild(e),e&&e.firstChild){const t=e.firstChild;t.style.position="fixed",t.style.top="10px"}const t=10!==e.children[0].getBoundingClientRect().top;return document.body.removeChild(e),t})(),h="fit",u="flip",f="left",m="bottom",g="top";let w=class{constructor(e){this._dom=e}alignElement(e){const{anchor:t,element:n,anchorAlign:o,elementAlign:i,offset:s}=e,r=this._dom.hasOffsetParent(n)?this.relativeRect(t,n,s):this.absoluteRect(t,n,s);return this._dom.align({anchorAlign:o,anchorRect:r,elementAlign:i,elementRect:this._dom.offset(n)})}absoluteRect(e,t,n){const o=this._dom,i=((e,t)=>t?{height:e.height,left:e.left-t.left,top:e.top-t.top,width:e.width}:e)(s(o.offset(e),n),o.stackingElementOffset(t)),r=o.stackingElementScroll(t),l=o.addScroll(i,r),d=this.elementScrollPosition(e,t),a=o.removeScroll(l,d);return a.left+=window.scrollX||window.pageXOffset,a.top+=window.scrollY||window.pageYOffset,a}elementScrollPosition(e,t){return e?{x:0,y:0}:this._dom.scrollPosition(t)}relativeRect(e,t,n){return s(this._dom.position(e,t),n)}};class v{addOffset(e,t){return{left:e.left+t.left,top:e.top+t.top}}align(e){return o.align(e)}boundingOffset(e){return o.boundingOffset(e)}getWindow(){return l()?window:null}isBodyOffset(e){return o.isBodyOffset(e)}hasOffsetParent(e){if(!e)return!1;const t=e.offsetParent;return t&&!("BODY"===t.nodeName&&"static"===window.getComputedStyle(t).position)}offset(e){return e?o.offset(e):null}staticOffset(e){if(!e)return null;const{left:t,top:n}=e.style;e.style.left="0px",e.style.top="0px";const i=o.offset(e);return e.style.left=t,e.style.top=n,i}position(e,t){if(!e||!t)return null;const n=o.siblingContainer(e,t);return o.positionWithScroll(e,n)}relativeOffset(e,t){return o.applyLocationOffset(this.offset(e),t,this.isBodyOffset(e))}addScroll(e,t){return o.addScroll(e,t)}removeScroll(e,t){return o.removeScroll(e,t)}restrictToView(e){return o.restrictToView(e)}scrollPosition(e){return o.scrollPosition(e)}scrollableParents(e){return(e=>{const t=[];if(!r()||!l())return t;let n=e.parentElement;for(;n;)d.test(a(n))&&t.push(n),n=n.parentElement;return t.push(window),t})(e)}stackingElementOffset(e){const t=this.getRelativeContextElement(e);return t?o.offset(t):null}stackingElementScroll(e){const t=this.getRelativeContextElement(e);return t?{x:t.scrollLeft,y:t.scrollTop}:{x:0,y:0}}stackingElementViewPort(e){const t=this.getRelativeContextElement(e);return t?{height:t.scrollHeight,width:t.scrollWidth}:null}getRelativeContextElement(e){if(!e||!p)return null;let t=e.parentElement;for(;t;){if("none"!==window.getComputedStyle(t).transform)return t;t=t.parentElement}return null}useRelativePosition(e){return!!this.getRelativeContextElement(e)}windowViewPort(e){return o.getWindowViewPort(e)}zIndex(e,t){return((e,t)=>{if(!e||!r()||!l())return null;const n=o.siblingContainer(e,t);if(!n)return null;const i=[e].concat(o.parents(e,n)).reduce((e,t)=>{const n=t.style.zIndex||window.getComputedStyle(t).zIndex,o=parseInt(n,10);return o>e?o:e},0);return i?i+1:null})(e,t)}zoomLevel(){return r()&&l()?parseFloat((document.documentElement.clientWidth/window.innerWidth).toFixed(2)):1}isZoomed(){return this.zoomLevel()>1}}class y{constructor(e){this._dom=e}positionElement(e){const{anchor:t,currentLocation:n,element:o,anchorAlign:i,elementAlign:r,collisions:l}=e,d=this._dom,a=e.viewPort||d.stackingElementViewPort(o)||d.windowViewPort(o),c=s(d.offset(t),n),p=((e,t)=>t?{height:e.height,left:t.left,top:t.top,width:e.width}:e)(d.staticOffset(o),n),h=this.elementRect(o,p),u=d.restrictToView({anchorAlign:i,anchorRect:c,collisions:l,elementAlign:r,elementRect:h,viewPort:a});return{flipped:u.flipped,offset:d.addOffset(p,u.offset)}}elementRect(e,t){return this._dom.removeScroll(t,this._dom.scrollPosition(e))}}const _={name:"@progress/kendo-vue-popup",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate:1657007252,version:"8.1.0-develop.7",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"};const E={left:-1e3,top:0},C="k-animation-container-shown",b="k-popup",$=t.defineComponent({name:"Popup",props:{appendTo:{type:String,default:""},anchor:{type:[String,Object],default:""},className:String,id:String,popupClass:String,collision:{type:Object,default:function(){return{horizontal:h,vertical:u}}},anchorAlign:{type:Object,default:function(){return{horizontal:f,vertical:m}}},popupAlign:{type:Object,default:function(){return{horizontal:f,vertical:g}}},offset:{type:Object,default:function(){return E}},show:{type:Boolean,default:!1},animate:{type:[Boolean,Object],default:!0},direction:{type:String,default:"down"},onOpen:Function,onClose:Function,onMousedownoutside:Function},inject:{kCurrentZIndex:{default:null}},data:()=>({hasMounted:!1}),created(){i.validatePackage(_),this.mountedAppendTo=void 0,this.mountedAnchor=void 0,this._clonedElement=void 0,this._flipped=!1,this._offsetTop=0,this._offsetLeft=-1e3,this._exitingAnimation=!1,this._prevShow=!1,this._prevShow=this.$props.show,this._domService=new v,this._alignService=new w(this._domService),this._positionService=new y(this._domService),this.reposition=function(e,t,n={}){let o,i,s,r,l=0;n=n||{};const d=function(){l=!1===n.leading?0:(new Date).getTime(),o=null,r=e.apply(i,s),o||(i=s=null)};return function(){const a=(new Date).getTime();!l&&!1===n.leading&&(l=a);const c=t-(a-l);return i=this,s=arguments,c<=0||c>t?(o&&(clearTimeout(o),o=null),l=a,r=e.apply(i,s),o||(i=s=null)):!o&&!1!==n.trailing&&(o=setTimeout(d,c)),r}}(this.reposition.bind(this),c)},mounted(){i.canUseDOM&&(this.mountedAppendTo=this.appendTo?this.getParentRef(this.appendTo):document.body,this.mountedAnchor=this.anchor?this.getParentRef(this.anchor,!0):document.body),this._parentElement=this.$el.parentElement,this._clonedElement=this.$el.cloneNode(!0),this.hasMounted=!0,this.mountedAppendTo.appendChild(this.$el)},updated(){this._prevShow=this.$props.show},unmounted(){this.detachRepositionHandlers(),null==window||window.removeEventListener("mousedown",this.handleMouseDown)},beforeUnmount(){this._parentElement&&this._parentElement.appendChild(this.$el)},methods:{handleMouseDown(e){var t,n;const o=null===(null==(t=null==e?void 0:e.target)?void 0:t.closest(".k-animation-container")),i=(null==(n=this.mountedAnchor)?void 0:n.contains(null==e?void 0:e.target))||!1;if(o){const t={target:this,event:e,isAnchorClicked:i};this.$emit("mousedownoutside",t),null==window||window.removeEventListener("mousedown",this.handleMouseDown)}},onOpened(){const e=this.$el;null==window||window.addEventListener("mousedown",this.handleMouseDown),this.$props.show&&e.classList.add(C),this.attachRepositionHandlers(e),this.$emit("open",{target:this})},onClosing(){this.$props.show||this.$el.classList.remove(C),this.detachRepositionHandlers()},onClosed(){this._exitingAnimation&&(this._exitingAnimation=!1,this.$forceUpdate()),this.$emit("close",{target:this})},transitionDuration(){const e=this.$props.animate;let t=0,n=0;return e&&(!0===e?t=n=void 0:(t=e.openDuration,n=e.closeDuration)),{transitionEnterDuration:t,transitionExitDuration:n}},getParentRef(e,t){let n=this.$parent;for(;!n.$refs[e];){if(n&&n.kendoAnchorRef&&t)return n.kendoAnchorRef;if(n=n.$parent,!n&&i.canUseDOM)return document.getElementById(e)||document.body}return n.$refs[e].$el||n.$refs[e]},position(e,t,n){const{anchorAlign:o,popupAlign:i,collision:s,offset:r}=e,l=n?this.mountedAnchor:document.body,d=this._alignService.alignElement({anchor:n?l:void 0,element:t,elementAlign:i,anchorAlign:o,offset:r});return this._positionService.positionElement({anchor:l,anchorAlign:o,collisions:s,element:t,currentLocation:d,elementAlign:i})},calculatePosition(e,t){if(!t||!l()||!i.canUseDOM)return{flipped:!1,offset:e.offset};const n=i.getDefaultSlots(this),o=document.createElement("div"),s=this.$el&&this.$el.firstChild&&this.$el.firstChild.firstChild?this.$el.firstChild.firstChild.cloneNode(!0):null,r=s&&s.getBoundingClientRect?s:this._clonedElement;if(r)o.appendChild(r);else{const e=n&&n[0].props?n[0].props.class:"",t=this.$props.popupClass;o.innerHTML=`<div class="k-animation-container k-animation-container-relative">\n                        <div class="k-popup k-animation-container k-animation-container-relative">\n                            <div class="${e} ${t}" >\n                            </div>\n                        </div>\n                </div>`}if(t.appendChild(o),o&&o.firstChild){const e=o.firstChild;e.style.position="absolute",e.style.visibility="hidden",e.style.display="block",e.style.left="-1000",e.style.top="0";const t=n&&n[0].props?n[0].props.style:{};if(t)for(const[n,o]of Object.entries(t))e.style[n]=o}const d=this.position(e,o.firstChild,this.$props.anchor);return o.parentNode.removeChild(o),d},attachRepositionHandlers(e){this.detachRepositionHandlers(),this._scrollableParents=this._domService.scrollableParents(this.$props.anchor?this.mountedAnchor:e),this._scrollableParents.map(e=>e.addEventListener("scroll",this.reposition)),window.addEventListener("resize",this.reposition)},detachRepositionHandlers(){this._scrollableParents&&(this._scrollableParents.map(e=>e.removeEventListener("scroll",this.reposition)),this._scrollableParents=void 0),window.removeEventListener("resize",this.reposition)},reposition(){this._clonedElement=this.$el.cloneNode(!0),this.$forceUpdate()},getCurrentZIndex(){return this.kCurrentZIndex?this.kCurrentZIndex+1:100}},render(){const{className:e,popupClass:o,show:s,id:r}=this.$props,d=i.getDefaultSlots(this),a=d,c=l()?this.$props.appendTo?this.mountedAppendTo||this.getParentRef(this.$props.appendTo):document.body:void 0;if(this.$props.show){const e=this.calculatePosition(this.$props,c);this._offsetLeft=e.offset.left,this._offsetTop=e.offset.top,this._flipped=!!e.flipped}const p="down"===this.$props.direction?this._flipped?"up":"down":this._flipped?"down":"up",{transitionEnterDuration:h,transitionExitDuration:u}=this.transitionDuration(),f=this.getCurrentZIndex();return this._exitingAnimation=this._exitingAnimation||this._prevShow&&!s,this.hasMounted?s||this._exitingAnimation&&c?t.createVNode(n.Slide,{id:r,role:this.appendTo?"":"region",componentChildClassName:[o,b],className:e,onEntered:this.onOpened,onExiting:this.onClosing,onExited:this.onClosed,direction:p,style:{zIndex:f,position:"absolute",top:this._offsetTop+"px",left:this._offsetLeft+"px"},transitionEnterDuration:h,transitionExitDuration:u,appear:s},function(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!t.isVNode(e)}(a)?a:{default:()=>[a]}):null:t.createVNode("div",{style:{display:"none"},class:e},[t.createVNode("div",{class:[o,b]},[d])])}});e.Popup=$});

package/models/Events.d.ts

@@ -23,3 +23,20 @@ export interface CloseEvent {
      */
     target: any;
 }
+/**
+ * Represents the object of the `MouseDownOutside` Popup event.
+ */
+export interface MouseDownOutsideEvent {
+    /**
+     * An event target.
+     */
+    target: any;
+    /**
+     * The event object.
+     */
+    event: MouseEvent;
+    /**
+     * Indicates if the MouseDown event is triggered over the anchor of the Popup.
+     */
+    isAnchorClicked: boolean;
+}

package/models/PopupSettings.d.ts

@@ -5,7 +5,7 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { OpenEvent, CloseEvent } from './Events';
+import { OpenEvent, CloseEvent, MouseDownOutsideEvent } from './Events';
 import { Offset } from './Offset';
 import { PopupAnimation } from './PopupAnimation';
 /**
@@ -60,6 +60,15 @@ export interface PopupSettings {
      * Specifies the absolute position of the element ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that point. The pivot point of the Popup is defined by the `popupAlign` configuration option. The boundary detection is applied by using the window viewport.
      */
     offset?: Offset;
+    /**
+     * Fires when the mousedown event is triggered outside the Popup.
+     *
+     * @example
+     * ```jsx
+     * <Popup onMousedownoutside={(event) => console.log('onMousedownoutside')} />
+     * ```
+     */
+    onMousedownoutside?: (event: MouseDownOutsideEvent) => void;
     /**
      * Fires after the Popup is opened and the opening animation ends.
      */

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-popup",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1774879002,version:"8.1.0-develop.5",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-vue-popup",productName:"Kendo UI for Vue",productCode:"KENDOUIVUE",productCodes:["KENDOUIVUE"],publishDate: 1775028444,version:"8.1.0-develop.7",licensingDocsUrl:"https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "Kendo UI for Vue",
   productCode: "KENDOUIVUE",
   productCodes: ["KENDOUIVUE"],
-  publishDate: 1774879002,
-  version: "8.1.0-develop.5",
+  publishDate: 1775028444,
+  version: "8.1.0-develop.7",
   licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-popup",
-  "version": "8.1.0-develop.5",
+  "version": "8.1.0-develop.7",
   "description": "Kendo UI for Vue Popup package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,8 +26,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-vue-animation": "8.1.0-develop.5",
-    "@progress/kendo-vue-common": "8.1.0-develop.5",
+    "@progress/kendo-vue-animation": "8.1.0-develop.7",
+    "@progress/kendo-vue-common": "8.1.0-develop.7",
     "vue": "^3.0.2"
   },
   "dependencies": {
@@ -45,7 +45,7 @@
     "package": {
       "productName": "Kendo UI for Vue",
       "productCode": "KENDOUIVUE",
-      "publishDate": 1774879002,
+      "publishDate": 1775028444,
       "licensingDocsUrl": "https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
     }
   },