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

package/Popup.d.ts

@@ -0,0 +1,150 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+import { Position } from './models/Position';
+import { PopupProps } from './models/PopupProps';
+/**
+ * @hidden
+ */
+declare const Popup: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    appendTo: {
+        type: PropType<string>;
+        default: string;
+    };
+    anchor: {
+        type: PropType<string>;
+        default: string;
+    };
+    className: PropType<string | string[]>;
+    id: PropType<string>;
+    popupClass: PropType<string | string[]>;
+    collision: {
+        type: PropType<object>;
+        default: () => {
+            horizontal: string;
+            vertical: string;
+        };
+    };
+    anchorAlign: {
+        type: PropType<object>;
+        default: () => {
+            horizontal: string;
+            vertical: string;
+        };
+    };
+    popupAlign: {
+        type: PropType<object>;
+        default: () => {
+            horizontal: string;
+            vertical: string;
+        };
+    };
+    offset: {
+        type: PropType<import('.').Offset>;
+        default: () => {
+            left: number;
+            top: number;
+        };
+    };
+    show: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    animate: {
+        type: PropType<boolean | import('.').PopupAnimation>;
+        default: boolean;
+    };
+    direction: {
+        type: PropType<string>;
+        default: string;
+    };
+    onOpen: PropType<(event: import('.').PopupOpenEvent) => void>;
+    onClose: PropType<(event: import('.').PopupCloseEvent) => void>;
+}>, {}, {
+    hasMounted: boolean;
+}, {}, {
+    onOpened(): void;
+    onClosing(): void;
+    onClosed(): void;
+    transitionDuration(): {
+        transitionEnterDuration: number;
+        transitionExitDuration: number;
+    };
+    getParentRef(anchor: string, isAnchor?: boolean): any;
+    position(settings: PopupProps, element: HTMLElement, anchor: string): Position;
+    calculatePosition($props: any, appendToElement?: HTMLElement): Position;
+    attachRepositionHandlers(element: any): void;
+    detachRepositionHandlers(): void;
+    reposition(): void;
+    getCurrentZIndex(): number;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    appendTo: {
+        type: PropType<string>;
+        default: string;
+    };
+    anchor: {
+        type: PropType<string>;
+        default: string;
+    };
+    className: PropType<string | string[]>;
+    id: PropType<string>;
+    popupClass: PropType<string | string[]>;
+    collision: {
+        type: PropType<object>;
+        default: () => {
+            horizontal: string;
+            vertical: string;
+        };
+    };
+    anchorAlign: {
+        type: PropType<object>;
+        default: () => {
+            horizontal: string;
+            vertical: string;
+        };
+    };
+    popupAlign: {
+        type: PropType<object>;
+        default: () => {
+            horizontal: string;
+            vertical: string;
+        };
+    };
+    offset: {
+        type: PropType<import('.').Offset>;
+        default: () => {
+            left: number;
+            top: number;
+        };
+    };
+    show: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    animate: {
+        type: PropType<boolean | import('.').PopupAnimation>;
+        default: boolean;
+    };
+    direction: {
+        type: PropType<string>;
+        default: string;
+    };
+    onOpen: PropType<(event: import('.').PopupOpenEvent) => void>;
+    onClose: PropType<(event: import('.').PopupCloseEvent) => void>;
+}>> & Readonly<{}>, {
+    animate: boolean;
+    anchor: string;
+    direction: string;
+    anchorAlign: object;
+    offset: import('.').Offset;
+    appendTo: string;
+    collision: object;
+    popupAlign: object;
+    show: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { 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.0.3-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 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(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.0.3-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"};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=$});

package/index.d.mts

@@ -5,331 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { ComponentOptionsMixin } from 'vue';
-import { ComponentProvideOptions } from 'vue';
-import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { Offset as Offset_2 } from '.';
-import { OffsetPosition } from '@progress/kendo-popup-common';
-import { PopupAnimation as PopupAnimation_2 } from '.';
-import { PopupCloseEvent as PopupCloseEvent_2 } from '.';
-import { PopupOpenEvent as PopupOpenEvent_2 } from '.';
-import { PropType } from 'vue';
-import { PublicProps } from 'vue';
-
-/**
- * Defines the horizontal and vertical aligning point of the Popup.
- */
-export declare interface Align {
-    /**
-     * Defines the possible horizontal point values that are relative to the anchor or the Popup.
-     *
-     * The available options are:
-     * - `left`—Uses the leftmost point of the anchor element.
-     * - `center`—Uses the center point of the anchor element.
-     * - `right`—Uses the rightmost point of the anchor element.
-     */
-    horizontal: 'left' | 'center' | 'right';
-    /**
-     * Defines the possible vertical point values that are relative to the anchor or the Popup.
-     *
-     * The available options are:
-     * - `top`—Uses the top point of the anchor element.
-     * - `center`—Uses the center point of the anchor element.
-     * - `bottom`—Uses the bottom point of the anchor element.
-     */
-    vertical: 'top' | 'center' | 'bottom';
-}
-
-/**
- * Defines the horizontal and vertical collision behavior of the Popup.
- */
-export declare interface Collision {
-    /**
-     * Defines the horizontal collision behavior of the Popup.
-     */
-    horizontal: CollisionType;
-    /**
-     * Defines the vertical collision behavior of the Popup.
-     */
-    vertical: CollisionType;
-}
-
-/**
- * Defines the possible collision behavior when the Popup is not fully visible.
- *
- * The available options are:
- * - `fit`—Moves the Popup horizontally until it is fully displayed in the viewport.
- * - `flip`—Flips the Popup position based on the origin and the position properties.
- */
-declare type CollisionType = 'fit' | 'flip';
-
-/**
- * The offset position of the Popup.
- */
-export declare interface Offset {
-    /**
-     * Defines the top position of the Popup.
-     */
-    top: number;
-    /**
-     * Defines the left position of the Popup.
-     */
-    left: number;
-}
-
-/**
- * @hidden
- */
-export declare const Popup: DefineComponent<ExtractPropTypes<    {
-appendTo: {
-type: PropType<string>;
-default: string;
-};
-anchor: {
-type: PropType<string>;
-default: string;
-};
-className: PropType<string | string[]>;
-id: PropType<string>;
-popupClass: PropType<string | string[]>;
-collision: {
-type: PropType<object>;
-default: () => {
-horizontal: string;
-vertical: string;
-};
-};
-anchorAlign: {
-type: PropType<object>;
-default: () => {
-horizontal: string;
-vertical: string;
-};
-};
-popupAlign: {
-type: PropType<object>;
-default: () => {
-horizontal: string;
-vertical: string;
-};
-};
-offset: {
-type: PropType<Offset_2>;
-default: () => {
-left: number;
-top: number;
-};
-};
-show: {
-type: PropType<boolean>;
-default: boolean;
-};
-animate: {
-type: PropType<boolean | PopupAnimation_2>;
-default: boolean;
-};
-direction: {
-type: PropType<string>;
-default: string;
-};
-onOpen: PropType<(event: PopupOpenEvent_2) => void>;
-onClose: PropType<(event: PopupCloseEvent_2) => void>;
-}>, {}, {
-hasMounted: boolean;
-}, {}, {
-onOpened(): void;
-onClosing(): void;
-onClosed(): void;
-transitionDuration(): {
-transitionEnterDuration: number;
-transitionExitDuration: number;
-};
-getParentRef(anchor: string, isAnchor?: boolean): any;
-position(settings: PopupProps, element: HTMLElement, anchor: string): Position;
-calculatePosition($props: any, appendToElement?: HTMLElement): Position;
-attachRepositionHandlers(element: any): void;
-detachRepositionHandlers(): void;
-reposition(): void;
-getCurrentZIndex(): number;
-}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
-appendTo: {
-type: PropType<string>;
-default: string;
-};
-anchor: {
-type: PropType<string>;
-default: string;
-};
-className: PropType<string | string[]>;
-id: PropType<string>;
-popupClass: PropType<string | string[]>;
-collision: {
-type: PropType<object>;
-default: () => {
-horizontal: string;
-vertical: string;
-};
-};
-anchorAlign: {
-type: PropType<object>;
-default: () => {
-horizontal: string;
-vertical: string;
-};
-};
-popupAlign: {
-type: PropType<object>;
-default: () => {
-horizontal: string;
-vertical: string;
-};
-};
-offset: {
-type: PropType<Offset_2>;
-default: () => {
-left: number;
-top: number;
-};
-};
-show: {
-type: PropType<boolean>;
-default: boolean;
-};
-animate: {
-type: PropType<boolean | PopupAnimation_2>;
-default: boolean;
-};
-direction: {
-type: PropType<string>;
-default: string;
-};
-onOpen: PropType<(event: PopupOpenEvent_2) => void>;
-onClose: PropType<(event: PopupCloseEvent_2) => void>;
-}>> & Readonly<{}>, {
-animate: boolean;
-anchor: string;
-direction: string;
-anchorAlign: object;
-offset: Offset_2;
-appendTo: string;
-collision: object;
-popupAlign: object;
-show: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
-
-/**
- * The animation settings for the Popup component.
- */
-export declare interface PopupAnimation {
-    /**
-     * The duration of the opening animation in milliseconds. Defaults to `300ms`.
-     */
-    openDuration?: number;
-    /**
-     * The duration of the closing animation in milliseconds. Defaults to `300ms`.
-     */
-    closeDuration?: number;
-}
-
-/**
- * Represents the object of the `Close` Popup event.
- */
-export declare interface PopupCloseEvent {
-    /**
-     * An event target.
-     */
-    target: any;
-}
-
-/**
- * Represents the object of the `Open` Popup event.
- */
-export declare interface PopupOpenEvent {
-    /**
-     * An event target.
-     */
-    target: any;
-}
-
-/**
- * Represents the props of the [KendoVue Popup component]({% slug overview_popup %}).
- */
-export declare interface PopupProps extends PopupSettings {
-    /**
-     * Controls the Popup visibility ([see example]({% slug hidden_popup %})). Defaults to `false`.
-     */
-    show?: boolean;
-}
-
-/**
- * @hidden
- */
-export declare interface PopupSettings {
-    /**
-     * Controls the Popup animation ([see example]({% slug animations_popup %})). By default, the opening and closing animations are enabled.
-     */
-    animate?: boolean | PopupAnimation;
-    /**
-     * Specifies the element which will be used as an anchor ([see example]({% slug alignmentpositioning_popup %})). The Popup opens next to that element.
-     */
-    anchor: string;
-    /**
-     * Specifies the pivot point of the anchor ([see example]({% slug alignmentpositioning_popup %})).
-     */
-    anchorAlign?: object;
-    /**
-     * Defines the 'id' or 'ref' of the container to which the Popup will be appended. Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body).
-     */
-    appendTo?: string;
-    /**
-     * Configures the collision behavior of the Popup ([see example]({% slug viewportboundarydetection_popup %})).
-     */
-    collision?: object;
-    /**
-     * Specifies the pivot point of the Popup ([see example]({% slug alignmentpositioning_popup %})).
-     */
-    popupAlign?: object;
-    /**
-     * Specifies a list of CSS classes that will be added to the Popup element.
-     */
-    className?: string | Array<string>;
-    /**
-     * Specifies the id that will be added to the Popup element.
-     */
-    id?: string;
-    /**
-     * Specifies the direction of the Expand Animation. Defaults to `down`.
-     */
-    direction?: string;
-    /**
-     * Specifies a list of CSS classes that will be added to the internal animated element ([see example]({% slug appearance_popup %})).
-     */
-    popupClass?: string | Array<string>;
-    /**
-     * Represents the styles that are applied to the Popup.
-     */
-    style?: any;
-    /**
-     * 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 after the Popup is opened and the opening animation ends.
-     */
-    onOpen?: (event: PopupOpenEvent) => void;
-    /**
-     * Fires after the Popup is closed.
-     */
-    onClose?: (event: PopupCloseEvent) => void;
-}
-
-/**
- * @hidden
- */
-declare interface Position {
-    flipped?: boolean;
-    offset?: OffsetPosition;
-}
-
-export { }
+import { Popup } from './Popup.js';
+import { PopupProps } from './models/PopupProps.js';
+import { PopupSettings } from './models/PopupSettings.js';
+import { Align } from './models/Align.js';
+import { Collision } from './models/Collision.js';
+import { Offset } from './models/Offset.js';
+import { PopupAnimation } from './models/PopupAnimation.js';
+import { OpenEvent as PopupOpenEvent, CloseEvent as PopupCloseEvent } from './models/Events.js';
+export { Popup, type PopupProps, type PopupSettings, type Align, type Collision, type Offset, type PopupAnimation, type PopupOpenEvent, type PopupCloseEvent };