@progress/kendo-angular-popup 4.0.5-dev.202202251003 → 4.0.6-dev.202203161114

package/dist/es2015/popup.component.js

@@ -204,7 +204,7 @@ let PopupComponent = class PopupComponent {
         this._resizeService.subscribe(this.reposition);
         this.animationSubscriptions = this.animationService.start.subscribe(this.onAnimationStart.bind(this));
         this.animationSubscriptions.add(this.animationService.end.subscribe(this.onAnimationEnd.bind(this)));
-        this._scrollableService.forElement(this.anchor || this.container).subscribe(this.onScroll.bind(this));
+        this._scrollableService.forElement(this.domService.nativeElement(this.anchor) || this.container.nativeElement).subscribe(this.onScroll.bind(this));
         this.currentOffset = DEFAULT_OFFSET;
         this.setZIndex();
         this.copyFontStyles();
@@ -274,7 +274,7 @@ let PopupComponent = class PopupComponent {
     }
     setZIndex() {
         if (this.anchor) {
-            this.setContainerStyle('z-index', String(this.domService.zIndex(this.anchor, this.container)));
+            this.setContainerStyle('z-index', String(this.domService.zIndex(this.domService.nativeElement(this.anchor), this.container)));
         }
     }
     reposition() {
@@ -295,7 +295,7 @@ let PopupComponent = class PopupComponent {
     }
     position() {
         const alignedOffset = this._alignService.alignElement({
-            anchor: this.anchor,
+            anchor: this.domService.nativeElement(this.anchor),
             anchorAlign: this.anchorAlign,
             element: this.container,
             elementAlign: this.popupAlign,
@@ -304,7 +304,7 @@ let PopupComponent = class PopupComponent {
             positionMode: this.positionMode
         });
         return this._positionService.positionElement({
-            anchor: this.anchor,
+            anchor: this.domService.nativeElement(this.anchor),
             anchorAlign: this.anchorAlign,
             collisions: this.collision,
             currentLocation: alignedOffset,
@@ -328,7 +328,7 @@ let PopupComponent = class PopupComponent {
         if (!this.anchor || !this.copyAnchorStyles) {
             return;
         }
-        this.domService.getFontStyles(this.anchor)
+        this.domService.getFontStyles(this.domService.nativeElement(this.anchor))
             .forEach(s => this.setContainerStyle(s.key, s.value));
     }
     updateFixedClass() {
@@ -350,7 +350,7 @@ tslib_1.__decorate([
 ], PopupComponent.prototype, "animate", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", ElementRef)
+    tslib_1.__metadata("design:type", Object)
 ], PopupComponent.prototype, "anchor", void 0);
 tslib_1.__decorate([
     Input(),

package/dist/es2015/services/align.service.js

@@ -20,7 +20,7 @@ let AlignService = class AlignService {
         const scale = this.scale || 1;
         const fixedMode = positionMode === 'fixed' || !this._dom.hasOffsetParent(element);
         const anchorRect = fixedMode ? this.absoluteRect(anchor, element, offset, scale) : this.relativeRect(anchor, element, offset, scale);
-        const elementRect = scaleRect(this._dom.offset(element), scale);
+        const elementRect = scaleRect(this._dom.offset(element.nativeElement), scale);
         const result = this._dom.align({
             anchorAlign: anchorAlign,
             anchorRect: anchorRect,

package/dist/es2015/services/dom.service.d.ts

@@ -12,24 +12,24 @@ export declare class DOMService {
     addOffset(current: OffsetPosition, addition: OffsetPosition): OffsetPosition;
     addScroll(rect: ElementRect, scroll: ScrollInfo): ElementRect;
     align(settings: AlignSettings): OffsetPosition;
-    boundingOffset(el: ElementRef): BoundingRect;
-    getFontStyles(el: ElementRef): any;
+    boundingOffset(el: HTMLElement): BoundingRect;
+    getFontStyles(el: HTMLElement): any;
     getWindow(): Window;
     hasOffsetParent(el: ElementRef): boolean;
-    offset(el: ElementRef): ElementRect;
+    offset(el: HTMLElement): ElementRect;
     offsetAtPoint(el: ElementRef, currentLocation: OffsetPosition): ElementRect;
-    nativeElement(el: ElementRef): HTMLElement;
-    position(element: ElementRef, popup: ElementRef, scale?: number): ElementRect;
+    nativeElement(el: any): HTMLElement;
+    position(element: HTMLElement, popup: ElementRef, scale?: number): ElementRect;
     removeScroll(rect: ElementRect, scroll: ScrollInfo): ElementRect;
     restrictToView(settings: PositionSettings): Position;
     scrollPosition(el: ElementRef): ScrollInfo;
-    scrollableParents(el: ElementRef): Array<HTMLElement>;
+    scrollableParents(el: HTMLElement): Array<HTMLElement>;
     stackingElementOffset(el: ElementRef): ElementRect;
     stackingElementScroll(el: ElementRef): ScrollInfo;
     getRelativeContextElement(el: ElementRef): HTMLElement;
     useRelativePosition(el: ElementRef): boolean;
     windowViewPort(el: ElementRef): ViewPort;
-    zIndex(anchor: ElementRef, container: ElementRef): number;
+    zIndex(anchor: HTMLElement, container: ElementRef): number;
     zoomLevel(): number;
     isZoomed(): boolean;
 }

package/dist/es2015/services/dom.service.js

@@ -32,14 +32,14 @@ let DOMService = class DOMService {
         return align(settings);
     }
     boundingOffset(el) {
-        return boundingOffset(this.nativeElement(el));
+        return boundingOffset(el);
     }
     getFontStyles(el) {
         const window = this.getWindow();
         if (!window || !el) {
             return [];
         }
-        const computedStyles = window.getComputedStyle(this.nativeElement(el));
+        const computedStyles = window.getComputedStyle(el);
         return STYLES.map(font => ({ key: font, value: computedStyles[font] }));
     }
     getWindow() {
@@ -55,7 +55,7 @@ let DOMService = class DOMService {
         if (!el) {
             return null;
         }
-        return offset(this.nativeElement(el));
+        return offset(el);
     }
     offsetAtPoint(el, currentLocation) {
         if (!el) {
@@ -85,7 +85,7 @@ let DOMService = class DOMService {
         if (!element || !popup) {
             return null;
         }
-        return positionWithScroll(this.nativeElement(element), this.nativeElement(popup), scale);
+        return positionWithScroll(element, this.nativeElement(popup), scale);
     }
     removeScroll(rect, scroll) {
         return removeScroll(rect, scroll);
@@ -97,7 +97,7 @@ let DOMService = class DOMService {
         return scrollPosition(this.nativeElement(el));
     }
     scrollableParents(el) {
-        return scrollableParents(this.nativeElement(el));
+        return scrollableParents(el);
     }
     stackingElementOffset(el) {
         const relativeContextElement = this.getRelativeContextElement(el);
@@ -136,7 +136,7 @@ let DOMService = class DOMService {
         return getWindowViewPort(this.nativeElement(el));
     }
     zIndex(anchor, container) {
-        return zIndex(this.nativeElement(anchor), this.nativeElement(container));
+        return zIndex(anchor, this.nativeElement(container));
     }
     zoomLevel() {
         if (!isDocumentAvailable() || !isWindowAvailable()) {

package/dist/es2015/services/scrollable.service.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, NgZone } from '@angular/core';
+import { NgZone } from '@angular/core';
 import { DOMService } from './dom.service';
 /**
  * @hidden
@@ -17,8 +17,8 @@ export declare class ScrollableService {
     private element;
     private subscription;
     constructor(_dom: DOMService, _zone: NgZone);
-    forElement(element: ElementRef): ScrollableService;
+    forElement(element: HTMLElement): ScrollableService;
     subscribe(callback: Function): void;
     unsubscribe(): void;
-    isVisible(elem: any, container: any): boolean;
+    isVisible(elem: HTMLElement, container: any): boolean;
 }

package/dist/es2015/services/scrollable.service.js

@@ -30,7 +30,6 @@ let ScrollableService = class ScrollableService {
         if (!callback || !isDocumentAvailable() || !this.element) {
             return;
         }
-        const nativeElement = this._dom.nativeElement(this.element);
         const parents = this._dom.scrollableParents(this.element);
         this._zone.runOutsideAngular(() => {
             const observables = parents.map(p => fromEvent(p, "scroll").pipe(auditTime(FRAME_DURATION)));
@@ -40,7 +39,7 @@ let ScrollableService = class ScrollableService {
                 const isDocument = target === document;
                 const isWindow = target === window;
                 if (isParent || isDocument || isWindow) {
-                    callback(this.isVisible(nativeElement, target));
+                    callback(this.isVisible(this.element, target));
                 }
             };
             this.subscription = merge(...observables).subscribe(subscriber);
@@ -54,7 +53,7 @@ let ScrollableService = class ScrollableService {
     }
     isVisible(elem, container) {
         const elemRect = this._dom.boundingOffset(elem);
-        const containerRect = this._dom.boundingOffset(container);
+        const containerRect = this._dom.boundingOffset(this._dom.nativeElement(container));
         if (THRESHOLD_DIFF < (containerRect.top - elemRect.bottom)) {
             return false;
         }

package/dist/fesm2015/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __param, __metadata } from 'tslib';
-import { Injectable, InjectionToken, Inject, Optional, NgZone, EventEmitter, isDevMode, Input, ElementRef, Output, ViewChild, Component, Renderer2, TemplateRef, ApplicationRef, ComponentFactoryResolver, Injector, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, Inject, Optional, NgZone, EventEmitter, isDevMode, Input, Output, ViewChild, ElementRef, Component, Renderer2, TemplateRef, ApplicationRef, ComponentFactoryResolver, Injector, NgModule } from '@angular/core';
 import { siblingContainer, parents, addScroll, align, boundingOffset, offset, positionWithScroll, removeScroll, restrictToView, scrollPosition, getWindowViewPort } from '@progress/kendo-popup-common';
 import { isDocumentAvailable, hasObservers, ResizeSensorComponent, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { fromEvent, merge, from } from 'rxjs';
@@ -173,14 +173,14 @@ let DOMService = class DOMService {
         return align(settings);
     }
     boundingOffset(el) {
-        return boundingOffset(this.nativeElement(el));
+        return boundingOffset(el);
     }
     getFontStyles(el) {
         const window = this.getWindow();
         if (!window || !el) {
             return [];
         }
-        const computedStyles = window.getComputedStyle(this.nativeElement(el));
+        const computedStyles = window.getComputedStyle(el);
         return STYLES.map(font => ({ key: font, value: computedStyles[font] }));
     }
     getWindow() {
@@ -196,7 +196,7 @@ let DOMService = class DOMService {
         if (!el) {
             return null;
         }
-        return offset(this.nativeElement(el));
+        return offset(el);
     }
     offsetAtPoint(el, currentLocation) {
         if (!el) {
@@ -226,7 +226,7 @@ let DOMService = class DOMService {
         if (!element || !popup) {
             return null;
         }
-        return positionWithScroll(this.nativeElement(element), this.nativeElement(popup), scale);
+        return positionWithScroll(element, this.nativeElement(popup), scale);
     }
     removeScroll(rect, scroll) {
         return removeScroll(rect, scroll);
@@ -238,7 +238,7 @@ let DOMService = class DOMService {
         return scrollPosition(this.nativeElement(el));
     }
     scrollableParents(el) {
-        return scrollableParents(this.nativeElement(el));
+        return scrollableParents(el);
     }
     stackingElementOffset(el) {
         const relativeContextElement = this.getRelativeContextElement(el);
@@ -277,7 +277,7 @@ let DOMService = class DOMService {
         return getWindowViewPort(this.nativeElement(el));
     }
     zIndex(anchor, container) {
-        return zIndex(this.nativeElement(anchor), this.nativeElement(container));
+        return zIndex(anchor, this.nativeElement(container));
     }
     zoomLevel() {
         if (!isDocumentAvailable() || !isWindowAvailable()) {
@@ -323,7 +323,7 @@ let AlignService = class AlignService {
         const scale = this.scale || 1;
         const fixedMode = positionMode === 'fixed' || !this._dom.hasOffsetParent(element);
         const anchorRect = fixedMode ? this.absoluteRect(anchor, element, offset$$1, scale) : this.relativeRect(anchor, element, offset$$1, scale);
-        const elementRect = scaleRect(this._dom.offset(element), scale);
+        const elementRect = scaleRect(this._dom.offset(element.nativeElement), scale);
         const result = this._dom.align({
             anchorAlign: anchorAlign,
             anchorRect: anchorRect,
@@ -459,7 +459,6 @@ let ScrollableService = class ScrollableService {
         if (!callback || !isDocumentAvailable() || !this.element) {
             return;
         }
-        const nativeElement = this._dom.nativeElement(this.element);
         const parents$$1 = this._dom.scrollableParents(this.element);
         this._zone.runOutsideAngular(() => {
             const observables = parents$$1.map(p => fromEvent(p, "scroll").pipe(auditTime(FRAME_DURATION)));
@@ -469,7 +468,7 @@ let ScrollableService = class ScrollableService {
                 const isDocument = target === document;
                 const isWindow = target === window;
                 if (isParent || isDocument || isWindow) {
-                    callback(this.isVisible(nativeElement, target));
+                    callback(this.isVisible(this.element, target));
                 }
             };
             this.subscription = merge(...observables).subscribe(subscriber);
@@ -483,7 +482,7 @@ let ScrollableService = class ScrollableService {
     }
     isVisible(elem, container) {
         const elemRect = this._dom.boundingOffset(elem);
-        const containerRect = this._dom.boundingOffset(container);
+        const containerRect = this._dom.boundingOffset(this._dom.nativeElement(container));
         if (THRESHOLD_DIFF < (containerRect.top - elemRect.bottom)) {
             return false;
         }
@@ -639,7 +638,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-popup',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1645783353,
+    publishDate: 1647429230,
     version: '',
     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'
 };
@@ -833,7 +832,7 @@ let PopupComponent = class PopupComponent {
         this._resizeService.subscribe(this.reposition);
         this.animationSubscriptions = this.animationService.start.subscribe(this.onAnimationStart.bind(this));
         this.animationSubscriptions.add(this.animationService.end.subscribe(this.onAnimationEnd.bind(this)));
-        this._scrollableService.forElement(this.anchor || this.container).subscribe(this.onScroll.bind(this));
+        this._scrollableService.forElement(this.domService.nativeElement(this.anchor) || this.container.nativeElement).subscribe(this.onScroll.bind(this));
         this.currentOffset = DEFAULT_OFFSET;
         this.setZIndex();
         this.copyFontStyles();
@@ -903,7 +902,7 @@ let PopupComponent = class PopupComponent {
     }
     setZIndex() {
         if (this.anchor) {
-            this.setContainerStyle('z-index', String(this.domService.zIndex(this.anchor, this.container)));
+            this.setContainerStyle('z-index', String(this.domService.zIndex(this.domService.nativeElement(this.anchor), this.container)));
         }
     }
     reposition() {
@@ -924,7 +923,7 @@ let PopupComponent = class PopupComponent {
     }
     position() {
         const alignedOffset = this._alignService.alignElement({
-            anchor: this.anchor,
+            anchor: this.domService.nativeElement(this.anchor),
             anchorAlign: this.anchorAlign,
             element: this.container,
             elementAlign: this.popupAlign,
@@ -933,7 +932,7 @@ let PopupComponent = class PopupComponent {
             positionMode: this.positionMode
         });
         return this._positionService.positionElement({
-            anchor: this.anchor,
+            anchor: this.domService.nativeElement(this.anchor),
             anchorAlign: this.anchorAlign,
             collisions: this.collision,
             currentLocation: alignedOffset,
@@ -957,7 +956,7 @@ let PopupComponent = class PopupComponent {
         if (!this.anchor || !this.copyAnchorStyles) {
             return;
         }
-        this.domService.getFontStyles(this.anchor)
+        this.domService.getFontStyles(this.domService.nativeElement(this.anchor))
             .forEach(s => this.setContainerStyle(s.key, s.value));
     }
     updateFixedClass() {
@@ -979,7 +978,7 @@ __decorate([
 ], PopupComponent.prototype, "animate", void 0);
 __decorate([
     Input(),
-    __metadata("design:type", ElementRef)
+    __metadata("design:type", Object)
 ], PopupComponent.prototype, "anchor", void 0);
 __decorate([
     Input(),

package/dist/fesm5/index.js

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __param, __metadata } from 'tslib';
-import { Injectable, InjectionToken, Inject, Optional, NgZone, isDevMode, EventEmitter, Input, ElementRef, Output, ViewChild, Component, Renderer2, TemplateRef, ApplicationRef, ComponentFactoryResolver, Injector, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, Inject, Optional, NgZone, isDevMode, EventEmitter, Input, Output, ViewChild, ElementRef, Component, Renderer2, TemplateRef, ApplicationRef, ComponentFactoryResolver, Injector, NgModule } from '@angular/core';
 import { siblingContainer, parents, addScroll, align, boundingOffset, offset, positionWithScroll, removeScroll, restrictToView, scrollPosition, getWindowViewPort } from '@progress/kendo-popup-common';
 import { isDocumentAvailable, hasObservers, ResizeSensorComponent, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { fromEvent, merge, from } from 'rxjs';
@@ -179,14 +179,14 @@ var DOMService = /** @class */ (function () {
         return align(settings);
     };
     DOMService.prototype.boundingOffset = function (el) {
-        return boundingOffset(this.nativeElement(el));
+        return boundingOffset(el);
     };
     DOMService.prototype.getFontStyles = function (el) {
         var window = this.getWindow();
         if (!window || !el) {
             return [];
         }
-        var computedStyles = window.getComputedStyle(this.nativeElement(el));
+        var computedStyles = window.getComputedStyle(el);
         return STYLES.map(function (font) { return ({ key: font, value: computedStyles[font] }); });
     };
     DOMService.prototype.getWindow = function () {
@@ -202,7 +202,7 @@ var DOMService = /** @class */ (function () {
         if (!el) {
             return null;
         }
-        return offset(this.nativeElement(el));
+        return offset(el);
     };
     DOMService.prototype.offsetAtPoint = function (el, currentLocation) {
         if (!el) {
@@ -233,7 +233,7 @@ var DOMService = /** @class */ (function () {
         if (!element || !popup) {
             return null;
         }
-        return positionWithScroll(this.nativeElement(element), this.nativeElement(popup), scale);
+        return positionWithScroll(element, this.nativeElement(popup), scale);
     };
     DOMService.prototype.removeScroll = function (rect, scroll) {
         return removeScroll(rect, scroll);
@@ -245,7 +245,7 @@ var DOMService = /** @class */ (function () {
         return scrollPosition(this.nativeElement(el));
     };
     DOMService.prototype.scrollableParents = function (el) {
-        return scrollableParents(this.nativeElement(el));
+        return scrollableParents(el);
     };
     DOMService.prototype.stackingElementOffset = function (el) {
         var relativeContextElement = this.getRelativeContextElement(el);
@@ -284,7 +284,7 @@ var DOMService = /** @class */ (function () {
         return getWindowViewPort(this.nativeElement(el));
     };
     DOMService.prototype.zIndex = function (anchor, container) {
-        return zIndex(this.nativeElement(anchor), this.nativeElement(container));
+        return zIndex(anchor, this.nativeElement(container));
     };
     DOMService.prototype.zoomLevel = function () {
         if (!isDocumentAvailable() || !isWindowAvailable()) {
@@ -332,7 +332,7 @@ var AlignService = /** @class */ (function () {
         var scale = this.scale || 1;
         var fixedMode = positionMode === 'fixed' || !this._dom.hasOffsetParent(element);
         var anchorRect = fixedMode ? this.absoluteRect(anchor, element, offset$$1, scale) : this.relativeRect(anchor, element, offset$$1, scale);
-        var elementRect = scaleRect(this._dom.offset(element), scale);
+        var elementRect = scaleRect(this._dom.offset(element.nativeElement), scale);
         var result = this._dom.align({
             anchorAlign: anchorAlign,
             anchorRect: anchorRect,
@@ -474,7 +474,6 @@ var ScrollableService = /** @class */ (function () {
         if (!callback || !isDocumentAvailable() || !this.element) {
             return;
         }
-        var nativeElement = this._dom.nativeElement(this.element);
         var parents$$1 = this._dom.scrollableParents(this.element);
         this._zone.runOutsideAngular(function () {
             var observables = parents$$1.map(function (p) { return fromEvent(p, "scroll").pipe(auditTime(FRAME_DURATION)); });
@@ -484,7 +483,7 @@ var ScrollableService = /** @class */ (function () {
                 var isDocument = target === document;
                 var isWindow = target === window;
                 if (isParent || isDocument || isWindow) {
-                    callback(_this.isVisible(nativeElement, target));
+                    callback(_this.isVisible(_this.element, target));
                 }
             };
             _this.subscription = merge.apply(void 0, observables).subscribe(subscriber);
@@ -498,7 +497,7 @@ var ScrollableService = /** @class */ (function () {
     };
     ScrollableService.prototype.isVisible = function (elem, container) {
         var elemRect = this._dom.boundingOffset(elem);
-        var containerRect = this._dom.boundingOffset(container);
+        var containerRect = this._dom.boundingOffset(this._dom.nativeElement(container));
         if (THRESHOLD_DIFF < (containerRect.top - elemRect.bottom)) {
             return false;
         }
@@ -657,7 +656,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-popup',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1645783353,
+    publishDate: 1647429230,
     version: '',
     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'
 };
@@ -851,7 +850,7 @@ var PopupComponent = /** @class */ (function () {
         this._resizeService.subscribe(this.reposition);
         this.animationSubscriptions = this.animationService.start.subscribe(this.onAnimationStart.bind(this));
         this.animationSubscriptions.add(this.animationService.end.subscribe(this.onAnimationEnd.bind(this)));
-        this._scrollableService.forElement(this.anchor || this.container).subscribe(this.onScroll.bind(this));
+        this._scrollableService.forElement(this.domService.nativeElement(this.anchor) || this.container.nativeElement).subscribe(this.onScroll.bind(this));
         this.currentOffset = DEFAULT_OFFSET;
         this.setZIndex();
         this.copyFontStyles();
@@ -927,7 +926,7 @@ var PopupComponent = /** @class */ (function () {
     });
     PopupComponent.prototype.setZIndex = function () {
         if (this.anchor) {
-            this.setContainerStyle('z-index', String(this.domService.zIndex(this.anchor, this.container)));
+            this.setContainerStyle('z-index', String(this.domService.zIndex(this.domService.nativeElement(this.anchor), this.container)));
         }
     };
     PopupComponent.prototype.reposition = function () {
@@ -949,7 +948,7 @@ var PopupComponent = /** @class */ (function () {
     };
     PopupComponent.prototype.position = function () {
         var alignedOffset = this._alignService.alignElement({
-            anchor: this.anchor,
+            anchor: this.domService.nativeElement(this.anchor),
             anchorAlign: this.anchorAlign,
             element: this.container,
             elementAlign: this.popupAlign,
@@ -958,7 +957,7 @@ var PopupComponent = /** @class */ (function () {
             positionMode: this.positionMode
         });
         return this._positionService.positionElement({
-            anchor: this.anchor,
+            anchor: this.domService.nativeElement(this.anchor),
             anchorAlign: this.anchorAlign,
             collisions: this.collision,
             currentLocation: alignedOffset,
@@ -984,7 +983,7 @@ var PopupComponent = /** @class */ (function () {
         if (!this.anchor || !this.copyAnchorStyles) {
             return;
         }
-        this.domService.getFontStyles(this.anchor)
+        this.domService.getFontStyles(this.domService.nativeElement(this.anchor))
             .forEach(function (s) { return _this.setContainerStyle(s.key, s.value); });
     };
     PopupComponent.prototype.updateFixedClass = function () {
@@ -1005,7 +1004,7 @@ var PopupComponent = /** @class */ (function () {
     ], PopupComponent.prototype, "animate", void 0);
     __decorate([
         Input(),
-        __metadata("design:type", ElementRef)
+        __metadata("design:type", Object)
     ], PopupComponent.prototype, "anchor", void 0);
     __decorate([
         Input(),

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-popup',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1645783353,
+    publishDate: 1647429230,
     version: '',
     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/dist/npm/popup.component.js

@@ -206,7 +206,7 @@ var PopupComponent = /** @class */ (function () {
         this._resizeService.subscribe(this.reposition);
         this.animationSubscriptions = this.animationService.start.subscribe(this.onAnimationStart.bind(this));
         this.animationSubscriptions.add(this.animationService.end.subscribe(this.onAnimationEnd.bind(this)));
-        this._scrollableService.forElement(this.anchor || this.container).subscribe(this.onScroll.bind(this));
+        this._scrollableService.forElement(this.domService.nativeElement(this.anchor) || this.container.nativeElement).subscribe(this.onScroll.bind(this));
         this.currentOffset = DEFAULT_OFFSET;
         this.setZIndex();
         this.copyFontStyles();
@@ -282,7 +282,7 @@ var PopupComponent = /** @class */ (function () {
     });
     PopupComponent.prototype.setZIndex = function () {
         if (this.anchor) {
-            this.setContainerStyle('z-index', String(this.domService.zIndex(this.anchor, this.container)));
+            this.setContainerStyle('z-index', String(this.domService.zIndex(this.domService.nativeElement(this.anchor), this.container)));
         }
     };
     PopupComponent.prototype.reposition = function () {
@@ -304,7 +304,7 @@ var PopupComponent = /** @class */ (function () {
     };
     PopupComponent.prototype.position = function () {
         var alignedOffset = this._alignService.alignElement({
-            anchor: this.anchor,
+            anchor: this.domService.nativeElement(this.anchor),
             anchorAlign: this.anchorAlign,
             element: this.container,
             elementAlign: this.popupAlign,
@@ -313,7 +313,7 @@ var PopupComponent = /** @class */ (function () {
             positionMode: this.positionMode
         });
         return this._positionService.positionElement({
-            anchor: this.anchor,
+            anchor: this.domService.nativeElement(this.anchor),
             anchorAlign: this.anchorAlign,
             collisions: this.collision,
             currentLocation: alignedOffset,
@@ -339,7 +339,7 @@ var PopupComponent = /** @class */ (function () {
         if (!this.anchor || !this.copyAnchorStyles) {
             return;
         }
-        this.domService.getFontStyles(this.anchor)
+        this.domService.getFontStyles(this.domService.nativeElement(this.anchor))
             .forEach(function (s) { return _this.setContainerStyle(s.key, s.value); });
     };
     PopupComponent.prototype.updateFixedClass = function () {
@@ -360,7 +360,7 @@ var PopupComponent = /** @class */ (function () {
     ], PopupComponent.prototype, "animate", void 0);
     tslib_1.__decorate([
         core_1.Input(),
-        tslib_1.__metadata("design:type", core_1.ElementRef)
+        tslib_1.__metadata("design:type", Object)
     ], PopupComponent.prototype, "anchor", void 0);
     tslib_1.__decorate([
         core_1.Input(),

package/dist/npm/services/align.service.js

@@ -23,7 +23,7 @@ var AlignService = /** @class */ (function () {
         var scale = this.scale || 1;
         var fixedMode = positionMode === 'fixed' || !this._dom.hasOffsetParent(element);
         var anchorRect = fixedMode ? this.absoluteRect(anchor, element, offset, scale) : this.relativeRect(anchor, element, offset, scale);
-        var elementRect = util_1.scaleRect(this._dom.offset(element), scale);
+        var elementRect = util_1.scaleRect(this._dom.offset(element.nativeElement), scale);
         var result = this._dom.align({
             anchorAlign: anchorAlign,
             anchorRect: anchorRect,

package/dist/npm/services/dom.service.js

@@ -36,14 +36,14 @@ var DOMService = /** @class */ (function () {
         return kendo_popup_common_1.align(settings);
     };
     DOMService.prototype.boundingOffset = function (el) {
-        return kendo_popup_common_1.boundingOffset(this.nativeElement(el));
+        return kendo_popup_common_1.boundingOffset(el);
     };
     DOMService.prototype.getFontStyles = function (el) {
         var window = this.getWindow();
         if (!window || !el) {
             return [];
         }
-        var computedStyles = window.getComputedStyle(this.nativeElement(el));
+        var computedStyles = window.getComputedStyle(el);
         return STYLES.map(function (font) { return ({ key: font, value: computedStyles[font] }); });
     };
     DOMService.prototype.getWindow = function () {
@@ -59,7 +59,7 @@ var DOMService = /** @class */ (function () {
         if (!el) {
             return null;
         }
-        return kendo_popup_common_1.offset(this.nativeElement(el));
+        return kendo_popup_common_1.offset(el);
     };
     DOMService.prototype.offsetAtPoint = function (el, currentLocation) {
         if (!el) {
@@ -90,7 +90,7 @@ var DOMService = /** @class */ (function () {
         if (!element || !popup) {
             return null;
         }
-        return kendo_popup_common_1.positionWithScroll(this.nativeElement(element), this.nativeElement(popup), scale);
+        return kendo_popup_common_1.positionWithScroll(element, this.nativeElement(popup), scale);
     };
     DOMService.prototype.removeScroll = function (rect, scroll) {
         return kendo_popup_common_1.removeScroll(rect, scroll);
@@ -102,7 +102,7 @@ var DOMService = /** @class */ (function () {
         return kendo_popup_common_1.scrollPosition(this.nativeElement(el));
     };
     DOMService.prototype.scrollableParents = function (el) {
-        return util_1.scrollableParents(this.nativeElement(el));
+        return util_1.scrollableParents(el);
     };
     DOMService.prototype.stackingElementOffset = function (el) {
         var relativeContextElement = this.getRelativeContextElement(el);
@@ -141,7 +141,7 @@ var DOMService = /** @class */ (function () {
         return kendo_popup_common_1.getWindowViewPort(this.nativeElement(el));
     };
     DOMService.prototype.zIndex = function (anchor, container) {
-        return util_1.zIndex(this.nativeElement(anchor), this.nativeElement(container));
+        return util_1.zIndex(anchor, this.nativeElement(container));
     };
     DOMService.prototype.zoomLevel = function () {
         if (!kendo_angular_common_1.isDocumentAvailable() || !util_1.isWindowAvailable()) {

package/dist/npm/services/scrollable.service.js

@@ -33,7 +33,6 @@ var ScrollableService = /** @class */ (function () {
         if (!callback || !kendo_angular_common_1.isDocumentAvailable() || !this.element) {
             return;
         }
-        var nativeElement = this._dom.nativeElement(this.element);
         var parents = this._dom.scrollableParents(this.element);
         this._zone.runOutsideAngular(function () {
             var observables = parents.map(function (p) { return rxjs_1.fromEvent(p, "scroll").pipe(operators_1.auditTime(util_1.FRAME_DURATION)); });
@@ -43,7 +42,7 @@ var ScrollableService = /** @class */ (function () {
                 var isDocument = target === document;
                 var isWindow = target === window;
                 if (isParent || isDocument || isWindow) {
-                    callback(_this.isVisible(nativeElement, target));
+                    callback(_this.isVisible(_this.element, target));
                 }
             };
             _this.subscription = rxjs_1.merge.apply(void 0, observables).subscribe(subscriber);
@@ -57,7 +56,7 @@ var ScrollableService = /** @class */ (function () {
     };
     ScrollableService.prototype.isVisible = function (elem, container) {
         var elemRect = this._dom.boundingOffset(elem);
-        var containerRect = this._dom.boundingOffset(container);
+        var containerRect = this._dom.boundingOffset(this._dom.nativeElement(container));
         if (exports.THRESHOLD_DIFF < (containerRect.top - elemRect.bottom)) {
             return false;
         }