@syncfusion/ej2-popups - npm Package Compare versions

Comparing version 1.0.8 to 1.0.10

dist/es6/common/collision.js

 import { calculatePosition } from './position';
 var parentDocument;
-export function flip(element, target, offsetX, offsetY, positionX, positionY) {
-    if (!target || !element || !positionX || !positionY) {
+var targetContainer;
+export function fit(element, viewPortElement, axis, position) {
+    if (viewPortElement === void 0) { viewPortElement = null; }
+    if (axis === void 0) { axis = { X: false, Y: false }; }
+    if (!axis.Y && !axis.X) {
+        return { left: 0, top: 0 };
+    }
+    var elemData = element.getBoundingClientRect();
+    targetContainer = viewPortElement;
+    parentDocument = element.ownerDocument;
+    if (!position) {
+        position = calculatePosition(element, 'left', 'top');
+    }
+    if (axis.X) {
+        var containerWidth = targetContainer ? getTargetContainerWidth() : getViewPortWidth();
+        var containerLeft = ContainerLeft();
+        var containerRight = ContainerRight();
+        var overLeft = containerLeft - position.left;
+        var overRight = position.left + elemData.width - containerRight;
+        if (elemData.width > containerWidth) {
+            if (overLeft > 0 && overRight <= 0) {
+                position.left = containerRight - elemData.width;
+            }
+            else if (overRight > 0 && overLeft <= 0) {
+                position.left = containerLeft;
+            }
+            else {
+                position.left = overLeft > overRight ? (containerRight - elemData.width) : containerLeft;
+            }
+        }
+        else if (overLeft > 0) {
+            position.left += overLeft;
+        }
+        else if (overRight > 0) {
+            position.left -= overRight;
+        }
+    }
+    if (axis.Y) {
+        var containerHeight = targetContainer ? getTargetContainerHeight() : getViewPortHeight();
+        var containerTop = ContainerTop();
+        var containerBottom = ContainerBottom();
+        var overTop = containerTop - position.top;
+        var overBottom = position.top + elemData.height - containerBottom;
+        if (elemData.height > containerHeight) {
+            if (overTop > 0 && overBottom <= 0) {
+                position.top = containerBottom - elemData.height;
+            }
+            else if (overBottom > 0 && overTop <= 0) {
+                position.top = containerTop;
+            }
+            else {
+                position.top = overTop > overBottom ? (containerBottom - elemData.height) : containerTop;
+            }
+        }
+        else if (overTop > 0) {
+            position.top += overTop;
+        }
+        else if (overBottom > 0) {
+            position.top -= overBottom;
+        }
+    }
+    return position;
+}
+export function isCollide(element, viewPortElement, x, y) {
+    if (viewPortElement === void 0) { viewPortElement = null; }
+    var elemOffset = calculatePosition(element, 'left', 'top');
+    if (x) {
+        elemOffset.left = x;
+    }
+    if (y) {
+        elemOffset.top = y;
+    }
+    var data = [];
+    targetContainer = viewPortElement;
+    parentDocument = element.ownerDocument;
+    var elementRect = element.getBoundingClientRect();
+    var top = elemOffset.top;
+    var left = elemOffset.left;
+    var right = elemOffset.left + elementRect.width;
+    var bottom = elemOffset.top + elementRect.height;
+    var topData = '';
+    var leftData = '';
+    var yAxis = topCollideCheck(top, bottom);
+    var xAxis = leftCollideCheck(left, right);
+    if (yAxis.topSide) {
+        data.push('top');
+    }
+    if (xAxis.rightSide) {
+        data.push('right');
+    }
+    if (xAxis.leftSide) {
+        data.push('left');
+    }
+    if (yAxis.bottomSide) {
+        data.push('bottom');
+    }
+    return data;
+}
+export function flip(element, target, offsetX, offsetY, positionX, positionY, viewPortElement, axis) {
+    if (viewPortElement === void 0) { viewPortElement = null; }
+    if (axis === void 0) { axis = { X: true, Y: true }; }
+    if (!target || !element || !positionX || !positionY || (!axis.X && !axis.Y)) {
         return;
     }
-    var edge = { eTL: null,
-        eTR: null,
-        eBL: null,
-        eBR: null };
-    var elementRect = { elementData: null, targetData: null };
-    var eStatus = {
-        pTL: null,
-        pTR: null,
-        pBL: null,
-        pBR: null
+    var tEdge = { TL: null,
+        TR: null,
+        BL: null,
+        BR: null };
+    var eEdge = {
+        TL: null,
+        TR: null,
+        BL: null,
+        BR: null
     };
-    var flipAlter = { flipAlter: '' };
-    var posStatus = { eflipStatusX: false, eflipStatusY: false };
+    var elementRect = element.getBoundingClientRect();
     var pos = {
         posX: positionX, posY: positionY, offsetX: offsetX, offsetY: offsetY, position: { left: 0, top: 0 }
     };
+    targetContainer = viewPortElement;
     parentDocument = target.ownerDocument;
-    updateElementData(element, target, edge, pos, elementRect);
-    setPosition(eStatus, pos, elementRect);
-    validateElementPos(eStatus);
-    if (flipValidation(edge, eStatus, flipAlter, posStatus)) {
-        applyFlip(target, edge, eStatus, flipAlter, posStatus, pos, elementRect);
+    updateElementData(target, tEdge, pos);
+    setPosition(eEdge, pos, elementRect);
+    if (axis.X) {
+        leftFlip(target, eEdge, tEdge, pos, elementRect, true);
     }
+    if (axis.Y) {
+        topFlip(target, eEdge, tEdge, pos, elementRect, true);
+    }
     setPopup(element, pos);
 }
-function updateElementData(element, target, edge, pos, elementRect) {
-    elementRect.elementData = { width: element.getBoundingClientRect().width, height: element.getBoundingClientRect().height };
-    elementRect.targetData = { width: target.getBoundingClientRect().width, height: target.getBoundingClientRect().height };
-    pos.position = calculatePosition(target, pos.posX, pos.posY);
-    edge.eTL = calculatePosition(target, 'left', 'top');
-    edge.eTR = calculatePosition(target, 'right', 'top');
-    edge.eBR = calculatePosition(target, 'left', 'bottom');
-    edge.eBL = calculatePosition(target, 'right', 'bottom');
-}
 function setPopup(element, pos) {
@@ -54,115 +146,123 @@ var left = 0;
 }
+function updateElementData(target, edge, pos) {
+    pos.position = calculatePosition(target, pos.posX, pos.posY);
+    edge.TL = calculatePosition(target, 'left', 'top');
+    edge.TR = calculatePosition(target, 'right', 'top');
+    edge.BR = calculatePosition(target, 'left', 'bottom');
+    edge.BL = calculatePosition(target, 'right', 'bottom');
+}
 function setPosition(eStatus, pos, elementRect) {
-    eStatus.pTL = { top: pos.position.top + pos.offsetY, left: pos.position.left + pos.offsetX, affectedBy: '' };
-    eStatus.pTR = { top: eStatus.pTL.top, left: eStatus.pTL.left + elementRect.elementData.width, affectedBy: '' };
-    eStatus.pBL = { top: eStatus.pTL.top + elementRect.elementData.height,
-        left: eStatus.pTL.left, affectedBy: '' };
-    eStatus.pBR = { top: eStatus.pTL.top + elementRect.elementData.height,
-        left: eStatus.pTL.left + elementRect.elementData.width, affectedBy: '' };
+    eStatus.TL = { top: pos.position.top + pos.offsetY, left: pos.position.left + pos.offsetX };
+    eStatus.TR = { top: eStatus.TL.top, left: eStatus.TL.left + elementRect.width };
+    eStatus.BL = { top: eStatus.TL.top + elementRect.height,
+        left: eStatus.TL.left };
+    eStatus.BR = { top: eStatus.TL.top + elementRect.height,
+        left: eStatus.TL.left + elementRect.width };
 }
-function applyFlip(target, edge, eStatus, alter, posStatus, pos, elementRect) {
-    var position2 = pos.position;
-    var locX1 = pos.offsetX;
-    var locY1 = pos.offsetY;
-    if (posStatus.eflipStatusX) {
-        pos.offsetX = pos.offsetX + elementRect.elementData.width;
-        if (alter.flipAlter === 'left') {
-            pos.offsetX = -1 * pos.offsetX;
-        }
-        pos.posX = (pos.posX === 'left') ? 'right' : 'left';
+function leftCollideCheck(left, right) {
+    var leftSide = false;
+    var rightSide = false;
+    if (((left - getBodyScrollLeft()) < ContainerLeft())) {
+        leftSide = true;
     }
-    else {
-        pos.offsetY = pos.offsetY + elementRect.elementData.height;
-        if (alter.flipAlter === 'top') {
-            pos.offsetY = -1 * pos.offsetY;
-        }
-        pos.posY = (pos.posY === 'top') ? 'bottom' : 'top';
+    if (right > ContainerRight()) {
+        rightSide = true;
     }
-    pos.position = calculatePosition(target, pos.posX, pos.posY);
-    setPosition(eStatus, pos, elementRect);
-    validateElementPos(eStatus);
-    if (flipValidation(edge, eStatus, alter, posStatus)) {
-        pos.position = position2;
-        pos.offsetX = locX1;
-        pos.offsetY = locY1;
-    }
+    return { leftSide: leftSide, rightSide: rightSide };
 }
-function setElementPosition(edge, eStatus, posStatus) {
-    if (eStatus.pTL.top < edge.eTL.top
-        && eStatus.pTR.top < edge.eTR.top) {
-        posStatus.eflipStatusY = true;
-        posStatus.eflipStatusX = false;
+function leftFlip(target, edge, tEdge, pos, elementRect, deepCheck) {
+    var collideSide = leftCollideCheck(edge.TL.left, edge.TR.left);
+    if ((tEdge.TL.left - getBodyScrollLeft()) <= ContainerLeft()) {
+        collideSide.leftSide = false;
     }
-    else if (eStatus.pBL.top > edge.eBL.top
-        && eStatus.pBR.top > edge.eBR.top) {
-        posStatus.eflipStatusY = true;
-        posStatus.eflipStatusX = false;
+    if (tEdge.TR.left >= ContainerRight()) {
+        collideSide.rightSide = false;
     }
-    else if (eStatus.pTL.left < edge.eTL.left
-        && eStatus.pBL.left < edge.eBL.left) {
-        posStatus.eflipStatusY = false;
-        posStatus.eflipStatusX = true;
+    if ((collideSide.leftSide && !collideSide.rightSide) || (!collideSide.leftSide && collideSide.rightSide)) {
+        if (pos.posX === 'right') {
+            pos.posX = 'left';
+        }
+        else {
+            pos.posX = 'right';
+        }
+        pos.offsetX = pos.offsetX + elementRect.width;
+        pos.offsetX = -1 * pos.offsetX;
+        pos.position = calculatePosition(target, pos.posX, pos.posY);
+        setPosition(edge, pos, elementRect);
+        if (deepCheck) {
+            leftFlip(target, edge, tEdge, pos, elementRect, false);
+        }
     }
-    else if (eStatus.pTR.left > edge.eTR.left
-        && eStatus.pBR.left > edge.eBR.left) {
-        posStatus.eflipStatusY = false;
-        posStatus.eflipStatusX = true;
-    }
 }
-function flipValidation(edge, eStatus, alter, posStatus) {
-    alter.flipAlter = '';
-    setElementPosition(edge, eStatus, posStatus);
-    if (eStatus.pTL.affectedBy === 'top'
-        && eStatus.pTR.affectedBy === 'top'
-        && eStatus.pBL.affectedBy === ''
-        && eStatus.pBR.affectedBy === ''
-        && posStatus.eflipStatusY) {
-        alter.flipAlter = 'bottom';
+function topFlip(target, edge, tEdge, pos, elementRect, deepCheck) {
+    var collideSide = topCollideCheck(edge.TL.top, edge.BL.top);
+    if ((tEdge.TL.top - getBodyScrollTop()) <= ContainerTop()) {
+        collideSide.topSide = false;
     }
-    else if (eStatus.pBL.affectedBy === 'bottom'
-        && eStatus.pBR.affectedBy === 'bottom'
-        && eStatus.pTL.affectedBy === ''
-        && eStatus.pTR.affectedBy === ''
-        && posStatus.eflipStatusY) {
-        alter.flipAlter = 'top';
+    if (tEdge.BL.top >= ContainerBottom()) {
+        collideSide.bottomSide = false;
     }
-    else if (eStatus.pTL.affectedBy === 'left'
-        && eStatus.pBL.affectedBy === 'left'
-        && eStatus.pTR.affectedBy === ''
-        && eStatus.pBR.affectedBy === ''
-        && posStatus.eflipStatusX) {
-        alter.flipAlter = 'right';
+    if ((collideSide.topSide && !collideSide.bottomSide) || (!collideSide.topSide && collideSide.bottomSide)) {
+        if (pos.posY === 'top') {
+            pos.posY = 'bottom';
+        }
+        else {
+            pos.posY = 'top';
+        }
+        pos.offsetY = pos.offsetY + elementRect.height;
+        pos.offsetY = -1 * pos.offsetY;
+        pos.position = calculatePosition(target, pos.posX, pos.posY);
+        setPosition(edge, pos, elementRect);
+        if (deepCheck) {
+            topFlip(target, edge, tEdge, pos, elementRect, false);
+        }
     }
-    else if (eStatus.pTR.affectedBy === 'right'
-        && eStatus.pBR.affectedBy === 'right'
-        && eStatus.pBL.affectedBy === ''
-        && eStatus.pTL.affectedBy === ''
-        && posStatus.eflipStatusX) {
-        alter.flipAlter = 'left';
+}
+function topCollideCheck(top, bottom) {
+    var topSide = false;
+    var bottomSide = false;
+    if ((top - getBodyScrollTop()) < ContainerTop()) {
+        topSide = true;
     }
-    else {
-        alter.flipAlter = '';
+    if (bottom > ContainerBottom()) {
+        bottomSide = true;
     }
-    return alter.flipAlter.length > 0;
+    return { topSide: topSide, bottomSide: bottomSide };
 }
-function validateAffectedEdges(positionTemp) {
-    if ((positionTemp.top - getBodyScrollTop()) < 0) {
-        (positionTemp.affectedBy = 'top');
+function getTargetContainerWidth() {
+    return targetContainer.getBoundingClientRect().width;
+}
+function getTargetContainerHeight() {
+    return targetContainer.getBoundingClientRect().height;
+}
+function getTargetContainerLeft() {
+    return targetContainer.getBoundingClientRect().left;
+}
+function getTargetContainerTop() {
+    return targetContainer.getBoundingClientRect().top;
+}
+function ContainerTop() {
+    if (targetContainer) {
+        return getTargetContainerTop();
     }
-    else if ((positionTemp.left - getBodyScrollLeft()) < 0) {
-        (positionTemp.affectedBy = 'left');
+    return 0;
+}
+function ContainerLeft() {
+    if (targetContainer) {
+        return getTargetContainerLeft();
     }
-    else if (positionTemp.top > (getBodyScrollTop() + getViewPortHeight())) {
-        (positionTemp.affectedBy = 'bottom');
+    return 0;
+}
+function ContainerRight() {
+    if (targetContainer) {
+        return (getBodyScrollLeft() + getTargetContainerLeft() + getTargetContainerWidth());
     }
-    else if (positionTemp.left > (getBodyScrollLeft() + getViewPortWidth())) {
-        (positionTemp.affectedBy = 'right');
+    return (getBodyScrollLeft() + getViewPortWidth());
+}
+function ContainerBottom() {
+    if (targetContainer) {
+        return (getBodyScrollTop() + getTargetContainerTop() + getTargetContainerHeight());
     }
+    return (getBodyScrollTop() + getViewPortHeight());
 }
-function validateElementPos(eStatus) {
-    validateAffectedEdges(eStatus.pTL);
-    validateAffectedEdges(eStatus.pTR);
-    validateAffectedEdges(eStatus.pBL);
-    validateAffectedEdges(eStatus.pBR);
-}
 function getBodyScrollTop() {
@@ -169,0 +269,0 @@ return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;

dist/es6/common/position.js

 var elementRect;
 var element;
 var parentDocument;
+export function calculateRelativeBasedPosition(anchor, element) {
+    var anchorPos = { left: 0, top: 0 };
+    if (!anchor || !element) {
+        return anchorPos;
+    }
+    while (element.offsetParent && anchor && element.offsetParent !== anchor) {
+        anchorPos.left += anchor.offsetLeft;
+        anchorPos.top += anchor.offsetTop;
+        anchor = anchor.offsetParent;
+    }
+    return anchorPos;
+}
 export function calculatePosition(currentElement, positionX, positionY) {
@@ -5,0 +17,0 @@ if (!currentElement) {

dist/es6/dialog/dialog.js

@@ -48,2 +48,3 @@ var __extends = (this && this.__extends) || (function () {
 var DLG_OVERLAY = 'e-dlg-overlay';
+var DLG_CONTAINER = 'e-dlg-container';
 var SCROLL_DISABLED = 'e-scroll-disabled';
@@ -56,2 +57,3 @@ var DLG_PRIMARY_BUTTON = 'e-primary';
 var DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';
+var DLG_HIDE = 'e-popup-close';
 var Dialog = (function (_super) {
@@ -69,4 +71,5 @@ __extends(Dialog, _super);
         var _this = this;
-        this.closeIconClickEventHandler = function () {
+        this.closeIconClickEventHandler = function (event) {
             _this.hide();
+            _this.closedFrom = event;
         };
@@ -105,2 +108,3 @@ this.dlgOverlayClickEventHandler = function (event) {
             this.hide();
+            this.closedFrom = event;
         }
@@ -142,2 +146,5 @@ if ((event.keyCode === 13 && element.tagName.toLowerCase() === 'button' &&
         attributes(this.element, { role: 'dialog' });
+        if (isNullOrUndefined(this.zIndex)) {
+            this.getZindexPartial();
+        }
         if (this.header !== '') {
@@ -167,2 +174,5 @@ this.setHeader();
         }
+        if (!isNullOrUndefined(this.targetEle)) {
+            this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);
+        }
         this.popupObj = new Popup(this.element, {
@@ -173,6 +183,2 @@ height: this.height,
             relateTo: this.target,
-            position: {
-                X: this.position.X,
-                Y: this.position.Y
-            },
             open: function () {
@@ -182,3 +188,6 @@ _this.focusContent();
             },
-            close: function () {
+            close: function (event) {
+                if (_this.isModal) {
+                    _this.dlgContainer.style.display = 'none';
+                }
                 if (!isNullOrUndefined(_this.focusElements) && _this.focusElements.length > 0) {
@@ -190,3 +199,4 @@ _this.unBindEvent((isNullOrUndefined(_this.focusIndex) ? _this.element : _this.focusElements[_this.focusIndex]));
                 }
-                _this.trigger('close');
+                _this.trigger('close', _this.closedFrom);
+                _this.closedFrom = {};
                 if (!isNullOrUndefined(_this.storeActiveElement)) {
@@ -197,12 +207,57 @@ _this.storeActiveElement.focus();
         });
+        this.positionChange();
         this.setEnableRTL();
-        this.element.style.display = 'block';
-        if (!isNullOrUndefined(this.content) && this.content !== '') {
-            this.setContentHeight();
-        }
-        this.element.style.display = 'none';
+        addClass([this.element], DLG_HIDE);
         if (this.showOnInit) {
             this.show();
         }
+        else {
+            if (this.isModal) {
+                this.dlgOverlay.style.display = 'none';
+            }
+        }
     };
+    Dialog.prototype.positionChange = function () {
+        if (!this.isModal) {
+            this.popupObj.setProperties({
+                position: {
+                    X: this.position.X, Y: this.position.Y
+                }
+            });
+        }
+        else {
+            this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);
+        }
+    };
+    Dialog.prototype.getZindexPartial = function () {
+        var dialogParent = this.element.parentElement;
+        var parentZindex = [];
+        while (dialogParent) {
+            if (dialogParent.tagName !== 'BODY') {
+                var index = document.defaultView.getComputedStyle(dialogParent, null).getPropertyValue('z-index');
+                var position = document.defaultView.getComputedStyle(dialogParent, null).getPropertyValue('position');
+                if (index !== 'auto' && position !== 'static') {
+                    parentZindex.push(index);
+                }
+                dialogParent = dialogParent.parentElement;
+            }
+            else {
+                break;
+            }
+        }
+        var childrenZindex = [];
+        for (var i = 0; i < document.body.children.length; i++) {
+            if (!this.element.isEqualNode(document.body.children[i])) {
+                var index = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('z-index');
+                var position = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('position');
+                if (index !== 'auto' && position !== 'static') {
+                    childrenZindex.push(index);
+                }
+            }
+        }
+        childrenZindex.push('999');
+        var finalValue = parentZindex.concat(childrenZindex);
+        this.zIndex = Math.max.apply(Math, finalValue) + 1;
+    };
+    ;
     Dialog.prototype.setAllowDragging = function () {
@@ -252,8 +307,2 @@ var _this = this;
     };
-    Dialog.prototype.setContentHeight = function () {
-        this.contentHeight = this.element.offsetHeight -
-            ((isNullOrUndefined(this.ftrTemplateContent) ? 0 : this.ftrTemplateContent.offsetHeight) +
-                (isNullOrUndefined(this.headerContent) ? 0 : this.headerContent.offsetHeight));
-        this.contentEle.style.height = this.contentHeight + 'px';
-    };
     Dialog.prototype.setEnableRTL = function () {
@@ -315,12 +364,9 @@ this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);
     Dialog.prototype.setIsModal = function () {
+        this.dlgContainer = createElement('div', { className: DLG_CONTAINER });
+        this.element.parentNode.insertBefore(this.dlgContainer, this.element);
+        this.dlgContainer.appendChild(this.element);
         addClass([this.element], MODAL_DLG);
         this.dlgOverlay = createElement('div', { className: DLG_OVERLAY });
         this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
-        if (!isNullOrUndefined(this.targetEle)) {
-            this.targetEle.appendChild(this.dlgOverlay);
-            this.dlgOverlay.style.position = 'relative';
-        }
-        else {
-            this.element.parentNode.appendChild(this.dlgOverlay);
-        }
+        this.dlgContainer.appendChild(this.dlgOverlay);
     };
@@ -356,3 +402,3 @@ Dialog.prototype.focusContentEle = function (container) {
                 var contentEle = !isNullOrUndefined(this.contentEle) &&
-                    this.contentEle.querySelector(this.focusElements[index].nodeName);
+                    this.focusElements[index];
                 if (contentEle) {
@@ -430,8 +476,5 @@ this.focusIndex = this.focusElements.indexOf(contentEle);
                                 (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';
-                            this.contentEle.style.height = 'auto';
-                            this.setContentHeight();
                         }
                         else {
                             this.setContent();
-                            this.setContentHeight();
                         }
@@ -485,2 +528,5 @@ }
                         this.wireEvents();
+                        if (!isNullOrUndefined(this.targetEle)) {
+                            this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);
+                        }
                     }
@@ -491,2 +537,6 @@ else {
                         detach(this.dlgOverlay);
+                        while (this.dlgContainer.firstChild) {
+                            this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);
+                        }
+                        this.dlgContainer.parentElement.removeChild(this.dlgContainer);
                     }
@@ -496,3 +546,2 @@ break;
                     setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });
-                    this.setContentHeight();
                     break;
@@ -528,3 +577,10 @@ case 'width':
                 case 'position':
-                    this.popupObj.position = this.position;
+                    if (this.isModal) {
+                        this.dlgContainer.classList.remove('e-dlg-' + oldProp.position.X + '-' + oldProp.position.Y);
+                        this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);
+                    }
+                    else {
+                        this.popupObj.position = this.position;
+                        break;
+                    }
                     break;
@@ -592,6 +648,9 @@ case 'enableRtl':
             this.dlgOverlay.style.display = 'block';
+            this.dlgContainer.style.display = 'flex';
             if (!isNullOrUndefined(this.targetEle)) {
+                if (this.targetEle === document.body) {
+                    this.dlgContainer.style.position = 'fixed';
+                }
                 this.dlgOverlay.style.position = 'absolute';
-                this.dlgOverlay.style.height = this.targetEle.scrollHeight + 'px';
-                this.element.style.position = 'absolute';
+                this.element.style.position = 'relative';
                 addClass([this.targetEle], SCROLL_DISABLED);
@@ -633,5 +692,2 @@ }
                 (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';
-            this.element.style.display = 'block';
-            this.setContentHeight();
-            this.element.style.display = 'none';
             addClass([document.body], SCROLL_DISABLED);
@@ -644,3 +700,2 @@ if (this.allowDragging && !isNullOrUndefined(this.dragObj)) {
             removeClass([this.element], FULLSCREEN);
-            this.contentEle.style.height = this.contentHeight + 'px';
             removeClass([document.body], SCROLL_DISABLED);
@@ -680,3 +735,3 @@ if (this.allowDragging && (!this.isModal) && (!isNullOrUndefined(this.headerContent))) {
 __decorate([
-    Property(1000)
+    Property()
 ], Dialog.prototype, "zIndex", void 0);
@@ -683,0 +738,0 @@ __decorate([

dist/es6/index.js

 export * from './popup';
 export * from './common';
 export * from './dialog';
+export * from './tooltip';

dist/es6/popup/popup.js

@@ -17,12 +17,15 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { setStyleAttribute } from '@syncfusion/ej2-base/dom';
+import { setStyleAttribute, addClass, removeClass } from '@syncfusion/ej2-base/dom';
 import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base/util';
 import { Browser } from '@syncfusion/ej2-base/browser';
-import { calculatePosition } from '../common/position';
+import { calculatePosition, calculateRelativeBasedPosition } from '../common/position';
 import { Animation, Property, Event, Component } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges } from '@syncfusion/ej2-base/notify-property-change';
 import { EventHandler } from '@syncfusion/ej2-base/event-handler';
+import { flip, fit, isCollide } from '../common/collision';
 var CLASSNAMES = {
     ROOT: 'e-popup',
-    RTL: 'e-rtl'
+    RTL: 'e-rtl',
+    OPEN: 'e-popup-open',
+    CLOSE: 'e-popup-close'
 };
@@ -119,4 +122,7 @@ var Popup = (function (_super) {
     Popup.prototype.orientationOnChange = function () {
-        this.setPosition();
-        this.trigger('orientationChange');
+        var _this = this;
+        setTimeout(function () {
+            _this.setPosition();
+            _this.checkCollision();
+        }, 200);
     };
@@ -151,7 +157,3 @@ Popup.prototype.setPosition = function () {
         else {
-            while (ele.offsetParent && anchor && ele.offsetParent !== anchor) {
-                anchorPos.left += anchor.offsetLeft;
-                anchorPos.top += anchor.offsetTop;
-                anchor = anchor.offsetParent;
-            }
+            anchorPos = calculateRelativeBasedPosition(anchor, ele);
         }
@@ -163,6 +165,16 @@ switch (position.X) {
             case 'center':
-                anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);
+                if (this.targetType === 'container') {
+                    anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);
+                }
+                else {
+                    anchorPos.left += (anchorRect.width / 2);
+                }
                 break;
             case 'right':
-                anchorPos.left += (anchorRect.width - eleRect.width);
+                if (this.targetType === 'container') {
+                    anchorPos.left += (anchorRect.width - eleRect.width);
+                }
+                else {
+                    anchorPos.left += (anchorRect.width);
+                }
                 break;
@@ -175,6 +187,16 @@ }
             case 'center':
-                anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);
+                if (this.targetType === 'container') {
+                    anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);
+                }
+                else {
+                    anchorPos.top += (anchorRect.height / 2);
+                }
                 break;
             case 'bottom':
-                anchorPos.top += (anchorRect.height - eleRect.height);
+                if (this.targetType === 'container') {
+                    anchorPos.top += (anchorRect.height - eleRect.height);
+                }
+                else {
+                    anchorPos.top += (anchorRect.height);
+                }
                 break;
@@ -186,20 +208,58 @@ }
     };
-    Popup.prototype.checkCollision = function (flip) {
-        if (this.relateTo && typeof flip === 'function') {
-            flip(this.element, this.relateTo, this.offsetX, this.offsetY, this.position.X, this.position.Y);
+    Popup.prototype.callFlip = function (param) {
+        var relateToElement = ((typeof this.relateTo) === 'string') ?
+            document.querySelector(this.relateTo) : this.relateTo;
+        flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param);
+    };
+    Popup.prototype.callFit = function (param) {
+        if (isCollide(this.element, this.viewPortElement).length !== 0) {
+            var data = fit(this.element, this.viewPortElement, param);
+            this.element.style.left = data.left + 'px';
+            this.element.style.top = data.top + 'px';
         }
     };
-    Popup.prototype.show = function (collisionOrAnimationOptions, collision) {
+    Popup.prototype.checkCollision = function () {
+        var horz = this.collision.X;
+        var vert = this.collision.Y;
+        if (horz === 'none' && vert === 'none') {
+            return;
+        }
+        if (horz === 'flip' && vert === 'flip') {
+            this.callFlip({ X: true, Y: true });
+        }
+        else if (horz === 'fit' && vert === 'fit') {
+            this.callFit({ X: true, Y: true });
+        }
+        else {
+            if (horz === 'fit') {
+                this.callFit({ X: true, Y: false });
+            }
+            else if (vert === 'fit') {
+                this.callFit({ X: false, Y: true });
+            }
+            if (horz === 'flip') {
+                this.callFlip({ X: true, Y: false });
+            }
+            else if (vert === 'flip') {
+                this.callFlip({ Y: true, X: false });
+            }
+        }
+    };
+    Popup.prototype.show = function (animationOptions) {
         var _this = this;
-        if ((typeof collisionOrAnimationOptions === 'function' && !collision) || typeof collision === 'function') {
-            var options = typeof collision === 'function' ? collision : collisionOrAnimationOptions;
-            this.checkCollision(options);
+        if (this.collision.X !== 'none' || this.collision.Y !== 'none') {
+            removeClass([this.element], CLASSNAMES.CLOSE);
+            addClass([this.element], CLASSNAMES.OPEN);
+            this.checkCollision();
+            removeClass([this.element], CLASSNAMES.OPEN);
+            addClass([this.element], CLASSNAMES.CLOSE);
         }
-        if (!isNullOrUndefined(collisionOrAnimationOptions) && typeof collisionOrAnimationOptions === 'object') {
-            collisionOrAnimationOptions.begin = function () {
+        if (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') {
+            animationOptions.begin = function () {
                 if (!_this.isDestroyed) {
-                    _this.element.style.display = 'block';
+                    removeClass([_this.element], CLASSNAMES.CLOSE);
+                    addClass([_this.element], CLASSNAMES.OPEN);
                 }
             };
-            collisionOrAnimationOptions.end = function () {
+            animationOptions.end = function () {
                 if (!_this.isDestroyed) {
@@ -209,6 +269,7 @@ _this.trigger('open');
             };
-            new Animation(collisionOrAnimationOptions).animate(this.element);
+            new Animation(animationOptions).animate(this.element);
         }
         else {
-            this.element.style.display = 'block';
+            removeClass([this.element], CLASSNAMES.CLOSE);
+            addClass([this.element], CLASSNAMES.OPEN);
             this.trigger('open');
@@ -222,3 +283,4 @@ }
                 if (!_this.isDestroyed) {
-                    _this.element.style.display = 'none';
+                    removeClass([_this.element], CLASSNAMES.OPEN);
+                    addClass([_this.element], CLASSNAMES.CLOSE);
                     _this.trigger('close');
@@ -230,3 +292,4 @@ }
         else {
-            this.element.style.display = 'none';
+            removeClass([this.element], CLASSNAMES.OPEN);
+            addClass([this.element], CLASSNAMES.CLOSE);
             this.trigger('close');
@@ -237,3 +300,3 @@ }
         var parentElements = [];
-        while (element.parentElement.tagName !== 'HTML') {
+        while (element.parentElement && element.parentElement.tagName !== 'HTML') {
             if (element.parentElement.style.overflow !== 'visible') {
@@ -259,2 +322,11 @@ parentElements.push(element.parentElement);
 __decorate([
+    Property('container')
+], Popup.prototype, "targetType", void 0);
+__decorate([
+    Property(null)
+], Popup.prototype, "viewPortElement", void 0);
+__decorate([
+    Property({ X: 'none', Y: 'none' })
+], Popup.prototype, "collision", void 0);
+__decorate([
     Property(document.body)
@@ -283,5 +355,2 @@ ], Popup.prototype, "relateTo", void 0);
 ], Popup.prototype, "close", void 0);
-__decorate([
-    Event()
-], Popup.prototype, "orientationChange", void 0);
 Popup = __decorate([
@@ -288,0 +357,0 @@ NotifyPropertyChanges

package.json

@@ -13,29 +13,13 @@ {
       },
-      "D:\\release\\packages\\node_modules\\@syncfusion\\ej2-calendars"
-    ],
-    [
-      {
-        "raw": "@syncfusion/ej2-popups@^1.0.0",
-        "scope": "@syncfusion",
-        "escapedName": "@syncfusion%2fej2-popups",
-        "name": "@syncfusion/ej2-popups",
-        "rawSpec": "^1.0.0",
-        "spec": ">=1.0.0 <2.0.0",
-        "type": "range"
-      },
-      "C:\\Users\\ajithr\\Desktop\\npm\\node_modules\\@syncfusion\\ej2-calendars"
+      "C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2-navigations"
     ]
   ],
-  "_from": "@syncfusion/ej2-popups@^1.0.0",
-  "_id": "@syncfusion/ej2-popups@1.0.5",
+  "_from": "@syncfusion/ej2-popups@*",
+  "_id": "@syncfusion/ej2-popups@1.0.10",
   "_inCache": true,
   "_location": "/@syncfusion/ej2-popups",
-  "_nodeVersion": "6.10.2",
-  "_npmOperationalInternal": {
-    "host": "packages-12-west.internal.npmjs.com",
-    "tmp": "tmp/ej2-popups-1.0.5.tgz_1494508148690_0.0695330766029656"
-  },
+  "_nodeVersion": "6.11.0",
   "_npmUser": {
-    "name": "ajithr11",
-    "email": "[e-mail]"
+    "name": "ej2",
+    "email": "[e-mail]"
   },
@@ -45,20 +29,19 @@ "_npmVersion": "3.10.10",
   "_requested": {
-    "raw": "@syncfusion/ej2-popups@^1.0.0",
+    "raw": "@syncfusion/ej2-popups@*",
     "scope": "@syncfusion",
     "escapedName": "@syncfusion%2fej2-popups",
     "name": "@syncfusion/ej2-popups",
-    "rawSpec": "^1.0.0",
-    "spec": ">=1.0.0 <2.0.0",
+    "rawSpec": "*",
+    "spec": "*",
     "type": "range"
   },
   "_requiredBy": [
-    "/@syncfusion/ej2-calendars",
     "/@syncfusion/ej2-navigations",
     "/@syncfusion/ej2-ng-popups"
   ],
-  "_resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-1.0.5.tgz",
-  "_shasum": "dc9a0aac46996077555b8b9d1d2ae58ca3d9f26c",
+  "_resolved": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-popups/-/ej2-popups-1.0.10.tgz",
+  "_shasum": "a64893c4270a86c7484fb2bc485074b681fb35dc",
   "_shrinkwrap": null,
-  "_spec": "@syncfusion/ej2-popups@^1.0.0",
-  "_where": "C:\\Users\\ajithr\\Desktop\\npm\\node_modules\\@syncfusion\\ej2-calendars",
+  "_spec": "@syncfusion/ej2-popups@*",
+  "_where": "C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2-navigations",
   "author": {
@@ -70,17 +53,9 @@ "name": "Syncfusion Inc."
   },
-  "config": {
-    "ghooks": {
-      "pre-commit": "gulp pre-commit",
-      "pre-push": "gulp pre-push",
-      "commit-msg": "gulp commit-msg"
-    }
-  },
   "dependencies": {
-    "@syncfusion/ej2-base": "^1.0.0",
-    "@syncfusion/ej2-buttons": "^1.0.0"
+    "@syncfusion/ej2-base": "^1.0.10",
+    "@syncfusion/ej2-buttons": "^1.0.10"
   },
-  "description": "Syncfusion TypeScript popup Component",
+  "description": "Essential JS 2 popup Component",
   "devDependencies": {
     "@types/chai": "^3.4.28",
-    "@types/es6-promise": "0.0.28",
     "@types/jasmine": "^2.2.29",
@@ -90,8 +65,7 @@ "@types/jasmine-ajax": "^3.1.27",
   },
-  "directories": {},
   "dist": {
-    "shasum": "dc9a0aac46996077555b8b9d1d2ae58ca3d9f26c",
-    "tarball": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-1.0.5.tgz"
+    "shasum": "a64893c4270a86c7484fb2bc485074b681fb35dc",
+    "tarball": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-popups/-/ej2-popups-1.0.10.tgz"
   },
-  "gitHead": "40eb9234117a568f44343d92cf934dce2f48e1d3",
+  "gitHead": "2ebc6a19888a829eacb24ac114ede216d35add6d",
   "homepage": "https://github.com/syncfusion/ej2-popups#readme",
@@ -101,7 +75,16 @@ "keywords": [
     "syncfusion",
+    "ej2-dialog",
     "ej2-popups",
+    "dialog",
+    "window",
+    "modal",
     "popup",
-    "dialog",
     "alert",
-    "notification"
+    "prompt",
+    "modeless",
+    "dialog box",
+    "confirm box",
+    "confirmation dialog",
+    "message box",
+    "custom dialog"
   ],
@@ -111,8 +94,4 @@ "license": "SEE LICENSE IN license",
     {
-      "name": "ajithr11",
-      "email": "[e-mail]"
-    },
-    {
-      "name": "syncfusionorg",
-      "email": "[e-mail]"
+      "name": "ej2",
+      "email": "[e-mail]"
     }
@@ -123,3 +102,4 @@ ],
   "optionalDependencies": {},
-  "readme": "ERROR: No README data found!",
+  "readme": "# Overview\n\nEasily creates Alert, Confirmation, Prompt dialogs and Tooltip. It comes with full support and is available under commercial and community licenses – please visit www.syncfusion.com to get started.\n\n## Resources\n\n* [Dialog Demos](http://ej2.syncfusion.com/demos/#/dialog/basic.html)\n\n# 1.0.10\n## Dialog\n### New Features\n-   Removed the default value for zIndex property and updated the calculation based on parent elements z-index.\n\n### Bug Fixes\n-   Dialog close button alignment changes.\n-   Dialog content focusing changes, when the first input element was hidden it will focus to next input.\n\n## Tooltip\n### New Features\n-   Tooltip can be displayed in 12 different positions.\n-   Supports animation effects while showing/hiding the tooltip.\n-   Tooltip content can be either assigned with static text, template content or else be loaded dynamically via AJAX.\n-   Supports 4 opening modes - `hover`, `click`, `focus` & `custom`.\n-   Supports auto tip positioning.\n-   Mouse trailing option is available for moving the tooltip along with the mouse pointer.\n-   Tooltip can be opened in Sticky mode, allowing the user to close/hide it manually.",
+  "readmeFilename": "ReadMe.md",
   "repository": {
@@ -134,3 +114,3 @@ "type": "git",
   },
-  "version": "1.0.8"
-}
+  "version": "1.0.10"
+}

src/common/collision.d.ts

@@ -1,1 +0,11 @@
-export declare function flip(element: HTMLElement, target: HTMLElement, offsetX: number, offsetY: number, positionX: string, positionY: string): void;
+/**
+ * Collision module.
+ */
+import { OffsetPosition } from './position';
+export interface CollisionCoordinates {
+    X: boolean;
+    Y: boolean;
+}
+export declare function fit(element: HTMLElement, viewPortElement?: HTMLElement, axis?: CollisionCoordinates, position?: OffsetPosition): OffsetPosition;
+export declare function isCollide(element: HTMLElement, viewPortElement?: HTMLElement, x?: number, y?: number): string[];
+export declare function flip(element: HTMLElement, target: HTMLElement, offsetX: number, offsetY: number, positionX: string, positionY: string, viewPortElement?: HTMLElement, axis?: CollisionCoordinates): void;

src/common/collision.js

@@ -5,41 +5,135 @@ define(["require", "exports", "./position"], function (require, exports, position_1) {
     var parentDocument;
-    function flip(element, target, offsetX, offsetY, positionX, positionY) {
-        if (!target || !element || !positionX || !positionY) {
+    var targetContainer;
+    function fit(element, viewPortElement, axis, position) {
+        if (viewPortElement === void 0) { viewPortElement = null; }
+        if (axis === void 0) { axis = { X: false, Y: false }; }
+        if (!axis.Y && !axis.X) {
+            return { left: 0, top: 0 };
+        }
+        var elemData = element.getBoundingClientRect();
+        targetContainer = viewPortElement;
+        parentDocument = element.ownerDocument;
+        if (!position) {
+            position = position_1.calculatePosition(element, 'left', 'top');
+        }
+        if (axis.X) {
+            var containerWidth = targetContainer ? getTargetContainerWidth() : getViewPortWidth();
+            var containerLeft = ContainerLeft();
+            var containerRight = ContainerRight();
+            var overLeft = containerLeft - position.left;
+            var overRight = position.left + elemData.width - containerRight;
+            if (elemData.width > containerWidth) {
+                if (overLeft > 0 && overRight <= 0) {
+                    position.left = containerRight - elemData.width;
+                }
+                else if (overRight > 0 && overLeft <= 0) {
+                    position.left = containerLeft;
+                }
+                else {
+                    position.left = overLeft > overRight ? (containerRight - elemData.width) : containerLeft;
+                }
+            }
+            else if (overLeft > 0) {
+                position.left += overLeft;
+            }
+            else if (overRight > 0) {
+                position.left -= overRight;
+            }
+        }
+        if (axis.Y) {
+            var containerHeight = targetContainer ? getTargetContainerHeight() : getViewPortHeight();
+            var containerTop = ContainerTop();
+            var containerBottom = ContainerBottom();
+            var overTop = containerTop - position.top;
+            var overBottom = position.top + elemData.height - containerBottom;
+            if (elemData.height > containerHeight) {
+                if (overTop > 0 && overBottom <= 0) {
+                    position.top = containerBottom - elemData.height;
+                }
+                else if (overBottom > 0 && overTop <= 0) {
+                    position.top = containerTop;
+                }
+                else {
+                    position.top = overTop > overBottom ? (containerBottom - elemData.height) : containerTop;
+                }
+            }
+            else if (overTop > 0) {
+                position.top += overTop;
+            }
+            else if (overBottom > 0) {
+                position.top -= overBottom;
+            }
+        }
+        return position;
+    }
+    exports.fit = fit;
+    function isCollide(element, viewPortElement, x, y) {
+        if (viewPortElement === void 0) { viewPortElement = null; }
+        var elemOffset = position_1.calculatePosition(element, 'left', 'top');
+        if (x) {
+            elemOffset.left = x;
+        }
+        if (y) {
+            elemOffset.top = y;
+        }
+        var data = [];
+        targetContainer = viewPortElement;
+        parentDocument = element.ownerDocument;
+        var elementRect = element.getBoundingClientRect();
+        var top = elemOffset.top;
+        var left = elemOffset.left;
+        var right = elemOffset.left + elementRect.width;
+        var bottom = elemOffset.top + elementRect.height;
+        var topData = '';
+        var leftData = '';
+        var yAxis = topCollideCheck(top, bottom);
+        var xAxis = leftCollideCheck(left, right);
+        if (yAxis.topSide) {
+            data.push('top');
+        }
+        if (xAxis.rightSide) {
+            data.push('right');
+        }
+        if (xAxis.leftSide) {
+            data.push('left');
+        }
+        if (yAxis.bottomSide) {
+            data.push('bottom');
+        }
+        return data;
+    }
+    exports.isCollide = isCollide;
+    function flip(element, target, offsetX, offsetY, positionX, positionY, viewPortElement, axis) {
+        if (viewPortElement === void 0) { viewPortElement = null; }
+        if (axis === void 0) { axis = { X: true, Y: true }; }
+        if (!target || !element || !positionX || !positionY || (!axis.X && !axis.Y)) {
             return;
         }
-        var edge = { eTL: null,
-            eTR: null,
-            eBL: null,
-            eBR: null };
-        var elementRect = { elementData: null, targetData: null };
-        var eStatus = {
-            pTL: null,
-            pTR: null,
-            pBL: null,
-            pBR: null
+        var tEdge = { TL: null,
+            TR: null,
+            BL: null,
+            BR: null };
+        var eEdge = {
+            TL: null,
+            TR: null,
+            BL: null,
+            BR: null
         };
-        var flipAlter = { flipAlter: '' };
-        var posStatus = { eflipStatusX: false, eflipStatusY: false };
+        var elementRect = element.getBoundingClientRect();
         var pos = {
             posX: positionX, posY: positionY, offsetX: offsetX, offsetY: offsetY, position: { left: 0, top: 0 }
         };
+        targetContainer = viewPortElement;
         parentDocument = target.ownerDocument;
-        updateElementData(element, target, edge, pos, elementRect);
-        setPosition(eStatus, pos, elementRect);
-        validateElementPos(eStatus);
-        if (flipValidation(edge, eStatus, flipAlter, posStatus)) {
-            applyFlip(target, edge, eStatus, flipAlter, posStatus, pos, elementRect);
+        updateElementData(target, tEdge, pos);
+        setPosition(eEdge, pos, elementRect);
+        if (axis.X) {
+            leftFlip(target, eEdge, tEdge, pos, elementRect, true);
         }
+        if (axis.Y) {
+            topFlip(target, eEdge, tEdge, pos, elementRect, true);
+        }
         setPopup(element, pos);
     }
     exports.flip = flip;
-    function updateElementData(element, target, edge, pos, elementRect) {
-        elementRect.elementData = { width: element.getBoundingClientRect().width, height: element.getBoundingClientRect().height };
-        elementRect.targetData = { width: target.getBoundingClientRect().width, height: target.getBoundingClientRect().height };
-        pos.position = position_1.calculatePosition(target, pos.posX, pos.posY);
-        edge.eTL = position_1.calculatePosition(target, 'left', 'top');
-        edge.eTR = position_1.calculatePosition(target, 'right', 'top');
-        edge.eBR = position_1.calculatePosition(target, 'left', 'bottom');
-        edge.eBL = position_1.calculatePosition(target, 'right', 'bottom');
-    }
     function setPopup(element, pos) {
@@ -58,115 +152,123 @@ var left = 0;
     }
+    function updateElementData(target, edge, pos) {
+        pos.position = position_1.calculatePosition(target, pos.posX, pos.posY);
+        edge.TL = position_1.calculatePosition(target, 'left', 'top');
+        edge.TR = position_1.calculatePosition(target, 'right', 'top');
+        edge.BR = position_1.calculatePosition(target, 'left', 'bottom');
+        edge.BL = position_1.calculatePosition(target, 'right', 'bottom');
+    }
     function setPosition(eStatus, pos, elementRect) {
-        eStatus.pTL = { top: pos.position.top + pos.offsetY, left: pos.position.left + pos.offsetX, affectedBy: '' };
-        eStatus.pTR = { top: eStatus.pTL.top, left: eStatus.pTL.left + elementRect.elementData.width, affectedBy: '' };
-        eStatus.pBL = { top: eStatus.pTL.top + elementRect.elementData.height,
-            left: eStatus.pTL.left, affectedBy: '' };
-        eStatus.pBR = { top: eStatus.pTL.top + elementRect.elementData.height,
-            left: eStatus.pTL.left + elementRect.elementData.width, affectedBy: '' };
+        eStatus.TL = { top: pos.position.top + pos.offsetY, left: pos.position.left + pos.offsetX };
+        eStatus.TR = { top: eStatus.TL.top, left: eStatus.TL.left + elementRect.width };
+        eStatus.BL = { top: eStatus.TL.top + elementRect.height,
+            left: eStatus.TL.left };
+        eStatus.BR = { top: eStatus.TL.top + elementRect.height,
+            left: eStatus.TL.left + elementRect.width };
     }
-    function applyFlip(target, edge, eStatus, alter, posStatus, pos, elementRect) {
-        var position2 = pos.position;
-        var locX1 = pos.offsetX;
-        var locY1 = pos.offsetY;
-        if (posStatus.eflipStatusX) {
-            pos.offsetX = pos.offsetX + elementRect.elementData.width;
-            if (alter.flipAlter === 'left') {
-                pos.offsetX = -1 * pos.offsetX;
-            }
-            pos.posX = (pos.posX === 'left') ? 'right' : 'left';
+    function leftCollideCheck(left, right) {
+        var leftSide = false;
+        var rightSide = false;
+        if (((left - getBodyScrollLeft()) < ContainerLeft())) {
+            leftSide = true;
         }
-        else {
-            pos.offsetY = pos.offsetY + elementRect.elementData.height;
-            if (alter.flipAlter === 'top') {
-                pos.offsetY = -1 * pos.offsetY;
-            }
-            pos.posY = (pos.posY === 'top') ? 'bottom' : 'top';
+        if (right > ContainerRight()) {
+            rightSide = true;
         }
-        pos.position = position_1.calculatePosition(target, pos.posX, pos.posY);
-        setPosition(eStatus, pos, elementRect);
-        validateElementPos(eStatus);
-        if (flipValidation(edge, eStatus, alter, posStatus)) {
-            pos.position = position2;
-            pos.offsetX = locX1;
-            pos.offsetY = locY1;
-        }
+        return { leftSide: leftSide, rightSide: rightSide };
     }
-    function setElementPosition(edge, eStatus, posStatus) {
-        if (eStatus.pTL.top < edge.eTL.top
-            && eStatus.pTR.top < edge.eTR.top) {
-            posStatus.eflipStatusY = true;
-            posStatus.eflipStatusX = false;
+    function leftFlip(target, edge, tEdge, pos, elementRect, deepCheck) {
+        var collideSide = leftCollideCheck(edge.TL.left, edge.TR.left);
+        if ((tEdge.TL.left - getBodyScrollLeft()) <= ContainerLeft()) {
+            collideSide.leftSide = false;
         }
-        else if (eStatus.pBL.top > edge.eBL.top
-            && eStatus.pBR.top > edge.eBR.top) {
-            posStatus.eflipStatusY = true;
-            posStatus.eflipStatusX = false;
+        if (tEdge.TR.left >= ContainerRight()) {
+            collideSide.rightSide = false;
         }
-        else if (eStatus.pTL.left < edge.eTL.left
-            && eStatus.pBL.left < edge.eBL.left) {
-            posStatus.eflipStatusY = false;
-            posStatus.eflipStatusX = true;
+        if ((collideSide.leftSide && !collideSide.rightSide) || (!collideSide.leftSide && collideSide.rightSide)) {
+            if (pos.posX === 'right') {
+                pos.posX = 'left';
+            }
+            else {
+                pos.posX = 'right';
+            }
+            pos.offsetX = pos.offsetX + elementRect.width;
+            pos.offsetX = -1 * pos.offsetX;
+            pos.position = position_1.calculatePosition(target, pos.posX, pos.posY);
+            setPosition(edge, pos, elementRect);
+            if (deepCheck) {
+                leftFlip(target, edge, tEdge, pos, elementRect, false);
+            }
         }
-        else if (eStatus.pTR.left > edge.eTR.left
-            && eStatus.pBR.left > edge.eBR.left) {
-            posStatus.eflipStatusY = false;
-            posStatus.eflipStatusX = true;
-        }
     }
-    function flipValidation(edge, eStatus, alter, posStatus) {
-        alter.flipAlter = '';
-        setElementPosition(edge, eStatus, posStatus);
-        if (eStatus.pTL.affectedBy === 'top'
-            && eStatus.pTR.affectedBy === 'top'
-            && eStatus.pBL.affectedBy === ''
-            && eStatus.pBR.affectedBy === ''
-            && posStatus.eflipStatusY) {
-            alter.flipAlter = 'bottom';
+    function topFlip(target, edge, tEdge, pos, elementRect, deepCheck) {
+        var collideSide = topCollideCheck(edge.TL.top, edge.BL.top);
+        if ((tEdge.TL.top - getBodyScrollTop()) <= ContainerTop()) {
+            collideSide.topSide = false;
         }
-        else if (eStatus.pBL.affectedBy === 'bottom'
-            && eStatus.pBR.affectedBy === 'bottom'
-            && eStatus.pTL.affectedBy === ''
-            && eStatus.pTR.affectedBy === ''
-            && posStatus.eflipStatusY) {
-            alter.flipAlter = 'top';
+        if (tEdge.BL.top >= ContainerBottom()) {
+            collideSide.bottomSide = false;
         }
-        else if (eStatus.pTL.affectedBy === 'left'
-            && eStatus.pBL.affectedBy === 'left'
-            && eStatus.pTR.affectedBy === ''
-            && eStatus.pBR.affectedBy === ''
-            && posStatus.eflipStatusX) {
-            alter.flipAlter = 'right';
+        if ((collideSide.topSide && !collideSide.bottomSide) || (!collideSide.topSide && collideSide.bottomSide)) {
+            if (pos.posY === 'top') {
+                pos.posY = 'bottom';
+            }
+            else {
+                pos.posY = 'top';
+            }
+            pos.offsetY = pos.offsetY + elementRect.height;
+            pos.offsetY = -1 * pos.offsetY;
+            pos.position = position_1.calculatePosition(target, pos.posX, pos.posY);
+            setPosition(edge, pos, elementRect);
+            if (deepCheck) {
+                topFlip(target, edge, tEdge, pos, elementRect, false);
+            }
         }
-        else if (eStatus.pTR.affectedBy === 'right'
-            && eStatus.pBR.affectedBy === 'right'
-            && eStatus.pBL.affectedBy === ''
-            && eStatus.pTL.affectedBy === ''
-            && posStatus.eflipStatusX) {
-            alter.flipAlter = 'left';
+    }
+    function topCollideCheck(top, bottom) {
+        var topSide = false;
+        var bottomSide = false;
+        if ((top - getBodyScrollTop()) < ContainerTop()) {
+            topSide = true;
         }
-        else {
-            alter.flipAlter = '';
+        if (bottom > ContainerBottom()) {
+            bottomSide = true;
         }
-        return alter.flipAlter.length > 0;
+        return { topSide: topSide, bottomSide: bottomSide };
     }
-    function validateAffectedEdges(positionTemp) {
-        if ((positionTemp.top - getBodyScrollTop()) < 0) {
-            (positionTemp.affectedBy = 'top');
+    function getTargetContainerWidth() {
+        return targetContainer.getBoundingClientRect().width;
+    }
+    function getTargetContainerHeight() {
+        return targetContainer.getBoundingClientRect().height;
+    }
+    function getTargetContainerLeft() {
+        return targetContainer.getBoundingClientRect().left;
+    }
+    function getTargetContainerTop() {
+        return targetContainer.getBoundingClientRect().top;
+    }
+    function ContainerTop() {
+        if (targetContainer) {
+            return getTargetContainerTop();
         }
-        else if ((positionTemp.left - getBodyScrollLeft()) < 0) {
-            (positionTemp.affectedBy = 'left');
+        return 0;
+    }
+    function ContainerLeft() {
+        if (targetContainer) {
+            return getTargetContainerLeft();
         }
-        else if (positionTemp.top > (getBodyScrollTop() + getViewPortHeight())) {
-            (positionTemp.affectedBy = 'bottom');
+        return 0;
+    }
+    function ContainerRight() {
+        if (targetContainer) {
+            return (getBodyScrollLeft() + getTargetContainerLeft() + getTargetContainerWidth());
         }
-        else if (positionTemp.left > (getBodyScrollLeft() + getViewPortWidth())) {
-            (positionTemp.affectedBy = 'right');
+        return (getBodyScrollLeft() + getViewPortWidth());
+    }
+    function ContainerBottom() {
+        if (targetContainer) {
+            return (getBodyScrollTop() + getTargetContainerTop() + getTargetContainerHeight());
         }
+        return (getBodyScrollTop() + getViewPortHeight());
     }
-    function validateElementPos(eStatus) {
-        validateAffectedEdges(eStatus.pTL);
-        validateAffectedEdges(eStatus.pTR);
-        validateAffectedEdges(eStatus.pBL);
-        validateAffectedEdges(eStatus.pBR);
-    }
     function getBodyScrollTop() {
@@ -173,0 +275,0 @@ return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;

src/common/position.d.ts

@@ -0,1 +1,2 @@
+export declare function calculateRelativeBasedPosition(anchor: HTMLElement, element: HTMLElement): OffsetPosition;
 export declare function calculatePosition(currentElement: Element, positionX?: string, positionY?: string): OffsetPosition;
@@ -2,0 +3,0 @@ export interface OffsetPosition {

src/common/position.js

@@ -7,2 +7,15 @@ define(["require", "exports"], function (require, exports) {
     var parentDocument;
+    function calculateRelativeBasedPosition(anchor, element) {
+        var anchorPos = { left: 0, top: 0 };
+        if (!anchor || !element) {
+            return anchorPos;
+        }
+        while (element.offsetParent && anchor && element.offsetParent !== anchor) {
+            anchorPos.left += anchor.offsetLeft;
+            anchorPos.top += anchor.offsetTop;
+            anchor = anchor.offsetParent;
+        }
+        return anchorPos;
+    }
+    exports.calculateRelativeBasedPosition = calculateRelativeBasedPosition;
     function calculatePosition(currentElement, positionX, positionY) {
@@ -9,0 +22,0 @@ if (!currentElement) {

src/dialog/dialog-builder.d.ts

 import{Dialog} from "./dialog";
-import { Button, ButtonModel } from '@syncfusion/ej2-buttons';
+
 import{ DialogEffect} from "./dialog";
@@ -57,6 +57,2 @@
 	/**
-	* Specifies the collection of dialog `buttons` with click action and button component model.
-	*/
-	buttons(value: (val:ButtonPropsModel) => void | Object): BuilderProperties;
-	/**
 	* Specifies the dialog that is closed when user press the ESC key.
@@ -144,13 +140,2 @@ */
 }
-export interface ButtonPropsModel {
-	/**
-	* Event triggers when `click` the dialog button.
-	*/
-	click(value:Function): ButtonPropsModel;
-	/**
-	* Specifies the Button component properties to render the dialog buttons.
-	*/
-	buttonModel(value:ButtonModel): ButtonPropsModel;
-	add(): ButtonPropsModel;
-}
 export interface PositionData {
@@ -157,0 +142,0 @@ /**

src/dialog/dialog-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, Event, CreateBuilder, Collection, L10n, Browser, EmitType } from '@syncfusion/ej2-base';
import { createElement, addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base/dom';
import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base/util';
import { DialogHelper } from './dialog-builder';
import { EventHandler } from '@syncfusion/ej2-base/event-handler';
import { Draggable } from '@syncfusion/ej2-base';
import { Popup, PositionData } from '../popup/popup';
import { Button, ButtonModel } from '@syncfusion/ej2-buttons';
+import { Component, Property, Event, CreateBuilder, Collection, L10n, Browser, EmitType } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base/dom';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base/util';import { DialogHelper } from './dialog-builder';import { EventHandler } from '@syncfusion/ej2-base/event-handler';import { Draggable } from '@syncfusion/ej2-base';import { Popup, PositionData } from '../popup/popup';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';
 import {AnimationSettings} from "./dialog";
@@ -11,6 +11,6 @@ import {ComponentModel} from '@syncfusion/ej2-base';
     /**
-     * Specifies the Button component properties to render the dialog buttons.
     */
    buttonModel?: ButtonModel;
+     * Specifies the Button component properties to render the dialog buttons.     */    buttonModel?: ButtonModel;
 
     /**
-     * Event triggers when `click` the dialog button.
     * @event
     */
    click?: EmitType<Object>;
+     * Event triggers when `click` the dialog button.     * @event     */    click?: EmitType<Object>;
 
@@ -25,79 +25,79 @@ }
     /**
-     * Specifies the `content` to be displayed in dialog, it can be text or HTML element.
     * @default ''
     */
    content?: string | HTMLElement;
+     * Specifies the `content` to be displayed in dialog, it can be text or HTML element.     * @default ''     */    content?: string | HTMLElement;
 
     /**
-     * Specifies the value to either show or hide the close icon button.
     * @default false
     */
    showCloseIcon?: boolean;
+     * Specifies the value to either show or hide the close icon button.     * @default false     */    showCloseIcon?: boolean;
 
     /**
-     * Specifies the value to render the dialog as modal or modeless.
     * @default false
     */
    isModal?: boolean;
+     * Specifies the value to render the dialog as modal or modeless.     * @default false     */    isModal?: boolean;
 
     /**
-     * Specifies the `header` content that defines how the dialog `header` is rendered. 
     * @default ''
     */
    header?: string;
+     * Specifies the `header` content that defines how the dialog `header` is rendered.      * @default ''     */    header?: string;
 
     /**
-     * Specifies the value to either dialog is opened on page load or not.
     * @default false     
     */
    showOnInit?: boolean;
+     * Specifies the value to either dialog is opened on page load or not.     * @default false          */    showOnInit?: boolean;
 
     /**
-     * Specifies the `height` of the dialog. 
     * @default 'auto'
     */
    height?: string | number;
+     * Specifies the `height` of the dialog.      * @default 'auto'     */    height?: string | number;
 
     /**
-     * Specifies the `width` of the dialog. 
     * @default '100%'
     */
    width?: string | number;
+     * Specifies the `width` of the dialog.      * @default '100%'     */    width?: string | number;
 
     /**
-     * Specifies the CSS class name to be added for dialog element.
     * User can add single or multiple CSS classes.
     * @default ''
     */
    cssClass?: string;
+     * Specifies the CSS class name to be added for dialog element.     * User can add single or multiple CSS classes.     * @default ''     */    cssClass?: string;
 
     /**
-     * Specifies the z-index value for dialog. 
     * @default 1000
     */
    zIndex?: number;
+     * Specifies the z-index value for dialog.     */    zIndex?: number;
 
     /**
-     * Specifies the `target` element where the dialog should be displayed.
     * If the user set the specific `target` element for dialog, it will be positioned based on the `target`.
     * @default null
     */
    target?: HTMLElement | string;
+     * Specifies the `target` element where the dialog should be displayed.     * If the user set the specific `target` element for dialog, it will be positioned based on the `target`.     * @default null     */    target?: HTMLElement | string;
 
     /**
-     * Specifies the template content to defines how the dialog footer is rendered. 
     * @default ''
     */
    footerTemplate?: string;
+     * Specifies the template content to defines how the dialog footer is rendered.      * @default ''     */    footerTemplate?: string;
 
     /**
-     * Specifies the value to either enable or disable draggable option in dialog. 
     * @default false
     */
    allowDragging?: boolean;
+     * Specifies the value to either enable or disable draggable option in dialog.      * @default false     */    allowDragging?: boolean;
 
     /**
-     * Specifies the collection of dialog `buttons` with click action and button component model.     
     * @default [{}]   
     */
    buttons?: ButtonPropsModel[];
+     * Specifies the collection of dialog `buttons` with click action and button component model.          * @default [{}]        */    buttons?: ButtonPropsModel[];
 
     /**
-     * Specifies the dialog that is closed when user press the ESC key. 
     * @default { closeOnEscape: true }
     */
    closeOnEscape?: boolean;
+     * Specifies the dialog that is closed when user press the ESC key.      * @default { closeOnEscape: true }     */    closeOnEscape?: boolean;
 
     /**
-     * Specifies the dialog animation settings.
     * @default { effect: 'Fade', duration: 400, delay:0 }
     */
    animationSettings?: AnimationSettings;
+     * Specifies the dialog animation settings.     * @default { effect: 'Fade', duration: 400, delay:0 }     */    animationSettings?: AnimationSettings;
 
     /**
-     * Specifies the dialog `position` with respect to the associated target elements.
     * @default {X:'center', Y:'center'}
     */
    position?: PositionData;
+     * Specifies the dialog `position` with respect to the associated target elements.     * @default {X:'center', Y:'center'}     */    position?: PositionData;
 
     /**
-     * Specifies the localization culture code for dialog.
     * @default ''
     */
    locale?: string;
+     * Specifies the localization culture code for dialog.     * @default ''     */    locale?: string;
 
     /**
-     * Event triggers when the dialog is `created`. 
     * @event
     */
    created?: EmitType<Object>;
+     * Event triggers when the dialog is `created`.      * @event     */    created?: EmitType<Object>;
 
     /**
-     * Event triggers once dialog is opened.
     * @event
     */
    open?: EmitType<Object>;
+     * Event triggers once dialog is opened.     * @event     */    open?: EmitType<Object>;
 
     /**
-     * Event triggers before open the dialog. 
     * @event
     */
    beforeOpen?: EmitType<Object>;
+     * Event triggers before open the dialog.      * @event     */    beforeOpen?: EmitType<Object>;
 
     /**
-     * Event triggers once the dialog is closed.
     * @event
     */
    close?: EmitType<Object>;
+     * Event triggers once the dialog is closed.     * @event     */    close?: EmitType<Object>;
 
     /**
-     * Event triggers before close the dialog.
     * @event
     */
    beforeClose?: EmitType<Object>;
+     * Event triggers before close the dialog.     * @event     */    beforeClose?: EmitType<Object>;
 
     /**
-     * Event triggers when user starts to drag the dialog. 
     * @event
     */
    dragStart?: EmitType<Object>;
+     * Event triggers when user starts to drag the dialog.      * @event     */    dragStart?: EmitType<Object>;
 
     /**
-     * Event triggers when the user stops dragging the dialog.
     * @event
     */
    dragStop?: EmitType<Object>;
+     * Event triggers when the user stops dragging the dialog.     * @event     */    dragStop?: EmitType<Object>;
 
     /**
-     * Event triggers when the user drags dialog. 
     * @event
     */
    drag?: EmitType<Object>;
+     * Event triggers when the user drags dialog.      * @event     */    drag?: EmitType<Object>;
 
     /**
-     * Event triggers when modal dialog overlay is clicked. 
     * @event
     */
    overlayClick?: EmitType<Object>;
+     * Event triggers when modal dialog overlay is clicked.      * @event     */    overlayClick?: EmitType<Object>;
 
 }

src/dialog/dialog.d.ts

@@ -43,3 +43,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
  * ```html
- * <div id="dialog"/>
+ * <div id="dialog"></div>
  * ```
@@ -59,2 +59,3 @@ * ```typescript
     private dlgOverlay;
+    private dlgContainer;
     private headerEle;
@@ -69,3 +70,2 @@ private buttonContent;
     private dragObj;
-    private contentHeight;
     private primaryButtonEle;
@@ -77,2 +77,3 @@ private targetEle;
     private focusIndex;
+    private closedFrom;
     /**
@@ -121,3 +122,2 @@ * Specifies the `content` to be displayed in dialog, it can be text or HTML element.
      * Specifies the z-index value for dialog.
-     * @default 1000
      */
@@ -237,6 +237,7 @@ zIndex: number;
     private initRender();
+    private positionChange();
+    private getZindexPartial();
     private setAllowDragging();
     private setButton();
     private setContent();
-    private setContentHeight();
     private setEnableRTL();
@@ -243,0 +244,0 @@ private setHeader();

src/dialog/dialog.js

@@ -43,2 +43,3 @@ var __extends = (this && this.__extends) || (function () {
     var DLG_OVERLAY = 'e-dlg-overlay';
+    var DLG_CONTAINER = 'e-dlg-container';
     var SCROLL_DISABLED = 'e-scroll-disabled';
@@ -51,2 +52,3 @@ var DLG_PRIMARY_BUTTON = 'e-primary';
     var DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';
+    var DLG_HIDE = 'e-popup-close';
     var Dialog = (function (_super) {
@@ -64,4 +66,5 @@ __extends(Dialog, _super);
             var _this = this;
-            this.closeIconClickEventHandler = function () {
+            this.closeIconClickEventHandler = function (event) {
                 _this.hide();
+                _this.closedFrom = event;
             };
@@ -100,2 +103,3 @@ this.dlgOverlayClickEventHandler = function (event) {
                 this.hide();
+                this.closedFrom = event;
             }
@@ -137,2 +141,5 @@ if ((event.keyCode === 13 && element.tagName.toLowerCase() === 'button' &&
             dom_1.attributes(this.element, { role: 'dialog' });
+            if (util_1.isNullOrUndefined(this.zIndex)) {
+                this.getZindexPartial();
+            }
             if (this.header !== '') {
@@ -162,2 +169,5 @@ this.setHeader();
             }
+            if (!util_1.isNullOrUndefined(this.targetEle)) {
+                this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);
+            }
             this.popupObj = new popup_1.Popup(this.element, {
@@ -168,6 +178,2 @@ height: this.height,
                 relateTo: this.target,
-                position: {
-                    X: this.position.X,
-                    Y: this.position.Y
-                },
                 open: function () {
@@ -177,3 +183,6 @@ _this.focusContent();
                 },
-                close: function () {
+                close: function (event) {
+                    if (_this.isModal) {
+                        _this.dlgContainer.style.display = 'none';
+                    }
                     if (!util_1.isNullOrUndefined(_this.focusElements) && _this.focusElements.length > 0) {
@@ -185,3 +194,4 @@ _this.unBindEvent((util_1.isNullOrUndefined(_this.focusIndex) ? _this.element : _this.focusElements[_this.focusIndex]));
                     }
-                    _this.trigger('close');
+                    _this.trigger('close', _this.closedFrom);
+                    _this.closedFrom = {};
                     if (!util_1.isNullOrUndefined(_this.storeActiveElement)) {
@@ -192,12 +202,57 @@ _this.storeActiveElement.focus();
             });
+            this.positionChange();
             this.setEnableRTL();
-            this.element.style.display = 'block';
-            if (!util_1.isNullOrUndefined(this.content) && this.content !== '') {
-                this.setContentHeight();
-            }
-            this.element.style.display = 'none';
+            dom_1.addClass([this.element], DLG_HIDE);
             if (this.showOnInit) {
                 this.show();
             }
+            else {
+                if (this.isModal) {
+                    this.dlgOverlay.style.display = 'none';
+                }
+            }
         };
+        Dialog.prototype.positionChange = function () {
+            if (!this.isModal) {
+                this.popupObj.setProperties({
+                    position: {
+                        X: this.position.X, Y: this.position.Y
+                    }
+                });
+            }
+            else {
+                this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);
+            }
+        };
+        Dialog.prototype.getZindexPartial = function () {
+            var dialogParent = this.element.parentElement;
+            var parentZindex = [];
+            while (dialogParent) {
+                if (dialogParent.tagName !== 'BODY') {
+                    var index = document.defaultView.getComputedStyle(dialogParent, null).getPropertyValue('z-index');
+                    var position = document.defaultView.getComputedStyle(dialogParent, null).getPropertyValue('position');
+                    if (index !== 'auto' && position !== 'static') {
+                        parentZindex.push(index);
+                    }
+                    dialogParent = dialogParent.parentElement;
+                }
+                else {
+                    break;
+                }
+            }
+            var childrenZindex = [];
+            for (var i = 0; i < document.body.children.length; i++) {
+                if (!this.element.isEqualNode(document.body.children[i])) {
+                    var index = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('z-index');
+                    var position = document.defaultView.getComputedStyle(document.body.children[i], null).getPropertyValue('position');
+                    if (index !== 'auto' && position !== 'static') {
+                        childrenZindex.push(index);
+                    }
+                }
+            }
+            childrenZindex.push('999');
+            var finalValue = parentZindex.concat(childrenZindex);
+            this.zIndex = Math.max.apply(Math, finalValue) + 1;
+        };
+        ;
         Dialog.prototype.setAllowDragging = function () {
@@ -247,8 +302,2 @@ var _this = this;
         };
-        Dialog.prototype.setContentHeight = function () {
-            this.contentHeight = this.element.offsetHeight -
-                ((util_1.isNullOrUndefined(this.ftrTemplateContent) ? 0 : this.ftrTemplateContent.offsetHeight) +
-                    (util_1.isNullOrUndefined(this.headerContent) ? 0 : this.headerContent.offsetHeight));
-            this.contentEle.style.height = this.contentHeight + 'px';
-        };
         Dialog.prototype.setEnableRTL = function () {
@@ -310,12 +359,9 @@ this.enableRtl ? dom_1.addClass([this.element], RTL) : dom_1.removeClass([this.element], RTL);
         Dialog.prototype.setIsModal = function () {
+            this.dlgContainer = dom_1.createElement('div', { className: DLG_CONTAINER });
+            this.element.parentNode.insertBefore(this.dlgContainer, this.element);
+            this.dlgContainer.appendChild(this.element);
             dom_1.addClass([this.element], MODAL_DLG);
             this.dlgOverlay = dom_1.createElement('div', { className: DLG_OVERLAY });
             this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
-            if (!util_1.isNullOrUndefined(this.targetEle)) {
-                this.targetEle.appendChild(this.dlgOverlay);
-                this.dlgOverlay.style.position = 'relative';
-            }
-            else {
-                this.element.parentNode.appendChild(this.dlgOverlay);
-            }
+            this.dlgContainer.appendChild(this.dlgOverlay);
         };
@@ -351,3 +397,3 @@ Dialog.prototype.focusContentEle = function (container) {
                     var contentEle = !util_1.isNullOrUndefined(this.contentEle) &&
-                        this.contentEle.querySelector(this.focusElements[index].nodeName);
+                        this.focusElements[index];
                     if (contentEle) {
@@ -425,8 +471,5 @@ this.focusIndex = this.focusElements.indexOf(contentEle);
                                     (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';
-                                this.contentEle.style.height = 'auto';
-                                this.setContentHeight();
                             }
                             else {
                                 this.setContent();
-                                this.setContentHeight();
                             }
@@ -480,2 +523,5 @@ }
                             this.wireEvents();
+                            if (!util_1.isNullOrUndefined(this.targetEle)) {
+                                this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);
+                            }
                         }
@@ -486,2 +532,6 @@ else {
                             dom_1.detach(this.dlgOverlay);
+                            while (this.dlgContainer.firstChild) {
+                                this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);
+                            }
+                            this.dlgContainer.parentElement.removeChild(this.dlgContainer);
                         }
@@ -491,3 +541,2 @@ break;
                         dom_1.setStyleAttribute(this.element, { 'height': util_1.formatUnit(newProp.height) });
-                        this.setContentHeight();
                         break;
@@ -523,3 +572,10 @@ case 'width':
                     case 'position':
-                        this.popupObj.position = this.position;
+                        if (this.isModal) {
+                            this.dlgContainer.classList.remove('e-dlg-' + oldProp.position.X + '-' + oldProp.position.Y);
+                            this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);
+                        }
+                        else {
+                            this.popupObj.position = this.position;
+                            break;
+                        }
                         break;
@@ -587,6 +643,9 @@ case 'enableRtl':
                 this.dlgOverlay.style.display = 'block';
+                this.dlgContainer.style.display = 'flex';
                 if (!util_1.isNullOrUndefined(this.targetEle)) {
+                    if (this.targetEle === document.body) {
+                        this.dlgContainer.style.position = 'fixed';
+                    }
                     this.dlgOverlay.style.position = 'absolute';
-                    this.dlgOverlay.style.height = this.targetEle.scrollHeight + 'px';
-                    this.element.style.position = 'absolute';
+                    this.element.style.position = 'relative';
                     dom_1.addClass([this.targetEle], SCROLL_DISABLED);
@@ -628,5 +687,2 @@ }
                     (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';
-                this.element.style.display = 'block';
-                this.setContentHeight();
-                this.element.style.display = 'none';
                 dom_1.addClass([document.body], SCROLL_DISABLED);
@@ -639,3 +695,2 @@ if (this.allowDragging && !util_1.isNullOrUndefined(this.dragObj)) {
                 dom_1.removeClass([this.element], FULLSCREEN);
-                this.contentEle.style.height = this.contentHeight + 'px';
                 dom_1.removeClass([document.body], SCROLL_DISABLED);
@@ -675,3 +730,3 @@ if (this.allowDragging && (!this.isModal) && (!util_1.isNullOrUndefined(this.headerContent))) {
     __decorate([
-        ej2_base_1.Property(1000)
+        ej2_base_1.Property()
     ], Dialog.prototype, "zIndex", void 0);
@@ -678,0 +733,0 @@ __decorate([

src/index.d.ts

@@ -7,1 +7,2 @@ /**
 export * from './dialog';
+export * from './tooltip';

src/index.js

@@ -1,2 +0,2 @@
-define(["require", "exports", "./popup", "./common", "./dialog"], function (require, exports, popup_1, common_1, dialog_1) {
+define(["require", "exports", "./popup", "./common", "./dialog", "./tooltip"], function (require, exports, popup_1, common_1, dialog_1, tooltip_1) {
     "use strict";
@@ -10,2 +10,3 @@ function __export(m) {
     __export(dialog_1);
+    __export(tooltip_1);
 });

src/popup/popup-model.d.ts

@@ -1,3 +0,3 @@
-import { setStyleAttribute } from '@syncfusion/ej2-base/dom';
import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base/util';
import { Browser } from '@syncfusion/ej2-base/browser';
import { calculatePosition, OffsetPosition } from '../common/position';
import { Animation, AnimationModel, Property, Event, EmitType, Component } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, INotifyPropertyChanged } from '@syncfusion/ej2-base/notify-property-change';
import { EventHandler } from '@syncfusion/ej2-base/event-handler';
-import {PositionData} from "./popup";
+import { setStyleAttribute, addClass, removeClass } from '@syncfusion/ej2-base/dom';import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base/util';import { Browser } from '@syncfusion/ej2-base/browser';import { calculatePosition, OffsetPosition, calculateRelativeBasedPosition } from '../common/position';import { Animation, AnimationModel, Property, Event, EmitType, Component } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged } from '@syncfusion/ej2-base/notify-property-change';import { EventHandler } from '@syncfusion/ej2-base/event-handler';import { flip, fit, isCollide , CollisionCoordinates } from '../common/collision';
+import {TargetType,CollisionAxis,PositionData} from "./popup";
 import {ComponentModel} from '@syncfusion/ej2-base';
@@ -11,37 +11,43 @@
     /**
-     * Specifies the height of the popup element. 
     * @default 'auto'
     */
    height?: string|number;
+     * Specifies the height of the popup element.      * @default 'auto'     */    height?: string | number;
 
     /**
-     * Specifies the height of the popup element.
     * @default 'auto'
     */
    width?: string|number;
+     * Specifies the height of the popup element.     * @default 'auto'     */    width?: string | number;
 
     /**
-     * Specifies the content of the popup element, it can be string or HTMLElement.
     * @default null
     */
    content?: string|HTMLElement;
+     * Specifies the content of the popup element, it can be string or HTMLElement.     * @default null     */    content?: string | HTMLElement;
 
     /**
-     * Specifies the relative container element of the popup element.Based on the relative element, popup element will be positioned.
     * 
     * @default 'body'
     */
    relateTo?: HTMLElement|string;
+     * Specifies the relative element type of the component.     * @default 'container'     */    targetType?: TargetType;
 
     /**
-     * Specifies the popup element position, respective to the relative element.
     * @default {X:"left", Y:"top"}
     */
    position?: PositionData;
+     * Specifies the collision detectable container element of the component.     * @default null     */    viewPortElement?: HTMLElement;
 
     /**
-     * specifies the popup element offset-x value, respective to the relative element.
     * @default 0
     */
    offsetX?: number;
+     * Specifies the collision handler settings of the component.     * @default { X: 'none',Y: 'none' }      */    collision?: CollisionAxis;
 
     /**
-     * specifies the popup element offset-y value, respective to the relative element.
     * @default 0
     */
    offsetY?: number;
+     * Specifies the relative container element of the popup element.Based on the relative element, popup element will be positioned.     *      * @default 'body'     */    relateTo?: HTMLElement | string;
 
     /**
-     * specifies the z-index value of the popup element.
     * @default 1000
     */
    zIndex?: number;
+     * Specifies the popup element position, respective to the relative element.     * @default {X:"left", Y:"top"}     */    position?: PositionData;
 
     /**
-     * specifies the rtl direction state of the popup element.
     * @default false
     */
    enableRtl?: boolean;
+     * specifies the popup element offset-x value, respective to the relative element.     * @default 0     */    offsetX?: number;
 
     /**
-     * Triggers the event once opened the popup.
     * @event
     */
    open?: EmitType<Object>;
+     * specifies the popup element offset-y value, respective to the relative element.     * @default 0     */    offsetY?: number;
 
     /**
-     * Trigger the event once closed the popup.
     * @event
     */
    close?: EmitType<Object>;
+     * specifies the z-index value of the popup element.     * @default 1000     */    zIndex?: number;
 
     /**
-     * Trigger the event once device orientation changes detected.
     * @event
     */
    orientationChange?: EmitType<Object>;
+     * specifies the rtl direction state of the popup element.     * @default false     */    enableRtl?: boolean;
 
+    /**
+     * Triggers the event once opened the popup.     * @event     */    open?: EmitType<Object>;
+
+    /**
+     * Trigger the event once closed the popup.     * @event     */    close?: EmitType<Object>;
+
 }

src/popup/popup.d.ts

@@ -19,5 +19,35 @@ import { AnimationModel, EmitType, Component } from '@syncfusion/ej2-base';
 }
+export interface CollisionAxis {
+    /**
+     * specify the collision handler for a X-Axis.
+     * @default : "none"
+     */
+    X?: CollisionType;
+    /**
+     * specify the collision handler for a Y-Axis.
+     * @default : "none"
+     */
+    Y?: CollisionType;
+}
 /**
- * Popup is a base Component for all the popup related Components.
+ * Collision type.
  */
+export declare type CollisionType = 'none' | 'flip' | 'fit';
+/**
+ * Target element type.
+ */
+export declare type TargetType = 'relative' | 'container';
+/**
+ * Represents the Popup Component
+ * ```html
+ * <div id="popup" style="position:absolute;height:100px;width:100px;">
+ * <div style="margin:35px 25px;">Popup Content</div></div>
+ * ```
+ * ```typescript
+ * <script>
+ *   var popupObj = new Popup();
+ *   popupObj.appendTo("#popup");
+ * </script>
+ * ```
+ */
 export declare class Popup extends Component<HTMLElement> implements INotifyPropertyChanged {
@@ -40,2 +70,17 @@ /**
     /**
+     * Specifies the relative element type of the component.
+     * @default 'container'
+     */
+    targetType: TargetType;
+    /**
+     * Specifies the collision detectable container element of the component.
+     * @default null
+     */
+    viewPortElement: HTMLElement;
+    /**
+     * Specifies the collision handler settings of the component.
+     * @default { X: 'none',Y: 'none' }
+     */
+    collision: CollisionAxis;
+    /**
      * Specifies the relative container element of the popup element.Based on the relative element, popup element will be positioned.
@@ -82,7 +127,2 @@ *
     /**
-     * Trigger the event once device orientation changes detected.
-     * @event
-     */
-    orientationChange: EmitType<Object>;
-    /**
      * * Constructor for creating the widget
@@ -124,3 +164,5 @@ */
     private getAnchorPosition(anchorEle, ele, position, offsetX, offsetY);
-    private checkCollision(flip?);
+    private callFlip(param);
+    private callFit(param);
+    private checkCollision();
     /**
@@ -131,3 +173,3 @@ * Shows the popup element from screen.
      */
-    show(collisionOrAnimationOptions?: AnimationModel | Function, collision?: Function): void;
+    show(animationOptions?: AnimationModel): void;
     /**
@@ -134,0 +176,0 @@ * Hides the popup element from screen.

src/popup/popup.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/browser", "../common/position", "@syncfusion/ej2-base", "@syncfusion/ej2-base/notify-property-change", "@syncfusion/ej2-base/event-handler"], function (require, exports, dom_1, util_1, browser_1, position_1, ej2_base_1, notify_property_change_1, event_handler_1) {
+define(["require", "exports", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/browser", "../common/position", "@syncfusion/ej2-base", "@syncfusion/ej2-base/notify-property-change", "@syncfusion/ej2-base/event-handler", "../common/collision"], function (require, exports, dom_1, util_1, browser_1, position_1, ej2_base_1, notify_property_change_1, event_handler_1, collision_1) {
     "use strict";
@@ -23,3 +23,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
         ROOT: 'e-popup',
-        RTL: 'e-rtl'
+        RTL: 'e-rtl',
+        OPEN: 'e-popup-open',
+        CLOSE: 'e-popup-close'
     };
@@ -116,4 +118,7 @@ var Popup = (function (_super) {
         Popup.prototype.orientationOnChange = function () {
-            this.setPosition();
-            this.trigger('orientationChange');
+            var _this = this;
+            setTimeout(function () {
+                _this.setPosition();
+                _this.checkCollision();
+            }, 200);
         };
@@ -148,7 +153,3 @@ Popup.prototype.setPosition = function () {
             else {
-                while (ele.offsetParent && anchor && ele.offsetParent !== anchor) {
-                    anchorPos.left += anchor.offsetLeft;
-                    anchorPos.top += anchor.offsetTop;
-                    anchor = anchor.offsetParent;
-                }
+                anchorPos = position_1.calculateRelativeBasedPosition(anchor, ele);
             }
@@ -160,6 +161,16 @@ switch (position.X) {
                 case 'center':
-                    anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);
+                    if (this.targetType === 'container') {
+                        anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);
+                    }
+                    else {
+                        anchorPos.left += (anchorRect.width / 2);
+                    }
                     break;
                 case 'right':
-                    anchorPos.left += (anchorRect.width - eleRect.width);
+                    if (this.targetType === 'container') {
+                        anchorPos.left += (anchorRect.width - eleRect.width);
+                    }
+                    else {
+                        anchorPos.left += (anchorRect.width);
+                    }
                     break;
@@ -172,6 +183,16 @@ }
                 case 'center':
-                    anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);
+                    if (this.targetType === 'container') {
+                        anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);
+                    }
+                    else {
+                        anchorPos.top += (anchorRect.height / 2);
+                    }
                     break;
                 case 'bottom':
-                    anchorPos.top += (anchorRect.height - eleRect.height);
+                    if (this.targetType === 'container') {
+                        anchorPos.top += (anchorRect.height - eleRect.height);
+                    }
+                    else {
+                        anchorPos.top += (anchorRect.height);
+                    }
                     break;
@@ -183,20 +204,58 @@ }
         };
-        Popup.prototype.checkCollision = function (flip) {
-            if (this.relateTo && typeof flip === 'function') {
-                flip(this.element, this.relateTo, this.offsetX, this.offsetY, this.position.X, this.position.Y);
+        Popup.prototype.callFlip = function (param) {
+            var relateToElement = ((typeof this.relateTo) === 'string') ?
+                document.querySelector(this.relateTo) : this.relateTo;
+            collision_1.flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param);
+        };
+        Popup.prototype.callFit = function (param) {
+            if (collision_1.isCollide(this.element, this.viewPortElement).length !== 0) {
+                var data = collision_1.fit(this.element, this.viewPortElement, param);
+                this.element.style.left = data.left + 'px';
+                this.element.style.top = data.top + 'px';
             }
         };
-        Popup.prototype.show = function (collisionOrAnimationOptions, collision) {
+        Popup.prototype.checkCollision = function () {
+            var horz = this.collision.X;
+            var vert = this.collision.Y;
+            if (horz === 'none' && vert === 'none') {
+                return;
+            }
+            if (horz === 'flip' && vert === 'flip') {
+                this.callFlip({ X: true, Y: true });
+            }
+            else if (horz === 'fit' && vert === 'fit') {
+                this.callFit({ X: true, Y: true });
+            }
+            else {
+                if (horz === 'fit') {
+                    this.callFit({ X: true, Y: false });
+                }
+                else if (vert === 'fit') {
+                    this.callFit({ X: false, Y: true });
+                }
+                if (horz === 'flip') {
+                    this.callFlip({ X: true, Y: false });
+                }
+                else if (vert === 'flip') {
+                    this.callFlip({ Y: true, X: false });
+                }
+            }
+        };
+        Popup.prototype.show = function (animationOptions) {
             var _this = this;
-            if ((typeof collisionOrAnimationOptions === 'function' && !collision) || typeof collision === 'function') {
-                var options = typeof collision === 'function' ? collision : collisionOrAnimationOptions;
-                this.checkCollision(options);
+            if (this.collision.X !== 'none' || this.collision.Y !== 'none') {
+                dom_1.removeClass([this.element], CLASSNAMES.CLOSE);
+                dom_1.addClass([this.element], CLASSNAMES.OPEN);
+                this.checkCollision();
+                dom_1.removeClass([this.element], CLASSNAMES.OPEN);
+                dom_1.addClass([this.element], CLASSNAMES.CLOSE);
             }
-            if (!util_1.isNullOrUndefined(collisionOrAnimationOptions) && typeof collisionOrAnimationOptions === 'object') {
-                collisionOrAnimationOptions.begin = function () {
+            if (!util_1.isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') {
+                animationOptions.begin = function () {
                     if (!_this.isDestroyed) {
-                        _this.element.style.display = 'block';
+                        dom_1.removeClass([_this.element], CLASSNAMES.CLOSE);
+                        dom_1.addClass([_this.element], CLASSNAMES.OPEN);
                     }
                 };
-                collisionOrAnimationOptions.end = function () {
+                animationOptions.end = function () {
                     if (!_this.isDestroyed) {
@@ -206,6 +265,7 @@ _this.trigger('open');
                 };
-                new ej2_base_1.Animation(collisionOrAnimationOptions).animate(this.element);
+                new ej2_base_1.Animation(animationOptions).animate(this.element);
             }
             else {
-                this.element.style.display = 'block';
+                dom_1.removeClass([this.element], CLASSNAMES.CLOSE);
+                dom_1.addClass([this.element], CLASSNAMES.OPEN);
                 this.trigger('open');
@@ -219,3 +279,4 @@ }
                     if (!_this.isDestroyed) {
-                        _this.element.style.display = 'none';
+                        dom_1.removeClass([_this.element], CLASSNAMES.OPEN);
+                        dom_1.addClass([_this.element], CLASSNAMES.CLOSE);
                         _this.trigger('close');
@@ -227,3 +288,4 @@ }
             else {
-                this.element.style.display = 'none';
+                dom_1.removeClass([this.element], CLASSNAMES.OPEN);
+                dom_1.addClass([this.element], CLASSNAMES.CLOSE);
                 this.trigger('close');
@@ -234,3 +296,3 @@ }
             var parentElements = [];
-            while (element.parentElement.tagName !== 'HTML') {
+            while (element.parentElement && element.parentElement.tagName !== 'HTML') {
                 if (element.parentElement.style.overflow !== 'visible') {
@@ -256,2 +318,11 @@ parentElements.push(element.parentElement);
     __decorate([
+        ej2_base_1.Property('container')
+    ], Popup.prototype, "targetType", void 0);
+    __decorate([
+        ej2_base_1.Property(null)
+    ], Popup.prototype, "viewPortElement", void 0);
+    __decorate([
+        ej2_base_1.Property({ X: 'none', Y: 'none' })
+    ], Popup.prototype, "collision", void 0);
+    __decorate([
         ej2_base_1.Property(document.body)
@@ -280,5 +351,2 @@ ], Popup.prototype, "relateTo", void 0);
     ], Popup.prototype, "close", void 0);
-    __decorate([
-        ej2_base_1.Event()
-    ], Popup.prototype, "orientationChange", void 0);
     Popup = __decorate([
@@ -285,0 +353,0 @@ notify_property_change_1.NotifyPropertyChanges

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3754966

increased by122.17%

Dev dependency count

4

decreased by-20%

Number of package files

77

increased by26.23%

Lines of code

29817

increased by73.15%

Number of lines in readme file

26

increased by271.43%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@syncfusion/ej2-base@^1.0.10

• Updated@syncfusion/ej2-buttons@^1.0.10