@syncfusion/ej2-popups - npm Package Compare versions

Comparing version 16.2.45 to 16.2.46

CHANGELOG.md

@@ -5,2 +5,12 @@ # Changelog
 
+### Dialog
+
+#### New Features
+
+- Enabled draggable support for modal dialog also.
+
+#### Bug Fixes
+
+- The z-index calculation issue while rendering the multiple dialogs with same target has been resolved.
+
 ## 16.2.41 (2018-06-25)
@@ -7,0 +17,0 @@

common.js

@@ -1,11 +0,4 @@
-define(["require", "exports", "./src/common/index"], function (require, exports, index_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * common
-     */
-    __export(index_1);
-});
+/**
+ * common
+ */
+export * from './src/common/index';

dialog.js

@@ -1,11 +0,4 @@
-define(["require", "exports", "./src/dialog/index"], function (require, exports, index_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * dialog
-     */
-    __export(index_1);
-});
+/**
+ * dialog
+ */
+export * from './src/dialog/index';

dist/global/index.d.ts

@@ -0,1 +1,10 @@
+/*!
+*  filename: index.d.ts
+*  version : 16.2.46
+*  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
+*  Use of this code is subject to the terms of our license.
+*  A copy of the current license can be obtained at any time by e-mailing
+*  [e-mail]. Any infringement will be prosecuted under
+*  applicable laws. 
+*/
 import * as _popups from '@syncfusion/ej2-popups';
@@ -2,0 +11,0 @@ import * as _base from '@syncfusion/ej2-base';

index.js

@@ -1,11 +0,4 @@
-define(["require", "exports", "./src/index"], function (require, exports, index_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * index
-     */
-    __export(index_1);
-});
+/**
+ * index
+ */
+export * from './src/index';

package.json

 {
   "name": "@syncfusion/ej2-popups",
-  "version": "16.2.45",
+  "version": "16.2.46",
   "description": "Essential JS 2 popup Component",
@@ -8,7 +8,7 @@ "author": "Syncfusion Inc.",
   "main": "./dist/ej2-popups.umd.min.js",
-  "module": "./dist/es6/ej2-popups.es5.js",
+  "module": "./index.js",
   "es2015": "./dist/es6/ej2-popups.es2015.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.2.45",
-    "@syncfusion/ej2-buttons": "~16.2.45"
+    "@syncfusion/ej2-base": "~16.2.46",
+    "@syncfusion/ej2-buttons": "~16.2.46"
   },
@@ -24,16 +24,17 @@ "devDependencies": {
     "syncfusion",
-    "ej2-dialog",
-    "ej2-popups",
+    "web-components",
+    "javascript",
+    "typescript",
     "dialog",
-    "window",
     "modal",
     "popup",
     "alert",
-    "prompt",
-    "modeless",
-    "dialog box",
-    "confirm box",
-    "confirmation dialog",
-    "message box",
-    "custom dialog"
+    "tooltip",
+    "hint",
+    "spinner",
+    "waiting-popup",
+    "loading-indicator",
+    "loader",
+    "busy-indicator",
+    "waitingfor-loader"
   ],
@@ -40,0 +41,0 @@ "repository": {

popup.js

@@ -1,11 +0,4 @@
-define(["require", "exports", "./src/popup/index"], function (require, exports, index_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * popup
-     */
-    __export(index_1);
-});
+/**
+ * popup
+ */
+export * from './src/popup/index';

ReadMe.md

@@ -1,8 +0,91 @@
-# Overview
+# ej2-popups
 
-Easily 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.
+The popup components such as dialog and tooltip are used to display information in a popup to users. The dialog component provides modal/non-modal (modeless), built-in buttons, positioning, animation, draggable, and template features and helps to create alert, prompt, and confirmation dialogs easily. The tooltip component is used to display a popup that contains some information or message when you hover, click, focus, or touch an element. The information displayed in the tooltip can include simple text, images, hyperlinks, or custom templates.
 
-## Resources
+![Popup](https://ej2.syncfusion.com/products/images/popup/readme.png)
 
-* [Dialog Demos](http://ej2.syncfusion.com/demos/#/dialog/basic.html)
-* [Tooltip Demos](http://ej2.syncfusion.com/demos/#/tooltip/default.html)
+> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+## Setup
+
+To install popup components and its dependent packages, use the following command
+
+```sh
+npm install @syncfusion/ej2-popups
+```
+
+## Components Included
+
+Following list of components are available in the package
+
+## Dialog
+
+*   [Getting Started](https://ej2.syncfusion.com/documentation/dialog/getting-started.html?lang=typescript&utm_source=npm&utm_campaign=dialog)
+*   [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dialog#/material/dialog/default.html)
+*   [Product Page](https://www.syncfusion.com/products/javascript/dialog/?utm_source=npm&utm_campaign=dialog)
+
+## Tooltip
+
+*   [Getting Started](https://ej2.syncfusion.com/documentation/tooltip/getting-started.html?lang=typescript?utm_source=npm&utm_campaign=tooltip)
+*   [View Online Demos](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=tooltip#/material/tooltip/default.html)
+*   [Product Page](https://www.syncfusion.com/products/javascript/tooltip/?utm_source=npm&utm_campaign=tooltip)
+
+## Supported Frameworks
+
+These components are available in following list of:
+
+1.	[Angular](https://github.com/syncfusion/ej2-ng-popups?utm_source=npm&utm_campaign=popup)
+2.	[React](https://github.com/syncfusion/ej2-react-popups?utm_source=npm&utm_campaign=popup)
+3.	[Vue](https://github.com/syncfusion/ej2-vue-popups?utm_source=npm&utm_campaign=popup)
+4.	[ASP.NET Core](https://www.syncfusion.com/products/aspnetcore/)
+5.	[ASP.NET MVC](https://www.syncfusion.com/products/aspnetmvc/)
+6.	[JavaScript (ES5)](https://www.syncfusion.com/products/javascript/)
+
+## Use-case samples / Showcase samples
+
+*	Expanse Tracker ([Source](https://github.com/syncfusion/ej2-showcase-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/#/dashboard))
+*	Story Estimator ([Source](https://github.com/syncfusion/ej2-showcase-aspnetcore-story-estimator), [Live Demo](https://aspdotnetcore.syncfusion.com/showcase/aspnetcore/story-estimator/#/dashboard))
+*	Diagram Builder ([Source](https://github.com/syncfusion/ej2-showcase-ng-diagrambuilder), [Live Demo](https://ej2.syncfusion.com/showcase/angular/diagrambuilder/))
+*	IT Asset Management ([Live Demo](https://ej2.syncfusion.com/showcase/vue/assetmanagement/#/))
+*	Webmail ([Source](https://github.com/syncfusion/ej2-showcase-ts-webmail), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/webmail/#/home))
+*	Loan Calculator ([Source](https://github.com/syncfusion/ej2-showcase-ts-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/loancalculator/#/default))
+
+## Key Features
+
+## Dialog
+*	[Modal](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dialog#/material/dialog/modal.html) - Displays the important information to users.
+*	[Positioning](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dialog#/material/dialog/position.html) - Supports to customize its display position.
+*	[Animation](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dialog#/material/dialog/animation.html) - Offers to set animation effects on open and close the dialog.
+*	[Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dialog#/material/dialog/template.html) - Provides an option to customize its header and footer.
+*	[Built-in buttons](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=dialog#/material/dialog/basic.html) - Provides a built-in support to add buttons to its properties.
+
+## Tooltip
+
+*	[Positions](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=tooltip#/material/tooltip/default.html) - Allows you to display the tooltip in 12 different positions.
+*	[Animation](https://ej2.syncfusion.com/products/typescript/tooltip/animation/?utm_source=npm&utm_campaign=tooltip) - Supports animation effects while showing/hiding the tooltip.
+*	[Content](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=tooltip#/material/tooltip/ajaxcontent.html) - Assigns with static text, template, or loaded dynamically via AJAX.
+*	[Opening modes](https://ej2.syncfusion.com/products/typescript/tooltip/show-hide/?utm_source=npm&utm_campaign=tooltip) - Supports four opening modes such as hover, click, focus, and custom.
+*	[Smart positioning](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_campaign=tooltip#/material/tooltip/smartposition.html) - Supports auto tip positioning.
+*	[Mouse trail](https://ej2.syncfusion.com/products/typescript/tooltip/customization/?utm_source=npm&utm_campaign=tooltip) - Moves along with mouse pointer using the mouse trailing option.
+*	[Sticky mode](https://ej2.syncfusion.com/products/typescript/tooltip/show-hide/?utm_source=npm&utm_campaign=tooltip) - Opens in sticky mode, and allows you to close/hide the Tooltip manually.
+
+## Support
+
+Product support is available for through following mediums:
+
+*	Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=popup) support system or [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=popup).
+*	New [GitHub issue](https://github.com/syncfusion/ej2-popups/issues/new).
+*	Ask your query in Stack Overflow with tag `syncfusion` and `ej2`.
+
+## License
+
+Check the license detail [here](https://github.com/syncfusion/ej2-popups/blob/master/license?utm_source=npm&utm_campaign=popup).
+
+## Changelog
+
+Check the changelog [here](https://github.com/syncfusion/ej2-popups/blob/master/CHANGELOG.md?utm_source=npm&utm_campaign=dialog).
+
+
+© Copyright 2018 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

spinner.js

@@ -1,11 +0,4 @@
-define(["require", "exports", "./src/spinner/index"], function (require, exports, index_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * spinner
-     */
-    __export(index_1);
-});
+/**
+ * spinner
+ */
+export * from './src/spinner/index';

src/common/collision.js

@@ -1,288 +0,285 @@
-define(["require", "exports", "./position"], function (require, exports, position_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var parentDocument;
-    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;
-                }
+/**
+ * Collision module.
+ */
+import { calculatePosition } from './position';
+var parentDocument;
+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 (overLeft > 0) {
-                position.left += overLeft;
+            else if (overRight > 0 && overLeft <= 0) {
+                position.left = containerLeft;
             }
-            else if (overRight > 0) {
-                position.left -= overRight;
+            else {
+                position.left = overLeft > overRight ? (containerRight - elemData.width) : containerLeft;
             }
         }
-        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 (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 (overTop > 0) {
-                position.top += overTop;
+            else if (overBottom > 0 && overTop <= 0) {
+                position.top = containerTop;
             }
-            else if (overBottom > 0) {
-                position.top -= overBottom;
+            else {
+                position.top = overTop > overBottom ? (containerBottom - elemData.height) : containerTop;
             }
         }
-        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;
+        else if (overTop > 0) {
+            position.top += overTop;
         }
-        if (y) {
-            elemOffset.top = y;
+        else if (overBottom > 0) {
+            position.top -= overBottom;
         }
-        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, fixedParent) {
-        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 tEdge = { TL: null,
-            TR: null,
-            BL: null,
-            BR: null };
-        var eEdge = {
-            TL: null,
-            TR: null,
-            BL: null,
-            BR: null
-        };
-        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(target, tEdge, pos, fixedParent, elementRect);
-        setPosition(eEdge, pos, elementRect);
-        if (axis.X) {
-            leftFlip(target, eEdge, tEdge, pos, elementRect, true);
-        }
-        if (axis.Y && tEdge.TL.top > -1) {
-            topFlip(target, eEdge, tEdge, pos, elementRect, true);
-        }
-        setPopup(element, pos, elementRect);
+    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;
     }
-    exports.flip = flip;
-    function setPopup(element, pos, elementRect) {
-        var left = 0;
-        var top = 0;
-        if (element.offsetParent != null
-            && (getComputedStyle(element.offsetParent).position === 'absolute' ||
-                getComputedStyle(element.offsetParent).position === 'relative')) {
-            var data = position_1.calculatePosition(element.offsetParent, 'left', 'top', false, elementRect);
-            left = data.left;
-            top = data.top;
-        }
-        element.style.top = (pos.position.top + pos.offsetY - (top)) + 'px';
-        element.style.left = (pos.position.left + pos.offsetX - (left)) + 'px';
+    if (y) {
+        elemOffset.top = y;
     }
-    function updateElementData(target, edge, pos, fixedParent, elementRect) {
-        pos.position = position_1.calculatePosition(target, pos.posX, pos.posY, fixedParent, elementRect);
-        edge.TL = position_1.calculatePosition(target, 'left', 'top', fixedParent, elementRect);
-        edge.TR = position_1.calculatePosition(target, 'right', 'top', fixedParent, elementRect);
-        edge.BR = position_1.calculatePosition(target, 'left', 'bottom', fixedParent, elementRect);
-        edge.BL = position_1.calculatePosition(target, 'right', 'bottom', fixedParent, elementRect);
+    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');
     }
-    function setPosition(eStatus, pos, elementRect) {
-        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 };
+    if (xAxis.rightSide) {
+        data.push('right');
     }
-    function leftCollideCheck(left, right) {
-        var leftSide = false;
-        var rightSide = false;
-        if (((left - getBodyScrollLeft()) < ContainerLeft())) {
-            leftSide = true;
-        }
-        if (right > ContainerRight()) {
-            rightSide = true;
-        }
-        return { leftSide: leftSide, rightSide: rightSide };
+    if (xAxis.leftSide) {
+        data.push('left');
     }
-    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;
-        }
-        if (tEdge.TR.left >= ContainerRight()) {
-            collideSide.rightSide = false;
-        }
-        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, false);
-            setPosition(edge, pos, elementRect);
-            if (deepCheck) {
-                leftFlip(target, edge, tEdge, pos, elementRect, false);
-            }
-        }
+    if (yAxis.bottomSide) {
+        data.push('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;
-        }
-        if (tEdge.BL.top >= ContainerBottom()) {
-            collideSide.bottomSide = false;
-        }
-        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, false, elementRect);
-            setPosition(edge, pos, elementRect);
-            if (deepCheck) {
-                topFlip(target, edge, tEdge, pos, elementRect, false);
-            }
-        }
+    return data;
+}
+export function flip(element, target, offsetX, offsetY, positionX, positionY, viewPortElement, axis, fixedParent) {
+    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;
     }
-    function topCollideCheck(top, bottom) {
-        var topSide = false;
-        var bottomSide = false;
-        if ((top - getBodyScrollTop()) < ContainerTop()) {
-            topSide = true;
-        }
-        if (bottom > ContainerBottom()) {
-            bottomSide = true;
-        }
-        return { topSide: topSide, bottomSide: bottomSide };
+    var tEdge = { TL: null,
+        TR: null,
+        BL: null,
+        BR: null };
+    var eEdge = {
+        TL: null,
+        TR: null,
+        BL: null,
+        BR: null
+    };
+    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(target, tEdge, pos, fixedParent, elementRect);
+    setPosition(eEdge, pos, elementRect);
+    if (axis.X) {
+        leftFlip(target, eEdge, tEdge, pos, elementRect, true);
     }
-    function getTargetContainerWidth() {
-        return targetContainer.getBoundingClientRect().width;
+    if (axis.Y && tEdge.TL.top > -1) {
+        topFlip(target, eEdge, tEdge, pos, elementRect, true);
     }
-    function getTargetContainerHeight() {
-        return targetContainer.getBoundingClientRect().height;
+    setPopup(element, pos, elementRect);
+}
+function setPopup(element, pos, elementRect) {
+    var left = 0;
+    var top = 0;
+    if (element.offsetParent != null
+        && (getComputedStyle(element.offsetParent).position === 'absolute' ||
+            getComputedStyle(element.offsetParent).position === 'relative')) {
+        var data = calculatePosition(element.offsetParent, 'left', 'top', false, elementRect);
+        left = data.left;
+        top = data.top;
     }
-    function getTargetContainerLeft() {
-        return targetContainer.getBoundingClientRect().left;
+    element.style.top = (pos.position.top + pos.offsetY - (top)) + 'px';
+    element.style.left = (pos.position.left + pos.offsetX - (left)) + 'px';
+}
+function updateElementData(target, edge, pos, fixedParent, elementRect) {
+    pos.position = calculatePosition(target, pos.posX, pos.posY, fixedParent, elementRect);
+    edge.TL = calculatePosition(target, 'left', 'top', fixedParent, elementRect);
+    edge.TR = calculatePosition(target, 'right', 'top', fixedParent, elementRect);
+    edge.BR = calculatePosition(target, 'left', 'bottom', fixedParent, elementRect);
+    edge.BL = calculatePosition(target, 'right', 'bottom', fixedParent, elementRect);
+}
+function setPosition(eStatus, pos, elementRect) {
+    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 leftCollideCheck(left, right) {
+    var leftSide = false;
+    var rightSide = false;
+    if (((left - getBodyScrollLeft()) < ContainerLeft())) {
+        leftSide = true;
     }
-    function getTargetContainerTop() {
-        return targetContainer.getBoundingClientRect().top;
+    if (right > ContainerRight()) {
+        rightSide = true;
     }
-    function ContainerTop() {
-        if (targetContainer) {
-            return getTargetContainerTop();
-        }
-        return 0;
+    return { leftSide: leftSide, rightSide: rightSide };
+}
+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;
     }
-    function ContainerLeft() {
-        if (targetContainer) {
-            return getTargetContainerLeft();
-        }
-        return 0;
+    if (tEdge.TR.left >= ContainerRight()) {
+        collideSide.rightSide = false;
     }
-    function ContainerRight() {
-        if (targetContainer) {
-            return (getBodyScrollLeft() + getTargetContainerLeft() + getTargetContainerWidth());
+    if ((collideSide.leftSide && !collideSide.rightSide) || (!collideSide.leftSide && collideSide.rightSide)) {
+        if (pos.posX === 'right') {
+            pos.posX = 'left';
         }
-        return (getBodyScrollLeft() + getViewPortWidth());
+        else {
+            pos.posX = 'right';
+        }
+        pos.offsetX = pos.offsetX + elementRect.width;
+        pos.offsetX = -1 * pos.offsetX;
+        pos.position = calculatePosition(target, pos.posX, pos.posY, false);
+        setPosition(edge, pos, elementRect);
+        if (deepCheck) {
+            leftFlip(target, edge, tEdge, pos, elementRect, false);
+        }
     }
-    function ContainerBottom() {
-        if (targetContainer) {
-            return (getBodyScrollTop() + getTargetContainerTop() + getTargetContainerHeight());
+}
+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;
+    }
+    if (tEdge.BL.top >= ContainerBottom()) {
+        collideSide.bottomSide = false;
+    }
+    if ((collideSide.topSide && !collideSide.bottomSide) || (!collideSide.topSide && collideSide.bottomSide)) {
+        if (pos.posY === 'top') {
+            pos.posY = 'bottom';
         }
-        return (getBodyScrollTop() + getViewPortHeight());
+        else {
+            pos.posY = 'top';
+        }
+        pos.offsetY = pos.offsetY + elementRect.height;
+        pos.offsetY = -1 * pos.offsetY;
+        pos.position = calculatePosition(target, pos.posX, pos.posY, false, elementRect);
+        setPosition(edge, pos, elementRect);
+        if (deepCheck) {
+            topFlip(target, edge, tEdge, pos, elementRect, false);
+        }
     }
-    function getBodyScrollTop() {
-        // if(targetContainer)
-        //     return targetContainer.scrollTop;
-        return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;
+}
+function topCollideCheck(top, bottom) {
+    var topSide = false;
+    var bottomSide = false;
+    if ((top - getBodyScrollTop()) < ContainerTop()) {
+        topSide = true;
     }
-    function getBodyScrollLeft() {
-        // if(targetContainer)
-        //     return targetContainer.scrollLeft;
-        return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;
+    if (bottom > ContainerBottom()) {
+        bottomSide = true;
     }
-    function getViewPortHeight() {
-        return window.innerHeight;
+    return { topSide: topSide, bottomSide: bottomSide };
+}
+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();
     }
-    function getViewPortWidth() {
-        return window.innerWidth;
+    return 0;
+}
+function ContainerLeft() {
+    if (targetContainer) {
+        return getTargetContainerLeft();
     }
-});
+    return 0;
+}
+function ContainerRight() {
+    if (targetContainer) {
+        return (getBodyScrollLeft() + getTargetContainerLeft() + getTargetContainerWidth());
+    }
+    return (getBodyScrollLeft() + getViewPortWidth());
+}
+function ContainerBottom() {
+    if (targetContainer) {
+        return (getBodyScrollTop() + getTargetContainerTop() + getTargetContainerHeight());
+    }
+    return (getBodyScrollTop() + getViewPortHeight());
+}
+function getBodyScrollTop() {
+    // if(targetContainer)
+    //     return targetContainer.scrollTop;
+    return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;
+}
+function getBodyScrollLeft() {
+    // if(targetContainer)
+    //     return targetContainer.scrollLeft;
+    return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;
+}
+function getViewPortHeight() {
+    return window.innerHeight;
+}
+function getViewPortWidth() {
+    return window.innerWidth;
+}

src/common/index.js

@@ -1,12 +0,5 @@
-define(["require", "exports", "./position", "./collision"], function (require, exports, position_1, collision_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Popup Components
-     */
-    __export(position_1);
-    __export(collision_1);
-});
+/**
+ * Popup Components
+ */
+export * from './position';
+export * from './collision';

src/common/position.js

@@ -1,124 +0,122 @@
-define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var elementRect;
-    var popupRect;
-    var element;
-    var parentDocument;
-    var fixedParent = false;
-    function calculateRelativeBasedPosition(anchor, element) {
-        var fixedElement = false;
-        var anchorPos = { left: 0, top: 0 };
-        var tempAnchor = anchor;
-        if (!anchor || !element) {
-            return anchorPos;
-        }
-        if (ej2_base_1.isNullOrUndefined(element.offsetParent) && element.style.position === 'fixed') {
-            fixedElement = true;
-        }
-        while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {
-            anchorPos.left += anchor.offsetLeft;
-            anchorPos.top += anchor.offsetTop;
-            anchor = anchor.offsetParent;
-        }
-        anchor = tempAnchor;
-        while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {
-            anchorPos.left -= anchor.scrollLeft;
-            anchorPos.top -= anchor.scrollTop;
-            anchor = anchor.parentElement;
-        }
+/**
+ * Position library
+ */
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+var elementRect;
+var popupRect;
+var element;
+var parentDocument;
+var fixedParent = false;
+export function calculateRelativeBasedPosition(anchor, element) {
+    var fixedElement = false;
+    var anchorPos = { left: 0, top: 0 };
+    var tempAnchor = anchor;
+    if (!anchor || !element) {
         return anchorPos;
     }
-    exports.calculateRelativeBasedPosition = calculateRelativeBasedPosition;
-    function calculatePosition(currentElement, positionX, positionY, parentElement, targetValues) {
-        popupRect = targetValues;
-        fixedParent = parentElement ? true : false;
-        if (!currentElement) {
-            return { left: 0, top: 0 };
-        }
-        if (!positionX) {
-            positionX = 'left';
-        }
-        if (!positionY) {
-            positionY = 'top';
-        }
-        parentDocument = currentElement.ownerDocument;
-        element = currentElement;
-        var pos = { left: 0, top: 0 };
-        return updatePosition(positionX.toLowerCase(), positionY.toLowerCase(), pos);
+    if (isNullOrUndefined(element.offsetParent) && element.style.position === 'fixed') {
+        fixedElement = true;
     }
-    exports.calculatePosition = calculatePosition;
-    function setPosx(value, pos) {
-        pos.left = value;
+    while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {
+        anchorPos.left += anchor.offsetLeft;
+        anchorPos.top += anchor.offsetTop;
+        anchor = anchor.offsetParent;
     }
-    function setPosy(value, pos) {
-        pos.top = value;
+    anchor = tempAnchor;
+    while ((element.offsetParent || fixedElement) && anchor && element.offsetParent !== anchor) {
+        anchorPos.left -= anchor.scrollLeft;
+        anchorPos.top -= anchor.scrollTop;
+        anchor = anchor.parentElement;
     }
-    function updatePosition(posX, posY, pos) {
-        elementRect = element.getBoundingClientRect();
-        switch (posY + posX) {
-            case 'topcenter':
-                setPosx(getElementHCenter(), pos);
-                setPosy(getElementTop(), pos);
-                break;
-            case 'topright':
-                setPosx(getElementRight(), pos);
-                setPosy(getElementTop(), pos);
-                break;
-            case 'centercenter':
-                setPosx(getElementHCenter(), pos);
-                setPosy(getElementVCenter(), pos);
-                break;
-            case 'centerright':
-                setPosx(getElementRight(), pos);
-                setPosy(getElementVCenter(), pos);
-                break;
-            case 'centerleft':
-                setPosx(getElementLeft(), pos);
-                setPosy(getElementVCenter(), pos);
-                break;
-            case 'bottomcenter':
-                setPosx(getElementHCenter(), pos);
-                setPosy(getElementBottom(), pos);
-                break;
-            case 'bottomright':
-                setPosx(getElementRight(), pos);
-                setPosy(getElementBottom(), pos);
-                break;
-            case 'bottomleft':
-                setPosx(getElementLeft(), pos);
-                setPosy(getElementBottom(), pos);
-                break;
-            default:
-            case 'topleft':
-                setPosx(getElementLeft(), pos);
-                setPosy(getElementTop(), pos);
-                break;
-        }
-        return pos;
+    return anchorPos;
+}
+export function calculatePosition(currentElement, positionX, positionY, parentElement, targetValues) {
+    popupRect = targetValues;
+    fixedParent = parentElement ? true : false;
+    if (!currentElement) {
+        return { left: 0, top: 0 };
     }
-    function getBodyScrollTop() {
-        return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;
+    if (!positionX) {
+        positionX = 'left';
     }
-    function getBodyScrollLeft() {
-        return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;
+    if (!positionY) {
+        positionY = 'top';
     }
-    function getElementBottom() {
-        return fixedParent ? elementRect.bottom : elementRect.bottom + getBodyScrollTop();
+    parentDocument = currentElement.ownerDocument;
+    element = currentElement;
+    var pos = { left: 0, top: 0 };
+    return updatePosition(positionX.toLowerCase(), positionY.toLowerCase(), pos);
+}
+function setPosx(value, pos) {
+    pos.left = value;
+}
+function setPosy(value, pos) {
+    pos.top = value;
+}
+function updatePosition(posX, posY, pos) {
+    elementRect = element.getBoundingClientRect();
+    switch (posY + posX) {
+        case 'topcenter':
+            setPosx(getElementHCenter(), pos);
+            setPosy(getElementTop(), pos);
+            break;
+        case 'topright':
+            setPosx(getElementRight(), pos);
+            setPosy(getElementTop(), pos);
+            break;
+        case 'centercenter':
+            setPosx(getElementHCenter(), pos);
+            setPosy(getElementVCenter(), pos);
+            break;
+        case 'centerright':
+            setPosx(getElementRight(), pos);
+            setPosy(getElementVCenter(), pos);
+            break;
+        case 'centerleft':
+            setPosx(getElementLeft(), pos);
+            setPosy(getElementVCenter(), pos);
+            break;
+        case 'bottomcenter':
+            setPosx(getElementHCenter(), pos);
+            setPosy(getElementBottom(), pos);
+            break;
+        case 'bottomright':
+            setPosx(getElementRight(), pos);
+            setPosy(getElementBottom(), pos);
+            break;
+        case 'bottomleft':
+            setPosx(getElementLeft(), pos);
+            setPosy(getElementBottom(), pos);
+            break;
+        default:
+        case 'topleft':
+            setPosx(getElementLeft(), pos);
+            setPosy(getElementTop(), pos);
+            break;
     }
-    function getElementVCenter() {
-        return getElementTop() + (elementRect.height / 2);
-    }
-    function getElementTop() {
-        return fixedParent ? elementRect.top : elementRect.top + getBodyScrollTop();
-    }
-    function getElementLeft() {
-        return elementRect.left + getBodyScrollLeft();
-    }
-    function getElementRight() {
-        return elementRect.right + getBodyScrollLeft() - (popupRect ? popupRect.width : 0);
-    }
-    function getElementHCenter() {
-        return getElementLeft() + (elementRect.width / 2);
-    }
-});
+    return pos;
+}
+function getBodyScrollTop() {
+    return parentDocument.documentElement.scrollTop || parentDocument.body.scrollTop;
+}
+function getBodyScrollLeft() {
+    return parentDocument.documentElement.scrollLeft || parentDocument.body.scrollLeft;
+}
+function getElementBottom() {
+    return fixedParent ? elementRect.bottom : elementRect.bottom + getBodyScrollTop();
+}
+function getElementVCenter() {
+    return getElementTop() + (elementRect.height / 2);
+}
+function getElementTop() {
+    return fixedParent ? elementRect.top : elementRect.top + getBodyScrollTop();
+}
+function getElementLeft() {
+    return elementRect.left + getBodyScrollLeft();
+}
+function getElementRight() {
+    return elementRect.right + getBodyScrollLeft() - (popupRect ? popupRect.width : 0);
+}
+function getElementHCenter() {
+    return getElementLeft() + (elementRect.width / 2);
+}

src/dialog/dialog-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, Event, Collection, L10n, Browser, EmitType, Complex, compile } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, append } from '@syncfusion/ej2-base';import { EventHandler } from '@syncfusion/ej2-base';import { Draggable } from '@syncfusion/ej2-base';import { Popup, PositionData, getZindexPartial } from '../popup/popup';import { PositionDataModel } from '../popup/popup-model';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';
+import { Component, Property, Event, Collection, L10n, Browser, EmitType, Complex, compile } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, append } from '@syncfusion/ej2-base';import { EventHandler } from '@syncfusion/ej2-base';import { Draggable } from '@syncfusion/ej2-base';import { Popup, PositionData, getZindexPartial } from '../popup/popup';import { PositionDataModel } from '../popup/popup-model';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';
 import {DialogEffect,BeforeOpenEventArgs,BeforeCloseEventArgs} from "./dialog";
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base';

src/dialog/dialog.d.ts

@@ -140,2 +140,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     private closeArgs;
+    private calculatezIndex;
     /**
@@ -370,2 +371,3 @@ * Specifies the value that can be displayed in dialog's content area.
     private updateIsModal();
+    private setzIndex(zIndexElement, setPopupZindex);
     /**
@@ -372,0 +374,0 @@ * Get the properties to be maintained in the persisted state.

src/dialog/dialog.js

@@ -17,958 +17,1005 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../popup/popup", "@syncfusion/ej2-buttons"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_base_5, ej2_base_6, popup_1, ej2_buttons_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var ButtonProps = /** @class */ (function (_super) {
-        __extends(ButtonProps, _super);
-        function ButtonProps() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property()
-        ], ButtonProps.prototype, "buttonModel", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], ButtonProps.prototype, "click", void 0);
-        return ButtonProps;
-    }(ej2_base_3.ChildProperty));
-    exports.ButtonProps = ButtonProps;
+import { Component, Property, Event, Collection, L10n, Browser, Complex, compile } from '@syncfusion/ej2-base';
+import { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';
+import { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, formatUnit, append } from '@syncfusion/ej2-base';
+import { EventHandler } from '@syncfusion/ej2-base';
+import { Draggable } from '@syncfusion/ej2-base';
+import { Popup, PositionData, getZindexPartial } from '../popup/popup';
+import { Button } from '@syncfusion/ej2-buttons';
+var ButtonProps = /** @class */ (function (_super) {
+    __extends(ButtonProps, _super);
+    function ButtonProps() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property()
+    ], ButtonProps.prototype, "buttonModel", void 0);
+    __decorate([
+        Property()
+    ], ButtonProps.prototype, "click", void 0);
+    return ButtonProps;
+}(ChildProperty));
+export { ButtonProps };
+/**
+ * Configures the animation properties for both open and close the dialog.
+ */
+var AnimationSettings = /** @class */ (function (_super) {
+    __extends(AnimationSettings, _super);
+    function AnimationSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('Fade')
+    ], AnimationSettings.prototype, "effect", void 0);
+    __decorate([
+        Property(400)
+    ], AnimationSettings.prototype, "duration", void 0);
+    __decorate([
+        Property(0)
+    ], AnimationSettings.prototype, "delay", void 0);
+    return AnimationSettings;
+}(ChildProperty));
+export { AnimationSettings };
+var ROOT = 'e-dialog';
+var RTL = 'e-rtl';
+var DLG_HEADER_CONTENT = 'e-dlg-header-content';
+var DLG_HEADER = 'e-dlg-header';
+var DLG_FOOTER_CONTENT = 'e-footer-content';
+var MODAL_DLG = 'e-dlg-modal';
+var DLG_CONTENT = 'e-dlg-content';
+var DLG_CLOSE_ICON = 'e-icon-dlg-close';
+var DLG_OVERLAY = 'e-dlg-overlay';
+var DLG_CONTAINER = 'e-dlg-container';
+var SCROLL_DISABLED = 'e-scroll-disabled';
+var DLG_PRIMARY_BUTTON = 'e-primary';
+var ICON = 'e-icons';
+var POPUP_ROOT = 'e-popup';
+var DEVICE = 'e-device';
+var FULLSCREEN = 'e-dlg-fullscreen';
+var DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';
+var DLG_HIDE = 'e-popup-close';
+var DLG_SHOW = 'e-popup-open';
+/**
+ * Represents the dialog component that displays the information and get input from the user.
+ * Two types of dialog components are `Modal and Modeless (non-modal)` depending on its interaction with parent application.
+ * ```html
+ * <div id="dialog"></div>
+ * ```
+ * ```typescript
+ * <script>
+ *   var dialogObj = new Dialog({ header: 'Dialog' });
+ *   dialogObj.appendTo("#dialog");
+ * </script>
+ * ```
+ */
+var Dialog = /** @class */ (function (_super) {
+    __extends(Dialog, _super);
     /**
-     * Configures the animation properties for both open and close the dialog.
+     * Constructor for creating the widget
+     * @hidden
      */
-    var AnimationSettings = /** @class */ (function (_super) {
-        __extends(AnimationSettings, _super);
-        function AnimationSettings() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property('Fade')
-        ], AnimationSettings.prototype, "effect", void 0);
-        __decorate([
-            ej2_base_1.Property(400)
-        ], AnimationSettings.prototype, "duration", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], AnimationSettings.prototype, "delay", void 0);
-        return AnimationSettings;
-    }(ej2_base_3.ChildProperty));
-    exports.AnimationSettings = AnimationSettings;
-    var ROOT = 'e-dialog';
-    var RTL = 'e-rtl';
-    var DLG_HEADER_CONTENT = 'e-dlg-header-content';
-    var DLG_HEADER = 'e-dlg-header';
-    var DLG_FOOTER_CONTENT = 'e-footer-content';
-    var MODAL_DLG = 'e-dlg-modal';
-    var DLG_CONTENT = 'e-dlg-content';
-    var DLG_CLOSE_ICON = 'e-icon-dlg-close';
-    var DLG_OVERLAY = 'e-dlg-overlay';
-    var DLG_CONTAINER = 'e-dlg-container';
-    var SCROLL_DISABLED = 'e-scroll-disabled';
-    var DLG_PRIMARY_BUTTON = 'e-primary';
-    var ICON = 'e-icons';
-    var POPUP_ROOT = 'e-popup';
-    var DEVICE = 'e-device';
-    var FULLSCREEN = 'e-dlg-fullscreen';
-    var DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';
-    var DLG_HIDE = 'e-popup-close';
-    var DLG_SHOW = 'e-popup-open';
+    function Dialog(options, element) {
+        return _super.call(this, options, element) || this;
+    }
     /**
-     * Represents the dialog component that displays the information and get input from the user.
-     * Two types of dialog components are `Modal and Modeless (non-modal)` depending on its interaction with parent application.
-     * ```html
-     * <div id="dialog"></div>
-     * ```
-     * ```typescript
-     * <script>
-     *   var dialogObj = new Dialog({ header: 'Dialog' });
-     *   dialogObj.appendTo("#dialog");
-     * </script>
-     * ```
+     * Initialize the control rendering
+     * @private
      */
-    var Dialog = /** @class */ (function (_super) {
-        __extends(Dialog, _super);
-        /**
-         * Constructor for creating the widget
-         * @hidden
-         */
-        function Dialog(options, element) {
-            return _super.call(this, options, element) || this;
+    Dialog.prototype.render = function () {
+        this.initialize();
+        this.initRender();
+        this.wireEvents();
+    };
+    /**
+     * Initialize the event handler
+     * @private
+     */
+    Dialog.prototype.preRender = function () {
+        var _this = this;
+        this.headerContent = null;
+        var classArray = [];
+        for (var j = 0; j < this.element.classList.length; j++) {
+            if (!isNullOrUndefined(this.element.classList[j].match('e-control')) ||
+                !isNullOrUndefined(this.element.classList[j].match(ROOT))) {
+                classArray.push(this.element.classList[j]);
+            }
         }
-        /**
-         * Initialize the control rendering
-         * @private
-         */
-        Dialog.prototype.render = function () {
-            this.initialize();
-            this.initRender();
-            this.wireEvents();
+        removeClass([this.element], classArray);
+        this.clonedEle = this.element.cloneNode(true);
+        this.closeIconClickEventHandler = function (event) {
+            _this.hide(event);
         };
-        /**
-         * Initialize the event handler
-         * @private
-         */
-        Dialog.prototype.preRender = function () {
-            var _this = this;
-            this.headerContent = null;
-            var classArray = [];
-            for (var j = 0; j < this.element.classList.length; j++) {
-                if (!ej2_base_4.isNullOrUndefined(this.element.classList[j].match('e-control')) ||
-                    !ej2_base_4.isNullOrUndefined(this.element.classList[j].match(ROOT))) {
-                    classArray.push(this.element.classList[j]);
-                }
-            }
-            ej2_base_2.removeClass([this.element], classArray);
-            this.clonedEle = this.element.cloneNode(true);
-            this.closeIconClickEventHandler = function (event) {
-                _this.hide(event);
-            };
-            this.dlgOverlayClickEventHandler = function (event) {
-                _this.trigger('overlayClick', event);
-            };
-            var localeText = { close: 'Close' };
-            this.l10n = new ej2_base_1.L10n('dialog', localeText, this.locale);
-            if (ej2_base_4.isNullOrUndefined(this.target)) {
-                var prevOnChange = this.isProtectedOnChange;
-                this.isProtectedOnChange = true;
-                this.target = document.body;
-                this.isProtectedOnChange = prevOnChange;
-            }
+        this.dlgOverlayClickEventHandler = function (event) {
+            _this.trigger('overlayClick', event);
         };
-        ;
-        /* istanbul ignore next */
-        Dialog.prototype.keyDown = function (event) {
-            var _this = this;
-            if (event.keyCode === 9) {
-                if (this.isModal) {
-                    var buttonObj = void 0;
-                    if (!ej2_base_4.isNullOrUndefined(this.btnObj)) {
-                        buttonObj = this.btnObj[this.btnObj.length - 1];
-                    }
-                    if (!ej2_base_4.isNullOrUndefined(buttonObj) && document.activeElement === buttonObj.element && !event.shiftKey) {
-                        event.preventDefault();
-                        this.focusableElements(this.element).focus();
-                    }
-                    if (document.activeElement === this.focusableElements(this.element) && event.shiftKey) {
-                        event.preventDefault();
-                        if (!ej2_base_4.isNullOrUndefined(buttonObj)) {
-                            buttonObj.element.focus();
-                        }
-                    }
+        var localeText = { close: 'Close' };
+        this.l10n = new L10n('dialog', localeText, this.locale);
+        if (isNullOrUndefined(this.target)) {
+            var prevOnChange = this.isProtectedOnChange;
+            this.isProtectedOnChange = true;
+            this.target = document.body;
+            this.isProtectedOnChange = prevOnChange;
+        }
+    };
+    ;
+    /* istanbul ignore next */
+    Dialog.prototype.keyDown = function (event) {
+        var _this = this;
+        if (event.keyCode === 9) {
+            if (this.isModal) {
+                var buttonObj = void 0;
+                if (!isNullOrUndefined(this.btnObj)) {
+                    buttonObj = this.btnObj[this.btnObj.length - 1];
                 }
-            }
-            var element = document.activeElement;
-            var isTagName = (['input', 'textarea'].indexOf(element.tagName.toLowerCase()) > -1);
-            var isContentEdit = false;
-            if (!isTagName) {
-                isContentEdit = element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true';
-            }
-            if (event.keyCode === 27 && this.closeOnEscape) {
-                this.hide(event);
-            }
-            if ((event.keyCode === 13 && !event.ctrlKey && element.tagName.toLowerCase() !== 'textarea' &&
-                isTagName && !ej2_base_4.isNullOrUndefined(this.primaryButtonEle)) ||
-                (event.keyCode === 13 && event.ctrlKey && (element.tagName.toLowerCase() === 'textarea' ||
-                    isContentEdit)) && !ej2_base_4.isNullOrUndefined(this.primaryButtonEle)) {
-                var buttonIndex_1;
-                var firstPrimary = this.buttons.some(function (data, index) {
-                    buttonIndex_1 = index;
-                    var buttonModel = data.buttonModel;
-                    return !ej2_base_4.isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;
-                });
-                if (firstPrimary && typeof (this.buttons[buttonIndex_1].click) === 'function') {
-                    setTimeout(function () {
-                        _this.buttons[buttonIndex_1].click.call(_this, event);
-                    });
+                if (!isNullOrUndefined(buttonObj) && document.activeElement === buttonObj.element && !event.shiftKey) {
+                    event.preventDefault();
+                    this.focusableElements(this.element).focus();
                 }
-            }
-        };
-        /**
-         * Initialize the control rendering
-         * @private
-         */
-        Dialog.prototype.initialize = function () {
-            if (!ej2_base_4.isNullOrUndefined(this.target)) {
-                this.targetEle = ((typeof this.target) === 'string') ?
-                    document.querySelector(this.target) : this.target;
-            }
-            ej2_base_2.addClass([this.element], ROOT);
-            if (ej2_base_1.Browser.isDevice) {
-                ej2_base_2.addClass([this.element], DEVICE);
-            }
-            this.setCSSClass();
-            this.setMaxHeight();
-        };
-        /**
-         * Initialize the rendering
-         * @private
-         */
-        Dialog.prototype.initRender = function () {
-            var _this = this;
-            this.initialRender = true;
-            ej2_base_2.attributes(this.element, { role: 'dialog' });
-            if (this.zIndex === 1000) {
-                this.zIndex = popup_1.getZindexPartial(this.element);
-            }
-            this.setTargetContent();
-            if (this.header !== '' && !ej2_base_4.isNullOrUndefined(this.header)) {
-                this.setHeader();
-            }
-            if (this.showCloseIcon) {
-                this.renderCloseIcon();
-            }
-            this.setContent();
-            if (this.footerTemplate !== '' && !ej2_base_4.isNullOrUndefined(this.footerTemplate)) {
-                this.setFooterTemplate();
-            }
-            else if (!ej2_base_4.isNullOrUndefined(this.buttons[0].buttonModel)) {
-                this.setButton();
-            }
-            if (this.allowDragging && (!this.isModal) && (!ej2_base_4.isNullOrUndefined(this.headerContent))) {
-                this.setAllowDragging();
-            }
-            ej2_base_2.attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });
-            if (this.isModal) {
-                this.setIsModal();
-            }
-            if (!ej2_base_4.isNullOrUndefined(this.targetEle)) {
-                this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);
-            }
-            this.popupObj = new popup_1.Popup(this.element, {
-                height: this.height,
-                width: this.width,
-                zIndex: this.zIndex,
-                relateTo: this.target,
-                actionOnScroll: 'none',
-                open: function (event) {
-                    _this.focusContent();
-                    var eventArgs = {
-                        container: _this.isModal ? _this.dlgContainer : _this.element,
-                        element: _this.element,
-                        target: _this.target
-                    };
-                    _this.trigger('open', eventArgs);
-                },
-                close: function (event) {
-                    _this.unBindEvent(_this.element);
-                    if (_this.isModal) {
-                        _this.dlgContainer.style.display = 'none';
+                if (document.activeElement === this.focusableElements(this.element) && event.shiftKey) {
+                    event.preventDefault();
+                    if (!isNullOrUndefined(buttonObj)) {
+                        buttonObj.element.focus();
                     }
-                    _this.trigger('close', _this.closeArgs);
-                    if (!ej2_base_4.isNullOrUndefined(_this.storeActiveElement)) {
-                        _this.storeActiveElement.focus();
-                    }
                 }
+            }
+        }
+        var element = document.activeElement;
+        var isTagName = (['input', 'textarea'].indexOf(element.tagName.toLowerCase()) > -1);
+        var isContentEdit = false;
+        if (!isTagName) {
+            isContentEdit = element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true';
+        }
+        if (event.keyCode === 27 && this.closeOnEscape) {
+            this.hide(event);
+        }
+        if ((event.keyCode === 13 && !event.ctrlKey && element.tagName.toLowerCase() !== 'textarea' &&
+            isTagName && !isNullOrUndefined(this.primaryButtonEle)) ||
+            (event.keyCode === 13 && event.ctrlKey && (element.tagName.toLowerCase() === 'textarea' ||
+                isContentEdit)) && !isNullOrUndefined(this.primaryButtonEle)) {
+            var buttonIndex_1;
+            var firstPrimary = this.buttons.some(function (data, index) {
+                buttonIndex_1 = index;
+                var buttonModel = data.buttonModel;
+                return !isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;
             });
-            this.positionChange();
-            this.setEnableRTL();
-            ej2_base_2.addClass([this.element], DLG_HIDE);
-            if (this.isModal) {
-                this.setOverlayZindex();
+            if (firstPrimary && typeof (this.buttons[buttonIndex_1].click) === 'function') {
+                setTimeout(function () {
+                    _this.buttons[buttonIndex_1].click.call(_this, event);
+                });
             }
-            if (this.visible) {
-                this.show();
-            }
-            else {
-                if (this.isModal) {
-                    this.dlgOverlay.style.display = 'none';
+        }
+    };
+    /**
+     * Initialize the control rendering
+     * @private
+     */
+    Dialog.prototype.initialize = function () {
+        if (!isNullOrUndefined(this.target)) {
+            this.targetEle = ((typeof this.target) === 'string') ?
+                document.querySelector(this.target) : this.target;
+        }
+        addClass([this.element], ROOT);
+        if (Browser.isDevice) {
+            addClass([this.element], DEVICE);
+        }
+        this.setCSSClass();
+        this.setMaxHeight();
+    };
+    /**
+     * Initialize the rendering
+     * @private
+     */
+    Dialog.prototype.initRender = function () {
+        var _this = this;
+        this.initialRender = true;
+        attributes(this.element, { role: 'dialog' });
+        if (this.zIndex === 1000) {
+            this.setzIndex(this.element, false);
+            this.calculatezIndex = true;
+        }
+        else {
+            this.calculatezIndex = false;
+        }
+        this.setTargetContent();
+        if (this.header !== '' && !isNullOrUndefined(this.header)) {
+            this.setHeader();
+        }
+        if (this.showCloseIcon) {
+            this.renderCloseIcon();
+        }
+        this.setContent();
+        if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {
+            this.setFooterTemplate();
+        }
+        else if (!isNullOrUndefined(this.buttons[0].buttonModel)) {
+            this.setButton();
+        }
+        if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {
+            this.setAllowDragging();
+        }
+        attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });
+        if (this.isModal) {
+            this.setIsModal();
+        }
+        if (!isNullOrUndefined(this.targetEle)) {
+            this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);
+        }
+        this.popupObj = new Popup(this.element, {
+            height: this.height,
+            width: this.width,
+            zIndex: this.zIndex,
+            relateTo: this.target,
+            actionOnScroll: 'none',
+            open: function (event) {
+                _this.focusContent();
+                var eventArgs = {
+                    container: _this.isModal ? _this.dlgContainer : _this.element,
+                    element: _this.element,
+                    target: _this.target
+                };
+                _this.trigger('open', eventArgs);
+            },
+            close: function (event) {
+                _this.unBindEvent(_this.element);
+                if (_this.isModal) {
+                    _this.dlgContainer.style.display = 'none';
                 }
+                _this.trigger('close', _this.closeArgs);
+                if (!isNullOrUndefined(_this.storeActiveElement)) {
+                    _this.storeActiveElement.focus();
+                }
             }
-            this.initialRender = false;
-        };
-        Dialog.prototype.setOverlayZindex = function (zIndexValue) {
-            var zIndex;
-            if (ej2_base_4.isNullOrUndefined(zIndexValue)) {
-                zIndex = parseInt(this.element.style.zIndex, 10) ? parseInt(this.element.style.zIndex, 10) : this.zIndex;
-            }
-            else {
-                zIndex = zIndexValue;
-            }
-            this.dlgOverlay.style.zIndex = (zIndex - 1).toString();
-            this.dlgContainer.style.zIndex = zIndex.toString();
-        };
-        Dialog.prototype.positionChange = function () {
+        });
+        this.positionChange();
+        this.setEnableRTL();
+        addClass([this.element], DLG_HIDE);
+        if (this.isModal) {
+            this.setOverlayZindex();
+        }
+        if (this.visible) {
+            this.show();
+        }
+        else {
             if (this.isModal) {
-                this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);
-                if (typeof (this.position.X) === 'number' && typeof (this.position.Y) === 'number') {
-                    this.setPopupPosition();
-                }
+                this.dlgOverlay.style.display = 'none';
             }
-            else {
+        }
+        this.initialRender = false;
+    };
+    Dialog.prototype.setOverlayZindex = function (zIndexValue) {
+        var zIndex;
+        if (isNullOrUndefined(zIndexValue)) {
+            zIndex = parseInt(this.element.style.zIndex, 10) ? parseInt(this.element.style.zIndex, 10) : this.zIndex;
+        }
+        else {
+            zIndex = zIndexValue;
+        }
+        this.dlgOverlay.style.zIndex = (zIndex - 1).toString();
+        this.dlgContainer.style.zIndex = zIndex.toString();
+    };
+    Dialog.prototype.positionChange = function () {
+        if (this.isModal) {
+            if (typeof (this.position.X) === 'number' && typeof (this.position.Y) === 'number') {
                 this.setPopupPosition();
             }
-        };
-        Dialog.prototype.setPopupPosition = function () {
-            this.popupObj.setProperties({
-                position: {
-                    X: this.position.X, Y: this.position.Y
-                }
-            });
-        };
-        Dialog.prototype.setAllowDragging = function () {
-            var _this = this;
-            var handleContent = '.' + DLG_HEADER_CONTENT;
-            this.dragObj = new ej2_base_6.Draggable(this.element, {
-                clone: false,
-                handle: handleContent,
-                dragStart: function (event) {
-                    _this.trigger('dragStart', event);
-                },
-                dragStop: function (event) {
-                    _this.trigger('dragStop', event);
-                },
-                drag: function (event) {
-                    _this.trigger('drag', event);
-                }
-            });
-            if (!ej2_base_4.isNullOrUndefined(this.targetEle)) {
-                this.dragObj.dragArea = this.targetEle;
+            else {
+                this.element.style.top = '0px';
+                this.element.style.left = '0px';
+                this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);
             }
-        };
-        Dialog.prototype.setButton = function () {
-            this.buttonContent = [];
-            this.btnObj = [];
-            var primaryBtnFlag = true;
-            for (var i = 0; i < this.buttons.length; i++) {
-                var btn = ej2_base_2.createElement('button', { attrs: { type: 'button' } });
-                this.buttonContent.push(btn.outerHTML);
+        }
+        else {
+            this.setPopupPosition();
+        }
+    };
+    Dialog.prototype.setPopupPosition = function () {
+        this.popupObj.setProperties({
+            position: {
+                X: this.position.X, Y: this.position.Y
             }
-            this.setFooterTemplate();
-            for (var i = 0; i < this.buttons.length; i++) {
-                this.btnObj[i] = new ej2_buttons_1.Button(this.buttons[i].buttonModel);
-                if (typeof (this.buttons[i].click) === 'function') {
-                    ej2_base_5.EventHandler.add(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click, this);
+        });
+    };
+    Dialog.prototype.setAllowDragging = function () {
+        var _this = this;
+        var handleContent = '.' + DLG_HEADER_CONTENT;
+        this.dragObj = new Draggable(this.element, {
+            clone: false,
+            abort: '.e-dlg-closeicon-btn',
+            handle: handleContent,
+            dragStart: function (event) {
+                _this.trigger('dragStart', event);
+            },
+            dragStop: function (event) {
+                if (_this.isModal) {
+                    if (!isNullOrUndefined(_this.position)) {
+                        _this.dlgContainer.classList.remove('e-dlg-' + _this.position.X + '-' + _this.position.Y);
+                    }
+                    // Reset the dialog position after drag completion.
+                    _this.element.style.position = 'relative';
                 }
-                this.btnObj[i].appendTo(this.ftrTemplateContent.children[i]);
-                this.btnObj[i].element.classList.add('e-flat');
-                this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];
+                _this.trigger('dragStop', event);
+            },
+            drag: function (event) {
+                _this.trigger('drag', event);
             }
-        };
-        Dialog.prototype.setContent = function () {
-            ej2_base_2.attributes(this.element, { 'aria-describedby': this.element.id + '_dialog-content' });
-            this.contentEle = ej2_base_2.createElement('div', { className: DLG_CONTENT, id: this.element.id + '_dialog-content' });
-            if (this.innerContentElement) {
-                this.contentEle.appendChild(this.innerContentElement);
+        });
+        if (!isNullOrUndefined(this.targetEle)) {
+            this.dragObj.dragArea = this.targetEle;
+        }
+    };
+    Dialog.prototype.setButton = function () {
+        this.buttonContent = [];
+        this.btnObj = [];
+        var primaryBtnFlag = true;
+        for (var i = 0; i < this.buttons.length; i++) {
+            var btn = this.createElement('button', { attrs: { type: 'button' } });
+            this.buttonContent.push(btn.outerHTML);
+        }
+        this.setFooterTemplate();
+        for (var i = 0; i < this.buttons.length; i++) {
+            this.btnObj[i] = new Button(this.buttons[i].buttonModel);
+            if (typeof (this.buttons[i].click) === 'function') {
+                EventHandler.add(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click, this);
             }
-            else if (!ej2_base_4.isNullOrUndefined(this.content) && this.content !== '' || !this.initialRender) {
-                if (typeof (this.content) === 'string') {
-                    this.contentEle.innerHTML = this.content;
-                }
-                else if (this.content instanceof HTMLElement) {
-                    this.contentEle.appendChild(this.content);
-                }
-                else {
-                    this.setTemplate(this.content, this.contentEle);
-                }
+            this.btnObj[i].appendTo(this.ftrTemplateContent.children[i]);
+            this.btnObj[i].element.classList.add('e-flat');
+            this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];
+        }
+    };
+    Dialog.prototype.setContent = function () {
+        attributes(this.element, { 'aria-describedby': this.element.id + '_dialog-content' });
+        this.contentEle = this.createElement('div', { className: DLG_CONTENT, id: this.element.id + '_dialog-content' });
+        if (this.innerContentElement) {
+            this.contentEle.appendChild(this.innerContentElement);
+        }
+        else if (!isNullOrUndefined(this.content) && this.content !== '' || !this.initialRender) {
+            if (typeof (this.content) === 'string') {
+                this.contentEle.innerHTML = this.content;
             }
-            if (!ej2_base_4.isNullOrUndefined(this.headerContent)) {
-                this.element.insertBefore(this.contentEle, this.element.children[1]);
+            else if (this.content instanceof HTMLElement) {
+                this.contentEle.appendChild(this.content);
             }
             else {
-                this.element.insertBefore(this.contentEle, this.element.children[0]);
+                this.setTemplate(this.content, this.contentEle);
             }
-            if (this.height === 'auto') {
-                this.setMaxHeight();
-            }
-        };
-        Dialog.prototype.setTemplate = function (template, toElement) {
-            var templateFn = ej2_base_1.compile(template);
-            var fromElements = [];
-            for (var _i = 0, _a = templateFn({}); _i < _a.length; _i++) {
-                var item = _a[_i];
-                fromElements.push(item);
-            }
-            ej2_base_4.append([].slice.call(fromElements), toElement);
-        };
-        Dialog.prototype.setMaxHeight = function () {
-            var display = this.element.style.display;
-            this.element.style.display = 'none';
-            this.element.style.maxHeight = (!ej2_base_4.isNullOrUndefined(this.target)) ?
-                (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';
-            this.element.style.display = display;
-        };
-        Dialog.prototype.setEnableRTL = function () {
-            this.enableRtl ? ej2_base_2.addClass([this.element], RTL) : ej2_base_2.removeClass([this.element], RTL);
-        };
-        Dialog.prototype.setTargetContent = function () {
-            if (ej2_base_4.isNullOrUndefined(this.content) || this.content === '') {
-                var isContent = this.element.innerHTML.replace(/\s/g, '') !== '';
-                if (this.element.children.length > 0 || isContent) {
-                    this.innerContentElement = document.createDocumentFragment();
-                    while (this.element.childNodes.length !== 0) {
-                        this.innerContentElement.appendChild(this.element.childNodes[0]);
-                    }
+        }
+        if (!isNullOrUndefined(this.headerContent)) {
+            this.element.insertBefore(this.contentEle, this.element.children[1]);
+        }
+        else {
+            this.element.insertBefore(this.contentEle, this.element.children[0]);
+        }
+        if (this.height === 'auto') {
+            this.setMaxHeight();
+        }
+    };
+    Dialog.prototype.setTemplate = function (template, toElement) {
+        var templateFn = compile(template);
+        var fromElements = [];
+        for (var _i = 0, _a = templateFn({}); _i < _a.length; _i++) {
+            var item = _a[_i];
+            fromElements.push(item);
+        }
+        append([].slice.call(fromElements), toElement);
+    };
+    Dialog.prototype.setMaxHeight = function () {
+        var display = this.element.style.display;
+        this.element.style.display = 'none';
+        this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?
+            (this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';
+        this.element.style.display = display;
+    };
+    Dialog.prototype.setEnableRTL = function () {
+        this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);
+    };
+    Dialog.prototype.setTargetContent = function () {
+        if (isNullOrUndefined(this.content) || this.content === '') {
+            var isContent = this.element.innerHTML.replace(/\s/g, '') !== '';
+            if (this.element.children.length > 0 || isContent) {
+                this.innerContentElement = document.createDocumentFragment();
+                while (this.element.childNodes.length !== 0) {
+                    this.innerContentElement.appendChild(this.element.childNodes[0]);
                 }
             }
-        };
-        Dialog.prototype.setHeader = function () {
-            if (this.headerEle) {
-                this.headerEle.innerHTML = '';
-            }
-            else {
-                this.headerEle = ej2_base_2.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER });
-            }
+        }
+    };
+    Dialog.prototype.setHeader = function () {
+        if (this.headerEle) {
+            this.headerEle.innerHTML = '';
+        }
+        else {
+            this.headerEle = this.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER });
+        }
+        this.createHeaderContent();
+        this.headerContent.appendChild(this.headerEle);
+        this.setTemplate(this.header, this.headerEle);
+        attributes(this.element, { 'aria-labelledby': this.element.id + '_title' });
+        this.element.insertBefore(this.headerContent, this.element.children[0]);
+    };
+    Dialog.prototype.setFooterTemplate = function () {
+        if (this.ftrTemplateContent) {
+            this.ftrTemplateContent.innerHTML = '';
+        }
+        else {
+            this.ftrTemplateContent = this.createElement('div', {
+                className: DLG_FOOTER_CONTENT
+            });
+        }
+        if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {
+            this.setTemplate(this.footerTemplate, this.ftrTemplateContent);
+        }
+        else {
+            this.ftrTemplateContent.innerHTML = this.buttonContent.join('');
+        }
+        this.element.appendChild(this.ftrTemplateContent);
+    };
+    Dialog.prototype.createHeaderContent = function () {
+        if (isNullOrUndefined(this.headerContent)) {
+            this.headerContent = this.createElement('div', { className: DLG_HEADER_CONTENT });
+        }
+    };
+    Dialog.prototype.renderCloseIcon = function () {
+        this.closeIcon = this.createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });
+        this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });
+        this.closeIconTitle();
+        if (!isNullOrUndefined(this.headerContent)) {
+            prepend([this.closeIcon], this.headerContent);
+        }
+        else {
             this.createHeaderContent();
-            this.headerContent.appendChild(this.headerEle);
-            this.setTemplate(this.header, this.headerEle);
-            ej2_base_2.attributes(this.element, { 'aria-labelledby': this.element.id + '_title' });
+            prepend([this.closeIcon], this.headerContent);
             this.element.insertBefore(this.headerContent, this.element.children[0]);
-        };
-        Dialog.prototype.setFooterTemplate = function () {
-            if (this.ftrTemplateContent) {
-                this.ftrTemplateContent.innerHTML = '';
+        }
+        this.closeIconBtnObj.appendTo(this.closeIcon);
+    };
+    Dialog.prototype.closeIconTitle = function () {
+        this.l10n.setLocale(this.locale);
+        var closeIconTitle = this.l10n.getConstant('close');
+        this.closeIcon.setAttribute('title', closeIconTitle);
+    };
+    Dialog.prototype.setCSSClass = function (oldCSSClass) {
+        if (this.cssClass) {
+            addClass([this.element], this.cssClass.split(' '));
+        }
+        if (oldCSSClass) {
+            removeClass([this.element], oldCSSClass.split(' '));
+        }
+    };
+    Dialog.prototype.setIsModal = function () {
+        this.dlgContainer = this.createElement('div', { className: DLG_CONTAINER });
+        this.element.classList.remove(DLG_SHOW);
+        this.element.parentNode.insertBefore(this.dlgContainer, this.element);
+        this.dlgContainer.appendChild(this.element);
+        addClass([this.element], MODAL_DLG);
+        this.dlgOverlay = this.createElement('div', { className: DLG_OVERLAY });
+        this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
+        this.dlgContainer.appendChild(this.dlgOverlay);
+    };
+    Dialog.prototype.getValidFocusNode = function (items) {
+        var node;
+        for (var u = 0; u < items.length; u++) {
+            node = items[u];
+            if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&
+                !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled="true"],[type="hidden"]')) {
+                return node;
             }
-            else {
-                this.ftrTemplateContent = ej2_base_2.createElement('div', {
-                    className: DLG_FOOTER_CONTENT
-                });
+        }
+        return node;
+    };
+    Dialog.prototype.focusableElements = function (content) {
+        if (!isNullOrUndefined(content)) {
+            var value = 'input,select,textarea,button,a,[contenteditable="true"],[tabindex]';
+            var items = content.querySelectorAll(value);
+            return this.getValidFocusNode(items);
+        }
+        return null;
+    };
+    Dialog.prototype.getAutoFocusNode = function (container) {
+        var node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);
+        var value = '[autofocus]';
+        var items = container.querySelectorAll(value);
+        var validNode = this.getValidFocusNode(items);
+        if (!isNullOrUndefined(validNode)) {
+            node = validNode;
+        }
+        else {
+            validNode = this.focusableElements(this.contentEle);
+            if (!isNullOrUndefined(validNode)) {
+                return node = validNode;
             }
-            if (this.footerTemplate !== '' && !ej2_base_4.isNullOrUndefined(this.footerTemplate)) {
-                this.setTemplate(this.footerTemplate, this.ftrTemplateContent);
+            else if (!isNullOrUndefined(this.primaryButtonEle)) {
+                return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);
             }
-            else {
-                this.ftrTemplateContent.innerHTML = this.buttonContent.join('');
-            }
-            this.element.appendChild(this.ftrTemplateContent);
-        };
-        Dialog.prototype.createHeaderContent = function () {
-            if (ej2_base_4.isNullOrUndefined(this.headerContent)) {
-                this.headerContent = ej2_base_2.createElement('div', { className: DLG_HEADER_CONTENT });
-            }
-        };
-        Dialog.prototype.renderCloseIcon = function () {
-            this.closeIcon = ej2_base_2.createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });
-            this.closeIconBtnObj = new ej2_buttons_1.Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });
-            this.closeIconTitle();
-            if (!ej2_base_4.isNullOrUndefined(this.headerContent)) {
-                ej2_base_2.prepend([this.closeIcon], this.headerContent);
-            }
-            else {
-                this.createHeaderContent();
-                ej2_base_2.prepend([this.closeIcon], this.headerContent);
-                this.element.insertBefore(this.headerContent, this.element.children[0]);
-            }
-            this.closeIconBtnObj.appendTo(this.closeIcon);
-        };
-        Dialog.prototype.closeIconTitle = function () {
-            this.l10n.setLocale(this.locale);
-            var closeIconTitle = this.l10n.getConstant('close');
-            this.closeIcon.setAttribute('title', closeIconTitle);
-        };
-        Dialog.prototype.setCSSClass = function (oldCSSClass) {
-            if (this.cssClass) {
-                ej2_base_2.addClass([this.element], this.cssClass.split(' '));
-            }
-            if (oldCSSClass) {
-                ej2_base_2.removeClass([this.element], oldCSSClass.split(' '));
-            }
-        };
-        Dialog.prototype.setIsModal = function () {
-            this.dlgContainer = ej2_base_2.createElement('div', { className: DLG_CONTAINER });
-            this.element.classList.remove(DLG_SHOW);
-            this.element.parentNode.insertBefore(this.dlgContainer, this.element);
-            this.dlgContainer.appendChild(this.element);
-            ej2_base_2.addClass([this.element], MODAL_DLG);
-            this.dlgOverlay = ej2_base_2.createElement('div', { className: DLG_OVERLAY });
-            this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
-            this.dlgContainer.appendChild(this.dlgOverlay);
-        };
-        Dialog.prototype.getValidFocusNode = function (items) {
-            var node;
-            for (var u = 0; u < items.length; u++) {
-                node = items[u];
-                if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&
-                    !node.disabled && !this.disableElement(node, '[disabled],[aria-disabled="true"],[type="hidden"]')) {
-                    return node;
+        }
+        return node;
+    };
+    Dialog.prototype.disableElement = function (element, t) {
+        var elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msMatchesSelector : null;
+        if (elementMatch) {
+            for (; element; element = element.parentNode) {
+                if (element instanceof Element && elementMatch.call(element, t)) {
+                    /* istanbul ignore next */
+                    return element;
                 }
             }
-            return node;
-        };
-        Dialog.prototype.focusableElements = function (content) {
-            if (!ej2_base_4.isNullOrUndefined(content)) {
-                var value = 'input,select,textarea,button,a,[contenteditable="true"],[tabindex]';
-                var items = content.querySelectorAll(value);
-                return this.getValidFocusNode(items);
-            }
-            return null;
-        };
-        Dialog.prototype.getAutoFocusNode = function (container) {
-            var node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);
-            var value = '[autofocus]';
-            var items = container.querySelectorAll(value);
-            var validNode = this.getValidFocusNode(items);
-            if (!ej2_base_4.isNullOrUndefined(validNode)) {
-                node = validNode;
-            }
-            else {
-                validNode = this.focusableElements(this.contentEle);
-                if (!ej2_base_4.isNullOrUndefined(validNode)) {
-                    return node = validNode;
-                }
-                else if (!ej2_base_4.isNullOrUndefined(this.primaryButtonEle)) {
-                    return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);
-                }
-            }
-            return node;
-        };
-        Dialog.prototype.disableElement = function (element, t) {
-            var elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msMatchesSelector : null;
-            if (elementMatch) {
-                for (; element; element = element.parentNode) {
-                    if (element instanceof Element && elementMatch.call(element, t)) {
-                        /* istanbul ignore next */
-                        return element;
-                    }
-                }
-            }
-            return null;
-        };
-        Dialog.prototype.focusContent = function () {
-            var element = this.getAutoFocusNode(this.element);
-            var node = !ej2_base_4.isNullOrUndefined(element) ? element : this.element;
-            node.focus();
-            this.bindEvent(this.element);
-        };
-        Dialog.prototype.bindEvent = function (element) {
-            ej2_base_5.EventHandler.add(element, 'keydown', this.keyDown, this);
-        };
-        Dialog.prototype.unBindEvent = function (element) {
-            ej2_base_5.EventHandler.remove(element, 'keydown', this.keyDown);
-        };
-        /**
-         * Module required function
-         * @private
-         */
-        Dialog.prototype.getModuleName = function () {
-            return 'dialog';
-        };
-        /**
-         * Called internally if any of the property value changed
-         * @private
-         */
-        Dialog.prototype.onPropertyChanged = function (newProp, oldProp) {
-            if (!this.element.classList.contains(ROOT)) {
-                return;
-            }
-            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                switch (prop) {
-                    case 'content':
-                        if (!ej2_base_4.isNullOrUndefined(this.content) && this.content !== '') {
-                            if (!ej2_base_4.isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {
-                                this.contentEle.innerHTML = '';
-                                typeof (this.content) === 'string' ?
-                                    this.contentEle.innerHTML = this.content : this.contentEle.appendChild(this.content);
-                                this.setMaxHeight();
-                            }
-                            else {
-                                this.setContent();
-                            }
+        }
+        return null;
+    };
+    Dialog.prototype.focusContent = function () {
+        var element = this.getAutoFocusNode(this.element);
+        var node = !isNullOrUndefined(element) ? element : this.element;
+        node.focus();
+        this.bindEvent(this.element);
+    };
+    Dialog.prototype.bindEvent = function (element) {
+        EventHandler.add(element, 'keydown', this.keyDown, this);
+    };
+    Dialog.prototype.unBindEvent = function (element) {
+        EventHandler.remove(element, 'keydown', this.keyDown);
+    };
+    /**
+     * Module required function
+     * @private
+     */
+    Dialog.prototype.getModuleName = function () {
+        return 'dialog';
+    };
+    /**
+     * Called internally if any of the property value changed
+     * @private
+     */
+    Dialog.prototype.onPropertyChanged = function (newProp, oldProp) {
+        if (!this.element.classList.contains(ROOT)) {
+            return;
+        }
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'content':
+                    if (!isNullOrUndefined(this.content) && this.content !== '') {
+                        if (!isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {
+                            this.contentEle.innerHTML = '';
+                            typeof (this.content) === 'string' ?
+                                this.contentEle.innerHTML = this.content : this.contentEle.appendChild(this.content);
+                            this.setMaxHeight();
                         }
-                        else if (!ej2_base_4.isNullOrUndefined(this.contentEle)) {
-                            ej2_base_2.detach(this.contentEle);
-                            this.contentEle = null;
-                        }
-                        break;
-                    case 'header':
-                        if (this.header === '' || ej2_base_4.isNullOrUndefined(this.header)) {
-                            ej2_base_2.detach(this.headerEle);
-                        }
                         else {
-                            this.setHeader();
+                            this.setContent();
                         }
-                        break;
-                    case 'footerTemplate':
-                        if (this.footerTemplate === '' || ej2_base_4.isNullOrUndefined(this.footerTemplate)) {
-                            if (!this.ftrTemplateContent) {
-                                return;
-                            }
-                            ej2_base_2.detach(this.ftrTemplateContent);
-                            this.ftrTemplateContent = null;
-                            this.buttons = [{}];
+                    }
+                    else if (!isNullOrUndefined(this.contentEle)) {
+                        detach(this.contentEle);
+                        this.contentEle = null;
+                    }
+                    break;
+                case 'header':
+                    if (this.header === '' || isNullOrUndefined(this.header)) {
+                        if (this.headerEle) {
+                            detach(this.headerEle);
+                            this.headerEle = null;
                         }
-                        else {
-                            this.setFooterTemplate();
-                            this.buttons = [{}];
+                    }
+                    else {
+                        this.setHeader();
+                    }
+                    break;
+                case 'footerTemplate':
+                    if (this.footerTemplate === '' || isNullOrUndefined(this.footerTemplate)) {
+                        if (!this.ftrTemplateContent) {
+                            return;
                         }
-                        break;
-                    case 'showCloseIcon':
-                        if (this.element.getElementsByClassName(DLG_CLOSE_ICON).length > 0) {
-                            if (!this.showCloseIcon && (this.header === '' || ej2_base_4.isNullOrUndefined(this.header))) {
-                                ej2_base_2.detach(this.headerContent);
-                                this.headerContent = null;
-                            }
-                            else if (!this.showCloseIcon) {
-                                ej2_base_2.detach(this.closeIcon);
-                            }
+                        detach(this.ftrTemplateContent);
+                        this.ftrTemplateContent = null;
+                        this.buttons = [{}];
+                    }
+                    else {
+                        this.setFooterTemplate();
+                        this.buttons = [{}];
+                    }
+                    break;
+                case 'showCloseIcon':
+                    if (this.element.getElementsByClassName(DLG_CLOSE_ICON).length > 0) {
+                        if (!this.showCloseIcon && (this.header === '' || isNullOrUndefined(this.header))) {
+                            detach(this.headerContent);
+                            this.headerContent = null;
                         }
-                        else {
-                            this.renderCloseIcon();
-                            this.wireEvents();
+                        else if (!this.showCloseIcon) {
+                            detach(this.closeIcon);
                         }
-                        break;
-                    case 'locale':
-                        if (this.showCloseIcon) {
-                            this.closeIconTitle();
+                    }
+                    else {
+                        this.renderCloseIcon();
+                        this.wireEvents();
+                    }
+                    break;
+                case 'locale':
+                    if (this.showCloseIcon) {
+                        this.closeIconTitle();
+                    }
+                    break;
+                case 'visible':
+                    this.visible ? this.show() : this.hide();
+                    break;
+                case 'isModal':
+                    this.updateIsModal();
+                    break;
+                case 'height':
+                    setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });
+                    break;
+                case 'width':
+                    setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });
+                    break;
+                case 'zIndex':
+                    this.popupObj.zIndex = this.zIndex;
+                    if (this.isModal) {
+                        this.setOverlayZindex(this.zIndex);
+                    }
+                    break;
+                case 'cssClass':
+                    this.setCSSClass(oldProp.cssClass);
+                    break;
+                case 'buttons':
+                    if (!isNullOrUndefined(this.buttons[0].buttonModel)) {
+                        if (!isNullOrUndefined(this.ftrTemplateContent)) {
+                            detach(this.ftrTemplateContent);
+                            this.ftrTemplateContent = null;
                         }
-                        break;
-                    case 'visible':
-                        this.visible ? this.show() : this.hide();
-                        break;
-                    case 'isModal':
-                        this.updateIsModal();
-                        break;
-                    case 'height':
-                        ej2_base_2.setStyleAttribute(this.element, { 'height': ej2_base_4.formatUnit(newProp.height) });
-                        break;
-                    case 'width':
-                        ej2_base_2.setStyleAttribute(this.element, { 'width': ej2_base_4.formatUnit(newProp.width) });
-                        break;
-                    case 'zIndex':
-                        this.popupObj.zIndex = this.zIndex;
-                        if (this.isModal) {
-                            this.setOverlayZindex(this.zIndex);
+                        this.footerTemplate = '';
+                        this.setButton();
+                    }
+                    break;
+                case 'allowDragging':
+                    if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {
+                        this.setAllowDragging();
+                    }
+                    else {
+                        this.dragObj.destroy();
+                    }
+                    break;
+                case 'target':
+                    this.popupObj.relateTo = newProp.target;
+                    break;
+                case 'position':
+                    if (this.isModal) {
+                        var positionX = isNullOrUndefined(oldProp.position.X) ? this.position.X : oldProp.position.X;
+                        var positionY = isNullOrUndefined(oldProp.position.Y) ? this.position.Y : oldProp.position.Y;
+                        if (this.dlgContainer.classList.contains('e-dlg-' + positionX + '-' + positionY)) {
+                            this.dlgContainer.classList.remove('e-dlg-' + positionX + '-' + positionY);
                         }
-                        break;
-                    case 'cssClass':
-                        this.setCSSClass(oldProp.cssClass);
-                        break;
-                    case 'buttons':
-                        if (!ej2_base_4.isNullOrUndefined(this.buttons[0].buttonModel)) {
-                            if (!ej2_base_4.isNullOrUndefined(this.ftrTemplateContent)) {
-                                ej2_base_2.detach(this.ftrTemplateContent);
-                                this.ftrTemplateContent = null;
-                            }
-                            this.footerTemplate = '';
-                            this.setButton();
-                        }
-                        break;
-                    case 'allowDragging':
-                        if (this.allowDragging && (!this.isModal) && (!ej2_base_4.isNullOrUndefined(this.headerContent))) {
-                            this.setAllowDragging();
-                        }
-                        else {
-                            this.dragObj.destroy();
-                        }
-                        break;
-                    case 'target':
-                        this.popupObj.relateTo = newProp.target;
-                        break;
-                    case 'position':
-                        this.positionChange();
-                        break;
-                    case 'enableRtl':
-                        this.setEnableRTL();
-                        break;
-                }
+                    }
+                    this.positionChange();
+                    break;
+                case 'enableRtl':
+                    this.setEnableRTL();
+                    break;
             }
-        };
-        Dialog.prototype.updateIsModal = function () {
-            this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');
-            if (this.isModal) {
-                this.setIsModal();
-                this.element.style.top = '0px';
-                this.element.style.left = '0px';
-                if (!ej2_base_4.isNullOrUndefined(this.targetEle)) {
-                    this.targetEle.appendChild(this.dlgContainer);
-                }
+        }
+    };
+    Dialog.prototype.updateIsModal = function () {
+        this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');
+        if (this.isModal) {
+            this.setIsModal();
+            this.element.style.top = '0px';
+            this.element.style.left = '0px';
+            if (!isNullOrUndefined(this.targetEle)) {
+                this.targetEle.appendChild(this.dlgContainer);
             }
-            else {
-                ej2_base_2.removeClass([this.element], MODAL_DLG);
-                ej2_base_2.removeClass([document.body], SCROLL_DISABLED);
-                ej2_base_2.detach(this.dlgOverlay);
-                while (this.dlgContainer.firstChild) {
-                    this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);
-                }
-                this.dlgContainer.parentElement.removeChild(this.dlgContainer);
+        }
+        else {
+            removeClass([this.element], MODAL_DLG);
+            removeClass([document.body], SCROLL_DISABLED);
+            detach(this.dlgOverlay);
+            while (this.dlgContainer.firstChild) {
+                this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);
             }
-            if (this.visible) {
-                this.show();
+            this.dlgContainer.parentElement.removeChild(this.dlgContainer);
+        }
+        if (this.visible) {
+            this.show();
+        }
+        this.positionChange();
+    };
+    Dialog.prototype.setzIndex = function (zIndexElement, setPopupZindex) {
+        var prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.zIndex = getZindexPartial(zIndexElement);
+        this.isProtectedOnChange = prevOnChange;
+        if (setPopupZindex) {
+            this.popupObj.zIndex = this.zIndex;
+        }
+    };
+    /**
+     * Get the properties to be maintained in the persisted state.
+     * @private
+     */
+    Dialog.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    /**
+     * To destroy the widget
+     * @method destroy
+     * @return {void}
+     * @memberof dialog
+     */
+    Dialog.prototype.destroy = function () {
+        if (this.element.classList.contains(ROOT)) {
+            this.unWireEvents();
+            _super.prototype.destroy.call(this);
+            var classArray = [
+                ROOT, RTL, MODAL_DLG
+            ];
+            removeClass([this.element, this.element], classArray);
+            if (this.popupObj.element.classList.contains(POPUP_ROOT)) {
+                this.popupObj.destroy();
             }
-            this.positionChange();
-        };
-        /**
-         * Get the properties to be maintained in the persisted state.
-         * @private
-         */
-        Dialog.prototype.getPersistData = function () {
-            return this.addOnPersist([]);
-        };
-        /**
-         * To destroy the widget
-         * @method destroy
-         * @return {void}
-         * @memberof dialog
-         */
-        Dialog.prototype.destroy = function () {
-            if (this.element.classList.contains(ROOT)) {
-                this.unWireEvents();
-                _super.prototype.destroy.call(this);
-                var classArray = [
-                    ROOT, RTL, MODAL_DLG
-                ];
-                ej2_base_2.removeClass([this.element, this.element], classArray);
-                if (this.popupObj.element.classList.contains(POPUP_ROOT)) {
-                    this.popupObj.destroy();
+            /* istanbul ignore next */
+            if (!isNullOrUndefined(this.btnObj)) {
+                for (var i = void 0; i < this.btnObj.length; i++) {
+                    this.btnObj[i].destroy();
                 }
-                /* istanbul ignore next */
-                if (!ej2_base_4.isNullOrUndefined(this.btnObj)) {
-                    for (var i = void 0; i < this.btnObj.length; i++) {
-                        this.btnObj[i].destroy();
-                    }
-                }
-                if (this.isModal) {
-                    ej2_base_2.detach(this.dlgOverlay);
-                    this.dlgContainer.parentNode.insertBefore(this.element, this.dlgContainer);
-                    ej2_base_2.detach(this.dlgContainer);
-                }
-                this.element.innerHTML = '';
-                while (this.element.attributes.length > 0) {
-                    this.element.removeAttribute(this.element.attributes[0].name);
-                }
-                for (var k = 0; k < this.clonedEle.attributes.length; k++) {
-                    this.element.setAttribute(this.clonedEle.attributes[k].name, this.clonedEle.attributes[k].value);
-                }
             }
-        };
-        /**
-         * Binding event to the element while widget creation
-         * @hidden
-         */
-        Dialog.prototype.wireEvents = function () {
-            if (this.showCloseIcon) {
-                ej2_base_5.EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);
-            }
             if (this.isModal) {
-                ej2_base_5.EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);
+                detach(this.dlgOverlay);
+                this.dlgContainer.parentNode.insertBefore(this.element, this.dlgContainer);
+                detach(this.dlgContainer);
             }
-        };
-        /**
-         * Unbinding event to the element while widget destroy
-         * @hidden
-         */
-        Dialog.prototype.unWireEvents = function () {
-            if (this.showCloseIcon) {
-                ej2_base_5.EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);
+            this.element.innerHTML = '';
+            while (this.element.attributes.length > 0) {
+                this.element.removeAttribute(this.element.attributes[0].name);
             }
-            if (this.isModal) {
-                ej2_base_5.EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);
+            for (var k = 0; k < this.clonedEle.attributes.length; k++) {
+                this.element.setAttribute(this.clonedEle.attributes[k].name, this.clonedEle.attributes[k].value);
             }
-            if (!ej2_base_4.isNullOrUndefined(this.buttons[0].buttonModel)) {
-                for (var i = 0; i < this.buttons.length; i++) {
-                    if (typeof (this.buttons[i].click) === 'function') {
-                        ej2_base_5.EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);
-                    }
+        }
+    };
+    /**
+     * Binding event to the element while widget creation
+     * @hidden
+     */
+    Dialog.prototype.wireEvents = function () {
+        if (this.showCloseIcon) {
+            EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);
+        }
+        if (this.isModal) {
+            EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);
+        }
+    };
+    /**
+     * Unbinding event to the element while widget destroy
+     * @hidden
+     */
+    Dialog.prototype.unWireEvents = function () {
+        if (this.showCloseIcon) {
+            EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);
+        }
+        if (this.isModal) {
+            EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);
+        }
+        if (!isNullOrUndefined(this.buttons[0].buttonModel)) {
+            for (var i = 0; i < this.buttons.length; i++) {
+                if (typeof (this.buttons[i].click) === 'function') {
+                    EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);
                 }
             }
-        };
-        /**
-         * Refreshes the dialog's position when the user changes its header and footer height/width dynamically.
-         * @return {void}
-         */
-        Dialog.prototype.refreshPosition = function () {
-            this.popupObj.refreshPosition();
-        };
-        /**
-         * Opens the dialog if it is in hidden state.
-         * To open the dialog with full screen width, set the parameter to true.
-         * @param { boolean } isFullScreen - Enable the fullScreen Dialog.
-         * @return {void}
-         */
-        Dialog.prototype.show = function (isFullScreen) {
-            if (!this.element.classList.contains(ROOT)) {
-                return;
+        }
+    };
+    /**
+     * Refreshes the dialog's position when the user changes its header and footer height/width dynamically.
+     * @return {void}
+     */
+    Dialog.prototype.refreshPosition = function () {
+        this.popupObj.refreshPosition();
+    };
+    /**
+     * Opens the dialog if it is in hidden state.
+     * To open the dialog with full screen width, set the parameter to true.
+     * @param { boolean } isFullScreen - Enable the fullScreen Dialog.
+     * @return {void}
+     */
+    Dialog.prototype.show = function (isFullScreen) {
+        if (!this.element.classList.contains(ROOT)) {
+            return;
+        }
+        if (!this.element.classList.contains(DLG_SHOW) || (!isNullOrUndefined(isFullScreen))) {
+            if (!isNullOrUndefined(isFullScreen)) {
+                this.fullScreen(isFullScreen);
             }
-            if (!this.element.classList.contains(DLG_SHOW) || (!ej2_base_4.isNullOrUndefined(isFullScreen))) {
-                if (!ej2_base_4.isNullOrUndefined(isFullScreen)) {
-                    this.fullScreen(isFullScreen);
-                }
-                var eventArgs = {
-                    cancel: false,
-                    element: this.element,
-                    container: this.isModal ? this.dlgContainer : this.element,
-                    target: this.target
-                };
-                this.trigger('beforeOpen', eventArgs);
-                if (eventArgs.cancel) {
-                    return;
-                }
-                this.storeActiveElement = document.activeElement;
-                this.element.tabIndex = -1;
-                if (this.isModal && (!ej2_base_4.isNullOrUndefined(this.dlgOverlay))) {
-                    this.dlgOverlay.style.display = 'block';
-                    this.dlgContainer.style.display = 'flex';
-                    if (!ej2_base_4.isNullOrUndefined(this.targetEle)) {
-                        if (this.targetEle === document.body) {
-                            this.dlgContainer.style.position = 'fixed';
-                        }
-                        else {
-                            this.dlgContainer.style.position = 'absolute';
-                        }
-                        this.dlgOverlay.style.position = 'absolute';
-                        this.element.style.position = 'relative';
-                        ej2_base_2.addClass([this.targetEle], SCROLL_DISABLED);
-                    }
-                    else {
-                        ej2_base_2.addClass([document.body], SCROLL_DISABLED);
-                    }
-                }
-                var openAnimation = {
-                    name: this.animationSettings.effect + 'In',
-                    duration: this.animationSettings.duration,
-                    delay: this.animationSettings.delay
-                };
-                this.animationSettings.effect === 'None' ? this.popupObj.show() : this.popupObj.show(openAnimation);
-                this.dialogOpen = true;
-                var prevOnChange = this.isProtectedOnChange;
-                this.isProtectedOnChange = true;
-                this.visible = true;
-                this.isProtectedOnChange = prevOnChange;
-            }
-        };
-        /**
-         * Closes the dialog if it is in visible state.
-         * @return {void}
-         */
-        Dialog.prototype.hide = function (event) {
-            if (!this.element.classList.contains(ROOT)) {
-                return;
-            }
             var eventArgs = {
                 cancel: false,
-                isInteraction: event ? true : false,
                 element: this.element,
-                target: this.target,
                 container: this.isModal ? this.dlgContainer : this.element,
-                event: event
+                target: this.target
             };
-            this.trigger('beforeClose', eventArgs);
-            this.closeArgs = eventArgs;
+            this.trigger('beforeOpen', eventArgs);
             if (eventArgs.cancel) {
                 return;
             }
-            if (this.isModal) {
-                this.dlgOverlay.style.display = 'none';
-                !ej2_base_4.isNullOrUndefined(this.targetEle) ? ej2_base_2.removeClass([this.targetEle], SCROLL_DISABLED) :
-                    ej2_base_2.removeClass([document.body], SCROLL_DISABLED);
+            this.storeActiveElement = document.activeElement;
+            this.element.tabIndex = -1;
+            if (this.isModal && (!isNullOrUndefined(this.dlgOverlay))) {
+                this.dlgOverlay.style.display = 'block';
+                this.dlgContainer.style.display = 'flex';
+                if (!isNullOrUndefined(this.targetEle)) {
+                    if (this.targetEle === document.body) {
+                        this.dlgContainer.style.position = 'fixed';
+                    }
+                    else {
+                        this.dlgContainer.style.position = 'absolute';
+                    }
+                    this.dlgOverlay.style.position = 'absolute';
+                    this.element.style.position = 'relative';
+                    addClass([this.targetEle], SCROLL_DISABLED);
+                }
+                else {
+                    addClass([document.body], SCROLL_DISABLED);
+                }
             }
-            var closeAnimation = {
-                name: this.animationSettings.effect + 'Out',
+            var openAnimation = {
+                name: this.animationSettings.effect + 'In',
                 duration: this.animationSettings.duration,
                 delay: this.animationSettings.delay
             };
-            this.animationSettings.effect === 'None' ? this.popupObj.hide() : this.popupObj.hide(closeAnimation);
-            this.dialogOpen = false;
+            var zIndexElement = (this.isModal) ? this.element.parentElement : this.element;
+            if (this.calculatezIndex) {
+                this.setzIndex(zIndexElement, true);
+                setStyleAttribute(this.element, { 'zIndex': this.zIndex });
+                if (this.isModal) {
+                    this.setOverlayZindex(this.zIndex);
+                }
+            }
+            this.animationSettings.effect === 'None' ? this.popupObj.show() : this.popupObj.show(openAnimation);
+            this.dialogOpen = true;
             var prevOnChange = this.isProtectedOnChange;
             this.isProtectedOnChange = true;
-            this.visible = false;
+            this.visible = true;
             this.isProtectedOnChange = prevOnChange;
+        }
+    };
+    /**
+     * Closes the dialog if it is in visible state.
+     * @return {void}
+     */
+    Dialog.prototype.hide = function (event) {
+        if (!this.element.classList.contains(ROOT)) {
+            return;
+        }
+        var eventArgs = {
+            cancel: false,
+            isInteraction: event ? true : false,
+            element: this.element,
+            target: this.target,
+            container: this.isModal ? this.dlgContainer : this.element,
+            event: event
         };
-        /**
-         * Specifies to view the Full screen Dialog.
-         * @private
-         */
-        Dialog.prototype.fullScreen = function (args) {
-            var top = this.element.offsetTop;
-            var left = this.element.offsetLeft;
-            if (args) {
-                ej2_base_2.addClass([this.element], FULLSCREEN);
-                var display = this.element.style.display;
-                this.element.style.display = 'none';
-                this.element.style.maxHeight = (!ej2_base_4.isNullOrUndefined(this.target)) ?
-                    (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';
-                this.element.style.display = display;
-                ej2_base_2.addClass([document.body], SCROLL_DISABLED);
-                if (this.allowDragging && !ej2_base_4.isNullOrUndefined(this.dragObj)) {
-                    this.dragObj.destroy();
-                }
+        this.trigger('beforeClose', eventArgs);
+        this.closeArgs = eventArgs;
+        if (eventArgs.cancel) {
+            return;
+        }
+        if (this.isModal) {
+            this.dlgOverlay.style.display = 'none';
+            !isNullOrUndefined(this.targetEle) ? removeClass([this.targetEle], SCROLL_DISABLED) :
+                removeClass([document.body], SCROLL_DISABLED);
+        }
+        var closeAnimation = {
+            name: this.animationSettings.effect + 'Out',
+            duration: this.animationSettings.duration,
+            delay: this.animationSettings.delay
+        };
+        this.animationSettings.effect === 'None' ? this.popupObj.hide() : this.popupObj.hide(closeAnimation);
+        this.dialogOpen = false;
+        var prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.visible = false;
+        this.isProtectedOnChange = prevOnChange;
+    };
+    /**
+     * Specifies to view the Full screen Dialog.
+     * @private
+     */
+    Dialog.prototype.fullScreen = function (args) {
+        var top = this.element.offsetTop;
+        var left = this.element.offsetLeft;
+        if (args) {
+            addClass([this.element], FULLSCREEN);
+            var display = this.element.style.display;
+            this.element.style.display = 'none';
+            this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?
+                (this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';
+            this.element.style.display = display;
+            addClass([document.body], SCROLL_DISABLED);
+            if (this.allowDragging && !isNullOrUndefined(this.dragObj)) {
+                this.dragObj.destroy();
             }
-            else {
-                ej2_base_2.removeClass([this.element], FULLSCREEN);
-                ej2_base_2.removeClass([document.body], SCROLL_DISABLED);
-                if (this.allowDragging && (!this.isModal) && (!ej2_base_4.isNullOrUndefined(this.headerContent))) {
-                    this.setAllowDragging();
-                }
+        }
+        else {
+            removeClass([this.element], FULLSCREEN);
+            removeClass([document.body], SCROLL_DISABLED);
+            if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {
+                this.setAllowDragging();
             }
-            return args;
-        };
-        __decorate([
-            ej2_base_1.Property('')
-        ], Dialog.prototype, "content", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Dialog.prototype, "showCloseIcon", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Dialog.prototype, "isModal", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Dialog.prototype, "header", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Dialog.prototype, "visible", void 0);
-        __decorate([
-            ej2_base_1.Property('auto')
-        ], Dialog.prototype, "height", void 0);
-        __decorate([
-            ej2_base_1.Property('100%')
-        ], Dialog.prototype, "width", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Dialog.prototype, "cssClass", void 0);
-        __decorate([
-            ej2_base_1.Property(1000)
-        ], Dialog.prototype, "zIndex", void 0);
-        __decorate([
-            ej2_base_1.Property(null)
-        ], Dialog.prototype, "target", void 0);
-        __decorate([
-            ej2_base_1.Property('')
-        ], Dialog.prototype, "footerTemplate", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Dialog.prototype, "allowDragging", void 0);
-        __decorate([
-            ej2_base_1.Collection([{}], ButtonProps)
-        ], Dialog.prototype, "buttons", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Dialog.prototype, "closeOnEscape", void 0);
-        __decorate([
-            ej2_base_1.Complex({}, AnimationSettings)
-        ], Dialog.prototype, "animationSettings", void 0);
-        __decorate([
-            ej2_base_1.Complex({ X: 'center', Y: 'center' }, popup_1.PositionData)
-        ], Dialog.prototype, "position", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Dialog.prototype, "created", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Dialog.prototype, "open", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Dialog.prototype, "beforeOpen", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Dialog.prototype, "close", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Dialog.prototype, "beforeClose", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Dialog.prototype, "dragStart", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Dialog.prototype, "dragStop", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Dialog.prototype, "drag", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Dialog.prototype, "overlayClick", void 0);
-        Dialog = __decorate([
-            ej2_base_3.NotifyPropertyChanges
-        ], Dialog);
-        return Dialog;
-    }(ej2_base_1.Component));
-    exports.Dialog = Dialog;
-});
+        }
+        return args;
+    };
+    __decorate([
+        Property('')
+    ], Dialog.prototype, "content", void 0);
+    __decorate([
+        Property(false)
+    ], Dialog.prototype, "showCloseIcon", void 0);
+    __decorate([
+        Property(false)
+    ], Dialog.prototype, "isModal", void 0);
+    __decorate([
+        Property('')
+    ], Dialog.prototype, "header", void 0);
+    __decorate([
+        Property(true)
+    ], Dialog.prototype, "visible", void 0);
+    __decorate([
+        Property('auto')
+    ], Dialog.prototype, "height", void 0);
+    __decorate([
+        Property('100%')
+    ], Dialog.prototype, "width", void 0);
+    __decorate([
+        Property('')
+    ], Dialog.prototype, "cssClass", void 0);
+    __decorate([
+        Property(1000)
+    ], Dialog.prototype, "zIndex", void 0);
+    __decorate([
+        Property(null)
+    ], Dialog.prototype, "target", void 0);
+    __decorate([
+        Property('')
+    ], Dialog.prototype, "footerTemplate", void 0);
+    __decorate([
+        Property(false)
+    ], Dialog.prototype, "allowDragging", void 0);
+    __decorate([
+        Collection([{}], ButtonProps)
+    ], Dialog.prototype, "buttons", void 0);
+    __decorate([
+        Property(true)
+    ], Dialog.prototype, "closeOnEscape", void 0);
+    __decorate([
+        Complex({}, AnimationSettings)
+    ], Dialog.prototype, "animationSettings", void 0);
+    __decorate([
+        Complex({ X: 'center', Y: 'center' }, PositionData)
+    ], Dialog.prototype, "position", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "open", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "beforeOpen", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "close", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "beforeClose", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "dragStart", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "dragStop", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "drag", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "overlayClick", void 0);
+    Dialog = __decorate([
+        NotifyPropertyChanges
+    ], Dialog);
+    return Dialog;
+}(Component));
+export { Dialog };

src/dialog/index.js

@@ -1,11 +0,4 @@
-define(["require", "exports", "./dialog"], function (require, exports, dialog_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Dialog Component
-     */
-    __export(dialog_1);
-});
+/**
+ * Dialog Component
+ */
+export * from './dialog';

src/index.js

@@ -1,15 +0,8 @@
-define(["require", "exports", "./popup/index", "./common/index", "./dialog/index", "./tooltip/index", "./spinner/index"], function (require, exports, index_1, index_2, index_3, index_4, index_5) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Popup Components
-     */
-    __export(index_1);
-    __export(index_2);
-    __export(index_3);
-    __export(index_4);
-    __export(index_5);
-});
+/**
+ * Popup Components
+ */
+export * from './popup/index';
+export * from './common/index';
+export * from './dialog/index';
+export * from './tooltip/index';
+export * from './spinner/index';

src/popup/index.js

@@ -1,11 +0,4 @@
-define(["require", "exports", "./popup"], function (require, exports, popup_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Popup Components
-     */
-    __export(popup_1);
-});
+/**
+ * Popup Components
+ */
+export * from './popup';

src/popup/popup.d.ts

@@ -213,4 +213,5 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * @param { Function } collision? - To pass the collision function.
+     * @param { HTMLElement } relativeElement? - To calculate the zIndex value dynamically.
      */
-    show(animationOptions?: AnimationModel): void;
+    show(animationOptions?: AnimationModel, relativeElement?: HTMLElement): void;
     /**
@@ -217,0 +218,0 @@ * Hides the popup element from screen.

src/popup/popup.js

@@ -17,638 +17,653 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../common/position", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../common/collision"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, position_1, ej2_base_4, ej2_base_5, ej2_base_6, collision_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
+import { setStyleAttribute, addClass, removeClass, ChildProperty, Complex } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';
+import { Browser } from '@syncfusion/ej2-base';
+import { calculatePosition, calculateRelativeBasedPosition } from '../common/position';
+import { Animation, Property, Event, Component } from '@syncfusion/ej2-base';
+import { NotifyPropertyChanges } from '@syncfusion/ej2-base';
+import { EventHandler } from '@syncfusion/ej2-base';
+import { flip, fit, isCollide } from '../common/collision';
+/**
+ * Specifies the offset position values.
+ */
+var PositionData = /** @class */ (function (_super) {
+    __extends(PositionData, _super);
+    function PositionData() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('left')
+    ], PositionData.prototype, "X", void 0);
+    __decorate([
+        Property('top')
+    ], PositionData.prototype, "Y", void 0);
+    return PositionData;
+}(ChildProperty));
+export { PositionData };
+// don't use space in classNames
+var CLASSNAMES = {
+    ROOT: 'e-popup',
+    RTL: 'e-rtl',
+    OPEN: 'e-popup-open',
+    CLOSE: 'e-popup-close'
+};
+/**
+ * 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>
+ * ```
+ */
+var Popup = /** @class */ (function (_super) {
+    __extends(Popup, _super);
+    function Popup(element, options) {
+        var _this = _super.call(this, options, element) || this;
+        _this.fixedParent = false;
+        return _this;
+    }
     /**
-     * Specifies the offset position values.
+     * Called internally if any of the property value changed.
+     * @private
      */
-    var PositionData = /** @class */ (function (_super) {
-        __extends(PositionData, _super);
-        function PositionData() {
-            return _super !== null && _super.apply(this, arguments) || this;
+    Popup.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'width':
+                    setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });
+                    break;
+                case 'height':
+                    setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });
+                    break;
+                case 'zIndex':
+                    setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });
+                    break;
+                case 'enableRtl':
+                    this.setEnableRtl();
+                    break;
+                case 'position':
+                case 'relateTo':
+                    this.refreshPosition();
+                    break;
+                case 'offsetX':
+                    var x = newProp.offsetX - oldProp.offsetX;
+                    this.element.style.left = (parseInt(this.element.style.left, 10) + (x)).toString() + 'px';
+                    break;
+                case 'offsetY':
+                    var y = newProp.offsetY - oldProp.offsetY;
+                    this.element.style.top = (parseInt(this.element.style.top, 10) + (y)).toString() + 'px';
+                    break;
+                case 'content':
+                    this.setContent();
+                    break;
+                case 'actionOnScroll':
+                    if (newProp.actionOnScroll !== 'none') {
+                        this.wireScrollEvents();
+                    }
+                    else {
+                        this.unwireScrollEvents();
+                    }
+                    break;
+            }
         }
-        __decorate([
-            ej2_base_4.Property('left')
-        ], PositionData.prototype, "X", void 0);
-        __decorate([
-            ej2_base_4.Property('top')
-        ], PositionData.prototype, "Y", void 0);
-        return PositionData;
-    }(ej2_base_1.ChildProperty));
-    exports.PositionData = PositionData;
-    // don't use space in classNames
-    var CLASSNAMES = {
-        ROOT: 'e-popup',
-        RTL: 'e-rtl',
-        OPEN: 'e-popup-open',
-        CLOSE: 'e-popup-close'
     };
     /**
-     * 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>
-     * ```
+     * gets the Component module name.
+     * @private
      */
-    var Popup = /** @class */ (function (_super) {
-        __extends(Popup, _super);
-        function Popup(element, options) {
-            var _this = _super.call(this, options, element) || this;
-            _this.fixedParent = false;
-            return _this;
+    Popup.prototype.getModuleName = function () {
+        return 'popup';
+    };
+    /**
+     * gets the persisted state properties of the Component.
+     */
+    Popup.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    /**
+     * To destroy the control.
+     */
+    Popup.prototype.destroy = function () {
+        this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL);
+        this.unwireEvents();
+        _super.prototype.destroy.call(this);
+    };
+    /**
+     * To Initialize the control rendering
+     * @private
+     */
+    Popup.prototype.render = function () {
+        this.element.classList.add(CLASSNAMES.ROOT);
+        var styles = {};
+        if (this.zIndex !== 1000) {
+            styles.zIndex = this.zIndex;
         }
-        /**
-         * Called internally if any of the property value changed.
-         * @private
-         */
-        Popup.prototype.onPropertyChanged = function (newProp, oldProp) {
-            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                switch (prop) {
-                    case 'width':
-                        ej2_base_1.setStyleAttribute(this.element, { 'width': ej2_base_2.formatUnit(newProp.width) });
-                        break;
-                    case 'height':
-                        ej2_base_1.setStyleAttribute(this.element, { 'height': ej2_base_2.formatUnit(newProp.height) });
-                        break;
-                    case 'zIndex':
-                        ej2_base_1.setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });
-                        break;
-                    case 'enableRtl':
-                        this.setEnableRtl();
-                        break;
-                    case 'position':
-                    case 'relateTo':
-                        this.refreshPosition();
-                        break;
-                    case 'offsetX':
-                        var x = newProp.offsetX - oldProp.offsetX;
-                        this.element.style.left = (parseInt(this.element.style.left, 10) + (x)).toString() + 'px';
-                        break;
-                    case 'offsetY':
-                        var y = newProp.offsetY - oldProp.offsetY;
-                        this.element.style.top = (parseInt(this.element.style.top, 10) + (y)).toString() + 'px';
-                        break;
-                    case 'content':
-                        this.setContent();
-                        break;
-                    case 'actionOnScroll':
-                        if (newProp.actionOnScroll !== 'none') {
-                            this.wireScrollEvents();
-                        }
-                        else {
-                            this.unwireScrollEvents();
-                        }
-                        break;
-                }
+        if (this.width !== 'auto') {
+            styles.width = formatUnit(this.width);
+        }
+        if (this.height !== 'auto') {
+            styles.height = formatUnit(this.height);
+        }
+        setStyleAttribute(this.element, styles);
+        this.setEnableRtl();
+        this.setContent();
+        this.wireEvents();
+    };
+    Popup.prototype.wireEvents = function () {
+        if (Browser.isDevice) {
+            EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);
+        }
+        if (this.actionOnScroll !== 'none') {
+            this.wireScrollEvents();
+        }
+    };
+    Popup.prototype.wireScrollEvents = function () {
+        if (this.getRelateToElement()) {
+            for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {
+                var parent_1 = _a[_i];
+                EventHandler.add(parent_1, 'scroll', this.scrollRefresh, this);
             }
-        };
-        /**
-         * gets the Component module name.
-         * @private
-         */
-        Popup.prototype.getModuleName = function () {
-            return 'popup';
-        };
-        /**
-         * gets the persisted state properties of the Component.
-         */
-        Popup.prototype.getPersistData = function () {
-            return this.addOnPersist([]);
-        };
-        /**
-         * To destroy the control.
-         */
-        Popup.prototype.destroy = function () {
-            this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL);
-            this.unwireEvents();
-            _super.prototype.destroy.call(this);
-        };
-        /**
-         * To Initialize the control rendering
-         * @private
-         */
-        Popup.prototype.render = function () {
-            this.element.classList.add(CLASSNAMES.ROOT);
-            var styles = {};
-            if (this.zIndex !== 1000) {
-                styles.zIndex = this.zIndex;
+        }
+    };
+    Popup.prototype.unwireEvents = function () {
+        if (Browser.isDevice) {
+            EventHandler.remove(window, 'orientationchange', this.orientationOnChange);
+        }
+        if (this.actionOnScroll !== 'none') {
+            this.unwireScrollEvents();
+        }
+    };
+    Popup.prototype.unwireScrollEvents = function () {
+        if (this.getRelateToElement()) {
+            for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {
+                var parent_2 = _a[_i];
+                EventHandler.remove(parent_2, 'scroll', this.scrollRefresh);
             }
-            if (this.width !== 'auto') {
-                styles.width = ej2_base_2.formatUnit(this.width);
+        }
+    };
+    Popup.prototype.getRelateToElement = function () {
+        var relateToElement = this.relateTo === '' || isNullOrUndefined(this.relateTo) ?
+            document.body : this.relateTo;
+        this.setProperties({ relateTo: relateToElement }, true);
+        return ((typeof this.relateTo) === 'string') ?
+            document.querySelector(this.relateTo) : this.relateTo;
+    };
+    Popup.prototype.scrollRefresh = function (e) {
+        if (this.actionOnScroll === 'reposition') {
+            if (!(this.element.offsetParent === e.target ||
+                (this.element.offsetParent && this.element.offsetParent.tagName === 'BODY' &&
+                    e.target.parentElement == null))) {
+                this.refreshPosition();
             }
-            if (this.height !== 'auto') {
-                styles.height = ej2_base_2.formatUnit(this.height);
-            }
-            ej2_base_1.setStyleAttribute(this.element, styles);
-            this.setEnableRtl();
-            this.setContent();
-            this.wireEvents();
-        };
-        Popup.prototype.wireEvents = function () {
-            if (ej2_base_3.Browser.isDevice) {
-                ej2_base_6.EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);
-            }
-            if (this.actionOnScroll !== 'none') {
-                this.wireScrollEvents();
-            }
-        };
-        Popup.prototype.wireScrollEvents = function () {
+        }
+        else if (this.actionOnScroll === 'hide') {
+            this.hide();
+        }
+        if (this.actionOnScroll !== 'none') {
             if (this.getRelateToElement()) {
-                for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {
-                    var parent_1 = _a[_i];
-                    ej2_base_6.EventHandler.add(parent_1, 'scroll', this.scrollRefresh, this);
+                var targetVisible = this.isElementOnViewport(this.getRelateToElement(), e.target);
+                if (!targetVisible && !this.targetInvisibleStatus) {
+                    this.trigger('targetExitViewport');
+                    this.targetInvisibleStatus = true;
                 }
+                else if (targetVisible) {
+                    this.targetInvisibleStatus = false;
+                }
             }
-        };
-        Popup.prototype.unwireEvents = function () {
-            if (ej2_base_3.Browser.isDevice) {
-                ej2_base_6.EventHandler.remove(window, 'orientationchange', this.orientationOnChange);
+        }
+    };
+    /**
+     * This method is to get the element visibility on viewport when scroll
+     * the page. This method will returns true even though 1 px of element
+     * part is in visible.
+     */
+    Popup.prototype.isElementOnViewport = function (relateToElement, scrollElement) {
+        var scrollParents = this.getScrollableParent(relateToElement);
+        for (var parent_3 = 0; parent_3 < scrollParents.length; parent_3++) {
+            if (this.isElementVisible(relateToElement, scrollParents[parent_3])) {
+                continue;
             }
-            if (this.actionOnScroll !== 'none') {
-                this.unwireScrollEvents();
+            else {
+                return false;
             }
-        };
-        Popup.prototype.unwireScrollEvents = function () {
-            if (this.getRelateToElement()) {
-                for (var _i = 0, _a = this.getScrollableParent(this.getRelateToElement()); _i < _a.length; _i++) {
-                    var parent_2 = _a[_i];
-                    ej2_base_6.EventHandler.remove(parent_2, 'scroll', this.scrollRefresh);
-                }
+        }
+        return true;
+    };
+    Popup.prototype.isElementVisible = function (relateToElement, scrollElement) {
+        var rect = relateToElement.getBoundingClientRect();
+        if (!rect.height || !rect.width) {
+            return false;
+        }
+        if (scrollElement.getBoundingClientRect) {
+            var parent_4 = scrollElement.getBoundingClientRect();
+            return !(rect.bottom < parent_4.top) &&
+                (!(rect.bottom > parent_4.bottom) &&
+                    (!(rect.right > parent_4.right) &&
+                        !(rect.left < parent_4.left)));
+        }
+        else {
+            var win = window;
+            var windowView = {
+                top: win.scrollY,
+                left: win.scrollX,
+                right: win.scrollX + win.outerWidth,
+                bottom: win.scrollY + win.outerHeight
+            };
+            var off = calculatePosition(relateToElement);
+            var ele = {
+                top: off.top,
+                left: off.left,
+                right: off.left + rect.width,
+                bottom: off.top + rect.height
+            };
+            var elementView = {
+                top: windowView.bottom - ele.top,
+                left: windowView.right - ele.left,
+                bottom: ele.bottom - windowView.top,
+                right: ele.right - windowView.left
+            };
+            return elementView.top > 0
+                && elementView.left > 0
+                && elementView.right > 0
+                && elementView.bottom > 0;
+        }
+    };
+    /**
+     * Initialize the event handler
+     * @private
+     */
+    Popup.prototype.preRender = function () {
+        //There is no event handler
+    };
+    Popup.prototype.setEnableRtl = function () {
+        this.reposition();
+        this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);
+    };
+    Popup.prototype.setContent = function () {
+        if (!isNullOrUndefined(this.content)) {
+            this.element.innerHTML = '';
+            if (typeof (this.content) === 'string') {
+                this.element.textContent = this.content;
             }
-        };
-        Popup.prototype.getRelateToElement = function () {
-            var relateToElement = this.relateTo === '' || ej2_base_2.isNullOrUndefined(this.relateTo) ?
-                document.body : this.relateTo;
-            this.setProperties({ relateTo: relateToElement }, true);
-            return ((typeof this.relateTo) === 'string') ?
-                document.querySelector(this.relateTo) : this.relateTo;
-        };
-        Popup.prototype.scrollRefresh = function (e) {
-            if (this.actionOnScroll === 'reposition') {
-                if (!(this.element.offsetParent === e.target ||
-                    (this.element.offsetParent && this.element.offsetParent.tagName === 'BODY' &&
-                        e.target.parentElement == null))) {
-                    this.refreshPosition();
-                }
+            else {
+                this.element.appendChild(this.content);
             }
-            else if (this.actionOnScroll === 'hide') {
-                this.hide();
-            }
-            if (this.actionOnScroll !== 'none') {
-                if (this.getRelateToElement()) {
-                    var targetVisible = this.isElementOnViewport(this.getRelateToElement(), e.target);
-                    if (!targetVisible && !this.targetInvisibleStatus) {
-                        this.trigger('targetExitViewport');
-                        this.targetInvisibleStatus = true;
-                    }
-                    else if (targetVisible) {
-                        this.targetInvisibleStatus = false;
-                    }
+        }
+    };
+    Popup.prototype.orientationOnChange = function () {
+        var _this = this;
+        setTimeout(function () {
+            _this.refreshPosition();
+        }, 200);
+    };
+    /**
+     * Based on the `relative` element and `offset` values, `Popup` element position will refreshed.
+     */
+    Popup.prototype.refreshPosition = function (target) {
+        if (!isNullOrUndefined(target)) {
+            this.checkFixedParent(target);
+        }
+        this.reposition();
+        this.checkCollision();
+    };
+    Popup.prototype.reposition = function () {
+        var pos;
+        var relateToElement = this.getRelateToElement();
+        if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {
+            pos = { left: this.position.X, top: this.position.Y };
+        }
+        else if (relateToElement) {
+            var display = this.element.style.display;
+            this.element.style.display = 'block';
+            pos = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);
+            this.element.style.display = display;
+        }
+        else {
+            pos = { left: 0, top: 0 };
+        }
+        this.element.style.left = pos.left + 'px';
+        this.element.style.top = pos.top + 'px';
+    };
+    Popup.prototype.getAnchorPosition = function (anchorEle, ele, position, offsetX, offsetY) {
+        var eleRect = ele.getBoundingClientRect();
+        var anchorRect = anchorEle.getBoundingClientRect();
+        var anchor = anchorEle;
+        var anchorPos = { left: 0, top: 0 };
+        if (ele.offsetParent && ele.offsetParent.tagName === 'BODY' && anchorEle.tagName === 'BODY') {
+            anchorPos = calculatePosition(anchorEle);
+        }
+        else {
+            anchorPos = calculateRelativeBasedPosition(anchor, ele);
+        }
+        switch (position.X) {
+            default:
+            case 'left':
+                break;
+            case 'center':
+                if (this.targetType === 'container') {
+                    anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);
                 }
-            }
-        };
-        /**
-         * This method is to get the element visibility on viewport when scroll
-         * the page. This method will returns true even though 1 px of element
-         * part is in visible.
-         */
-        Popup.prototype.isElementOnViewport = function (relateToElement, scrollElement) {
-            var scrollParents = this.getScrollableParent(relateToElement);
-            for (var parent_3 = 0; parent_3 < scrollParents.length; parent_3++) {
-                if (this.isElementVisible(relateToElement, scrollParents[parent_3])) {
-                    continue;
+                else {
+                    anchorPos.left += (anchorRect.width / 2);
                 }
+                break;
+            case 'right':
+                if (this.targetType === 'container') {
+                    anchorPos.left += (anchorRect.width - eleRect.width);
+                }
                 else {
-                    return false;
+                    anchorPos.left += (anchorRect.width);
                 }
-            }
-            return true;
-        };
-        Popup.prototype.isElementVisible = function (relateToElement, scrollElement) {
-            var rect = relateToElement.getBoundingClientRect();
-            if (!rect.height || !rect.width) {
-                return false;
-            }
-            if (scrollElement.getBoundingClientRect) {
-                var parent_4 = scrollElement.getBoundingClientRect();
-                return !(rect.bottom < parent_4.top) &&
-                    (!(rect.bottom > parent_4.bottom) &&
-                        (!(rect.right > parent_4.right) &&
-                            !(rect.left < parent_4.left)));
-            }
-            else {
-                var win = window;
-                var windowView = {
-                    top: win.scrollY,
-                    left: win.scrollX,
-                    right: win.scrollX + win.outerWidth,
-                    bottom: win.scrollY + win.outerHeight
-                };
-                var off = position_1.calculatePosition(relateToElement);
-                var ele = {
-                    top: off.top,
-                    left: off.left,
-                    right: off.left + rect.width,
-                    bottom: off.top + rect.height
-                };
-                var elementView = {
-                    top: windowView.bottom - ele.top,
-                    left: windowView.right - ele.left,
-                    bottom: ele.bottom - windowView.top,
-                    right: ele.right - windowView.left
-                };
-                return elementView.top > 0
-                    && elementView.left > 0
-                    && elementView.right > 0
-                    && elementView.bottom > 0;
-            }
-        };
-        /**
-         * Initialize the event handler
-         * @private
-         */
-        Popup.prototype.preRender = function () {
-            //There is no event handler
-        };
-        Popup.prototype.setEnableRtl = function () {
-            this.reposition();
-            this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);
-        };
-        Popup.prototype.setContent = function () {
-            if (!ej2_base_2.isNullOrUndefined(this.content)) {
-                this.element.innerHTML = '';
-                if (typeof (this.content) === 'string') {
-                    this.element.textContent = this.content;
+                break;
+        }
+        switch (position.Y) {
+            default:
+            case 'top':
+                break;
+            case 'center':
+                if (this.targetType === 'container') {
+                    anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);
                 }
                 else {
-                    this.element.appendChild(this.content);
+                    anchorPos.top += (anchorRect.height / 2);
                 }
+                break;
+            case 'bottom':
+                if (this.targetType === 'container') {
+                    anchorPos.top += (anchorRect.height - eleRect.height);
+                }
+                else {
+                    anchorPos.top += (anchorRect.height);
+                }
+                break;
+        }
+        anchorPos.left += offsetX;
+        anchorPos.top += offsetY;
+        return anchorPos;
+    };
+    Popup.prototype.callFlip = function (param) {
+        var relateToElement = this.getRelateToElement();
+        flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param, this.fixedParent);
+    };
+    Popup.prototype.callFit = function (param) {
+        if (isCollide(this.element, this.viewPortElement).length !== 0) {
+            if (isNullOrUndefined(this.viewPortElement)) {
+                var data = fit(this.element, this.viewPortElement, param);
+                this.element.style.left = data.left + 'px';
+                this.element.style.top = data.top + 'px';
             }
-        };
-        Popup.prototype.orientationOnChange = function () {
-            var _this = this;
-            setTimeout(function () {
-                _this.refreshPosition();
-            }, 200);
-        };
-        /**
-         * Based on the `relative` element and `offset` values, `Popup` element position will refreshed.
-         */
-        Popup.prototype.refreshPosition = function (target) {
-            if (!ej2_base_2.isNullOrUndefined(target)) {
-                this.checkFixedParent(target);
-            }
-            this.reposition();
-            this.checkCollision();
-        };
-        Popup.prototype.reposition = function () {
-            var pos;
-            var relateToElement = this.getRelateToElement();
-            if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {
-                pos = { left: this.position.X, top: this.position.Y };
-            }
-            else if (relateToElement) {
-                var display = this.element.style.display;
-                this.element.style.display = 'block';
-                pos = this.getAnchorPosition(relateToElement, this.element, this.position, this.offsetX, this.offsetY);
-                this.element.style.display = display;
-            }
             else {
-                pos = { left: 0, top: 0 };
-            }
-            this.element.style.left = pos.left + 'px';
-            this.element.style.top = pos.top + 'px';
-        };
-        Popup.prototype.getAnchorPosition = function (anchorEle, ele, position, offsetX, offsetY) {
-            var eleRect = ele.getBoundingClientRect();
-            var anchorRect = anchorEle.getBoundingClientRect();
-            var anchor = anchorEle;
-            var anchorPos = { left: 0, top: 0 };
-            if (ele.offsetParent && ele.offsetParent.tagName === 'BODY' && anchorEle.tagName === 'BODY') {
-                anchorPos = position_1.calculatePosition(anchorEle);
-            }
-            else {
-                anchorPos = position_1.calculateRelativeBasedPosition(anchor, ele);
-            }
-            switch (position.X) {
-                default:
-                case 'left':
-                    break;
-                case 'center':
-                    if (this.targetType === 'container') {
-                        anchorPos.left += (anchorRect.width / 2 - eleRect.width / 2);
+                var elementRect = this.element.getBoundingClientRect();
+                var viewPortRect = this.viewPortElement.getBoundingClientRect();
+                if (param && param.Y === true) {
+                    if (viewPortRect.top > elementRect.top) {
+                        this.element.style.top = '0px';
                     }
-                    else {
-                        anchorPos.left += (anchorRect.width / 2);
+                    else if (viewPortRect.bottom < elementRect.bottom) {
+                        this.element.style.top = parseInt(this.element.style.top, 10) - (elementRect.bottom - viewPortRect.bottom) + 'px';
                     }
-                    break;
-                case 'right':
-                    if (this.targetType === 'container') {
-                        anchorPos.left += (anchorRect.width - eleRect.width);
-                    }
-                    else {
-                        anchorPos.left += (anchorRect.width);
-                    }
-                    break;
-            }
-            switch (position.Y) {
-                default:
-                case 'top':
-                    break;
-                case 'center':
-                    if (this.targetType === 'container') {
-                        anchorPos.top += (anchorRect.height / 2 - eleRect.height / 2);
-                    }
-                    else {
-                        anchorPos.top += (anchorRect.height / 2);
-                    }
-                    break;
-                case 'bottom':
-                    if (this.targetType === 'container') {
-                        anchorPos.top += (anchorRect.height - eleRect.height);
-                    }
-                    else {
-                        anchorPos.top += (anchorRect.height);
-                    }
-                    break;
-            }
-            anchorPos.left += offsetX;
-            anchorPos.top += offsetY;
-            return anchorPos;
-        };
-        Popup.prototype.callFlip = function (param) {
-            var relateToElement = this.getRelateToElement();
-            collision_1.flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param, this.fixedParent);
-        };
-        Popup.prototype.callFit = function (param) {
-            if (collision_1.isCollide(this.element, this.viewPortElement).length !== 0) {
-                if (ej2_base_2.isNullOrUndefined(this.viewPortElement)) {
-                    var data = collision_1.fit(this.element, this.viewPortElement, param);
-                    this.element.style.left = data.left + 'px';
-                    this.element.style.top = data.top + 'px';
                 }
-                else {
-                    var elementRect = this.element.getBoundingClientRect();
-                    var viewPortRect = this.viewPortElement.getBoundingClientRect();
-                    if (param && param.Y === true) {
-                        if (viewPortRect.top > elementRect.top) {
-                            this.element.style.top = '0px';
-                        }
-                        else if (viewPortRect.bottom < elementRect.bottom) {
-                            this.element.style.top = parseInt(this.element.style.top, 10) - (elementRect.bottom - viewPortRect.bottom) + 'px';
-                        }
+                if (param && param.X === true) {
+                    if (viewPortRect.right < elementRect.right) {
+                        this.element.style.left = parseInt(this.element.style.left, 10) - (elementRect.right - viewPortRect.right) + 'px';
                     }
-                    if (param && param.X === true) {
-                        if (viewPortRect.right < elementRect.right) {
-                            this.element.style.left = parseInt(this.element.style.left, 10) - (elementRect.right - viewPortRect.right) + 'px';
-                        }
-                        else if (viewPortRect.left > elementRect.left) {
-                            this.element.style.left = parseInt(this.element.style.left, 10) + (viewPortRect.left - elementRect.left) + 'px';
-                        }
+                    else if (viewPortRect.left > elementRect.left) {
+                        this.element.style.left = parseInt(this.element.style.left, 10) + (viewPortRect.left - elementRect.left) + 'px';
                     }
                 }
             }
-        };
-        Popup.prototype.checkCollision = function () {
-            var horz = this.collision.X;
-            var vert = this.collision.Y;
-            if (horz === 'none' && vert === 'none') {
-                return;
+        }
+    };
+    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 === 'flip') {
+                this.callFlip({ X: true, Y: false });
             }
-            if (horz === 'flip' && vert === 'flip') {
-                this.callFlip({ X: true, Y: true });
+            else if (vert === 'flip') {
+                this.callFlip({ Y: true, X: false });
             }
-            else if (horz === 'fit' && vert === 'fit') {
-                this.callFit({ X: true, Y: true });
+            if (horz === 'fit') {
+                this.callFit({ X: true, Y: false });
             }
-            else {
-                if (horz === 'flip') {
-                    this.callFlip({ X: true, Y: false });
-                }
-                else if (vert === 'flip') {
-                    this.callFlip({ Y: true, X: false });
-                }
-                if (horz === 'fit') {
-                    this.callFit({ X: true, Y: false });
-                }
-                else if (vert === 'fit') {
-                    this.callFit({ X: false, Y: true });
-                }
+            else if (vert === 'fit') {
+                this.callFit({ X: false, Y: true });
             }
-        };
-        /**
-         * Shows the popup element from screen.
-         * @param { AnimationModel | Function } collisionOrAnimationOptions? - To pass animation options or collision function.
-         * @param { Function } collision? - To pass the collision function.
-         */
-        Popup.prototype.show = function (animationOptions) {
-            var _this = this;
-            if (this.zIndex === 1000) {
-                this.zIndex = getZindexPartial(this.element);
-                ej2_base_1.setStyleAttribute(this.element, { 'zIndex': this.zIndex });
-            }
-            animationOptions = (!ej2_base_2.isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?
-                animationOptions : this.showAnimation;
-            if (this.collision.X !== 'none' || this.collision.Y !== 'none') {
-                ej2_base_1.removeClass([this.element], CLASSNAMES.CLOSE);
-                ej2_base_1.addClass([this.element], CLASSNAMES.OPEN);
-                this.checkCollision();
-                ej2_base_1.removeClass([this.element], CLASSNAMES.OPEN);
-                ej2_base_1.addClass([this.element], CLASSNAMES.CLOSE);
-            }
-            if (!ej2_base_2.isNullOrUndefined(animationOptions)) {
-                animationOptions.begin = function () {
-                    if (!_this.isDestroyed) {
-                        ej2_base_1.removeClass([_this.element], CLASSNAMES.CLOSE);
-                        ej2_base_1.addClass([_this.element], CLASSNAMES.OPEN);
-                    }
-                };
-                animationOptions.end = function () {
-                    if (!_this.isDestroyed) {
-                        _this.trigger('open');
-                    }
-                };
-                new ej2_base_4.Animation(animationOptions).animate(this.element);
-            }
-            else {
-                ej2_base_1.removeClass([this.element], CLASSNAMES.CLOSE);
-                ej2_base_1.addClass([this.element], CLASSNAMES.OPEN);
-                this.trigger('open');
-            }
-        };
-        /**
-         * Hides the popup element from screen.
-         * @param { AnimationModel } animationOptions? - To give the animation options.
-         */
-        Popup.prototype.hide = function (animationOptions) {
-            var _this = this;
-            animationOptions = (!ej2_base_2.isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?
-                animationOptions : this.hideAnimation;
-            if (!ej2_base_2.isNullOrUndefined(animationOptions)) {
-                animationOptions.end = function () {
-                    if (!_this.isDestroyed) {
-                        ej2_base_1.removeClass([_this.element], CLASSNAMES.OPEN);
-                        ej2_base_1.addClass([_this.element], CLASSNAMES.CLOSE);
-                        _this.trigger('close');
-                    }
-                };
-                new ej2_base_4.Animation(animationOptions).animate(this.element);
-            }
-            else {
-                ej2_base_1.removeClass([this.element], CLASSNAMES.OPEN);
-                ej2_base_1.addClass([this.element], CLASSNAMES.CLOSE);
-                this.trigger('close');
-            }
-        };
-        /**
-         * Gets scrollable parent elements for the given element.
-         * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.
-         */
-        Popup.prototype.getScrollableParent = function (element) {
-            this.checkFixedParent(element);
-            return getScrollableParent(element, this.fixedParent);
-        };
-        Popup.prototype.checkFixedParent = function (element) {
-            var parent = element.parentElement;
-            while (parent && parent.tagName !== 'HTML') {
-                var parentStyle = getComputedStyle(parent);
-                if (parentStyle.position === 'fixed' && this.element.offsetParent && this.element.offsetParent.tagName === 'BODY') {
-                    this.element.style.position = 'fixed';
-                    this.fixedParent = true;
+        }
+    };
+    /**
+     * Shows the popup element from screen.
+     * @param { AnimationModel | Function } collisionOrAnimationOptions? - To pass animation options or collision function.
+     * @param { Function } collision? - To pass the collision function.
+     * @param { HTMLElement } relativeElement? - To calculate the zIndex value dynamically.
+     */
+    Popup.prototype.show = function (animationOptions, relativeElement) {
+        var _this = this;
+        if (this.zIndex === 1000 || !isNullOrUndefined(relativeElement)) {
+            var zIndexElement = (isNullOrUndefined(relativeElement)) ? this.element : relativeElement;
+            this.zIndex = getZindexPartial(zIndexElement);
+            setStyleAttribute(this.element, { 'zIndex': this.zIndex });
+        }
+        animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?
+            animationOptions : this.showAnimation;
+        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(animationOptions)) {
+            animationOptions.begin = function () {
+                if (!_this.isDestroyed) {
+                    removeClass([_this.element], CLASSNAMES.CLOSE);
+                    addClass([_this.element], CLASSNAMES.OPEN);
                 }
-                parent = parent.parentElement;
-                if (ej2_base_2.isNullOrUndefined(this.element.offsetParent) && parentStyle.position === 'fixed'
-                    && this.element.style.position === 'fixed') {
-                    this.fixedParent = true;
+            };
+            animationOptions.end = function () {
+                if (!_this.isDestroyed) {
+                    _this.trigger('open');
                 }
-            }
-        };
-        __decorate([
-            ej2_base_4.Property('auto')
-        ], Popup.prototype, "height", void 0);
-        __decorate([
-            ej2_base_4.Property('auto')
-        ], Popup.prototype, "width", void 0);
-        __decorate([
-            ej2_base_4.Property(null)
-        ], Popup.prototype, "content", void 0);
-        __decorate([
-            ej2_base_4.Property('container')
-        ], Popup.prototype, "targetType", void 0);
-        __decorate([
-            ej2_base_4.Property(null)
-        ], Popup.prototype, "viewPortElement", void 0);
-        __decorate([
-            ej2_base_4.Property({ X: 'none', Y: 'none' })
-        ], Popup.prototype, "collision", void 0);
-        __decorate([
-            ej2_base_4.Property('')
-        ], Popup.prototype, "relateTo", void 0);
-        __decorate([
-            ej2_base_1.Complex({}, PositionData)
-        ], Popup.prototype, "position", void 0);
-        __decorate([
-            ej2_base_4.Property(0)
-        ], Popup.prototype, "offsetX", void 0);
-        __decorate([
-            ej2_base_4.Property(0)
-        ], Popup.prototype, "offsetY", void 0);
-        __decorate([
-            ej2_base_4.Property(1000)
-        ], Popup.prototype, "zIndex", void 0);
-        __decorate([
-            ej2_base_4.Property(false)
-        ], Popup.prototype, "enableRtl", void 0);
-        __decorate([
-            ej2_base_4.Property('reposition')
-        ], Popup.prototype, "actionOnScroll", void 0);
-        __decorate([
-            ej2_base_4.Property(null)
-        ], Popup.prototype, "showAnimation", void 0);
-        __decorate([
-            ej2_base_4.Property(null)
-        ], Popup.prototype, "hideAnimation", void 0);
-        __decorate([
-            ej2_base_4.Event()
-        ], Popup.prototype, "open", void 0);
-        __decorate([
-            ej2_base_4.Event()
-        ], Popup.prototype, "close", void 0);
-        __decorate([
-            ej2_base_4.Event()
-        ], Popup.prototype, "targetExitViewport", void 0);
-        Popup = __decorate([
-            ej2_base_5.NotifyPropertyChanges
-        ], Popup);
-        return Popup;
-    }(ej2_base_4.Component));
-    exports.Popup = Popup;
+            };
+            new Animation(animationOptions).animate(this.element);
+        }
+        else {
+            removeClass([this.element], CLASSNAMES.CLOSE);
+            addClass([this.element], CLASSNAMES.OPEN);
+            this.trigger('open');
+        }
+    };
     /**
+     * Hides the popup element from screen.
+     * @param { AnimationModel } animationOptions? - To give the animation options.
+     */
+    Popup.prototype.hide = function (animationOptions) {
+        var _this = this;
+        animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?
+            animationOptions : this.hideAnimation;
+        if (!isNullOrUndefined(animationOptions)) {
+            animationOptions.end = function () {
+                if (!_this.isDestroyed) {
+                    removeClass([_this.element], CLASSNAMES.OPEN);
+                    addClass([_this.element], CLASSNAMES.CLOSE);
+                    _this.trigger('close');
+                }
+            };
+            new Animation(animationOptions).animate(this.element);
+        }
+        else {
+            removeClass([this.element], CLASSNAMES.OPEN);
+            addClass([this.element], CLASSNAMES.CLOSE);
+            this.trigger('close');
+        }
+    };
+    /**
      * Gets scrollable parent elements for the given element.
      * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.
-     * @private
      */
-    function getScrollableParent(element, fixedParent) {
-        var eleStyle = getComputedStyle(element);
-        var scrollParents = [];
-        var overflowRegex = /(auto|scroll)/;
+    Popup.prototype.getScrollableParent = function (element) {
+        this.checkFixedParent(element);
+        return getScrollableParent(element, this.fixedParent);
+    };
+    Popup.prototype.checkFixedParent = function (element) {
         var parent = element.parentElement;
         while (parent && parent.tagName !== 'HTML') {
             var parentStyle = getComputedStyle(parent);
-            if (!(eleStyle.position === 'absolute' && parentStyle.position === 'static')
-                && overflowRegex.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {
-                scrollParents.push(parent);
+            if (parentStyle.position === 'fixed' && this.element.offsetParent && this.element.offsetParent.tagName === 'BODY') {
+                this.element.style.position = 'fixed';
+                this.fixedParent = true;
             }
             parent = parent.parentElement;
+            if (isNullOrUndefined(this.element.offsetParent) && parentStyle.position === 'fixed'
+                && this.element.style.position === 'fixed') {
+                this.fixedParent = true;
+            }
         }
-        if (!fixedParent) {
-            scrollParents.push(document);
+    };
+    __decorate([
+        Property('auto')
+    ], Popup.prototype, "height", void 0);
+    __decorate([
+        Property('auto')
+    ], Popup.prototype, "width", void 0);
+    __decorate([
+        Property(null)
+    ], Popup.prototype, "content", void 0);
+    __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('')
+    ], Popup.prototype, "relateTo", void 0);
+    __decorate([
+        Complex({}, PositionData)
+    ], Popup.prototype, "position", void 0);
+    __decorate([
+        Property(0)
+    ], Popup.prototype, "offsetX", void 0);
+    __decorate([
+        Property(0)
+    ], Popup.prototype, "offsetY", void 0);
+    __decorate([
+        Property(1000)
+    ], Popup.prototype, "zIndex", void 0);
+    __decorate([
+        Property(false)
+    ], Popup.prototype, "enableRtl", void 0);
+    __decorate([
+        Property('reposition')
+    ], Popup.prototype, "actionOnScroll", void 0);
+    __decorate([
+        Property(null)
+    ], Popup.prototype, "showAnimation", void 0);
+    __decorate([
+        Property(null)
+    ], Popup.prototype, "hideAnimation", void 0);
+    __decorate([
+        Event()
+    ], Popup.prototype, "open", void 0);
+    __decorate([
+        Event()
+    ], Popup.prototype, "close", void 0);
+    __decorate([
+        Event()
+    ], Popup.prototype, "targetExitViewport", void 0);
+    Popup = __decorate([
+        NotifyPropertyChanges
+    ], Popup);
+    return Popup;
+}(Component));
+export { Popup };
+/**
+ * Gets scrollable parent elements for the given element.
+ * @param { HTMLElement } element - Specify the element to get the scrollable parents of it.
+ * @private
+ */
+export function getScrollableParent(element, fixedParent) {
+    var eleStyle = getComputedStyle(element);
+    var scrollParents = [];
+    var overflowRegex = /(auto|scroll)/;
+    var parent = element.parentElement;
+    while (parent && parent.tagName !== 'HTML') {
+        var parentStyle = getComputedStyle(parent);
+        if (!(eleStyle.position === 'absolute' && parentStyle.position === 'static')
+            && overflowRegex.test(parentStyle.overflow + parentStyle.overflowY + parentStyle.overflowX)) {
+            scrollParents.push(parent);
         }
-        return scrollParents;
+        parent = parent.parentElement;
     }
-    exports.getScrollableParent = getScrollableParent;
-    /**
-     * Gets the maximum z-index of the given element.
-     * @param { HTMLElement } element - Specify the element to get the maximum z-index of it.
-     * @private
-     */
-    function getZindexPartial(element) {
-        // upto body traversal
-        var parent = element.parentElement;
-        var parentZindex = [];
-        while (parent) {
-            if (parent.tagName !== 'BODY') {
-                var index = document.defaultView.getComputedStyle(parent, null).getPropertyValue('z-index');
-                var position = document.defaultView.getComputedStyle(parent, null).getPropertyValue('position');
-                if (index !== 'auto' && position !== 'static') {
-                    parentZindex.push(index);
-                }
-                parent = parent.parentElement;
+    if (!fixedParent) {
+        scrollParents.push(document);
+    }
+    return scrollParents;
+}
+/**
+ * Gets the maximum z-index of the given element.
+ * @param { HTMLElement } element - Specify the element to get the maximum z-index of it.
+ * @private
+ */
+export function getZindexPartial(element) {
+    // upto body traversal
+    var parent = element.parentElement;
+    var parentZindex = [];
+    while (parent) {
+        if (parent.tagName !== 'BODY') {
+            var index = document.defaultView.getComputedStyle(parent, null).getPropertyValue('z-index');
+            var position = document.defaultView.getComputedStyle(parent, null).getPropertyValue('position');
+            if (index !== 'auto' && position !== 'static') {
+                parentZindex.push(index);
             }
-            else {
-                break;
+            parent = parent.parentElement;
+        }
+        else {
+            break;
+        }
+    }
+    //Body direct children element traversal
+    var childrenZindex = [];
+    for (var i = 0; i < document.body.children.length; i++) {
+        if (!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);
             }
         }
-        //Body direct children element traversal
-        var childrenZindex = [];
-        for (var i = 0; i < document.body.children.length; i++) {
-            if (!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 siblingsZindex = [];
+    if (!isNullOrUndefined(element.parentElement) && element.parentElement.tagName !== 'BODY') {
+        var childNodes = [].slice.call(element.parentElement.children);
+        for (var i = 0; i < childNodes.length; i++) {
+            var index = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('z-index');
+            var position = document.defaultView.getComputedStyle(childNodes[i], null).getPropertyValue('position');
+            if (index !== 'auto' && position !== 'static') {
+                siblingsZindex.push(index);
             }
         }
-        childrenZindex.push('999');
-        var finalValue = parentZindex.concat(childrenZindex);
-        return Math.max.apply(Math, finalValue) + 1;
     }
-    exports.getZindexPartial = getZindexPartial;
-});
+    var finalValue = parentZindex.concat(childrenZindex, siblingsZindex);
+    return Math.max.apply(Math, finalValue) + 1;
+}

src/spinner/index.js

@@ -1,11 +0,4 @@
-define(["require", "exports", "./spinner"], function (require, exports, spinner_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * spinner modules
-     */
-    __export(spinner_1);
-});
+/**
+ * spinner modules
+ */
+export * from './spinner';

src/spinner/spinner.js

@@ -1,476 +0,469 @@
-define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var globalTimeOut = {};
-    var spinTemplate = null;
-    var spinCSSClass = null;
-    var DEFT_MAT_WIDTH = 30;
-    var DEFT_FAB_WIDTH = 30;
-    var DEFT_BOOT_WIDTH = 30;
-    var CLS_SHOWSPIN = 'e-spin-show';
-    var CLS_HIDESPIN = 'e-spin-hide';
-    var CLS_MATERIALSPIN = 'e-spin-material';
-    var CLS_FABRICSPIN = 'e-spin-fabric';
-    var CLS_BOOTSPIN = 'e-spin-bootstrap';
-    var CLS_HIGHCONTRASTSPIN = 'e-spin-high-contrast';
-    var CLS_SPINWRAP = 'e-spinner-pane';
-    var CLS_SPININWRAP = 'e-spinner-inner';
-    var CLS_SPINCIRCLE = 'e-path-circle';
-    var CLS_SPINARC = 'e-path-arc';
-    var CLS_SPINLABEL = 'e-spin-label';
-    var CLS_SPINTEMPLATE = 'e-spin-template';
-    /**
-     * Create a spinner for the specified target element.
-     * ```
-     * E.g : createSpinner({ target: targetElement, width: '34px', label: 'Loading..' });
-     * ```
-     * @param args
-     * @private
-     */
-    function createSpinner(args) {
-        var radius;
-        var container = create_spinner_container(args.target);
-        if (!ej2_base_1.isNullOrUndefined(args.cssClass)) {
-            container.wrap.classList.add(args.cssClass);
-        }
-        if (!ej2_base_1.isNullOrUndefined(args.template) || !ej2_base_1.isNullOrUndefined(spinTemplate)) {
-            var template = !ej2_base_1.isNullOrUndefined(args.template) ? args.template : spinTemplate;
-            container.wrap.classList.add(CLS_SPINTEMPLATE);
-            replaceContent(container.wrap, template, spinCSSClass);
-        }
-        else {
-            var theme = !ej2_base_1.isNullOrUndefined(args.type) ? args.type : getTheme(container.wrap);
-            var width = !ej2_base_1.isNullOrUndefined(args.width) ? args.width : undefined;
-            radius = calculateRadius(width, theme);
-            setTheme(theme, container.wrap, radius);
-            if (!ej2_base_1.isNullOrUndefined(args.label)) {
-                createLabel(container.inner_wrap, args.label);
-            }
-        }
-        container.wrap.classList.add(CLS_HIDESPIN);
-        container = null;
+import { isNullOrUndefined, classList } from '@syncfusion/ej2-base';
+var globalTimeOut = {};
+var spinTemplate = null;
+var spinCSSClass = null;
+var DEFT_MAT_WIDTH = 30;
+var DEFT_FAB_WIDTH = 30;
+var DEFT_BOOT_WIDTH = 30;
+var CLS_SHOWSPIN = 'e-spin-show';
+var CLS_HIDESPIN = 'e-spin-hide';
+var CLS_MATERIALSPIN = 'e-spin-material';
+var CLS_FABRICSPIN = 'e-spin-fabric';
+var CLS_BOOTSPIN = 'e-spin-bootstrap';
+var CLS_HIGHCONTRASTSPIN = 'e-spin-high-contrast';
+var CLS_SPINWRAP = 'e-spinner-pane';
+var CLS_SPININWRAP = 'e-spinner-inner';
+var CLS_SPINCIRCLE = 'e-path-circle';
+var CLS_SPINARC = 'e-path-arc';
+var CLS_SPINLABEL = 'e-spin-label';
+var CLS_SPINTEMPLATE = 'e-spin-template';
+/**
+ * Create a spinner for the specified target element.
+ * ```
+ * E.g : createSpinner({ target: targetElement, width: '34px', label: 'Loading..' });
+ * ```
+ * @param args
+ * @private
+ */
+export function createSpinner(args) {
+    var radius;
+    var container = create_spinner_container(args.target);
+    if (!isNullOrUndefined(args.cssClass)) {
+        container.wrap.classList.add(args.cssClass);
     }
-    exports.createSpinner = createSpinner;
-    function createLabel(container, label) {
-        var labelEle = document.createElement('div');
-        labelEle.classList.add(CLS_SPINLABEL);
-        labelEle.textContent = label;
-        container.appendChild(labelEle);
-        return labelEle;
+    if (!isNullOrUndefined(args.template) || !isNullOrUndefined(spinTemplate)) {
+        var template = !isNullOrUndefined(args.template) ? args.template : spinTemplate;
+        container.wrap.classList.add(CLS_SPINTEMPLATE);
+        replaceContent(container.wrap, template, spinCSSClass);
     }
-    function createMaterialSpinner(container, radius) {
-        var uniqueID = random_generator();
-        globalTimeOut[uniqueID] = { timeOut: 0, type: 'Material', radius: radius };
-        create_material_element(container, uniqueID);
-        mat_calculate_attributes(radius, container);
+    else {
+        var theme = !isNullOrUndefined(args.type) ? args.type : getTheme(container.wrap);
+        var width = !isNullOrUndefined(args.width) ? args.width : undefined;
+        radius = calculateRadius(width, theme);
+        setTheme(theme, container.wrap, radius);
+        if (!isNullOrUndefined(args.label)) {
+            createLabel(container.inner_wrap, args.label);
+        }
     }
-    function startMatAnimate(container, uniqueID, radius) {
-        var globalObject = {};
-        var timeOutVar = 0;
-        globalTimeOut[uniqueID].timeOut = 0;
-        globalObject[uniqueID] = globalVariables(uniqueID, radius, 0, 0);
-        var spinnerInfo = { uniqueID: uniqueID, container: container, globalInfo: globalObject, timeOutVar: timeOutVar };
-        animateMaterial(spinnerInfo);
+    container.wrap.classList.add(CLS_HIDESPIN);
+    container = null;
+}
+function createLabel(container, label) {
+    var labelEle = document.createElement('div');
+    labelEle.classList.add(CLS_SPINLABEL);
+    labelEle.textContent = label;
+    container.appendChild(labelEle);
+    return labelEle;
+}
+function createMaterialSpinner(container, radius) {
+    var uniqueID = random_generator();
+    globalTimeOut[uniqueID] = { timeOut: 0, type: 'Material', radius: radius };
+    create_material_element(container, uniqueID);
+    mat_calculate_attributes(radius, container);
+}
+function startMatAnimate(container, uniqueID, radius) {
+    var globalObject = {};
+    var timeOutVar = 0;
+    globalTimeOut[uniqueID].timeOut = 0;
+    globalObject[uniqueID] = globalVariables(uniqueID, radius, 0, 0);
+    var spinnerInfo = { uniqueID: uniqueID, container: container, globalInfo: globalObject, timeOutVar: timeOutVar };
+    animateMaterial(spinnerInfo);
+}
+function createFabricSpinner(container, radius) {
+    var uniqueID = random_generator();
+    globalTimeOut[uniqueID] = { timeOut: 0, type: 'Fabric', radius: radius };
+    create_fabric_element(container, uniqueID, CLS_FABRICSPIN);
+    fb_calculate_attributes(radius, container, CLS_FABRICSPIN);
+}
+function createHighContrastSpinner(container, radius) {
+    var uniqueID = random_generator();
+    globalTimeOut[uniqueID] = { timeOut: 0, type: 'HighContrast', radius: radius };
+    create_fabric_element(container, uniqueID, CLS_HIGHCONTRASTSPIN);
+    fb_calculate_attributes(radius, container, CLS_HIGHCONTRASTSPIN);
+}
+function getTheme(container) {
+    var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');
+    return theme.replace(/['"]+/g, '');
+}
+function setTheme(theme, container, radius) {
+    var innerContainer = container.querySelector('.' + CLS_SPININWRAP);
+    var svg = innerContainer.querySelector('svg');
+    if (!isNullOrUndefined(svg)) {
+        innerContainer.removeChild(svg);
     }
-    function createFabricSpinner(container, radius) {
-        var uniqueID = random_generator();
-        globalTimeOut[uniqueID] = { timeOut: 0, type: 'Fabric', radius: radius };
-        create_fabric_element(container, uniqueID, CLS_FABRICSPIN);
-        fb_calculate_attributes(radius, container, CLS_FABRICSPIN);
+    switch (theme) {
+        case 'Material':
+            createMaterialSpinner(innerContainer, radius);
+            break;
+        case 'Fabric':
+            createFabricSpinner(innerContainer, radius);
+            break;
+        case 'Bootstrap':
+            createBootstrapSpinner(innerContainer, radius);
+            break;
+        case 'HighContrast':
+            createHighContrastSpinner(innerContainer, radius);
+            break;
     }
-    function createHighContrastSpinner(container, radius) {
-        var uniqueID = random_generator();
-        globalTimeOut[uniqueID] = { timeOut: 0, type: 'HighContrast', radius: radius };
-        create_fabric_element(container, uniqueID, CLS_HIGHCONTRASTSPIN);
-        fb_calculate_attributes(radius, container, CLS_HIGHCONTRASTSPIN);
+}
+function createBootstrapSpinner(innerContainer, radius) {
+    var uniqueID = random_generator();
+    globalTimeOut[uniqueID] = { timeOut: 0, type: 'Bootstrap', radius: radius };
+    create_bootstrap_element(innerContainer, uniqueID);
+    boot_calculate_attributes(innerContainer, radius);
+}
+function create_bootstrap_element(innerContainer, uniqueID) {
+    var svgBoot = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    var viewBoxValue = 64;
+    var trans = 32;
+    var defaultRadius = 2;
+    svgBoot.setAttribute('id', uniqueID);
+    svgBoot.setAttribute('class', CLS_BOOTSPIN);
+    svgBoot.setAttribute('viewBox', '0 0 ' + viewBoxValue + ' ' + viewBoxValue);
+    innerContainer.insertBefore(svgBoot, innerContainer.firstChild);
+    for (var item = 0; item <= 7; item++) {
+        var bootCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        bootCircle.setAttribute('class', CLS_SPINCIRCLE + '_' + item);
+        bootCircle.setAttribute('r', defaultRadius + '');
+        bootCircle.setAttribute('transform', 'translate(' + trans + ',' + trans + ')');
+        svgBoot.appendChild(bootCircle);
     }
-    function getTheme(container) {
-        var theme = window.getComputedStyle(container, ':after').getPropertyValue('content');
-        return theme.replace(/['"]+/g, '');
+}
+function boot_calculate_attributes(innerContainer, radius) {
+    var svg = innerContainer.querySelector('svg.e-spin-bootstrap');
+    svg.style.width = svg.style.height = radius + 'px';
+    var x = 0;
+    var y = 0;
+    var rad = 24;
+    var startArc = 90;
+    for (var item = 0; item <= 7; item++) {
+        var start = defineArcPoints(x, y, rad, startArc);
+        var circleEle = svg.querySelector('.' + CLS_SPINCIRCLE + '_' + item);
+        circleEle.setAttribute('cx', start.x + '');
+        circleEle.setAttribute('cy', start.y + '');
+        startArc = startArc >= 360 ? 0 : startArc;
+        startArc = startArc + 45;
     }
-    function setTheme(theme, container, radius) {
-        var innerContainer = container.querySelector('.' + CLS_SPININWRAP);
-        var svg = innerContainer.querySelector('svg');
-        if (!ej2_base_1.isNullOrUndefined(svg)) {
-            innerContainer.removeChild(svg);
+}
+function generateSeries(begin, stop) {
+    var series = [];
+    var start = begin;
+    var end = stop;
+    var increment = false;
+    var count = 1;
+    formSeries(start);
+    function formSeries(i) {
+        series.push(i);
+        if (i !== end || count === 1) {
+            if (i <= start && i > 1 && !increment) {
+                i = parseFloat((i - 0.2).toFixed(2));
+            }
+            else if (i === 1) {
+                i = 7;
+                i = parseFloat((i + 0.2).toFixed(2));
+                increment = true;
+            }
+            else if (i < 8 && increment) {
+                i = parseFloat((i + 0.2).toFixed(2));
+                if (i === 8) {
+                    increment = false;
+                }
+            }
+            else if (i <= 8 && !increment) {
+                i = parseFloat((i - 0.2).toFixed(2));
+            }
+            ++count;
+            formSeries(i);
         }
-        switch (theme) {
-            case 'Material':
-                createMaterialSpinner(innerContainer, radius);
-                break;
-            case 'Fabric':
-                createFabricSpinner(innerContainer, radius);
-                break;
-            case 'Bootstrap':
-                createBootstrapSpinner(innerContainer, radius);
-                break;
-            case 'HighContrast':
-                createHighContrastSpinner(innerContainer, radius);
-                break;
-        }
     }
-    function createBootstrapSpinner(innerContainer, radius) {
-        var uniqueID = random_generator();
-        globalTimeOut[uniqueID] = { timeOut: 0, type: 'Bootstrap', radius: radius };
-        create_bootstrap_element(innerContainer, uniqueID);
-        boot_calculate_attributes(innerContainer, radius);
+    return series;
+}
+function animateBootstrap(innerContainer) {
+    var svg = innerContainer.querySelector('svg.e-spin-bootstrap');
+    var id = svg.getAttribute('id');
+    for (var i = 1; i <= 8; i++) {
+        var circleEle = (innerContainer.getElementsByClassName('e-path-circle_' +
+            (i === 8 ? 0 : i))[0]);
+        rotation(circleEle, i, i, generateSeries(i, i), id);
     }
-    function create_bootstrap_element(innerContainer, uniqueID) {
-        var svgBoot = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        var viewBoxValue = 64;
-        var trans = 32;
-        var defaultRadius = 2;
-        svgBoot.setAttribute('id', uniqueID);
-        svgBoot.setAttribute('class', CLS_BOOTSPIN);
-        svgBoot.setAttribute('viewBox', '0 0 ' + viewBoxValue + ' ' + viewBoxValue);
-        innerContainer.insertBefore(svgBoot, innerContainer.firstChild);
-        for (var item = 0; item <= 7; item++) {
-            var bootCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            bootCircle.setAttribute('class', CLS_SPINCIRCLE + '_' + item);
-            bootCircle.setAttribute('r', defaultRadius + '');
-            bootCircle.setAttribute('transform', 'translate(' + trans + ',' + trans + ')');
-            svgBoot.appendChild(bootCircle);
-        }
-    }
-    function boot_calculate_attributes(innerContainer, radius) {
-        var svg = innerContainer.querySelector('svg.e-spin-bootstrap');
-        svg.style.width = svg.style.height = radius + 'px';
-        var x = 0;
-        var y = 0;
-        var rad = 24;
-        var startArc = 90;
-        for (var item = 0; item <= 7; item++) {
-            var start = defineArcPoints(x, y, rad, startArc);
-            var circleEle = svg.querySelector('.' + CLS_SPINCIRCLE + '_' + item);
-            circleEle.setAttribute('cx', start.x + '');
-            circleEle.setAttribute('cy', start.y + '');
-            startArc = startArc >= 360 ? 0 : startArc;
-            startArc = startArc + 45;
-        }
-    }
-    function generateSeries(begin, stop) {
-        var series = [];
-        var start = begin;
-        var end = stop;
-        var increment = false;
-        var count = 1;
-        formSeries(start);
-        function formSeries(i) {
-            series.push(i);
-            if (i !== end || count === 1) {
-                if (i <= start && i > 1 && !increment) {
-                    i = parseFloat((i - 0.2).toFixed(2));
-                }
-                else if (i === 1) {
-                    i = 7;
-                    i = parseFloat((i + 0.2).toFixed(2));
-                    increment = true;
-                }
-                else if (i < 8 && increment) {
-                    i = parseFloat((i + 0.2).toFixed(2));
-                    if (i === 8) {
-                        increment = false;
-                    }
-                }
-                else if (i <= 8 && !increment) {
-                    i = parseFloat((i - 0.2).toFixed(2));
-                }
+    function rotation(circle, start, end, series, id) {
+        var count = 0;
+        boot_animate(start);
+        function boot_animate(radius) {
+            if (globalTimeOut[id].isAnimate) {
                 ++count;
-                formSeries(i);
-            }
-        }
-        return series;
-    }
-    function animateBootstrap(innerContainer) {
-        var svg = innerContainer.querySelector('svg.e-spin-bootstrap');
-        var id = svg.getAttribute('id');
-        for (var i = 1; i <= 8; i++) {
-            var circleEle = (innerContainer.getElementsByClassName('e-path-circle_' +
-                (i === 8 ? 0 : i))[0]);
-            rotation(circleEle, i, i, generateSeries(i, i), id);
-        }
-        function rotation(circle, start, end, series, id) {
-            var count = 0;
-            boot_animate(start);
-            function boot_animate(radius) {
-                if (globalTimeOut[id].isAnimate) {
-                    ++count;
-                    circle.setAttribute('r', radius + '');
-                    if (count >= series.length) {
-                        count = 0;
-                    }
-                    globalTimeOut[id].timeOut = setTimeout(boot_animate.bind(null, series[count]), 18);
+                circle.setAttribute('r', radius + '');
+                if (count >= series.length) {
+                    count = 0;
                 }
+                globalTimeOut[id].timeOut = setTimeout(boot_animate.bind(null, series[count]), 18);
             }
         }
     }
-    function replaceContent(container, template, cssClass) {
-        if (!ej2_base_1.isNullOrUndefined(cssClass)) {
-            container.classList.add(cssClass);
-        }
-        var inner = container.querySelector('.e-spinner-inner');
-        inner.innerHTML = template;
+}
+function replaceContent(container, template, cssClass) {
+    if (!isNullOrUndefined(cssClass)) {
+        container.classList.add(cssClass);
     }
-    function calculateRadius(width, theme) {
-        var defaultSize = theme === 'Material' ? DEFT_MAT_WIDTH : theme === 'Fabric' ? DEFT_FAB_WIDTH : DEFT_BOOT_WIDTH;
-        width = width ? parseFloat(width + '') : defaultSize;
-        return theme === 'Bootstrap' ? width : width / 2;
+    var inner = container.querySelector('.e-spinner-inner');
+    inner.innerHTML = template;
+}
+function calculateRadius(width, theme) {
+    var defaultSize = theme === 'Material' ? DEFT_MAT_WIDTH : theme === 'Fabric' ? DEFT_FAB_WIDTH : DEFT_BOOT_WIDTH;
+    width = width ? parseFloat(width + '') : defaultSize;
+    return theme === 'Bootstrap' ? width : width / 2;
+}
+function globalVariables(id, radius, count, previousId) {
+    return {
+        radius: radius,
+        count: count,
+        previousId: previousId
+    };
+}
+function random_generator() {
+    var random = '';
+    var combine = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    for (var i = 0; i < 5; i++) {
+        random += combine.charAt(Math.floor(Math.random() * combine.length));
     }
-    function globalVariables(id, radius, count, previousId) {
-        return {
-            radius: radius,
-            count: count,
-            previousId: previousId
-        };
+    return random;
+}
+function create_fabric_element(innerContainer, uniqueID, themeClass) {
+    var svgFabric = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svgFabric.setAttribute('id', uniqueID);
+    svgFabric.setAttribute('class', themeClass);
+    var fabricCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    fabricCirclePath.setAttribute('class', CLS_SPINCIRCLE);
+    var fabricCircleArc = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    fabricCircleArc.setAttribute('class', CLS_SPINARC);
+    innerContainer.insertBefore(svgFabric, innerContainer.firstChild);
+    svgFabric.appendChild(fabricCirclePath);
+    svgFabric.appendChild(fabricCircleArc);
+}
+function create_material_element(innerContainer, uniqueID) {
+    var svgMaterial = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svgMaterial.setAttribute('class', CLS_MATERIALSPIN);
+    svgMaterial.setAttribute('id', uniqueID);
+    var matCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    matCirclePath.setAttribute('class', CLS_SPINCIRCLE);
+    innerContainer.insertBefore(svgMaterial, innerContainer.firstChild);
+    svgMaterial.appendChild(matCirclePath);
+}
+function create_spinner_container(target) {
+    var spinnerContainer = document.createElement('div');
+    spinnerContainer.classList.add(CLS_SPINWRAP);
+    var spinnerInnerContainer = document.createElement('div');
+    spinnerInnerContainer.classList.add(CLS_SPININWRAP);
+    target.appendChild(spinnerContainer);
+    spinnerContainer.appendChild(spinnerInnerContainer);
+    return { wrap: spinnerContainer, inner_wrap: spinnerInnerContainer };
+}
+function animateMaterial(spinnerInfo) {
+    var start = 1;
+    var end = 149;
+    var duration = 1333;
+    var max = 75;
+    createCircle(start, end, easeAnimation, duration, spinnerInfo.globalInfo[spinnerInfo.uniqueID].count, max, spinnerInfo);
+    spinnerInfo.globalInfo[spinnerInfo.uniqueID].count = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].count % 4;
+}
+function createCircle(start, end, easing, duration, count, max, spinnerInfo) {
+    var id = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId;
+    var startTime = new Date().getTime();
+    var change = end - start;
+    var diameter = getSize((spinnerInfo.globalInfo[spinnerInfo.uniqueID].radius * 2) + '');
+    var strokeSize = getStrokeSize(diameter);
+    var rotate = -90 * (spinnerInfo.globalInfo[spinnerInfo.uniqueID].count || 0);
+    mat_animation(spinnerInfo);
+    function mat_animation(spinnerInfo) {
+        var currentTime = Math.max(0, Math.min(new Date().getTime() - startTime, duration));
+        updatePath(easing(currentTime, start, change, duration), spinnerInfo.container);
+        if (id === spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId && currentTime < duration) {
+            globalTimeOut[spinnerInfo.uniqueID].timeOut = setTimeout(mat_animation.bind(null, spinnerInfo), 1);
+        }
+        else {
+            animateMaterial(spinnerInfo);
+        }
     }
-    function random_generator() {
-        var random = '';
-        var combine = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        for (var i = 0; i < 5; i++) {
-            random += combine.charAt(Math.floor(Math.random() * combine.length));
+    function updatePath(value, container) {
+        if ((!isNullOrUndefined(container.querySelector('svg.e-spin-material')))
+            && (!isNullOrUndefined(container.querySelector('svg.e-spin-material').querySelector('path.e-path-circle')))) {
+            var svg = container.querySelector('svg.e-spin-material');
+            var path = svg.querySelector('path.e-path-circle');
+            path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, value, max) + '');
+            path.setAttribute('transform', 'rotate(' + (rotate) + ' ' + diameter / 2 + ' ' + diameter / 2 + ')');
         }
-        return random;
     }
-    function create_fabric_element(innerContainer, uniqueID, themeClass) {
-        var svgFabric = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svgFabric.setAttribute('id', uniqueID);
-        svgFabric.setAttribute('class', themeClass);
-        var fabricCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        fabricCirclePath.setAttribute('class', CLS_SPINCIRCLE);
-        var fabricCircleArc = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        fabricCircleArc.setAttribute('class', CLS_SPINARC);
-        innerContainer.insertBefore(svgFabric, innerContainer.firstChild);
-        svgFabric.appendChild(fabricCirclePath);
-        svgFabric.appendChild(fabricCircleArc);
-    }
-    function create_material_element(innerContainer, uniqueID) {
-        var svgMaterial = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svgMaterial.setAttribute('class', CLS_MATERIALSPIN);
-        svgMaterial.setAttribute('id', uniqueID);
-        var matCirclePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        matCirclePath.setAttribute('class', CLS_SPINCIRCLE);
-        innerContainer.insertBefore(svgMaterial, innerContainer.firstChild);
-        svgMaterial.appendChild(matCirclePath);
-    }
-    function create_spinner_container(target) {
-        var spinnerContainer = document.createElement('div');
-        spinnerContainer.classList.add(CLS_SPINWRAP);
-        var spinnerInnerContainer = document.createElement('div');
-        spinnerInnerContainer.classList.add(CLS_SPININWRAP);
-        target.appendChild(spinnerContainer);
-        spinnerContainer.appendChild(spinnerInnerContainer);
-        return { wrap: spinnerContainer, inner_wrap: spinnerInnerContainer };
-    }
-    function animateMaterial(spinnerInfo) {
-        var start = 1;
-        var end = 149;
-        var duration = 1333;
-        var max = 75;
-        createCircle(start, end, easeAnimation, duration, spinnerInfo.globalInfo[spinnerInfo.uniqueID].count, max, spinnerInfo);
-        spinnerInfo.globalInfo[spinnerInfo.uniqueID].count = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].count % 4;
-    }
-    function createCircle(start, end, easing, duration, count, max, spinnerInfo) {
-        var id = ++spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId;
-        var startTime = new Date().getTime();
-        var change = end - start;
-        var diameter = getSize((spinnerInfo.globalInfo[spinnerInfo.uniqueID].radius * 2) + '');
-        var strokeSize = getStrokeSize(diameter);
-        var rotate = -90 * (spinnerInfo.globalInfo[spinnerInfo.uniqueID].count || 0);
-        mat_animation(spinnerInfo);
-        function mat_animation(spinnerInfo) {
-            var currentTime = Math.max(0, Math.min(new Date().getTime() - startTime, duration));
-            updatePath(easing(currentTime, start, change, duration), spinnerInfo.container);
-            if (id === spinnerInfo.globalInfo[spinnerInfo.uniqueID].previousId && currentTime < duration) {
-                globalTimeOut[spinnerInfo.uniqueID].timeOut = setTimeout(mat_animation.bind(null, spinnerInfo), 1);
-            }
-            else {
-                animateMaterial(spinnerInfo);
-            }
+}
+function mat_calculate_attributes(radius, container) {
+    var diameter = radius * 2;
+    var svg = container.querySelector('svg.e-spin-material');
+    var path = svg.querySelector('path.e-path-circle');
+    var strokeSize = getStrokeSize(diameter);
+    var transformOrigin = (diameter / 2) + 'px';
+    svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);
+    svg.style.width = svg.style.height = diameter + 'px';
+    svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;
+    path.setAttribute('stroke-width', strokeSize + '');
+    path.setAttribute('d', drawArc(diameter, strokeSize));
+    path.setAttribute('stroke-dasharray', ((diameter - strokeSize) * Math.PI * 0.75) + '');
+    path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, 1, 75) + '');
+}
+function getSize(value) {
+    var parsed = parseFloat(value);
+    return parsed;
+}
+function drawArc(diameter, strokeSize) {
+    var radius = diameter / 2;
+    var offset = strokeSize / 2;
+    return 'M' + radius + ',' + offset
+        + 'A' + (radius - offset) + ',' + (radius - offset) + ' 0 1 1 ' + offset + ',' + radius;
+}
+function getStrokeSize(diameter) {
+    return 10 / 100 * diameter;
+}
+function getDashOffset(diameter, strokeSize, value, max) {
+    return (diameter - strokeSize) * Math.PI * ((3 * (max) / 100) - (value / 100));
+}
+function easeAnimation(current, start, change, duration) {
+    var timestamp = (current /= duration) * current;
+    var timecount = timestamp * current;
+    return start + change * (6 * timecount * timestamp + -15 * timestamp * timestamp + 10 * timecount);
+}
+function fb_calculate_attributes(radius, innerConainer, trgClass) {
+    var centerX = radius;
+    var centerY = radius;
+    var diameter = radius * 2;
+    var startArc = 315;
+    var endArc = 45;
+    var svg = innerConainer.querySelector('.' + trgClass);
+    var circle = svg.querySelector('.e-path-circle');
+    var path = svg.querySelector('.e-path-arc');
+    var transformOrigin = (diameter / 2) + 'px';
+    circle.setAttribute('d', defineCircle(centerX, centerY, radius));
+    path.setAttribute('d', defineArc(centerX, centerY, radius, startArc, endArc));
+    svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);
+    svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;
+    svg.style.width = svg.style.height = diameter + 'px';
+}
+function defineArcPoints(centerX, centerY, radius, angle) {
+    var radians = (angle - 90) * Math.PI / 180.0;
+    return {
+        x: centerX + (radius * Math.cos(radians)),
+        y: centerY + (radius * Math.sin(radians))
+    };
+}
+function defineArc(x, y, radius, startArc, endArc) {
+    var start = defineArcPoints(x, y, radius, endArc);
+    var end = defineArcPoints(x, y, radius, startArc);
+    var d = [
+        'M', start.x, start.y,
+        'A', radius, radius, 0, 0, 0, end.x, end.y
+    ].join(' ');
+    return d;
+}
+function defineCircle(x, y, radius) {
+    var d = [
+        'M', x, y,
+        'm', -radius, 0,
+        'a', radius, radius, 0, 1, 0, radius * 2, 0,
+        'a', radius, radius, 0, 1, 0, -radius * 2, 0,
+    ].join(' ');
+    return d;
+}
+/**
+ * Function to show the Spinner.
+ * @param container - Specify the target of the Spinner.
+ * @private
+ */
+export function showSpinner(container) {
+    showHideSpinner(container, false);
+    container = null;
+}
+function showHideSpinner(container, isHide) {
+    var spinnerWrap = container.classList.contains(CLS_SPINWRAP) ? container :
+        container.querySelector('.' + CLS_SPINWRAP);
+    var inner = spinnerWrap.querySelector('.' + CLS_SPININWRAP);
+    var spinCheck;
+    spinCheck = isHide ? !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_HIDESPIN) :
+        !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_SHOWSPIN);
+    if (spinCheck) {
+        var svgEle = spinnerWrap.querySelector('svg');
+        if (isNullOrUndefined(svgEle)) {
+            return;
         }
-        function updatePath(value, container) {
-            if ((!ej2_base_1.isNullOrUndefined(container.querySelector('svg.e-spin-material')))
-                && (!ej2_base_1.isNullOrUndefined(container.querySelector('svg.e-spin-material').querySelector('path.e-path-circle')))) {
-                var svg = container.querySelector('svg.e-spin-material');
-                var path = svg.querySelector('path.e-path-circle');
-                path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, value, max) + '');
-                path.setAttribute('transform', 'rotate(' + (rotate) + ' ' + diameter / 2 + ' ' + diameter / 2 + ')');
-            }
+        var id = svgEle.getAttribute('id');
+        globalTimeOut[id].isAnimate = !isHide;
+        switch (globalTimeOut[id].type) {
+            case 'Material':
+                isHide ? clearTimeout(globalTimeOut[id].timeOut) : startMatAnimate(inner, id, globalTimeOut[id].radius);
+                break;
+            case 'Bootstrap':
+                isHide ? clearTimeout(globalTimeOut[id].timeOut) : animateBootstrap(inner);
+                break;
         }
     }
-    function mat_calculate_attributes(radius, container) {
-        var diameter = radius * 2;
-        var svg = container.querySelector('svg.e-spin-material');
-        var path = svg.querySelector('path.e-path-circle');
-        var strokeSize = getStrokeSize(diameter);
-        var transformOrigin = (diameter / 2) + 'px';
-        svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);
-        svg.style.width = svg.style.height = diameter + 'px';
-        svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;
-        path.setAttribute('stroke-width', strokeSize + '');
-        path.setAttribute('d', drawArc(diameter, strokeSize));
-        path.setAttribute('stroke-dasharray', ((diameter - strokeSize) * Math.PI * 0.75) + '');
-        path.setAttribute('stroke-dashoffset', getDashOffset(diameter, strokeSize, 1, 75) + '');
-    }
-    function getSize(value) {
-        var parsed = parseFloat(value);
-        return parsed;
-    }
-    function drawArc(diameter, strokeSize) {
-        var radius = diameter / 2;
-        var offset = strokeSize / 2;
-        return 'M' + radius + ',' + offset
-            + 'A' + (radius - offset) + ',' + (radius - offset) + ' 0 1 1 ' + offset + ',' + radius;
-    }
-    function getStrokeSize(diameter) {
-        return 10 / 100 * diameter;
-    }
-    function getDashOffset(diameter, strokeSize, value, max) {
-        return (diameter - strokeSize) * Math.PI * ((3 * (max) / 100) - (value / 100));
-    }
-    function easeAnimation(current, start, change, duration) {
-        var timestamp = (current /= duration) * current;
-        var timecount = timestamp * current;
-        return start + change * (6 * timecount * timestamp + -15 * timestamp * timestamp + 10 * timecount);
-    }
-    function fb_calculate_attributes(radius, innerConainer, trgClass) {
-        var centerX = radius;
-        var centerY = radius;
-        var diameter = radius * 2;
-        var startArc = 315;
-        var endArc = 45;
-        var svg = innerConainer.querySelector('.' + trgClass);
-        var circle = svg.querySelector('.e-path-circle');
-        var path = svg.querySelector('.e-path-arc');
-        var transformOrigin = (diameter / 2) + 'px';
-        circle.setAttribute('d', defineCircle(centerX, centerY, radius));
-        path.setAttribute('d', defineArc(centerX, centerY, radius, startArc, endArc));
-        svg.setAttribute('viewBox', '0 0 ' + diameter + ' ' + diameter);
-        svg.style.transformOrigin = transformOrigin + ' ' + transformOrigin + ' ' + transformOrigin;
-        svg.style.width = svg.style.height = diameter + 'px';
-    }
-    function defineArcPoints(centerX, centerY, radius, angle) {
-        var radians = (angle - 90) * Math.PI / 180.0;
-        return {
-            x: centerX + (radius * Math.cos(radians)),
-            y: centerY + (radius * Math.sin(radians))
-        };
-    }
-    function defineArc(x, y, radius, startArc, endArc) {
-        var start = defineArcPoints(x, y, radius, endArc);
-        var end = defineArcPoints(x, y, radius, startArc);
-        var d = [
-            'M', start.x, start.y,
-            'A', radius, radius, 0, 0, 0, end.x, end.y
-        ].join(' ');
-        return d;
-    }
-    function defineCircle(x, y, radius) {
-        var d = [
-            'M', x, y,
-            'm', -radius, 0,
-            'a', radius, radius, 0, 1, 0, radius * 2, 0,
-            'a', radius, radius, 0, 1, 0, -radius * 2, 0,
-        ].join(' ');
-        return d;
-    }
-    /**
-     * Function to show the Spinner.
-     * @param container - Specify the target of the Spinner.
-     * @private
-     */
-    function showSpinner(container) {
-        showHideSpinner(container, false);
-        container = null;
-    }
-    exports.showSpinner = showSpinner;
-    function showHideSpinner(container, isHide) {
-        var spinnerWrap = container.classList.contains(CLS_SPINWRAP) ? container :
-            container.querySelector('.' + CLS_SPINWRAP);
-        var inner = spinnerWrap.querySelector('.' + CLS_SPININWRAP);
-        var spinCheck;
-        spinCheck = isHide ? !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_HIDESPIN) :
-            !spinnerWrap.classList.contains(CLS_SPINTEMPLATE) && !spinnerWrap.classList.contains(CLS_SHOWSPIN);
-        if (spinCheck) {
-            var svgEle = spinnerWrap.querySelector('svg');
-            if (ej2_base_1.isNullOrUndefined(svgEle)) {
-                return;
-            }
-            var id = svgEle.getAttribute('id');
-            globalTimeOut[id].isAnimate = !isHide;
-            switch (globalTimeOut[id].type) {
-                case 'Material':
-                    isHide ? clearTimeout(globalTimeOut[id].timeOut) : startMatAnimate(inner, id, globalTimeOut[id].radius);
-                    break;
-                case 'Bootstrap':
-                    isHide ? clearTimeout(globalTimeOut[id].timeOut) : animateBootstrap(inner);
-                    break;
-            }
+    isHide ? classList(spinnerWrap, [CLS_HIDESPIN], [CLS_SHOWSPIN]) : classList(spinnerWrap, [CLS_SHOWSPIN], [CLS_HIDESPIN]);
+    container = null;
+}
+/**
+ * Function to hide the Spinner.
+ * @param container - Specify the target of the Spinner.
+ * @private
+ */
+export function hideSpinner(container) {
+    showHideSpinner(container, true);
+    container = null;
+}
+/**
+ * Function to change the Spinners in a page globally from application end.
+ * ```
+ * E.g : setSpinner({ cssClass: 'custom-css'; type: 'Material' });
+ * ```
+ * @param args
+ * @private
+ */
+export function setSpinner(args) {
+    if (args.template !== undefined) {
+        spinTemplate = args.template;
+        if (args.template !== undefined) {
+            spinCSSClass = args.cssClass;
         }
-        isHide ? ej2_base_1.classList(spinnerWrap, [CLS_HIDESPIN], [CLS_SHOWSPIN]) : ej2_base_1.classList(spinnerWrap, [CLS_SHOWSPIN], [CLS_HIDESPIN]);
-        container = null;
     }
-    /**
-     * Function to hide the Spinner.
-     * @param container - Specify the target of the Spinner.
-     * @private
-     */
-    function hideSpinner(container) {
-        showHideSpinner(container, true);
-        container = null;
+    var container = document.querySelectorAll('.' + CLS_SPINWRAP);
+    for (var index = 0; index < container.length; index++) {
+        ensureTemplate(args.template, container[index], args.type, args.cssClass);
     }
-    exports.hideSpinner = hideSpinner;
-    /**
-     * Function to change the Spinners in a page globally from application end.
-     * ```
-     * E.g : setSpinner({ cssClass: 'custom-css'; type: 'Material' });
-     * ```
-     * @param args
-     * @private
-     */
-    function setSpinner(args) {
-        if (args.template !== undefined) {
-            spinTemplate = args.template;
-            if (args.template !== undefined) {
-                spinCSSClass = args.cssClass;
-            }
+}
+function ensureTemplate(template, container, theme, cssClass) {
+    if (isNullOrUndefined(template) && !container.classList.contains(CLS_SPINTEMPLATE)) {
+        replaceTheme(container, theme, cssClass);
+        if (container.classList.contains(CLS_SHOWSPIN)) {
+            container.classList.remove(CLS_SHOWSPIN);
+            showSpinner(container);
         }
-        var container = document.querySelectorAll('.' + CLS_SPINWRAP);
-        for (var index = 0; index < container.length; index++) {
-            ensureTemplate(args.template, container[index], args.type, args.cssClass);
-        }
-    }
-    exports.setSpinner = setSpinner;
-    function ensureTemplate(template, container, theme, cssClass) {
-        if (ej2_base_1.isNullOrUndefined(template) && !container.classList.contains(CLS_SPINTEMPLATE)) {
-            replaceTheme(container, theme, cssClass);
-            if (container.classList.contains(CLS_SHOWSPIN)) {
-                container.classList.remove(CLS_SHOWSPIN);
-                showSpinner(container);
-            }
-            else {
-                container.classList.remove(CLS_HIDESPIN);
-                hideSpinner(container);
-            }
-        }
         else {
-            spinTemplate = template;
-            if (!ej2_base_1.isNullOrUndefined(cssClass)) {
-                spinCSSClass = cssClass;
-            }
+            container.classList.remove(CLS_HIDESPIN);
+            hideSpinner(container);
         }
     }
-    function replaceTheme(container, theme, cssClass) {
-        if (!ej2_base_1.isNullOrUndefined(cssClass)) {
-            container.classList.add(cssClass);
+    else {
+        spinTemplate = template;
+        if (!isNullOrUndefined(cssClass)) {
+            spinCSSClass = cssClass;
         }
-        var svgElement = container.querySelector('svg');
-        var radius = theme === 'Bootstrap' ? parseFloat(svgElement.style.height) : parseFloat(svgElement.style.height) / 2;
-        var classNames = svgElement.getAttribute('class');
-        var svgClassList = classNames.split(/\s/);
-        if (svgClassList.indexOf('e-spin-material') >= 0) {
-            var id = svgElement.getAttribute('id');
-            clearTimeout(globalTimeOut[id].timeOut);
-        }
-        setTheme(theme, container, radius);
     }
-});
+}
+function replaceTheme(container, theme, cssClass) {
+    if (!isNullOrUndefined(cssClass)) {
+        container.classList.add(cssClass);
+    }
+    var svgElement = container.querySelector('svg');
+    var radius = theme === 'Bootstrap' ? parseFloat(svgElement.style.height) : parseFloat(svgElement.style.height) / 2;
+    var classNames = svgElement.getAttribute('class');
+    var svgClassList = classNames.split(/\s/);
+    if (svgClassList.indexOf('e-spin-material') >= 0) {
+        var id = svgElement.getAttribute('id');
+        clearTimeout(globalTimeOut[id].timeOut);
+    }
+    setTheme(theme, container, radius);
+}

src/tooltip/index.js

@@ -1,11 +0,4 @@
-define(["require", "exports", "./tooltip"], function (require, exports, tooltip_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Tooltip modules
-     */
-    __export(tooltip_1);
-});
+/**
+ * Tooltip modules
+ */
+export * from './tooltip';

src/tooltip/tooltip-model.d.ts

@@ -36,4 +36,4 @@ import { Component, Property, ChildProperty, Event, BaseEventArgs, append, compile } from '@syncfusion/ej2-base';import { EventHandler, EmitType, Touch, TapEventArgs, Browser, Animation as PopupAnimation } from '@syncfusion/ej2-base';import { isNullOrUndefined, getUniqueID, formatUnit } from '@syncfusion/ej2-base';import { attributes, createElement, closest, removeClass, addClass, remove } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, Complex } from '@syncfusion/ej2-base';import { Popup } from '../popup/popup';import { OffsetPosition, calculatePosition } from '../common/position';import { isCollide, fit } from '../common/collision';
      * It is used to set the height of Tooltip component which accepts both string and number values.
-     * When Tooltip content gets overflow due to height value then the scroll mode will be enabled.     
-     * Refer the documentation {@link http://ej2.syncfusion.com/documentation/tooltip/setting-dimension.html?lang=typescript here} 
+     * When Tooltip content gets overflow due to height value then the scroll mode will be enabled.
+     * Refer the documentation [here](https://ej2.syncfusion.com/documentation/tooltip/setting-dimension.html?lang=typescript)
      *  to know more about this property with demo.
@@ -46,4 +46,6 @@ * @default 'auto'
      * It is used to display the content of Tooltip which can be both string and HTML Elements.
-     * Refer the documentation {@link http://ej2.syncfusion.com/documentation/tooltip/content.html?lang=typescript here} 
+     * Refer the documentation [here](https://ej2.syncfusion.com/documentation/tooltip/content.html?lang=typescript)
      *  to know more about this property with demo.
+     *
+     * {% codeBlock src="tooltip/content-api/index.ts" %}{% endcodeBlock %}
      */
@@ -53,4 +55,6 @@ content?: string | HTMLElement;
     /**
-     * It is used to denote the target selector where the Tooltip need to be displayed. 
+     * It is used to denote the target selector where the Tooltip need to be displayed.
      * The target element is considered as parent container.
+     *
+     * {% codeBlock src="tooltip/target-api/index.ts" %}{% endcodeBlock %}
      */
@@ -61,2 +65,4 @@ target?: string;
      * It is used to set the position of Tooltip element, with respect to Target element.
+     *
+     * {% codeBlock src="tooltip/position-api/index.ts" %}{% endcodeBlock %}
      * @default 'TopCenter'
@@ -68,2 +74,4 @@ */
      * It sets the space between the target and Tooltip element in X axis.
+     *
+     * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      * @default 0
@@ -75,2 +83,4 @@ */
      * It sets the space between the target and Tooltip element in Y axis.
+     *
+     * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      * @default 0
@@ -82,2 +92,4 @@ */
      * It is used to show or hide the tip pointer of Tooltip.
+     *
+     * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      * @default true
@@ -90,5 +102,5 @@ */
      * When it sets to auto, the tip pointer auto adjusts within the space of target's length
-     *  and does not point outside.     
-     * Refer the documentation 
-     *  {@link http://ej2.syncfusion.com/documentation/tooltip/position.html?lang=typescript#tip-pointer-positioning here} 
+     *  and does not point outside.
+     * Refer the documentation
+     *  [here](https://ej2.syncfusion.com/documentation/tooltip/position.html?lang=typescript#tip-pointer-positioning)
      *  to know more about this property with demo.
@@ -103,2 +115,4 @@ * @default 'Auto'
      * If it is in touch device, it will show the Tooltip content when tap and holding on the target element.
+     *
+     * {% codeBlock src="tooltip/opensOn-api/index.ts" %}{% endcodeBlock %}
      * @default 'Auto'
@@ -109,5 +123,7 @@ */
     /**
-     * It allows the Tooltip to follow the mouse pointer movement over the specified target element.     
-     * Refer the documentation {@link http://ej2.syncfusion.com/documentation/tooltip/position.html?lang=typescript#mouse-trailing here} 
+     * It allows the Tooltip to follow the mouse pointer movement over the specified target element.
+     * Refer the documentation [here](https://ej2.syncfusion.com/documentation/tooltip/position.html?lang=typescript#mouse-trailing)
      *  to know more about this property with demo.
+     *
+     * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      * @default false
@@ -118,4 +134,4 @@ */
     /**
-     * It is used to display the Tooltip in an open state until closed by manually.     
-     * Refer the documentation {@link http://ej2.syncfusion.com/documentation/tooltip/open-mode.html?lang=typescript#sticky-mode here} 
+     * It is used to display the Tooltip in an open state until closed by manually.
+     * Refer the documentation [here](https://ej2.syncfusion.com/documentation/tooltip/open-mode.html?lang=typescript#sticky-mode)
      *  to know more about this property with demo.
@@ -127,5 +143,7 @@ * @default false
     /**
-     * We can set the same or different animation option to Tooltip while it is in open or close state.     
-     * Refer the documentation {@link http://ej2.syncfusion.com/documentation/tooltip/animation.html?lang=typescript here} 
+     * We can set the same or different animation option to Tooltip while it is in open or close state.
+     * Refer the documentation [here](https://ej2.syncfusion.com/documentation/tooltip/animation.html?lang=typescript)
      *  to know more about this property with demo.
+     *
+     * {% codeBlock src="tooltip/animation-api/index.ts" %}{% endcodeBlock %}
      * @default { open: { effect: 'FadeIn', duration: 150, delay: 0 }, close: { effect: 'FadeOut', duration: 150, delay: 0 } }
@@ -165,4 +183,4 @@ */
      * For example, to load the AJAX content or to set new animation effects on the Tooltip, this event can be opted.
-     * Refer the documentation 
-     *  {@link http://ej2.syncfusion.com/documentation/tooltip/content.html?lang=typescript#dynamic-content-via-ajax here} 
+     * Refer the documentation
+     *  [here](https://ej2.syncfusion.com/documentation/tooltip/content.html?lang=typescript#dynamic-content-via-ajax)
      *  to know more about this property with demo.
@@ -174,3 +192,3 @@ * @event
     /**
-     * We can trigger `beforeOpen` event before the Tooltip is displayed over the target element. 
+     * We can trigger `beforeOpen` event before the Tooltip is displayed over the target element.
      * When one of its arguments `cancel` is set to true, the Tooltip display can be prevented.
@@ -177,0 +195,0 @@ * This event is mainly used for the purpose of refreshing the Tooltip positions dynamically or to

src/tooltip/tooltip.d.ts

@@ -113,3 +113,3 @@ import { Component, ChildProperty, BaseEventArgs } from '@syncfusion/ej2-base';
      * When Tooltip content gets overflow due to height value then the scroll mode will be enabled.
-     * Refer the documentation {@link http://ej2.syncfusion.com/documentation/tooltip/setting-dimension.html?lang=typescript here}
+     * Refer the documentation [here](https://ej2.syncfusion.com/documentation/tooltip/setting-dimension.html?lang=typescript)
      *  to know more about this property with demo.
@@ -121,4 +121,6 @@ * @default 'auto'
      * It is used to display the content of Tooltip which can be both string and HTML Elements.
-     * Refer the documentation {@link http://ej2.syncfusion.com/documentation/tooltip/content.html?lang=typescript here}
+     * Refer the documentation [here](https://ej2.syncfusion.com/documentation/tooltip/content.html?lang=typescript)
      *  to know more about this property with demo.
+     *
+     * {% codeBlock src="tooltip/content-api/index.ts" %}{% endcodeBlock %}
      */
@@ -129,2 +131,4 @@ content: string | HTMLElement;
      * The target element is considered as parent container.
+     *
+     * {% codeBlock src="tooltip/target-api/index.ts" %}{% endcodeBlock %}
      */
@@ -134,2 +138,4 @@ target: string;
      * It is used to set the position of Tooltip element, with respect to Target element.
+     *
+     * {% codeBlock src="tooltip/position-api/index.ts" %}{% endcodeBlock %}
      * @default 'TopCenter'
@@ -140,2 +146,4 @@ */
      * It sets the space between the target and Tooltip element in X axis.
+     *
+     * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      * @default 0
@@ -146,2 +154,4 @@ */
      * It sets the space between the target and Tooltip element in Y axis.
+     *
+     * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      * @default 0
@@ -152,2 +162,4 @@ */
      * It is used to show or hide the tip pointer of Tooltip.
+     *
+     * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      * @default true
@@ -161,3 +173,3 @@ */
      * Refer the documentation
-     *  {@link http://ej2.syncfusion.com/documentation/tooltip/position.html?lang=typescript#tip-pointer-positioning here}
+     *  [here](https://ej2.syncfusion.com/documentation/tooltip/position.html?lang=typescript#tip-pointer-positioning)
      *  to know more about this property with demo.
@@ -171,2 +183,4 @@ * @default 'Auto'
      * If it is in touch device, it will show the Tooltip content when tap and holding on the target element.
+     *
+     * {% codeBlock src="tooltip/opensOn-api/index.ts" %}{% endcodeBlock %}
      * @default 'Auto'
@@ -177,4 +191,6 @@ */
      * It allows the Tooltip to follow the mouse pointer movement over the specified target element.
-     * Refer the documentation {@link http://ej2.syncfusion.com/documentation/tooltip/position.html?lang=typescript#mouse-trailing here}
+     * Refer the documentation [here](https://ej2.syncfusion.com/documentation/tooltip/position.html?lang=typescript#mouse-trailing)
      *  to know more about this property with demo.
+     *
+     * {% codeBlock src="tooltip/offsetX-api/index.ts" %}{% endcodeBlock %}
      * @default false
@@ -185,3 +201,3 @@ */
      * It is used to display the Tooltip in an open state until closed by manually.
-     * Refer the documentation {@link http://ej2.syncfusion.com/documentation/tooltip/open-mode.html?lang=typescript#sticky-mode here}
+     * Refer the documentation [here](https://ej2.syncfusion.com/documentation/tooltip/open-mode.html?lang=typescript#sticky-mode)
      *  to know more about this property with demo.
@@ -193,4 +209,6 @@ * @default false
      * We can set the same or different animation option to Tooltip while it is in open or close state.
-     * Refer the documentation {@link http://ej2.syncfusion.com/documentation/tooltip/animation.html?lang=typescript here}
+     * Refer the documentation [here](https://ej2.syncfusion.com/documentation/tooltip/animation.html?lang=typescript)
      *  to know more about this property with demo.
+     *
+     * {% codeBlock src="tooltip/animation-api/index.ts" %}{% endcodeBlock %}
      * @default { open: { effect: 'FadeIn', duration: 150, delay: 0 }, close: { effect: 'FadeOut', duration: 150, delay: 0 } }
@@ -226,3 +244,3 @@ */
      * Refer the documentation
-     *  {@link http://ej2.syncfusion.com/documentation/tooltip/content.html?lang=typescript#dynamic-content-via-ajax here}
+     *  [here](https://ej2.syncfusion.com/documentation/tooltip/content.html?lang=typescript#dynamic-content-via-ajax)
      *  to know more about this property with demo.
@@ -229,0 +247,0 @@ * @event

src/tooltip/tooltip.js

@@ -17,1004 +17,1008 @@ var __extends = (this && this.__extends) || (function () {
 };
-define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "../popup/popup", "../common/position", "../common/collision"], function (require, exports, ej2_base_1, ej2_base_2, ej2_base_3, ej2_base_4, ej2_base_5, popup_1, position_1, collision_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var TOUCHEND_HIDE_DELAY = 1500;
-    var TAPHOLD_THRESHOLD = 500;
-    var SHOW_POINTER_TIP_GAP = 0;
-    var HIDE_POINTER_TIP_GAP = 8;
-    var MOUSE_TRAIL_GAP = 2;
-    var POINTER_ADJUST = 2;
-    var ROOT = 'e-tooltip';
-    var RTL = 'e-rtl';
-    var DEVICE = 'e-bigger';
-    var ICON = 'e-icons';
-    var CLOSE = 'e-tooltip-close';
-    var TOOLTIP_WRAP = 'e-tooltip-wrap';
-    var CONTENT = 'e-tip-content';
-    var ARROW_TIP = 'e-arrow-tip';
-    var ARROW_TIP_OUTER = 'e-arrow-tip-outer';
-    var ARROW_TIP_INNER = 'e-arrow-tip-inner';
-    var TIP_BOTTOM = 'e-tip-bottom';
-    var TIP_TOP = 'e-tip-top';
-    var TIP_LEFT = 'e-tip-left';
-    var TIP_RIGHT = 'e-tip-right';
-    var POPUP_ROOT = 'e-popup';
-    var POPUP_OPEN = 'e-popup-open';
-    var POPUP_CLOSE = 'e-popup-close';
-    var Animation = /** @class */ (function (_super) {
-        __extends(Animation, _super);
-        function Animation() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        __decorate([
-            ej2_base_1.Property({ effect: 'FadeIn', duration: 150, delay: 0 })
-        ], Animation.prototype, "open", void 0);
-        __decorate([
-            ej2_base_1.Property({ effect: 'FadeOut', duration: 150, delay: 0 })
-        ], Animation.prototype, "close", void 0);
-        return Animation;
-    }(ej2_base_1.ChildProperty));
-    exports.Animation = Animation;
+import { Component, Property, ChildProperty, Event, append, compile } from '@syncfusion/ej2-base';
+import { EventHandler, Touch, Browser, Animation as PopupAnimation } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, getUniqueID, formatUnit } from '@syncfusion/ej2-base';
+import { attributes, createElement, closest, removeClass, addClass, remove } from '@syncfusion/ej2-base';
+import { NotifyPropertyChanges, Complex } from '@syncfusion/ej2-base';
+import { Popup } from '../popup/popup';
+import { calculatePosition } from '../common/position';
+import { isCollide, fit } from '../common/collision';
+var TOUCHEND_HIDE_DELAY = 1500;
+var TAPHOLD_THRESHOLD = 500;
+var SHOW_POINTER_TIP_GAP = 0;
+var HIDE_POINTER_TIP_GAP = 8;
+var MOUSE_TRAIL_GAP = 2;
+var POINTER_ADJUST = 2;
+var ROOT = 'e-tooltip';
+var RTL = 'e-rtl';
+var DEVICE = 'e-bigger';
+var ICON = 'e-icons';
+var CLOSE = 'e-tooltip-close';
+var TOOLTIP_WRAP = 'e-tooltip-wrap';
+var CONTENT = 'e-tip-content';
+var ARROW_TIP = 'e-arrow-tip';
+var ARROW_TIP_OUTER = 'e-arrow-tip-outer';
+var ARROW_TIP_INNER = 'e-arrow-tip-inner';
+var TIP_BOTTOM = 'e-tip-bottom';
+var TIP_TOP = 'e-tip-top';
+var TIP_LEFT = 'e-tip-left';
+var TIP_RIGHT = 'e-tip-right';
+var POPUP_ROOT = 'e-popup';
+var POPUP_OPEN = 'e-popup-open';
+var POPUP_CLOSE = 'e-popup-close';
+var Animation = /** @class */ (function (_super) {
+    __extends(Animation, _super);
+    function Animation() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property({ effect: 'FadeIn', duration: 150, delay: 0 })
+    ], Animation.prototype, "open", void 0);
+    __decorate([
+        Property({ effect: 'FadeOut', duration: 150, delay: 0 })
+    ], Animation.prototype, "close", void 0);
+    return Animation;
+}(ChildProperty));
+export { Animation };
+/**
+ * Represents the Tooltip component that displays a piece of information about the target element on mouse hover.
+ * ```html
+ * <div id="tooltip">Show Tooltip</div>
+ * ```
+ * ```typescript
+ * <script>
+ *   var tooltipObj = new Tooltip({ content: 'Tooltip text' });
+ *   tooltipObj.appendTo("#tooltip");
+ * </script>
+ * ```
+ */
+var Tooltip = /** @class */ (function (_super) {
+    __extends(Tooltip, _super);
     /**
-     * Represents the Tooltip component that displays a piece of information about the target element on mouse hover.
-     * ```html
-     * <div id="tooltip">Show Tooltip</div>
-     * ```
-     * ```typescript
-     * <script>
-     *   var tooltipObj = new Tooltip({ content: 'Tooltip text' });
-     *   tooltipObj.appendTo("#tooltip");
-     * </script>
-     * ```
+     * Constructor for creating the Tooltip Component
      */
-    var Tooltip = /** @class */ (function (_super) {
-        __extends(Tooltip, _super);
-        /**
-         * Constructor for creating the Tooltip Component
-         */
-        function Tooltip(options, element) {
-            return _super.call(this, options, element) || this;
+    function Tooltip(options, element) {
+        return _super.call(this, options, element) || this;
+    }
+    Tooltip.prototype.initialize = function () {
+        this.formatPosition();
+        addClass([this.element], ROOT);
+    };
+    Tooltip.prototype.formatPosition = function () {
+        if (this.position.indexOf('Top') === 0 || this.position.indexOf('Bottom') === 0) {
+            _a = this.position.split(/(?=[A-Z])/), this.tooltipPositionY = _a[0], this.tooltipPositionX = _a[1];
         }
-        Tooltip.prototype.initialize = function () {
-            this.formatPosition();
-            ej2_base_4.addClass([this.element], ROOT);
-        };
-        Tooltip.prototype.formatPosition = function () {
-            if (this.position.indexOf('Top') === 0 || this.position.indexOf('Bottom') === 0) {
-                _a = this.position.split(/(?=[A-Z])/), this.tooltipPositionY = _a[0], this.tooltipPositionX = _a[1];
+        else {
+            _b = this.position.split(/(?=[A-Z])/), this.tooltipPositionX = _b[0], this.tooltipPositionY = _b[1];
+        }
+        var _a, _b;
+    };
+    Tooltip.prototype.renderArrow = function () {
+        this.setTipClass(this.position);
+        var tip = createElement('div', { className: ARROW_TIP + ' ' + this.tipClass });
+        tip.appendChild(createElement('div', { className: ARROW_TIP_OUTER + ' ' + this.tipClass }));
+        tip.appendChild(createElement('div', { className: ARROW_TIP_INNER + ' ' + this.tipClass }));
+        this.tooltipEle.appendChild(tip);
+    };
+    Tooltip.prototype.setTipClass = function (position) {
+        if (position.indexOf('Right') === 0) {
+            this.tipClass = TIP_LEFT;
+        }
+        else if (position.indexOf('Bottom') === 0) {
+            this.tipClass = TIP_TOP;
+        }
+        else if (position.indexOf('Left') === 0) {
+            this.tipClass = TIP_RIGHT;
+        }
+        else {
+            this.tipClass = TIP_BOTTOM;
+        }
+    };
+    Tooltip.prototype.renderPopup = function (target) {
+        var elePos = this.mouseTrail ? { top: 0, left: 0 } : this.getTooltipPosition(target);
+        this.popupObj = new Popup(this.tooltipEle, {
+            height: this.height,
+            width: this.width,
+            position: {
+                X: elePos.left,
+                Y: elePos.top
+            },
+            enableRtl: this.enableRtl,
+            open: this.openPopupHandler.bind(this),
+            close: this.closePopupHandler.bind(this)
+        });
+    };
+    Tooltip.prototype.getTooltipPosition = function (target) {
+        this.tooltipEle.style.display = 'none';
+        var pos = calculatePosition(target, this.tooltipPositionX, this.tooltipPositionY);
+        this.tooltipEle.style.display = '';
+        var offsetPos = this.calculateTooltipOffset(this.position);
+        var elePos = this.collisionFlipFit(target, pos.left + offsetPos.left, pos.top + offsetPos.top);
+        return elePos;
+    };
+    Tooltip.prototype.reposition = function (target) {
+        var elePos = this.getTooltipPosition(target);
+        this.popupObj.position = { X: elePos.left, Y: elePos.top };
+        this.popupObj.dataBind();
+    };
+    Tooltip.prototype.openPopupHandler = function () {
+        this.trigger('afterOpen', this.tooltipEventArgs);
+    };
+    Tooltip.prototype.closePopupHandler = function () {
+        this.clear();
+        this.trigger('afterClose', this.tooltipEventArgs);
+    };
+    Tooltip.prototype.calculateTooltipOffset = function (position) {
+        var pos = { top: 0, left: 0 };
+        var tooltipEleWidth = this.tooltipEle.offsetWidth;
+        var tooltipEleHeight = this.tooltipEle.offsetHeight;
+        var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);
+        var tipWidth = arrowEle ? arrowEle.offsetWidth : 0;
+        var tipHeight = arrowEle ? arrowEle.offsetHeight : 0;
+        var tipAdjust = (this.showTipPointer ? SHOW_POINTER_TIP_GAP : HIDE_POINTER_TIP_GAP);
+        var tipHeightAdjust = (tipHeight / 2) + POINTER_ADJUST + (this.tooltipEle.offsetHeight - this.tooltipEle.clientHeight);
+        var tipWidthAdjust = (tipWidth / 2) + POINTER_ADJUST + (this.tooltipEle.offsetWidth - this.tooltipEle.clientWidth);
+        if (this.mouseTrail) {
+            tipAdjust += MOUSE_TRAIL_GAP;
+        }
+        switch (position) {
+            case 'RightTop':
+                pos.left += tipWidth + tipAdjust;
+                pos.top -= tooltipEleHeight - tipHeightAdjust;
+                break;
+            case 'RightCenter':
+                pos.left += tipWidth + tipAdjust;
+                pos.top -= (tooltipEleHeight / 2);
+                break;
+            case 'RightBottom':
+                pos.left += tipWidth + tipAdjust;
+                pos.top -= (tipHeightAdjust);
+                break;
+            case 'BottomRight':
+                pos.top += (tipHeight + tipAdjust);
+                pos.left -= (tipWidthAdjust);
+                break;
+            case 'BottomCenter':
+                pos.top += (tipHeight + tipAdjust);
+                pos.left -= (tooltipEleWidth / 2);
+                break;
+            case 'BottomLeft':
+                pos.top += (tipHeight + tipAdjust);
+                pos.left -= (tooltipEleWidth - tipWidthAdjust);
+                break;
+            case 'LeftBottom':
+                pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);
+                pos.top -= (tipHeightAdjust);
+                break;
+            case 'LeftCenter':
+                pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);
+                pos.top -= (tooltipEleHeight / 2);
+                break;
+            case 'LeftTop':
+                pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);
+                pos.top -= (tooltipEleHeight - tipHeightAdjust);
+                break;
+            case 'TopLeft':
+                pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);
+                pos.left -= (tooltipEleWidth - tipWidthAdjust);
+                break;
+            case 'TopRight':
+                pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);
+                pos.left -= (tipWidthAdjust);
+                break;
+            default:
+                pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);
+                pos.left -= (tooltipEleWidth / 2);
+                break;
+        }
+        pos.left += this.offsetX;
+        pos.top += this.offsetY;
+        return pos;
+    };
+    Tooltip.prototype.updateTipPosition = function (position) {
+        var selEle = this.tooltipEle.querySelectorAll('.' + ARROW_TIP + ',.' + ARROW_TIP_OUTER + ',.' + ARROW_TIP_INNER);
+        var removeList = [TIP_BOTTOM, TIP_TOP, TIP_LEFT, TIP_RIGHT];
+        removeClass(selEle, removeList);
+        this.setTipClass(position);
+        addClass(selEle, this.tipClass);
+    };
+    Tooltip.prototype.adjustArrow = function (target, position, tooltipPositionX, tooltipPositionY) {
+        if (this.showTipPointer === false) {
+            return;
+        }
+        this.updateTipPosition(position);
+        var leftValue;
+        var topValue;
+        var tooltipWidth = this.tooltipEle.clientWidth;
+        var tooltipHeight = this.tooltipEle.clientHeight;
+        var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);
+        var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);
+        var tipWidth = arrowEle.offsetWidth;
+        var tipHeight = arrowEle.offsetHeight;
+        if (this.tipClass === TIP_BOTTOM || this.tipClass === TIP_TOP) {
+            if (this.tipClass === TIP_BOTTOM) {
+                topValue = '99.9%';
+                // Arrow icon aligned -2px height from ArrowOuterTip div
+                arrowInnerELe.style.top = '-' + (tipHeight - 2) + 'px';
             }
             else {
-                _b = this.position.split(/(?=[A-Z])/), this.tooltipPositionX = _b[0], this.tooltipPositionY = _b[1];
+                topValue = -(tipHeight - 1) + 'px';
+                // Arrow icon aligned -6px height from ArrowOuterTip div
+                arrowInnerELe.style.top = '-' + (tipHeight - 6) + 'px';
             }
-            var _a, _b;
-        };
-        Tooltip.prototype.renderArrow = function () {
-            this.setTipClass(this.position);
-            var tip = ej2_base_4.createElement('div', { className: ARROW_TIP + ' ' + this.tipClass });
-            tip.appendChild(ej2_base_4.createElement('div', { className: ARROW_TIP_OUTER + ' ' + this.tipClass }));
-            tip.appendChild(ej2_base_4.createElement('div', { className: ARROW_TIP_INNER + ' ' + this.tipClass }));
-            this.tooltipEle.appendChild(tip);
-        };
-        Tooltip.prototype.setTipClass = function (position) {
-            if (position.indexOf('Right') === 0) {
-                this.tipClass = TIP_LEFT;
+            var tipPosExclude = tooltipPositionX !== 'Center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail;
+            if ((tipPosExclude && tooltipPositionX === 'Left') || (!tipPosExclude && this.tipPointerPosition === 'End')) {
+                leftValue = (tooltipWidth - tipWidth - POINTER_ADJUST) + 'px';
             }
-            else if (position.indexOf('Bottom') === 0) {
-                this.tipClass = TIP_TOP;
+            else if ((tipPosExclude && tooltipPositionX === 'Right') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {
+                leftValue = POINTER_ADJUST + 'px';
             }
-            else if (position.indexOf('Left') === 0) {
-                this.tipClass = TIP_RIGHT;
-            }
             else {
-                this.tipClass = TIP_BOTTOM;
+                leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';
             }
-        };
-        Tooltip.prototype.renderPopup = function (target) {
-            var elePos = this.mouseTrail ? { top: 0, left: 0 } : this.getTooltipPosition(target);
-            this.popupObj = new popup_1.Popup(this.tooltipEle, {
-                height: this.height,
-                width: this.width,
-                position: {
-                    X: elePos.left,
-                    Y: elePos.top
-                },
-                enableRtl: this.enableRtl,
-                open: this.openPopupHandler.bind(this),
-                close: this.closePopupHandler.bind(this)
-            });
-        };
-        Tooltip.prototype.getTooltipPosition = function (target) {
-            this.tooltipEle.style.display = 'none';
-            var pos = position_1.calculatePosition(target, this.tooltipPositionX, this.tooltipPositionY);
-            this.tooltipEle.style.display = '';
-            var offsetPos = this.calculateTooltipOffset(this.position);
-            var elePos = this.collisionFlipFit(target, pos.left + offsetPos.left, pos.top + offsetPos.top);
-            return elePos;
-        };
-        Tooltip.prototype.reposition = function (target) {
-            var elePos = this.getTooltipPosition(target);
-            this.popupObj.position = { X: elePos.left, Y: elePos.top };
-            this.popupObj.dataBind();
-        };
-        Tooltip.prototype.openPopupHandler = function () {
-            this.trigger('afterOpen', this.tooltipEventArgs);
-        };
-        Tooltip.prototype.closePopupHandler = function () {
-            this.clear();
-            this.trigger('afterClose', this.tooltipEventArgs);
-        };
-        Tooltip.prototype.calculateTooltipOffset = function (position) {
-            var pos = { top: 0, left: 0 };
-            var tooltipEleWidth = this.tooltipEle.offsetWidth;
-            var tooltipEleHeight = this.tooltipEle.offsetHeight;
-            var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);
-            var tipWidth = arrowEle ? arrowEle.offsetWidth : 0;
-            var tipHeight = arrowEle ? arrowEle.offsetHeight : 0;
-            var tipAdjust = (this.showTipPointer ? SHOW_POINTER_TIP_GAP : HIDE_POINTER_TIP_GAP);
-            var tipHeightAdjust = (tipHeight / 2) + POINTER_ADJUST + (this.tooltipEle.offsetHeight - this.tooltipEle.clientHeight);
-            var tipWidthAdjust = (tipWidth / 2) + POINTER_ADJUST + (this.tooltipEle.offsetWidth - this.tooltipEle.clientWidth);
-            if (this.mouseTrail) {
-                tipAdjust += MOUSE_TRAIL_GAP;
+        }
+        else {
+            if (this.tipClass === TIP_RIGHT) {
+                leftValue = '99.9%';
+                // Arrow icon aligned -2px left from ArrowOuterTip div
+                arrowInnerELe.style.left = '-' + (tipWidth - 2) + 'px';
             }
-            switch (position) {
-                case 'RightTop':
-                    pos.left += tipWidth + tipAdjust;
-                    pos.top -= tooltipEleHeight - tipHeightAdjust;
-                    break;
-                case 'RightCenter':
-                    pos.left += tipWidth + tipAdjust;
-                    pos.top -= (tooltipEleHeight / 2);
-                    break;
-                case 'RightBottom':
-                    pos.left += tipWidth + tipAdjust;
-                    pos.top -= (tipHeightAdjust);
-                    break;
-                case 'BottomRight':
-                    pos.top += (tipHeight + tipAdjust);
-                    pos.left -= (tipWidthAdjust);
-                    break;
-                case 'BottomCenter':
-                    pos.top += (tipHeight + tipAdjust);
-                    pos.left -= (tooltipEleWidth / 2);
-                    break;
-                case 'BottomLeft':
-                    pos.top += (tipHeight + tipAdjust);
-                    pos.left -= (tooltipEleWidth - tipWidthAdjust);
-                    break;
-                case 'LeftBottom':
-                    pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);
-                    pos.top -= (tipHeightAdjust);
-                    break;
-                case 'LeftCenter':
-                    pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);
-                    pos.top -= (tooltipEleHeight / 2);
-                    break;
-                case 'LeftTop':
-                    pos.left -= (tipWidth + tooltipEleWidth + tipAdjust);
-                    pos.top -= (tooltipEleHeight - tipHeightAdjust);
-                    break;
-                case 'TopLeft':
-                    pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);
-                    pos.left -= (tooltipEleWidth - tipWidthAdjust);
-                    break;
-                case 'TopRight':
-                    pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);
-                    pos.left -= (tipWidthAdjust);
-                    break;
-                default:
-                    pos.top -= (tooltipEleHeight + tipHeight + tipAdjust);
-                    pos.left -= (tooltipEleWidth / 2);
-                    break;
+            else {
+                leftValue = -(tipWidth - 1) + 'px';
+                // Arrow icon aligned -2px from ArrowOuterTip width
+                arrowInnerELe.style.left = (-(tipWidth) + (tipWidth - 2)) + 'px';
             }
-            pos.left += this.offsetX;
-            pos.top += this.offsetY;
-            return pos;
-        };
-        Tooltip.prototype.updateTipPosition = function (position) {
-            var selEle = this.tooltipEle.querySelectorAll('.' + ARROW_TIP + ',.' + ARROW_TIP_OUTER + ',.' + ARROW_TIP_INNER);
-            var removeList = [TIP_BOTTOM, TIP_TOP, TIP_LEFT, TIP_RIGHT];
-            ej2_base_4.removeClass(selEle, removeList);
-            this.setTipClass(position);
-            ej2_base_4.addClass(selEle, this.tipClass);
-        };
-        Tooltip.prototype.adjustArrow = function (target, position, tooltipPositionX, tooltipPositionY) {
-            if (this.showTipPointer === false) {
-                return;
+            var tipPosExclude = tooltipPositionY !== 'Center' || (tooltipHeight > target.offsetHeight) || this.mouseTrail;
+            if ((tipPosExclude && tooltipPositionY === 'Top') || (!tipPosExclude && this.tipPointerPosition === 'End')) {
+                topValue = (tooltipHeight - tipHeight - POINTER_ADJUST) + 'px';
             }
-            this.updateTipPosition(position);
-            var leftValue;
-            var topValue;
-            var tooltipWidth = this.tooltipEle.clientWidth;
-            var tooltipHeight = this.tooltipEle.clientHeight;
-            var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);
-            var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);
-            var tipWidth = arrowEle.offsetWidth;
-            var tipHeight = arrowEle.offsetHeight;
-            if (this.tipClass === TIP_BOTTOM || this.tipClass === TIP_TOP) {
-                if (this.tipClass === TIP_BOTTOM) {
-                    topValue = '99.9%';
-                    // Arrow icon aligned -2px height from ArrowOuterTip div
-                    arrowInnerELe.style.top = '-' + (tipHeight - 2) + 'px';
-                }
-                else {
-                    topValue = -(tipHeight - 1) + 'px';
-                    // Arrow icon aligned -6px height from ArrowOuterTip div
-                    arrowInnerELe.style.top = '-' + (tipHeight - 6) + 'px';
-                }
-                var tipPosExclude = tooltipPositionX !== 'Center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail;
-                if ((tipPosExclude && tooltipPositionX === 'Left') || (!tipPosExclude && this.tipPointerPosition === 'End')) {
-                    leftValue = (tooltipWidth - tipWidth - POINTER_ADJUST) + 'px';
-                }
-                else if ((tipPosExclude && tooltipPositionX === 'Right') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {
-                    leftValue = POINTER_ADJUST + 'px';
-                }
-                else {
-                    leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';
-                }
+            else if ((tipPosExclude && tooltipPositionY === 'Bottom') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {
+                topValue = POINTER_ADJUST + 'px';
             }
             else {
-                if (this.tipClass === TIP_RIGHT) {
-                    leftValue = '99.9%';
-                    // Arrow icon aligned -2px left from ArrowOuterTip div
-                    arrowInnerELe.style.left = '-' + (tipWidth - 2) + 'px';
-                }
-                else {
-                    leftValue = -(tipWidth - 1) + 'px';
-                    // Arrow icon aligned -2px from ArrowOuterTip width
-                    arrowInnerELe.style.left = (-(tipWidth) + (tipWidth - 2)) + 'px';
-                }
-                var tipPosExclude = tooltipPositionY !== 'Center' || (tooltipHeight > target.offsetHeight) || this.mouseTrail;
-                if ((tipPosExclude && tooltipPositionY === 'Top') || (!tipPosExclude && this.tipPointerPosition === 'End')) {
-                    topValue = (tooltipHeight - tipHeight - POINTER_ADJUST) + 'px';
-                }
-                else if ((tipPosExclude && tooltipPositionY === 'Bottom') || (!tipPosExclude && this.tipPointerPosition === 'Start')) {
-                    topValue = POINTER_ADJUST + 'px';
-                }
-                else {
-                    topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';
-                }
+                topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';
             }
-            arrowEle.style.top = topValue;
-            arrowEle.style.left = leftValue;
-        };
-        Tooltip.prototype.renderContent = function (target) {
-            var tooltipContent = this.tooltipEle.querySelector('.' + CONTENT);
-            if (target && !ej2_base_3.isNullOrUndefined(target.getAttribute('title'))) {
-                target.setAttribute('data-content', target.getAttribute('title'));
-                target.removeAttribute('title');
+        }
+        arrowEle.style.top = topValue;
+        arrowEle.style.left = leftValue;
+    };
+    Tooltip.prototype.renderContent = function (target) {
+        var tooltipContent = this.tooltipEle.querySelector('.' + CONTENT);
+        if (target && !isNullOrUndefined(target.getAttribute('title'))) {
+            target.setAttribute('data-content', target.getAttribute('title'));
+            target.removeAttribute('title');
+        }
+        if (!isNullOrUndefined(this.content)) {
+            tooltipContent.innerHTML = '';
+            if (this.content instanceof HTMLElement) {
+                tooltipContent.appendChild(this.content);
             }
-            if (!ej2_base_3.isNullOrUndefined(this.content)) {
-                tooltipContent.innerHTML = '';
-                if (this.content instanceof HTMLElement) {
-                    tooltipContent.appendChild(this.content);
-                }
-                else if (typeof this.content === 'string') {
-                    tooltipContent.innerHTML = this.content;
-                }
-                else {
-                    var templateFunction = ej2_base_1.compile(this.content);
-                    ej2_base_1.append(templateFunction(), tooltipContent);
-                }
+            else if (typeof this.content === 'string') {
+                tooltipContent.innerHTML = this.content;
             }
             else {
-                if (target && !ej2_base_3.isNullOrUndefined(target.getAttribute('data-content'))) {
-                    tooltipContent.innerHTML = target.getAttribute('data-content');
-                }
+                var templateFunction = compile(this.content);
+                append(templateFunction(), tooltipContent);
             }
-        };
-        Tooltip.prototype.renderCloseIcon = function () {
-            if (!this.isSticky) {
-                return;
+        }
+        else {
+            if (target && !isNullOrUndefined(target.getAttribute('data-content'))) {
+                tooltipContent.innerHTML = target.getAttribute('data-content');
             }
-            var tipClose = ej2_base_4.createElement('div', { className: ICON + ' ' + CLOSE });
-            this.tooltipEle.appendChild(tipClose);
-            ej2_base_2.EventHandler.add(tipClose, ej2_base_2.Browser.touchStartEvent, this.onStickyClose, this);
+        }
+    };
+    Tooltip.prototype.renderCloseIcon = function () {
+        if (!this.isSticky) {
+            return;
+        }
+        var tipClose = createElement('div', { className: ICON + ' ' + CLOSE });
+        this.tooltipEle.appendChild(tipClose);
+        EventHandler.add(tipClose, Browser.touchStartEvent, this.onStickyClose, this);
+    };
+    Tooltip.prototype.addDescribedBy = function (target, id) {
+        var describedby = (target.getAttribute('aria-describedby') || '').split(/\s+/);
+        if (describedby.indexOf(id) < 0) {
+            describedby.push(id);
+        }
+        attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });
+    };
+    Tooltip.prototype.removeDescribedBy = function (target) {
+        var id = target.getAttribute('data-tooltip-id');
+        var describedby = (target.getAttribute('aria-describedby') || '').split(/\s+/);
+        var index = describedby.indexOf(id);
+        if (index !== -1) {
+            describedby.splice(index, 1);
+        }
+        target.removeAttribute('data-tooltip-id');
+        var orgdescribedby = describedby.join(' ').trim();
+        if (orgdescribedby) {
+            target.setAttribute('aria-describedby', orgdescribedby);
+        }
+        else {
+            target.removeAttribute('aria-describedby');
+        }
+    };
+    Tooltip.prototype.tapHoldHandler = function (evt) {
+        clearTimeout(this.autoCloseTimer);
+        this.targetHover(evt.originalEvent);
+    };
+    Tooltip.prototype.touchEndHandler = function (e) {
+        var _this = this;
+        if (this.isSticky) {
+            return;
+        }
+        var close = function () {
+            _this.close();
         };
-        Tooltip.prototype.addDescribedBy = function (target, id) {
-            var describedby = (target.getAttribute('aria-describedby') || '').split(/\s+/);
-            if (describedby.indexOf(id) < 0) {
-                describedby.push(id);
+        this.autoCloseTimer = setTimeout(close, TOUCHEND_HIDE_DELAY);
+    };
+    Tooltip.prototype.targetClick = function (e) {
+        var target;
+        if (this.target) {
+            target = closest(e.target, this.target);
+        }
+        else {
+            target = this.element;
+        }
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        if (target.getAttribute('data-tooltip-id') === null) {
+            this.targetHover(e);
+        }
+        else if (!this.isSticky) {
+            this.hideTooltip(this.animation.close, e, target);
+        }
+    };
+    Tooltip.prototype.targetHover = function (e) {
+        var target;
+        if (this.target) {
+            target = closest(e.target, this.target);
+        }
+        else {
+            target = this.element;
+        }
+        if (isNullOrUndefined(target) || target.getAttribute('data-tooltip-id') !== null) {
+            return;
+        }
+        var targetList = [].slice.call(document.querySelectorAll('[data-tooltip-id= ' + this.ctrlId + '_content]'));
+        for (var _i = 0, targetList_1 = targetList; _i < targetList_1.length; _i++) {
+            var target_1 = targetList_1[_i];
+            this.restoreElement(target_1);
+        }
+        this.showTooltip(target, this.animation.open, e);
+        this.wireMouseEvents(e, target);
+    };
+    Tooltip.prototype.showTooltip = function (target, showAnimation, e) {
+        var _this = this;
+        clearTimeout(this.showTimer);
+        clearTimeout(this.hideTimer);
+        this.tooltipEventArgs = e ? { type: e.type, cancel: false, target: target, event: e, element: this.tooltipEle } :
+            { type: null, cancel: false, target: target, event: null, element: this.tooltipEle };
+        this.trigger('beforeRender', this.tooltipEventArgs);
+        if (this.tooltipEventArgs.cancel) {
+            this.isHidden = true;
+            this.clear();
+            return;
+        }
+        this.isHidden = false;
+        if (isNullOrUndefined(this.tooltipEle)) {
+            this.ctrlId = this.element.getAttribute('id') ? getUniqueID(this.element.getAttribute('id')) : getUniqueID('tooltip');
+            this.tooltipEle = createElement('div', {
+                className: TOOLTIP_WRAP + ' ' + POPUP_ROOT, attrs: {
+                    role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'
+                }, styles: 'width:' + formatUnit(this.width) + ';height:' + formatUnit(this.height) + ';position:absolute;'
+            });
+            if (this.cssClass) {
+                addClass([this.tooltipEle], this.cssClass.split(' '));
             }
-            ej2_base_4.attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });
-        };
-        Tooltip.prototype.removeDescribedBy = function (target) {
-            var id = target.getAttribute('data-tooltip-id');
-            var describedby = (target.getAttribute('aria-describedby') || '').split(/\s+/);
-            var index = describedby.indexOf(id);
-            if (index !== -1) {
-                describedby.splice(index, 1);
+            if (Browser.isDevice) {
+                addClass([this.tooltipEle], DEVICE);
             }
-            target.removeAttribute('data-tooltip-id');
-            var orgdescribedby = describedby.join(' ').trim();
-            if (orgdescribedby) {
-                target.setAttribute('aria-describedby', orgdescribedby);
+            if (this.width !== 'auto') {
+                this.tooltipEle.style.maxWidth = formatUnit(this.width);
             }
-            else {
-                target.removeAttribute('aria-describedby');
+            this.tooltipEle.appendChild(createElement('div', { className: CONTENT }));
+            document.body.appendChild(this.tooltipEle);
+            this.addDescribedBy(target, this.ctrlId + '_content');
+            this.renderContent(target);
+            addClass([this.tooltipEle], POPUP_OPEN);
+            if (this.showTipPointer) {
+                this.renderArrow();
             }
+            this.renderCloseIcon();
+            this.renderPopup(target);
+        }
+        else {
+            this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);
+            this.addDescribedBy(target, this.ctrlId + '_content');
+            this.renderContent(target);
+            PopupAnimation.stop(this.tooltipEle);
+            this.reposition(target);
+        }
+        removeClass([this.tooltipEle], POPUP_OPEN);
+        addClass([this.tooltipEle], POPUP_CLOSE);
+        this.tooltipEventArgs = e ? { type: e.type, cancel: false, target: target, event: e, element: this.tooltipEle } :
+            { type: null, cancel: false, target: target, event: null, element: this.tooltipEle };
+        this.trigger('beforeOpen', this.tooltipEventArgs);
+        if (this.tooltipEventArgs.cancel) {
+            this.isHidden = true;
+            this.clear();
+            return;
+        }
+        var openAnimation = {
+            name: showAnimation.effect, duration: showAnimation.duration, delay: showAnimation.delay, timingFunction: 'easeOut'
         };
-        Tooltip.prototype.tapHoldHandler = function (evt) {
-            clearTimeout(this.autoCloseTimer);
-            this.targetHover(evt.originalEvent);
-        };
-        Tooltip.prototype.touchEndHandler = function (e) {
-            var _this = this;
-            if (this.isSticky) {
-                return;
-            }
-            var close = function () {
-                _this.close();
+        if (showAnimation.effect === 'None') {
+            openAnimation = undefined;
+        }
+        if (this.openDelay > 0) {
+            var show = function () {
+                if (_this.popupObj) {
+                    _this.popupObj.show(openAnimation, target);
+                }
             };
-            this.autoCloseTimer = setTimeout(close, TOUCHEND_HIDE_DELAY);
+            this.showTimer = setTimeout(show, this.openDelay);
+        }
+        else {
+            this.popupObj.show(openAnimation, target);
+        }
+    };
+    Tooltip.prototype.checkCollision = function (target, x, y) {
+        var elePos = {
+            left: x, top: y, position: this.position,
+            horizontal: this.tooltipPositionX, vertical: this.tooltipPositionY
         };
-        Tooltip.prototype.targetClick = function (e) {
-            var target;
-            if (this.target) {
-                target = ej2_base_4.closest(e.target, this.target);
+        var affectedPos = isCollide(this.tooltipEle, (this.target ? this.element : null), x, y);
+        if (affectedPos.length > 0) {
+            elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' :
+                this.tooltipPositionX;
+            elePos.vertical = affectedPos.indexOf('top') >= 0 ? 'Bottom' : affectedPos.indexOf('bottom') >= 0 ? 'Top' :
+                this.tooltipPositionY;
+        }
+        return elePos;
+    };
+    Tooltip.prototype.collisionFlipFit = function (target, x, y) {
+        var elePos = this.checkCollision(target, x, y);
+        var newpos = elePos.position;
+        if (this.tooltipPositionY !== elePos.vertical) {
+            newpos = ((this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?
+                elePos.vertical + this.tooltipPositionX : this.tooltipPositionX + elePos.vertical);
+        }
+        if (this.tooltipPositionX !== elePos.horizontal) {
+            if (newpos.indexOf('Left') === 0) {
+                elePos.vertical = (newpos === 'LeftTop' || newpos === 'LeftCenter') ? 'Top' : 'Bottom';
+                newpos = (elePos.vertical + 'Left');
             }
-            else {
-                target = this.element;
+            if (newpos.indexOf('Right') === 0) {
+                elePos.vertical = (newpos === 'RightTop' || newpos === 'RightCenter') ? 'Top' : 'Bottom';
+                newpos = (elePos.vertical + 'Right');
             }
-            if (ej2_base_3.isNullOrUndefined(target)) {
-                return;
-            }
-            if (target.getAttribute('data-tooltip-id') === null) {
-                this.targetHover(e);
-            }
-            else if (!this.isSticky) {
-                this.hideTooltip(this.animation.close, e, target);
-            }
+            elePos.horizontal = this.tooltipPositionX;
+        }
+        this.tooltipEventArgs = {
+            type: null, cancel: false, target: target, event: null,
+            element: this.tooltipEle, collidedPosition: newpos
         };
-        Tooltip.prototype.targetHover = function (e) {
-            var target;
-            if (this.target) {
-                target = ej2_base_4.closest(e.target, this.target);
+        this.trigger('beforeCollision', this.tooltipEventArgs);
+        if (elePos.position !== newpos) {
+            var pos = calculatePosition(target, this.tooltipPositionX, elePos.vertical);
+            this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);
+            var offsetPos = this.calculateTooltipOffset(newpos);
+            elePos.position = newpos;
+            elePos.left = pos.left + offsetPos.left;
+            elePos.top = pos.top + offsetPos.top;
+        }
+        else {
+            this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);
+        }
+        var eleOffset = { left: elePos.left, top: elePos.top };
+        var left = fit(this.tooltipEle, (this.target ? this.element : null), { X: true, Y: false }, eleOffset).left;
+        if (this.showTipPointer && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {
+            var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);
+            var arrowleft = parseInt(arrowEle.style.left, 10) - (left - elePos.left);
+            if (arrowleft < 0) {
+                arrowleft = 0;
             }
-            else {
-                target = this.element;
+            else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {
+                arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;
             }
-            if (ej2_base_3.isNullOrUndefined(target) || target.getAttribute('data-tooltip-id') !== null) {
-                return;
-            }
-            var targetList = [].slice.call(document.querySelectorAll('[data-tooltip-id= ' + this.ctrlId + '_content]'));
-            for (var _i = 0, targetList_1 = targetList; _i < targetList_1.length; _i++) {
-                var target_1 = targetList_1[_i];
-                this.restoreElement(target_1);
-            }
-            this.showTooltip(target, this.animation.open, e);
-            this.wireMouseEvents(e, target);
-        };
-        Tooltip.prototype.showTooltip = function (target, showAnimation, e) {
-            var _this = this;
-            clearTimeout(this.showTimer);
-            clearTimeout(this.hideTimer);
-            this.tooltipEventArgs = e ? { type: e.type, cancel: false, target: target, event: e, element: this.tooltipEle } :
-                { type: null, cancel: false, target: target, event: null, element: this.tooltipEle };
-            this.trigger('beforeRender', this.tooltipEventArgs);
-            if (this.tooltipEventArgs.cancel) {
-                this.isHidden = true;
-                this.clear();
-                return;
-            }
-            this.isHidden = false;
-            if (ej2_base_3.isNullOrUndefined(this.tooltipEle)) {
-                this.ctrlId = this.element.getAttribute('id') ? ej2_base_3.getUniqueID(this.element.getAttribute('id')) : ej2_base_3.getUniqueID('tooltip');
-                this.tooltipEle = ej2_base_4.createElement('div', {
-                    className: TOOLTIP_WRAP + ' ' + POPUP_ROOT, attrs: {
-                        role: 'tooltip', 'aria-hidden': 'false', 'id': this.ctrlId + '_content'
-                    }, styles: 'width:' + ej2_base_3.formatUnit(this.width) + ';height:' + ej2_base_3.formatUnit(this.height) + ';position:absolute;'
-                });
-                if (this.cssClass) {
-                    ej2_base_4.addClass([this.tooltipEle], this.cssClass.split(' '));
-                }
-                if (ej2_base_2.Browser.isDevice) {
-                    ej2_base_4.addClass([this.tooltipEle], DEVICE);
-                }
-                if (this.width !== 'auto') {
-                    this.tooltipEle.style.maxWidth = ej2_base_3.formatUnit(this.width);
-                }
-                this.tooltipEle.appendChild(ej2_base_4.createElement('div', { className: CONTENT }));
-                document.body.appendChild(this.tooltipEle);
-                this.addDescribedBy(target, this.ctrlId + '_content');
-                this.renderContent(target);
-                ej2_base_4.addClass([this.tooltipEle], POPUP_OPEN);
-                if (this.showTipPointer) {
-                    this.renderArrow();
-                }
-                this.renderCloseIcon();
-                this.renderPopup(target);
-            }
-            else {
-                this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);
-                this.addDescribedBy(target, this.ctrlId + '_content');
-                this.renderContent(target);
-                ej2_base_2.Animation.stop(this.tooltipEle);
-                this.reposition(target);
-            }
-            ej2_base_4.removeClass([this.tooltipEle], POPUP_OPEN);
-            ej2_base_4.addClass([this.tooltipEle], POPUP_CLOSE);
-            this.tooltipEventArgs = e ? { type: e.type, cancel: false, target: target, event: e, element: this.tooltipEle } :
-                { type: null, cancel: false, target: target, event: null, element: this.tooltipEle };
-            this.trigger('beforeOpen', this.tooltipEventArgs);
-            if (this.tooltipEventArgs.cancel) {
-                this.isHidden = true;
-                this.clear();
-                return;
-            }
-            var openAnimation = {
-                name: showAnimation.effect, duration: showAnimation.duration, delay: showAnimation.delay, timingFunction: 'easeOut'
+            arrowEle.style.left = arrowleft.toString() + 'px';
+        }
+        eleOffset.left = left;
+        return eleOffset;
+    };
+    Tooltip.prototype.hideTooltip = function (hideAnimation, e, targetElement) {
+        var _this = this;
+        var target;
+        if (e) {
+            target = this.target ? (targetElement || e.target) : this.element;
+            this.tooltipEventArgs = {
+                type: e.type, cancel: false, target: target, event: e, element: this.tooltipEle
             };
-            if (showAnimation.effect === 'None') {
-                openAnimation = undefined;
+        }
+        else {
+            target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');
+            this.tooltipEventArgs = {
+                type: null, cancel: false, target: target, event: null, element: this.tooltipEle
+            };
+        }
+        if (isNullOrUndefined(target)) {
+            return;
+        }
+        this.trigger('beforeClose', this.tooltipEventArgs);
+        if (!this.tooltipEventArgs.cancel) {
+            this.restoreElement(target);
+            this.isHidden = true;
+            var closeAnimation_1 = {
+                name: hideAnimation.effect, duration: hideAnimation.duration, delay: hideAnimation.delay, timingFunction: 'easeIn'
+            };
+            if (hideAnimation.effect === 'None') {
+                closeAnimation_1 = undefined;
             }
-            if (this.openDelay > 0) {
-                var show = function () {
+            if (this.closeDelay > 0) {
+                var hide = function () {
                     if (_this.popupObj) {
-                        _this.popupObj.show(openAnimation);
+                        _this.popupObj.hide(closeAnimation_1);
                     }
                 };
-                this.showTimer = setTimeout(show, this.openDelay);
+                this.hideTimer = setTimeout(hide, this.closeDelay);
             }
             else {
-                this.popupObj.show(openAnimation);
+                this.popupObj.hide(closeAnimation_1);
             }
-        };
-        Tooltip.prototype.checkCollision = function (target, x, y) {
-            var elePos = {
-                left: x, top: y, position: this.position,
-                horizontal: this.tooltipPositionX, vertical: this.tooltipPositionY
-            };
-            var affectedPos = collision_1.isCollide(this.tooltipEle, (this.target ? this.element : null), x, y);
-            if (affectedPos.length > 0) {
-                elePos.horizontal = affectedPos.indexOf('left') >= 0 ? 'Right' : affectedPos.indexOf('right') >= 0 ? 'Left' :
-                    this.tooltipPositionX;
-                elePos.vertical = affectedPos.indexOf('top') >= 0 ? 'Bottom' : affectedPos.indexOf('bottom') >= 0 ? 'Top' :
-                    this.tooltipPositionY;
+        }
+        else {
+            this.isHidden = false;
+        }
+    };
+    Tooltip.prototype.restoreElement = function (target) {
+        this.unwireMouseEvents(target);
+        if (!isNullOrUndefined(target.getAttribute('data-content'))) {
+            target.setAttribute('title', target.getAttribute('data-content'));
+            target.removeAttribute('data-content');
+        }
+        this.removeDescribedBy(target);
+    };
+    Tooltip.prototype.clear = function () {
+        if (this.tooltipEle) {
+            removeClass([this.tooltipEle], POPUP_CLOSE);
+            addClass([this.tooltipEle], POPUP_OPEN);
+        }
+        if (this.isHidden) {
+            if (this.popupObj) {
+                this.popupObj.destroy();
             }
-            return elePos;
-        };
-        Tooltip.prototype.collisionFlipFit = function (target, x, y) {
-            var elePos = this.checkCollision(target, x, y);
-            var newpos = elePos.position;
-            if (this.tooltipPositionY !== elePos.vertical) {
-                newpos = ((this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?
-                    elePos.vertical + this.tooltipPositionX : this.tooltipPositionX + elePos.vertical);
+            if (this.tooltipEle) {
+                remove(this.tooltipEle);
             }
-            if (this.tooltipPositionX !== elePos.horizontal) {
-                if (newpos.indexOf('Left') === 0) {
-                    elePos.vertical = (newpos === 'LeftTop' || newpos === 'LeftCenter') ? 'Top' : 'Bottom';
-                    newpos = (elePos.vertical + 'Left');
-                }
-                if (newpos.indexOf('Right') === 0) {
-                    elePos.vertical = (newpos === 'RightTop' || newpos === 'RightCenter') ? 'Top' : 'Bottom';
-                    newpos = (elePos.vertical + 'Right');
-                }
-                elePos.horizontal = this.tooltipPositionX;
+            this.tooltipEle = null;
+            this.popupObj = null;
+        }
+    };
+    Tooltip.prototype.onMouseOut = function (e) {
+        this.hideTooltip(this.animation.close, e);
+    };
+    Tooltip.prototype.onStickyClose = function (e) {
+        this.close();
+    };
+    Tooltip.prototype.onMouseMove = function (event) {
+        var eventPageX = 0;
+        var eventPageY = 0;
+        if (event.type.indexOf('touch') > -1) {
+            event.preventDefault();
+            eventPageX = event.touches[0].pageX;
+            eventPageY = event.touches[0].pageY;
+        }
+        else {
+            eventPageX = event.pageX;
+            eventPageY = event.pageY;
+        }
+        PopupAnimation.stop(this.tooltipEle);
+        removeClass([this.tooltipEle], POPUP_CLOSE);
+        addClass([this.tooltipEle], POPUP_OPEN);
+        this.adjustArrow(event.target, this.position, this.tooltipPositionX, this.tooltipPositionY);
+        var pos = this.calculateTooltipOffset(this.position);
+        var x = eventPageX + pos.left + this.offsetX;
+        var y = eventPageY + pos.top + this.offsetY;
+        var elePos = this.checkCollision(event.target, x, y);
+        if (this.tooltipPositionX !== elePos.horizontal || this.tooltipPositionY !== elePos.vertical) {
+            var newpos = (this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?
+                elePos.vertical + elePos.horizontal : elePos.horizontal + elePos.vertical;
+            elePos.position = newpos;
+            this.adjustArrow(event.target, elePos.position, elePos.horizontal, elePos.vertical);
+            var colpos = this.calculateTooltipOffset(elePos.position);
+            elePos.left = eventPageX + colpos.left - this.offsetX;
+            elePos.top = eventPageY + colpos.top - this.offsetY;
+        }
+        this.tooltipEle.style.left = elePos.left + 'px';
+        this.tooltipEle.style.top = elePos.top + 'px';
+    };
+    Tooltip.prototype.keyDown = function (event) {
+        if (this.tooltipEle && event.keyCode === 27) {
+            this.close();
+        }
+    };
+    Tooltip.prototype.touchEnd = function (e) {
+        if (this.tooltipEle && closest(e.target, '.' + ROOT) === null) {
+            this.close();
+        }
+    };
+    Tooltip.prototype.scrollHandler = function (e) {
+        if (this.tooltipEle) {
+            this.close();
+        }
+    };
+    /**
+     * Core method that initializes the control rendering.
+     * @private
+     */
+    Tooltip.prototype.render = function () {
+        this.initialize();
+        this.wireEvents(this.opensOn);
+    };
+    /**
+     * Initializes the values of private members.
+     * @private
+     */
+    Tooltip.prototype.preRender = function () {
+        this.tipClass = TIP_BOTTOM;
+        this.tooltipPositionX = 'Center';
+        this.tooltipPositionY = 'Top';
+        this.isHidden = true;
+    };
+    /**
+     * Binding events to the Tooltip element.
+     * @hidden
+     */
+    Tooltip.prototype.wireEvents = function (trigger) {
+        var triggerList = this.getTriggerList(trigger);
+        for (var _i = 0, triggerList_1 = triggerList; _i < triggerList_1.length; _i++) {
+            var opensOn = triggerList_1[_i];
+            if (opensOn === 'Custom') {
+                return;
             }
-            this.tooltipEventArgs = {
-                type: null, cancel: false, target: target, event: null,
-                element: this.tooltipEle, collidedPosition: newpos
-            };
-            this.trigger('beforeCollision', this.tooltipEventArgs);
-            if (elePos.position !== newpos) {
-                var pos = position_1.calculatePosition(target, this.tooltipPositionX, elePos.vertical);
-                this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);
-                var offsetPos = this.calculateTooltipOffset(newpos);
-                elePos.position = newpos;
-                elePos.left = pos.left + offsetPos.left;
-                elePos.top = pos.top + offsetPos.top;
+            if (opensOn === 'Focus') {
+                this.wireFocusEvents();
             }
-            else {
-                this.adjustArrow(target, newpos, elePos.horizontal, elePos.vertical);
+            if (opensOn === 'Click') {
+                EventHandler.add(this.element, Browser.touchStartEvent, this.targetClick, this);
             }
-            var eleOffset = { left: elePos.left, top: elePos.top };
-            var left = collision_1.fit(this.tooltipEle, (this.target ? this.element : null), { X: true, Y: false }, eleOffset).left;
-            if (this.showTipPointer && (newpos.indexOf('Bottom') === 0 || newpos.indexOf('Top') === 0)) {
-                var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);
-                var arrowleft = parseInt(arrowEle.style.left, 10) - (left - elePos.left);
-                if (arrowleft < 0) {
-                    arrowleft = 0;
+            if (opensOn === 'Hover') {
+                if (Browser.isDevice) {
+                    this.touchModule = new Touch(this.element, {
+                        tapHoldThreshold: TAPHOLD_THRESHOLD,
+                        tapHold: this.tapHoldHandler.bind(this)
+                    });
+                    EventHandler.add(this.element, Browser.touchEndEvent, this.touchEndHandler, this);
                 }
-                else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {
-                    arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;
+                else {
+                    EventHandler.add(this.element, 'mouseover', this.targetHover, this);
                 }
-                arrowEle.style.left = arrowleft.toString() + 'px';
             }
-            eleOffset.left = left;
-            return eleOffset;
-        };
-        Tooltip.prototype.hideTooltip = function (hideAnimation, e, targetElement) {
-            var _this = this;
-            var target;
-            if (e) {
-                target = this.target ? (targetElement || e.target) : this.element;
-                this.tooltipEventArgs = {
-                    type: e.type, cancel: false, target: target, event: e, element: this.tooltipEle
-                };
+        }
+        EventHandler.add(document, 'touchend', this.touchEnd, this);
+        EventHandler.add(document, 'scroll', this.scrollHandler, this);
+        EventHandler.add(document, 'keydown', this.keyDown, this);
+    };
+    Tooltip.prototype.getTriggerList = function (trigger) {
+        if (trigger === 'Auto') {
+            trigger = (Browser.isDevice) ? 'Hover' : 'Hover Focus';
+        }
+        return trigger.split(' ');
+    };
+    Tooltip.prototype.wireFocusEvents = function () {
+        if (!isNullOrUndefined(this.target)) {
+            var targetList = [].slice.call(this.element.querySelectorAll(this.target));
+            for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {
+                var target = targetList_2[_i];
+                EventHandler.add(target, 'focus', this.targetHover, this);
             }
-            else {
-                target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');
-                this.tooltipEventArgs = {
-                    type: null, cancel: false, target: target, event: null, element: this.tooltipEle
-                };
-            }
-            if (ej2_base_3.isNullOrUndefined(target)) {
-                return;
-            }
-            this.trigger('beforeClose', this.tooltipEventArgs);
-            if (!this.tooltipEventArgs.cancel) {
-                this.restoreElement(target);
-                this.isHidden = true;
-                var closeAnimation_1 = {
-                    name: hideAnimation.effect, duration: hideAnimation.duration, delay: hideAnimation.delay, timingFunction: 'easeIn'
-                };
-                if (hideAnimation.effect === 'None') {
-                    closeAnimation_1 = undefined;
+        }
+        else {
+            EventHandler.add(this.element, 'focus', this.targetHover, this);
+        }
+    };
+    Tooltip.prototype.wireMouseEvents = function (e, target) {
+        if (this.tooltipEle) {
+            if (!this.isSticky) {
+                if (e.type === 'focus') {
+                    EventHandler.add(target, 'blur', this.onMouseOut, this);
                 }
-                if (this.closeDelay > 0) {
-                    var hide = function () {
-                        if (_this.popupObj) {
-                            _this.popupObj.hide(closeAnimation_1);
-                        }
-                    };
-                    this.hideTimer = setTimeout(hide, this.closeDelay);
+                if (e.type === 'mouseover') {
+                    EventHandler.add(target, 'mouseleave', this.onMouseOut, this);
                 }
-                else {
-                    this.popupObj.hide(closeAnimation_1);
-                }
             }
-            else {
-                this.isHidden = false;
+            if (this.mouseTrail) {
+                EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);
             }
-        };
-        Tooltip.prototype.restoreElement = function (target) {
-            this.unwireMouseEvents(target);
-            if (!ej2_base_3.isNullOrUndefined(target.getAttribute('data-content'))) {
-                target.setAttribute('title', target.getAttribute('data-content'));
-                target.removeAttribute('data-content');
+        }
+    };
+    /**
+     * Unbinding events from the element on widget destroy.
+     * @hidden
+     */
+    Tooltip.prototype.unwireEvents = function (trigger) {
+        var triggerList = this.getTriggerList(trigger);
+        for (var _i = 0, triggerList_2 = triggerList; _i < triggerList_2.length; _i++) {
+            var opensOn = triggerList_2[_i];
+            if (opensOn === 'Custom') {
+                return;
             }
-            this.removeDescribedBy(target);
-        };
-        Tooltip.prototype.clear = function () {
-            if (this.tooltipEle) {
-                ej2_base_4.removeClass([this.tooltipEle], POPUP_CLOSE);
-                ej2_base_4.addClass([this.tooltipEle], POPUP_OPEN);
+            if (opensOn === 'Focus') {
+                this.unwireFocusEvents();
             }
-            if (this.isHidden) {
-                if (this.popupObj) {
-                    this.popupObj.destroy();
+            if (opensOn === 'Click') {
+                EventHandler.remove(this.element, Browser.touchStartEvent, this.targetClick);
+            }
+            if (opensOn === 'Hover') {
+                if (Browser.isDevice) {
+                    if (this.touchModule) {
+                        this.touchModule.destroy();
+                    }
+                    EventHandler.remove(this.element, Browser.touchEndEvent, this.touchEndHandler);
                 }
-                if (this.tooltipEle) {
-                    ej2_base_4.remove(this.tooltipEle);
+                else {
+                    EventHandler.remove(this.element, 'mouseover', this.targetHover);
                 }
-                this.tooltipEle = null;
-                this.popupObj = null;
             }
-        };
-        Tooltip.prototype.onMouseOut = function (e) {
-            this.hideTooltip(this.animation.close, e);
-        };
-        Tooltip.prototype.onStickyClose = function (e) {
-            this.close();
-        };
-        Tooltip.prototype.onMouseMove = function (event) {
-            var eventPageX = 0;
-            var eventPageY = 0;
-            if (event.type.indexOf('touch') > -1) {
-                event.preventDefault();
-                eventPageX = event.touches[0].pageX;
-                eventPageY = event.touches[0].pageY;
+        }
+        EventHandler.remove(document, 'touchend', this.touchEnd);
+        EventHandler.remove(document, 'scroll', this.scrollHandler);
+        EventHandler.remove(document, 'keydown', this.keyDown);
+    };
+    Tooltip.prototype.unwireFocusEvents = function () {
+        if (!isNullOrUndefined(this.target)) {
+            var targetList = [].slice.call(this.element.querySelectorAll(this.target));
+            for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {
+                var target = targetList_3[_i];
+                EventHandler.remove(target, 'focus', this.targetHover);
             }
-            else {
-                eventPageX = event.pageX;
-                eventPageY = event.pageY;
-            }
-            ej2_base_2.Animation.stop(this.tooltipEle);
-            ej2_base_4.removeClass([this.tooltipEle], POPUP_CLOSE);
-            ej2_base_4.addClass([this.tooltipEle], POPUP_OPEN);
-            this.adjustArrow(event.target, this.position, this.tooltipPositionX, this.tooltipPositionY);
-            var pos = this.calculateTooltipOffset(this.position);
-            var x = eventPageX + pos.left + this.offsetX;
-            var y = eventPageY + pos.top + this.offsetY;
-            var elePos = this.checkCollision(event.target, x, y);
-            if (this.tooltipPositionX !== elePos.horizontal || this.tooltipPositionY !== elePos.vertical) {
-                var newpos = (this.position.indexOf('Bottom') === 0 || this.position.indexOf('Top') === 0) ?
-                    elePos.vertical + elePos.horizontal : elePos.horizontal + elePos.vertical;
-                elePos.position = newpos;
-                this.adjustArrow(event.target, elePos.position, elePos.horizontal, elePos.vertical);
-                var colpos = this.calculateTooltipOffset(elePos.position);
-                elePos.left = eventPageX + colpos.left - this.offsetX;
-                elePos.top = eventPageY + colpos.top - this.offsetY;
-            }
-            this.tooltipEle.style.left = elePos.left + 'px';
-            this.tooltipEle.style.top = elePos.top + 'px';
-        };
-        Tooltip.prototype.keyDown = function (event) {
-            if (this.tooltipEle && event.keyCode === 27) {
-                this.close();
-            }
-        };
-        Tooltip.prototype.touchEnd = function (e) {
-            if (this.tooltipEle && ej2_base_4.closest(e.target, '.' + ROOT) === null) {
-                this.close();
-            }
-        };
-        Tooltip.prototype.scrollHandler = function (e) {
-            if (this.tooltipEle) {
-                this.close();
-            }
-        };
-        /**
-         * Core method that initializes the control rendering.
-         * @private
-         */
-        Tooltip.prototype.render = function () {
-            this.initialize();
-            this.wireEvents(this.opensOn);
-        };
-        /**
-         * Initializes the values of private members.
-         * @private
-         */
-        Tooltip.prototype.preRender = function () {
-            this.tipClass = TIP_BOTTOM;
-            this.tooltipPositionX = 'Center';
-            this.tooltipPositionY = 'Top';
-            this.isHidden = true;
-        };
-        /**
-         * Binding events to the Tooltip element.
-         * @hidden
-         */
-        Tooltip.prototype.wireEvents = function (trigger) {
-            var triggerList = this.getTriggerList(trigger);
-            for (var _i = 0, triggerList_1 = triggerList; _i < triggerList_1.length; _i++) {
-                var opensOn = triggerList_1[_i];
-                if (opensOn === 'Custom') {
-                    return;
-                }
+        }
+        else {
+            EventHandler.remove(this.element, 'focus', this.targetHover);
+        }
+    };
+    Tooltip.prototype.unwireMouseEvents = function (target) {
+        if (!this.isSticky) {
+            var triggerList = this.getTriggerList(this.opensOn);
+            for (var _i = 0, triggerList_3 = triggerList; _i < triggerList_3.length; _i++) {
+                var opensOn = triggerList_3[_i];
                 if (opensOn === 'Focus') {
-                    this.wireFocusEvents();
+                    EventHandler.remove(target, 'blur', this.onMouseOut);
                 }
-                if (opensOn === 'Click') {
-                    ej2_base_2.EventHandler.add(this.element, ej2_base_2.Browser.touchStartEvent, this.targetClick, this);
+                if (opensOn === 'Hover' && !Browser.isDevice) {
+                    EventHandler.remove(target, 'mouseleave', this.onMouseOut);
                 }
-                if (opensOn === 'Hover') {
-                    if (ej2_base_2.Browser.isDevice) {
-                        this.touchModule = new ej2_base_2.Touch(this.element, {
-                            tapHoldThreshold: TAPHOLD_THRESHOLD,
-                            tapHold: this.tapHoldHandler.bind(this)
-                        });
-                        ej2_base_2.EventHandler.add(this.element, ej2_base_2.Browser.touchEndEvent, this.touchEndHandler, this);
+            }
+        }
+        if (this.mouseTrail) {
+            EventHandler.remove(target, 'mousemove touchstart mouseenter', this.onMouseMove);
+        }
+    };
+    /**
+     * Core method to return the component name.
+     * @private
+     */
+    Tooltip.prototype.getModuleName = function () {
+        return 'tooltip';
+    };
+    /**
+     * Returns the properties to be maintained in the persisted state.
+     * @private
+     */
+    Tooltip.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    /**
+     * Called internally, if any of the property value changed.
+     * @private
+     */
+    Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'width':
+                    if (this.tooltipEle) {
+                        this.tooltipEle.style.width = formatUnit(newProp.width);
                     }
-                    else {
-                        ej2_base_2.EventHandler.add(this.element, 'mouseover', this.targetHover, this);
+                    break;
+                case 'height':
+                    if (this.tooltipEle) {
+                        this.tooltipEle.style.height = formatUnit(newProp.height);
                     }
-                }
-            }
-            ej2_base_2.EventHandler.add(document, 'touchend', this.touchEnd, this);
-            ej2_base_2.EventHandler.add(document, 'scroll', this.scrollHandler, this);
-            ej2_base_2.EventHandler.add(document, 'keydown', this.keyDown, this);
-        };
-        Tooltip.prototype.getTriggerList = function (trigger) {
-            if (trigger === 'Auto') {
-                trigger = (ej2_base_2.Browser.isDevice) ? 'Hover' : 'Hover Focus';
-            }
-            return trigger.split(' ');
-        };
-        Tooltip.prototype.wireFocusEvents = function () {
-            if (!ej2_base_3.isNullOrUndefined(this.target)) {
-                var targetList = [].slice.call(this.element.querySelectorAll(this.target));
-                for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {
-                    var target = targetList_2[_i];
-                    ej2_base_2.EventHandler.add(target, 'focus', this.targetHover, this);
-                }
-            }
-            else {
-                ej2_base_2.EventHandler.add(this.element, 'focus', this.targetHover, this);
-            }
-        };
-        Tooltip.prototype.wireMouseEvents = function (e, target) {
-            if (this.tooltipEle) {
-                if (!this.isSticky) {
-                    if (e.type === 'focus') {
-                        ej2_base_2.EventHandler.add(target, 'blur', this.onMouseOut, this);
+                    break;
+                case 'content':
+                    if (this.tooltipEle) {
+                        this.renderContent();
                     }
-                    if (e.type === 'mouseover') {
-                        ej2_base_2.EventHandler.add(target, 'mouseleave', this.onMouseOut, this);
+                    break;
+                case 'opensOn':
+                    this.unwireEvents(oldProp.opensOn);
+                    this.wireEvents(newProp.opensOn);
+                    break;
+                case 'position':
+                    this.formatPosition();
+                    var target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');
+                    if (this.tooltipEle && target) {
+                        var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);
+                        arrowInnerELe.style.top = arrowInnerELe.style.left = null;
+                        this.reposition(target);
                     }
-                }
-                if (this.mouseTrail) {
-                    ej2_base_2.EventHandler.add(target, 'mousemove touchstart mouseenter', this.onMouseMove, this);
-                }
-            }
-        };
-        /**
-         * Unbinding events from the element on widget destroy.
-         * @hidden
-         */
-        Tooltip.prototype.unwireEvents = function (trigger) {
-            var triggerList = this.getTriggerList(trigger);
-            for (var _i = 0, triggerList_2 = triggerList; _i < triggerList_2.length; _i++) {
-                var opensOn = triggerList_2[_i];
-                if (opensOn === 'Custom') {
-                    return;
-                }
-                if (opensOn === 'Focus') {
-                    this.unwireFocusEvents();
-                }
-                if (opensOn === 'Click') {
-                    ej2_base_2.EventHandler.remove(this.element, ej2_base_2.Browser.touchStartEvent, this.targetClick);
-                }
-                if (opensOn === 'Hover') {
-                    if (ej2_base_2.Browser.isDevice) {
-                        if (this.touchModule) {
-                            this.touchModule.destroy();
-                        }
-                        ej2_base_2.EventHandler.remove(this.element, ej2_base_2.Browser.touchEndEvent, this.touchEndHandler);
+                    break;
+                case 'tipPointerPosition':
+                    var trgt = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');
+                    if (this.tooltipEle && trgt) {
+                        this.reposition(trgt);
                     }
-                    else {
-                        ej2_base_2.EventHandler.remove(this.element, 'mouseover', this.targetHover);
+                    break;
+                case 'offsetX':
+                    if (this.tooltipEle) {
+                        var x = newProp.offsetX - oldProp.offsetX;
+                        this.tooltipEle.style.left = (parseInt(this.tooltipEle.style.left, 10) + (x)).toString() + 'px';
                     }
-                }
-            }
-            ej2_base_2.EventHandler.remove(document, 'touchend', this.touchEnd);
-            ej2_base_2.EventHandler.remove(document, 'scroll', this.scrollHandler);
-            ej2_base_2.EventHandler.remove(document, 'keydown', this.keyDown);
-        };
-        Tooltip.prototype.unwireFocusEvents = function () {
-            if (!ej2_base_3.isNullOrUndefined(this.target)) {
-                var targetList = [].slice.call(this.element.querySelectorAll(this.target));
-                for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {
-                    var target = targetList_3[_i];
-                    ej2_base_2.EventHandler.remove(target, 'focus', this.targetHover);
-                }
-            }
-            else {
-                ej2_base_2.EventHandler.remove(this.element, 'focus', this.targetHover);
-            }
-        };
-        Tooltip.prototype.unwireMouseEvents = function (target) {
-            if (!this.isSticky) {
-                var triggerList = this.getTriggerList(this.opensOn);
-                for (var _i = 0, triggerList_3 = triggerList; _i < triggerList_3.length; _i++) {
-                    var opensOn = triggerList_3[_i];
-                    if (opensOn === 'Focus') {
-                        ej2_base_2.EventHandler.remove(target, 'blur', this.onMouseOut);
+                    break;
+                case 'offsetY':
+                    if (this.tooltipEle) {
+                        var y = newProp.offsetY - oldProp.offsetY;
+                        this.tooltipEle.style.top = (parseInt(this.tooltipEle.style.top, 10) + (y)).toString() + 'px';
                     }
-                    if (opensOn === 'Hover' && !ej2_base_2.Browser.isDevice) {
-                        ej2_base_2.EventHandler.remove(target, 'mouseleave', this.onMouseOut);
-                    }
-                }
-            }
-            if (this.mouseTrail) {
-                ej2_base_2.EventHandler.remove(target, 'mousemove touchstart mouseenter', this.onMouseMove);
-            }
-        };
-        /**
-         * Core method to return the component name.
-         * @private
-         */
-        Tooltip.prototype.getModuleName = function () {
-            return 'tooltip';
-        };
-        /**
-         * Returns the properties to be maintained in the persisted state.
-         * @private
-         */
-        Tooltip.prototype.getPersistData = function () {
-            return this.addOnPersist([]);
-        };
-        /**
-         * Called internally, if any of the property value changed.
-         * @private
-         */
-        Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {
-            for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
-                var prop = _a[_i];
-                switch (prop) {
-                    case 'width':
-                        if (this.tooltipEle) {
-                            this.tooltipEle.style.width = ej2_base_3.formatUnit(newProp.width);
+                    break;
+                case 'cssClass':
+                    if (this.tooltipEle) {
+                        if (oldProp.cssClass) {
+                            removeClass([this.tooltipEle], oldProp.cssClass.split(' '));
                         }
-                        break;
-                    case 'height':
-                        if (this.tooltipEle) {
-                            this.tooltipEle.style.height = ej2_base_3.formatUnit(newProp.height);
+                        if (newProp.cssClass) {
+                            addClass([this.tooltipEle], newProp.cssClass.split(' '));
                         }
-                        break;
-                    case 'content':
-                        if (this.tooltipEle) {
-                            this.renderContent();
+                    }
+                    break;
+                case 'enableRtl':
+                    if (this.tooltipEle) {
+                        if (this.enableRtl) {
+                            addClass([this.tooltipEle], RTL);
                         }
-                        break;
-                    case 'opensOn':
-                        this.unwireEvents(oldProp.opensOn);
-                        this.wireEvents(newProp.opensOn);
-                        break;
-                    case 'position':
-                        this.formatPosition();
-                        var target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');
-                        if (this.tooltipEle && target) {
-                            var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);
-                            arrowInnerELe.style.top = arrowInnerELe.style.left = null;
-                            this.reposition(target);
+                        else {
+                            removeClass([this.tooltipEle], RTL);
                         }
-                        break;
-                    case 'tipPointerPosition':
-                        var trgt = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');
-                        if (this.tooltipEle && trgt) {
-                            this.reposition(trgt);
-                        }
-                        break;
-                    case 'offsetX':
-                        if (this.tooltipEle) {
-                            var x = newProp.offsetX - oldProp.offsetX;
-                            this.tooltipEle.style.left = (parseInt(this.tooltipEle.style.left, 10) + (x)).toString() + 'px';
-                        }
-                        break;
-                    case 'offsetY':
-                        if (this.tooltipEle) {
-                            var y = newProp.offsetY - oldProp.offsetY;
-                            this.tooltipEle.style.top = (parseInt(this.tooltipEle.style.top, 10) + (y)).toString() + 'px';
-                        }
-                        break;
-                    case 'cssClass':
-                        if (this.tooltipEle) {
-                            if (oldProp.cssClass) {
-                                ej2_base_4.removeClass([this.tooltipEle], oldProp.cssClass.split(' '));
-                            }
-                            if (newProp.cssClass) {
-                                ej2_base_4.addClass([this.tooltipEle], newProp.cssClass.split(' '));
-                            }
-                        }
-                        break;
-                    case 'enableRtl':
-                        if (this.tooltipEle) {
-                            if (this.enableRtl) {
-                                ej2_base_4.addClass([this.tooltipEle], RTL);
-                            }
-                            else {
-                                ej2_base_4.removeClass([this.tooltipEle], RTL);
-                            }
-                        }
-                        break;
-                }
+                    }
+                    break;
             }
-        };
-        /**
-         * It is used to show the Tooltip on the specified target with specific animation settings.
-         * @param element Target element where the Tooltip is to be displayed.
-         * @param animation Sets the specific animation, while showing the Tooltip on the screen.
-         * @return {void}
-         */
-        Tooltip.prototype.open = function (element, animation) {
-            if (animation === void 0) { animation = this.animation.open; }
-            if (element.style.display === 'none') {
-                return;
-            }
-            this.showTooltip(element, animation);
-        };
-        /**
-         * It is used to hide the Tooltip with specific animation effect.
-         * @param animation Sets the specific animation when hiding Tooltip from the screen.
-         * @return {void}
-         */
-        Tooltip.prototype.close = function (animation) {
-            if (animation === void 0) { animation = this.animation.close; }
-            this.hideTooltip(animation);
-        };
-        /**
-         * It is used to refresh the Tooltip content and its position.
-         * @param target Target element where the Tooltip content or position needs to be refreshed.
-         * @return {void}
-         */
-        Tooltip.prototype.refresh = function (target) {
-            if (this.tooltipEle) {
-                this.renderContent(target);
-            }
-            if (this.popupObj && target) {
-                this.reposition(target);
-            }
-        };
-        /**
-         * It is used to destroy the Tooltip component.
-         * @method destroy
-         * @return {void}
-         * @memberof Tooltip
-         */
-        Tooltip.prototype.destroy = function () {
-            _super.prototype.destroy.call(this);
-            ej2_base_4.removeClass([this.element], ROOT);
-            this.unwireEvents(this.opensOn);
-            if (this.popupObj) {
-                this.popupObj.destroy();
-            }
-            if (this.tooltipEle) {
-                ej2_base_4.remove(this.tooltipEle);
-            }
-            this.tooltipEle = null;
-            this.popupObj = null;
-        };
-        __decorate([
-            ej2_base_1.Property('auto')
-        ], Tooltip.prototype, "width", void 0);
-        __decorate([
-            ej2_base_1.Property('auto')
-        ], Tooltip.prototype, "height", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Tooltip.prototype, "content", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Tooltip.prototype, "target", void 0);
-        __decorate([
-            ej2_base_1.Property('TopCenter')
-        ], Tooltip.prototype, "position", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], Tooltip.prototype, "offsetX", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], Tooltip.prototype, "offsetY", void 0);
-        __decorate([
-            ej2_base_1.Property(true)
-        ], Tooltip.prototype, "showTipPointer", void 0);
-        __decorate([
-            ej2_base_1.Property('Auto')
-        ], Tooltip.prototype, "tipPointerPosition", void 0);
-        __decorate([
-            ej2_base_1.Property('Auto')
-        ], Tooltip.prototype, "opensOn", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Tooltip.prototype, "mouseTrail", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Tooltip.prototype, "isSticky", void 0);
-        __decorate([
-            ej2_base_5.Complex({}, Animation)
-        ], Tooltip.prototype, "animation", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], Tooltip.prototype, "openDelay", void 0);
-        __decorate([
-            ej2_base_1.Property(0)
-        ], Tooltip.prototype, "closeDelay", void 0);
-        __decorate([
-            ej2_base_1.Property()
-        ], Tooltip.prototype, "cssClass", void 0);
-        __decorate([
-            ej2_base_1.Property(false)
-        ], Tooltip.prototype, "enableRtl", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "beforeRender", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "beforeOpen", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "afterOpen", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "beforeClose", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "afterClose", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "beforeCollision", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "created", void 0);
-        __decorate([
-            ej2_base_1.Event()
-        ], Tooltip.prototype, "destroyed", void 0);
-        Tooltip = __decorate([
-            ej2_base_5.NotifyPropertyChanges
-        ], Tooltip);
-        return Tooltip;
-    }(ej2_base_1.Component));
-    exports.Tooltip = Tooltip;
-});
+        }
+    };
+    /**
+     * It is used to show the Tooltip on the specified target with specific animation settings.
+     * @param element Target element where the Tooltip is to be displayed.
+     * @param animation Sets the specific animation, while showing the Tooltip on the screen.
+     * @return {void}
+     */
+    Tooltip.prototype.open = function (element, animation) {
+        if (animation === void 0) { animation = this.animation.open; }
+        if (element.style.display === 'none') {
+            return;
+        }
+        this.showTooltip(element, animation);
+    };
+    /**
+     * It is used to hide the Tooltip with specific animation effect.
+     * @param animation Sets the specific animation when hiding Tooltip from the screen.
+     * @return {void}
+     */
+    Tooltip.prototype.close = function (animation) {
+        if (animation === void 0) { animation = this.animation.close; }
+        this.hideTooltip(animation);
+    };
+    /**
+     * It is used to refresh the Tooltip content and its position.
+     * @param target Target element where the Tooltip content or position needs to be refreshed.
+     * @return {void}
+     */
+    Tooltip.prototype.refresh = function (target) {
+        if (this.tooltipEle) {
+            this.renderContent(target);
+        }
+        if (this.popupObj && target) {
+            this.reposition(target);
+        }
+    };
+    /**
+     * It is used to destroy the Tooltip component.
+     * @method destroy
+     * @return {void}
+     * @memberof Tooltip
+     */
+    Tooltip.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        removeClass([this.element], ROOT);
+        this.unwireEvents(this.opensOn);
+        if (this.popupObj) {
+            this.popupObj.destroy();
+        }
+        if (this.tooltipEle) {
+            remove(this.tooltipEle);
+        }
+        this.tooltipEle = null;
+        this.popupObj = null;
+    };
+    __decorate([
+        Property('auto')
+    ], Tooltip.prototype, "width", void 0);
+    __decorate([
+        Property('auto')
+    ], Tooltip.prototype, "height", void 0);
+    __decorate([
+        Property()
+    ], Tooltip.prototype, "content", void 0);
+    __decorate([
+        Property()
+    ], Tooltip.prototype, "target", void 0);
+    __decorate([
+        Property('TopCenter')
+    ], Tooltip.prototype, "position", void 0);
+    __decorate([
+        Property(0)
+    ], Tooltip.prototype, "offsetX", void 0);
+    __decorate([
+        Property(0)
+    ], Tooltip.prototype, "offsetY", void 0);
+    __decorate([
+        Property(true)
+    ], Tooltip.prototype, "showTipPointer", void 0);
+    __decorate([
+        Property('Auto')
+    ], Tooltip.prototype, "tipPointerPosition", void 0);
+    __decorate([
+        Property('Auto')
+    ], Tooltip.prototype, "opensOn", void 0);
+    __decorate([
+        Property(false)
+    ], Tooltip.prototype, "mouseTrail", void 0);
+    __decorate([
+        Property(false)
+    ], Tooltip.prototype, "isSticky", void 0);
+    __decorate([
+        Complex({}, Animation)
+    ], Tooltip.prototype, "animation", void 0);
+    __decorate([
+        Property(0)
+    ], Tooltip.prototype, "openDelay", void 0);
+    __decorate([
+        Property(0)
+    ], Tooltip.prototype, "closeDelay", void 0);
+    __decorate([
+        Property()
+    ], Tooltip.prototype, "cssClass", void 0);
+    __decorate([
+        Property(false)
+    ], Tooltip.prototype, "enableRtl", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "beforeRender", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "beforeOpen", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "afterOpen", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "beforeClose", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "afterClose", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "beforeCollision", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "created", void 0);
+    __decorate([
+        Event()
+    ], Tooltip.prototype, "destroyed", void 0);
+    Tooltip = __decorate([
+        NotifyPropertyChanges
+    ], Tooltip);
+    return Tooltip;
+}(Component));
+export { Tooltip };

tooltip.js

@@ -1,11 +0,4 @@
-define(["require", "exports", "./src/tooltip/index"], function (require, exports, index_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * tooltip
-     */
-    __export(index_1);
-});
+/**
+ * tooltip
+ */
+export * from './src/tooltip/index';

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

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

Number of package files

122

increased by0.83%

Lines of code

60622

increased by0.35%

Number of lines in readme file

91

increased by1037.5%

Worsened metrics

Total package byte prevSize

8456387

decreased by-1.06%

Dependency changes

• Updated@syncfusion/ej2-base@~16.2.46

• Updated@syncfusion/ej2-buttons@~16.2.46