@progress/kendo-vue-popup 8.4.0-develop.1 → 8.4.0-develop.3

package/Popup.d.ts

@@ -75,9 +75,12 @@ declare const Popup: import('vue').DefineComponent<import('vue').ExtractPropType
     onClosing(): void;
     onClosed(): void;
     transitionDuration(): {
-        transitionEnterDuration: number;
-        transitionExitDuration: number;
+        enter: number;
+        exit: number;
     };
+    _cancelPendingAnimations(): void;
+    animateElement(element: HTMLElement, type: 'enter' | 'exit', callback: Function): any;
+    isAnimationInstant(type: 'enter' | 'exit'): boolean;
     getParentRef(anchor: string, isAnchor?: boolean): any;
     position(settings: PopupProps, element: HTMLElement, anchor: string): Position;
     calculatePosition($props: any, appendToElement?: HTMLElement): Position;
@@ -141,11 +144,11 @@ declare const Popup: import('vue').DefineComponent<import('vue').ExtractPropType
     onClose: PropType<(event: import('./models/Events').CloseEvent) => void>;
     onMousedownoutside: PropType<(event: MouseDownOutsideEvent) => void>;
 }>> & Readonly<{}>, {
-    animate: boolean;
     anchor: string;
-    direction: string;
     anchorAlign: object;
     offset: import('.').Offset;
+    animate: boolean;
+    direction: string;
     appendTo: string;
     collision: object;
     popupAlign: object;

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"),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">
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("vue"),l=require("./util.js"),C=require("./services/alignService.js"),T=require("./services/domService.js"),E=require("./services/positionService.js"),m=require("@progress/kendo-vue-common"),D=require("./package-metadata.js"),P=100,S=1,b={left:-1e3,top:0},g="k-animation-container-shown",y="k-popup",O=f.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 b}},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}},watch:{show(t,i){if(i&&!t)if(this._cancelPendingAnimations(),this._opened&&(this._opened=!1,this.onClosing()),this.transitionDuration().exit===0)this.onClosed();else{this._exitingAnimation=!0;const n=this._animationGeneration;this.$nextTick(()=>{if(n!==this._animationGeneration)return;const s=this.$el;if(!s||!this._exitingAnimation){this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed();return}const o=s.firstChild;o?this.animateElement(o,"exit",()=>{n===this._animationGeneration&&(this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed())}):(this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed())})}else!i&&t&&(this._cancelPendingAnimations(),this._exitingAnimation=!1)}},created(){m.validatePackage(D.packageMetadata),this.mountedAppendTo=void 0,this.mountedAnchor=void 0,this._clonedElement=void 0,this._flipped=!1,this._offsetTop=0,this._offsetLeft=-1e3,this._opened=!1,this._exitingAnimation=!1,this._animationGeneration=0,this._enterTimerId=null,this._cancelAnimation=null,this._domService=new T.DOMService,this._alignService=new C.AlignService(this._domService),this._positionService=new E.PositionService(this._domService),this.reposition=l.throttle(this.reposition.bind(this),l.FRAME_DURATION)},mounted(){m.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(){if(this.hasMounted&&this.mountedAppendTo){const t=this.$el;(t==null?void 0:t.nodeType)===1&&t.parentElement!==this.mountedAppendTo&&this.mountedAppendTo.appendChild(t)}},unmounted(){this.detachRepositionHandlers(),typeof window!="undefined"&&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 o={target:this,event:t,isAnchorClicked:e};this.$emit("mousedownoutside",o),typeof window!="undefined"&&window.removeEventListener("mousedown",this.handleMouseDown)}},onOpened(){const t=this.$el;typeof window!="undefined"&&window.addEventListener("mousedown",this.handleMouseDown),this.$props.show&&t.classList.add(g),this.attachRepositionHandlers(t),this.$emit("open",{target:this})},onClosing(){this.$props.show||this.$el.classList.remove(g),this.detachRepositionHandlers(),typeof window!="undefined"&&window.removeEventListener("mousedown",this.handleMouseDown)},onClosed(){this.$emit("close",{target:this})},transitionDuration(){const t=this.$props.animate;let i=0,e=0;return t&&(t===!0?i=e=300:(i=t.openDuration||0,e=t.closeDuration||0)),{enter:i,exit:e}},_cancelPendingAnimations(){this._animationGeneration++,this._enterTimerId!==null&&(clearTimeout(this._enterTimerId),this._enterTimerId=null),this._cancelAnimation&&(this._cancelAnimation(),this._cancelAnimation=null)},animateElement(t,i,e){const n=this.transitionDuration()[i];if(n===0)return e();const s=t.ownerDocument,o=s==null?void 0:s.defaultView;if(!o)return e();const c=this.$props.direction==="down",r=this._flipped?"up":"down",a=this._flipped?"down":"up",p=c?r:a,d=`k-slide-${p}-${i}`,_=`k-slide-${p}-${i}-active`;let h=!1,u=null;const w=()=>{t.removeEventListener("transitionend",v),u&&(clearTimeout(u),u=null),t.style.transitionDuration="",t.classList.remove(d,_)},A=()=>{h||(h=!0,w(),i==="exit"?t.style.display="none":t.style.display="",this._cancelAnimation=null,e())},v=$=>{$.target===t&&A()};t.addEventListener("transitionend",v),u=setTimeout(A,n+50),t.style.transitionDuration="",t.classList.remove(d,_),i==="enter"&&(t.style.display=""),t.classList.add(d),o.requestAnimationFrame(()=>{h||(t.style.transitionDuration=n+"ms",t.classList.add(_))}),this._cancelAnimation=()=>{h||(h=!0,w(),t.style.display="")}},isAnimationInstant(t){if(this.transitionDuration()[t]===0)return!0;if(typeof window!="undefined"&&this.$el){const e=this.$el.firstChild;if(e){const n=window.getComputedStyle(e),s=parseFloat(n.transitionDuration||"0"),o=parseFloat(n.animationDuration||"0");if(s===0&&o===0)return!0}}return!1},getParentRef(t,i){let e=this.$parent;for(;!e.$refs[t];){if(e&&e.kendoAnchorRef&&i)return e.kendoAnchorRef;if(e=e.$parent,!e&&m.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:o,offset:c}=t,r=e?this.mountedAnchor:document.body,a=this._alignService.alignElement({anchor:e?r:void 0,element:i,elementAlign:s,anchorAlign:n,offset:c});return this._positionService.positionElement({anchor:r,anchorAlign:n,collisions:o,element:i,currentLocation:a,elementAlign:s})},calculatePosition(t,i){if(!i||!l.isWindowAvailable()||!m.canUseDOM)return{flipped:!1,offset:t.offset};const e=m.getDefaultSlots(this),n=document.createElement("div"),s=this.$el&&this.$el.firstChild&&this.$el.firstChild.firstChild?this.$el.firstChild.firstChild.cloneNode(!0):null,o=s&&s.getBoundingClientRect?s:this._clonedElement;if(o)n.appendChild(o);else{const r=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 class="${r} ${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 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;
+                </div>`}if(i.appendChild(n),n&&n.firstChild){const r=n.firstChild;r.style.position="absolute",r.style.visibility="hidden",r.style.display="block",r.style.left="-1000",r.style.top="0";const a=e&&e[0].props?e[0].props.style:{};if(a)for(const[p,d]of Object.entries(a))r.style[p]=d}const c=this.position(t,n.firstChild,this.$props.anchor);return n.parentNode.removeChild(n),c},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+S:P}},render(){const{className:t,popupClass:i,show:e,id:n}=this.$props,s=m.getDefaultSlots(this),o=s,c=l.isWindowAvailable()?this.$props.appendTo?this.mountedAppendTo||this.getParentRef(this.$props.appendTo):document.body:void 0;if(this.$props.show){const a=this.calculatePosition(this.$props,c);this._offsetLeft=a.offset.left,this._offsetTop=a.offset.top,this._flipped=!!a.flipped}const r=this.getCurrentZIndex();if(!this.hasMounted)return f.createVNode("div",{style:{display:"none"},class:t},[f.createVNode("div",{class:[i,y]},[s])]);if((e||this._exitingAnimation)&&c){const a={zIndex:r,position:"absolute",top:this._offsetTop+"px",left:this._offsetLeft+"px",pointerEvents:e?"auto":"none"};if(e&&!this._opened){this._opened=!0;const d=this._animationGeneration;this.transitionDuration().enter===0?this._enterTimerId=setTimeout(()=>{this._enterTimerId=null,d===this._animationGeneration&&(!this.$props.show||!this._opened||this.onOpened())},0):this.$nextTick(()=>{if(d!==this._animationGeneration||!this.$props.show||!this._opened)return;const h=this.$el;if(!h)return;const u=h.firstChild;u?this.animateElement(u,"enter",()=>{d===this._animationGeneration&&this.$props.show&&this.onOpened()}):this.onOpened()})}const p=e?g:"";return f.createVNode("div",{id:n,class:["k-animation-container",p,t],style:a},[f.createVNode("div",{class:["k-child-animation-container"],style:{transitionDelay:"0ms",display:"block"}},[f.createVNode("div",{class:[i,y]},[o])])])}return f.createVNode("div",{style:{display:"none"},class:t},null)}});exports.Popup=O;

package/Popup.mjs

@@ -5,21 +5,17 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-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 $, 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 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 x = 100, k = 1, N = {
+import { defineComponent as D, createVNode as u } from "vue";
+import { isWindowAvailable as y, throttle as P, AlignPoint as m, CollisionType as v, FRAME_DURATION as S } from "./util.mjs";
+import { AlignService as b } from "./services/alignService.mjs";
+import { DOMService as k } from "./services/domService.mjs";
+import { PositionService as x } from "./services/positionService.mjs";
+import { getDefaultSlots as C, canUseDOM as _, validatePackage as O } from "@progress/kendo-vue-common";
+import { packageMetadata as L } from "./package-metadata.mjs";
+const I = 100, M = 1, R = {
   left: -1e3,
   top: 0
-}, w = "k-animation-container-shown", A = "k-popup", Z = /* @__PURE__ */ v({
+}, w = "k-animation-container-shown", E = "k-popup", z = /* @__PURE__ */ D({
   name: "Popup",
   props: {
     appendTo: {
@@ -37,8 +33,8 @@ const x = 100, k = 1, N = {
       type: Object,
       default: function() {
         return {
-          horizontal: _.fit,
-          vertical: _.flip
+          horizontal: v.fit,
+          vertical: v.flip
         };
       }
     },
@@ -46,8 +42,8 @@ const x = 100, k = 1, N = {
       type: Object,
       default: function() {
         return {
-          horizontal: h.left,
-          vertical: h.bottom
+          horizontal: m.left,
+          vertical: m.bottom
         };
       }
     },
@@ -55,15 +51,15 @@ const x = 100, k = 1, N = {
       type: Object,
       default: function() {
         return {
-          horizontal: h.left,
-          vertical: h.top
+          horizontal: m.left,
+          vertical: m.top
         };
       }
     },
     offset: {
       type: Object,
       default: function() {
-        return N;
+        return R;
       }
     },
     show: {
@@ -92,17 +88,45 @@ const x = 100, k = 1, N = {
       hasMounted: !1
     };
   },
+  watch: {
+    show(t, e) {
+      if (e && !t)
+        if (this._cancelPendingAnimations(), this._opened && (this._opened = !1, this.onClosing()), this.transitionDuration().exit === 0)
+          this.onClosed();
+        else {
+          this._exitingAnimation = !0;
+          const n = this._animationGeneration;
+          this.$nextTick(() => {
+            if (n !== this._animationGeneration)
+              return;
+            const s = this.$el;
+            if (!s || !this._exitingAnimation) {
+              this._exitingAnimation = !1, this.$forceUpdate(), this.onClosed();
+              return;
+            }
+            const o = s.firstChild;
+            o ? this.animateElement(o, "exit", () => {
+              n === this._animationGeneration && (this._exitingAnimation = !1, this.$forceUpdate(), this.onClosed());
+            }) : (this._exitingAnimation = !1, this.$forceUpdate(), this.onClosed());
+          });
+        }
+      else !e && t && (this._cancelPendingAnimations(), this._exitingAnimation = !1);
+    }
+  },
   created() {
-    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);
+    O(L), this.mountedAppendTo = void 0, this.mountedAnchor = void 0, this._clonedElement = void 0, this._flipped = !1, this._offsetTop = 0, this._offsetLeft = -1e3, this._opened = !1, this._exitingAnimation = !1, this._animationGeneration = 0, this._enterTimerId = null, this._cancelAnimation = null, this._domService = new k(), this._alignService = new b(this._domService), this._positionService = new x(this._domService), this.reposition = P(this.reposition.bind(this), S);
   },
   mounted() {
-    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);
+    _ && (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;
+    if (this.hasMounted && this.mountedAppendTo) {
+      const t = this.$el;
+      (t == null ? void 0 : t.nodeType) === 1 && t.parentElement !== this.mountedAppendTo && this.mountedAppendTo.appendChild(t);
+    }
   },
   unmounted() {
-    this.detachRepositionHandlers(), window == null || window.removeEventListener("mousedown", this.handleMouseDown);
+    this.detachRepositionHandlers(), typeof window != "undefined" && window.removeEventListener("mousedown", this.handleMouseDown);
   },
   beforeUnmount() {
     this._parentElement && this._parentElement.appendChild(this.$el);
@@ -110,101 +134,139 @@ const x = 100, k = 1, N = {
   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 = {
+      const e = ((n = t == null ? void 0 : t.target) == null ? void 0 : n.closest(".k-animation-container")) === null, i = ((s = this.mountedAnchor) == null ? void 0 : s.contains(t == null ? void 0 : t.target)) || !1;
+      if (e) {
+        const o = {
           target: this,
           event: t,
-          isAnchorClicked: e
+          isAnchorClicked: i
         };
-        this.$emit("mousedownoutside", r), window == null || window.removeEventListener("mousedown", this.handleMouseDown);
+        this.$emit("mousedownoutside", o), typeof window != "undefined" && window.removeEventListener("mousedown", this.handleMouseDown);
       }
     },
     onOpened() {
       const t = this.$el;
-      window == null || window.addEventListener("mousedown", this.handleMouseDown), this.$props.show && t.classList.add(w), this.attachRepositionHandlers(t), this.$emit("open", {
+      typeof window != "undefined" && 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(w), this.detachRepositionHandlers();
+      this.$props.show || this.$el.classList.remove(w), this.detachRepositionHandlers(), typeof window != "undefined" && window.removeEventListener("mousedown", this.handleMouseDown);
     },
     onClosed() {
-      this._exitingAnimation && (this._exitingAnimation = !1, this.$forceUpdate()), this.$emit("close", {
+      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
+      let e = 0, i = 0;
+      return t && (t === !0 ? e = i = 300 : (e = t.openDuration || 0, i = t.closeDuration || 0)), {
+        enter: e,
+        exit: i
+      };
+    },
+    _cancelPendingAnimations() {
+      this._animationGeneration++, this._enterTimerId !== null && (clearTimeout(this._enterTimerId), this._enterTimerId = null), this._cancelAnimation && (this._cancelAnimation(), this._cancelAnimation = null);
+    },
+    animateElement(t, e, i) {
+      const n = this.transitionDuration()[e];
+      if (n === 0)
+        return i();
+      const s = t.ownerDocument, o = s == null ? void 0 : s.defaultView;
+      if (!o)
+        return i();
+      const d = this.$props.direction === "down", r = this._flipped ? "up" : "down", a = this._flipped ? "down" : "up", p = d ? r : a, l = `k-slide-${p}-${e}`, f = `k-slide-${p}-${e}-active`;
+      let h = !1, c = null;
+      const A = () => {
+        t.removeEventListener("transitionend", $), c && (clearTimeout(c), c = null), t.style.transitionDuration = "", t.classList.remove(l, f);
+      }, g = () => {
+        h || (h = !0, A(), e === "exit" ? t.style.display = "none" : t.style.display = "", this._cancelAnimation = null, i());
+      }, $ = (T) => {
+        T.target === t && g();
+      };
+      t.addEventListener("transitionend", $), c = setTimeout(g, n + 50), t.style.transitionDuration = "", t.classList.remove(l, f), e === "enter" && (t.style.display = ""), t.classList.add(l), o.requestAnimationFrame(() => {
+        h || (t.style.transitionDuration = n + "ms", t.classList.add(f));
+      }), this._cancelAnimation = () => {
+        h || (h = !0, A(), t.style.display = "");
       };
     },
-    getParentRef(t, i) {
-      let e = this.$parent;
-      for (; !e.$refs[t]; ) {
-        if (e && e.kendoAnchorRef && i)
-          return e.kendoAnchorRef;
-        if (e = e.$parent, !e && f)
+    isAnimationInstant(t) {
+      if (this.transitionDuration()[t] === 0)
+        return !0;
+      if (typeof window != "undefined" && this.$el) {
+        const i = this.$el.firstChild;
+        if (i) {
+          const n = window.getComputedStyle(i), s = parseFloat(n.transitionDuration || "0"), o = parseFloat(n.animationDuration || "0");
+          if (s === 0 && o === 0)
+            return !0;
+        }
+      }
+      return !1;
+    },
+    getParentRef(t, e) {
+      let i = this.$parent;
+      for (; !i.$refs[t]; ) {
+        if (i && i.kendoAnchorRef && e)
+          return i.kendoAnchorRef;
+        if (i = i.$parent, !i && _)
           return document.getElementById(t) || document.body;
       }
-      return e.$refs[t].$el || e.$refs[t];
+      return i.$refs[t].$el || i.$refs[t];
     },
-    position(t, i, e) {
+    position(t, e, i) {
       const {
         anchorAlign: n,
         popupAlign: s,
-        collision: r,
-        offset: a
-      } = t, o = e ? this.mountedAnchor : document.body, l = this._alignService.alignElement({
-        anchor: e ? o : void 0,
-        element: i,
+        collision: o,
+        offset: d
+      } = t, r = i ? this.mountedAnchor : document.body, a = this._alignService.alignElement({
+        anchor: i ? r : void 0,
+        element: e,
         elementAlign: s,
         anchorAlign: n,
-        offset: a
+        offset: d
       });
       return this._positionService.positionElement({
-        anchor: o,
+        anchor: r,
         anchorAlign: n,
-        collisions: r,
-        element: i,
-        currentLocation: l,
+        collisions: o,
+        element: e,
+        currentLocation: a,
         elementAlign: s
       });
     },
-    calculatePosition(t, i) {
-      if (!i || !m() || !f)
+    calculatePosition(t, e) {
+      if (!e || !y() || !_)
         return {
           flipped: !1,
           offset: t.offset
         };
-      const e = g(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);
+      const i = C(this), n = document.createElement("div"), s = this.$el && this.$el.firstChild && this.$el.firstChild.firstChild ? this.$el.firstChild.firstChild.cloneNode(!0) : null, o = s && s.getBoundingClientRect ? s : this._clonedElement;
+      if (o)
+        n.appendChild(o);
       else {
-        const o = e && e[0].props ? e[0].props.class : "", l = this.$props.popupClass;
+        const r = i && i[0].props ? i[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} ${l}" >
+                            <div class="${r} ${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 l = e && e[0].props ? e[0].props.style : {};
-        if (l)
-          for (const [d, c] of Object.entries(l))
-            o.style[d] = c;
+      if (e.appendChild(n), n && n.firstChild) {
+        const r = n.firstChild;
+        r.style.position = "absolute", r.style.visibility = "hidden", r.style.display = "block", r.style.left = "-1000", r.style.top = "0";
+        const a = i && i[0].props ? i[0].props.style : {};
+        if (a)
+          for (const [p, l] of Object.entries(a))
+            r.style[p] = l;
       }
-      const a = this.position(t, n.firstChild, this.$props.anchor);
-      return n.parentNode.removeChild(n), a;
+      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);
+      this.detachRepositionHandlers(), this._scrollableParents = this._domService.scrollableParents(this.$props.anchor ? this.mountedAnchor : t), this._scrollableParents.map((e) => e.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);
@@ -213,54 +275,77 @@ const x = 100, k = 1, N = {
       this._clonedElement = this.$el.cloneNode(!0), this.$forceUpdate();
     },
     getCurrentZIndex() {
-      return this.kCurrentZIndex ? this.kCurrentZIndex + k : x;
+      return this.kCurrentZIndex ? this.kCurrentZIndex + M : I;
     }
   },
   render() {
     const {
       className: t,
-      popupClass: i,
-      show: e,
+      popupClass: e,
+      show: i,
       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;
+    } = this.$props, s = C(this), o = s, d = y() ? this.$props.appendTo ? this.mountedAppendTo || this.getParentRef(this.$props.appendTo) : document.body : void 0;
     if (this.$props.show) {
-      const p = this.calculatePosition(this.$props, a);
-      this._offsetLeft = p.offset.left, this._offsetTop = p.offset.top, this._flipped = !!p.flipped;
+      const a = this.calculatePosition(this.$props, d);
+      this._offsetLeft = a.offset.left, this._offsetTop = a.offset.top, this._flipped = !!a.flipped;
     }
-    const o = this.$props.direction === "down" ? this._flipped ? "up" : "down" : this._flipped ? "down" : "up", {
-      transitionEnterDuration: l,
-      transitionExitDuration: d
-    } = this.transitionDuration(), c = this.getCurrentZIndex();
-    return this._exitingAnimation = this._exitingAnimation || this._prevShow && !e, this.hasMounted ? e || this._exitingAnimation && a ? u(E, {
-      id: n,
-      role: this.appendTo ? "" : "region",
-      componentChildClassName: [i, A],
-      className: t,
-      onEntered: this.onOpened,
-      onExiting: this.onClosing,
-      onExited: this.onClosed,
-      direction: o,
-      style: {
-        zIndex: c,
+    const r = this.getCurrentZIndex();
+    if (!this.hasMounted)
+      return u("div", {
+        style: {
+          display: "none"
+        },
+        class: t
+      }, [u("div", {
+        class: [e, E]
+      }, [s])]);
+    if ((i || this._exitingAnimation) && d) {
+      const a = {
+        zIndex: r,
         position: "absolute",
         top: this._offsetTop + "px",
-        left: this._offsetLeft + "px"
-      },
-      transitionEnterDuration: l,
-      transitionExitDuration: d,
-      appear: e
-    }, T(r) ? r : {
-      default: () => [r]
-    }) : null : u("div", {
+        left: this._offsetLeft + "px",
+        pointerEvents: i ? "auto" : "none"
+      };
+      if (i && !this._opened) {
+        this._opened = !0;
+        const l = this._animationGeneration;
+        this.transitionDuration().enter === 0 ? this._enterTimerId = setTimeout(() => {
+          this._enterTimerId = null, l === this._animationGeneration && (!this.$props.show || !this._opened || this.onOpened());
+        }, 0) : this.$nextTick(() => {
+          if (l !== this._animationGeneration || !this.$props.show || !this._opened)
+            return;
+          const h = this.$el;
+          if (!h)
+            return;
+          const c = h.firstChild;
+          c ? this.animateElement(c, "enter", () => {
+            l === this._animationGeneration && this.$props.show && this.onOpened();
+          }) : this.onOpened();
+        });
+      }
+      return u("div", {
+        id: n,
+        class: ["k-animation-container", i ? w : "", t],
+        style: a
+      }, [u("div", {
+        class: ["k-child-animation-container"],
+        style: {
+          transitionDelay: "0ms",
+          display: "block"
+        }
+      }, [u("div", {
+        class: [e, E]
+      }, [o])])]);
+    }
+    return u("div", {
       style: {
         display: "none"
       },
       class: t
-    }, [u("div", {
-      class: [i, A]
-    }, [s])]);
+    }, null);
   }
 });
 export {
-  Z 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(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.4.0-develop.1",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=$});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("@progress/kendo-popup-common"),require("@progress/kendo-vue-common")):"function"==typeof define&&define.amd?define(["exports","vue","@progress/kendo-popup-common","@progress/kendo-vue-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoVuePopup={},e.Vue,e.KendoPopupCommon,e.KendoVueCommon)}(this,function(e,t,n,i){"use strict";const o=(e,t)=>e||{height:0,left:t.left,top:t.top,width:0},s=()=>"undefined"!=typeof document&&!!document.body,r=()=>"undefined"!=typeof window,l=/auto|scroll/,a=e=>{const t=window.getComputedStyle(e);return`${t.overflow}${t.overflowX}${t.overflowY}`},d=1e3/60,c=(()=>{if(!s())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",p="flip",u="left",f="bottom",m="top";let w=class{constructor(e){this._dom=e}alignElement(e){const{anchor:t,element:n,anchorAlign:i,elementAlign:o,offset:s}=e,r=this._dom.hasOffsetParent(n)?this.relativeRect(t,n,s):this.absoluteRect(t,n,s);return this._dom.align({anchorAlign:i,anchorRect:r,elementAlign:o,elementRect:this._dom.offset(n)})}absoluteRect(e,t,n){const i=this._dom,s=((e,t)=>t?{height:e.height,left:e.left-t.left,top:e.top-t.top,width:e.width}:e)(o(i.offset(e),n),i.stackingElementOffset(t)),r=i.stackingElementScroll(t),l=i.addScroll(s,r),a=this.elementScrollPosition(e,t),d=i.removeScroll(l,a);return d.left+=window.scrollX||window.pageXOffset,d.top+=window.scrollY||window.pageYOffset,d}elementScrollPosition(e,t){return e?{x:0,y:0}:this._dom.scrollPosition(t)}relativeRect(e,t,n){return o(this._dom.position(e,t),n)}};class g{addOffset(e,t){return{left:e.left+t.left,top:e.top+t.top}}align(e){return n.align(e)}boundingOffset(e){return n.boundingOffset(e)}getWindow(){return r()?window:null}isBodyOffset(e){return n.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?n.offset(e):null}staticOffset(e){if(!e)return null;const{left:t,top:i}=e.style;e.style.left="0px",e.style.top="0px";const o=n.offset(e);return e.style.left=t,e.style.top=i,o}position(e,t){if(!e||!t)return null;const i=n.siblingContainer(e,t);return n.positionWithScroll(e,i)}relativeOffset(e,t){return n.applyLocationOffset(this.offset(e),t,this.isBodyOffset(e))}addScroll(e,t){return n.addScroll(e,t)}removeScroll(e,t){return n.removeScroll(e,t)}restrictToView(e){return n.restrictToView(e)}scrollPosition(e){return n.scrollPosition(e)}scrollableParents(e){return(e=>{const t=[];if(!s()||!r())return t;let n=e.parentElement;for(;n;)l.test(a(n))&&t.push(n),n=n.parentElement;return t.push(window),t})(e)}stackingElementOffset(e){const t=this.getRelativeContextElement(e);return t?n.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||!c)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 n.getWindowViewPort(e)}zIndex(e,t){return((e,t)=>{if(!e||!s()||!r())return null;const i=n.siblingContainer(e,t);if(!i)return null;const o=[e].concat(n.parents(e,i)).reduce((e,t)=>{const n=t.style.zIndex||window.getComputedStyle(t).zIndex,i=parseInt(n,10);return i>e?i:e},0);return o?o+1:null})(e,t)}zoomLevel(){return s()&&r()?parseFloat((document.documentElement.clientWidth/window.innerWidth).toFixed(2)):1}isZoomed(){return this.zoomLevel()>1}}let v=class{constructor(e){this._dom=e}positionElement(e){const{anchor:t,currentLocation:n,element:i,anchorAlign:s,elementAlign:r,collisions:l}=e,a=this._dom,d=e.viewPort||a.stackingElementViewPort(i)||a.windowViewPort(i),c=o(a.offset(t),n),h=((e,t)=>t?{height:e.height,left:t.left,top:t.top,width:e.width}:e)(a.staticOffset(i),n),p=this.elementRect(i,h),u=a.restrictToView({anchorAlign:s,anchorRect:c,collisions:l,elementAlign:r,elementRect:p,viewPort:d});return{flipped:u.flipped,offset:a.addOffset(h,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.4.0-develop.3",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"},y={left:-1e3,top:0},C="k-animation-container-shown",$="k-popup",E=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:p}}},anchorAlign:{type:Object,default:function(){return{horizontal:u,vertical:f}}},popupAlign:{type:Object,default:function(){return{horizontal:u,vertical:m}}},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:()=>({hasMounted:!1}),watch:{show(e,t){if(t&&!e)if(this._cancelPendingAnimations(),this._opened&&(this._opened=!1,this.onClosing()),0===this.transitionDuration().exit)this.onClosed();else{this._exitingAnimation=!0;const e=this._animationGeneration;this.$nextTick(()=>{if(e!==this._animationGeneration)return;const t=this.$el;if(!t||!this._exitingAnimation)return this._exitingAnimation=!1,this.$forceUpdate(),void this.onClosed();const n=t.firstChild;n?this.animateElement(n,"exit",()=>{e===this._animationGeneration&&(this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed())}):(this._exitingAnimation=!1,this.$forceUpdate(),this.onClosed())})}else!t&&e&&(this._cancelPendingAnimations(),this._exitingAnimation=!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._opened=!1,this._exitingAnimation=!1,this._animationGeneration=0,this._enterTimerId=null,this._cancelAnimation=null,this._domService=new g,this._alignService=new w(this._domService),this._positionService=new v(this._domService),this.reposition=function(e,t,n={}){let i,o,s,r,l=0;n=n||{};const a=function(){l=!1===n.leading?0:(new Date).getTime(),i=null,r=e.apply(o,s),i||(o=s=null)};return function(){const d=(new Date).getTime();!l&&!1===n.leading&&(l=d);const c=t-(d-l);return o=this,s=arguments,c<=0||c>t?(i&&(clearTimeout(i),i=null),l=d,r=e.apply(o,s),i||(o=s=null)):!i&&!1!==n.trailing&&(i=setTimeout(a,c)),r}}(this.reposition.bind(this),d)},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(){if(this.hasMounted&&this.mountedAppendTo){const e=this.$el;1===(null==e?void 0:e.nodeType)&&e.parentElement!==this.mountedAppendTo&&this.mountedAppendTo.appendChild(e)}},unmounted(){this.detachRepositionHandlers(),"undefined"!=typeof window&&window.removeEventListener("mousedown",this.handleMouseDown)},beforeUnmount(){this._parentElement&&this._parentElement.appendChild(this.$el)},methods:{handleMouseDown(e){var t,n;const i=null===(null==(t=null==e?void 0:e.target)?void 0:t.closest(".k-animation-container")),o=(null==(n=this.mountedAnchor)?void 0:n.contains(null==e?void 0:e.target))||!1;if(i){const t={target:this,event:e,isAnchorClicked:o};this.$emit("mousedownoutside",t),"undefined"!=typeof window&&window.removeEventListener("mousedown",this.handleMouseDown)}},onOpened(){const e=this.$el;"undefined"!=typeof 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(),"undefined"!=typeof window&&window.removeEventListener("mousedown",this.handleMouseDown)},onClosed(){this.$emit("close",{target:this})},transitionDuration(){const e=this.$props.animate;let t=0,n=0;return e&&(!0===e?t=n=300:(t=e.openDuration||0,n=e.closeDuration||0)),{enter:t,exit:n}},_cancelPendingAnimations(){this._animationGeneration++,null!==this._enterTimerId&&(clearTimeout(this._enterTimerId),this._enterTimerId=null),this._cancelAnimation&&(this._cancelAnimation(),this._cancelAnimation=null)},animateElement(e,t,n){const i=this.transitionDuration()[t];if(0===i)return n();const o=e.ownerDocument,s=null==o?void 0:o.defaultView;if(!s)return n();const r="down"===this.$props.direction,l=this._flipped?"up":"down",a=this._flipped?"down":"up",d=r?l:a,c=`k-slide-${d}-${t}`,h=`k-slide-${d}-${t}-active`;let p=!1,u=null;const f=()=>{e.removeEventListener("transitionend",w),u&&(clearTimeout(u),u=null),e.style.transitionDuration="",e.classList.remove(c,h)},m=()=>{p||(p=!0,f(),e.style.display="exit"===t?"none":"",this._cancelAnimation=null,n())},w=t=>{t.target===e&&m()};e.addEventListener("transitionend",w),u=setTimeout(m,i+50),e.style.transitionDuration="",e.classList.remove(c,h),"enter"===t&&(e.style.display=""),e.classList.add(c),s.requestAnimationFrame(()=>{p||(e.style.transitionDuration=i+"ms",e.classList.add(h))}),this._cancelAnimation=()=>{p||(p=!0,f(),e.style.display="")}},isAnimationInstant(e){if(0===this.transitionDuration()[e])return!0;if("undefined"!=typeof window&&this.$el){const e=this.$el.firstChild;if(e){const t=window.getComputedStyle(e),n=parseFloat(t.transitionDuration||"0"),i=parseFloat(t.animationDuration||"0");if(0===n&&0===i)return!0}}return!1},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:i,popupAlign:o,collision:s,offset:r}=e,l=n?this.mountedAnchor:document.body,a=this._alignService.alignElement({anchor:n?l:void 0,element:t,elementAlign:o,anchorAlign:i,offset:r});return this._positionService.positionElement({anchor:l,anchorAlign:i,collisions:s,element:t,currentLocation:a,elementAlign:o})},calculatePosition(e,t){if(!t||!r()||!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,l=s&&s.getBoundingClientRect?s:this._clonedElement;if(l)o.appendChild(l);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,i]of Object.entries(t))e.style[n]=i}const a=this.position(e,o.firstChild,this.$props.anchor);return o.parentNode.removeChild(o),a},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:n,show:o,id:s}=this.$props,l=i.getDefaultSlots(this),a=l,d=r()?this.$props.appendTo?this.mountedAppendTo||this.getParentRef(this.$props.appendTo):document.body:void 0;if(this.$props.show){const e=this.calculatePosition(this.$props,d);this._offsetLeft=e.offset.left,this._offsetTop=e.offset.top,this._flipped=!!e.flipped}const c=this.getCurrentZIndex();if(!this.hasMounted)return t.createVNode("div",{style:{display:"none"},class:e},[t.createVNode("div",{class:[n,$]},[l])]);if((o||this._exitingAnimation)&&d){const i={zIndex:c,position:"absolute",top:this._offsetTop+"px",left:this._offsetLeft+"px",pointerEvents:o?"auto":"none"};if(o&&!this._opened){this._opened=!0;const e=this._animationGeneration;0===this.transitionDuration().enter?this._enterTimerId=setTimeout(()=>{this._enterTimerId=null,e===this._animationGeneration&&(!this.$props.show||!this._opened||this.onOpened())},0):this.$nextTick(()=>{if(e!==this._animationGeneration||!this.$props.show||!this._opened)return;const t=this.$el;if(!t)return;const n=t.firstChild;n?this.animateElement(n,"enter",()=>{e===this._animationGeneration&&this.$props.show&&this.onOpened()}):this.onOpened()})}return t.createVNode("div",{id:s,class:["k-animation-container",o?C:"",e],style:i},[t.createVNode("div",{class:["k-child-animation-container"],style:{transitionDelay:"0ms",display:"block"}},[t.createVNode("div",{class:[n,$]},[a])])])}return t.createVNode("div",{style:{display:"none"},class:e},null)}});e.Popup=E});

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: 1778509064,version:"8.4.0-develop.1",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: 1779097314,version:"8.4.0-develop.3",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: 1778509064,
-  version: "8.4.0-develop.1",
+  publishDate: 1779097314,
+  version: "8.4.0-develop.3",
   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.4.0-develop.1",
+  "version": "8.4.0-develop.3",
   "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.4.0-develop.1",
-    "@progress/kendo-vue-common": "8.4.0-develop.1",
+    "@progress/kendo-vue-animation": "8.4.0-develop.3",
+    "@progress/kendo-vue-common": "8.4.0-develop.3",
     "vue": "^3.0.2"
   },
   "dependencies": {
@@ -45,7 +45,7 @@
     "package": {
       "productName": "Kendo UI for Vue",
       "productCode": "KENDOUIVUE",
-      "publishDate": 1778509064,
+      "publishDate": 1779097314,
       "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"
     }
   },