@progress/kendo-angular-popup 25.0.0-develop.2 → 25.0.0-develop.21

package/fesm2022/progress-kendo-angular-popup.mjs

@@ -3,11 +3,11 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, Inject, Optional, EventEmitter, isDevMode, ViewChild, Output, Input, Component, EnvironmentInjector, createComponent, TemplateRef, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, Inject, Optional, EventEmitter, isDevMode, signal, afterNextRender, afterEveryRender, ViewChild, Output, Input, ChangeDetectionStrategy, Component, EnvironmentInjector, createComponent, TemplateRef, NgModule } from '@angular/core';
 import { siblingContainer, parents, addScroll, align, boundingOffset, offset, positionWithScroll, removeScroll, restrictToView, scrollPosition, getWindowViewPort } from '@progress/kendo-popup-common';
 import * as i1$1 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, hasObservers, ResizeSensorComponent, KENDO_RESIZESENSOR, ResizeBatchService } from '@progress/kendo-angular-common';
-import { fromEvent, merge, from } from 'rxjs';
+import { fromEvent, merge } from 'rxjs';
 import { auditTime } from 'rxjs/operators';
 import * as i1 from '@angular/animations';
 import { style, animate } from '@angular/animations';
@@ -322,10 +322,10 @@ class DOMService {
     isZoomed() {
         return this.zoomLevel() > 1;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DOMService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DOMService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DOMService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DOMService, decorators: [{
             type: Injectable
         }] });
 
@@ -386,10 +386,10 @@ class AlignService {
         const rect = eitherRect(this._dom.position(anchor, element, scale), offset);
         return scaleRect(rect, scale);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AlignService, deps: [{ token: DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AlignService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AlignService, deps: [{ token: DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AlignService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AlignService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AlignService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DOMService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -435,10 +435,10 @@ class PositionService {
             offset: offset
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PositionService, deps: [{ token: DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PositionService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PositionService, deps: [{ token: DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PositionService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PositionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PositionService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DOMService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -452,18 +452,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  */
 class ResizeService {
     _dom;
-    _zone;
+    zone;
     subscription;
-    constructor(_dom, _zone) {
+    constructor(_dom, zone) {
         this._dom = _dom;
-        this._zone = _zone;
+        this.zone = zone;
     }
     subscribe(callback) {
         if (!isDocumentAvailable()) {
             return;
         }
-        this._zone.runOutsideAngular(() => {
-            this.subscription = fromEvent(this._dom.getWindow(), "resize")
+        this.zone.runOutsideAngular(() => {
+            this.subscription = fromEvent(this._dom.getWindow(), 'resize')
                 .pipe(auditTime(FRAME_DURATION))
                 .subscribe(() => callback());
         });
@@ -477,10 +477,10 @@ class ResizeService {
     isUnsubscribed() {
         return this.subscription && this.subscription.closed;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ResizeService, deps: [{ token: DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ResizeService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ResizeService, deps: [{ token: DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ResizeService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ResizeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ResizeService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DOMService }, { type: i0.NgZone }] });
 
@@ -493,12 +493,12 @@ const THRESHOLD_DIFF = 1;
  */
 class ScrollableService {
     _dom;
-    _zone;
+    zone;
     element;
     subscription;
-    constructor(_dom, _zone) {
+    constructor(_dom, zone) {
         this._dom = _dom;
-        this._zone = _zone;
+        this.zone = zone;
     }
     forElement(element) {
         this.unsubscribe();
@@ -510,7 +510,7 @@ class ScrollableService {
             return;
         }
         const parents = this._dom.scrollableParents(this.element);
-        this._zone.runOutsideAngular(() => {
+        this.zone.runOutsideAngular(() => {
             const observables = parents.map(p => fromEvent(p, "scroll").pipe(auditTime(FRAME_DURATION)));
             const subscriber = (e) => {
                 const target = e.target;
@@ -518,7 +518,9 @@ class ScrollableService {
                 const isDocument = target === document;
                 const isWindow = target === window;
                 if (isParent || isDocument || isWindow) {
-                    callback(this.isVisible(this.element, target));
+                    const visible = this.isVisible(this.element, target);
+                    const direction = visible ? undefined : this.getLeaveDirection(this.element, target);
+                    callback(visible, direction);
                 }
             };
             this.subscription = merge(...observables).subscribe(subscriber);
@@ -547,10 +549,19 @@ class ScrollableService {
         }
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollableService, deps: [{ token: DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollableService });
+    getLeaveDirection(elem, container) {
+        const elemRect = this._dom.boundingOffset(elem);
+        const containerRect = this._dom.boundingOffset(this._dom.nativeElement(container));
+        const vertical = THRESHOLD_DIFF < (containerRect.top - elemRect.bottom) ||
+            THRESHOLD_DIFF < (elemRect.top - containerRect.bottom);
+        const horizontal = THRESHOLD_DIFF < (elemRect.left - containerRect.right) ||
+            THRESHOLD_DIFF < (containerRect.left - elemRect.right);
+        return { horizontal, vertical };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ScrollableService, deps: [{ token: DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ScrollableService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ScrollableService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DOMService }, { type: i0.NgZone }] });
 
@@ -678,10 +689,10 @@ class AnimationService {
             this.player = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AnimationService, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AnimationService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AnimationService, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AnimationService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AnimationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AnimationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.AnimationBuilder }] });
 
@@ -693,8 +704,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783688449,
-    version: '25.0.0-develop.2',
+    publishDate: 1785852383,
+    version: '25.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -723,59 +734,70 @@ class PopupComponent {
     _scrollableService;
     animationService;
     _renderer;
-    _zone;
+    zone;
+    injector;
     /**
      * Controls the Popup animation. By default, the opening and closing animations are enabled ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/animations)).
      * @default true
      */
-    animate = true;
+    set animate(value) { this._animate.set(value); }
+    get animate() { return this._animate(); }
     /**
      * Sets the element to use as an anchor. The Popup opens next to this element. ([See example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-components)).
      */
-    anchor;
+    set anchor(value) { this._anchor.set(value); }
+    get anchor() { return this._anchor(); }
     /**
      * Sets the anchor pivot point ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning)).
      * @default '{ horizontal: "left", vertical: "bottom" }'
      */
-    anchorAlign = { horizontal: 'left', vertical: 'bottom' };
+    set anchorAlign(value) { this._anchorAlign.set(value); }
+    get anchorAlign() { return this._anchorAlign(); }
     /**
      * Sets the collision behavior of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/viewport-boundary-detection)).
      * @default '{ horizontal: "fit", vertical: "flip" }'
      */
-    collision = { horizontal: 'fit', vertical: 'flip' };
+    set collision(value) { this._collision.set(value); }
+    get collision() { return this._collision(); }
     /**
      * Sets the pivot point of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning)).
      * @default '{ horizontal: "left", vertical: "top" }'
      */
-    popupAlign = { horizontal: 'left', vertical: 'top' };
+    set popupAlign(value) { this._popupAlign.set(value); }
+    get popupAlign() { return this._popupAlign(); }
     /**
      * Controls whether the component copies the `anchor` font styles.
      * @default false
      */
-    copyAnchorStyles = false;
+    set copyAnchorStyles(value) { this._copyAnchorStyles.set(value); }
+    get copyAnchorStyles() { return this._copyAnchorStyles(); }
     /**
      * Sets a list of CSS classes to add to the internal animated element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/styling)).
      *
      * > To style the content of the Popup, use this property binding.
      */
-    popupClass;
+    set popupClass(value) { this._popupClass.set(value); }
+    get popupClass() { return this._popupClass(); }
     /**
      * Sets the position mode of the component. By default, the Popup uses fixed positioning. To use absolute positioning, set this option to `absolute`.
      *
      * To support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
      * @default 'fixed'
      */
-    positionMode = 'fixed';
+    set positionMode(value) { this._positionMode.set(value); }
+    get positionMode() { return this._positionMode(); }
     /**
      * Sets the absolute position of the element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-absolute-points)).
      * The Popup opens next to this point. The Popup pivot point is defined by the `popupAlign` option. The boundary detection uses the window viewport.
      * @default '{ left: -10000, top: 0 }'
      */
-    offset = DEFAULT_OFFSET;
+    set offset(value) { this._offset.set(value); }
+    get offset() { return this._offset(); }
     /**
      * Sets the margin value in pixels. Adds blank space between the Popup and the anchor ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#adding-a-margin)).
      */
-    margin;
+    set margin(value) { this._margin.set(value); }
+    get margin() { return this._margin(); }
     /**
      * Fires when the anchor scrolls outside the screen boundaries. ([See example](https://www.telerik.com/kendo-angular-ui/components/popup/closing)).
      */
@@ -808,12 +830,20 @@ class PopupComponent {
      * @hidden
      */
     renderDefaultClass = true;
-    resolvedPromise = Promise.resolve(null);
-    _currentOffset;
+    _animate = signal(true, ...(ngDevMode ? [{ debugName: "_animate" }] : []));
+    _anchor = signal(undefined, ...(ngDevMode ? [{ debugName: "_anchor" }] : []));
+    _anchorAlign = signal({ horizontal: 'left', vertical: 'bottom' }, ...(ngDevMode ? [{ debugName: "_anchorAlign" }] : []));
+    _collision = signal({ horizontal: 'fit', vertical: 'flip' }, ...(ngDevMode ? [{ debugName: "_collision" }] : []));
+    _popupAlign = signal({ horizontal: 'left', vertical: 'top' }, ...(ngDevMode ? [{ debugName: "_popupAlign" }] : []));
+    _copyAnchorStyles = signal(false, ...(ngDevMode ? [{ debugName: "_copyAnchorStyles" }] : []));
+    _popupClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupClass" }] : []));
+    _positionMode = signal('fixed', ...(ngDevMode ? [{ debugName: "_positionMode" }] : []));
+    _offset = signal(DEFAULT_OFFSET, ...(ngDevMode ? [{ debugName: "_offset" }] : []));
+    _margin = signal(undefined, ...(ngDevMode ? [{ debugName: "_margin" }] : []));
+    _currentOffset = signal(undefined, ...(ngDevMode ? [{ debugName: "_currentOffset" }] : []));
     animationSubscriptions;
-    repositionSubscription;
-    initialCheck = true;
-    constructor(container, _alignService, domService, _positionService, _resizeService, _scrollableService, animationService, _renderer, _zone) {
+    resolvedPromise = Promise.resolve(null);
+    constructor(container, _alignService, domService, _positionService, _resizeService, _scrollableService, animationService, _renderer, zone, injector) {
         this.container = container;
         this._alignService = _alignService;
         this.domService = domService;
@@ -822,7 +852,8 @@ class PopupComponent {
         this._scrollableService = _scrollableService;
         this.animationService = animationService;
         this._renderer = _renderer;
-        this._zone = _zone;
+        this.zone = zone;
+        this.injector = injector;
         validatePackage(packageMetadata);
         this._renderer.addClass(container.nativeElement, ANIMATION_CONTAINER);
         this.updateFixedClass();
@@ -839,7 +870,7 @@ class PopupComponent {
         this.setZIndex();
         this.copyFontStyles();
         this.updateFixedClass();
-        this.reposition();
+        afterNextRender(() => this.reposition(), { injector: this.injector });
     }
     ngOnChanges(changes) {
         if (changes.copyAnchorStyles) {
@@ -858,18 +889,7 @@ class PopupComponent {
         this.reposition();
     }
     ngAfterViewChecked() {
-        if (this.initialCheck) {
-            this.initialCheck = false;
-            return;
-        }
-        this._zone.runOutsideAngular(() => {
-            // workarounds https://github.com/angular/angular/issues/19094
-            // uses promise because it is executed synchronously after the content is updated
-            // does not use onStable in case the current zone is not the angular one.
-            this.unsubscribeReposition();
-            this.repositionSubscription = from(this.resolvedPromise)
-                .subscribe(this.reposition);
-        });
+        afterEveryRender(() => this.reposition(), { injector: this.injector });
     }
     ngOnDestroy() {
         this.anchorViewportLeave.complete();
@@ -879,7 +899,6 @@ class PopupComponent {
         this._resizeService.unsubscribe();
         this._scrollableService.unsubscribe();
         this.animationSubscriptions.unsubscribe();
-        this.unsubscribeReposition();
     }
     /**
      * @hidden
@@ -896,13 +915,13 @@ class PopupComponent {
         this.open.complete();
     }
     get currentOffset() {
-        return this._currentOffset;
+        return this._currentOffset();
     }
     set currentOffset(offset) {
         this.setContainerStyle('left', `${offset.left}px`);
         this.setContainerStyle('top', `${offset.top}px`);
         this.setContainerStyle('margin', this.hasCustomOffset ? '0' : null);
-        this._currentOffset = offset;
+        this._currentOffset.set(offset);
     }
     setZIndex() {
         if (this.anchor) {
@@ -917,7 +936,7 @@ class PopupComponent {
         if (!this.currentOffset || isDifferentOffset(this.currentOffset, offset)) {
             this.currentOffset = offset;
             if (hasObservers(this.positionChange)) {
-                this._zone.run(() => this.positionChange.emit({ offset, flip }));
+                this.zone.run(() => this.positionChange.emit({ offset, flip }));
             }
         }
         if (this.animate) {
@@ -945,14 +964,14 @@ class PopupComponent {
             margin: this.margin
         });
     }
-    onScroll(isInViewPort) {
+    onScroll(isInViewPort, direction) {
         const hasLeaveObservers = hasObservers(this.anchorViewportLeave);
         if (isInViewPort || !hasLeaveObservers) {
             this.reposition();
         }
         else if (hasLeaveObservers) {
-            this._zone.run(() => {
-                this.anchorViewportLeave.emit();
+            this.zone.run(() => {
+                this.anchorViewportLeave.emit(direction);
             });
         }
     }
@@ -974,50 +993,44 @@ class PopupComponent {
         }
         this._renderer.setStyle(this.container.nativeElement, name, value);
     }
-    unsubscribeReposition() {
-        if (this.repositionSubscription) {
-            this.repositionSubscription.unsubscribe();
-        }
-    }
     get hasCustomOffset() {
         return this.offset.left !== DEFAULT_OFFSET.left || this.offset.top !== DEFAULT_OFFSET.top;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupComponent, deps: [{ token: i0.ElementRef }, { token: AlignService }, { token: DOMService }, { token: PositionService }, { token: ResizeService }, { token: ScrollableService }, { token: AnimationService }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: PopupComponent, isStandalone: true, selector: "kendo-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", collision: "collision", popupAlign: "popupAlign", copyAnchorStyles: "copyAnchorStyles", popupClass: "popupClass", positionMode: "positionMode", offset: "offset", margin: "margin" }, outputs: { anchorViewportLeave: "anchorViewportLeave", close: "close", open: "open", positionChange: "positionChange" }, providers: [AlignService, AnimationService, DOMService, PositionService, ResizeService, ScrollableService], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], exportAs: ["kendo-popup"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupComponent, deps: [{ token: i0.ElementRef }, { token: AlignService }, { token: DOMService }, { token: PositionService }, { token: ResizeService }, { token: ScrollableService }, { token: AnimationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: PopupComponent, isStandalone: true, selector: "kendo-popup", inputs: { animate: "animate", anchor: "anchor", anchorAlign: "anchorAlign", collision: "collision", popupAlign: "popupAlign", copyAnchorStyles: "copyAnchorStyles", popupClass: "popupClass", positionMode: "positionMode", offset: "offset", margin: "margin" }, outputs: { anchorViewportLeave: "anchorViewportLeave", close: "close", open: "open", positionChange: "positionChange" }, providers: [AlignService, AnimationService, DOMService, PositionService, ResizeService, ScrollableService], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ResizeSensorComponent, descendants: true, static: true }], exportAs: ["kendo-popup"], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-child-animation-container">
-          <div [class.k-popup]="renderDefaultClass" [ngClass]="popupClass" #container>
-            <ng-content></ng-content>
-            @if (content) {
-              <ng-template [ngTemplateOutlet]="content"></ng-template>
-            }
-            <kendo-resize-sensor [rateLimit]="100" (resize)="onResize()">
-            </kendo-resize-sensor>
-          </div>
+            <div [class.k-popup]="renderDefaultClass" [ngClass]="popupClass" #container>
+                <ng-content></ng-content>
+                @if (content) {
+                    <ng-template [ngTemplateOutlet]="content"></ng-template>
+                }
+                <kendo-resize-sensor [rateLimit]="100" (resize)="onResize()"></kendo-resize-sensor>
+            </div>
         </div>
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-popup',
                     exportAs: 'kendo-popup',
+                    imports: [NgClass, NgTemplateOutlet, ResizeSensorComponent],
                     providers: [AlignService, AnimationService, DOMService, PositionService, ResizeService, ScrollableService],
-                    selector: 'kendo-popup',
                     template: `
         <div class="k-child-animation-container">
-          <div [class.k-popup]="renderDefaultClass" [ngClass]="popupClass" #container>
-            <ng-content></ng-content>
-            @if (content) {
-              <ng-template [ngTemplateOutlet]="content"></ng-template>
-            }
-            <kendo-resize-sensor [rateLimit]="100" (resize)="onResize()">
-            </kendo-resize-sensor>
-          </div>
+            <div [class.k-popup]="renderDefaultClass" [ngClass]="popupClass" #container>
+                <ng-content></ng-content>
+                @if (content) {
+                    <ng-template [ngTemplateOutlet]="content"></ng-template>
+                }
+                <kendo-resize-sensor [rateLimit]="100" (resize)="onResize()"></kendo-resize-sensor>
+            </div>
         </div>
-        `,
-                    standalone: true,
-                    imports: [NgClass, NgTemplateOutlet, ResizeSensorComponent]
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AlignService }, { type: DOMService }, { type: PositionService }, { type: ResizeService }, { type: ScrollableService }, { type: AnimationService }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { animate: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AlignService }, { type: DOMService }, { type: PositionService }, { type: ResizeService }, { type: ScrollableService }, { type: AnimationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { animate: [{
                 type: Input
             }], anchor: [{
                 type: Input
@@ -1262,10 +1275,10 @@ class PopupService {
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupService, deps: [{ token: i0.ApplicationRef }, { token: i0.Injector }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1329,11 +1342,11 @@ const KENDO_POPUP = [
  * ```
  */
 class PopupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: PopupModule, imports: [i1$1.ResizeSensorComponent, PopupComponent], exports: [PopupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupModule, providers: [PopupService, ResizeBatchService], imports: [KENDO_RESIZESENSOR, KENDO_POPUP] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: PopupModule, imports: [i1$1.ResizeSensorComponent, PopupComponent], exports: [PopupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupModule, providers: [PopupService, ResizeBatchService], imports: [KENDO_RESIZESENSOR, KENDO_POPUP] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: PopupModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_POPUP],

package/index.d.ts

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { AlignStrategy, OffsetPosition, MarginSettings, ElementRect, ScrollInfo, AlignSettings, BoundingRect, PositionSettings, ViewPort, CollisionStrategy } from '@progress/kendo-popup-common';
 import * as i0 from '@angular/core';
-import { ElementRef, ViewContainerRef, TemplateRef, NgZone, OnDestroy, EventEmitter, AfterViewInit, OnInit, OnChanges, Renderer2, ComponentRef, InjectionToken, ApplicationRef, Injector } from '@angular/core';
+import { ElementRef, ViewContainerRef, TemplateRef, NgZone, OnDestroy, EventEmitter, AfterViewInit, AfterViewChecked, OnInit, OnChanges, Renderer2, Injector, ComponentRef, InjectionToken, ApplicationRef } from '@angular/core';
 import { AnimationBuilder } from '@angular/animations';
 import * as i1 from '@progress/kendo-angular-common';
 import { ResizeSensorComponent } from '@progress/kendo-angular-common';
@@ -273,9 +273,9 @@ declare class PositionService {
  */
 declare class ResizeService {
     private _dom;
-    private _zone;
+    private zone;
     private subscription;
-    constructor(_dom: DOMService, _zone: NgZone);
+    constructor(_dom: DOMService, zone: NgZone);
     subscribe(callback: () => void): void;
     unsubscribe(): void;
     isUnsubscribed(): boolean;
@@ -283,19 +283,27 @@ declare class ResizeService {
     static ɵprov: i0.ɵɵInjectableDeclaration<ResizeService>;
 }
 
+/**
+ * @hidden
+ */
+interface ScrollableLeaveDirection {
+    horizontal: boolean;
+    vertical: boolean;
+}
 /**
  * @hidden
  */
 declare class ScrollableService {
     private _dom;
-    private _zone;
+    private zone;
     private element;
     private subscription;
-    constructor(_dom: DOMService, _zone: NgZone);
+    constructor(_dom: DOMService, zone: NgZone);
     forElement(element: HTMLElement): ScrollableService;
-    subscribe(callback: (visible: boolean) => void): void;
+    subscribe(callback: (visible: boolean, direction?: ScrollableLeaveDirection) => void): void;
     unsubscribe(): void;
     isVisible(elem: HTMLElement, container: any): boolean;
+    private getLeaveDirection;
     static ɵfac: i0.ɵɵFactoryDeclaration<ScrollableService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ScrollableService>;
 }
@@ -332,7 +340,7 @@ declare class AnimationService implements OnDestroy {
  * }
  * ```
  */
-declare class PopupComponent implements AfterViewInit, OnInit, OnChanges, OnDestroy {
+declare class PopupComponent implements AfterViewInit, AfterViewChecked, OnInit, OnChanges, OnDestroy {
     container: ElementRef;
     private _alignService;
     domService: DOMService;
@@ -341,59 +349,70 @@ declare class PopupComponent implements AfterViewInit, OnInit, OnChanges, OnDest
     private _scrollableService;
     private animationService;
     private _renderer;
-    private _zone;
+    private zone;
+    private injector;
     /**
      * Controls the Popup animation. By default, the opening and closing animations are enabled ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/animations)).
      * @default true
      */
-    animate: boolean | PopupAnimation;
+    set animate(value: boolean | PopupAnimation);
+    get animate(): boolean | PopupAnimation;
     /**
      * Sets the element to use as an anchor. The Popup opens next to this element. ([See example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-components)).
      */
-    anchor: ElementRef | HTMLElement;
+    set anchor(value: ElementRef | HTMLElement);
+    get anchor(): ElementRef | HTMLElement;
     /**
      * Sets the anchor pivot point ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning)).
      * @default '{ horizontal: "left", vertical: "bottom" }'
      */
-    anchorAlign: Align;
+    set anchorAlign(value: Align);
+    get anchorAlign(): Align;
     /**
      * Sets the collision behavior of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/viewport-boundary-detection)).
      * @default '{ horizontal: "fit", vertical: "flip" }'
      */
-    collision: Collision;
+    set collision(value: Collision);
+    get collision(): Collision;
     /**
      * Sets the pivot point of the Popup ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#positioning)).
      * @default '{ horizontal: "left", vertical: "top" }'
      */
-    popupAlign: Align;
+    set popupAlign(value: Align);
+    get popupAlign(): Align;
     /**
      * Controls whether the component copies the `anchor` font styles.
      * @default false
      */
-    copyAnchorStyles: boolean;
+    set copyAnchorStyles(value: boolean);
+    get copyAnchorStyles(): boolean;
     /**
      * Sets a list of CSS classes to add to the internal animated element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/styling)).
      *
      * > To style the content of the Popup, use this property binding.
      */
-    popupClass: string | Array<string> | object | Set<string>;
+    set popupClass(value: string | Array<string> | object | Set<string>);
+    get popupClass(): string | Array<string> | object | Set<string>;
     /**
      * Sets the position mode of the component. By default, the Popup uses fixed positioning. To use absolute positioning, set this option to `absolute`.
      *
      * To support mobile browsers with the zoom option, use the `absolute` positioning of the Popup.
      * @default 'fixed'
      */
-    positionMode: PositionMode;
+    set positionMode(value: PositionMode);
+    get positionMode(): PositionMode;
     /**
      * Sets the absolute position of the element ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#aligning-to-absolute-points)).
      * The Popup opens next to this point. The Popup pivot point is defined by the `popupAlign` option. The boundary detection uses the window viewport.
      * @default '{ left: -10000, top: 0 }'
      */
-    offset: Offset;
+    set offset(value: Offset);
+    get offset(): Offset;
     /**
      * Sets the margin value in pixels. Adds blank space between the Popup and the anchor ([see example](https://www.telerik.com/kendo-angular-ui/components/popup/aligning-positioning#adding-a-margin)).
      */
-    margin: Margin;
+    set margin(value: Margin);
+    get margin(): Margin;
     /**
      * Fires when the anchor scrolls outside the screen boundaries. ([See example](https://www.telerik.com/kendo-angular-ui/components/popup/closing)).
      */
@@ -426,12 +445,20 @@ declare class PopupComponent implements AfterViewInit, OnInit, OnChanges, OnDest
      * @hidden
      */
     renderDefaultClass: boolean;
-    private resolvedPromise;
-    private _currentOffset?;
+    private _animate;
+    private _anchor;
+    private _anchorAlign;
+    private _collision;
+    private _popupAlign;
+    private _copyAnchorStyles;
+    private _popupClass;
+    private _positionMode;
+    private _offset;
+    private _margin;
+    private _currentOffset;
     private animationSubscriptions;
-    private repositionSubscription;
-    private initialCheck;
-    constructor(container: ElementRef, _alignService: AlignService, domService: DOMService, _positionService: PositionService, _resizeService: ResizeService, _scrollableService: ScrollableService, animationService: AnimationService, _renderer: Renderer2, _zone: NgZone);
+    private resolvedPromise;
+    constructor(container: ElementRef, _alignService: AlignService, domService: DOMService, _positionService: PositionService, _resizeService: ResizeService, _scrollableService: ScrollableService, animationService: AnimationService, _renderer: Renderer2, zone: NgZone, injector: Injector);
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
     ngAfterViewInit(): void;
@@ -452,7 +479,6 @@ declare class PopupComponent implements AfterViewInit, OnInit, OnChanges, OnDest
     private copyFontStyles;
     private updateFixedClass;
     private setContainerStyle;
-    private unsubscribeReposition;
     private get hasCustomOffset();
     static ɵfac: i0.ɵɵFactoryDeclaration<PopupComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PopupComponent, "kendo-popup", ["kendo-popup"], { "animate": { "alias": "animate"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlign": { "alias": "anchorAlign"; "required": false; }; "collision": { "alias": "collision"; "required": false; }; "popupAlign": { "alias": "popupAlign"; "required": false; }; "copyAnchorStyles": { "alias": "copyAnchorStyles"; "required": false; }; "popupClass": { "alias": "popupClass"; "required": false; }; "positionMode": { "alias": "positionMode"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; }, { "anchorViewportLeave": "anchorViewportLeave"; "close": "close"; "open": "open"; "positionChange": "positionChange"; }, never, ["*"], true, never>;
@@ -682,4 +708,4 @@ declare const SCALE: InjectionToken<number>;
 declare const KENDO_POPUP: readonly [typeof PopupComponent];
 
 export { KENDO_POPUP, POPUP_CONTAINER, PopupComponent, PopupModule, PopupService, SCALE };
-export type { Align, AnimationDirection, AnimationType, Collision, Margin, Offset, PopupAnimation, PopupRef, PopupSettings, PositionMode };
+export type { Align, AnimationDirection, AnimationType, Collision, Margin, Offset, PopupAnimation, PopupRef, PopupSettings, PositionMode, ScrollableLeaveDirection };

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1783688449,
-  "version": "25.0.0-develop.2",
+  "publishDate": 1785852383,
+  "version": "25.0.0-develop.21",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-popup",
-  "version": "25.0.0-develop.2",
+  "version": "25.0.0-develop.21",
   "description": "Kendo UI Angular Popup component - an easily customized popup from the most trusted provider of professional Angular components.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -34,7 +34,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1783688449,
+      "publishDate": 1785852383,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
     }
   },
@@ -43,14 +43,14 @@
     "@angular/common": "20 - 22",
     "@angular/core": "20 - 22",
     "@angular/platform-browser": "20 - 22",
-    "@progress/kendo-angular-common": "25.0.0-develop.2",
+    "@progress/kendo-angular-common": "25.0.0-develop.21",
     "@progress/kendo-licensing": "^1.11.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "@progress/kendo-popup-common": "1.9.5",
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0-develop.2"
+    "@progress/kendo-angular-schematics": "25.0.0-develop.21"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-popup.mjs",