Socket
Socket
Sign inDemoInstall

@syncfusion/ej2-popups

Package Overview
Dependencies
2
Maintainers
2
Versions
217
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.10 to 1.0.11

dist/global/ej2-popups.js
dist\global\dialog.js
dist\global\popup.js
dist\global\tooltip.js
styles/tooltip/_fabric-definition.scss

72

dist/es6/dialog/dialog.js

@@ -57,2 +57,3 @@ var __extends = (this && this.__extends) || (function () {

var DLG_HIDE = 'e-popup-close';
var DLG_SHOW = 'e-popup-open';
var Dialog = (function (_super) {

@@ -167,2 +168,3 @@ __extends(Dialog, _super);

}
attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });
if (this.isModal) {

@@ -203,3 +205,3 @@ this.setIsModal();

addClass([this.element], DLG_HIDE);
if (this.showOnInit) {
if (this.visible) {
this.show();

@@ -324,3 +326,3 @@ }

this.closeIcon = createElement('button', { className: DLG_CLOSE_ICON_BTN });
this.closeIconBtnObj = new Button({ cssClass: 'e-small e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });
this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });
this.closeIconTitle();

@@ -511,6 +513,7 @@ if (!isNullOrUndefined(this.headerContent)) {

break;
case 'showOnInit':
this.showOnInit ? this.show() : this.hide();
case 'visible':
this.visible ? this.show() : this.hide();
break;
case 'isModal':
this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');
if (this.isModal) {

@@ -626,31 +629,37 @@ this.setIsModal();

};
Dialog.prototype.refreshPosition = function () {
this.popupObj.refreshPosition();
};
Dialog.prototype.show = function (isFullScreen) {
if (!isNullOrUndefined(isFullScreen)) {
this.fullScreen(isFullScreen);
}
this.storeActiveElement = document.activeElement;
this.element.tabIndex = -1;
this.trigger('beforeOpen');
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';
if (!this.element.classList.contains(DLG_SHOW) || (!isNullOrUndefined(isFullScreen))) {
if (!isNullOrUndefined(isFullScreen)) {
this.fullScreen(isFullScreen);
}
this.storeActiveElement = document.activeElement;
this.element.tabIndex = -1;
this.trigger('beforeOpen');
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';
}
this.dlgOverlay.style.position = 'absolute';
this.element.style.position = 'relative';
addClass([this.targetEle], SCROLL_DISABLED);
}
this.dlgOverlay.style.position = 'absolute';
this.element.style.position = 'relative';
addClass([this.targetEle], SCROLL_DISABLED);
else {
addClass([document.body], SCROLL_DISABLED);
}
}
else {
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;
this.visible = true;
}
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;
};

@@ -671,2 +680,3 @@ Dialog.prototype.hide = function () {

this.dialogOpen = false;
this.visible = false;
};

@@ -709,4 +719,4 @@ Dialog.prototype.fullScreen = function (args) {

__decorate([
Property(false)
], Dialog.prototype, "showOnInit", void 0);
Property(true)
], Dialog.prototype, "visible", void 0);
__decorate([

@@ -713,0 +723,0 @@ Property('auto')

8

dist/es6/popup/popup.js

@@ -54,3 +54,3 @@ var __extends = (this && this.__extends) || (function () {

case 'relateTo':
this.setPosition();
this.refreshPosition();
this.checkCollision();

@@ -107,3 +107,3 @@ break;

Popup.prototype.setEnableRtl = function () {
this.setPosition();
this.refreshPosition();
this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);

@@ -125,7 +125,7 @@ };

setTimeout(function () {
_this.setPosition();
_this.refreshPosition();
_this.checkCollision();
}, 200);
};
Popup.prototype.setPosition = function () {
Popup.prototype.refreshPosition = function () {
var pos;

@@ -132,0 +132,0 @@ var relateToElement = ((typeof this.relateTo) === 'string') ?

245

dist/es6/tooltip/tooltip.js

@@ -30,2 +30,3 @@ var __extends = (this && this.__extends) || (function () {

var MOUSE_TRAIL_GAP = 2;
var POINTER_ADJUST = 2;
var ROOT = 'e-tooltip';

@@ -86,4 +87,2 @@ var RTL = 'e-rtl';

this.tooltipEle.appendChild(tip);
this.tipWidth = tip.offsetWidth;
this.tipHeight = tip.offsetHeight;
};

@@ -140,11 +139,10 @@ Tooltip.prototype.setTipClass = function (position) {

var tooltipEleHeight = this.tooltipEle.offsetHeight;
var tipWidth = this.tipWidth;
var tipHeight = this.tipHeight;
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;
var tipWidthAdjust = tipWidth;
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;
tipHeightAdjust = tipHeight / 2;
tipWidthAdjust = tipWidth / 2;
}

@@ -219,56 +217,31 @@ switch (position) {

var topValue;
var tooltipWidth = this.tooltipEle.offsetWidth;
var tooltipHeight = this.tooltipEle.offsetHeight;
var tooltipWidth = this.tooltipEle.clientWidth;
var tooltipHeight = this.tooltipEle.clientHeight;
var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);
var tipWidth = this.tipWidth = arrowEle.offsetWidth;
var tipHeight = this.tipHeight = arrowEle.offsetHeight;
var tipAdjust = 2;
var tipWidth = arrowEle.offsetWidth;
var tipHeight = arrowEle.offsetHeight;
if (this.tipClass === TIP_BOTTOM || this.tipClass === TIP_TOP) {
topValue = this.tipClass === TIP_BOTTOM ? '100%' : -(tipHeight) + 'px';
if (tooltipPositionX !== 'center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail) {
if (tooltipPositionX === 'left') {
leftValue = (tooltipWidth - tipWidth - tipAdjust - 1) + 'px';
}
else if (tooltipPositionX === 'right') {
leftValue = tipAdjust + 'px';
}
else {
leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + '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 {
if (this.tipPointerPosition === 'start') {
leftValue = tipAdjust + 'px';
}
else if (this.tipPointerPosition === 'end') {
leftValue = (tooltipWidth - tipWidth - tipAdjust) + 'px';
}
else {
leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';
}
leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';
}
}
else {
leftValue = this.tipClass === TIP_RIGHT ? tooltipWidth - 2 + 'px' : -(tipWidth) + 'px';
if (tooltipPositionY !== 'center' || (tooltipHeight > target.offsetHeight) || this.mouseTrail) {
if (tooltipPositionY === 'top') {
topValue = (tooltipHeight - tipHeight - tipAdjust) + 'px';
}
else if (tooltipPositionY === 'bottom') {
topValue = tipAdjust + 'px';
}
else {
topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';
}
leftValue = this.tipClass === TIP_RIGHT ? tooltipWidth + 'px' : -(tipWidth) + '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 {
if (this.tipPointerPosition === 'start') {
topValue = tipAdjust + 'px';
}
else if (this.tipPointerPosition === 'end') {
topValue = (tooltipHeight - tipHeight - tipAdjust) + 'px';
}
else {
topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';
}
topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';
}

@@ -286,5 +259,11 @@ }

if (!isNullOrUndefined(this.content)) {
tooltipContent.innerHTML = '';
typeof (this.content) === 'string' ? tooltipContent.innerHTML = this.content :
if (typeof (this.content) === 'string') {
tooltipContent.innerHTML = this.content;
}
else {
while (tooltipContent.firstChild) {
tooltipContent.removeChild(tooltipContent.firstChild);
}
tooltipContent.appendChild(this.content);
}
}

@@ -303,7 +282,9 @@ else {

this.tooltipEle.appendChild(tipClose);
EventHandler.add(tipClose, 'click touchstart', this.onStickyClose, this);
EventHandler.add(tipClose, Browser.touchStartEvent, this.onStickyClose, this);
};
Tooltip.prototype.addDescribedBy = function (target, id) {
var describedby = (target.getAttribute('aria-describedby') || '').split(/\s+/);
describedby.push(id);
if (describedby.indexOf(id) < 0) {
describedby.push(id);
}
attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });

@@ -341,2 +322,20 @@ };

};
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 {
this.onMouseOut(e);
}
};
Tooltip.prototype.targetHover = function (e) {

@@ -359,3 +358,3 @@ var target;

this.showTooltip(target, this.animation.open, e);
this.wireMouseEvents(target);
this.wireMouseEvents(e, target);
};

@@ -403,2 +402,3 @@ Tooltip.prototype.showTooltip = function (target, showAnimation, e) {

else {
this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);
this.addDescribedBy(target, this.ctrlId + '_content');

@@ -488,4 +488,4 @@ this.renderContent(target);

}
else if ((arrowleft + this.tipWidth) > this.tooltipEle.clientWidth) {
arrowleft = this.tooltipEle.clientWidth - this.tipWidth;
else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {
arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;
}

@@ -604,3 +604,3 @@ arrowEle.style.left = arrowleft.toString() + 'px';

Tooltip.prototype.keyDown = function (event) {
if ((event.keyCode === 27)) {
if (this.tooltipEle && event.keyCode === 27) {
this.close();

@@ -610,3 +610,3 @@ }

Tooltip.prototype.touchEnd = function (e) {
if (closest(e.target, '.' + ROOT) === null) {
if (this.tooltipEle && closest(e.target, '.' + ROOT) === null) {
this.close();

@@ -629,26 +629,28 @@ }

this.isHidden = true;
this.tipWidth = 0;
this.tipHeight = 0;
};
Tooltip.prototype.wireEvents = function (opensOn) {
if (opensOn === 'custom') {
return;
}
if (opensOn === 'focus') {
this.wireFocusEvents();
}
else if (opensOn === 'click') {
EventHandler.add(this.element, 'click touchstart', this.targetHover, this);
}
else {
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);
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.add(this.element, 'mouseover', this.targetHover, this);
if (opensOn === 'focus') {
this.wireFocusEvents();
}
if (opensOn === 'click') {
EventHandler.add(this.element, Browser.touchStartEvent, this.targetClick, this);
}
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 {
EventHandler.add(this.element, 'mouseover', this.targetHover, this);
}
}
}

@@ -659,2 +661,8 @@ EventHandler.add(document, 'touchend', this.touchEnd, this);

};
Tooltip.prototype.getTriggerList = function (trigger) {
if (trigger === 'auto') {
trigger = (Browser.isDevice) ? 'hover' : 'hover focus';
}
return trigger.split(' ');
};
Tooltip.prototype.wireFocusEvents = function () {

@@ -665,12 +673,17 @@ if (!isNullOrUndefined(this.target)) {

var target = targetList_2[_i];
EventHandler.add(target, 'focus touchstart', this.targetHover, this);
EventHandler.add(target, 'focus', this.targetHover, this);
}
}
else {
EventHandler.add(this.element, 'focus touchstart', this.targetHover, this);
EventHandler.add(this.element, 'focus', this.targetHover, this);
}
};
Tooltip.prototype.wireMouseEvents = function (target) {
Tooltip.prototype.wireMouseEvents = function (e, target) {
if (!this.isSticky) {
EventHandler.add(target, (this.opensOn === 'focus' ? 'blur' : 'mouseleave'), this.onMouseOut, this);
if (e.type === 'focus') {
EventHandler.add(target, 'blur', this.onMouseOut, this);
}
if (e.type === 'mouseover') {
EventHandler.add(target, 'mouseleave', this.onMouseOut, this);
}
}

@@ -681,22 +694,26 @@ if (this.mouseTrail) {

};
Tooltip.prototype.unwireEvents = function (opensOn) {
if (opensOn === 'custom') {
return;
}
if (opensOn === 'focus') {
this.unwireFocusEvents();
}
else if (opensOn === 'click') {
EventHandler.remove(this.element, 'click touchstart', this.targetHover);
}
else {
if (Browser.isDevice) {
if (this.touchModule) {
this.touchModule.destroy();
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') {
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);
}
EventHandler.remove(this.element, Browser.touchEndEvent, this.touchEndHandler);
else {
EventHandler.remove(this.element, 'mouseover', this.targetHover);
}
}
else {
EventHandler.remove(this.element, 'mouseover', this.targetHover);
}
}

@@ -712,7 +729,7 @@ EventHandler.remove(document, 'touchend', this.touchEnd);

var target = targetList_3[_i];
EventHandler.remove(target, 'focus touchstart', this.targetHover);
EventHandler.remove(target, 'focus', this.targetHover);
}
}
else {
EventHandler.remove(this.element, 'focus touchstart', this.targetHover);
EventHandler.remove(this.element, 'focus', this.targetHover);
}

@@ -722,3 +739,12 @@ };

if (!this.isSticky) {
EventHandler.remove(target, (this.opensOn === 'focus' ? 'blur' : 'mouseleave'), this.onMouseOut);
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') {
EventHandler.remove(target, 'blur', this.onMouseOut);
}
if (opensOn === 'hover' && !Browser.isDevice) {
EventHandler.remove(target, 'mouseleave', this.onMouseOut);
}
}
}

@@ -802,2 +828,5 @@ if (this.mouseTrail) {

if (animation === void 0) { animation = this.animation.open; }
if (element.style.display === 'none') {
return;
}
this.showTooltip(element, animation);

@@ -860,3 +889,3 @@ };

__decorate([
Property('hover')
Property('auto')
], Tooltip.prototype, "opensOn", void 0);

@@ -863,0 +892,0 @@ __decorate([

88

package.json
{
"_args": [
[
{
"raw": "@syncfusion/ej2-popups@*",
"scope": "@syncfusion",
"escapedName": "@syncfusion%2fej2-popups",
"name": "@syncfusion/ej2-popups",
"rawSpec": "*",
"spec": "*",
"type": "range"
},
"C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2-navigations"
]
],
"_from": "@syncfusion/ej2-popups@*",
"_id": "@syncfusion/ej2-popups@1.0.10",
"_inCache": true,
"_location": "/@syncfusion/ej2-popups",
"_nodeVersion": "6.11.0",
"_npmUser": {
"name": "ej2",
"email": "pipeline@syncfusion.com"
},
"_npmVersion": "3.10.10",
"_phantomChildren": {},
"_requested": {
"raw": "@syncfusion/ej2-popups@*",
"scope": "@syncfusion",
"escapedName": "@syncfusion%2fej2-popups",
"name": "@syncfusion/ej2-popups",
"rawSpec": "*",
"spec": "*",
"type": "range"
},
"_requiredBy": [
"/@syncfusion/ej2-navigations",
"/@syncfusion/ej2-ng-popups"
],
"_resolved": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-popups/-/ej2-popups-1.0.10.tgz",
"_shasum": "a64893c4270a86c7484fb2bc485074b681fb35dc",
"_shrinkwrap": null,
"_spec": "@syncfusion/ej2-popups@*",
"_where": "C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2-navigations",
"author": {
"name": "Syncfusion Inc."
},
"bugs": {
"url": "https://github.com/syncfusion/ej2-popups/issues"
},
"name": "@syncfusion/ej2-popups",
"version": "1.0.11",
"description": "Essential JS 2 popup Component",
"author": "Syncfusion Inc.",
"license": "SEE LICENSE IN license",
"module": "dist/es6/index.js",
"dependencies": {
"@syncfusion/ej2-base": "^1.0.10",
"@syncfusion/ej2-buttons": "^1.0.10"
"@syncfusion/ej2-base": "^1.0.11",
"@syncfusion/ej2-buttons": "^1.0.11"
},
"description": "Essential JS 2 popup Component",
"devDependencies": {

@@ -62,8 +18,2 @@ "@types/chai": "^3.4.28",

},
"dist": {
"shasum": "a64893c4270a86c7484fb2bc485074b681fb35dc",
"tarball": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-popups/-/ej2-popups-1.0.10.tgz"
},
"gitHead": "2ebc6a19888a829eacb24ac114ede216d35add6d",
"homepage": "https://github.com/syncfusion/ej2-popups#readme",
"keywords": [

@@ -87,24 +37,6 @@ "ej2",

],
"license": "SEE LICENSE IN license",
"maintainers": [
{
"name": "ej2",
"email": "pipeline@syncfusion.com"
}
],
"module": "dist/es6/index.js",
"name": "@syncfusion/ej2-popups",
"optionalDependencies": {},
"readme": "# Overview\n\nEasily creates Alert, Confirmation, Prompt dialogs and Tooltip. It comes with full support and is available under commercial and community licenses – please visit www.syncfusion.com to get started.\n\n## Resources\n\n* [Dialog Demos](http://ej2.syncfusion.com/demos/#/dialog/basic.html)\n\n# 1.0.10\n## Dialog\n### New Features\n- Removed the default value for zIndex property and updated the calculation based on parent elements z-index.\n\n### Bug Fixes\n- Dialog close button alignment changes.\n- Dialog content focusing changes, when the first input element was hidden it will focus to next input.\n\n## Tooltip\n### New Features\n- Tooltip can be displayed in 12 different positions.\n- Supports animation effects while showing/hiding the tooltip.\n- Tooltip content can be either assigned with static text, template content or else be loaded dynamically via AJAX.\n- Supports 4 opening modes - `hover`, `click`, `focus` & `custom`.\n- Supports auto tip positioning.\n- Mouse trailing option is available for moving the tooltip along with the mouse pointer.\n- Tooltip can be opened in Sticky mode, allowing the user to close/hide it manually.",
"readmeFilename": "ReadMe.md",
"repository": {
"type": "git",
"url": "git+https://github.com/syncfusion/ej2-popups.git"
},
"scripts": {
"ci-publish": "gulp ci-publish",
"compile": "gulp ci-compile",
"test": "gulp ci-test"
},
"version": "1.0.10"
"url": "https://github.com/syncfusion/ej2-popups.git"
}
}

20

ReadMe.md

@@ -8,20 +8,6 @@ # Overview

* [Dialog Demos](http://ej2.syncfusion.com/demos/#/dialog/basic.html)
* [Tooltip Demos](http://ej2.syncfusion.com/demos/#/tooltip/default.html)
# 1.0.10
## Dialog
### New Features
- Removed the default value for zIndex property and updated the calculation based on parent elements z-index.
## Changelog
### Bug Fixes
- Dialog close button alignment changes.
- Dialog content focusing changes, when the first input element was hidden it will focus to next input.
## Tooltip
### New Features
- Tooltip can be displayed in 12 different positions.
- Supports animation effects while showing/hiding the tooltip.
- Tooltip content can be either assigned with static text, template content or else be loaded dynamically via AJAX.
- Supports 4 opening modes - `hover`, `click`, `focus` & `custom`.
- Supports auto tip positioning.
- Mouse trailing option is available for moving the tooltip along with the mouse pointer.
- Tooltip can be opened in Sticky mode, allowing the user to close/hide it manually.
Check the changelog [here](https://github.com/syncfusion/ej2-popups/blob/master/CHANGELOG.md)

58

src/dialog/dialog-builder.d.ts

@@ -13,55 +13,55 @@ import{Dialog} from "./dialog";

/**
* Event triggers before close the dialog.
* Event triggers before close the Dialog.
*/
beforeClose(value:Function): BuilderProperties;
/**
* Event triggers before open the dialog.
* Event triggers before open the Dialog.
*/
beforeOpen(value:Function): BuilderProperties;
/**
* Event triggers once the dialog is closed.
* Event triggers once the Dialog is closed.
*/
close(value:Function): BuilderProperties;
/**
* Event triggers when the dialog is `created`.
* Event triggers when the Dialog is `created`.
*/
created(value:Function): BuilderProperties;
/**
* Event triggers when the user drags dialog.
* Event triggers when the user drags Dialog.
*/
drag(value:Function): BuilderProperties;
/**
* Event triggers when user starts to drag the dialog.
* Event triggers when user starts to drag the Dialog.
*/
dragStart(value:Function): BuilderProperties;
/**
* Event triggers when the user stops dragging the dialog.
* Event triggers when the user stops dragging the Dialog.
*/
dragStop(value:Function): BuilderProperties;
/**
* Event triggers once dialog is opened.
* Event triggers once Dialog is opened.
*/
open(value:Function): BuilderProperties;
/**
* Event triggers when modal dialog overlay is clicked.
* Event triggers when modal Dialog overlay is clicked.
*/
overlayClick(value:Function): BuilderProperties;
/**
* Specifies the value to either enable or disable draggable option in dialog.
* Specifies the value to either enable or disable draggable option in Dialog.
*/
allowDragging(value:boolean): BuilderProperties;
/**
* Specifies the dialog animation settings.
* Specifies the Dialog animation settings.
*/
animationSettings(value: (val:AnimationSettings) => void | Object): BuilderProperties;
/**
* Specifies the dialog that is closed when user press the ESC key.
* Specifies the Dialog that is closed when user press the ESC key.
*/
closeOnEscape(value:boolean): BuilderProperties;
/**
* Specifies the `content` to be displayed in dialog, it can be text or HTML element.
* Specifies the `content` to be displayed in Dialog, it can be text or HTML element.
*/
content(value:string|HTMLElement): BuilderProperties;
/**
* Specifies the CSS class name to be added for dialog element.
* Specifies the CSS class name to be added for Dialog element.
User can add single or multiple CSS classes.

@@ -79,11 +79,11 @@ */

/**
* Specifies the template content to defines how the dialog footer is rendered.
* Specifies the template content to defines how the Dialog footer is rendered.
*/
footerTemplate(value:string): BuilderProperties;
/**
* Specifies the `header` content that defines how the dialog `header` is rendered.
* Specifies the `header` content that defines how the Dialog `header` is rendered.
*/
header(value:string): BuilderProperties;
/**
* Specifies the `height` of the dialog.
* Specifies the `height` of the Dialog.
*/

@@ -93,11 +93,11 @@ height(value:string|number): BuilderProperties;

/**
* Specifies the value to render the dialog as modal or modeless.
* Specifies the value to render the Dialog as modal or modeless.
*/
isModal(value:boolean): BuilderProperties;
/**
* Specifies the localization culture code for dialog.
* Specifies the localization culture code for Dialog.
*/
locale(value:string): BuilderProperties;
/**
* Specifies the dialog `position` with respect to the associated target elements.
* Specifies the Dialog `position` with respect to the associated target elements.
*/

@@ -110,16 +110,16 @@ position(value: (val:PositionData) => void | Object): BuilderProperties;

/**
* Specifies the value to either dialog is opened on page load or not.
* Specifies the `target` element where the Dialog should be displayed.
If the user set the specific `target` element for Dialog, it will be positioned based on the `target`.
*/
showOnInit(value:boolean): BuilderProperties;
target(value:HTMLElement|string): BuilderProperties;
/**
* Specifies the `target` element where the dialog should be displayed.
If the user set the specific `target` element for dialog, it will be positioned based on the `target`.
* Specifies the value to either Dialog is opened or not.
*/
target(value:HTMLElement|string): BuilderProperties;
visible(value:boolean): BuilderProperties;
/**
* Specifies the `width` of the dialog.
* Specifies the `width` of the Dialog.
*/
width(value:string|number): BuilderProperties;
/**
* Specifies the z-index value for dialog.
* Specifies the z-index value for Dialog.
*/

@@ -138,4 +138,4 @@ zIndex(value:number): BuilderProperties;

/**
* Specifies the effect to open and close the dialog.
If the user sets `Fade` effect then the dialog will open with 'FadeIn' effect and close with 'FadeOut' effect.
* Specifies the effect to open and close the Dialog.
If the user sets `Fade` effect then the Dialog will open with 'FadeIn' effect and close with 'FadeOut' effect.
*/

@@ -142,0 +142,0 @@ effect(value:DialogEffect): AnimationSettings;

54

src/dialog/dialog-model.d.ts

@@ -11,6 +11,6 @@ import { Component, Property, Event, CreateBuilder, Collection, L10n, Browser, EmitType } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base/dom';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base/util';import { DialogHelper } from './dialog-builder';import { EventHandler } from '@syncfusion/ej2-base/event-handler';import { Draggable } from '@syncfusion/ej2-base';import { Popup, PositionData } from '../popup/popup';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';

/**
* Specifies the Button component properties to render the dialog buttons. */ buttonModel?: ButtonModel;
* Specifies the Button component properties to render the Dialog buttons. */ buttonModel?: ButtonModel;
/**
* Event triggers when `click` the dialog button. * @event */ click?: EmitType<Object>;
* Event triggers when `click` the Dialog button. * @event */ click?: EmitType<Object>;

@@ -25,3 +25,3 @@ }

/**
* Specifies the `content` to be displayed in dialog, it can be text or HTML element. * @default '' */ content?: string | HTMLElement;
* Specifies the `content` to be displayed in Dialog, it can be text or HTML element. * @default '' */ content?: string | HTMLElement;

@@ -32,73 +32,73 @@ /**

/**
* Specifies the value to render the dialog as modal or modeless. * @default false */ isModal?: boolean;
* Specifies the value to render the Dialog as modal or modeless. * @default false */ isModal?: boolean;
/**
* Specifies the `header` content that defines how the dialog `header` is rendered. * @default '' */ header?: string;
* Specifies the `header` content that defines how the Dialog `header` is rendered. * @default '' */ header?: string;
/**
* Specifies the value to either dialog is opened on page load or not. * @default false */ showOnInit?: boolean;
* Specifies the value to either Dialog is opened or not. * @default false */ visible?: boolean;
/**
* Specifies the `height` of the dialog. * @default 'auto' */ height?: string | number;
* Specifies the `height` of the Dialog. * @default 'auto' */ height?: string | number;
/**
* Specifies the `width` of the dialog. * @default '100%' */ width?: string | number;
* Specifies the `width` of the Dialog. * @default '100%' */ width?: string | number;
/**
* Specifies the CSS class name to be added for dialog element. * User can add single or multiple CSS classes. * @default '' */ cssClass?: string;
* Specifies the CSS class name to be added for Dialog element. * User can add single or multiple CSS classes. * @default '' */ cssClass?: string;
/**
* Specifies the z-index value for dialog. */ zIndex?: number;
* Specifies the z-index value for Dialog. */ zIndex?: number;
/**
* Specifies the `target` element where the dialog should be displayed. * If the user set the specific `target` element for dialog, it will be positioned based on the `target`. * @default null */ target?: HTMLElement | string;
* Specifies the `target` element where the Dialog should be displayed. * If the user set the specific `target` element for Dialog, it will be positioned based on the `target`. * @default null */ target?: HTMLElement | string;
/**
* Specifies the template content to defines how the dialog footer is rendered. * @default '' */ footerTemplate?: string;
* Specifies the template content to defines how the Dialog footer is rendered. * @default '' */ footerTemplate?: string;
/**
* Specifies the value to either enable or disable draggable option in dialog. * @default false */ allowDragging?: boolean;
* Specifies the value to either enable or disable draggable option in Dialog. * @default false */ allowDragging?: boolean;
/**
* Specifies the collection of dialog `buttons` with click action and button component model. * @default [{}] */ buttons?: ButtonPropsModel[];
* Specifies the collection of Dialog `buttons` with click action and button component model. * @default [{}] */ buttons?: ButtonPropsModel[];
/**
* Specifies the dialog that is closed when user press the ESC key. * @default { closeOnEscape: true } */ closeOnEscape?: boolean;
* Specifies the Dialog that is closed when user press the ESC key. * @default true */ closeOnEscape?: boolean;
/**
* Specifies the dialog animation settings. * @default { effect: 'Fade', duration: 400, delay:0 } */ animationSettings?: AnimationSettings;
* Specifies the Dialog animation settings. * @default { effect: 'Fade', duration: 400, delay:0 } */ animationSettings?: AnimationSettings;
/**
* Specifies the dialog `position` with respect to the associated target elements. * @default {X:'center', Y:'center'} */ position?: PositionData;
* Specifies the Dialog `position` with respect to the associated target elements. * @default {X:'center', Y:'center'} */ position?: PositionData;
/**
* Specifies the localization culture code for dialog. * @default '' */ locale?: string;
* Specifies the localization culture code for Dialog. * @default '' */ locale?: string;
/**
* Event triggers when the dialog is `created`. * @event */ created?: EmitType<Object>;
* Event triggers when the Dialog is `created`. * @event */ created?: EmitType<Object>;
/**
* Event triggers once dialog is opened. * @event */ open?: EmitType<Object>;
* Event triggers once Dialog is opened. * @event */ open?: EmitType<Object>;
/**
* Event triggers before open the dialog. * @event */ beforeOpen?: EmitType<Object>;
* Event triggers before open the Dialog. * @event */ beforeOpen?: EmitType<Object>;
/**
* Event triggers once the dialog is closed. * @event */ close?: EmitType<Object>;
* Event triggers once the Dialog is closed. * @event */ close?: EmitType<Object>;
/**
* Event triggers before close the dialog. * @event */ beforeClose?: EmitType<Object>;
* Event triggers before close the Dialog. * @event */ beforeClose?: EmitType<Object>;
/**
* Event triggers when user starts to drag the dialog. * @event */ dragStart?: EmitType<Object>;
* Event triggers when user starts to drag the Dialog. * @event */ dragStart?: EmitType<Object>;
/**
* Event triggers when the user stops dragging the dialog. * @event */ dragStop?: EmitType<Object>;
* Event triggers when the user stops dragging the Dialog. * @event */ dragStop?: EmitType<Object>;
/**
* Event triggers when the user drags dialog. * @event */ drag?: EmitType<Object>;
* Event triggers when the user drags Dialog. * @event */ drag?: EmitType<Object>;
/**
* Event triggers when modal dialog overlay is clicked. * @event */ overlayClick?: EmitType<Object>;
* Event triggers when modal Dialog overlay is clicked. * @event */ overlayClick?: EmitType<Object>;
}

87

src/dialog/dialog.d.ts

@@ -9,7 +9,7 @@ import { Component, EmitType } from '@syncfusion/ej2-base';

/**
* Specifies the Button component properties to render the dialog buttons.
* Specifies the Button component properties to render the Dialog buttons.
*/
buttonModel: ButtonModel;
/**
* Event triggers when `click` the dialog button.
* Event triggers when `click` the Dialog button.
* @event

@@ -20,8 +20,8 @@ */

/**
* Specifies dialog open and close animation settings.
* Specifies Dialog open and close animation settings.
*/
export interface AnimationSettings {
/**
* Specifies the effect to open and close the dialog.
* If the user sets `Fade` effect then the dialog will open with 'FadeIn' effect and close with 'FadeOut' effect.
* Specifies the effect to open and close the Dialog.
* If the user sets `Fade` effect then the Dialog will open with 'FadeIn' effect and close with 'FadeOut' effect.
*/

@@ -39,7 +39,7 @@ effect?: DialogEffect;

/**
* Specifies the dialog animation effects.
* Specifies the Dialog animation effects.
*/
export declare type DialogEffect = 'Fade' | 'FadeZoom' | 'FlipLeftDown' | 'FlipLeftUp' | 'FlipRightDown' | 'FlipRightUp' | 'FlipXDown' | 'FlipXUp' | 'FlipYLeft' | 'FlipYRight' | 'SlideBottom' | 'SlideLeft' | 'SlideRight' | 'SlideTop' | 'Zoom' | 'None';
/**
* Represents the Dialog control
* Represents the Dialog component that displays information to the user, and used to get the user input.
* ```html

@@ -79,3 +79,3 @@ * <div id="dialog"></div>

/**
* Specifies the `content` to be displayed in dialog, it can be text or HTML element.
* Specifies the `content` to be displayed in Dialog, it can be text or HTML element.
* @default ''

@@ -90,3 +90,3 @@ */

/**
* Specifies the value to render the dialog as modal or modeless.
* Specifies the value to render the Dialog as modal or modeless.
* @default false

@@ -96,3 +96,3 @@ */

/**
* Specifies the `header` content that defines how the dialog `header` is rendered.
* Specifies the `header` content that defines how the Dialog `header` is rendered.
* @default ''

@@ -102,8 +102,8 @@ */

/**
* Specifies the value to either dialog is opened on page load or not.
* Specifies the value to either Dialog is opened or not.
* @default false
*/
showOnInit: boolean;
visible: boolean;
/**
* Specifies the `height` of the dialog.
* Specifies the `height` of the Dialog.
* @default 'auto'

@@ -113,3 +113,3 @@ */

/**
* Specifies the `width` of the dialog.
* Specifies the `width` of the Dialog.
* @default '100%'

@@ -119,3 +119,3 @@ */

/**
* Specifies the CSS class name to be added for dialog element.
* Specifies the CSS class name to be added for Dialog element.
* User can add single or multiple CSS classes.

@@ -126,8 +126,8 @@ * @default ''

/**
* Specifies the z-index value for dialog.
* Specifies the z-index value for Dialog.
*/
zIndex: number;
/**
* Specifies the `target` element where the dialog should be displayed.
* If the user set the specific `target` element for dialog, it will be positioned based on the `target`.
* Specifies the `target` element where the Dialog should be displayed.
* If the user set the specific `target` element for Dialog, it will be positioned based on the `target`.
* @default null

@@ -137,3 +137,3 @@ */

/**
* Specifies the template content to defines how the dialog footer is rendered.
* Specifies the template content to defines how the Dialog footer is rendered.
* @default ''

@@ -143,3 +143,3 @@ */

/**
* Specifies the value to either enable or disable draggable option in dialog.
* Specifies the value to either enable or disable draggable option in Dialog.
* @default false

@@ -149,3 +149,3 @@ */

/**
* Specifies the collection of dialog `buttons` with click action and button component model.
* Specifies the collection of Dialog `buttons` with click action and button component model.
* @default [{}]

@@ -155,8 +155,8 @@ */

/**
* Specifies the dialog that is closed when user press the ESC key.
* @default { closeOnEscape: true }
* Specifies the Dialog that is closed when user press the ESC key.
* @default true
*/
closeOnEscape: boolean;
/**
* Specifies the dialog animation settings.
* Specifies the Dialog animation settings.
* @default { effect: 'Fade', duration: 400, delay:0 }

@@ -166,3 +166,3 @@ */

/**
* Specifies the dialog `position` with respect to the associated target elements.
* Specifies the Dialog `position` with respect to the associated target elements.
* @default {X:'center', Y:'center'}

@@ -172,3 +172,3 @@ */

/**
* Specifies the localization culture code for dialog.
* Specifies the localization culture code for Dialog.
* @default ''

@@ -178,3 +178,3 @@ */

/**
* Event triggers when the dialog is `created`.
* Event triggers when the Dialog is `created`.
* @event

@@ -184,3 +184,3 @@ */

/**
* Event triggers once dialog is opened.
* Event triggers once Dialog is opened.
* @event

@@ -190,3 +190,3 @@ */

/**
* Event triggers before open the dialog.
* Event triggers before open the Dialog.
* @event

@@ -196,3 +196,3 @@ */

/**
* Event triggers once the dialog is closed.
* Event triggers once the Dialog is closed.
* @event

@@ -202,3 +202,3 @@ */

/**
* Event triggers before close the dialog.
* Event triggers before close the Dialog.
* @event

@@ -208,3 +208,3 @@ */

/**
* Event triggers when user starts to drag the dialog.
* Event triggers when user starts to drag the Dialog.
* @event

@@ -214,3 +214,3 @@ */

/**
* Event triggers when the user stops dragging the dialog.
* Event triggers when the user stops dragging the Dialog.
* @event

@@ -220,3 +220,3 @@ */

/**
* Event triggers when the user drags dialog.
* Event triggers when the user drags Dialog.
* @event

@@ -226,3 +226,3 @@ */

/**
* Event triggers when modal dialog overlay is clicked.
* Event triggers when modal Dialog overlay is clicked.
* @event

@@ -310,9 +310,16 @@ */

/**
* To show the dialog element on screen.
* To enable the fullScreen dialog pass the parameter to 'true'.
* Specifies dialog offset x and y position changed dynamically or
* change the header,footer height or width dynamically, reposition the dialog as per the new changes.
* @return {void}
*/
refreshPosition(): void;
/**
* To show the Dialog element on screen.
* To enable the fullScreen Dialog pass the parameter to 'true'.
* @param { boolean } isFullScreen - Enable the fullScreen Dialog.
* @return {void}
*/
show(isFullScreen?: boolean): void;
/**
* To hide the dialog element on screen.
* To hide the Dialog element on screen.
* @return {void}

@@ -322,3 +329,3 @@ */

/**
* Specifies to view the Full screen dialog.
* Specifies to view the Full screen Dialog.
* @private

@@ -329,4 +336,4 @@ */

/**
* builder for dialog
* builder for Dialog
*/
export declare let dialogBuilder: DialogHelper;

72

src/dialog/dialog.js

@@ -52,2 +52,3 @@ var __extends = (this && this.__extends) || (function () {

var DLG_HIDE = 'e-popup-close';
var DLG_SHOW = 'e-popup-open';
var Dialog = (function (_super) {

@@ -162,2 +163,3 @@ __extends(Dialog, _super);

}
dom_1.attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });
if (this.isModal) {

@@ -198,3 +200,3 @@ this.setIsModal();

dom_1.addClass([this.element], DLG_HIDE);
if (this.showOnInit) {
if (this.visible) {
this.show();

@@ -319,3 +321,3 @@ }

this.closeIcon = dom_1.createElement('button', { className: DLG_CLOSE_ICON_BTN });
this.closeIconBtnObj = new ej2_buttons_1.Button({ cssClass: 'e-small e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });
this.closeIconBtnObj = new ej2_buttons_1.Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });
this.closeIconTitle();

@@ -506,6 +508,7 @@ if (!util_1.isNullOrUndefined(this.headerContent)) {

break;
case 'showOnInit':
this.showOnInit ? this.show() : this.hide();
case 'visible':
this.visible ? this.show() : this.hide();
break;
case 'isModal':
this.element.setAttribute('aria-modal', this.isModal ? 'true' : 'false');
if (this.isModal) {

@@ -621,31 +624,37 @@ this.setIsModal();

};
Dialog.prototype.refreshPosition = function () {
this.popupObj.refreshPosition();
};
Dialog.prototype.show = function (isFullScreen) {
if (!util_1.isNullOrUndefined(isFullScreen)) {
this.fullScreen(isFullScreen);
}
this.storeActiveElement = document.activeElement;
this.element.tabIndex = -1;
this.trigger('beforeOpen');
if (this.isModal && (!util_1.isNullOrUndefined(this.dlgOverlay))) {
this.dlgOverlay.style.display = 'block';
this.dlgContainer.style.display = 'flex';
if (!util_1.isNullOrUndefined(this.targetEle)) {
if (this.targetEle === document.body) {
this.dlgContainer.style.position = 'fixed';
if (!this.element.classList.contains(DLG_SHOW) || (!util_1.isNullOrUndefined(isFullScreen))) {
if (!util_1.isNullOrUndefined(isFullScreen)) {
this.fullScreen(isFullScreen);
}
this.storeActiveElement = document.activeElement;
this.element.tabIndex = -1;
this.trigger('beforeOpen');
if (this.isModal && (!util_1.isNullOrUndefined(this.dlgOverlay))) {
this.dlgOverlay.style.display = 'block';
this.dlgContainer.style.display = 'flex';
if (!util_1.isNullOrUndefined(this.targetEle)) {
if (this.targetEle === document.body) {
this.dlgContainer.style.position = 'fixed';
}
this.dlgOverlay.style.position = 'absolute';
this.element.style.position = 'relative';
dom_1.addClass([this.targetEle], SCROLL_DISABLED);
}
this.dlgOverlay.style.position = 'absolute';
this.element.style.position = 'relative';
dom_1.addClass([this.targetEle], SCROLL_DISABLED);
else {
dom_1.addClass([document.body], SCROLL_DISABLED);
}
}
else {
dom_1.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;
this.visible = true;
}
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;
};

@@ -666,2 +675,3 @@ Dialog.prototype.hide = function () {

this.dialogOpen = false;
this.visible = false;
};

@@ -704,4 +714,4 @@ Dialog.prototype.fullScreen = function (args) {

__decorate([
ej2_base_1.Property(false)
], Dialog.prototype, "showOnInit", void 0);
ej2_base_1.Property(true)
], Dialog.prototype, "visible", void 0);
__decorate([

@@ -708,0 +718,0 @@ ej2_base_1.Property('auto')

1

src/popup/index.d.ts

@@ -5,1 +5,2 @@ /**

export * from './popup';
export * from './popup-model';

5

src/popup/popup.d.ts

@@ -159,3 +159,6 @@ import { AnimationModel, EmitType, Component } from '@syncfusion/ej2-base';

private orientationOnChange();
private setPosition();
/**
* Based on the `relative` element and `offset` values, `Popup` element position will refreshed.
*/
refreshPosition(): void;
private getAnchorPosition(anchorEle, ele, position, offsetX, offsetY);

@@ -162,0 +165,0 @@ private callFlip(param);

8

src/popup/popup.js

@@ -49,3 +49,3 @@ var __extends = (this && this.__extends) || (function () {

case 'relateTo':
this.setPosition();
this.refreshPosition();
this.checkCollision();

@@ -102,3 +102,3 @@ break;

Popup.prototype.setEnableRtl = function () {
this.setPosition();
this.refreshPosition();
this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);

@@ -120,7 +120,7 @@ };

setTimeout(function () {
_this.setPosition();
_this.refreshPosition();
_this.checkCollision();
}, 200);
};
Popup.prototype.setPosition = function () {
Popup.prototype.refreshPosition = function () {
var pos;

@@ -127,0 +127,0 @@ var relateToElement = ((typeof this.relateTo) === 'string') ?

88

src/tooltip/tooltip-builder.d.ts
import{Tooltip} from "./tooltip";
import{ OpenMode, Position, TipPointerPosition, Effect} from "./tooltip";
import{ Position, TipPointerPosition, Effect} from "./tooltip";

@@ -13,17 +13,17 @@ export interface TooltipHelper {

/**
* Triggers after the tooltip UI is hidden.
* Triggers after the Tooltip UI is hidden.
*/
afterClose(value:Function): BuilderProperties;
/**
* Triggers after the tooltip UI is shown on the target.
* Triggers after the Tooltip UI is shown on the target.
*/
afterOpen(value:Function): BuilderProperties;
/**
* Triggers before the tooltip hides from the screen. If we return false here, then the tooltip no more gets hidden.
* Triggers before the Tooltip hides from the screen. If returned false, then the Tooltip is no more hidden.
*/
beforeClose(value:Function): BuilderProperties;
/**
* Triggers before the tooltip is displayed over the target element.
When one of its argument `cancel` is set to true, the tooltip display can be prevented.
This event is mainly used for the purpose of refreshing the tooltip positions dynamically or to
* Triggers 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.
This event is mainly used for the purpose of refreshing the Tooltip positions dynamically or to
set customized styles in it and so on.

@@ -33,30 +33,30 @@ */

/**
* Triggers before the tooltip and its contents are added to the DOM.
When one of its argument `cancel` is set to true, the tooltip can be prevented from rendering on the page.
This event is mainly used for the purpose of customizing the tooltip before it shows up on the screen.
For example, To load the ajax content or to set new animation effects on the tooltip, this event can be opted.
* Triggers before the Tooltip and its contents are added to the DOM.
When one of its arguments `cancel` is set to true, the Tooltip can be prevented from rendering on the page.
This event is mainly used for the purpose of customizing the Tooltip before it shows up on the screen.
For example, to load the AJAX content or to set new animation effects on the Tooltip, this event can be opted.
*/
beforeRender(value:Function): BuilderProperties;
/**
* Triggers after the tooltip control is created.
* Triggers after the Tooltip control is created.
*/
created(value:Function): BuilderProperties;
/**
* Triggers when the tooltip control is destroyed.
* Triggers when the Tooltip control is destroyed.
*/
destroyed(value:Function): BuilderProperties;
/**
* Allows to set the same or different animation options for the tooltip, while it is being opened or closed.
* Allows to set the same or different animation option for the Tooltip, when it is opened or closed.
*/
animation(value: (val:AnimationModel) => void | Object): BuilderProperties;
/**
* Closes the tooltip after the specified delay in milliseconds.
* Closes the Tooltip after the specified delay in milliseconds.
*/
closeDelay(value:number): BuilderProperties;
/**
* Displays the content value on the tooltip, accepting both string and HTMLElement values.
* Displays the content value on the Tooltip, accepting both string and HTMLElement values.
*/
content(value:string|HTMLElement): BuilderProperties;
/**
* Accepts the CSS class name to be applied for the tooltip.
* Allows the CSS class name to be applied to the Tooltip.
*/

@@ -69,9 +69,10 @@ cssClass(value:string): BuilderProperties;

/**
* When set to `true`, enables the RTL mode on the tooltip, the tooltip and its content displays in the direction from right to left.
* When set to `true`, enables the RTL mode on the Tooltip, and the Tooltip and its content are displayed
in the right to left direction.
*/
enableRtl(value:boolean): BuilderProperties;
/**
* Sets the `height` of the tooltip, accepting both string and number values.
When `height` is specified with certain pixel value and if the tooltip content overflows,
then the scrolling mode gets enabled on the tooltip.
* Sets the `height` of the Tooltip, accepting both string and number values.
When `height` is specified with a certain pixel value and if the Tooltip content overflows,
then the scrolling mode gets enabled on the Tooltip.
*/

@@ -81,3 +82,3 @@ height(value:string|number): BuilderProperties;

/**
* When set to `true`, allows the tooltip to stay open on the target until it is being manually closed.
* When set to `true`, allows the Tooltip to stay open on the target until it is manually closed.
*/

@@ -90,44 +91,45 @@ isSticky(value:Boolean): BuilderProperties;

/**
* When set to `true`, allows the tooltip to follow the mouse pointer movement over the specified target element.
* When set to `true`, allows the Tooltip to follow the mouse pointer movement over the specified target element.
*/
mouseTrail(value:boolean): BuilderProperties;
/**
* Sets the space between the target and tooltip element in x axis.
* Sets the space between the target and Tooltip element in X axis.
*/
offsetX(value:number): BuilderProperties;
/**
* Sets the space between the target and tooltip element in y axis.
* Sets the space between the target and Tooltip element in Y axis.
*/
offsetY(value:number): BuilderProperties;
/**
* Opens the tooltip after the specified delay in milliseconds.
* Opens the Tooltip after the specified delay in milliseconds.
*/
openDelay(value:number): BuilderProperties;
/**
* Determines on which open mode, the tooltip needs to be shown. With the default value set to `hover`,
if the tooltip to be displayed in touch devices, then one needs to tap and hold the target element to view it's related content.
* Determines on which open mode, the Tooltip needs to be shown. With the default value set to `auto`,
Tooltip appears when the user hovers or focuses on a target on the desktop.
If the Tooltip is to be displayed on touch devices, then one needs to tap and hold the target element to view it's related content.
*/
opensOn(value:OpenMode): BuilderProperties;
opensOn(value:string): BuilderProperties;
/**
* Allows to set position for the tooltip element. Avails the user with 12 default options to position the tooltip.
* Allows you to set the position for the Tooltip element, and provides 12 default options to position the Tooltip.
*/
position(value:Position): BuilderProperties;
/**
* Allows either to show or hide the tip pointer on the tooltip.
* Allows you to either show or hide the tip pointer on the Tooltip.
*/
showTipPointer(value:boolean): BuilderProperties;
/**
* Denotes the target selectors on which the tooltip gets triggered.
In this case, the initialized tooltip element will be considered as the parent container.
* Denotes the target selectors on which the Tooltip gets triggered.
In this case, the initialized Tooltip element is considered the parent container.
*/
target(value:string): BuilderProperties;
/**
* Sets the position of the tip pointer on the tooltip.
When set to `auto`, the tip pointer will be auto-adjusted within the space of target's length
and will not tend to point outside of it.
* Sets the position of the tip pointer on the Tooltip.
When set to `auto`, the tip pointer auto adjusts within the space of target's length
and does not point outside.
*/
tipPointerPosition(value:TipPointerPosition): BuilderProperties;
/**
* Sets the `width` of the tooltip, accepting both string and number values.
When set to `auto`, the tooltip width gets auto-adjusted to display its content related to the viewable screen size.
* Sets the `width` of the Tooltip, accepting both string and number values.
When set to `auto`, the Tooltip width gets auto adjusted to display its content within the viewable screen.
*/

@@ -138,11 +140,11 @@ width(value:string|number): BuilderProperties;

/**
* Specifies the `delay` value in milliseconds, depicting the time to wait before the animation begins.
* Specifies the `delay` value in milliseconds, indicating the waiting time before animation begins.
*/
delay(value:number): TooltipAnimationSettings;
/**
* Denotes the `duration` of the animation, that gets completed per animation cycle.
* Denotes the `duration` of the animation that is completed per animation cycle.
*/
duration(value:number): TooltipAnimationSettings;
/**
* Animation effect that applies on the tooltip, during the open and close actions.
* Animation effect that applies on the Tooltip, during open and close actions.
*/

@@ -153,9 +155,9 @@ effect(value:Effect): TooltipAnimationSettings;

/**
* Animation settings to be applied on tooltip, while it is being closed.
* Animation settings to be applied on the Tooltip, when it is closed.
*/
close(value: (val:TooltipAnimationSettings) => void | Object): AnimationModel;
/**
* Animation settings to be applied on tooltip, while it is being shown over the target.
* Animation settings to be applied on the Tooltip, while it is being shown over the target.
*/
open(value: (val:TooltipAnimationSettings) => void | Object): AnimationModel;
}

54

src/tooltip/tooltip-model.d.ts
import { Component, Property, ChildProperty, Event, CreateBuilder, BaseEventArgs } 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/util';import { attributes, createElement, closest, removeClass, addClass, remove } from '@syncfusion/ej2-base/dom';import { NotifyPropertyChanges, INotifyPropertyChanged, Complex } from '@syncfusion/ej2-base/notify-property-change';import { Popup } from '../popup/popup';import { OffsetPosition, calculatePosition } from '../common/position';import { isCollide, fit } from '../common/collision';import { TooltipHelper } from './tooltip-builder';
import {TooltipAnimationSettings,Position,TipPointerPosition,OpenMode,TooltipEventArgs} from "./tooltip";
import {TooltipAnimationSettings,Position,TipPointerPosition,TooltipEventArgs} from "./tooltip";
import {ComponentModel} from '@syncfusion/ej2-base';

@@ -11,6 +11,6 @@

/**
* Animation settings to be applied on tooltip, while it is being shown over the target. */ open?: TooltipAnimationSettings;
* Animation settings to be applied on the Tooltip, while it is being shown over the target. */ open?: TooltipAnimationSettings;
/**
* Animation settings to be applied on tooltip, while it is being closed. */ close?: TooltipAnimationSettings;
* Animation settings to be applied on the Tooltip, when it is closed. */ close?: TooltipAnimationSettings;

@@ -25,73 +25,73 @@ }

/**
* Sets the `width` of the tooltip, accepting both string and number values. * When set to `auto`, the tooltip width gets auto-adjusted to display its content related to the viewable screen size. * @default 'auto' */ width?: string | number;
* Sets the `width` of the Tooltip, accepting both string and number values. * When set to `auto`, the Tooltip width gets auto adjusted to display its content within the viewable screen. * @default 'auto' */ width?: string | number;
/**
* Sets the `height` of the tooltip, accepting both string and number values. * When `height` is specified with certain pixel value and if the tooltip content overflows, * then the scrolling mode gets enabled on the tooltip. * @default 'auto' */ height?: string | number;
* Sets the `height` of the Tooltip, accepting both string and number values. * When `height` is specified with a certain pixel value and if the Tooltip content overflows, * then the scrolling mode gets enabled on the Tooltip. * @default 'auto' */ height?: string | number;
/**
* Displays the content value on the tooltip, accepting both string and HTMLElement values. */ content?: string | HTMLElement;
* Displays the content value on the Tooltip, accepting both string and HTMLElement values. */ content?: string | HTMLElement;
/**
* Denotes the target selectors on which the tooltip gets triggered. * In this case, the initialized tooltip element will be considered as the parent container. */ target?: string;
* Denotes the target selectors on which the Tooltip gets triggered. * In this case, the initialized Tooltip element is considered the parent container. */ target?: string;
/**
* Allows to set position for the tooltip element. Avails the user with 12 default options to position the tooltip. * @default 'top center' */ position?: Position;
* Allows you to set the position for the Tooltip element, and provides 12 default options to position the Tooltip. * @default 'top center' */ position?: Position;
/**
* Sets the space between the target and tooltip element in x axis. * @default 0 */ offsetX?: number;
* Sets the space between the target and Tooltip element in X axis. * @default 0 */ offsetX?: number;
/**
* Sets the space between the target and tooltip element in y axis. * @default 0 */ offsetY?: number;
* Sets the space between the target and Tooltip element in Y axis. * @default 0 */ offsetY?: number;
/**
* Allows either to show or hide the tip pointer on the tooltip. * @default true */ showTipPointer?: boolean;
* Allows you to either show or hide the tip pointer on the Tooltip. * @default true */ showTipPointer?: boolean;
/**
* Sets the position of the tip pointer on the tooltip. * When set to `auto`, the tip pointer will be auto-adjusted within the space of target's length * and will not tend to point outside of it. * @default 'auto' */ tipPointerPosition?: TipPointerPosition;
* Sets the position of the tip pointer on the Tooltip. * When set to `auto`, the tip pointer auto adjusts within the space of target's length * and does not point outside. * @default 'auto' */ tipPointerPosition?: TipPointerPosition;
/**
* Determines on which open mode, the tooltip needs to be shown. With the default value set to `hover`, * if the tooltip to be displayed in touch devices, then one needs to tap and hold the target element to view it's related content. * @default 'hover' */ opensOn?: OpenMode;
* Determines on which open mode, the Tooltip needs to be shown. With the default value set to `auto`, * Tooltip appears when the user hovers or focuses on a target on the desktop. * If the Tooltip is to be displayed on touch devices, then one needs to tap and hold the target element to view it's related content. * @default 'auto' */ opensOn?: string;
/**
* When set to `true`, allows the tooltip to follow the mouse pointer movement over the specified target element. * @default false */ mouseTrail?: boolean;
* When set to `true`, allows the Tooltip to follow the mouse pointer movement over the specified target element. * @default false */ mouseTrail?: boolean;
/**
* When set to `true`, allows the tooltip to stay open on the target until it is being manually closed. * @default false */ isSticky?: Boolean;
* When set to `true`, allows the Tooltip to stay open on the target until it is manually closed. * @default false */ isSticky?: Boolean;
/**
* Allows to set the same or different animation options for the tooltip, while it is being opened or closed. * @default { open: { effect: 'FadeIn', duration: 150, delay: 0 }, close: { effect: 'FadeOut', duration: 150, delay: 0 } } */ animation?: AnimationModel;
* Allows to set the same or different animation option for the Tooltip, when it is opened or closed. * @default { open: { effect: 'FadeIn', duration: 150, delay: 0 }, close: { effect: 'FadeOut', duration: 150, delay: 0 } } */ animation?: AnimationModel;
/**
* Opens the tooltip after the specified delay in milliseconds. * @default 0 */ openDelay?: number;
* Opens the Tooltip after the specified delay in milliseconds. * @default 0 */ openDelay?: number;
/**
* Closes the tooltip after the specified delay in milliseconds. * @default 0 */ closeDelay?: number;
* Closes the Tooltip after the specified delay in milliseconds. * @default 0 */ closeDelay?: number;
/**
* Accepts the CSS class name to be applied for the tooltip. * @default null */ cssClass?: string;
* Allows the CSS class name to be applied to the Tooltip. * @default null */ cssClass?: string;
/**
* When set to `true`, enables the RTL mode on the tooltip, the tooltip and its content displays in the direction from right to left. * @default false */ enableRtl?: boolean;
* When set to `true`, enables the RTL mode on the Tooltip, and the Tooltip and its content are displayed * in the right to left direction. * @default false */ enableRtl?: boolean;
/**
* Triggers before the tooltip and its contents are added to the DOM. * When one of its argument `cancel` is set to true, the tooltip can be prevented from rendering on the page. * This event is mainly used for the purpose of customizing the tooltip before it shows up on the screen. * For example, To load the ajax content or to set new animation effects on the tooltip, this event can be opted. * @event */ beforeRender?: EmitType<TooltipEventArgs>;
* Triggers before the Tooltip and its contents are added to the DOM. * When one of its arguments `cancel` is set to true, the Tooltip can be prevented from rendering on the page. * This event is mainly used for the purpose of customizing the Tooltip before it shows up on the screen. * For example, to load the AJAX content or to set new animation effects on the Tooltip, this event can be opted. * @event */ beforeRender?: EmitType<TooltipEventArgs>;
/**
* Triggers before the tooltip is displayed over the target element. * When one of its argument `cancel` is set to true, the tooltip display can be prevented. * This event is mainly used for the purpose of refreshing the tooltip positions dynamically or to * set customized styles in it and so on. * @event */ beforeOpen?: EmitType<TooltipEventArgs>;
* Triggers 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. * This event is mainly used for the purpose of refreshing the Tooltip positions dynamically or to * set customized styles in it and so on. * @event */ beforeOpen?: EmitType<TooltipEventArgs>;
/**
* Triggers after the tooltip UI is shown on the target. * @event */ afterOpen?: EmitType<TooltipEventArgs>;
* Triggers after the Tooltip UI is shown on the target. * @event */ afterOpen?: EmitType<TooltipEventArgs>;
/**
* Triggers before the tooltip hides from the screen. If we return false here, then the tooltip no more gets hidden. * @event */ beforeClose?: EmitType<TooltipEventArgs>;
* Triggers before the Tooltip hides from the screen. If returned false, then the Tooltip is no more hidden. * @event */ beforeClose?: EmitType<TooltipEventArgs>;
/**
* Triggers after the tooltip UI is hidden. * @event */ afterClose?: EmitType<TooltipEventArgs>;
* Triggers after the Tooltip UI is hidden. * @event */ afterClose?: EmitType<TooltipEventArgs>;
/**
* Triggers after the tooltip control is created. * @event */ created?: EmitType<Object>;
* Triggers after the Tooltip control is created. * @event */ created?: EmitType<Object>;
/**
* Triggers when the tooltip control is destroyed. * @event */ destroyed?: EmitType<Object>;
* Triggers when the Tooltip control is destroyed. * @event */ destroyed?: EmitType<Object>;
}

136

src/tooltip/tooltip.d.ts

@@ -7,15 +7,15 @@ import { Component, ChildProperty, BaseEventArgs } from '@syncfusion/ej2-base';

/**
* Set of open modes available for tooltip.
* Set of open modes available for Tooltip.
*/
export declare type OpenMode = 'hover' | 'click' | 'focus' | 'custom';
export declare type OpenMode = 'auto' | 'hover' | 'click' | 'focus' | 'custom';
/**
* Applicable positions where the tooltip can be displayed over specific target elements.
* Applicable positions where the Tooltip can be displayed over specific target elements.
*/
export declare type Position = 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right' | 'left top' | 'left center' | 'left bottom' | 'right top' | 'right center' | 'right bottom';
/**
* Applicable tip positions attached to the tooltip.
* Applicable tip positions attached to the Tooltip.
*/
export declare type TipPointerPosition = 'auto' | 'start' | 'middle' | 'end';
/**
* Animation effects that are applicable for tooltip.
* Animation effects that are applicable for Tooltip.
*/

@@ -32,3 +32,3 @@ export declare type Effect = 'FadeIn' | 'FadeOut' | 'FadeZoomIn' | 'FadeZoomOut' | 'FlipXDownIn' | 'FlipXDownOut' | 'FlipXUpIn' | 'FlipXUpOut' | 'FlipYLeftIn' | 'FlipYLeftOut' | 'FlipYRightIn' | 'FlipYRightOut' | 'ZoomIn' | 'ZoomOut' | 'None';

/**
* Depicts whether the current action needs to be prevented or not.
* Illustrates whether the current action needs to be prevented or not.
*/

@@ -41,3 +41,3 @@ cancel: Boolean;

/**
* Current target element for which the tooltip is displayed.
* Current target element where the Tooltip is to be displayed.
*/

@@ -51,15 +51,15 @@ target: HTMLElement;

/**
* Animation options that are common for both open and close action of tooltip.
* Animation options that are common for both open and close actions of the Tooltip.
*/
export interface TooltipAnimationSettings {
/**
* Animation effect that applies on the tooltip, during the open and close actions.
* Animation effect that applies on the Tooltip, during open and close actions.
*/
effect?: Effect;
/**
* Denotes the `duration` of the animation, that gets completed per animation cycle.
* Denotes the `duration` of the animation that is completed per animation cycle.
*/
duration?: number;
/**
* Specifies the `delay` value in milliseconds, depicting the time to wait before the animation begins.
* Specifies the `delay` value in milliseconds, indicating the waiting time before animation begins.
*/

@@ -70,7 +70,7 @@ delay?: number;

/**
* Animation settings to be applied on tooltip, while it is being shown over the target.
* Animation settings to be applied on the Tooltip, while it is being shown over the target.
*/
open: TooltipAnimationSettings;
/**
* Animation settings to be applied on tooltip, while it is being closed.
* Animation settings to be applied on the Tooltip, when it is closed.
*/

@@ -80,3 +80,3 @@ close: TooltipAnimationSettings;

/**
* Represents the Tooltip component which displays a piece of information about the target element on which it is being hovered on.
* Represents the Tooltip component that displays a piece of information about the target element on mouse hover.
* ```html

@@ -108,4 +108,4 @@ * <div id="tooltip">Show Tooltip</div>

/**
* Sets the `width` of the tooltip, accepting both string and number values.
* When set to `auto`, the tooltip width gets auto-adjusted to display its content related to the viewable screen size.
* Sets the `width` of the Tooltip, accepting both string and number values.
* When set to `auto`, the Tooltip width gets auto adjusted to display its content within the viewable screen.
* @default 'auto'

@@ -115,5 +115,5 @@ */

/**
* Sets the `height` of the tooltip, accepting both string and number values.
* When `height` is specified with certain pixel value and if the tooltip content overflows,
* then the scrolling mode gets enabled on the tooltip.
* Sets the `height` of the Tooltip, accepting both string and number values.
* When `height` is specified with a certain pixel value and if the Tooltip content overflows,
* then the scrolling mode gets enabled on the Tooltip.
* @default 'auto'

@@ -123,12 +123,12 @@ */

/**
* Displays the content value on the tooltip, accepting both string and HTMLElement values.
* Displays the content value on the Tooltip, accepting both string and HTMLElement values.
*/
content: string | HTMLElement;
/**
* Denotes the target selectors on which the tooltip gets triggered.
* In this case, the initialized tooltip element will be considered as the parent container.
* Denotes the target selectors on which the Tooltip gets triggered.
* In this case, the initialized Tooltip element is considered the parent container.
*/
target: string;
/**
* Allows to set position for the tooltip element. Avails the user with 12 default options to position the tooltip.
* Allows you to set the position for the Tooltip element, and provides 12 default options to position the Tooltip.
* @default 'top center'

@@ -138,3 +138,3 @@ */

/**
* Sets the space between the target and tooltip element in x axis.
* Sets the space between the target and Tooltip element in X axis.
* @default 0

@@ -144,3 +144,3 @@ */

/**
* Sets the space between the target and tooltip element in y axis.
* Sets the space between the target and Tooltip element in Y axis.
* @default 0

@@ -150,3 +150,3 @@ */

/**
* Allows either to show or hide the tip pointer on the tooltip.
* Allows you to either show or hide the tip pointer on the Tooltip.
* @default true

@@ -156,5 +156,5 @@ */

/**
* Sets the position of the tip pointer on the tooltip.
* When set to `auto`, the tip pointer will be auto-adjusted within the space of target's length
* and will not tend to point outside of it.
* Sets the position of the tip pointer on the Tooltip.
* When set to `auto`, the tip pointer auto adjusts within the space of target's length
* and does not point outside.
* @default 'auto'

@@ -164,9 +164,10 @@ */

/**
* Determines on which open mode, the tooltip needs to be shown. With the default value set to `hover`,
* if the tooltip to be displayed in touch devices, then one needs to tap and hold the target element to view it's related content.
* @default 'hover'
* Determines on which open mode, the Tooltip needs to be shown. With the default value set to `auto`,
* Tooltip appears when the user hovers or focuses on a target on the desktop.
* If the Tooltip is to be displayed on touch devices, then one needs to tap and hold the target element to view it's related content.
* @default 'auto'
*/
opensOn: OpenMode;
opensOn: string;
/**
* When set to `true`, allows the tooltip to follow the mouse pointer movement over the specified target element.
* When set to `true`, allows the Tooltip to follow the mouse pointer movement over the specified target element.
* @default false

@@ -176,3 +177,3 @@ */

/**
* When set to `true`, allows the tooltip to stay open on the target until it is being manually closed.
* When set to `true`, allows the Tooltip to stay open on the target until it is manually closed.
* @default false

@@ -182,3 +183,3 @@ */

/**
* Allows to set the same or different animation options for the tooltip, while it is being opened or closed.
* Allows to set the same or different animation option for the Tooltip, when it is opened or closed.
* @default { open: { effect: 'FadeIn', duration: 150, delay: 0 }, close: { effect: 'FadeOut', duration: 150, delay: 0 } }

@@ -188,3 +189,3 @@ */

/**
* Opens the tooltip after the specified delay in milliseconds.
* Opens the Tooltip after the specified delay in milliseconds.
* @default 0

@@ -194,3 +195,3 @@ */

/**
* Closes the tooltip after the specified delay in milliseconds.
* Closes the Tooltip after the specified delay in milliseconds.
* @default 0

@@ -200,3 +201,3 @@ */

/**
* Accepts the CSS class name to be applied for the tooltip.
* Allows the CSS class name to be applied to the Tooltip.
* @default null

@@ -206,3 +207,4 @@ */

/**
* When set to `true`, enables the RTL mode on the tooltip, the tooltip and its content displays in the direction from right to left.
* When set to `true`, enables the RTL mode on the Tooltip, and the Tooltip and its content are displayed
* in the right to left direction.
* @default false

@@ -212,6 +214,6 @@ */

/**
* Triggers before the tooltip and its contents are added to the DOM.
* When one of its argument `cancel` is set to true, the tooltip can be prevented from rendering on the page.
* This event is mainly used for the purpose of customizing the tooltip before it shows up on the screen.
* For example, To load the ajax content or to set new animation effects on the tooltip, this event can be opted.
* Triggers before the Tooltip and its contents are added to the DOM.
* When one of its arguments `cancel` is set to true, the Tooltip can be prevented from rendering on the page.
* This event is mainly used for the purpose of customizing the Tooltip before it shows up on the screen.
* For example, to load the AJAX content or to set new animation effects on the Tooltip, this event can be opted.
* @event

@@ -221,5 +223,5 @@ */

/**
* Triggers before the tooltip is displayed over the target element.
* When one of its argument `cancel` is set to true, the tooltip display can be prevented.
* This event is mainly used for the purpose of refreshing the tooltip positions dynamically or to
* Triggers 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.
* This event is mainly used for the purpose of refreshing the Tooltip positions dynamically or to
* set customized styles in it and so on.

@@ -230,3 +232,3 @@ * @event

/**
* Triggers after the tooltip UI is shown on the target.
* Triggers after the Tooltip UI is shown on the target.
* @event

@@ -236,3 +238,3 @@ */

/**
* Triggers before the tooltip hides from the screen. If we return false here, then the tooltip no more gets hidden.
* Triggers before the Tooltip hides from the screen. If returned false, then the Tooltip is no more hidden.
* @event

@@ -242,3 +244,3 @@ */

/**
* Triggers after the tooltip UI is hidden.
* Triggers after the Tooltip UI is hidden.
* @event

@@ -248,3 +250,3 @@ */

/**
* Triggers after the tooltip control is created.
* Triggers after the Tooltip control is created.
* @event

@@ -254,3 +256,3 @@ */

/**
* Triggers when the tooltip control is destroyed.
* Triggers when the Tooltip control is destroyed.
* @event

@@ -260,3 +262,3 @@ */

/**
* Constructor for creating the tooltip widget
* Constructor for creating the Tooltip widget
*/

@@ -282,2 +284,3 @@ constructor(options?: TooltipModel, element?: string | HTMLElement);

private touchEndHandler(e);
private targetClick(e);
private targetHover(e);

@@ -307,8 +310,9 @@ private showTooltip(target, showAnimation, e?);

/**
* Binding events to the tooltip element.
* Binding events to the Tooltip element.
* @hidden
*/
private wireEvents(opensOn);
private wireEvents(trigger);
private getTriggerList(trigger);
private wireFocusEvents();
private wireMouseEvents(target);
private wireMouseEvents(e, target);
/**

@@ -318,3 +322,3 @@ * Unbinding events from the element on widget destroy.

*/
private unwireEvents(opensOn);
private unwireEvents(trigger);
private unwireFocusEvents();

@@ -338,5 +342,5 @@ private unwireMouseEvents(target);

/**
* Shows the tooltip on the specified target with specific animation settings.
* @param element Target element for which the tooltip is to be displayed.
* @param animation Sets the specific animation, while showing the tooltip on the screen.
* Shows 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}

@@ -346,4 +350,4 @@ */

/**
* Hides the tooltip with specific animation effect.
* @param animation Sets the specific animation, on hiding tooltip from the screen.
* Hides the Tooltip with specific animation effect.
* @param animation Sets the specific animation when hiding Tooltip from the screen.
* @return {void}

@@ -353,4 +357,4 @@ */

/**
* Refreshes the tooltip content and its position.
* @param target Target element for which the tooltip content or position needs to be refreshed.
* Refreshes the Tooltip content and its position.
* @param target Target element where the Tooltip content or position needs to be refreshed.
* @return {void}

@@ -360,3 +364,3 @@ */

/**
* Destroys the tooltip widget.
* Destroys the Tooltip widget.
* @method destroy

@@ -369,4 +373,4 @@ * @return {void}

/**
* Builder for tooltip.
* Builder for Tooltip.
*/
export declare let tooltipBuilder: TooltipHelper;

245

src/tooltip/tooltip.js

@@ -25,2 +25,3 @@ var __extends = (this && this.__extends) || (function () {

var MOUSE_TRAIL_GAP = 2;
var POINTER_ADJUST = 2;
var ROOT = 'e-tooltip';

@@ -81,4 +82,2 @@ var RTL = 'e-rtl';

this.tooltipEle.appendChild(tip);
this.tipWidth = tip.offsetWidth;
this.tipHeight = tip.offsetHeight;
};

@@ -135,11 +134,10 @@ Tooltip.prototype.setTipClass = function (position) {

var tooltipEleHeight = this.tooltipEle.offsetHeight;
var tipWidth = this.tipWidth;
var tipHeight = this.tipHeight;
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;
var tipWidthAdjust = tipWidth;
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;
tipHeightAdjust = tipHeight / 2;
tipWidthAdjust = tipWidth / 2;
}

@@ -214,56 +212,31 @@ switch (position) {

var topValue;
var tooltipWidth = this.tooltipEle.offsetWidth;
var tooltipHeight = this.tooltipEle.offsetHeight;
var tooltipWidth = this.tooltipEle.clientWidth;
var tooltipHeight = this.tooltipEle.clientHeight;
var arrowEle = this.tooltipEle.querySelector('.' + ARROW_TIP);
var tipWidth = this.tipWidth = arrowEle.offsetWidth;
var tipHeight = this.tipHeight = arrowEle.offsetHeight;
var tipAdjust = 2;
var tipWidth = arrowEle.offsetWidth;
var tipHeight = arrowEle.offsetHeight;
if (this.tipClass === TIP_BOTTOM || this.tipClass === TIP_TOP) {
topValue = this.tipClass === TIP_BOTTOM ? '100%' : -(tipHeight) + 'px';
if (tooltipPositionX !== 'center' || (tooltipWidth > target.offsetWidth) || this.mouseTrail) {
if (tooltipPositionX === 'left') {
leftValue = (tooltipWidth - tipWidth - tipAdjust - 1) + 'px';
}
else if (tooltipPositionX === 'right') {
leftValue = tipAdjust + 'px';
}
else {
leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + '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 {
if (this.tipPointerPosition === 'start') {
leftValue = tipAdjust + 'px';
}
else if (this.tipPointerPosition === 'end') {
leftValue = (tooltipWidth - tipWidth - tipAdjust) + 'px';
}
else {
leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';
}
leftValue = ((tooltipWidth / 2) - (tipWidth / 2)) + 'px';
}
}
else {
leftValue = this.tipClass === TIP_RIGHT ? tooltipWidth - 2 + 'px' : -(tipWidth) + 'px';
if (tooltipPositionY !== 'center' || (tooltipHeight > target.offsetHeight) || this.mouseTrail) {
if (tooltipPositionY === 'top') {
topValue = (tooltipHeight - tipHeight - tipAdjust) + 'px';
}
else if (tooltipPositionY === 'bottom') {
topValue = tipAdjust + 'px';
}
else {
topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';
}
leftValue = this.tipClass === TIP_RIGHT ? tooltipWidth + 'px' : -(tipWidth) + '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 {
if (this.tipPointerPosition === 'start') {
topValue = tipAdjust + 'px';
}
else if (this.tipPointerPosition === 'end') {
topValue = (tooltipHeight - tipHeight - tipAdjust) + 'px';
}
else {
topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';
}
topValue = ((tooltipHeight / 2) - (tipHeight / 2)) + 'px';
}

@@ -281,5 +254,11 @@ }

if (!util_1.isNullOrUndefined(this.content)) {
tooltipContent.innerHTML = '';
typeof (this.content) === 'string' ? tooltipContent.innerHTML = this.content :
if (typeof (this.content) === 'string') {
tooltipContent.innerHTML = this.content;
}
else {
while (tooltipContent.firstChild) {
tooltipContent.removeChild(tooltipContent.firstChild);
}
tooltipContent.appendChild(this.content);
}
}

@@ -298,7 +277,9 @@ else {

this.tooltipEle.appendChild(tipClose);
ej2_base_2.EventHandler.add(tipClose, 'click touchstart', this.onStickyClose, this);
ej2_base_2.EventHandler.add(tipClose, ej2_base_2.Browser.touchStartEvent, this.onStickyClose, this);
};
Tooltip.prototype.addDescribedBy = function (target, id) {
var describedby = (target.getAttribute('aria-describedby') || '').split(/\s+/);
describedby.push(id);
if (describedby.indexOf(id) < 0) {
describedby.push(id);
}
dom_1.attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });

@@ -336,2 +317,20 @@ };

};
Tooltip.prototype.targetClick = function (e) {
var target;
if (this.target) {
target = dom_1.closest(e.target, this.target);
}
else {
target = this.element;
}
if (util_1.isNullOrUndefined(target)) {
return;
}
if (target.getAttribute('data-tooltip-id') === null) {
this.targetHover(e);
}
else {
this.onMouseOut(e);
}
};
Tooltip.prototype.targetHover = function (e) {

@@ -354,3 +353,3 @@ var target;

this.showTooltip(target, this.animation.open, e);
this.wireMouseEvents(target);
this.wireMouseEvents(e, target);
};

@@ -398,2 +397,3 @@ Tooltip.prototype.showTooltip = function (target, showAnimation, e) {

else {
this.adjustArrow(target, this.position, this.tooltipPositionX, this.tooltipPositionY);
this.addDescribedBy(target, this.ctrlId + '_content');

@@ -483,4 +483,4 @@ this.renderContent(target);

}
else if ((arrowleft + this.tipWidth) > this.tooltipEle.clientWidth) {
arrowleft = this.tooltipEle.clientWidth - this.tipWidth;
else if ((arrowleft + arrowEle.offsetWidth) > this.tooltipEle.clientWidth) {
arrowleft = this.tooltipEle.clientWidth - arrowEle.offsetWidth;
}

@@ -599,3 +599,3 @@ arrowEle.style.left = arrowleft.toString() + 'px';

Tooltip.prototype.keyDown = function (event) {
if ((event.keyCode === 27)) {
if (this.tooltipEle && event.keyCode === 27) {
this.close();

@@ -605,3 +605,3 @@ }

Tooltip.prototype.touchEnd = function (e) {
if (dom_1.closest(e.target, '.' + ROOT) === null) {
if (this.tooltipEle && dom_1.closest(e.target, '.' + ROOT) === null) {
this.close();

@@ -624,26 +624,28 @@ }

this.isHidden = true;
this.tipWidth = 0;
this.tipHeight = 0;
};
Tooltip.prototype.wireEvents = function (opensOn) {
if (opensOn === 'custom') {
return;
}
if (opensOn === 'focus') {
this.wireFocusEvents();
}
else if (opensOn === 'click') {
ej2_base_2.EventHandler.add(this.element, 'click touchstart', this.targetHover, this);
}
else {
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);
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 {
ej2_base_2.EventHandler.add(this.element, 'mouseover', this.targetHover, this);
if (opensOn === 'focus') {
this.wireFocusEvents();
}
if (opensOn === 'click') {
ej2_base_2.EventHandler.add(this.element, ej2_base_2.Browser.touchStartEvent, this.targetClick, this);
}
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);
}
else {
ej2_base_2.EventHandler.add(this.element, 'mouseover', this.targetHover, this);
}
}
}

@@ -654,2 +656,8 @@ ej2_base_2.EventHandler.add(document, 'touchend', this.touchEnd, 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 () {

@@ -660,12 +668,17 @@ if (!util_1.isNullOrUndefined(this.target)) {

var target = targetList_2[_i];
ej2_base_2.EventHandler.add(target, 'focus touchstart', this.targetHover, this);
ej2_base_2.EventHandler.add(target, 'focus', this.targetHover, this);
}
}
else {
ej2_base_2.EventHandler.add(this.element, 'focus touchstart', this.targetHover, this);
ej2_base_2.EventHandler.add(this.element, 'focus', this.targetHover, this);
}
};
Tooltip.prototype.wireMouseEvents = function (target) {
Tooltip.prototype.wireMouseEvents = function (e, target) {
if (!this.isSticky) {
ej2_base_2.EventHandler.add(target, (this.opensOn === 'focus' ? 'blur' : 'mouseleave'), this.onMouseOut, this);
if (e.type === 'focus') {
ej2_base_2.EventHandler.add(target, 'blur', this.onMouseOut, this);
}
if (e.type === 'mouseover') {
ej2_base_2.EventHandler.add(target, 'mouseleave', this.onMouseOut, this);
}
}

@@ -676,22 +689,26 @@ if (this.mouseTrail) {

};
Tooltip.prototype.unwireEvents = function (opensOn) {
if (opensOn === 'custom') {
return;
}
if (opensOn === 'focus') {
this.unwireFocusEvents();
}
else if (opensOn === 'click') {
ej2_base_2.EventHandler.remove(this.element, 'click touchstart', this.targetHover);
}
else {
if (ej2_base_2.Browser.isDevice) {
if (this.touchModule) {
this.touchModule.destroy();
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);
}
ej2_base_2.EventHandler.remove(this.element, ej2_base_2.Browser.touchEndEvent, this.touchEndHandler);
else {
ej2_base_2.EventHandler.remove(this.element, 'mouseover', this.targetHover);
}
}
else {
ej2_base_2.EventHandler.remove(this.element, 'mouseover', this.targetHover);
}
}

@@ -707,7 +724,7 @@ ej2_base_2.EventHandler.remove(document, 'touchend', this.touchEnd);

var target = targetList_3[_i];
ej2_base_2.EventHandler.remove(target, 'focus touchstart', this.targetHover);
ej2_base_2.EventHandler.remove(target, 'focus', this.targetHover);
}
}
else {
ej2_base_2.EventHandler.remove(this.element, 'focus touchstart', this.targetHover);
ej2_base_2.EventHandler.remove(this.element, 'focus', this.targetHover);
}

@@ -717,3 +734,12 @@ };

if (!this.isSticky) {
ej2_base_2.EventHandler.remove(target, (this.opensOn === 'focus' ? 'blur' : 'mouseleave'), this.onMouseOut);
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);
}
if (opensOn === 'hover' && !ej2_base_2.Browser.isDevice) {
ej2_base_2.EventHandler.remove(target, 'mouseleave', this.onMouseOut);
}
}
}

@@ -797,2 +823,5 @@ if (this.mouseTrail) {

if (animation === void 0) { animation = this.animation.open; }
if (element.style.display === 'none') {
return;
}
this.showTooltip(element, animation);

@@ -855,3 +884,3 @@ };

__decorate([
ej2_base_1.Property('hover')
ej2_base_1.Property('auto')
], Tooltip.prototype, "opensOn", void 0);

@@ -858,0 +887,0 @@ __decorate([

dist/global/popup.js
dist/global/tooltip.js
dist/ej2-popups.umd.min.js

Sorry, the diff of this file is too big to display

dist/global/ej2-popups.min.js

Sorry, the diff of this file is too big to display

dist/global/ej2-popups.min.js.map

Sorry, the diff of this file is not supported yet

styles/dialog/_icons.scss

Sorry, the diff of this file is not supported yet

styles/dialog/_layout.scss

Sorry, the diff of this file is not supported yet

styles/dialog/material.css

Sorry, the diff of this file is not supported yet

styles/material.css

Sorry, the diff of this file is not supported yet

styles/popup/material.css

Sorry, the diff of this file is not supported yet

styles/tooltip/_definition.scss

Sorry, the diff of this file is not supported yet

styles/tooltip/_layout.scss

Sorry, the diff of this file is not supported yet

styles/tooltip/_material-definition.scss

Sorry, the diff of this file is not supported yet

styles/tooltip/_theme.scss

Sorry, the diff of this file is not supported yet

styles/tooltip/material.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc