@progress/kendo-angular-popup - npm Package Compare versions

Comparing version 1.1.2-dev.201708091033 to 1.2.0-dev.201708230947

dist/cdn/js/kendo-angular-popup.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("tslib"),require("@angular/core"),require("rxjs/Observable"),require("rxjs/add/observable/fromEvent"),require("rxjs/add/operator/auditTime"),require("rxjs/add/observable/merge"),require("@angular/common")):"function"==typeof define&&define.amd?define(["tslib","@angular/core","rxjs/Observable","rxjs/add/observable/fromEvent","rxjs/add/operator/auditTime","rxjs/add/observable/merge","@angular/common"],t):"object"==typeof exports?exports.KendoAngularPopup=t(require("tslib"),require("@angular/core"),require("rxjs/Observable"),require("rxjs/add/observable/fromEvent"),require("rxjs/add/operator/auditTime"),require("rxjs/add/observable/merge"),require("@angular/common")):e.KendoAngularPopup=t(e.tslib,e["@angular/core"],e["rxjs/Observable"],e["rxjs/add/observable/fromEvent"],e["rxjs/add/operator/auditTime"],e["rxjs/add/observable/merge"],e["@angular/common"])}(this,function(e,t,n,o,i,r,s){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(1);t.PopupService=o.PopupService,t.POPUP_CONTAINER=o.POPUP_CONTAINER;var i=n(4);t.PopupComponent=i.PopupComponent;var r=n(16);t.PopupModule=r.PopupModule},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(4);t.POPUP_CONTAINER=new i.InjectionToken("Popup Container");var s=function(){function e(e,t,n,o){this.applicationRef=e,this.componentFactoryResolver=t,this.injector=n,this.container=o}return Object.defineProperty(e.prototype,"rootViewContainer",{get:function(){var e=this.applicationRef.components||[];if(e[0])return e[0];throw new Error("\n            View Container not found! Inject the POPUP_CONTAINER or define a specific ViewContainerRef via the appendTo option.\n            See http://www.telerik.com/kendo-angular-ui/components/popup/api/POPUP_CONTAINER/ for more details.\n        ")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"rootViewContainerNode",{get:function(){return this.container?this.container.nativeElement:this.getComponentRootNode(this.rootViewContainer)},enumerable:!0,configurable:!0}),e.prototype.open=function(e){void 0===e&&(e={});var t=this.contentFrom(e.content),n=t.component,o=t.nodes,i=this.appendPopup(o,e.appendTo),r=i.instance;return this.projectComponentInputs(i,e),n&&n.changeDetectorRef.detectChanges(),{close:function(){n?n.destroy():(i.instance.content=null,i.changeDetectorRef.detectChanges()),i.destroy()},content:n,popup:i,popupAnchorViewportLeave:r.anchorViewportLeave,popupClose:r.close,popupElement:this.getComponentRootNode(i),popupOpen:r.open}},e.prototype.appendPopup=function(e,t){var n=this.applicationRef,o=this.createComponent(r.PopupComponent,e,t);return t||(n.attachView(o.hostView),this.rootViewContainerNode.appendChild(this.getComponentRootNode(o))),o},e.prototype.getComponentRootNode=function(e){return e.hostView.rootNodes[0]},e.prototype.getComponentFactory=function(e){return this.componentFactoryResolver.resolveComponentFactory(e)},e.prototype.createComponent=function(e,t,n){var o=this.getComponentFactory(e);return n?n.createComponent(o,void 0,this.injector,t):o.create(this.injector,t)},e.prototype.projectComponentInputs=function(e,t){return Object.getOwnPropertyNames(t).filter(function(e){return"content"!==e||t.content instanceof i.TemplateRef}).map(function(n){e.instance[n]=t[n]}),e},e.prototype.contentFrom=function(e){if(!e||e instanceof i.TemplateRef)return{component:null,nodes:[[]]};var t=this.createComponent(e),n=t?[t.location.nativeElement]:[];return{component:t,nodes:[n]}},e}();s=o.__decorate([i.Injectable(),o.__param(3,i.Inject(t.POPUP_CONTAINER)),o.__param(3,i.Optional()),o.__metadata("design:paramtypes",[i.ApplicationRef,i.ComponentFactoryResolver,i.Injector,i.ElementRef])],s),t.PopupService=s},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(5),s=n(6),a=n(9),l=n(10),c=n(14),p=n(8),u={left:-1e4,top:0},f=function(){function e(e,t,n,o,r,s,a,l){this.container=e,this._alignService=t,this._domService=n,this._cdr=o,this._positionService=r,this._resizeService=s,this._scrollableService=a,this._renderer=l,this.animate=!0,this.anchorAlign={horizontal:"left",vertical:"bottom"},this.collision={horizontal:"fit",vertical:"flip"},this.popupAlign={horizontal:"left",vertical:"top"},this.offset=u,this.anchorViewportLeave=new i.EventEmitter,this.close=new i.EventEmitter,this.open=new i.EventEmitter,this.direction="down",this.currentOffset=u,this.resolvedPromised=Promise.resolve(null),this._renderer.addClass(e.nativeElement,"k-animation-container"),this._renderer.addClass(e.nativeElement,"k-animation-container-fixed")}return Object.defineProperty(e.prototype,"offsetLeft",{get:function(){return this.currentOffset.left},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"offsetTop",{get:function(){return this.currentOffset.top},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"getZIndex",{get:function(){return this.anchor?this.hostZIndex:null},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e=this.reposition.bind(this);this._resizeService.subscribe(e),this._scrollableService.forElement(this.anchor||this.container).subscribe(this.onScroll.bind(this)),this.hostZIndex=this._domService.zIndex(this.anchor,this.container)},e.prototype.ngAfterViewChecked=function(){var e=this;if(p.isDocumentAvailable()){var t=this.position(),n=t.flipped,o=t.offset,i=this.getDirection(n);(this.direction!==i||p.isDifferentOffset(this.currentOffset,o))&&this.resolvedPromised.then(function(){e.currentOffset=o,e.direction=i,e._cdr.markForCheck()})}},e.prototype.ngOnDestroy=function(){this.anchorViewportLeave.complete(),this.close.emit(),this.close.complete(),this._resizeService.unsubscribe(),this._scrollableService.unsubscribe()},e.prototype.triggerOpen=function(e){this._renderer.addClass(this.container.nativeElement,"k-animation-container-shown"),this.open.emit(),this.open.complete()},e.prototype.reposition=function(){if(p.isDocumentAvailable()){var e=this.position(),t=e.flipped,n=e.offset;this.direction=this.getDirection(t),this.currentOffset=n}},e.prototype.position=function(){var e=this._alignService.alignElement({anchor:this.anchor,anchorAlign:this.anchorAlign,element:this.container,elementAlign:this.popupAlign,offset:this.offset});return this._positionService.positionElement({anchor:this.anchor,anchorAlign:this.anchorAlign,collisions:this.collision,currentLocation:e,element:this.container,elementAlign:this.popupAlign})},e.prototype.getDirection=function(e){return this.animate?e?"up":"down":"none"},e.prototype.onScroll=function(e){e?this.reposition():this.anchorViewportLeave.emit()},e}();o.__decorate([i.Input(),o.__metadata("design:type",Boolean)],f.prototype,"animate",void 0),o.__decorate([i.Input(),o.__metadata("design:type",i.ElementRef)],f.prototype,"anchor",void 0),o.__decorate([i.Input(),o.__metadata("design:type",Object)],f.prototype,"anchorAlign",void 0),o.__decorate([i.Input(),o.__metadata("design:type",Object)],f.prototype,"collision",void 0),o.__decorate([i.Input(),o.__metadata("design:type",Object)],f.prototype,"popupAlign",void 0),o.__decorate([i.Input(),o.__metadata("design:type",Object)],f.prototype,"popupClass",void 0),o.__decorate([i.Input(),o.__metadata("design:type",Object)],f.prototype,"offset",void 0),o.__decorate([i.Output(),o.__metadata("design:type",i.EventEmitter)],f.prototype,"anchorViewportLeave",void 0),o.__decorate([i.Output(),o.__metadata("design:type",i.EventEmitter)],f.prototype,"close",void 0),o.__decorate([i.Output(),o.__metadata("design:type",i.EventEmitter)],f.prototype,"open",void 0),o.__decorate([i.HostBinding("style.left.px"),o.__metadata("design:type",Number),o.__metadata("design:paramtypes",[])],f.prototype,"offsetLeft",null),o.__decorate([i.HostBinding("style.top.px"),o.__metadata("design:type",Number),o.__metadata("design:paramtypes",[])],f.prototype,"offsetTop",null),o.__decorate([i.HostBinding("style.z-index"),o.__metadata("design:type",Number),o.__metadata("design:paramtypes",[])],f.prototype,"getZIndex",null),f=o.__decorate([i.Component({animations:[i.trigger("toggle",[i.transition("void => down, up => down",[i.style({transform:"translateY(-100%)"}),i.animate("0.1s ease-in",i.style({transform:"translateY(0)"}))]),i.transition("down => void",[i.style({transform:"translateY(0)"}),i.animate("0.1s ease-in",i.style({transform:"translateY(-100%)"}))]),i.transition("void => up, down => up",[i.style({transform:"translateY(100%)"}),i.animate("0.1s ease-in",i.style({transform:"translateY(0)"}))]),i.transition("up => void",[i.style({transform:"translateY(0)"}),i.animate("0.1s ease-in",i.style({transform:"translateY(100%)"}))])])],exportAs:"kendo-popup",providers:[r.AlignService,s.DOMService,a.PositionService,l.ResizeService,c.ScrollableService],selector:"kendo-popup",template:'\n        <div class="k-popup" [ngClass]="popupClass" [@toggle]="direction" (@toggle.done)="triggerOpen($event)">\n            <ng-content></ng-content>\n            <ng-template [ngTemplateOutlet]="content" [ngIf]="content"></ng-template>\n        </div>\n     '}),o.__metadata("design:paramtypes",[i.ElementRef,r.AlignService,s.DOMService,i.ChangeDetectorRef,a.PositionService,l.ResizeService,c.ScrollableService,i.Renderer2])],f),t.PopupComponent=f},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(6),s=n(8),a=function(){function e(e){this._dom=e}return e.prototype.alignElement=function(e){var t=e.anchor,n=e.element,o=e.anchorAlign,i=e.elementAlign,r=e.offset,a=this._dom,l=a.scrollPosition(n),c=a.offset(n),p=s.removeStackingOffset(s.eitherRect(a.offset(t),r),a.stackingElementOffset(n));return t?a.isZoomed()&&(p=a.addScroll(p,l),c=a.addScroll(c,l)):p=a.removeScroll(p,l),this._dom.align({anchorAlign:o,anchorRect:p,elementAlign:i,elementRect:c})},e}();a=o.__decorate([i.Injectable(),o.__metadata("design:paramtypes",[r.DOMService])],a),t.AlignService=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(7),s=n(8),a=function(){function e(){}return e.prototype.addOffset=function(e,t){return{left:e.left+t.left,top:e.top+t.top}},e.prototype.align=function(e){return r.align(e)},e.prototype.boundingOffset=function(e){return r.boundingOffset(this.nativeElement(e))},e.prototype.getWindow=function(){return s.isWindowAvailable()?window:null},e.prototype.isBodyOffset=function(e){return r.isBodyOffset(this.nativeElement(e))},e.prototype.offset=function(e){return e?r.offset(this.nativeElement(e)):null},e.prototype.staticOffset=function(e){if(!e)return null;var t=this.nativeElement(e),n=t.style,o=n.left,i=n.top;t.style.left="0px",t.style.top="0px";var s=r.offset(t);return t.style.left=o,t.style.top=i,s},e.prototype.nativeElement=function(e){return e?e.nativeElement||e:null},e.prototype.position=function(e){return e?r.position(this.nativeElement(e)):null},e.prototype.relativeOffset=function(e,t){return r.applyLocationOffset(this.offset(e),t,this.isBodyOffset(e))},e.prototype.addScroll=function(e,t){return r.addScroll(e,t)},e.prototype.removeScroll=function(e,t){return r.removeScroll(e,t)},e.prototype.restrictToView=function(e){return r.restrictToView(e)},e.prototype.scrollPosition=function(e){return r.scrollPosition(this.nativeElement(e))},e.prototype.scrollableParents=function(e){return s.scrollableParents(this.nativeElement(e))},e.prototype.stackingElementOffset=function(e){var t=this.getRelativeContextElement(e);return t?r.offset(t):null},e.prototype.getRelativeContextElement=function(e){if(!e||!s.HAS_RELATIVE_STACKING_CONTEXT)return null;for(var t=this.nativeElement(e).parentElement;t;){if("none"!==window.getComputedStyle(t).transform)return t;t=t.parentElement}return null},e.prototype.useRelativePosition=function(e){return!!this.getRelativeContextElement(e)},e.prototype.windowViewPort=function(e){return r.getWindowViewPort(this.nativeElement(e))},e.prototype.zIndex=function(e,t){return s.zIndex(this.nativeElement(e),this.nativeElement(t))},e.prototype.zoomLevel=function(){return s.isDocumentAvailable()&&s.isWindowAvailable()?parseFloat((document.documentElement.clientWidth/window.innerWidth).toFixed(2)):1},e.prototype.isZoomed=function(){return this.zoomLevel()>1},e}();a=o.__decorate([i.Injectable()],a),t.DOMService=a},function(e,t){"use strict";function n(e,t,n){var o=e.top,i=e.left;return n&&(i=0,o=0),{top:o+t.top,left:i+t.left,height:e.height,width:e.width}}function o(e,t){return{top:e.top+t.y,left:e.left+t.x,height:e.height,width:e.width}}function i(e,t){return{top:e.top-t.y,left:e.left-t.x,height:e.height,width:e.width}}function r(e){var t=u(e),n=v(e);return{x:n.pageXOffset||t.scrollLeft||0,y:n.pageYOffset||t.scrollTop||0}}function s(e){var t=v(e);return{height:t.innerHeight,width:t.innerWidth}}Object.defineProperty(t,"__esModule",{value:!0});var a={bottom:"bottom",center:"center",middle:"middle",left:"left",right:"right",top:"top"},l=function(e){var t=e.anchorRect,n=e.anchorAlign,o=e.elementRect,i=e.elementAlign,r=n.horizontal,s=n.vertical,l=i.horizontal,c=i.vertical,p=t.top,u=t.left;return s===a.bottom&&(p+=t.height),s!==a.center&&s!==a.middle||(p+=Math.round(t.height/2)),c===a.bottom&&(p-=o.height),c!==a.center&&c!==a.middle||(p-=Math.round(o.height/2)),r===a.right&&(u+=t.width),r!==a.center&&r!==a.middle||(u+=Math.round(t.width/2)),l===a.right&&(u-=o.width),l!==a.center&&l!==a.middle||(u-=Math.round(o.width/2)),{top:p,left:u}},c=function(e){if(!e.getBoundingClientRect)return{bottom:e.innerHeight,left:0,right:e.innerWidth,top:0};var t=e.getBoundingClientRect(),n=t.bottom,o=t.left,i=t.right,r=t.top;return{bottom:n,left:o,right:i,top:r}},p={fit:"fit",flip:"flip"},u=function(e){return e.ownerDocument.documentElement},f=function(e){for(var t=e.offsetParent;t&&"static"===t.style.position;)t=t.offsetParent;return t||u(e)},d=function(e){return f(e)===e.ownerDocument.body},h=function(e){var t=e.style,n=t.display,o=t.left,i=t.position;e.style.display="",e.style.left="-10000px",e.style.position="absolute";var r=e.getBoundingClientRect();return e.style.display=n,e.style.left=o,e.style.position=i,r},m=function(e){var t=e.getBoundingClientRect(),n=t.left,o=t.top;return t.height||t.width||(t=h(e)),{top:o,left:n,height:t.height,width:t.width}},v=function(e){return e.ownerDocument.defaultView},g=function(e){var t=v(e),n=t.getComputedStyle(e),o=m(e),i=f(e),r=t.getComputedStyle(i),s={top:0,left:0};return"fixed"!==n.position&&i!==e.ownerDocument.body&&(s=m(i),s.top+=parseInt(r.borderTopWidth,10),s.left+=parseInt(r.borderLeftWidth,10)),{top:o.top-s.top-parseInt(n.marginTop,10),left:o.left-s.left-parseInt(n.marginLeft,10),height:o.height,width:o.width}},b=function(e,t,n){var o=0;return e+t>n&&(o=n-(e+t)),e<0&&(o=-e),o},y=function(e){var t=e.offset,n=e.size,o=e.anchorSize,i=e.viewPortSize,r=e.anchorAlignPoint,s=e.elementAlignPoint,l=0,c=s===a.center||s===a.middle,p=r===a.center||r===a.middle;return s!==r&&!c&&!p&&t>-1&&(t+n>i&&(l+=-(o+n)),t+l<0&&(l+=o+n)),l},_=function(e){var t=e.anchorRect,n=e.anchorAlign,o=e.elementRect,i=e.elementAlign,r=e.collisions,s=e.viewPort,a=o.top,l=o.left,c=o.height,u=o.width,f=s.height,d=s.width,h=0,m=0,v=r.horizontal===p.flip,g=r.vertical===p.flip;return r.vertical===p.fit&&(m+=b(a,c,f)),r.horizontal===p.fit&&(h+=b(l,u,d)),g&&(m+=y({offset:a,size:c,anchorSize:t.height,viewPortSize:f,anchorAlignPoint:n.vertical,elementAlignPoint:i.vertical})),v&&(h+=y({offset:l,size:u,anchorSize:t.width,viewPortSize:d,anchorAlignPoint:n.horizontal,elementAlignPoint:i.horizontal})),{flipped:v&&0!==h||g&&0!==m,offset:{left:h,top:m}}};t.align=l,t.AlignPoint=a,t.applyLocationOffset=n,t.boundingOffset=c,t.Collision=p,t.getDocumentElement=u,t.isBodyOffset=d,t.offsetParent=f,t.offset=m,t.position=g,t.addScroll=o,t.removeScroll=i,t.restrictToView=_,t.scrollPosition=r,t.getWindow=v,t.getWindowViewPort=s},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.eitherRect=function(e,t){return e?e:{height:0,left:t.left,top:t.top,width:0}},t.replaceOffset=function(e,t){if(!t)return e;var n={height:e.height,left:t.left,top:t.top,width:e.width};return n},t.removeStackingOffset=function(e,t){if(!t)return e;var n={height:e.height,left:e.left-t.left,top:e.top-t.top,width:e.width};return n},t.isDifferentOffset=function(e,t){var n=e.left,o=e.top,i=t.left,r=t.top;return Math.abs(n-i)>=1||Math.abs(o-r)>=1},t.isDocumentAvailable=function(){return"undefined"!=typeof document&&!!document.body},t.isWindowAvailable=function(){return"undefined"!=typeof window},t.hasBoundingRect=function(e){return!!e.getBoundingClientRect},t.OVERFLOW_REGEXP=/auto|scroll/;var n=function(e){var t=window.getComputedStyle(e);return""+t.overflow+t.overflowX+t.overflowY};t.scrollableParents=function(e){var o=[];if(!t.isDocumentAvailable()||!t.isWindowAvailable())return o;for(var i=e.parentElement;i;)t.OVERFLOW_REGEXP.test(n(i))&&o.push(i),i=i.parentElement;return o.push(window),o},t.FRAME_DURATION=1e3/60,t.hasRelativeStackingContext=function(){if(!t.isDocumentAvailable())return!1;var e=10,n=document.createElement("div");n.style.transform="matrix(10, 0, 0, 10, 0, 0)",n.innerHTML='<div style="position: fixed; top: '+e+'px;">child</div>',document.body.appendChild(n);var o=n.children[0].getBoundingClientRect().top!==e;return document.body.removeChild(n),o},t.HAS_RELATIVE_STACKING_CONTEXT=t.hasRelativeStackingContext();var o=function(e,t){for(var n=[],o=e.parentNode;o&&(n.push(o),o!==t);)o=o.parentNode;return n},i=function(e){for(var t=[],n=e.parentNode.firstElementChild;n;)n!==e&&t.push(n),n=n.nextElementSibling;return t},r=function(e,t){for(var n,r,s=o(e),a=t;a&&(n=i(a),!(r=s.reduce(function(e,t){return e.concat(n.filter(function(e){return e===t}))},[])[0]));)a=a.parentElement;return r};t.zIndex=function(e,n){if(!e||!t.isDocumentAvailable()||!t.isWindowAvailable())return null;var i=r(e,n);if(!i)return null;var s=[e].concat(o(e,i)).reduce(function(e,t){var n=t.style.zIndex||window.getComputedStyle(t).zIndex,o=parseInt(n,10);return o>e?o:e},0);return s?s+1:null}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(6),s=n(8),a=function(){function e(e){this._dom=e}return e.prototype.positionElement=function(e){var t=e.anchor,n=e.currentLocation,o=e.element,i=e.anchorAlign,r=e.elementAlign,a=e.collisions,l=this._dom,c=l.useRelativePosition(o),p=e.viewPort||l.windowViewPort(o),u=s.eitherRect(l.offset(t),n),f=c?null:n,d=c?n:null,h=s.replaceOffset(l.staticOffset(o),f),m=l.isZoomed()?l.removeScroll(h,l.scrollPosition(o)):h,v=this._dom.restrictToView({anchorAlign:i,anchorRect:u,collisions:a,elementAlign:r,elementRect:m,viewPort:p});return{flipped:v.flipped,offset:this._dom.addOffset(s.replaceOffset(h,d),v.offset)}},e}();a=o.__decorate([i.Injectable(),o.__metadata("design:paramtypes",[r.DOMService])],a),t.PositionService=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(11);n(12),n(13);var s=n(8),a=n(6),l=function(){function e(e,t){this._dom=e,this._zone=t}return e.prototype.subscribe=function(e){var t=this;s.isDocumentAvailable()&&this._zone.runOutsideAngular(function(){t.subscription=r.Observable.fromEvent(t._dom.getWindow(),"resize").auditTime(s.FRAME_DURATION).subscribe(function(){return t._zone.run(function(){return e()})})})},e.prototype.unsubscribe=function(){this.subscription&&this.subscription.unsubscribe()},e.prototype.isUnsubscribed=function(){return this.subscription&&this.subscription.closed},e}();l=o.__decorate([i.Injectable(),o.__metadata("design:paramtypes",[a.DOMService,i.NgZone])],l),t.ResizeService=l},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(11);n(12),n(15),n(13);var s=n(6),a=n(8),l=function(){function e(e,t){this._dom=e,this._zone=t}return e.prototype.forElement=function(e){return this.unsubscribe(),this.element=e,this},e.prototype.subscribe=function(e){var t=this;if(e&&a.isDocumentAvailable()&&this.element){var n=this._dom.nativeElement(this.element),o=this._dom.scrollableParents(this.element);this._zone.runOutsideAngular(function(){var i=o.map(function(e){return r.Observable.fromEvent(e,"scroll").auditTime(a.FRAME_DURATION)}),s=function(o){return t._zone.run(function(){return e(t.isVisible(n,o.target))})};t.subscription=r.Observable.merge.apply(r.Observable,i).subscribe(s)})}},e.prototype.unsubscribe=function(){this.subscription&&this.subscription.unsubscribe()},e.prototype.isVisible=function(e,t){var n=this._dom.boundingOffset(e),o=this._dom.boundingOffset(t);return!(n.bottom<o.top)&&(!(n.bottom>o.bottom)&&(!(n.right>o.right)&&!(n.left<o.left)))},e}();l=o.__decorate([i.Injectable(),o.__metadata("design:paramtypes",[s.DOMService,i.NgZone])],l),t.ScrollableService=l},function(e,t){e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(17),s=n(4),a=n(1),l=[s.PopupComponent],c=function(){function e(){}return e}();c=o.__decorate([i.NgModule({declarations:[l],entryComponents:[l],exports:[l],imports:[r.CommonModule],providers:[a.PopupService]})],c),t.PopupModule=c},function(e,t){e.exports=s}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("tslib"),require("@angular/core"),require("rxjs/Observable"),require("rxjs/add/observable/fromEvent"),require("rxjs/add/operator/auditTime"),require("rxjs/add/observable/merge"),require("@angular/common")):"function"==typeof define&&define.amd?define(["tslib","@angular/core","rxjs/Observable","rxjs/add/observable/fromEvent","rxjs/add/operator/auditTime","rxjs/add/observable/merge","@angular/common"],t):"object"==typeof exports?exports.KendoAngularPopup=t(require("tslib"),require("@angular/core"),require("rxjs/Observable"),require("rxjs/add/observable/fromEvent"),require("rxjs/add/operator/auditTime"),require("rxjs/add/observable/merge"),require("@angular/common")):e.KendoAngularPopup=t(e.tslib,e["@angular/core"],e["rxjs/Observable"],e["rxjs/add/observable/fromEvent"],e["rxjs/add/operator/auditTime"],e["rxjs/add/observable/merge"],e["@angular/common"])}(this,function(e,t,n,o,i,r,s){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(1);t.PopupService=o.PopupService,t.POPUP_CONTAINER=o.POPUP_CONTAINER;var i=n(4);t.PopupComponent=i.PopupComponent;var r=n(16);t.PopupModule=r.PopupModule},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(4);t.POPUP_CONTAINER=new i.InjectionToken("Popup Container");var s=function(){function e(e,t,n,o){this.applicationRef=e,this.componentFactoryResolver=t,this.injector=n,this.container=o}return Object.defineProperty(e.prototype,"rootViewContainer",{get:function(){var e=this.applicationRef.components||[];if(e[0])return e[0];throw new Error("\n            View Container not found! Inject the POPUP_CONTAINER or define a specific ViewContainerRef via the appendTo option.\n            See http://www.telerik.com/kendo-angular-ui/components/popup/api/POPUP_CONTAINER/ for more details.\n        ")},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"rootViewContainerNode",{get:function(){return this.container?this.container.nativeElement:this.getComponentRootNode(this.rootViewContainer)},enumerable:!0,configurable:!0}),e.prototype.open=function(e){void 0===e&&(e={});var t=this.contentFrom(e.content),n=t.component,o=t.nodes,i=this.appendPopup(o,e.appendTo),r=i.instance;return this.projectComponentInputs(i,e),n&&n.changeDetectorRef.detectChanges(),{close:function(){n?n.destroy():(i.instance.content=null,i.changeDetectorRef.detectChanges()),i.destroy()},content:n,popup:i,popupAnchorViewportLeave:r.anchorViewportLeave,popupClose:r.close,popupElement:this.getComponentRootNode(i),popupOpen:r.open}},e.prototype.appendPopup=function(e,t){var n=this.applicationRef,o=this.createComponent(r.PopupComponent,e,t);return t||(n.attachView(o.hostView),this.rootViewContainerNode.appendChild(this.getComponentRootNode(o))),o},e.prototype.getComponentRootNode=function(e){return e.hostView.rootNodes[0]},e.prototype.getComponentFactory=function(e){return this.componentFactoryResolver.resolveComponentFactory(e)},e.prototype.createComponent=function(e,t,n){var o=this.getComponentFactory(e);return n?n.createComponent(o,void 0,this.injector,t):o.create(this.injector,t)},e.prototype.projectComponentInputs=function(e,t){return Object.getOwnPropertyNames(t).filter(function(e){return"content"!==e||t.content instanceof i.TemplateRef}).map(function(n){e.instance[n]=t[n]}),e},e.prototype.contentFrom=function(e){if(!e||e instanceof i.TemplateRef)return{component:null,nodes:[[]]};var t=this.createComponent(e),n=t?[t.location.nativeElement]:[];return{component:t,nodes:[n]}},e}();s=o.__decorate([i.Injectable(),o.__param(3,i.Inject(t.POPUP_CONTAINER)),o.__param(3,i.Optional()),o.__metadata("design:paramtypes",[i.ApplicationRef,i.ComponentFactoryResolver,i.Injector,i.ElementRef])],s),t.PopupService=s},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(5),s=n(6),a=n(9),l=n(10),p=n(14),c=n(8),u={left:-1e4,top:0},f="k-animation-container",d="k-animation-container-fixed",h=function(){function e(e,t,n,o,r,s,a,l){this.container=e,this._alignService=t,this._domService=n,this._cdr=o,this._positionService=r,this._resizeService=s,this._scrollableService=a,this._renderer=l,this.animate=!0,this.anchorAlign={horizontal:"left",vertical:"bottom"},this.collision={horizontal:"fit",vertical:"flip"},this.popupAlign={horizontal:"left",vertical:"top"},this.positionMode="fixed",this.offset=u,this.anchorViewportLeave=new i.EventEmitter,this.close=new i.EventEmitter,this.open=new i.EventEmitter,this.direction="down",this.currentOffset=u,this.resolvedPromised=Promise.resolve(null),this._renderer.addClass(e.nativeElement,f),this.updateFixedClass()}return Object.defineProperty(e.prototype,"offsetLeft",{get:function(){return this.currentOffset.left},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"offsetTop",{get:function(){return this.currentOffset.top},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"getZIndex",{get:function(){return this.anchor?this.hostZIndex:null},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e=this.reposition.bind(this);this._resizeService.subscribe(e),this._scrollableService.forElement(this.anchor||this.container).subscribe(this.onScroll.bind(this)),this.hostZIndex=this._domService.zIndex(this.anchor,this.container),this.updateFixedClass()},e.prototype.ngOnChanges=function(e){e.positionMode&&this.updateFixedClass()},e.prototype.ngAfterViewChecked=function(){var e=this;if(c.isDocumentAvailable()){var t=this.position(),n=t.flipped,o=t.offset,i=this.getDirection(n);(this.direction!==i||c.isDifferentOffset(this.currentOffset,o))&&this.resolvedPromised.then(function(){e.currentOffset=o,e.direction=i,e._cdr.markForCheck()})}},e.prototype.ngOnDestroy=function(){this.anchorViewportLeave.complete(),this.close.emit(),this.close.complete(),this._resizeService.unsubscribe(),this._scrollableService.unsubscribe()},e.prototype.triggerOpen=function(e){this._renderer.addClass(this.container.nativeElement,"k-animation-container-shown"),this.open.emit(),this.open.complete()},e.prototype.reposition=function(){if(c.isDocumentAvailable()){var e=this.position(),t=e.flipped,n=e.offset;this.direction=this.getDirection(t),this.currentOffset=n}},e.prototype.position=function(){var e=this._alignService.alignElement({anchor:this.anchor,anchorAlign:this.anchorAlign,element:this.container,elementAlign:this.popupAlign,offset:this.offset,positionMode:this.positionMode});return this._positionService.positionElement({anchor:this.anchor,anchorAlign:this.anchorAlign,collisions:this.collision,currentLocation:e,element:this.container,elementAlign:this.popupAlign,positionMode:this.positionMode})},e.prototype.getDirection=function(e){return this.animate?e?"up":"down":"none"},e.prototype.onScroll=function(e){e?this.reposition():this.anchorViewportLeave.emit()},e.prototype.updateFixedClass=function(){var e=this.container.nativeElement,t="fixed"===this.positionMode?"addClass":"removeClass";this._renderer[t](e,d)},e}();o.__decorate([i.Input(),o.__metadata("design:type",Boolean)],h.prototype,"animate",void 0),o.__decorate([i.Input(),o.__metadata("design:type",i.ElementRef)],h.prototype,"anchor",void 0),o.__decorate([i.Input(),o.__metadata("design:type",Object)],h.prototype,"anchorAlign",void 0),o.__decorate([i.Input(),o.__metadata("design:type",Object)],h.prototype,"collision",void 0),o.__decorate([i.Input(),o.__metadata("design:type",Object)],h.prototype,"popupAlign",void 0),o.__decorate([i.Input(),o.__metadata("design:type",Object)],h.prototype,"popupClass",void 0),o.__decorate([i.Input(),o.__metadata("design:type",String)],h.prototype,"positionMode",void 0),o.__decorate([i.Input(),o.__metadata("design:type",Object)],h.prototype,"offset",void 0),o.__decorate([i.Output(),o.__metadata("design:type",i.EventEmitter)],h.prototype,"anchorViewportLeave",void 0),o.__decorate([i.Output(),o.__metadata("design:type",i.EventEmitter)],h.prototype,"close",void 0),o.__decorate([i.Output(),o.__metadata("design:type",i.EventEmitter)],h.prototype,"open",void 0),o.__decorate([i.HostBinding("style.left.px"),o.__metadata("design:type",Number),o.__metadata("design:paramtypes",[])],h.prototype,"offsetLeft",null),o.__decorate([i.HostBinding("style.top.px"),o.__metadata("design:type",Number),o.__metadata("design:paramtypes",[])],h.prototype,"offsetTop",null),o.__decorate([i.HostBinding("style.z-index"),o.__metadata("design:type",Number),o.__metadata("design:paramtypes",[])],h.prototype,"getZIndex",null),h=o.__decorate([i.Component({animations:[i.trigger("toggle",[i.transition("void => down, up => down",[i.style({transform:"translateY(-100%)"}),i.animate("0.1s ease-in",i.style({transform:"translateY(0)"}))]),i.transition("down => void",[i.style({transform:"translateY(0)"}),i.animate("0.1s ease-in",i.style({transform:"translateY(-100%)"}))]),i.transition("void => up, down => up",[i.style({transform:"translateY(100%)"}),i.animate("0.1s ease-in",i.style({transform:"translateY(0)"}))]),i.transition("up => void",[i.style({transform:"translateY(0)"}),i.animate("0.1s ease-in",i.style({transform:"translateY(100%)"}))])])],exportAs:"kendo-popup",providers:[r.AlignService,s.DOMService,a.PositionService,l.ResizeService,p.ScrollableService],selector:"kendo-popup",template:'\n        <div class="k-popup" [ngClass]="popupClass" [@toggle]="direction" (@toggle.done)="triggerOpen($event)">\n            <ng-content></ng-content>\n            <ng-template [ngTemplateOutlet]="content" [ngIf]="content"></ng-template>\n        </div>\n     '}),o.__metadata("design:paramtypes",[i.ElementRef,r.AlignService,s.DOMService,i.ChangeDetectorRef,a.PositionService,l.ResizeService,p.ScrollableService,i.Renderer2])],h),t.PopupComponent=h},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(6),s=n(8),a=function(){function e(e){this._dom=e}return e.prototype.alignElement=function(e){var t,n=e.anchor,o=e.element,i=e.anchorAlign,r=e.elementAlign,a=e.offset,l=e.positionMode,p=this._dom,c=p.offset(o);return"fixed"!==l&&p.hasOffsetParent(o)?t=s.eitherRect(p.position(n,o),a):(t=s.removeStackingOffset(s.eitherRect(p.offset(n),a),p.stackingElementOffset(o)),n||(t=p.removeScroll(t,p.scrollPosition(o)))),this._dom.align({anchorAlign:i,anchorRect:t,elementAlign:r,elementRect:c})},e}();a=o.__decorate([i.Injectable(),o.__metadata("design:paramtypes",[r.DOMService])],a),t.AlignService=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(7),s=n(8),a=function(){function e(){}return e.prototype.addOffset=function(e,t){return{left:e.left+t.left,top:e.top+t.top}},e.prototype.align=function(e){return r.align(e)},e.prototype.boundingOffset=function(e){return r.boundingOffset(this.nativeElement(e))},e.prototype.getWindow=function(){return s.isWindowAvailable()?window:null},e.prototype.isBodyOffset=function(e){return r.isBodyOffset(this.nativeElement(e))},e.prototype.hasOffsetParent=function(e){return!!e&&!!this.nativeElement(e).offsetParent},e.prototype.offset=function(e){return e?r.offset(this.nativeElement(e)):null},e.prototype.staticOffset=function(e){if(!e)return null;var t=this.nativeElement(e),n=t.style,o=n.left,i=n.top;t.style.left="0px",t.style.top="0px";var s=r.offset(t);return t.style.left=o,t.style.top=i,s},e.prototype.nativeElement=function(e){return e?e.nativeElement||e:null},e.prototype.position=function(e,t){if(!e||!t)return null;var n=this.nativeElement(e),o=r.siblingContainer(n,this.nativeElement(t));return r.positionWithScroll(n,o)},e.prototype.relativeOffset=function(e,t){return r.applyLocationOffset(this.offset(e),t,this.isBodyOffset(e))},e.prototype.addScroll=function(e,t){return r.addScroll(e,t)},e.prototype.removeScroll=function(e,t){return r.removeScroll(e,t)},e.prototype.restrictToView=function(e){return r.restrictToView(e)},e.prototype.scrollPosition=function(e){return r.scrollPosition(this.nativeElement(e))},e.prototype.scrollableParents=function(e){return s.scrollableParents(this.nativeElement(e))},e.prototype.stackingElementOffset=function(e){var t=this.getRelativeContextElement(e);return t?r.offset(t):null},e.prototype.getRelativeContextElement=function(e){if(!e||!s.HAS_RELATIVE_STACKING_CONTEXT)return null;for(var t=this.nativeElement(e).parentElement;t;){if("none"!==window.getComputedStyle(t).transform)return t;t=t.parentElement}return null},e.prototype.useRelativePosition=function(e){return!!this.getRelativeContextElement(e)},e.prototype.windowViewPort=function(e){return r.getWindowViewPort(this.nativeElement(e))},e.prototype.zIndex=function(e,t){return s.zIndex(this.nativeElement(e),this.nativeElement(t))},e.prototype.zoomLevel=function(){return s.isDocumentAvailable()&&s.isWindowAvailable()?parseFloat((document.documentElement.clientWidth/window.innerWidth).toFixed(2)):1},e.prototype.isZoomed=function(){return this.zoomLevel()>1},e}();a=o.__decorate([i.Injectable()],a),t.DOMService=a},function(e,t){"use strict";function n(e,t){return{top:e.top+t.y,left:e.left+t.x,height:e.height,width:e.width}}function o(e,t,n){var o=e.top,i=e.left;return n&&(i=0,o=0),{top:o+t.top,left:i+t.left,height:e.height,width:e.width}}function i(e){var t=f(e);return t?g(t):{x:0,y:0}}function r(e,t){return{top:e.top-t.y,left:e.left-t.x,height:e.height,width:e.width}}function s(e){var t=u(e),n=y(e);return{x:n.pageXOffset||t.scrollLeft||0,y:n.pageYOffset||t.scrollTop||0}}function a(e){var t=y(e);return{height:t.innerHeight,width:t.innerWidth}}Object.defineProperty(t,"__esModule",{value:!0});var l={bottom:"bottom",center:"center",middle:"middle",left:"left",right:"right",top:"top"},p=function(e){var t=e.anchorRect,n=e.anchorAlign,o=e.elementRect,i=e.elementAlign,r=n.horizontal,s=n.vertical,a=i.horizontal,p=i.vertical,c=t.top,u=t.left;return s===l.bottom&&(c+=t.height),s!==l.center&&s!==l.middle||(c+=Math.round(t.height/2)),p===l.bottom&&(c-=o.height),p!==l.center&&p!==l.middle||(c-=Math.round(o.height/2)),r===l.right&&(u+=t.width),r!==l.center&&r!==l.middle||(u+=Math.round(t.width/2)),a===l.right&&(u-=o.width),a!==l.center&&a!==l.middle||(u-=Math.round(o.width/2)),{top:c,left:u}},c=function(e){if(!e.getBoundingClientRect)return{bottom:e.innerHeight,left:0,right:e.innerWidth,top:0};var t=e.getBoundingClientRect(),n=t.bottom,o=t.left,i=t.right,r=t.top;return{bottom:n,left:o,right:i,top:r}},u=function(e){return e.ownerDocument.documentElement},f=function(e){for(var t=e.offsetParent;t&&"static"===t.style.position;)t=t.offsetParent;return t||u(e)},d=function(e){return f(e)===e.ownerDocument.body},h=function(e){var t=e.style,n=t.display,o=t.left,i=t.position;e.style.display="",e.style.left="-10000px",e.style.position="absolute";var r=e.getBoundingClientRect();return e.style.display=n,e.style.left=o,e.style.position=i,r},m=function(e){var t=e.getBoundingClientRect(),n=t.left,o=t.top;return t.height||t.width||(t=h(e)),{top:o,left:n,height:t.height,width:t.width}},v=function(e,t){for(var n=[],o=e.parentNode;o&&(n.push(o),o!==t);)o=o.parentNode;return n},g=function(e){return{x:e.scrollLeft,y:e.scrollTop}},y=function(e){return e.ownerDocument.defaultView},b=function(e,t){var n=y(e),o=n.getComputedStyle(e),i=m(e),r=t||f(e),s=n.getComputedStyle(r),a={top:0,left:0};return"fixed"!==o.position&&r!==e.ownerDocument.body&&(a=m(r),a.top+=parseInt(s.borderTopWidth,10),a.left+=parseInt(s.borderLeftWidth,10)),{top:i.top-a.top-parseInt(o.marginTop,10),left:i.left-a.left-parseInt(o.marginLeft,10),height:i.height,width:i.width}},_=function(e,t){var n=t?f(t):null,o=b(e,n),r=o.top,s=o.left,a=o.height,l=o.width,p=n?g(n):i(e),c=p.x,u=p.y;return{top:r+u,left:s+c,height:a,width:l}},w={fit:"fit",flip:"flip"},O=function(e,t,n){var o=0;return e+t>n&&(o=n-(e+t)),e<0&&(o=-e),o},P=function(e){var t=e.offset,n=e.size,o=e.anchorSize,i=e.viewPortSize,r=e.anchorAlignPoint,s=e.elementAlignPoint,a=0,p=s===l.center||s===l.middle,c=r===l.center||r===l.middle;return s!==r&&!p&&!c&&t>-1&&(t+n>i&&(a+=-(o+n)),t+a<0&&(a+=o+n)),a},E=function(e){var t=e.anchorRect,n=e.anchorAlign,o=e.elementRect,i=e.elementAlign,r=e.collisions,s=e.viewPort,a=o.top,l=o.left,p=o.height,c=o.width,u=s.height,f=s.width,d=0,h=0,m=r.horizontal===w.flip,v=r.vertical===w.flip;return r.vertical===w.fit&&(h+=O(a,p,u)),r.horizontal===w.fit&&(d+=O(l,c,f)),v&&(h+=P({offset:a,size:p,anchorSize:t.height,viewPortSize:u,anchorAlignPoint:n.vertical,elementAlignPoint:i.vertical})),m&&(d+=P({offset:l,size:c,anchorSize:t.width,viewPortSize:f,anchorAlignPoint:n.horizontal,elementAlignPoint:i.horizontal})),{flipped:m&&0!==d||v&&0!==h,offset:{left:d,top:h}}},C=function(e){for(var t=[],n=e.parentNode.firstElementChild;n;)n!==e&&t.push(n),n=n.nextElementSibling;return t},x=function(e,t){for(var n,o,i=v(e),r=t;r&&(n=C(r),!(o=i.reduce(function(e,t){return e.concat(n.filter(function(e){return e===t}))},[])[0]));)r=r.parentElement;return o};t.align=p,t.addScroll=n,t.applyLocationOffset=o,t.boundingOffset=c,t.isBodyOffset=d,t.offsetParent=f,t.offset=m,t.parents=v,t.parentScrollPosition=i,t.position=b,t.positionWithScroll=_,t.removeScroll=r,t.restrictToView=E,t.scrollPosition=s,t.siblingContainer=x,t.siblings=C,t.getDocumentElement=u,t.getWindow=y,t.getWindowViewPort=a,t.AlignPoint=l,t.Collision=w},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(7);t.eitherRect=function(e,t){return e?e:{height:0,left:t.left,top:t.top,width:0}},t.replaceOffset=function(e,t){if(!t)return e;var n={height:e.height,left:t.left,top:t.top,width:e.width};return n},t.removeStackingOffset=function(e,t){if(!t)return e;var n={height:e.height,left:e.left-t.left,top:e.top-t.top,width:e.width};return n},t.isDifferentOffset=function(e,t){var n=e.left,o=e.top,i=t.left,r=t.top;return Math.abs(n-i)>=1||Math.abs(o-r)>=1},t.isDocumentAvailable=function(){return"undefined"!=typeof document&&!!document.body},t.isWindowAvailable=function(){return"undefined"!=typeof window},t.hasBoundingRect=function(e){return!!e.getBoundingClientRect},t.OVERFLOW_REGEXP=/auto|scroll/;var i=function(e){var t=window.getComputedStyle(e);return""+t.overflow+t.overflowX+t.overflowY};t.scrollableParents=function(e){var n=[];if(!t.isDocumentAvailable()||!t.isWindowAvailable())return n;for(var o=e.parentElement;o;)t.OVERFLOW_REGEXP.test(i(o))&&n.push(o),o=o.parentElement;return n.push(window),n},t.FRAME_DURATION=1e3/60,t.hasRelativeStackingContext=function(){if(!t.isDocumentAvailable())return!1;var e=10,n=document.createElement("div");n.style.transform="matrix(10, 0, 0, 10, 0, 0)",n.innerHTML='<div style="position: fixed; top: '+e+'px;">child</div>',document.body.appendChild(n);var o=n.children[0].getBoundingClientRect().top!==e;return document.body.removeChild(n),o},t.HAS_RELATIVE_STACKING_CONTEXT=t.hasRelativeStackingContext(),t.zIndex=function(e,n){if(!e||!t.isDocumentAvailable()||!t.isWindowAvailable())return null;var i=o.siblingContainer(e,n);if(!i)return null;var r=[e].concat(o.parents(e,i)).reduce(function(e,t){var n=t.style.zIndex||window.getComputedStyle(t).zIndex,o=parseInt(n,10);return o>e?o:e},0);return r?r+1:null}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(6),s=n(8),a=function(){function e(e){this._dom=e}return e.prototype.positionElement=function(e){var t=e.anchor,n=e.currentLocation,o=e.positionMode,i=e.element,r=e.anchorAlign,a=e.elementAlign,l=e.collisions,p=this._dom,c=p.useRelativePosition(i),u=e.viewPort||p.windowViewPort(i),f=s.eitherRect(p.offset(t),n),d=c?null:n,h=c?n:null,m=s.replaceOffset(p.staticOffset(i),d),v="fixed"===o?m:p.removeScroll(m,p.scrollPosition(i)),g=this._dom.restrictToView({anchorAlign:r,anchorRect:f,collisions:l,elementAlign:a,elementRect:v,viewPort:u});return{flipped:g.flipped,offset:this._dom.addOffset(s.replaceOffset(m,h),g.offset)}},e}();a=o.__decorate([i.Injectable(),o.__metadata("design:paramtypes",[r.DOMService])],a),t.PositionService=a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(11);n(12),n(13);var s=n(8),a=n(6),l=function(){function e(e,t){this._dom=e,this._zone=t}return e.prototype.subscribe=function(e){var t=this;s.isDocumentAvailable()&&this._zone.runOutsideAngular(function(){t.subscription=r.Observable.fromEvent(t._dom.getWindow(),"resize").auditTime(s.FRAME_DURATION).subscribe(function(){return t._zone.run(function(){return e()})})})},e.prototype.unsubscribe=function(){this.subscription&&this.subscription.unsubscribe()},e.prototype.isUnsubscribed=function(){return this.subscription&&this.subscription.closed},e}();l=o.__decorate([i.Injectable(),o.__metadata("design:paramtypes",[a.DOMService,i.NgZone])],l),t.ResizeService=l},function(e,t){e.exports=n},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(11);n(12),n(15),n(13);var s=n(6),a=n(8),l=function(){function e(e,t){this._dom=e,this._zone=t}return e.prototype.forElement=function(e){return this.unsubscribe(),this.element=e,this},e.prototype.subscribe=function(e){var t=this;if(e&&a.isDocumentAvailable()&&this.element){var n=this._dom.nativeElement(this.element),o=this._dom.scrollableParents(this.element);this._zone.runOutsideAngular(function(){var i=o.map(function(e){return r.Observable.fromEvent(e,"scroll").auditTime(a.FRAME_DURATION)}),s=function(o){return t._zone.run(function(){return e(t.isVisible(n,o.target))})};t.subscription=r.Observable.merge.apply(r.Observable,i).subscribe(s)})}},e.prototype.unsubscribe=function(){this.subscription&&this.subscription.unsubscribe()},e.prototype.isVisible=function(e,t){var n=this._dom.boundingOffset(e),o=this._dom.boundingOffset(t);return!(n.bottom<o.top)&&(!(n.bottom>o.bottom)&&(!(n.right>o.right)&&!(n.left<o.left)))},e}();l=o.__decorate([i.Injectable(),o.__metadata("design:paramtypes",[s.DOMService,i.NgZone])],l),t.ScrollableService=l},function(e,t){e.exports=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(2),i=n(3),r=n(17),s=n(4),a=n(1),l=[s.PopupComponent],p=function(){function e(){}return e}();p=o.__decorate([i.NgModule({declarations:[l],entryComponents:[l],exports:[l],imports:[r.CommonModule],providers:[a.PopupService]})],p),t.PopupModule=p},function(e,t){e.exports=s}])});

dist/es/main.d.ts

@@ -6,4 +6,5 @@ export { Align } from './models/align.interface';
 export { PopupRef } from './models/popup-ref';
+export { PositionMode } from './models/position-mode';
 export { PopupService, POPUP_CONTAINER } from './popup.service';
 export { PopupComponent } from './popup.component';
 export { PopupModule } from './popup.module';

dist/es/main.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./models/align.interface","export":["Align"]},{"from":"./models/collision.interface","export":["Collision"]},{"from":"./models/offset.interface","export":["Offset"]},{"from":"./models/popup-settings","export":["PopupSettings"]},{"from":"./models/popup-ref","export":["PopupRef"]},{"from":"./popup.service","export":["PopupService","POPUP_CONTAINER"]},{"from":"./popup.component","export":["PopupComponent"]},{"from":"./popup.module","export":["PopupModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./models/align.interface","export":["Align"]},{"from":"./models/collision.interface","export":["Collision"]},{"from":"./models/offset.interface","export":["Offset"]},{"from":"./models/popup-settings","export":["PopupSettings"]},{"from":"./models/popup-ref","export":["PopupRef"]},{"from":"./popup.service","export":["PopupService","POPUP_CONTAINER"]},{"from":"./popup.component","export":["PopupComponent"]},{"from":"./popup.module","export":["PopupModule"]}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./models/align.interface","export":["Align"]},{"from":"./models/collision.interface","export":["Collision"]},{"from":"./models/offset.interface","export":["Offset"]},{"from":"./models/popup-settings","export":["PopupSettings"]},{"from":"./models/popup-ref","export":["PopupRef"]},{"from":"./models/position-mode","export":["PositionMode"]},{"from":"./popup.service","export":["PopupService","POPUP_CONTAINER"]},{"from":"./popup.component","export":["PopupComponent"]},{"from":"./popup.module","export":["PopupModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./models/align.interface","export":["Align"]},{"from":"./models/collision.interface","export":["Collision"]},{"from":"./models/offset.interface","export":["Offset"]},{"from":"./models/popup-settings","export":["PopupSettings"]},{"from":"./models/popup-ref","export":["PopupRef"]},{"from":"./models/position-mode","export":["PositionMode"]},{"from":"./popup.service","export":["PopupService","POPUP_CONTAINER"]},{"from":"./popup.component","export":["PopupComponent"]},{"from":"./popup.module","export":["PopupModule"]}]}]

dist/es/models/align-element-settings.interface.d.ts

 import { ElementRef } from '@angular/core';
 import { AlignStrategy, OffsetPosition } from '@progress/kendo-popup-common';
+import { PositionMode } from './position-mode';
 /**
@@ -12,2 +13,3 @@ * @hidden
     offset?: OffsetPosition;
+    positionMode?: PositionMode;
 }

dist/es/models/align.interface.d.ts

@@ -7,3 +7,3 @@ import { AlignStrategy } from '@progress/kendo-popup-common';
     /**
-     * Defines the possible horizontal point values relative to the anchor or the popup.
+     * Defines the possible horizontal point values that are relative to the anchor or the Popup.
      *
@@ -17,3 +17,3 @@ * The available options are:
     /**
-     * Defines the possible vertical point values relative to the anchor or the Popup.
+     * Defines the possible vertical point values that are relative to the anchor or the Popup.
      *
@@ -20,0 +20,0 @@ * The available options are:

dist/es/models/popup-ref.d.ts

 import { ComponentRef, EventEmitter } from '@angular/core';
 import { PopupComponent } from '../popup.component';
 /**
- * Holds references to the Popup object instance.
- * Controls the Popups that have been opened through the `PopupService`.
+ * Holds references to the object instance of the Popup.
+ * Controls the Popups which are opened through `PopupService`.
  *
@@ -21,7 +21,7 @@ * For an example on sample usage, refer to the
      * A reference to the child component of the Popup.
-     * Available when the Popup is opened with [component content]({% slug service_dialog_kendouiforangular %}#toc-using-components).
+     * Available when the Popup is opened with [`content`]({% slug service_dialog_kendouiforangular %}#toc-using-components).
      */
     content: ComponentRef<any>;
     /**
-     * Closes and destroys the Popup component.
+     * Closes and destroys the Popup.
      */
@@ -33,3 +33,3 @@ close: Function;
      * For more information, refer to the section on
-     * [scrolling outside the viewport]({% slug overview_popup_kendouiforangular %}#toc-viewport-boundary-detection).
+     * [closing the Popup after leaving the viewport]({% slug overview_popup_kendouiforangular %}#toc-closing-after-leaving-the-viewport).
      */
@@ -42,5 +42,5 @@ popupAnchorViewportLeave: EventEmitter<any>;
     /**
-     * Fires after the component is opened and the open animation has ended.
+     * Fires after the component is opened and the opening animation ends.
      */
     popupOpen: EventEmitter<any>;
 }

dist/es/models/popup-settings.d.ts

@@ -5,4 +5,5 @@ import { ElementRef, TemplateRef, ViewContainerRef } from '@angular/core';
 import { Offset } from './offset.interface';
+import { PositionMode } from './position-mode';
 /**
- * The settings that can be used when the Popup is opened through `PopupService`.
+ * The settings for the Popup when the Popup is opened through `PopupService`.
  *
@@ -21,3 +22,3 @@ * For an example on sample usage, refer to the
     /**
-     * Specifies the element that will be used as an anchor. The Popup opens next to that element.
+     * Specifies the element which will be used as an anchor. The Popup opens next to that element.
      */
@@ -30,6 +31,2 @@ anchor?: ElementRef;
     /**
-     * Defines the content of the Popup.
-     */
-    content?: TemplateRef<any> | Function;
-    /**
      * Specifies the anchor pivot point.
@@ -42,9 +39,20 @@ *
     /**
+     * Defines the content of the Popup.
+     */
+    content?: TemplateRef<any> | Function;
+    /**
      * Configures the collision behavior of the Popup.
      *
-     * For more information, refer to the section on
-     * [collisions]({% slug overview_popup_kendouiforangular %}#toc-viewport-boudary-detection).
+     * For more information, refer to the section on the
+     * [viewport boundary detection]({% slug overview_popup_kendouiforangular %}#toc-viewport-boundary-detection).
      */
     collision?: Collision;
     /**
+     * Specifies the position mode of the component. By default the popup uses a *fixed* positioning.
+     * Set the option to `absolute` to use an *absolute* positioning.
+     *
+     * > Use the 'absolute' positioning if mobile browsers with zoom should be supported.
+     */
+    positionMode?: PositionMode;
+    /**
      * Specifies the pivot point of the Popup.
@@ -57,3 +65,3 @@ *
     /**
-     * Specifies a list of CSS classes to be added to the internal animated element.
+     * Specifies a list of CSS classes that will be added to the internal animated element.
      *
@@ -63,3 +71,3 @@ * > To style the content of the Popup, use this property binding.
      * For more information, refer to the section on
-     * [appearance control]({% slug overview_popup_kendouiforangular %}#toc-styling).
+     * [styling]({% slug overview_popup_kendouiforangular %}#toc-styling).
      */
@@ -70,9 +78,9 @@ popupClass?: string | Array<string> | Object;
      *
-     * The Popup pivot point is defined by the `popupAlign` configuration option.
+     * The pivot point of the Popup is defined by the `popupAlign` configuration option.
      * The boundary detection is applied by using the window viewport.
      *
      * For more information, refer to the section on
-     * [static alignment]({% slug overview_popup_kendouiforangular %}#toc-to-specific-absolute-points).
+     * [aligning to specific absolute points]({% slug overview_popup_kendouiforangular %}#toc-align-to-absolute-points).
      */
     offset?: Offset;
 }

dist/es/models/position-element-settings.interface.d.ts

 import { ElementRef } from '@angular/core';
 import { AlignStrategy, CollisionStrategy, OffsetPosition, ViewPort } from '@progress/kendo-popup-common';
+import { PositionMode } from './position-mode';
 /**
@@ -13,3 +14,4 @@ * @hidden
     elementAlign: AlignStrategy;
+    positionMode?: PositionMode;
     viewPort?: ViewPort;
 }

dist/es/popup.component.d.ts

@@ -1,5 +0,6 @@
-import { AfterViewChecked, ChangeDetectorRef, ElementRef, EventEmitter, OnInit, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
+import { AfterViewChecked, ChangeDetectorRef, ElementRef, EventEmitter, OnInit, OnChanges, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
 import { Align } from './models/align.interface';
 import { Collision } from './models/collision.interface';
 import { Offset } from './models/offset.interface';
+import { PositionMode } from './models/position-mode';
 import { AlignService } from './services/align.service';
@@ -29,3 +30,3 @@ import { DOMService } from './services/dom.service';
  */
-export declare class PopupComponent implements AfterViewChecked, OnInit, OnDestroy {
+export declare class PopupComponent implements AfterViewChecked, OnInit, OnChanges, OnDestroy {
     container: ElementRef;
@@ -40,6 +41,6 @@ private _alignService;
     /**
-     * Controls the Popup animation. By default, the open and close animations are enabled.
+     * Controls the Popup animation. By default, the opening and closing animations are enabled.
      *
      * For more information, refer to the section on
-     * [animation control]({% slug overview_popup_kendouiforangular %}#toc-enable-and-disable-animations).
+     * [animation control]({% slug overview_popup_kendouiforangular %}#toc-animations).
      */
@@ -51,3 +52,3 @@ animate: boolean;
      * For more information, refer to the section on the
-     * [anchor]({% slug overview_popup_kendouiforangular %}#toc-align-to-specific-components).
+     * [aligning to specific components]({% slug overview_popup_kendouiforangular %}#toc-align-to-components).
      */
@@ -59,3 +60,3 @@ anchor: ElementRef;
      * For more information, refer to the section on
-     * [positioning]({% slug overview_popup_kendouiforangular %}#toc-set-the-position).
+     * [positioning]({% slug overview_popup_kendouiforangular %}#toc-position).
      */
@@ -67,3 +68,3 @@ anchorAlign: Align;
      * For more information, refer to the section on
-     * [collisions]({% slug overview_popup_kendouiforangular %}#toc-set-behavior-when-outside-the-viewport).
+     * [viewport boundary detection]({% slug overview_popup_kendouiforangular %}#toc-viewport-boundary-detection).
      */
@@ -75,3 +76,3 @@ collision: Collision;
      * For more information, refer to the section on
-     * [positioning]({% slug overview_popup_kendouiforangular %}#toc-set-the-position).
+     * [positioning]({% slug overview_popup_kendouiforangular %}#toc-position).
      */
@@ -82,9 +83,105 @@ popupAlign: Align;
      *
-     * > If the content of the Popup needs to be styled, use this property binding.
+     * > For styling the content of the Popup, use this property binding.
      *
      * For more information, refer to the section on
-     * [appearance control]({% slug overview_popup_kendouiforangular %}#toc-set-the-styles).
+     * [styling]({% slug overview_popup_kendouiforangular %}#toc-styling).
      */
     popupClass: string | Array<string> | Object;
     /**
+     * Specifies the position mode of the component. By default the Popup uses *fixed* mode.
+     * Set the option to `absolute` to use an *absolute* positioning.
+     *
+     * > Use the 'absolute' positioning if mobile browsers with zoom support is targeted.
+     *
+     * @example
+     * ```html
+     * <style>
+     *  .parent-content {
+     *     position: relative;
+     *     width: 200px;
+     *     height: 200px;
+     *     overflow: auto;
+     *     margin: 200px auto;
+     *     border: 1px solid red;
+     *  }
+     *  .content {
+     *     position: relative;
+     *     width: 100px;
+     *     height: 100px;
+     *     overflow: auto;
+     *     margin: 300px;
+     *     border: 1px solid blue;
+     *  }
+     *  .anchor {
+     *     position: absolute;
+     *     top: 200px;
+     *     left: 200px;
+     *  }
+     * </style>
+     * ```
+     * ```ts
+     * @@Component({
+     * selector: 'my-app',
+     * template: `
+     *   <div class="example-config">
+     *      Position mode:
+     *      <label><input type="radio" value="fixed" [(ngModel)]="mode" /> Fixed</label>
+     *      <label><input type="radio" value="absolute" [(ngModel)]="mode" /> Absolute</label>
+     *   </div>
+     *   <div class="example-config">
+     *       Append to
+     *       <label>
+     *           <input type="radio" name="place" [value]="1" [(ngModel)]="checked" />
+     *           Root component
+     *       </label>
+     *       <label>
+     *           <input type="radio" name="place" [value]="2" [(ngModel)]="checked" />
+     *           <span style="color: red">Red Container</span>
+     *       </label>
+     *       <label>
+     *           <input type="radio" name="place" [value]="3" [(ngModel)]="checked" />
+     *           <span style="color: blue">Blue Container</span>
+     *       </label>
+     *   </div>
+     *   <div class="example">
+     *     <div class="parent-content" [scrollLeft]="250" [scrollTop]="230">
+     *         <div class="content" [scrollLeft]="170" [scrollTop]="165">
+     *           <button #anchor class="anchor" (click)="show = !show">Toggle</button>
+     *           <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 3">
+     *             <ul>
+     *                 <li>Item1</li>
+     *                 <li>Item2</li>
+     *                 <li>Item3</li>
+     *             </ul>
+     *           </kendo-popup>
+     *           <span style="position: absolute; top: 400px; left: 400px">Bottom/Right</span>
+     *         </div>
+     *         <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 2">
+     *           <ul>
+     *               <li>Item1</li>
+     *               <li>Item2</li>
+     *               <li>Item3</li>
+     *           </ul>
+     *         </kendo-popup>
+     *         <span style="position: absolute; top: 600px; left: 600px">Bottom/Right</span>
+     *     </div>
+     *     <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 1">
+     *       <ul>
+     *           <li>Item1</li>
+     *           <li>Item2</li>
+     *           <li>Item3</li>
+     *       </ul>
+     *     </kendo-popup>
+     *   </div>
+     * `
+     * })
+     * class AppComponent {
+     *   public checked: number = 3;
+     *   public mode: string = 'absolute';
+     *   public show: boolean = true;
+     * }
+     * ```
+     */
+    positionMode: PositionMode;
+    /**
      * Specifies the absolute position of the element. The Popup opens next to that point.
@@ -96,3 +193,3 @@ *
      * For more information, refer to the section on
-     * [static alignment]({% slug overview_popup_kendouiforangular %}#toc-align-to-specific-static-points).
+     * [aligning to specific absolute points]({% slug overview_popup_kendouiforangular %}#toc-align-to-absolute-points).
      */
@@ -104,3 +201,3 @@ offset: Offset;
      * For more information, refer to the section on
-     * [scrolling outside the viewport]({% slug overview_popup_kendouiforangular %}#toc-set-behavior-when-outside-the-viewport).
+     * [closing the Popup after leaving the viewport]({% slug overview_popup_kendouiforangular %}#toc-closing-after-leaving-the-viewport).
      */
@@ -113,3 +210,3 @@ anchorViewportLeave: EventEmitter<any>;
     /**
-     * Fires after the component is opened and the open animation has ended.
+     * Fires after the component is opened and the opening animation ends.
      */
@@ -142,2 +239,3 @@ open: EventEmitter<any>;
     ngOnInit(): void;
+    ngOnChanges(changes: any): void;
     ngAfterViewChecked(): void;
@@ -153,2 +251,3 @@ ngOnDestroy(): void;
     private onScroll(isInViewPort);
+    private updateFixedClass();
 }

dist/es/popup.component.js

@@ -9,2 +9,4 @@ import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, trigger, style, transition, animate } from '@angular/core';
 var DEFAULT_OFFSET = { left: -10000, top: 0 };
+var ANIMATION_CONTAINER = 'k-animation-container';
+var ANIMATION_CONTAINER_FIXED = 'k-animation-container-fixed';
 /**
@@ -40,6 +42,6 @@ * Represents the Kendo UI Popup component for Angular.
         /**
-         * Controls the Popup animation. By default, the open and close animations are enabled.
+         * Controls the Popup animation. By default, the opening and closing animations are enabled.
          *
          * For more information, refer to the section on
-         * [animation control]({% slug overview_popup_kendouiforangular %}#toc-enable-and-disable-animations).
+         * [animation control]({% slug overview_popup_kendouiforangular %}#toc-animations).
          */
@@ -51,3 +53,3 @@ this.animate = true;
          * For more information, refer to the section on
-         * [positioning]({% slug overview_popup_kendouiforangular %}#toc-set-the-position).
+         * [positioning]({% slug overview_popup_kendouiforangular %}#toc-position).
          */
@@ -59,3 +61,3 @@ this.anchorAlign = { horizontal: 'left', vertical: 'bottom' };
          * For more information, refer to the section on
-         * [collisions]({% slug overview_popup_kendouiforangular %}#toc-set-behavior-when-outside-the-viewport).
+         * [viewport boundary detection]({% slug overview_popup_kendouiforangular %}#toc-viewport-boundary-detection).
          */
@@ -67,6 +69,102 @@ this.collision = { horizontal: 'fit', vertical: 'flip' };
          * For more information, refer to the section on
-         * [positioning]({% slug overview_popup_kendouiforangular %}#toc-set-the-position).
+         * [positioning]({% slug overview_popup_kendouiforangular %}#toc-position).
          */
         this.popupAlign = { horizontal: 'left', vertical: 'top' };
         /**
+         * Specifies the position mode of the component. By default the Popup uses *fixed* mode.
+         * Set the option to `absolute` to use an *absolute* positioning.
+         *
+         * > Use the 'absolute' positioning if mobile browsers with zoom support is targeted.
+         *
+         * @example
+         * ```html
+         * <style>
+         *  .parent-content {
+         *     position: relative;
+         *     width: 200px;
+         *     height: 200px;
+         *     overflow: auto;
+         *     margin: 200px auto;
+         *     border: 1px solid red;
+         *  }
+         *  .content {
+         *     position: relative;
+         *     width: 100px;
+         *     height: 100px;
+         *     overflow: auto;
+         *     margin: 300px;
+         *     border: 1px solid blue;
+         *  }
+         *  .anchor {
+         *     position: absolute;
+         *     top: 200px;
+         *     left: 200px;
+         *  }
+         * </style>
+         * ```
+         * ```ts
+         * @@Component({
+         * selector: 'my-app',
+         * template: `
+         *   <div class="example-config">
+         *      Position mode:
+         *      <label><input type="radio" value="fixed" [(ngModel)]="mode" /> Fixed</label>
+         *      <label><input type="radio" value="absolute" [(ngModel)]="mode" /> Absolute</label>
+         *   </div>
+         *   <div class="example-config">
+         *       Append to
+         *       <label>
+         *           <input type="radio" name="place" [value]="1" [(ngModel)]="checked" />
+         *           Root component
+         *       </label>
+         *       <label>
+         *           <input type="radio" name="place" [value]="2" [(ngModel)]="checked" />
+         *           <span style="color: red">Red Container</span>
+         *       </label>
+         *       <label>
+         *           <input type="radio" name="place" [value]="3" [(ngModel)]="checked" />
+         *           <span style="color: blue">Blue Container</span>
+         *       </label>
+         *   </div>
+         *   <div class="example">
+         *     <div class="parent-content" [scrollLeft]="250" [scrollTop]="230">
+         *         <div class="content" [scrollLeft]="170" [scrollTop]="165">
+         *           <button #anchor class="anchor" (click)="show = !show">Toggle</button>
+         *           <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 3">
+         *             <ul>
+         *                 <li>Item1</li>
+         *                 <li>Item2</li>
+         *                 <li>Item3</li>
+         *             </ul>
+         *           </kendo-popup>
+         *           <span style="position: absolute; top: 400px; left: 400px">Bottom/Right</span>
+         *         </div>
+         *         <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 2">
+         *           <ul>
+         *               <li>Item1</li>
+         *               <li>Item2</li>
+         *               <li>Item3</li>
+         *           </ul>
+         *         </kendo-popup>
+         *         <span style="position: absolute; top: 600px; left: 600px">Bottom/Right</span>
+         *     </div>
+         *     <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 1">
+         *       <ul>
+         *           <li>Item1</li>
+         *           <li>Item2</li>
+         *           <li>Item3</li>
+         *       </ul>
+         *     </kendo-popup>
+         *   </div>
+         * `
+         * })
+         * class AppComponent {
+         *   public checked: number = 3;
+         *   public mode: string = 'absolute';
+         *   public show: boolean = true;
+         * }
+         * ```
+         */
+        this.positionMode = 'fixed';
+        /**
          * Specifies the absolute position of the element. The Popup opens next to that point.
@@ -78,3 +176,3 @@ *
          * For more information, refer to the section on
-         * [static alignment]({% slug overview_popup_kendouiforangular %}#toc-align-to-specific-static-points).
+         * [aligning to specific absolute points]({% slug overview_popup_kendouiforangular %}#toc-align-to-absolute-points).
          */
@@ -86,3 +184,3 @@ this.offset = DEFAULT_OFFSET;
          * For more information, refer to the section on
-         * [scrolling outside the viewport]({% slug overview_popup_kendouiforangular %}#toc-set-behavior-when-outside-the-viewport).
+         * [closing the Popup after leaving the viewport]({% slug overview_popup_kendouiforangular %}#toc-closing-after-leaving-the-viewport).
          */
@@ -95,3 +193,3 @@ this.anchorViewportLeave = new EventEmitter();
         /**
-         * Fires after the component is opened and the open animation has ended.
+         * Fires after the component is opened and the opening animation ends.
          */
@@ -105,4 +203,4 @@ this.open = new EventEmitter();
         this.resolvedPromised = Promise.resolve(null);
-        this._renderer.addClass(container.nativeElement, 'k-animation-container');
-        this._renderer.addClass(container.nativeElement, 'k-animation-container-fixed');
+        this._renderer.addClass(container.nativeElement, ANIMATION_CONTAINER);
+        this.updateFixedClass();
     }
@@ -147,3 +245,10 @@ Object.defineProperty(PopupComponent.prototype, "offsetLeft", {
         this.hostZIndex = this._domService.zIndex(this.anchor, this.container);
+        this.updateFixedClass();
     };
+    PopupComponent.prototype.ngOnChanges = function (changes) {
+        if (!changes.positionMode) {
+            return;
+        }
+        this.updateFixedClass();
+    };
     PopupComponent.prototype.ngAfterViewChecked = function () {
@@ -194,3 +299,4 @@ var _this = this;
             elementAlign: this.popupAlign,
-            offset: this.offset
+            offset: this.offset,
+            positionMode: this.positionMode
         });
@@ -203,3 +309,4 @@ return this._positionService.positionElement({
             element: this.container,
-            elementAlign: this.popupAlign
+            elementAlign: this.popupAlign,
+            positionMode: this.positionMode
         });
@@ -218,2 +325,7 @@ };
     };
+    PopupComponent.prototype.updateFixedClass = function () {
+        var container = this.container.nativeElement;
+        var action = this.positionMode === 'fixed' ? 'addClass' : 'removeClass';
+        this._renderer[action](container, ANIMATION_CONTAINER_FIXED);
+    };
     return PopupComponent;
@@ -268,2 +380,3 @@ }());
     'popupClass': [{ type: Input },],
+    'positionMode': [{ type: Input },],
     'offset': [{ type: Input },],
@@ -270,0 +383,0 @@ 'anchorViewportLeave': [{ type: Output },],

dist/es/popup.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"PopupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => down, up => down",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["down => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => up, down => up",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["up => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]}]}]]}]]}],"exportAs":"kendo-popup","providers":[{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"}],"selector":"kendo-popup","template":"\n        <div class=\"k-popup\" [ngClass]=\"popupClass\" [@toggle]=\"direction\" (@toggle.done)=\"triggerOpen($event)\">\n            <ng-content></ng-content>\n            <ng-template [ngTemplateOutlet]=\"content\" [ngIf]=\"content\"></ng-template>\n        </div>\n     "}]}],"members":{"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"collision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorViewportLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offsetLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.left.px"]}]}],"offsetTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.top.px"]}]}],"getZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.z-index"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"triggerOpen":[{"__symbolic":"method"}],"reposition":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"getDirection":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PopupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => down, up => down",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["down => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => up, down => up",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["up => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]}]}]]}]]}],"exportAs":"kendo-popup","providers":[{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"}],"selector":"kendo-popup","template":"\n        <div class=\"k-popup\" [ngClass]=\"popupClass\" [@toggle]=\"direction\" (@toggle.done)=\"triggerOpen($event)\">\n            <ng-content></ng-content>\n            <ng-template [ngTemplateOutlet]=\"content\" [ngIf]=\"content\"></ng-template>\n        </div>\n     "}]}],"members":{"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"collision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorViewportLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offsetLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.left.px"]}]}],"offsetTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.top.px"]}]}],"getZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.z-index"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"triggerOpen":[{"__symbolic":"method"}],"reposition":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"getDirection":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"PopupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => down, up => down",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["down => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => up, down => up",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["up => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]}]}]]}]]}],"exportAs":"kendo-popup","providers":[{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"}],"selector":"kendo-popup","template":"\n        <div class=\"k-popup\" [ngClass]=\"popupClass\" [@toggle]=\"direction\" (@toggle.done)=\"triggerOpen($event)\">\n            <ng-content></ng-content>\n            <ng-template [ngTemplateOutlet]=\"content\" [ngIf]=\"content\"></ng-template>\n        </div>\n     "}]}],"members":{"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"collision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"positionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorViewportLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offsetLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.left.px"]}]}],"offsetTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.top.px"]}]}],"getZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.z-index"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"triggerOpen":[{"__symbolic":"method"}],"reposition":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"getDirection":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"updateFixedClass":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PopupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => down, up => down",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["down => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => up, down => up",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["up => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]}]}]]}]]}],"exportAs":"kendo-popup","providers":[{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"}],"selector":"kendo-popup","template":"\n        <div class=\"k-popup\" [ngClass]=\"popupClass\" [@toggle]=\"direction\" (@toggle.done)=\"triggerOpen($event)\">\n            <ng-content></ng-content>\n            <ng-template [ngTemplateOutlet]=\"content\" [ngIf]=\"content\"></ng-template>\n        </div>\n     "}]}],"members":{"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"collision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"positionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorViewportLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offsetLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.left.px"]}]}],"offsetTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.top.px"]}]}],"getZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.z-index"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"triggerOpen":[{"__symbolic":"method"}],"reposition":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"getDirection":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"updateFixedClass":[{"__symbolic":"method"}]}}}}]

dist/es/popup.service.d.ts

@@ -44,4 +44,4 @@ import { ApplicationRef, ComponentFactoryResolver, ElementRef, InjectionToken, Injector } from '@angular/core';
  *
- * For more information on how to use this class, refer to the article about
- * [`PopupService`]({% slug service_popup_kendouiforangular %}).
+ * For more information on how to use this class, refer to the article on
+ * the [Popup service]({% slug service_popup_kendouiforangular %}).
  *
@@ -74,3 +74,3 @@ * @export
      *
-     * @param {PopupSettings} options - The options that define the Popup.
+     * @param {PopupSettings} options - The options which define the Popup.
      * @returns {ComponentRef<PopupComponent>} - A reference to the Popup object.
@@ -136,3 +136,3 @@ *
     /**
-     * Projects the inputs onto the component.
+     * Projects the inputs on the component.
      *
@@ -139,0 +139,0 @@ * @param {ComponentRef<any>} component

dist/es/popup.service.js

@@ -43,4 +43,4 @@ import { ApplicationRef, ComponentFactoryResolver, ElementRef, InjectionToken, Injectable, Injector, Inject, Optional, TemplateRef } from '@angular/core';
  *
- * For more information on how to use this class, refer to the article about
- * [`PopupService`]({% slug service_popup_kendouiforangular %}).
+ * For more information on how to use this class, refer to the article on
+ * the [Popup service]({% slug service_popup_kendouiforangular %}).
  *
@@ -64,3 +64,3 @@ * @export
         get: function () {
-            //https://github.com/angular/angular/blob/4.0.x/packages/core/src/application_ref.ts#L571
+            // https://github.com/angular/angular/blob/4.0.x/packages/core/src/application_ref.ts#L571
             var rootComponents = this.applicationRef.components || [];
@@ -92,3 +92,3 @@ if (rootComponents[0]) {
      *
-     * @param {PopupSettings} options - The options that define the Popup.
+     * @param {PopupSettings} options - The options which define the Popup.
      * @returns {ComponentRef<PopupComponent>} - A reference to the Popup object.
@@ -139,3 +139,3 @@ *
             close: function () {
-                // XXX: Destroy is required due to this bug
+                // XXX: Destroy is required due to this bug:
                 // https://github.com/angular/angular/issues/15578
@@ -202,3 +202,3 @@ //
     /**
-     * Projects the inputs onto the component.
+     * Projects the inputs on the component.
      *
@@ -205,0 +205,0 @@ * @param {ComponentRef<any>} component

dist/es/services/align.service.js

@@ -12,13 +12,14 @@ import { Injectable } from '@angular/core';
     AlignService.prototype.alignElement = function (settings) {
-        var anchor = settings.anchor, element = settings.element, anchorAlign = settings.anchorAlign, elementAlign = settings.elementAlign, offset = settings.offset;
+        var anchor = settings.anchor, element = settings.element, anchorAlign = settings.anchorAlign, elementAlign = settings.elementAlign, offset = settings.offset, positionMode = settings.positionMode;
         var dom = this._dom;
-        var scrollOffset = dom.scrollPosition(element);
         var elementRect = dom.offset(element);
-        var anchorRect = removeStackingOffset(eitherRect(dom.offset(anchor), offset), dom.stackingElementOffset(element));
-        if (!anchor) {
-            anchorRect = dom.removeScroll(anchorRect, scrollOffset);
+        var anchorRect;
+        if (positionMode === 'fixed' || !dom.hasOffsetParent(element)) {
+            anchorRect = removeStackingOffset(eitherRect(dom.offset(anchor), offset), dom.stackingElementOffset(element));
+            if (!anchor) {
+                anchorRect = dom.removeScroll(anchorRect, dom.scrollPosition(element));
+            }
         }
-        else if (dom.isZoomed()) {
-            anchorRect = dom.addScroll(anchorRect, scrollOffset);
-            elementRect = dom.addScroll(elementRect, scrollOffset);
+        else {
+            anchorRect = eitherRect(dom.position(anchor, element), offset);
         }
@@ -25,0 +26,0 @@ return this._dom.align({

dist/es/services/dom.service.d.ts

@@ -13,6 +13,7 @@ import { ElementRef } from '@angular/core';
     isBodyOffset(el: ElementRef): boolean;
+    hasOffsetParent(el: ElementRef): boolean;
     offset(el: ElementRef): ElementRect;
     staticOffset(el: ElementRef): ElementRect;
     nativeElement(el: ElementRef): HTMLElement;
-    position(el: ElementRef): ElementRect;
+    position(element: ElementRef, popup: ElementRef): ElementRect;
     relativeOffset(el: ElementRef, currentLocation: OffsetPosition): ElementRect;
@@ -19,0 +20,0 @@ addScroll(rect: ElementRect, scroll: ScrollInfo): ElementRect;

dist/es/services/dom.service.js

 import { Injectable } from '@angular/core';
-import { align, applyLocationOffset, boundingOffset, getWindowViewPort, isBodyOffset, offset, position, restrictToView, addScroll, removeScroll, scrollPosition } from '@progress/kendo-popup-common';
+import { align, applyLocationOffset, boundingOffset, getWindowViewPort, isBodyOffset, offset, positionWithScroll, restrictToView, addScroll, removeScroll, scrollPosition, siblingContainer } from '@progress/kendo-popup-common';
 import { isDocumentAvailable, isWindowAvailable, HAS_RELATIVE_STACKING_CONTEXT, scrollableParents, zIndex } from '../util';
@@ -28,2 +28,8 @@ /**
     };
+    DOMService.prototype.hasOffsetParent = function (el) {
+        if (!el) {
+            return false;
+        }
+        return !!this.nativeElement(el).offsetParent;
+    };
     DOMService.prototype.offset = function (el) {
@@ -54,7 +60,9 @@ if (!el) {
     };
-    DOMService.prototype.position = function (el) {
-        if (!el) {
+    DOMService.prototype.position = function (element, popup) {
+        if (!element || !popup) {
             return null;
         }
-        return position(this.nativeElement(el));
+        var nativeEl = this.nativeElement(element);
+        var parentSibling = siblingContainer(nativeEl, this.nativeElement(popup));
+        return positionWithScroll(nativeEl, parentSibling);
     };
@@ -61,0 +69,0 @@ DOMService.prototype.relativeOffset = function (el, currentLocation) {

dist/es/services/dom.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DOMService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"addOffset":[{"__symbolic":"method"}],"align":[{"__symbolic":"method"}],"boundingOffset":[{"__symbolic":"method"}],"getWindow":[{"__symbolic":"method"}],"isBodyOffset":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"staticOffset":[{"__symbolic":"method"}],"nativeElement":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"relativeOffset":[{"__symbolic":"method"}],"addScroll":[{"__symbolic":"method"}],"removeScroll":[{"__symbolic":"method"}],"restrictToView":[{"__symbolic":"method"}],"scrollPosition":[{"__symbolic":"method"}],"scrollableParents":[{"__symbolic":"method"}],"stackingElementOffset":[{"__symbolic":"method"}],"getRelativeContextElement":[{"__symbolic":"method"}],"useRelativePosition":[{"__symbolic":"method"}],"windowViewPort":[{"__symbolic":"method"}],"zIndex":[{"__symbolic":"method"}],"zoomLevel":[{"__symbolic":"method"}],"isZoomed":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DOMService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"addOffset":[{"__symbolic":"method"}],"align":[{"__symbolic":"method"}],"boundingOffset":[{"__symbolic":"method"}],"getWindow":[{"__symbolic":"method"}],"isBodyOffset":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"staticOffset":[{"__symbolic":"method"}],"nativeElement":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"relativeOffset":[{"__symbolic":"method"}],"addScroll":[{"__symbolic":"method"}],"removeScroll":[{"__symbolic":"method"}],"restrictToView":[{"__symbolic":"method"}],"scrollPosition":[{"__symbolic":"method"}],"scrollableParents":[{"__symbolic":"method"}],"stackingElementOffset":[{"__symbolic":"method"}],"getRelativeContextElement":[{"__symbolic":"method"}],"useRelativePosition":[{"__symbolic":"method"}],"windowViewPort":[{"__symbolic":"method"}],"zIndex":[{"__symbolic":"method"}],"zoomLevel":[{"__symbolic":"method"}],"isZoomed":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DOMService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"addOffset":[{"__symbolic":"method"}],"align":[{"__symbolic":"method"}],"boundingOffset":[{"__symbolic":"method"}],"getWindow":[{"__symbolic":"method"}],"isBodyOffset":[{"__symbolic":"method"}],"hasOffsetParent":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"staticOffset":[{"__symbolic":"method"}],"nativeElement":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"relativeOffset":[{"__symbolic":"method"}],"addScroll":[{"__symbolic":"method"}],"removeScroll":[{"__symbolic":"method"}],"restrictToView":[{"__symbolic":"method"}],"scrollPosition":[{"__symbolic":"method"}],"scrollableParents":[{"__symbolic":"method"}],"stackingElementOffset":[{"__symbolic":"method"}],"getRelativeContextElement":[{"__symbolic":"method"}],"useRelativePosition":[{"__symbolic":"method"}],"windowViewPort":[{"__symbolic":"method"}],"zIndex":[{"__symbolic":"method"}],"zoomLevel":[{"__symbolic":"method"}],"isZoomed":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DOMService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"addOffset":[{"__symbolic":"method"}],"align":[{"__symbolic":"method"}],"boundingOffset":[{"__symbolic":"method"}],"getWindow":[{"__symbolic":"method"}],"isBodyOffset":[{"__symbolic":"method"}],"hasOffsetParent":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"staticOffset":[{"__symbolic":"method"}],"nativeElement":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"relativeOffset":[{"__symbolic":"method"}],"addScroll":[{"__symbolic":"method"}],"removeScroll":[{"__symbolic":"method"}],"restrictToView":[{"__symbolic":"method"}],"scrollPosition":[{"__symbolic":"method"}],"scrollableParents":[{"__symbolic":"method"}],"stackingElementOffset":[{"__symbolic":"method"}],"getRelativeContextElement":[{"__symbolic":"method"}],"useRelativePosition":[{"__symbolic":"method"}],"windowViewPort":[{"__symbolic":"method"}],"zIndex":[{"__symbolic":"method"}],"zoomLevel":[{"__symbolic":"method"}],"isZoomed":[{"__symbolic":"method"}]}}}}]

dist/es/services/position.service.js

@@ -12,3 +12,3 @@ import { Injectable } from '@angular/core';
     PositionService.prototype.positionElement = function (settings) {
-        var anchor = settings.anchor, currentLocation = settings.currentLocation, element = settings.element, anchorAlign = settings.anchorAlign, elementAlign = settings.elementAlign, collisions = settings.collisions;
+        var anchor = settings.anchor, currentLocation = settings.currentLocation, positionMode = settings.positionMode, element = settings.element, anchorAlign = settings.anchorAlign, elementAlign = settings.elementAlign, collisions = settings.collisions;
         var dom = this._dom;
@@ -21,5 +21,5 @@ var relative = dom.useRelativePosition(element);
         var initialElementRect = replaceOffset(dom.staticOffset(element), beforeRestrictionOffset);
-        var elementRect = dom.isZoomed() ?
-            dom.removeScroll(initialElementRect, dom.scrollPosition(element)) :
-            initialElementRect;
+        var elementRect = positionMode === 'fixed' ?
+            initialElementRect :
+            dom.removeScroll(initialElementRect, dom.scrollPosition(element));
         var result = this._dom.restrictToView({
@@ -26,0 +26,0 @@ anchorAlign: anchorAlign,

dist/es/util.js

@@ -0,1 +1,2 @@
+import { parents, siblingContainer } from '@progress/kendo-popup-common';
 /**
@@ -115,40 +116,2 @@ * @hidden
 export var HAS_RELATIVE_STACKING_CONTEXT = hasRelativeStackingContext();
-var parents = function (element, until) {
-    var result = [];
-    var next = element.parentNode;
-    while (next) {
-        result.push(next);
-        if (next === until) {
-            break;
-        }
-        next = next.parentNode;
-    }
-    return result;
-};
-var siblings = function (element) {
-    var result = [];
-    var sibling = element.parentNode.firstElementChild;
-    while (sibling) {
-        if (sibling !== element) {
-            result.push(sibling);
-        }
-        sibling = sibling.nextElementSibling;
-    }
-    return result;
-};
-var siblingContainer = function (anchor, container) {
-    var parentElements = parents(anchor);
-    var containerElement = container;
-    var siblingElements;
-    var result;
-    while (containerElement) {
-        siblingElements = siblings(containerElement);
-        result = parentElements.reduce(function (list, p) { return list.concat(siblingElements.filter(function (s) { return s === p; })); }, [])[0];
-        if (result) {
-            break;
-        }
-        containerElement = containerElement.parentElement;
-    }
-    return result;
-};
 /**
@@ -155,0 +118,0 @@ * @hidden

dist/es/util.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"eitherRect":{"__symbolic":"error","message":"Function call not supported","line":5,"character":26},"replaceOffset":{"__symbolic":"error","message":"Function call not supported","line":16,"character":29},"removeStackingOffset":{"__symbolic":"error","message":"Function call not supported","line":32,"character":36},"isDifferentOffset":{"__symbolic":"error","message":"Function call not supported","line":48,"character":33},"isDocumentAvailable":{"__symbolic":"error","message":"Function call not supported","line":58,"character":35},"isWindowAvailable":{"__symbolic":"error","message":"Function call not supported","line":65,"character":33},"hasBoundingRect":{"__symbolic":"error","message":"Function call not supported","line":72,"character":31},"OVERFLOW_REGEXP":{"__symbolic":"error","message":"Expression form not supported","line":77,"character":31},"scrollableParents":{"__symbolic":"error","message":"Function call not supported","line":87,"character":33},"FRAME_DURATION":16.666666666666668,"hasRelativeStackingContext":{"__symbolic":"error","message":"Function call not supported","line":115,"character":42},"HAS_RELATIVE_STACKING_CONTEXT":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"hasRelativeStackingContext"}},"zIndex":{"__symbolic":"error","message":"Function call not supported","line":192,"character":22}}},{"__symbolic":"module","version":1,"metadata":{"eitherRect":{"__symbolic":"error","message":"Function call not supported","line":5,"character":26},"replaceOffset":{"__symbolic":"error","message":"Function call not supported","line":16,"character":29},"removeStackingOffset":{"__symbolic":"error","message":"Function call not supported","line":32,"character":36},"isDifferentOffset":{"__symbolic":"error","message":"Function call not supported","line":48,"character":33},"isDocumentAvailable":{"__symbolic":"error","message":"Function call not supported","line":58,"character":35},"isWindowAvailable":{"__symbolic":"error","message":"Function call not supported","line":65,"character":33},"hasBoundingRect":{"__symbolic":"error","message":"Function call not supported","line":72,"character":31},"OVERFLOW_REGEXP":{"__symbolic":"error","message":"Expression form not supported","line":77,"character":31},"scrollableParents":{"__symbolic":"error","message":"Function call not supported","line":87,"character":33},"FRAME_DURATION":16.666666666666668,"hasRelativeStackingContext":{"__symbolic":"error","message":"Function call not supported","line":115,"character":42},"HAS_RELATIVE_STACKING_CONTEXT":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"hasRelativeStackingContext"}},"zIndex":{"__symbolic":"error","message":"Function call not supported","line":192,"character":22}}}]
+[{"__symbolic":"module","version":3,"metadata":{"eitherRect":{"__symbolic":"error","message":"Function call not supported","line":5,"character":26},"replaceOffset":{"__symbolic":"error","message":"Function call not supported","line":16,"character":29},"removeStackingOffset":{"__symbolic":"error","message":"Function call not supported","line":32,"character":36},"isDifferentOffset":{"__symbolic":"error","message":"Function call not supported","line":48,"character":33},"isDocumentAvailable":{"__symbolic":"error","message":"Function call not supported","line":58,"character":35},"isWindowAvailable":{"__symbolic":"error","message":"Function call not supported","line":65,"character":33},"hasBoundingRect":{"__symbolic":"error","message":"Function call not supported","line":72,"character":31},"OVERFLOW_REGEXP":{"__symbolic":"error","message":"Expression form not supported","line":77,"character":31},"scrollableParents":{"__symbolic":"error","message":"Function call not supported","line":87,"character":33},"FRAME_DURATION":16.666666666666668,"hasRelativeStackingContext":{"__symbolic":"error","message":"Function call not supported","line":115,"character":42},"HAS_RELATIVE_STACKING_CONTEXT":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"hasRelativeStackingContext"}},"zIndex":{"__symbolic":"error","message":"Function call not supported","line":140,"character":22}}},{"__symbolic":"module","version":1,"metadata":{"eitherRect":{"__symbolic":"error","message":"Function call not supported","line":5,"character":26},"replaceOffset":{"__symbolic":"error","message":"Function call not supported","line":16,"character":29},"removeStackingOffset":{"__symbolic":"error","message":"Function call not supported","line":32,"character":36},"isDifferentOffset":{"__symbolic":"error","message":"Function call not supported","line":48,"character":33},"isDocumentAvailable":{"__symbolic":"error","message":"Function call not supported","line":58,"character":35},"isWindowAvailable":{"__symbolic":"error","message":"Function call not supported","line":65,"character":33},"hasBoundingRect":{"__symbolic":"error","message":"Function call not supported","line":72,"character":31},"OVERFLOW_REGEXP":{"__symbolic":"error","message":"Expression form not supported","line":77,"character":31},"scrollableParents":{"__symbolic":"error","message":"Function call not supported","line":87,"character":33},"FRAME_DURATION":16.666666666666668,"hasRelativeStackingContext":{"__symbolic":"error","message":"Function call not supported","line":115,"character":42},"HAS_RELATIVE_STACKING_CONTEXT":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"hasRelativeStackingContext"}},"zIndex":{"__symbolic":"error","message":"Function call not supported","line":140,"character":22}}}]

dist/npm/main.d.ts

@@ -6,4 +6,5 @@ export { Align } from './models/align.interface';
 export { PopupRef } from './models/popup-ref';
+export { PositionMode } from './models/position-mode';
 export { PopupService, POPUP_CONTAINER } from './popup.service';
 export { PopupComponent } from './popup.component';
 export { PopupModule } from './popup.module';

dist/npm/main.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./models/align.interface","export":["Align"]},{"from":"./models/collision.interface","export":["Collision"]},{"from":"./models/offset.interface","export":["Offset"]},{"from":"./models/popup-settings","export":["PopupSettings"]},{"from":"./models/popup-ref","export":["PopupRef"]},{"from":"./popup.service","export":["PopupService","POPUP_CONTAINER"]},{"from":"./popup.component","export":["PopupComponent"]},{"from":"./popup.module","export":["PopupModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./models/align.interface","export":["Align"]},{"from":"./models/collision.interface","export":["Collision"]},{"from":"./models/offset.interface","export":["Offset"]},{"from":"./models/popup-settings","export":["PopupSettings"]},{"from":"./models/popup-ref","export":["PopupRef"]},{"from":"./popup.service","export":["PopupService","POPUP_CONTAINER"]},{"from":"./popup.component","export":["PopupComponent"]},{"from":"./popup.module","export":["PopupModule"]}]}]
+[{"__symbolic":"module","version":3,"metadata":{},"exports":[{"from":"./models/align.interface","export":["Align"]},{"from":"./models/collision.interface","export":["Collision"]},{"from":"./models/offset.interface","export":["Offset"]},{"from":"./models/popup-settings","export":["PopupSettings"]},{"from":"./models/popup-ref","export":["PopupRef"]},{"from":"./models/position-mode","export":["PositionMode"]},{"from":"./popup.service","export":["PopupService","POPUP_CONTAINER"]},{"from":"./popup.component","export":["PopupComponent"]},{"from":"./popup.module","export":["PopupModule"]}]},{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./models/align.interface","export":["Align"]},{"from":"./models/collision.interface","export":["Collision"]},{"from":"./models/offset.interface","export":["Offset"]},{"from":"./models/popup-settings","export":["PopupSettings"]},{"from":"./models/popup-ref","export":["PopupRef"]},{"from":"./models/position-mode","export":["PositionMode"]},{"from":"./popup.service","export":["PopupService","POPUP_CONTAINER"]},{"from":"./popup.component","export":["PopupComponent"]},{"from":"./popup.module","export":["PopupModule"]}]}]

dist/npm/models/align-element-settings.interface.d.ts

 import { ElementRef } from '@angular/core';
 import { AlignStrategy, OffsetPosition } from '@progress/kendo-popup-common';
+import { PositionMode } from './position-mode';
 /**
@@ -12,2 +13,3 @@ * @hidden
     offset?: OffsetPosition;
+    positionMode?: PositionMode;
 }

dist/npm/models/align.interface.d.ts

@@ -7,3 +7,3 @@ import { AlignStrategy } from '@progress/kendo-popup-common';
     /**
-     * Defines the possible horizontal point values relative to the anchor or the popup.
+     * Defines the possible horizontal point values that are relative to the anchor or the Popup.
      *
@@ -17,3 +17,3 @@ * The available options are:
     /**
-     * Defines the possible vertical point values relative to the anchor or the Popup.
+     * Defines the possible vertical point values that are relative to the anchor or the Popup.
      *
@@ -20,0 +20,0 @@ * The available options are:

dist/npm/models/popup-ref.d.ts

 import { ComponentRef, EventEmitter } from '@angular/core';
 import { PopupComponent } from '../popup.component';
 /**
- * Holds references to the Popup object instance.
- * Controls the Popups that have been opened through the `PopupService`.
+ * Holds references to the object instance of the Popup.
+ * Controls the Popups which are opened through `PopupService`.
  *
@@ -21,7 +21,7 @@ * For an example on sample usage, refer to the
      * A reference to the child component of the Popup.
-     * Available when the Popup is opened with [component content]({% slug service_dialog_kendouiforangular %}#toc-using-components).
+     * Available when the Popup is opened with [`content`]({% slug service_dialog_kendouiforangular %}#toc-using-components).
      */
     content: ComponentRef<any>;
     /**
-     * Closes and destroys the Popup component.
+     * Closes and destroys the Popup.
      */
@@ -33,3 +33,3 @@ close: Function;
      * For more information, refer to the section on
-     * [scrolling outside the viewport]({% slug overview_popup_kendouiforangular %}#toc-viewport-boundary-detection).
+     * [closing the Popup after leaving the viewport]({% slug overview_popup_kendouiforangular %}#toc-closing-after-leaving-the-viewport).
      */
@@ -42,5 +42,5 @@ popupAnchorViewportLeave: EventEmitter<any>;
     /**
-     * Fires after the component is opened and the open animation has ended.
+     * Fires after the component is opened and the opening animation ends.
      */
     popupOpen: EventEmitter<any>;
 }

dist/npm/models/popup-settings.d.ts

@@ -5,4 +5,5 @@ import { ElementRef, TemplateRef, ViewContainerRef } from '@angular/core';
 import { Offset } from './offset.interface';
+import { PositionMode } from './position-mode';
 /**
- * The settings that can be used when the Popup is opened through `PopupService`.
+ * The settings for the Popup when the Popup is opened through `PopupService`.
  *
@@ -21,3 +22,3 @@ * For an example on sample usage, refer to the
     /**
-     * Specifies the element that will be used as an anchor. The Popup opens next to that element.
+     * Specifies the element which will be used as an anchor. The Popup opens next to that element.
      */
@@ -30,6 +31,2 @@ anchor?: ElementRef;
     /**
-     * Defines the content of the Popup.
-     */
-    content?: TemplateRef<any> | Function;
-    /**
      * Specifies the anchor pivot point.
@@ -42,9 +39,20 @@ *
     /**
+     * Defines the content of the Popup.
+     */
+    content?: TemplateRef<any> | Function;
+    /**
      * Configures the collision behavior of the Popup.
      *
-     * For more information, refer to the section on
-     * [collisions]({% slug overview_popup_kendouiforangular %}#toc-viewport-boudary-detection).
+     * For more information, refer to the section on the
+     * [viewport boundary detection]({% slug overview_popup_kendouiforangular %}#toc-viewport-boundary-detection).
      */
     collision?: Collision;
     /**
+     * Specifies the position mode of the component. By default the popup uses a *fixed* positioning.
+     * Set the option to `absolute` to use an *absolute* positioning.
+     *
+     * > Use the 'absolute' positioning if mobile browsers with zoom should be supported.
+     */
+    positionMode?: PositionMode;
+    /**
      * Specifies the pivot point of the Popup.
@@ -57,3 +65,3 @@ *
     /**
-     * Specifies a list of CSS classes to be added to the internal animated element.
+     * Specifies a list of CSS classes that will be added to the internal animated element.
      *
@@ -63,3 +71,3 @@ * > To style the content of the Popup, use this property binding.
      * For more information, refer to the section on
-     * [appearance control]({% slug overview_popup_kendouiforangular %}#toc-styling).
+     * [styling]({% slug overview_popup_kendouiforangular %}#toc-styling).
      */
@@ -70,9 +78,9 @@ popupClass?: string | Array<string> | Object;
      *
-     * The Popup pivot point is defined by the `popupAlign` configuration option.
+     * The pivot point of the Popup is defined by the `popupAlign` configuration option.
      * The boundary detection is applied by using the window viewport.
      *
      * For more information, refer to the section on
-     * [static alignment]({% slug overview_popup_kendouiforangular %}#toc-to-specific-absolute-points).
+     * [aligning to specific absolute points]({% slug overview_popup_kendouiforangular %}#toc-align-to-absolute-points).
      */
     offset?: Offset;
 }

dist/npm/models/position-element-settings.interface.d.ts

 import { ElementRef } from '@angular/core';
 import { AlignStrategy, CollisionStrategy, OffsetPosition, ViewPort } from '@progress/kendo-popup-common';
+import { PositionMode } from './position-mode';
 /**
@@ -13,3 +14,4 @@ * @hidden
     elementAlign: AlignStrategy;
+    positionMode?: PositionMode;
     viewPort?: ViewPort;
 }

dist/npm/popup.component.d.ts

@@ -1,5 +0,6 @@
-import { AfterViewChecked, ChangeDetectorRef, ElementRef, EventEmitter, OnInit, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
+import { AfterViewChecked, ChangeDetectorRef, ElementRef, EventEmitter, OnInit, OnChanges, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
 import { Align } from './models/align.interface';
 import { Collision } from './models/collision.interface';
 import { Offset } from './models/offset.interface';
+import { PositionMode } from './models/position-mode';
 import { AlignService } from './services/align.service';
@@ -29,3 +30,3 @@ import { DOMService } from './services/dom.service';
  */
-export declare class PopupComponent implements AfterViewChecked, OnInit, OnDestroy {
+export declare class PopupComponent implements AfterViewChecked, OnInit, OnChanges, OnDestroy {
     container: ElementRef;
@@ -40,6 +41,6 @@ private _alignService;
     /**
-     * Controls the Popup animation. By default, the open and close animations are enabled.
+     * Controls the Popup animation. By default, the opening and closing animations are enabled.
      *
      * For more information, refer to the section on
-     * [animation control]({% slug overview_popup_kendouiforangular %}#toc-enable-and-disable-animations).
+     * [animation control]({% slug overview_popup_kendouiforangular %}#toc-animations).
      */
@@ -51,3 +52,3 @@ animate: boolean;
      * For more information, refer to the section on the
-     * [anchor]({% slug overview_popup_kendouiforangular %}#toc-align-to-specific-components).
+     * [aligning to specific components]({% slug overview_popup_kendouiforangular %}#toc-align-to-components).
      */
@@ -59,3 +60,3 @@ anchor: ElementRef;
      * For more information, refer to the section on
-     * [positioning]({% slug overview_popup_kendouiforangular %}#toc-set-the-position).
+     * [positioning]({% slug overview_popup_kendouiforangular %}#toc-position).
      */
@@ -67,3 +68,3 @@ anchorAlign: Align;
      * For more information, refer to the section on
-     * [collisions]({% slug overview_popup_kendouiforangular %}#toc-set-behavior-when-outside-the-viewport).
+     * [viewport boundary detection]({% slug overview_popup_kendouiforangular %}#toc-viewport-boundary-detection).
      */
@@ -75,3 +76,3 @@ collision: Collision;
      * For more information, refer to the section on
-     * [positioning]({% slug overview_popup_kendouiforangular %}#toc-set-the-position).
+     * [positioning]({% slug overview_popup_kendouiforangular %}#toc-position).
      */
@@ -82,9 +83,105 @@ popupAlign: Align;
      *
-     * > If the content of the Popup needs to be styled, use this property binding.
+     * > For styling the content of the Popup, use this property binding.
      *
      * For more information, refer to the section on
-     * [appearance control]({% slug overview_popup_kendouiforangular %}#toc-set-the-styles).
+     * [styling]({% slug overview_popup_kendouiforangular %}#toc-styling).
      */
     popupClass: string | Array<string> | Object;
     /**
+     * Specifies the position mode of the component. By default the Popup uses *fixed* mode.
+     * Set the option to `absolute` to use an *absolute* positioning.
+     *
+     * > Use the 'absolute' positioning if mobile browsers with zoom support is targeted.
+     *
+     * @example
+     * ```html
+     * <style>
+     *  .parent-content {
+     *     position: relative;
+     *     width: 200px;
+     *     height: 200px;
+     *     overflow: auto;
+     *     margin: 200px auto;
+     *     border: 1px solid red;
+     *  }
+     *  .content {
+     *     position: relative;
+     *     width: 100px;
+     *     height: 100px;
+     *     overflow: auto;
+     *     margin: 300px;
+     *     border: 1px solid blue;
+     *  }
+     *  .anchor {
+     *     position: absolute;
+     *     top: 200px;
+     *     left: 200px;
+     *  }
+     * </style>
+     * ```
+     * ```ts
+     * @@Component({
+     * selector: 'my-app',
+     * template: `
+     *   <div class="example-config">
+     *      Position mode:
+     *      <label><input type="radio" value="fixed" [(ngModel)]="mode" /> Fixed</label>
+     *      <label><input type="radio" value="absolute" [(ngModel)]="mode" /> Absolute</label>
+     *   </div>
+     *   <div class="example-config">
+     *       Append to
+     *       <label>
+     *           <input type="radio" name="place" [value]="1" [(ngModel)]="checked" />
+     *           Root component
+     *       </label>
+     *       <label>
+     *           <input type="radio" name="place" [value]="2" [(ngModel)]="checked" />
+     *           <span style="color: red">Red Container</span>
+     *       </label>
+     *       <label>
+     *           <input type="radio" name="place" [value]="3" [(ngModel)]="checked" />
+     *           <span style="color: blue">Blue Container</span>
+     *       </label>
+     *   </div>
+     *   <div class="example">
+     *     <div class="parent-content" [scrollLeft]="250" [scrollTop]="230">
+     *         <div class="content" [scrollLeft]="170" [scrollTop]="165">
+     *           <button #anchor class="anchor" (click)="show = !show">Toggle</button>
+     *           <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 3">
+     *             <ul>
+     *                 <li>Item1</li>
+     *                 <li>Item2</li>
+     *                 <li>Item3</li>
+     *             </ul>
+     *           </kendo-popup>
+     *           <span style="position: absolute; top: 400px; left: 400px">Bottom/Right</span>
+     *         </div>
+     *         <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 2">
+     *           <ul>
+     *               <li>Item1</li>
+     *               <li>Item2</li>
+     *               <li>Item3</li>
+     *           </ul>
+     *         </kendo-popup>
+     *         <span style="position: absolute; top: 600px; left: 600px">Bottom/Right</span>
+     *     </div>
+     *     <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 1">
+     *       <ul>
+     *           <li>Item1</li>
+     *           <li>Item2</li>
+     *           <li>Item3</li>
+     *       </ul>
+     *     </kendo-popup>
+     *   </div>
+     * `
+     * })
+     * class AppComponent {
+     *   public checked: number = 3;
+     *   public mode: string = 'absolute';
+     *   public show: boolean = true;
+     * }
+     * ```
+     */
+    positionMode: PositionMode;
+    /**
      * Specifies the absolute position of the element. The Popup opens next to that point.
@@ -96,3 +193,3 @@ *
      * For more information, refer to the section on
-     * [static alignment]({% slug overview_popup_kendouiforangular %}#toc-align-to-specific-static-points).
+     * [aligning to specific absolute points]({% slug overview_popup_kendouiforangular %}#toc-align-to-absolute-points).
      */
@@ -104,3 +201,3 @@ offset: Offset;
      * For more information, refer to the section on
-     * [scrolling outside the viewport]({% slug overview_popup_kendouiforangular %}#toc-set-behavior-when-outside-the-viewport).
+     * [closing the Popup after leaving the viewport]({% slug overview_popup_kendouiforangular %}#toc-closing-after-leaving-the-viewport).
      */
@@ -113,3 +210,3 @@ anchorViewportLeave: EventEmitter<any>;
     /**
-     * Fires after the component is opened and the open animation has ended.
+     * Fires after the component is opened and the opening animation ends.
      */
@@ -142,2 +239,3 @@ open: EventEmitter<any>;
     ngOnInit(): void;
+    ngOnChanges(changes: any): void;
     ngAfterViewChecked(): void;
@@ -153,2 +251,3 @@ ngOnDestroy(): void;
     private onScroll(isInViewPort);
+    private updateFixedClass();
 }

dist/npm/popup.component.js

@@ -11,2 +11,4 @@ "use strict";
 var DEFAULT_OFFSET = { left: -10000, top: 0 };
+var ANIMATION_CONTAINER = 'k-animation-container';
+var ANIMATION_CONTAINER_FIXED = 'k-animation-container-fixed';
 /**
@@ -42,6 +44,6 @@ * Represents the Kendo UI Popup component for Angular.
         /**
-         * Controls the Popup animation. By default, the open and close animations are enabled.
+         * Controls the Popup animation. By default, the opening and closing animations are enabled.
          *
          * For more information, refer to the section on
-         * [animation control]({% slug overview_popup_kendouiforangular %}#toc-enable-and-disable-animations).
+         * [animation control]({% slug overview_popup_kendouiforangular %}#toc-animations).
          */
@@ -53,3 +55,3 @@ this.animate = true;
          * For more information, refer to the section on
-         * [positioning]({% slug overview_popup_kendouiforangular %}#toc-set-the-position).
+         * [positioning]({% slug overview_popup_kendouiforangular %}#toc-position).
          */
@@ -61,3 +63,3 @@ this.anchorAlign = { horizontal: 'left', vertical: 'bottom' };
          * For more information, refer to the section on
-         * [collisions]({% slug overview_popup_kendouiforangular %}#toc-set-behavior-when-outside-the-viewport).
+         * [viewport boundary detection]({% slug overview_popup_kendouiforangular %}#toc-viewport-boundary-detection).
          */
@@ -69,6 +71,102 @@ this.collision = { horizontal: 'fit', vertical: 'flip' };
          * For more information, refer to the section on
-         * [positioning]({% slug overview_popup_kendouiforangular %}#toc-set-the-position).
+         * [positioning]({% slug overview_popup_kendouiforangular %}#toc-position).
          */
         this.popupAlign = { horizontal: 'left', vertical: 'top' };
         /**
+         * Specifies the position mode of the component. By default the Popup uses *fixed* mode.
+         * Set the option to `absolute` to use an *absolute* positioning.
+         *
+         * > Use the 'absolute' positioning if mobile browsers with zoom support is targeted.
+         *
+         * @example
+         * ```html
+         * <style>
+         *  .parent-content {
+         *     position: relative;
+         *     width: 200px;
+         *     height: 200px;
+         *     overflow: auto;
+         *     margin: 200px auto;
+         *     border: 1px solid red;
+         *  }
+         *  .content {
+         *     position: relative;
+         *     width: 100px;
+         *     height: 100px;
+         *     overflow: auto;
+         *     margin: 300px;
+         *     border: 1px solid blue;
+         *  }
+         *  .anchor {
+         *     position: absolute;
+         *     top: 200px;
+         *     left: 200px;
+         *  }
+         * </style>
+         * ```
+         * ```ts
+         * @@Component({
+         * selector: 'my-app',
+         * template: `
+         *   <div class="example-config">
+         *      Position mode:
+         *      <label><input type="radio" value="fixed" [(ngModel)]="mode" /> Fixed</label>
+         *      <label><input type="radio" value="absolute" [(ngModel)]="mode" /> Absolute</label>
+         *   </div>
+         *   <div class="example-config">
+         *       Append to
+         *       <label>
+         *           <input type="radio" name="place" [value]="1" [(ngModel)]="checked" />
+         *           Root component
+         *       </label>
+         *       <label>
+         *           <input type="radio" name="place" [value]="2" [(ngModel)]="checked" />
+         *           <span style="color: red">Red Container</span>
+         *       </label>
+         *       <label>
+         *           <input type="radio" name="place" [value]="3" [(ngModel)]="checked" />
+         *           <span style="color: blue">Blue Container</span>
+         *       </label>
+         *   </div>
+         *   <div class="example">
+         *     <div class="parent-content" [scrollLeft]="250" [scrollTop]="230">
+         *         <div class="content" [scrollLeft]="170" [scrollTop]="165">
+         *           <button #anchor class="anchor" (click)="show = !show">Toggle</button>
+         *           <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 3">
+         *             <ul>
+         *                 <li>Item1</li>
+         *                 <li>Item2</li>
+         *                 <li>Item3</li>
+         *             </ul>
+         *           </kendo-popup>
+         *           <span style="position: absolute; top: 400px; left: 400px">Bottom/Right</span>
+         *         </div>
+         *         <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 2">
+         *           <ul>
+         *               <li>Item1</li>
+         *               <li>Item2</li>
+         *               <li>Item3</li>
+         *           </ul>
+         *         </kendo-popup>
+         *         <span style="position: absolute; top: 600px; left: 600px">Bottom/Right</span>
+         *     </div>
+         *     <kendo-popup [positionMode]="mode" [anchor]="anchor" (anchorViewportLeave)="show=false" *ngIf="show && checked === 1">
+         *       <ul>
+         *           <li>Item1</li>
+         *           <li>Item2</li>
+         *           <li>Item3</li>
+         *       </ul>
+         *     </kendo-popup>
+         *   </div>
+         * `
+         * })
+         * class AppComponent {
+         *   public checked: number = 3;
+         *   public mode: string = 'absolute';
+         *   public show: boolean = true;
+         * }
+         * ```
+         */
+        this.positionMode = 'fixed';
+        /**
          * Specifies the absolute position of the element. The Popup opens next to that point.
@@ -80,3 +178,3 @@ *
          * For more information, refer to the section on
-         * [static alignment]({% slug overview_popup_kendouiforangular %}#toc-align-to-specific-static-points).
+         * [aligning to specific absolute points]({% slug overview_popup_kendouiforangular %}#toc-align-to-absolute-points).
          */
@@ -88,3 +186,3 @@ this.offset = DEFAULT_OFFSET;
          * For more information, refer to the section on
-         * [scrolling outside the viewport]({% slug overview_popup_kendouiforangular %}#toc-set-behavior-when-outside-the-viewport).
+         * [closing the Popup after leaving the viewport]({% slug overview_popup_kendouiforangular %}#toc-closing-after-leaving-the-viewport).
          */
@@ -97,3 +195,3 @@ this.anchorViewportLeave = new core_1.EventEmitter();
         /**
-         * Fires after the component is opened and the open animation has ended.
+         * Fires after the component is opened and the opening animation ends.
          */
@@ -107,4 +205,4 @@ this.open = new core_1.EventEmitter();
         this.resolvedPromised = Promise.resolve(null);
-        this._renderer.addClass(container.nativeElement, 'k-animation-container');
-        this._renderer.addClass(container.nativeElement, 'k-animation-container-fixed');
+        this._renderer.addClass(container.nativeElement, ANIMATION_CONTAINER);
+        this.updateFixedClass();
     }
@@ -149,3 +247,10 @@ Object.defineProperty(PopupComponent.prototype, "offsetLeft", {
         this.hostZIndex = this._domService.zIndex(this.anchor, this.container);
+        this.updateFixedClass();
     };
+    PopupComponent.prototype.ngOnChanges = function (changes) {
+        if (!changes.positionMode) {
+            return;
+        }
+        this.updateFixedClass();
+    };
     PopupComponent.prototype.ngAfterViewChecked = function () {
@@ -196,3 +301,4 @@ var _this = this;
             elementAlign: this.popupAlign,
-            offset: this.offset
+            offset: this.offset,
+            positionMode: this.positionMode
         });
@@ -205,3 +311,4 @@ return this._positionService.positionElement({
             element: this.container,
-            elementAlign: this.popupAlign
+            elementAlign: this.popupAlign,
+            positionMode: this.positionMode
         });
@@ -220,2 +327,7 @@ };
     };
+    PopupComponent.prototype.updateFixedClass = function () {
+        var container = this.container.nativeElement;
+        var action = this.positionMode === 'fixed' ? 'addClass' : 'removeClass';
+        this._renderer[action](container, ANIMATION_CONTAINER_FIXED);
+    };
     return PopupComponent;
@@ -269,2 +381,3 @@ }());
     'popupClass': [{ type: core_1.Input },],
+    'positionMode': [{ type: core_1.Input },],
     'offset': [{ type: core_1.Input },],
@@ -271,0 +384,0 @@ 'anchorViewportLeave': [{ type: core_1.Output },],

dist/npm/popup.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"PopupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => down, up => down",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["down => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => up, down => up",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["up => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]}]}]]}]]}],"exportAs":"kendo-popup","providers":[{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"}],"selector":"kendo-popup","template":"\n        <div class=\"k-popup\" [ngClass]=\"popupClass\" [@toggle]=\"direction\" (@toggle.done)=\"triggerOpen($event)\">\n            <ng-content></ng-content>\n            <ng-template [ngTemplateOutlet]=\"content\" [ngIf]=\"content\"></ng-template>\n        </div>\n     "}]}],"members":{"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"collision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorViewportLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offsetLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.left.px"]}]}],"offsetTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.top.px"]}]}],"getZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.z-index"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"triggerOpen":[{"__symbolic":"method"}],"reposition":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"getDirection":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PopupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => down, up => down",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["down => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => up, down => up",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["up => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]}]}]]}]]}],"exportAs":"kendo-popup","providers":[{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"}],"selector":"kendo-popup","template":"\n        <div class=\"k-popup\" [ngClass]=\"popupClass\" [@toggle]=\"direction\" (@toggle.done)=\"triggerOpen($event)\">\n            <ng-content></ng-content>\n            <ng-template [ngTemplateOutlet]=\"content\" [ngIf]=\"content\"></ng-template>\n        </div>\n     "}]}],"members":{"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"collision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorViewportLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offsetLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.left.px"]}]}],"offsetTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.top.px"]}]}],"getZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.z-index"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"triggerOpen":[{"__symbolic":"method"}],"reposition":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"getDirection":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"PopupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => down, up => down",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["down => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => up, down => up",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["up => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]}]}]]}]]}],"exportAs":"kendo-popup","providers":[{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"}],"selector":"kendo-popup","template":"\n        <div class=\"k-popup\" [ngClass]=\"popupClass\" [@toggle]=\"direction\" (@toggle.done)=\"triggerOpen($event)\">\n            <ng-content></ng-content>\n            <ng-template [ngTemplateOutlet]=\"content\" [ngIf]=\"content\"></ng-template>\n        </div>\n     "}]}],"members":{"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"collision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"positionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorViewportLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offsetLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.left.px"]}]}],"offsetTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.top.px"]}]}],"getZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.z-index"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"triggerOpen":[{"__symbolic":"method"}],"reposition":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"getDirection":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"updateFixedClass":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"PopupComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["toggle",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => down, up => down",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["down => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(-100%)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => up, down => up",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]}]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["up => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(0)"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.1s ease-in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"transform":"translateY(100%)"}]}]}]]}]]}],"exportAs":"kendo-popup","providers":[{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"}],"selector":"kendo-popup","template":"\n        <div class=\"k-popup\" [ngClass]=\"popupClass\" [@toggle]=\"direction\" (@toggle.done)=\"triggerOpen($event)\">\n            <ng-content></ng-content>\n            <ng-template [ngTemplateOutlet]=\"content\" [ngIf]=\"content\"></ng-template>\n        </div>\n     "}]}],"members":{"animate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"collision":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupAlign":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"popupClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"positionMode":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"offset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"anchorViewportLeave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"open":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"offsetLeft":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.left.px"]}]}],"offsetTop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.top.px"]}]}],"getZIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding"},"arguments":["style.z-index"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./services/align.service","name":"AlignService"},{"__symbolic":"reference","module":"./services/dom.service","name":"DOMService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./services/position.service","name":"PositionService"},{"__symbolic":"reference","module":"./services/resize.service","name":"ResizeService"},{"__symbolic":"reference","module":"./services/scrollable.service","name":"ScrollableService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"triggerOpen":[{"__symbolic":"method"}],"reposition":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"getDirection":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"updateFixedClass":[{"__symbolic":"method"}]}}}}]

dist/npm/popup.service.d.ts

@@ -44,4 +44,4 @@ import { ApplicationRef, ComponentFactoryResolver, ElementRef, InjectionToken, Injector } from '@angular/core';
  *
- * For more information on how to use this class, refer to the article about
- * [`PopupService`]({% slug service_popup_kendouiforangular %}).
+ * For more information on how to use this class, refer to the article on
+ * the [Popup service]({% slug service_popup_kendouiforangular %}).
  *
@@ -74,3 +74,3 @@ * @export
      *
-     * @param {PopupSettings} options - The options that define the Popup.
+     * @param {PopupSettings} options - The options which define the Popup.
      * @returns {ComponentRef<PopupComponent>} - A reference to the Popup object.
@@ -136,3 +136,3 @@ *
     /**
-     * Projects the inputs onto the component.
+     * Projects the inputs on the component.
      *
@@ -139,0 +139,0 @@ * @param {ComponentRef<any>} component

dist/npm/popup.service.js

@@ -45,4 +45,4 @@ "use strict";
  *
- * For more information on how to use this class, refer to the article about
- * [`PopupService`]({% slug service_popup_kendouiforangular %}).
+ * For more information on how to use this class, refer to the article on
+ * the [Popup service]({% slug service_popup_kendouiforangular %}).
  *
@@ -66,3 +66,3 @@ * @export
         get: function () {
-            //https://github.com/angular/angular/blob/4.0.x/packages/core/src/application_ref.ts#L571
+            // https://github.com/angular/angular/blob/4.0.x/packages/core/src/application_ref.ts#L571
             var rootComponents = this.applicationRef.components || [];
@@ -94,3 +94,3 @@ if (rootComponents[0]) {
      *
-     * @param {PopupSettings} options - The options that define the Popup.
+     * @param {PopupSettings} options - The options which define the Popup.
      * @returns {ComponentRef<PopupComponent>} - A reference to the Popup object.
@@ -141,3 +141,3 @@ *
             close: function () {
-                // XXX: Destroy is required due to this bug
+                // XXX: Destroy is required due to this bug:
                 // https://github.com/angular/angular/issues/15578
@@ -204,3 +204,3 @@ //
     /**
-     * Projects the inputs onto the component.
+     * Projects the inputs on the component.
      *
@@ -207,0 +207,0 @@ * @param {ComponentRef<any>} component

dist/npm/services/align.service.js

@@ -14,13 +14,14 @@ "use strict";
     AlignService.prototype.alignElement = function (settings) {
-        var anchor = settings.anchor, element = settings.element, anchorAlign = settings.anchorAlign, elementAlign = settings.elementAlign, offset = settings.offset;
+        var anchor = settings.anchor, element = settings.element, anchorAlign = settings.anchorAlign, elementAlign = settings.elementAlign, offset = settings.offset, positionMode = settings.positionMode;
         var dom = this._dom;
-        var scrollOffset = dom.scrollPosition(element);
         var elementRect = dom.offset(element);
-        var anchorRect = util_1.removeStackingOffset(util_1.eitherRect(dom.offset(anchor), offset), dom.stackingElementOffset(element));
-        if (!anchor) {
-            anchorRect = dom.removeScroll(anchorRect, scrollOffset);
+        var anchorRect;
+        if (positionMode === 'fixed' || !dom.hasOffsetParent(element)) {
+            anchorRect = util_1.removeStackingOffset(util_1.eitherRect(dom.offset(anchor), offset), dom.stackingElementOffset(element));
+            if (!anchor) {
+                anchorRect = dom.removeScroll(anchorRect, dom.scrollPosition(element));
+            }
         }
-        else if (dom.isZoomed()) {
-            anchorRect = dom.addScroll(anchorRect, scrollOffset);
-            elementRect = dom.addScroll(elementRect, scrollOffset);
+        else {
+            anchorRect = util_1.eitherRect(dom.position(anchor, element), offset);
         }
@@ -27,0 +28,0 @@ return this._dom.align({

dist/npm/services/dom.service.d.ts

@@ -13,6 +13,7 @@ import { ElementRef } from '@angular/core';
     isBodyOffset(el: ElementRef): boolean;
+    hasOffsetParent(el: ElementRef): boolean;
     offset(el: ElementRef): ElementRect;
     staticOffset(el: ElementRef): ElementRect;
     nativeElement(el: ElementRef): HTMLElement;
-    position(el: ElementRef): ElementRect;
+    position(element: ElementRef, popup: ElementRef): ElementRect;
     relativeOffset(el: ElementRef, currentLocation: OffsetPosition): ElementRect;
@@ -19,0 +20,0 @@ addScroll(rect: ElementRect, scroll: ScrollInfo): ElementRect;

dist/npm/services/dom.service.js

@@ -30,2 +30,8 @@ "use strict";
     };
+    DOMService.prototype.hasOffsetParent = function (el) {
+        if (!el) {
+            return false;
+        }
+        return !!this.nativeElement(el).offsetParent;
+    };
     DOMService.prototype.offset = function (el) {
@@ -56,7 +62,9 @@ if (!el) {
     };
-    DOMService.prototype.position = function (el) {
-        if (!el) {
+    DOMService.prototype.position = function (element, popup) {
+        if (!element || !popup) {
             return null;
         }
-        return kendo_popup_common_1.position(this.nativeElement(el));
+        var nativeEl = this.nativeElement(element);
+        var parentSibling = kendo_popup_common_1.siblingContainer(nativeEl, this.nativeElement(popup));
+        return kendo_popup_common_1.positionWithScroll(nativeEl, parentSibling);
     };
@@ -63,0 +71,0 @@ DOMService.prototype.relativeOffset = function (el, currentLocation) {

dist/npm/services/dom.service.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"DOMService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"addOffset":[{"__symbolic":"method"}],"align":[{"__symbolic":"method"}],"boundingOffset":[{"__symbolic":"method"}],"getWindow":[{"__symbolic":"method"}],"isBodyOffset":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"staticOffset":[{"__symbolic":"method"}],"nativeElement":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"relativeOffset":[{"__symbolic":"method"}],"addScroll":[{"__symbolic":"method"}],"removeScroll":[{"__symbolic":"method"}],"restrictToView":[{"__symbolic":"method"}],"scrollPosition":[{"__symbolic":"method"}],"scrollableParents":[{"__symbolic":"method"}],"stackingElementOffset":[{"__symbolic":"method"}],"getRelativeContextElement":[{"__symbolic":"method"}],"useRelativePosition":[{"__symbolic":"method"}],"windowViewPort":[{"__symbolic":"method"}],"zIndex":[{"__symbolic":"method"}],"zoomLevel":[{"__symbolic":"method"}],"isZoomed":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DOMService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"addOffset":[{"__symbolic":"method"}],"align":[{"__symbolic":"method"}],"boundingOffset":[{"__symbolic":"method"}],"getWindow":[{"__symbolic":"method"}],"isBodyOffset":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"staticOffset":[{"__symbolic":"method"}],"nativeElement":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"relativeOffset":[{"__symbolic":"method"}],"addScroll":[{"__symbolic":"method"}],"removeScroll":[{"__symbolic":"method"}],"restrictToView":[{"__symbolic":"method"}],"scrollPosition":[{"__symbolic":"method"}],"scrollableParents":[{"__symbolic":"method"}],"stackingElementOffset":[{"__symbolic":"method"}],"getRelativeContextElement":[{"__symbolic":"method"}],"useRelativePosition":[{"__symbolic":"method"}],"windowViewPort":[{"__symbolic":"method"}],"zIndex":[{"__symbolic":"method"}],"zoomLevel":[{"__symbolic":"method"}],"isZoomed":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"DOMService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"addOffset":[{"__symbolic":"method"}],"align":[{"__symbolic":"method"}],"boundingOffset":[{"__symbolic":"method"}],"getWindow":[{"__symbolic":"method"}],"isBodyOffset":[{"__symbolic":"method"}],"hasOffsetParent":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"staticOffset":[{"__symbolic":"method"}],"nativeElement":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"relativeOffset":[{"__symbolic":"method"}],"addScroll":[{"__symbolic":"method"}],"removeScroll":[{"__symbolic":"method"}],"restrictToView":[{"__symbolic":"method"}],"scrollPosition":[{"__symbolic":"method"}],"scrollableParents":[{"__symbolic":"method"}],"stackingElementOffset":[{"__symbolic":"method"}],"getRelativeContextElement":[{"__symbolic":"method"}],"useRelativePosition":[{"__symbolic":"method"}],"windowViewPort":[{"__symbolic":"method"}],"zIndex":[{"__symbolic":"method"}],"zoomLevel":[{"__symbolic":"method"}],"isZoomed":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"DOMService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"addOffset":[{"__symbolic":"method"}],"align":[{"__symbolic":"method"}],"boundingOffset":[{"__symbolic":"method"}],"getWindow":[{"__symbolic":"method"}],"isBodyOffset":[{"__symbolic":"method"}],"hasOffsetParent":[{"__symbolic":"method"}],"offset":[{"__symbolic":"method"}],"staticOffset":[{"__symbolic":"method"}],"nativeElement":[{"__symbolic":"method"}],"position":[{"__symbolic":"method"}],"relativeOffset":[{"__symbolic":"method"}],"addScroll":[{"__symbolic":"method"}],"removeScroll":[{"__symbolic":"method"}],"restrictToView":[{"__symbolic":"method"}],"scrollPosition":[{"__symbolic":"method"}],"scrollableParents":[{"__symbolic":"method"}],"stackingElementOffset":[{"__symbolic":"method"}],"getRelativeContextElement":[{"__symbolic":"method"}],"useRelativePosition":[{"__symbolic":"method"}],"windowViewPort":[{"__symbolic":"method"}],"zIndex":[{"__symbolic":"method"}],"zoomLevel":[{"__symbolic":"method"}],"isZoomed":[{"__symbolic":"method"}]}}}}]

dist/npm/services/position.service.js

@@ -14,3 +14,3 @@ "use strict";
     PositionService.prototype.positionElement = function (settings) {
-        var anchor = settings.anchor, currentLocation = settings.currentLocation, element = settings.element, anchorAlign = settings.anchorAlign, elementAlign = settings.elementAlign, collisions = settings.collisions;
+        var anchor = settings.anchor, currentLocation = settings.currentLocation, positionMode = settings.positionMode, element = settings.element, anchorAlign = settings.anchorAlign, elementAlign = settings.elementAlign, collisions = settings.collisions;
         var dom = this._dom;
@@ -23,5 +23,5 @@ var relative = dom.useRelativePosition(element);
         var initialElementRect = util_1.replaceOffset(dom.staticOffset(element), beforeRestrictionOffset);
-        var elementRect = dom.isZoomed() ?
-            dom.removeScroll(initialElementRect, dom.scrollPosition(element)) :
-            initialElementRect;
+        var elementRect = positionMode === 'fixed' ?
+            initialElementRect :
+            dom.removeScroll(initialElementRect, dom.scrollPosition(element));
         var result = this._dom.restrictToView({
@@ -28,0 +28,0 @@ anchorAlign: anchorAlign,

dist/npm/util.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var kendo_popup_common_1 = require("@progress/kendo-popup-common");
 /**
@@ -116,40 +117,2 @@ * @hidden
 exports.HAS_RELATIVE_STACKING_CONTEXT = exports.hasRelativeStackingContext();
-var parents = function (element, until) {
-    var result = [];
-    var next = element.parentNode;
-    while (next) {
-        result.push(next);
-        if (next === until) {
-            break;
-        }
-        next = next.parentNode;
-    }
-    return result;
-};
-var siblings = function (element) {
-    var result = [];
-    var sibling = element.parentNode.firstElementChild;
-    while (sibling) {
-        if (sibling !== element) {
-            result.push(sibling);
-        }
-        sibling = sibling.nextElementSibling;
-    }
-    return result;
-};
-var siblingContainer = function (anchor, container) {
-    var parentElements = parents(anchor);
-    var containerElement = container;
-    var siblingElements;
-    var result;
-    while (containerElement) {
-        siblingElements = siblings(containerElement);
-        result = parentElements.reduce(function (list, p) { return list.concat(siblingElements.filter(function (s) { return s === p; })); }, [])[0];
-        if (result) {
-            break;
-        }
-        containerElement = containerElement.parentElement;
-    }
-    return result;
-};
 /**
@@ -162,7 +125,7 @@ * @hidden
     }
-    var sibling = siblingContainer(anchor, container);
+    var sibling = kendo_popup_common_1.siblingContainer(anchor, container);
     if (!sibling) {
         return null;
     }
-    var result = [anchor].concat(parents(anchor, sibling)).reduce(function (index, p) {
+    var result = [anchor].concat(kendo_popup_common_1.parents(anchor, sibling)).reduce(function (index, p) {
         var zIndexStyle = p.style.zIndex || window.getComputedStyle(p).zIndex;
@@ -169,0 +132,0 @@ var current = parseInt(zIndexStyle, 10);

dist/npm/util.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"eitherRect":{"__symbolic":"error","message":"Function call not supported","line":5,"character":26},"replaceOffset":{"__symbolic":"error","message":"Function call not supported","line":16,"character":29},"removeStackingOffset":{"__symbolic":"error","message":"Function call not supported","line":32,"character":36},"isDifferentOffset":{"__symbolic":"error","message":"Function call not supported","line":48,"character":33},"isDocumentAvailable":{"__symbolic":"error","message":"Function call not supported","line":58,"character":35},"isWindowAvailable":{"__symbolic":"error","message":"Function call not supported","line":65,"character":33},"hasBoundingRect":{"__symbolic":"error","message":"Function call not supported","line":72,"character":31},"OVERFLOW_REGEXP":{"__symbolic":"error","message":"Expression form not supported","line":77,"character":31},"scrollableParents":{"__symbolic":"error","message":"Function call not supported","line":87,"character":33},"FRAME_DURATION":16.666666666666668,"hasRelativeStackingContext":{"__symbolic":"error","message":"Function call not supported","line":115,"character":42},"HAS_RELATIVE_STACKING_CONTEXT":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"hasRelativeStackingContext"}},"zIndex":{"__symbolic":"error","message":"Function call not supported","line":192,"character":22}}},{"__symbolic":"module","version":1,"metadata":{"eitherRect":{"__symbolic":"error","message":"Function call not supported","line":5,"character":26},"replaceOffset":{"__symbolic":"error","message":"Function call not supported","line":16,"character":29},"removeStackingOffset":{"__symbolic":"error","message":"Function call not supported","line":32,"character":36},"isDifferentOffset":{"__symbolic":"error","message":"Function call not supported","line":48,"character":33},"isDocumentAvailable":{"__symbolic":"error","message":"Function call not supported","line":58,"character":35},"isWindowAvailable":{"__symbolic":"error","message":"Function call not supported","line":65,"character":33},"hasBoundingRect":{"__symbolic":"error","message":"Function call not supported","line":72,"character":31},"OVERFLOW_REGEXP":{"__symbolic":"error","message":"Expression form not supported","line":77,"character":31},"scrollableParents":{"__symbolic":"error","message":"Function call not supported","line":87,"character":33},"FRAME_DURATION":16.666666666666668,"hasRelativeStackingContext":{"__symbolic":"error","message":"Function call not supported","line":115,"character":42},"HAS_RELATIVE_STACKING_CONTEXT":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"hasRelativeStackingContext"}},"zIndex":{"__symbolic":"error","message":"Function call not supported","line":192,"character":22}}}]
+[{"__symbolic":"module","version":3,"metadata":{"eitherRect":{"__symbolic":"error","message":"Function call not supported","line":5,"character":26},"replaceOffset":{"__symbolic":"error","message":"Function call not supported","line":16,"character":29},"removeStackingOffset":{"__symbolic":"error","message":"Function call not supported","line":32,"character":36},"isDifferentOffset":{"__symbolic":"error","message":"Function call not supported","line":48,"character":33},"isDocumentAvailable":{"__symbolic":"error","message":"Function call not supported","line":58,"character":35},"isWindowAvailable":{"__symbolic":"error","message":"Function call not supported","line":65,"character":33},"hasBoundingRect":{"__symbolic":"error","message":"Function call not supported","line":72,"character":31},"OVERFLOW_REGEXP":{"__symbolic":"error","message":"Expression form not supported","line":77,"character":31},"scrollableParents":{"__symbolic":"error","message":"Function call not supported","line":87,"character":33},"FRAME_DURATION":16.666666666666668,"hasRelativeStackingContext":{"__symbolic":"error","message":"Function call not supported","line":115,"character":42},"HAS_RELATIVE_STACKING_CONTEXT":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"hasRelativeStackingContext"}},"zIndex":{"__symbolic":"error","message":"Function call not supported","line":140,"character":22}}},{"__symbolic":"module","version":1,"metadata":{"eitherRect":{"__symbolic":"error","message":"Function call not supported","line":5,"character":26},"replaceOffset":{"__symbolic":"error","message":"Function call not supported","line":16,"character":29},"removeStackingOffset":{"__symbolic":"error","message":"Function call not supported","line":32,"character":36},"isDifferentOffset":{"__symbolic":"error","message":"Function call not supported","line":48,"character":33},"isDocumentAvailable":{"__symbolic":"error","message":"Function call not supported","line":58,"character":35},"isWindowAvailable":{"__symbolic":"error","message":"Function call not supported","line":65,"character":33},"hasBoundingRect":{"__symbolic":"error","message":"Function call not supported","line":72,"character":31},"OVERFLOW_REGEXP":{"__symbolic":"error","message":"Expression form not supported","line":77,"character":31},"scrollableParents":{"__symbolic":"error","message":"Function call not supported","line":87,"character":33},"FRAME_DURATION":16.666666666666668,"hasRelativeStackingContext":{"__symbolic":"error","message":"Function call not supported","line":115,"character":42},"HAS_RELATIVE_STACKING_CONTEXT":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"hasRelativeStackingContext"}},"zIndex":{"__symbolic":"error","message":"Function call not supported","line":140,"character":22}}}]

package.json

 {
   "name": "@progress/kendo-angular-popup",
   "description": "Kendo UI Angular 2 Popup component",
-  "version": "1.1.2-dev.201708091033",
+  "version": "1.2.0-dev.201708230947",
   "main": "dist/npm/main.js",
@@ -6,0 +6,0 @@ "module": "dist/es/main.js",

No alert changes

Improved metrics

Total package byte prevSize

289434

increased by7.27%

Number of package files

124

increased by3.33%

Lines of code

3910

increased by11.78%

No dependency changes