@progress/kendo-angular-popup 21.3.1-develop.1 → 21.4.0-develop.10

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1765532826,
-    version: '21.3.1-develop.1',
+    publishDate: 1766140170,
+    version: '21.4.0-develop.10',
     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/esm2022/popup.component.mjs

@@ -158,6 +158,9 @@ export class PopupComponent {
         this.animationSubscriptions.add(this.animationService.end.subscribe(this.onAnimationEnd.bind(this)));
         this._scrollableService.forElement(this.domService.nativeElement(this.anchor) || this.container.nativeElement).subscribe(this.onScroll.bind(this));
         this.currentOffset = DEFAULT_OFFSET;
+        // we intentionally set the zIndex here as an exception to the rule that it should come from the themes
+        // to be removed once https://github.com/telerik/kendo-angular-private/issues/5413 is addressed
+        this.setZIndex();
         this.copyFontStyles();
         this.updateFixedClass();
         this.reposition();
@@ -224,6 +227,11 @@ export class PopupComponent {
         this.setContainerStyle('top', `${offset.top}px`);
         this._currentOffset = offset;
     }
+    setZIndex() {
+        if (this.anchor) {
+            this.setContainerStyle('z-index', String(this.domService.zIndex(this.domService.nativeElement(this.anchor), this.container)));
+        }
+    }
     reposition() {
         if (!isDocumentAvailable()) {
             return;

package/esm2022/services/dom.service.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Injectable } from '@angular/core';
 import { align, boundingOffset, getWindowViewPort, offset, positionWithScroll, restrictToView, addScroll, removeScroll, scrollPosition } from '@progress/kendo-popup-common';
-import { isWindowAvailable, hasRelativeStackingContext, scrollableParents } from '../util';
+import { isWindowAvailable, hasRelativeStackingContext, scrollableParents, zIndex } from '../util';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 const STYLES = [
@@ -135,6 +135,9 @@ export class DOMService {
     windowViewPort(el) {
         return getWindowViewPort(this.nativeElement(el));
     }
+    zIndex(anchor, container) {
+        return zIndex(anchor, this.nativeElement(container));
+    }
     zoomLevel() {
         if (!isDocumentAvailable() || !isWindowAvailable()) {
             return 1;

package/esm2022/util.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { parents, siblingContainer } from '@progress/kendo-popup-common';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 /**
  * @hidden
@@ -128,6 +129,24 @@ export const hasRelativeStackingContext = memoize(() => {
     document.body.removeChild(parent);
     return isDifferent;
 });
+/**
+ * @hidden
+ */
+export const zIndex = (anchor, container) => {
+    if (!anchor || !isDocumentAvailable() || !isWindowAvailable()) {
+        return null;
+    }
+    const sibling = siblingContainer(anchor, container);
+    if (!sibling) {
+        return null;
+    }
+    const result = [anchor].concat(parents(anchor, sibling)).reduce((index, p) => {
+        const zIndexStyle = p.style.zIndex || window.getComputedStyle(p).zIndex;
+        const current = parseInt(zIndexStyle, 10);
+        return current > index ? current : index;
+    }, 0);
+    return result ? (result + 1) : null;
+};
 /**
  * @hidden
  */

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

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { Injectable, InjectionToken, Inject, Optional, EventEmitter, isDevMode, Component, Input, Output, ViewChild, TemplateRef, NgModule } from '@angular/core';
-import { addScroll, align, boundingOffset, offset, positionWithScroll, removeScroll, restrictToView, scrollPosition, getWindowViewPort } from '@progress/kendo-popup-common';
+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, ResizeBatchService, KENDO_RESIZESENSOR } from '@progress/kendo-angular-common';
 import { fromEvent, merge, from } from 'rxjs';
@@ -139,6 +139,24 @@ const hasRelativeStackingContext = memoize(() => {
     document.body.removeChild(parent);
     return isDifferent;
 });
+/**
+ * @hidden
+ */
+const zIndex = (anchor, container) => {
+    if (!anchor || !isDocumentAvailable() || !isWindowAvailable()) {
+        return null;
+    }
+    const sibling = siblingContainer(anchor, container);
+    if (!sibling) {
+        return null;
+    }
+    const result = [anchor].concat(parents(anchor, sibling)).reduce((index, p) => {
+        const zIndexStyle = p.style.zIndex || window.getComputedStyle(p).zIndex;
+        const current = parseInt(zIndexStyle, 10);
+        return current > index ? current : index;
+    }, 0);
+    return result ? (result + 1) : null;
+};
 /**
  * @hidden
  */
@@ -282,6 +300,9 @@ class DOMService {
     windowViewPort(el) {
         return getWindowViewPort(this.nativeElement(el));
     }
+    zIndex(anchor, container) {
+        return zIndex(anchor, this.nativeElement(container));
+    }
     zoomLevel() {
         if (!isDocumentAvailable() || !isWindowAvailable()) {
             return 1;
@@ -662,8 +683,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1765532826,
-    version: '21.3.1-develop.1',
+    publishDate: 1766140170,
+    version: '21.4.0-develop.10',
     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'
 };
 
@@ -803,6 +824,9 @@ class PopupComponent {
         this.animationSubscriptions.add(this.animationService.end.subscribe(this.onAnimationEnd.bind(this)));
         this._scrollableService.forElement(this.domService.nativeElement(this.anchor) || this.container.nativeElement).subscribe(this.onScroll.bind(this));
         this.currentOffset = DEFAULT_OFFSET;
+        // we intentionally set the zIndex here as an exception to the rule that it should come from the themes
+        // to be removed once https://github.com/telerik/kendo-angular-private/issues/5413 is addressed
+        this.setZIndex();
         this.copyFontStyles();
         this.updateFixedClass();
         this.reposition();
@@ -869,6 +893,11 @@ class PopupComponent {
         this.setContainerStyle('top', `${offset.top}px`);
         this._currentOffset = offset;
     }
+    setZIndex() {
+        if (this.anchor) {
+            this.setContainerStyle('z-index', String(this.domService.zIndex(this.domService.nativeElement(this.anchor), this.container)));
+        }
+    }
     reposition() {
         if (!isDocumentAvailable()) {
             return;

package/models/popup-settings.d.ts

@@ -56,7 +56,7 @@ export interface PopupSettings {
      *
      * > To style the content of the Popup, use this property binding.
      */
-    popupClass?: string | Array<string> | object;
+    popupClass?: string | Array<string> | object | Set<string>;
     /**
      * Sets the absolute position of the element ([see example]({% slug alignmentpositioning_popup %}#toc-aligning-to-absolute-points)).
      * The Popup opens next to this point. The pivot point of the Popup is defined by the `popupAlign` option. The boundary detection uses the window viewport.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-popup",
-  "version": "21.3.1-develop.1",
+  "version": "21.4.0-develop.10",
   "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",
@@ -19,7 +19,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1765532826,
+      "publishDate": 1766140170,
       "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"
     }
   },
@@ -28,14 +28,14 @@
     "@angular/common": "18 - 21",
     "@angular/core": "18 - 21",
     "@angular/platform-browser": "18 - 21",
-    "@progress/kendo-angular-common": "21.3.1-develop.1",
+    "@progress/kendo-angular-common": "21.4.0-develop.10",
     "@progress/kendo-licensing": "^1.7.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "@progress/kendo-popup-common": "1.9.5",
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.3.1-develop.1"
+    "@progress/kendo-angular-schematics": "21.4.0-develop.10"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-popup.mjs",

package/popup.component.d.ts

@@ -74,7 +74,7 @@ export declare class PopupComponent implements AfterViewInit, OnInit, OnChanges,
      *
      * > To style the content of the Popup, use this property binding.
      */
-    popupClass: string | Array<string> | object;
+    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`.
      *
@@ -143,6 +143,7 @@ export declare class PopupComponent implements AfterViewInit, OnInit, OnChanges,
     private onAnimationEnd;
     private get currentOffset();
     private set currentOffset(value);
+    private setZIndex;
     private reposition;
     private position;
     private onScroll;

package/services/dom.service.d.ts

@@ -31,6 +31,7 @@ export declare class DOMService {
     getRelativeContextElement(el: ElementRef): HTMLElement;
     useRelativePosition(el: ElementRef): boolean;
     windowViewPort(el: ElementRef): ViewPort;
+    zIndex(anchor: HTMLElement, container: ElementRef): number;
     zoomLevel(): number;
     isZoomed(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<DOMService, never>;

package/util.d.ts

@@ -43,6 +43,10 @@ export declare const FRAME_DURATION: number;
  * @hidden
  */
 export declare const hasRelativeStackingContext: any;
+/**
+ * @hidden
+ */
+export declare const zIndex: (anchor: HTMLElement, container: HTMLElement) => number | null;
 /**
  * @hidden
  */