@progress/kendo-angular-popup 24.2.2 → 25.0.0-develop.12

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: "19.2.25", ngImport: i0, type: DOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DOMService });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DOMService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.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: "19.2.25", ngImport: i0, type: AlignService });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AlignService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.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: "19.2.25", ngImport: i0, type: PositionService });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PositionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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: "19.2.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: "19.2.25", ngImport: i0, type: ResizeService, deps: [{ token: DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ResizeService });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ResizeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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;
@@ -547,10 +547,10 @@ class ScrollableService {
         }
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollableService, deps: [{ token: DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollableService });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ScrollableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ScrollableService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: DOMService }, { type: i0.NgZone }] });
 
@@ -678,10 +678,10 @@ class AnimationService {
             this.player = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AnimationService, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AnimationService });
+    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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: AnimationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AnimationService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.AnimationBuilder }] });
 
@@ -693,8 +693,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783511229,
-    version: '24.2.2',
+    publishDate: 1785317748,
+    version: '25.0.0-develop.12',
     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 +723,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 +819,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 +841,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 +859,7 @@ class PopupComponent {
         this.setZIndex();
         this.copyFontStyles();
         this.updateFixedClass();
-        this.reposition();
+        afterNextRender(() => this.reposition(), { injector: this.injector });
     }
     ngOnChanges(changes) {
         if (changes.copyAnchorStyles) {
@@ -858,18 +878,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 +888,6 @@ class PopupComponent {
         this._resizeService.unsubscribe();
         this._scrollableService.unsubscribe();
         this.animationSubscriptions.unsubscribe();
-        this.unsubscribeReposition();
     }
     /**
      * @hidden
@@ -896,13 +904,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 +925,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) {
@@ -951,7 +959,7 @@ class PopupComponent {
             this.reposition();
         }
         else if (hasLeaveObservers) {
-            this._zone.run(() => {
+            this.zone.run(() => {
                 this.anchorViewportLeave.emit();
             });
         }
@@ -974,50 +982,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: "19.2.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: "19.2.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.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 }, { token: i0.Injector }], 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: `
         <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: "19.2.25", ngImport: i0, type: PopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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 +1264,10 @@ class PopupService {
             ]
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.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: "19.2.25", ngImport: i0, type: PopupService, providedIn: 'root' });
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PopupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1329,11 +1331,11 @@ const KENDO_POPUP = [
  * ```
  */
 class PopupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: PopupModule, imports: [i1$1.ResizeSensorComponent, PopupComponent], exports: [PopupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PopupModule, providers: [PopupService, ResizeBatchService], imports: [KENDO_RESIZESENSOR, KENDO_POPUP] });
+    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] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PopupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: PopupModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_POPUP],