@progress/kendo-angular-popup 5.0.0-next.202110151001 → 5.0.0-next.202203281120

package/esm2015/services/animation.service.js

@@ -13,7 +13,6 @@ const UP = 'up';
 const DEFAULT_TYPE = 'slide';
 const DEFAULT_DURATION = 100;
 const animationTypes = {};
-/* eslint-disable object-literal-sort-keys */
 animationTypes.expand = (direction) => {
     const scale = direction === UP || direction === DOWN ? 'scaleY' : 'scaleX';
     const startScale = 0;
@@ -129,8 +128,8 @@ export class AnimationService {
         }
     }
 }
-AnimationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: AnimationService, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
-AnimationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: AnimationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: AnimationService, decorators: [{
+AnimationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AnimationService, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
+AnimationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AnimationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AnimationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.AnimationBuilder }]; } });

package/esm2015/services/dom.service.js

@@ -32,14 +32,14 @@ export 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 @@ export class DOMService {
         if (!el) {
             return null;
         }
-        return offset(this.nativeElement(el));
+        return offset(el);
     }
     offsetAtPoint(el, currentLocation) {
         if (!el) {
@@ -70,7 +70,7 @@ export class DOMService {
         element.style.left = left;
         element.style.top = top;
         // prevents elements with transition to be animated because of the change
-        // eslint-disable -next-line:no-unused-expression
+        // eslint-disable-next-line no-unused-expressions
         element.offsetHeight;
         element.style.transition = transition;
         return currentOffset;
@@ -85,7 +85,7 @@ export 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 @@ export 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 @@ export 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()) {
@@ -148,8 +148,8 @@ export class DOMService {
         return this.zoomLevel() > 1;
     }
 }
-DOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: DOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: DOMService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: DOMService, decorators: [{
+DOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DOMService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DOMService, decorators: [{
             type: Injectable
         }] });

package/esm2015/services/position.service.js

@@ -43,9 +43,9 @@ export class PositionService {
         };
     }
 }
-PositionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PositionService, deps: [{ token: i1.DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-PositionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PositionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PositionService, decorators: [{
+PositionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PositionService, deps: [{ token: i1.DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+PositionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PositionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PositionService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.DOMService }, { type: undefined, decorators: [{
                     type: Inject,

package/esm2015/services/resize.service.js

@@ -37,8 +37,8 @@ export class ResizeService {
         return this.subscription && this.subscription.closed;
     }
 }
-ResizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ResizeService, deps: [{ token: i1.DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ResizeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ResizeService, decorators: [{
+ResizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizeService, deps: [{ token: i1.DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizeService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.DOMService }, { type: i0.NgZone }]; } });

package/esm2015/services/scrollable.service.js

@@ -30,7 +30,6 @@ export 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 @@ export 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 @@ export 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;
         }
@@ -70,8 +69,8 @@ export class ScrollableService {
         return true;
     }
 }
-ScrollableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ScrollableService, deps: [{ token: i1.DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ScrollableService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ScrollableService, decorators: [{
+ScrollableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollableService, deps: [{ token: i1.DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollableService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollableService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.DOMService }, { type: i0.NgZone }]; } });

package/fesm2015/kendo-angular-popup.js

@@ -211,14 +211,14 @@ 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() {
@@ -234,7 +234,7 @@ class DOMService {
         if (!el) {
             return null;
         }
-        return offset(this.nativeElement(el));
+        return offset(el);
     }
     offsetAtPoint(el, currentLocation) {
         if (!el) {
@@ -249,7 +249,7 @@ class DOMService {
         element.style.left = left;
         element.style.top = top;
         // prevents elements with transition to be animated because of the change
-        // eslint-disable -next-line:no-unused-expression
+        // eslint-disable-next-line no-unused-expressions
         element.offsetHeight;
         element.style.transition = transition;
         return currentOffset;
@@ -264,7 +264,7 @@ 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);
@@ -276,7 +276,7 @@ class DOMService {
         return scrollPosition(this.nativeElement(el));
     }
     scrollableParents(el) {
-        return scrollableParents(this.nativeElement(el));
+        return scrollableParents(el);
     }
     stackingElementOffset(el) {
         const relativeContextElement = this.getRelativeContextElement(el);
@@ -315,7 +315,7 @@ 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()) {
@@ -327,9 +327,9 @@ class DOMService {
         return this.zoomLevel() > 1;
     }
 }
-DOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: DOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: DOMService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: DOMService, decorators: [{
+DOMService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DOMService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DOMService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DOMService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DOMService, decorators: [{
             type: Injectable
         }] });
 
@@ -346,7 +346,7 @@ 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,
@@ -380,9 +380,9 @@ class AlignService {
         return scaleRect(rect, scale);
     }
 }
-AlignService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: AlignService, deps: [{ token: DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-AlignService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: AlignService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: AlignService, decorators: [{
+AlignService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AlignService, deps: [{ token: DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+AlignService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AlignService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AlignService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: DOMService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -427,9 +427,9 @@ class PositionService {
         };
     }
 }
-PositionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PositionService, deps: [{ token: DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-PositionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PositionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PositionService, decorators: [{
+PositionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PositionService, deps: [{ token: DOMService }, { token: SCALE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+PositionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PositionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PositionService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: DOMService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -466,9 +466,9 @@ class ResizeService {
         return this.subscription && this.subscription.closed;
     }
 }
-ResizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ResizeService, deps: [{ token: DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ResizeService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ResizeService, decorators: [{
+ResizeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizeService, deps: [{ token: DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ResizeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ResizeService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: DOMService }, { type: i0.NgZone }]; } });
 
@@ -493,7 +493,6 @@ 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)));
@@ -503,7 +502,7 @@ 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);
@@ -517,7 +516,7 @@ 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;
         }
@@ -533,9 +532,9 @@ class ScrollableService {
         return true;
     }
 }
-ScrollableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ScrollableService, deps: [{ token: DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-ScrollableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ScrollableService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: ScrollableService, decorators: [{
+ScrollableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollableService, deps: [{ token: DOMService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+ScrollableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollableService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ScrollableService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: DOMService }, { type: i0.NgZone }]; } });
 
@@ -546,7 +545,6 @@ const UP = 'up';
 const DEFAULT_TYPE = 'slide';
 const DEFAULT_DURATION = 100;
 const animationTypes = {};
-/* eslint-disable object-literal-sort-keys */
 animationTypes.expand = (direction) => {
     const scale = direction === UP || direction === DOWN ? 'scaleY' : 'scaleX';
     const startScale = 0;
@@ -662,9 +660,9 @@ class AnimationService {
         }
     }
 }
-AnimationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: AnimationService, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
-AnimationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: AnimationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: AnimationService, decorators: [{
+AnimationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AnimationService, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Injectable });
+AnimationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AnimationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AnimationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.AnimationBuilder }]; } });
 
@@ -675,7 +673,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-popup',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1634292003,
+    publishDate: 1648466372,
     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'
 };
@@ -869,11 +867,12 @@ 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();
         this.updateFixedClass();
+        this.reposition();
     }
     ngOnChanges(changes) {
         if (changes.copyAnchorStyles) {
@@ -884,7 +883,6 @@ class PopupComponent {
         }
     }
     ngAfterViewInit() {
-        this.reposition();
         if (!this.animate) {
             this.resolvedPromise.then(() => {
                 this.onAnimationEnd();
@@ -939,7 +937,7 @@ 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() {
@@ -960,7 +958,7 @@ 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,
@@ -969,7 +967,7 @@ 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,
@@ -993,7 +991,7 @@ 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() {
@@ -1009,8 +1007,8 @@ class PopupComponent {
         }
     }
 }
-PopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", 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 });
-PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.10", type: PopupComponent, 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: `
+PopupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", 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 });
+PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PopupComponent, 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-popup" [ngClass]="popupClass" #container>
             <ng-content></ng-content>
             <ng-template [ngTemplateOutlet]="content" [ngIf]="content"></ng-template>
@@ -1018,7 +1016,7 @@ PopupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             </kendo-resize-sensor>
         </div>
      `, isInline: true, components: [{ type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendo-popup',
@@ -1298,9 +1296,9 @@ class PopupService {
         };
     }
 }
-PopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PopupService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-PopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PopupService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PopupService, decorators: [{
+PopupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupService, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: POPUP_CONTAINER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+PopupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ElementRef, decorators: [{
                     type: Inject,
@@ -1343,10 +1341,10 @@ const POPUP_DIRECTIVES = [PopupComponent];
  */
 class PopupModule {
 }
-PopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PopupModule, declarations: [PopupComponent], imports: [CommonModule, ResizeSensorModule], exports: [PopupComponent] });
-PopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PopupModule, providers: [PopupService], imports: [[CommonModule, ResizeSensorModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.10", ngImport: i0, type: PopupModule, decorators: [{
+PopupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PopupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupModule, declarations: [PopupComponent], imports: [CommonModule, ResizeSensorModule], exports: [PopupComponent] });
+PopupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupModule, providers: [PopupService], imports: [[CommonModule, ResizeSensorModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [POPUP_DIRECTIVES],

package/main.d.ts

@@ -9,7 +9,7 @@ export { Margin } from './models/margin.interface';
 export { PopupSettings } from './models/popup-settings';
 export { PopupRef } from './models/popup-ref';
 export { PositionMode } from './models/position-mode';
-export { PopupAnimation } from './models/popup-animation.interface';
+export { PopupAnimation, AnimationType, AnimationDirection } from './models/popup-animation.interface';
 export { PopupService, POPUP_CONTAINER } from './popup.service';
 export { PopupComponent } from './popup.component';
 export { PopupModule } from './popup.module';

package/models/align-element-settings.interface.d.ts

@@ -9,7 +9,7 @@ import { PositionMode } from './position-mode';
  * @hidden
  */
 export interface AlignElementSettings {
-    anchor?: ElementRef;
+    anchor?: HTMLElement;
     anchorAlign: AlignStrategy;
     element: ElementRef;
     elementAlign: AlignStrategy;

package/models/popup-animation.interface.d.ts

@@ -10,7 +10,7 @@ export interface PopupAnimation {
      * The type of the animation.
      * @default 'slide'
      */
-    type?: 'slide' | 'expand' | 'zoom' | 'fade';
+    type?: AnimationType;
     /**
      * The animation duration in milliseconds.
      * @default 100
@@ -20,5 +20,7 @@ export interface PopupAnimation {
      * The animation direction. Applicable if the type is set to `slide` or `expand`.
      * @default 'down'
      */
-    direction: 'down' | 'up' | 'left' | 'right';
+    direction: AnimationDirection;
 }
+export declare type AnimationType = 'slide' | 'expand' | 'zoom' | 'fade';
+export declare type AnimationDirection = 'down' | 'up' | 'left' | 'right';

package/models/popup-settings.d.ts

@@ -24,7 +24,7 @@ export interface PopupSettings {
     /**
      * Specifies the element which will be used as an anchor. The Popup opens next to that element.
      */
-    anchor?: ElementRef;
+    anchor?: ElementRef | HTMLElement;
     /**
      * Defines the container to which the Popup will be appended.
      */

package/models/position-element-settings.interface.d.ts

@@ -9,7 +9,7 @@ import { PositionMode } from './position-mode';
  * @hidden
  */
 export interface PositionElementSettings {
-    anchor?: ElementRef;
+    anchor?: HTMLElement;
     anchorAlign: AlignStrategy;
     collisions: CollisionStrategy;
     currentLocation: OffsetPosition;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-popup",
-  "version": "5.0.0-next.202110151001",
+  "version": "5.0.0-next.202203281120",
   "description": "Kendo UI Angular Popup component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@progress/kendo-popup-common": "^1.7.0",
-    "@progress/kendo-schematics": "^1.0.0",
+    "@progress/kendo-schematics": "^2.0.0",
     "tslib": "^2.3.1"
   },
   "peerDependencies": {

package/popup.component.d.ts

@@ -55,7 +55,7 @@ export declare class PopupComponent implements AfterViewInit, OnInit, OnChanges,
      * Specifies the element that will be used as an anchor. The Popup opens next to that element.
      * ([see example]({% slug alignmentpositioning_popup %}#toc-aligning-to-components)).
      */
-    anchor: ElementRef;
+    anchor: ElementRef | HTMLElement;
     /**
      * Specifies the anchor pivot point
      * ([see example]({% slug alignmentpositioning_popup %}#toc-positioning)).

package/schematics/collection.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Adds Kendo Angular Package to the application.",
+      "factory": "./ngAdd",
+      "schema": "./ngAdd/schema.json",
+      "hidden": true,
+      "private": true
+    }
+  }
+}

package/schematics/ngAdd/index.js

@@ -0,0 +1,13 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const schematics_1 = require("@angular-devkit/schematics");
+function default_1(options) {
+    const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'PopupModule', package: 'popup' //package name, e.g grid
+     });
+    return schematics_1.externalSchematic('@progress/kendo-schematics', 'ng-add', finalOptions);
+}
+exports.default = default_1;

package/schematics/ngAdd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../tooling/schematics/ngAdd/index.ts"],"names":[],"mappings":";;AAAA,2DAKqC;AAErC,mBAAyB,OAAY;IACjC,MAAM,YAAY,mCACX,OAAO,KACV,YAAY,EAAE,aAAa,EAC3B,OAAO,EAAE,OAAO,CAAC,wBAAwB;OAC5C,CAAC;IAEF,OAAO,8BAAiB,CAAC,4BAA4B,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;AACnF,CAAC;AARD,4BAQC"}

package/schematics/ngAdd/schema.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "SchematicsKendoAngularPopup",
+  "title": "Kendo Angular Popup Options Schema",
+  "type": "object",
+  "properties": {
+    "theme": {
+       "enum": [
+         "default",
+         "bootstrap",
+         "material"
+       ],
+       "default": "default",
+       "description": "The theme to apply"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if declaring module exports the component."
+    },
+    "skipInstall": {
+      "description": "Skip installing Kendo dependency packages.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": []
+}