Socket
Socket
Sign inDemoInstall

@syncfusion/ej2-popups

Package Overview
Dependencies
Maintainers
2
Versions
226
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@syncfusion/ej2-popups - npm Package Compare versions

Comparing version 1.0.11 to 1.0.14

dist/ej2-popups.umd.js
styles/dialog/_fabric-definition.scss
styles/dialog/fabric.css
styles/dialog/fabric.scss
styles/fabric.css
styles/fabric.scss
styles/popup/fabric.css
styles/popup/fabric.scss
styles/tooltip/fabric.css
styles/tooltip/fabric.scss

2

common.d.ts
/**
* common
*/
export * from './src/common';
export * from './src/common/index';

4

common.js

@@ -1,2 +0,2 @@

define(["require", "exports", "./src/common"], function (require, exports, common_1) {
define(["require", "exports", "./src/common/index"], function (require, exports, index_1) {
"use strict";

@@ -7,3 +7,3 @@ function __export(m) {

Object.defineProperty(exports, "__esModule", { value: true });
__export(common_1);
__export(index_1);
});

2

dialog.d.ts
/**
* dialog
*/
export * from './src/dialog';
export * from './src/dialog/index';

4

dialog.js

@@ -1,2 +0,2 @@

define(["require", "exports", "./src/dialog"], function (require, exports, dialog_1) {
define(["require", "exports", "./src/dialog/index"], function (require, exports, index_1) {
"use strict";

@@ -7,3 +7,3 @@ function __export(m) {

Object.defineProperty(exports, "__esModule", { value: true });
__export(dialog_1);
__export(index_1);
});

10

dist/es6/dialog/dialog.js

@@ -18,6 +18,6 @@ var __extends = (this && this.__extends) || (function () {

import { Component, Property, Event, CreateBuilder, Collection, L10n, Browser } from '@syncfusion/ej2-base';
import { createElement, addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base/dom';
import { createElement, addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';
import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base/util';
import { EventHandler } from '@syncfusion/ej2-base/event-handler';
import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';
import { EventHandler } from '@syncfusion/ej2-base';
import { Draggable } from '@syncfusion/ej2-base';

@@ -299,2 +299,6 @@ import { Popup } from '../popup/popup';

this.element.insertBefore(this.contentEle, this.element.children[0]);
if (this.height === 'auto') {
this.element.style.maxHeight = (!isNullOrUndefined(this.target)) ?
(this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';
}
};

@@ -301,0 +305,0 @@ Dialog.prototype.setEnableRTL = function () {

8

dist/es6/index.js

@@ -1,4 +0,4 @@

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

124

dist/es6/popup/popup.js

@@ -17,9 +17,9 @@ var __extends = (this && this.__extends) || (function () {

};
import { setStyleAttribute, addClass, removeClass } from '@syncfusion/ej2-base/dom';
import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base/util';
import { Browser } from '@syncfusion/ej2-base/browser';
import { setStyleAttribute, addClass, removeClass } 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/notify-property-change';
import { EventHandler } from '@syncfusion/ej2-base/event-handler';
import { NotifyPropertyChanges } from '@syncfusion/ej2-base';
import { EventHandler } from '@syncfusion/ej2-base';
import { flip, fit, isCollide } from '../common/collision';

@@ -56,3 +56,2 @@ var CLASSNAMES = {

this.refreshPosition();
this.checkCollision();
break;

@@ -81,5 +80,3 @@ case 'offsetX':

this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL);
if (Browser.isDevice) {
EventHandler.remove(window, 'orientationchange', this.orientationOnChange);
}
this.unwireEvents();
_super.prototype.destroy.call(this);

@@ -102,10 +99,86 @@ };

this.setContent();
this.wireEvents();
};
Popup.prototype.wireEvents = function () {
if (Browser.isDevice) {
EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);
}
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);
}
}
};
Popup.prototype.unwireEvents = function () {
if (Browser.isDevice) {
EventHandler.remove(window, 'orientationchange', this.orientationOnChange);
}
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);
}
}
};
Popup.prototype.getRelateToElement = function () {
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 if (this.actionOnScroll === 'hide') {
this.hide();
}
if (this.getRelateToElement()) {
var targetVisible = this.isElementOnViewport(this.getRelateToElement());
if (!targetVisible && !this.targetInvisibleStatus) {
this.trigger('targetExitViewport');
this.targetInvisibleStatus = true;
}
else if (targetVisible) {
this.targetInvisibleStatus = false;
}
}
};
Popup.prototype.isElementOnViewport = function (relateToElement) {
var rect = relateToElement.getBoundingClientRect();
if (!rect.height || !rect.width) {
return false;
}
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;
};
Popup.prototype.preRender = function () {
};
Popup.prototype.setEnableRtl = function () {
this.refreshPosition();
this.reposition();
this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);

@@ -128,9 +201,11 @@ };

_this.refreshPosition();
_this.checkCollision();
}, 200);
};
Popup.prototype.refreshPosition = function () {
this.reposition();
this.checkCollision();
};
Popup.prototype.reposition = function () {
var pos;
var relateToElement = ((typeof this.relateTo) === 'string') ?
document.querySelector(this.relateTo) : this.relateTo;
var relateToElement = this.getRelateToElement();
if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {

@@ -209,4 +284,3 @@ pos = { left: this.position.X, top: this.position.Y };

Popup.prototype.callFlip = function (param) {
var relateToElement = ((typeof this.relateTo) === 'string') ?
document.querySelector(this.relateTo) : this.relateTo;
var relateToElement = this.getRelateToElement();
flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param);

@@ -250,2 +324,4 @@ };

var _this = this;
animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?
animationOptions : this.showAnimation;
if (this.collision.X !== 'none' || this.collision.Y !== 'none') {

@@ -258,3 +334,3 @@ removeClass([this.element], CLASSNAMES.CLOSE);

}
if (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') {
if (!isNullOrUndefined(animationOptions)) {
animationOptions.begin = function () {

@@ -281,3 +357,5 @@ if (!_this.isDestroyed) {

var _this = this;
if (animationOptions && typeof animationOptions === 'object') {
animationOptions = (!isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?
animationOptions : this.hideAnimation;
if (!isNullOrUndefined(animationOptions)) {
animationOptions.end = function () {

@@ -348,2 +426,11 @@ if (!_this.isDestroyed) {

__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()

@@ -354,2 +441,5 @@ ], Popup.prototype, "open", void 0);

], Popup.prototype, "close", void 0);
__decorate([
Event()
], Popup.prototype, "targetExitViewport", void 0);
Popup = __decorate([

@@ -356,0 +446,0 @@ NotifyPropertyChanges

6

dist/es6/tooltip/tooltip.js

@@ -19,5 +19,5 @@ var __extends = (this && this.__extends) || (function () {

import { EventHandler, Touch, 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, Complex } from '@syncfusion/ej2-base/notify-property-change';
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';

@@ -24,0 +24,0 @@ import { calculatePosition } from '../common/position';

6

package.json
{
"name": "@syncfusion/ej2-popups",
"version": "1.0.11",
"version": "1.0.14",
"description": "Essential JS 2 popup Component",

@@ -9,4 +9,4 @@ "author": "Syncfusion Inc.",

"dependencies": {
"@syncfusion/ej2-base": "^1.0.11",
"@syncfusion/ej2-buttons": "^1.0.11"
"@syncfusion/ej2-base": "^1.0.14",
"@syncfusion/ej2-buttons": "^1.0.14"
},

@@ -13,0 +13,0 @@ "devDependencies": {

2

popup.d.ts
/**
* popup
*/
export * from './src/popup';
export * from './src/popup/index';

4

popup.js

@@ -1,2 +0,2 @@

define(["require", "exports", "./src/popup"], function (require, exports, popup_1) {
define(["require", "exports", "./src/popup/index"], function (require, exports, index_1) {
"use strict";

@@ -7,3 +7,3 @@ function __export(m) {

Object.defineProperty(exports, "__esModule", { value: true });
__export(popup_1);
__export(index_1);
});

4

src/dialog/dialog-builder.d.ts

@@ -99,3 +99,5 @@ import{Dialog} from "./dialog";

/**
* Specifies the Dialog `position` with respect to the associated target elements.
* Specifies to `position` the Dialog on build-in 9 places or any custom location with
respect to the associated target elements.
For ex: {X:'left', Y:'top'} or { X: 100, Y: 100 }
*/

@@ -102,0 +104,0 @@ position(value: (val:PositionData) => void | Object): BuilderProperties;

144

src/dialog/dialog-model.d.ts

@@ -1,2 +0,2 @@

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

@@ -11,6 +11,11 @@ import {ComponentModel} from '@syncfusion/ej2-base';

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

@@ -25,79 +30,160 @@ }

/**
* Specifies the `content` to be displayed in Dialog, it can be text or HTML element. * @default '' */ content?: string | HTMLElement;
* Specifies the `content` to be displayed in Dialog, it can be text or HTML element.
* @default ''
*/
content?: string | HTMLElement;
/**
* Specifies the value to either show or hide the close icon button. * @default false */ showCloseIcon?: boolean;
* Specifies the value to either show or hide the close icon button.
* @default false
*/
showCloseIcon?: boolean;
/**
* Specifies the value to render the Dialog as modal or modeless. * @default false */ isModal?: boolean;
* Specifies the value to render the Dialog as modal or modeless.
* @default false
*/
isModal?: boolean;
/**
* Specifies the `header` content that defines how the Dialog `header` is rendered. * @default '' */ header?: string;
* Specifies the `header` content that defines how the Dialog `header` is rendered.
* @default ''
*/
header?: string;
/**
* Specifies the value to either Dialog is opened or not. * @default false */ visible?: 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 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 to `position` the Dialog on build-in 9 places or any custom location with
* respect to the associated target elements.
* For ex: {X:'left', Y:'top'} or { X: 100, Y: 100 }
* @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>;
}

4

src/dialog/dialog.d.ts

@@ -152,3 +152,5 @@ import { Component, EmitType } from '@syncfusion/ej2-base';

/**
* Specifies the Dialog `position` with respect to the associated target elements.
* Specifies to `position` the Dialog on build-in 9 places or any custom location with
* respect to the associated target elements.
* For ex: {X:'left', Y:'top'} or { X: 100, Y: 100 }
* @default {X:'center', Y:'center'}

@@ -155,0 +157,0 @@ */

192

src/dialog/dialog.js

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

};
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/event-handler", "@syncfusion/ej2-base", "../popup/popup", "@syncfusion/ej2-buttons"], function (require, exports, ej2_base_1, dom_1, ej2_base_2, util_1, event_handler_1, ej2_base_3, popup_1, ej2_buttons_1) {
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";

@@ -27,3 +27,3 @@ Object.defineProperty(exports, "__esModule", { value: true });

return ButtonProps;
}(ej2_base_2.ChildProperty));
}(ej2_base_3.ChildProperty));
__decorate([

@@ -82,7 +82,7 @@ ej2_base_1.Property()

if (event.shiftKey) {
focusIndex = (this.focusIndex === 0 || util_1.isNullOrUndefined(this.focusIndex)) ?
focusIndex = (this.focusIndex === 0 || ej2_base_4.isNullOrUndefined(this.focusIndex)) ?
this.focusElements.length - 1 : this.focusIndex - 1;
}
else {
focusIndex = (this.focusElements.length - 1 === this.focusIndex || util_1.isNullOrUndefined(this.focusIndex)) ?
focusIndex = (this.focusElements.length - 1 === this.focusIndex || ej2_base_4.isNullOrUndefined(this.focusIndex)) ?
0 : this.focusIndex + 1;

@@ -107,7 +107,7 @@ }

if ((event.keyCode === 13 && element.tagName.toLowerCase() === 'button' &&
element.classList.contains(DLG_PRIMARY_BUTTON) && !util_1.isNullOrUndefined(this.primaryButtonEle)) ||
element.classList.contains(DLG_PRIMARY_BUTTON) && !ej2_base_4.isNullOrUndefined(this.primaryButtonEle)) ||
(event.keyCode === 13 && !event.ctrlKey && element.tagName.toLowerCase() !== 'textarea' &&
isTagName && !util_1.isNullOrUndefined(this.primaryButtonEle)) ||
isTagName && !ej2_base_4.isNullOrUndefined(this.primaryButtonEle)) ||
(event.keyCode === 13 && event.ctrlKey && (element.tagName.toLowerCase() === 'textarea' ||
isContentEdit)) && !util_1.isNullOrUndefined(this.primaryButtonEle)) {
isContentEdit)) && !ej2_base_4.isNullOrUndefined(this.primaryButtonEle)) {
var buttonIndex_1;

@@ -117,3 +117,3 @@ var firstPrimary = this.buttons.some(function (data, index) {

var buttonModel = data.buttonModel;
return !util_1.isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;
return !ej2_base_4.isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;
});

@@ -128,12 +128,12 @@ if (firstPrimary && typeof (this.buttons[buttonIndex_1].click) === 'function') {

Dialog.prototype.initialize = function () {
if (!util_1.isNullOrUndefined(this.target)) {
if (!ej2_base_4.isNullOrUndefined(this.target)) {
this.targetEle = ((typeof this.target) === 'string') ?
document.querySelector(this.target) : this.target;
}
dom_1.addClass([this.element], ROOT);
ej2_base_2.addClass([this.element], ROOT);
if (ej2_base_1.Browser.isDevice) {
dom_1.addClass([this.element], DEVICE);
ej2_base_2.addClass([this.element], DEVICE);
}
this.setCSSClass();
this.element.style.maxHeight = (!util_1.isNullOrUndefined(this.target)) ?
this.element.style.maxHeight = (!ej2_base_4.isNullOrUndefined(this.target)) ?
(this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';

@@ -143,4 +143,4 @@ };

var _this = this;
dom_1.attributes(this.element, { role: 'dialog' });
if (util_1.isNullOrUndefined(this.zIndex)) {
ej2_base_2.attributes(this.element, { role: 'dialog' });
if (ej2_base_4.isNullOrUndefined(this.zIndex)) {
this.getZindexPartial();

@@ -154,3 +154,3 @@ }

}
if (!util_1.isNullOrUndefined(this.content) && this.content !== '') {
if (!ej2_base_4.isNullOrUndefined(this.content) && this.content !== '') {
this.setContent();

@@ -164,13 +164,13 @@ }

}
if (!util_1.isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {
if (!ej2_base_4.isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {
this.setButton();
}
if (this.allowDragging && (!this.isModal) && (!util_1.isNullOrUndefined(this.headerContent))) {
if (this.allowDragging && (!this.isModal) && (!ej2_base_4.isNullOrUndefined(this.headerContent))) {
this.setAllowDragging();
}
dom_1.attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });
ej2_base_2.attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });
if (this.isModal) {
this.setIsModal();
}
if (!util_1.isNullOrUndefined(this.targetEle)) {
if (!ej2_base_4.isNullOrUndefined(this.targetEle)) {
this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);

@@ -191,4 +191,4 @@ }

}
if (!util_1.isNullOrUndefined(_this.focusElements) && _this.focusElements.length > 0) {
_this.unBindEvent((util_1.isNullOrUndefined(_this.focusIndex) ? _this.element : _this.focusElements[_this.focusIndex]));
if (!ej2_base_4.isNullOrUndefined(_this.focusElements) && _this.focusElements.length > 0) {
_this.unBindEvent((ej2_base_4.isNullOrUndefined(_this.focusIndex) ? _this.element : _this.focusElements[_this.focusIndex]));
}

@@ -200,3 +200,3 @@ else {

_this.closedFrom = {};
if (!util_1.isNullOrUndefined(_this.storeActiveElement)) {
if (!ej2_base_4.isNullOrUndefined(_this.storeActiveElement)) {
_this.storeActiveElement.focus();

@@ -208,3 +208,3 @@ }

this.setEnableRTL();
dom_1.addClass([this.element], DLG_HIDE);
ej2_base_2.addClass([this.element], DLG_HIDE);
if (this.visible) {

@@ -265,3 +265,3 @@ this.show();

var handleContent = '.' + DLG_HEADER_CONTENT;
this.dragObj = new ej2_base_3.Draggable(this.element, {
this.dragObj = new ej2_base_6.Draggable(this.element, {
clone: false,

@@ -279,3 +279,3 @@ handle: handleContent,

});
if (!util_1.isNullOrUndefined(this.targetEle)) {
if (!ej2_base_4.isNullOrUndefined(this.targetEle)) {
this.dragObj.dragArea = this.targetEle;

@@ -288,3 +288,3 @@ }

for (var i = 0; i < this.buttons.length; i++) {
var btn = dom_1.createElement('button');
var btn = ej2_base_2.createElement('button');
this.buttonContent.push(btn.outerHTML);

@@ -296,3 +296,3 @@ }

if (typeof (this.buttons[i].click) === 'function') {
event_handler_1.EventHandler.add(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click, this);
ej2_base_5.EventHandler.add(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click, this);
}

@@ -304,14 +304,18 @@ this.btnObj.appendTo(this.ftrTemplateContent.children[i]);

Dialog.prototype.setContent = function () {
dom_1.attributes(this.element, { 'aria-describedby': this.element.id + '_dialog-content' });
this.contentEle = dom_1.createElement('div', { className: DLG_CONTENT, id: this.element.id + '_dialog-content' });
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' });
typeof (this.content) === 'string' ? this.contentEle.innerHTML = this.content : this.contentEle.appendChild(this.content);
!util_1.isNullOrUndefined(this.headerContent) ? this.element.insertBefore(this.contentEle, this.element.children[1]) :
!ej2_base_4.isNullOrUndefined(this.headerContent) ? this.element.insertBefore(this.contentEle, this.element.children[1]) :
this.element.insertBefore(this.contentEle, this.element.children[0]);
if (this.height === 'auto') {
this.element.style.maxHeight = (!ej2_base_4.isNullOrUndefined(this.target)) ?
(this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';
}
};
Dialog.prototype.setEnableRTL = function () {
this.enableRtl ? dom_1.addClass([this.element], RTL) : dom_1.removeClass([this.element], RTL);
this.enableRtl ? ej2_base_2.addClass([this.element], RTL) : ej2_base_2.removeClass([this.element], RTL);
};
Dialog.prototype.setHeader = function () {
this.headerEle = dom_1.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER, innerHTML: this.header });
dom_1.attributes(this.element, { 'aria-labelledby': this.element.id + '_title' });
this.headerEle = ej2_base_2.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER, innerHTML: this.header });
ej2_base_2.attributes(this.element, { 'aria-labelledby': this.element.id + '_title' });
this.createHeaderContent();

@@ -322,3 +326,3 @@ this.headerContent.appendChild(this.headerEle);

Dialog.prototype.setFooterTemplate = function () {
this.ftrTemplateContent = dom_1.createElement('div', {
this.ftrTemplateContent = ej2_base_2.createElement('div', {
className: DLG_FOOTER_CONTENT,

@@ -330,16 +334,16 @@ innerHTML: (this.footerTemplate !== '' ? this.footerTemplate : this.buttonContent.join(''))

Dialog.prototype.createHeaderContent = function () {
if (util_1.isNullOrUndefined(this.headerContent)) {
this.headerContent = dom_1.createElement('div', { className: DLG_HEADER_CONTENT });
if (ej2_base_4.isNullOrUndefined(this.headerContent)) {
this.headerContent = ej2_base_2.createElement('div', { className: DLG_HEADER_CONTENT });
}
};
Dialog.prototype.renderCloseIcon = function () {
this.closeIcon = dom_1.createElement('button', { className: DLG_CLOSE_ICON_BTN });
this.closeIcon = ej2_base_2.createElement('button', { className: DLG_CLOSE_ICON_BTN });
this.closeIconBtnObj = new ej2_buttons_1.Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });
this.closeIconTitle();
if (!util_1.isNullOrUndefined(this.headerContent)) {
dom_1.prepend([this.closeIcon], this.headerContent);
if (!ej2_base_4.isNullOrUndefined(this.headerContent)) {
ej2_base_2.prepend([this.closeIcon], this.headerContent);
}
else {
this.createHeaderContent();
dom_1.prepend([this.closeIcon], this.headerContent);
ej2_base_2.prepend([this.closeIcon], this.headerContent);
this.element.insertBefore(this.headerContent, this.element.children[0]);

@@ -362,14 +366,14 @@ }

if (this.cssClass) {
dom_1.addClass([this.element], this.cssClass.split(' '));
ej2_base_2.addClass([this.element], this.cssClass.split(' '));
}
if (oldCSSClass) {
dom_1.removeClass([this.element], oldCSSClass.split(' '));
ej2_base_2.removeClass([this.element], oldCSSClass.split(' '));
}
};
Dialog.prototype.setIsModal = function () {
this.dlgContainer = dom_1.createElement('div', { className: DLG_CONTAINER });
this.dlgContainer = ej2_base_2.createElement('div', { className: DLG_CONTAINER });
this.element.parentNode.insertBefore(this.dlgContainer, this.element);
this.dlgContainer.appendChild(this.element);
dom_1.addClass([this.element], MODAL_DLG);
this.dlgOverlay = dom_1.createElement('div', { className: DLG_OVERLAY });
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();

@@ -406,3 +410,3 @@ this.dlgContainer.appendChild(this.dlgOverlay);

var index = this.showCloseIcon && this.focusElements.length > 1 ? 1 : 0;
var contentEle = !util_1.isNullOrUndefined(this.contentEle) &&
var contentEle = !ej2_base_4.isNullOrUndefined(this.contentEle) &&
this.focusElements[index];

@@ -412,3 +416,3 @@ if (contentEle) {

}
else if (!util_1.isNullOrUndefined(this.primaryButtonEle)) {
else if (!ej2_base_4.isNullOrUndefined(this.primaryButtonEle)) {
var ele = this.element.querySelector('.' + DLG_PRIMARY_BUTTON);

@@ -445,12 +449,12 @@ this.focusIndex = this.focusElements.indexOf(ele);

Dialog.prototype.bindEvent = function (element) {
event_handler_1.EventHandler.add(element, 'keydown', this.keyDown, this);
event_handler_1.EventHandler.add(element, 'blur', this.focusOut, this);
ej2_base_5.EventHandler.add(element, 'keydown', this.keyDown, this);
ej2_base_5.EventHandler.add(element, 'blur', this.focusOut, this);
};
Dialog.prototype.unBindEvent = function (element) {
event_handler_1.EventHandler.remove(element, 'keydown', this.keyDown);
event_handler_1.EventHandler.remove(element, 'blur', this.focusOut);
ej2_base_5.EventHandler.remove(element, 'keydown', this.keyDown);
ej2_base_5.EventHandler.remove(element, 'blur', this.focusOut);
};
Dialog.prototype.focusOut = function (e) {
var _this = this;
var element = util_1.isNullOrUndefined(this.focusIndex) ? this.element : this.focusElements[this.focusIndex];
var element = ej2_base_4.isNullOrUndefined(this.focusIndex) ? this.element : this.focusElements[this.focusIndex];
setTimeout(function () {

@@ -464,3 +468,3 @@ var tags = ['input', 'select', 'textarea', 'button', 'a'];

_this.unBindEvent(element);
_this.bindEvent((util_1.isNullOrUndefined(_this.focusIndex) ? _this.element : activeEle));
_this.bindEvent((ej2_base_4.isNullOrUndefined(_this.focusIndex) ? _this.element : activeEle));
}

@@ -477,8 +481,8 @@ });

case 'content':
if (!util_1.isNullOrUndefined(this.content) && this.content !== '') {
if (!util_1.isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {
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.element.style.maxHeight = (!util_1.isNullOrUndefined(this.target)) ?
this.element.style.maxHeight = (!ej2_base_4.isNullOrUndefined(this.target)) ?
(this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';

@@ -491,3 +495,3 @@ }

else {
if (!util_1.isNullOrUndefined(this.contentEle)) {
if (!ej2_base_4.isNullOrUndefined(this.contentEle)) {
this.element.removeChild(this.contentEle);

@@ -499,3 +503,3 @@ }

if (this.header === '') {
dom_1.detach(this.headerEle);
ej2_base_2.detach(this.headerEle);
}

@@ -515,6 +519,6 @@ else {

if (!this.showCloseIcon && this.header === '') {
dom_1.detach(this.headerContent);
ej2_base_2.detach(this.headerContent);
}
else if (!this.showCloseIcon) {
dom_1.detach(this.closeIcon);
ej2_base_2.detach(this.closeIcon);
}

@@ -540,3 +544,3 @@ }

this.wireEvents();
if (!util_1.isNullOrUndefined(this.targetEle)) {
if (!ej2_base_4.isNullOrUndefined(this.targetEle)) {
this.isModal ? this.targetEle.appendChild(this.dlgContainer) : this.targetEle.appendChild(this.element);

@@ -546,5 +550,5 @@ }

else {
dom_1.removeClass([this.element], MODAL_DLG);
dom_1.removeClass([document.body], SCROLL_DISABLED);
dom_1.detach(this.dlgOverlay);
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) {

@@ -557,6 +561,6 @@ this.dlgContainer.parentElement.insertBefore(this.dlgContainer.firstChild, this.dlgContainer);

case 'height':
dom_1.setStyleAttribute(this.element, { 'height': util_1.formatUnit(newProp.height) });
ej2_base_2.setStyleAttribute(this.element, { 'height': ej2_base_4.formatUnit(newProp.height) });
break;
case 'width':
dom_1.setStyleAttribute(this.element, { 'width': util_1.formatUnit(newProp.width) });
ej2_base_2.setStyleAttribute(this.element, { 'width': ej2_base_4.formatUnit(newProp.width) });
break;

@@ -573,4 +577,4 @@ case 'zIndex':

case 'buttons':
if (!util_1.isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {
if (!util_1.isNullOrUndefined(this.ftrTemplateContent)) {
if (!ej2_base_4.isNullOrUndefined(this.buttons[0].buttonModel) && this.footerTemplate === '') {
if (!ej2_base_4.isNullOrUndefined(this.ftrTemplateContent)) {
this.ftrTemplateContent.innerHTML = '';

@@ -582,3 +586,3 @@ }

case 'allowDragging':
if (this.allowDragging && (!this.isModal) && (!util_1.isNullOrUndefined(this.headerContent))) {
if (this.allowDragging && (!this.isModal) && (!ej2_base_4.isNullOrUndefined(this.headerContent))) {
this.setAllowDragging();

@@ -616,11 +620,11 @@ }

];
dom_1.removeClass([this.element, this.element], classArray);
ej2_base_2.removeClass([this.element, this.element], classArray);
if (this.popupObj.element.classList.contains(POPUP_ROOT)) {
this.popupObj.destroy();
}
if (!util_1.isNullOrUndefined(this.btnObj)) {
if (!ej2_base_4.isNullOrUndefined(this.btnObj)) {
this.btnObj.destroy();
}
if (this.isModal) {
dom_1.detach(this.dlgOverlay);
ej2_base_2.detach(this.dlgOverlay);
}

@@ -632,6 +636,6 @@ this.element.innerHTML = '';

if (this.showCloseIcon) {
event_handler_1.EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);
ej2_base_5.EventHandler.add(this.closeIcon, 'click', this.closeIconClickEventHandler, this);
}
if (this.isModal) {
event_handler_1.EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);
ej2_base_5.EventHandler.add(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler, this);
}

@@ -641,11 +645,11 @@ };

if (this.showCloseIcon) {
event_handler_1.EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);
ej2_base_5.EventHandler.remove(this.closeIcon, 'click', this.closeIconClickEventHandler);
}
if (this.isModal) {
event_handler_1.EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);
ej2_base_5.EventHandler.remove(this.dlgOverlay, 'click', this.dlgOverlayClickEventHandler);
}
if (!util_1.isNullOrUndefined(this.buttons[0].buttonModel)) {
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') {
event_handler_1.EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);
ej2_base_5.EventHandler.remove(this.ftrTemplateContent.children[i], 'click', this.buttons[i].click);
}

@@ -659,4 +663,4 @@ }

Dialog.prototype.show = function (isFullScreen) {
if (!this.element.classList.contains(DLG_SHOW) || (!util_1.isNullOrUndefined(isFullScreen))) {
if (!util_1.isNullOrUndefined(isFullScreen)) {
if (!this.element.classList.contains(DLG_SHOW) || (!ej2_base_4.isNullOrUndefined(isFullScreen))) {
if (!ej2_base_4.isNullOrUndefined(isFullScreen)) {
this.fullScreen(isFullScreen);

@@ -667,6 +671,6 @@ }

this.trigger('beforeOpen');
if (this.isModal && (!util_1.isNullOrUndefined(this.dlgOverlay))) {
if (this.isModal && (!ej2_base_4.isNullOrUndefined(this.dlgOverlay))) {
this.dlgOverlay.style.display = 'block';
this.dlgContainer.style.display = 'flex';
if (!util_1.isNullOrUndefined(this.targetEle)) {
if (!ej2_base_4.isNullOrUndefined(this.targetEle)) {
if (this.targetEle === document.body) {

@@ -677,6 +681,6 @@ this.dlgContainer.style.position = 'fixed';

this.element.style.position = 'relative';
dom_1.addClass([this.targetEle], SCROLL_DISABLED);
ej2_base_2.addClass([this.targetEle], SCROLL_DISABLED);
}
else {
dom_1.addClass([document.body], SCROLL_DISABLED);
ej2_base_2.addClass([document.body], SCROLL_DISABLED);
}

@@ -698,4 +702,4 @@ }

this.dlgOverlay.style.display = 'none';
!util_1.isNullOrUndefined(this.targetEle) ? dom_1.removeClass([this.targetEle], SCROLL_DISABLED) :
dom_1.removeClass([document.body], SCROLL_DISABLED);
!ej2_base_4.isNullOrUndefined(this.targetEle) ? ej2_base_2.removeClass([this.targetEle], SCROLL_DISABLED) :
ej2_base_2.removeClass([document.body], SCROLL_DISABLED);
}

@@ -715,7 +719,7 @@ var closeAnimation = {

if (args) {
dom_1.addClass([this.element], FULLSCREEN);
this.element.style.maxHeight = (!util_1.isNullOrUndefined(this.target)) ?
ej2_base_2.addClass([this.element], FULLSCREEN);
this.element.style.maxHeight = (!ej2_base_4.isNullOrUndefined(this.target)) ?
(this.targetEle.offsetHeight) + 'px' : (window.innerHeight) + 'px';
dom_1.addClass([document.body], SCROLL_DISABLED);
if (this.allowDragging && !util_1.isNullOrUndefined(this.dragObj)) {
ej2_base_2.addClass([document.body], SCROLL_DISABLED);
if (this.allowDragging && !ej2_base_4.isNullOrUndefined(this.dragObj)) {
this.dragObj.destroy();

@@ -725,5 +729,5 @@ }

else {
dom_1.removeClass([this.element], FULLSCREEN);
dom_1.removeClass([document.body], SCROLL_DISABLED);
if (this.allowDragging && (!this.isModal) && (!util_1.isNullOrUndefined(this.headerContent))) {
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();

@@ -815,3 +819,3 @@ }

Dialog = __decorate([
ej2_base_2.NotifyPropertyChanges
ej2_base_3.NotifyPropertyChanges
], Dialog);

@@ -818,0 +822,0 @@ exports.Dialog = Dialog;

8

src/index.d.ts
/**
* Popup Components
*/
export * from './popup';
export * from './common';
export * from './dialog';
export * from './tooltip';
export * from './popup/index';
export * from './common/index';
export * from './dialog/index';
export * from './tooltip/index';

10

src/index.js

@@ -1,2 +0,2 @@

define(["require", "exports", "./popup", "./common", "./dialog", "./tooltip"], function (require, exports, popup_1, common_1, dialog_1, tooltip_1) {
define(["require", "exports", "./popup/index", "./common/index", "./dialog/index", "./tooltip/index"], function (require, exports, index_1, index_2, index_3, index_4) {
"use strict";

@@ -7,6 +7,6 @@ function __export(m) {

Object.defineProperty(exports, "__esModule", { value: true });
__export(popup_1);
__export(common_1);
__export(dialog_1);
__export(tooltip_1);
__export(index_1);
__export(index_2);
__export(index_3);
__export(index_4);
});

23

src/popup/popup-builder.d.ts
import{Popup} from "./popup";
import { Animation, AnimationModel, Property, Event, EmitType, Component } from '@syncfusion/ej2-base';
import{ CollisionType, ActionOnScrollType, TargetType} from "./popup";
import{ CollisionType, TargetType} from "./popup";
export interface PopupHelper {

@@ -21,2 +21,13 @@ new(id: string | HTMLElement): BuilderProperties

/**
* Triggers the event when target element hide from view port on scroll.
*/
targetExitViewport(value:Function): BuilderProperties;
/**
* specifies the action that should happen when scroll the target-parent container.
This property should define either `reposition` or `hide`.
when set `reposition` to this property, the popup position will refresh when scroll any parent container.
when set `hide` to this property, the popup will be closed when scroll any parent container.
*/
actionOnScroll(value:ActionOnScrollType): BuilderProperties;
/**
* Specifies the collision handler settings of the component.

@@ -41,2 +52,6 @@ */

height(value:string|number): BuilderProperties;
/**
* specifies the animation that should happen when popup closes.
*/
hideAnimation(value:AnimationModel): BuilderProperties;
isDestroyed(value:boolean): BuilderProperties;

@@ -64,2 +79,6 @@ /**

/**
* specifies the animation that should happen when popup open.
*/
showAnimation(value:AnimationModel): BuilderProperties;
/**
* Specifies the relative element type of the component.

@@ -66,0 +85,0 @@ */

102

src/popup/popup-model.d.ts

@@ -1,3 +0,3 @@

import { setStyleAttribute, addClass, removeClass } from '@syncfusion/ej2-base/dom';import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base/util';import { Browser } from '@syncfusion/ej2-base/browser';import { calculatePosition, OffsetPosition, calculateRelativeBasedPosition } from '../common/position';import { Animation, AnimationModel, Property, Event, EmitType, Component } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged } from '@syncfusion/ej2-base/notify-property-change';import { EventHandler } from '@syncfusion/ej2-base/event-handler';import { flip, fit, isCollide , CollisionCoordinates } from '../common/collision';
import {TargetType,CollisionAxis,PositionData} from "./popup";
import { setStyleAttribute, addClass, removeClass } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';import { Browser } from '@syncfusion/ej2-base';import { calculatePosition, OffsetPosition, calculateRelativeBasedPosition } from '../common/position';import { Animation, AnimationModel, Property, Event, EmitType, Component } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged } from '@syncfusion/ej2-base';import { EventHandler } from '@syncfusion/ej2-base';import { flip, fit, isCollide , CollisionCoordinates } from '../common/collision';
import {TargetType,CollisionAxis,PositionData,ActionOnScrollType} from "./popup";
import {ComponentModel} from '@syncfusion/ej2-base';

@@ -11,43 +11,113 @@

/**
* Specifies the height of the popup element. * @default 'auto' */ height?: string | number;
* Specifies the height of the popup element.
* @default 'auto'
*/
height?: string | number;
/**
* Specifies the height of the popup element. * @default 'auto' */ width?: string | number;
* Specifies the height of the popup element.
* @default 'auto'
*/
width?: string | number;
/**
* Specifies the content of the popup element, it can be string or HTMLElement. * @default null */ content?: string | HTMLElement;
* Specifies the content of the popup element, it can be string or HTMLElement.
* @default null
*/
content?: string | HTMLElement;
/**
* Specifies the relative element type of the component. * @default 'container' */ targetType?: TargetType;
* Specifies the relative element type of the component.
* @default 'container'
*/
targetType?: TargetType;
/**
* Specifies the collision detectable container element of the component. * @default null */ viewPortElement?: HTMLElement;
* Specifies the collision detectable container element of the component.
* @default null
*/
viewPortElement?: HTMLElement;
/**
* Specifies the collision handler settings of the component. * @default { X: 'none',Y: 'none' } */ collision?: CollisionAxis;
* Specifies the collision handler settings of the component.
* @default { X: 'none',Y: 'none' }
*/
collision?: CollisionAxis;
/**
* Specifies the relative container element of the popup element.Based on the relative element, popup element will be positioned. * * @default 'body' */ relateTo?: HTMLElement | string;
* Specifies the relative container element of the popup element.Based on the relative element, popup element will be positioned.
*
* @default 'body'
*/
relateTo?: HTMLElement | string;
/**
* Specifies the popup element position, respective to the relative element. * @default {X:"left", Y:"top"} */ position?: PositionData;
* Specifies the popup element position, respective to the relative element.
* @default {X:"left", Y:"top"}
*/
position?: PositionData;
/**
* specifies the popup element offset-x value, respective to the relative element. * @default 0 */ offsetX?: number;
* specifies the popup element offset-x value, respective to the relative element.
* @default 0
*/
offsetX?: number;
/**
* specifies the popup element offset-y value, respective to the relative element. * @default 0 */ offsetY?: number;
* specifies the popup element offset-y value, respective to the relative element.
* @default 0
*/
offsetY?: number;
/**
* specifies the z-index value of the popup element. * @default 1000 */ zIndex?: number;
* specifies the z-index value of the popup element.
* @default 1000
*/
zIndex?: number;
/**
* specifies the rtl direction state of the popup element. * @default false */ enableRtl?: boolean;
* specifies the rtl direction state of the popup element.
* @default false
*/
enableRtl?: boolean;
/**
* Triggers the event once opened the popup. * @event */ open?: EmitType<Object>;
* specifies the action that should happen when scroll the target-parent container.
* This property should define either `reposition` or `hide`.
* when set `reposition` to this property, the popup position will refresh when scroll any parent container.
* when set `hide` to this property, the popup will be closed when scroll any parent container.
* @default 'reposition'
*/
actionOnScroll?: ActionOnScrollType;
/**
* Trigger the event once closed the popup. * @event */ close?: EmitType<Object>;
* specifies the animation that should happen when popup open.
* @default 'null'
*/
showAnimation?: AnimationModel;
/**
* specifies the animation that should happen when popup closes.
* @default 'null'
*/
hideAnimation?: AnimationModel;
/**
* Triggers the event once opened the popup.
* @event
*/
open?: EmitType<Object>;
/**
* Trigger the event once closed the popup.
* @event
*/
close?: EmitType<Object>;
/**
* Triggers the event when target element hide from view port on scroll.
* @event
*/
targetExitViewport?: EmitType<Object>;
}

41

src/popup/popup.d.ts
import { AnimationModel, EmitType, Component } from '@syncfusion/ej2-base';
import { INotifyPropertyChanged } from '@syncfusion/ej2-base/notify-property-change';
import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
import { PopupModel } from './popup-model';

@@ -36,2 +36,6 @@ /**

/**
* action on scroll type.
*/
export declare type ActionOnScrollType = 'reposition' | 'hide';
/**
* Target element type.

@@ -116,2 +120,20 @@ */

/**
* specifies the action that should happen when scroll the target-parent container.
* This property should define either `reposition` or `hide`.
* when set `reposition` to this property, the popup position will refresh when scroll any parent container.
* when set `hide` to this property, the popup will be closed when scroll any parent container.
* @default 'reposition'
*/
actionOnScroll: ActionOnScrollType;
/**
* specifies the animation that should happen when popup open.
* @default 'null'
*/
showAnimation: AnimationModel;
/**
* specifies the animation that should happen when popup closes.
* @default 'null'
*/
hideAnimation: AnimationModel;
/**
* Triggers the event once opened the popup.

@@ -129,2 +151,8 @@ * @event

*/
/**
* Triggers the event when target element hide from view port on scroll.
* @event
*/
targetExitViewport: EmitType<Object>;
private targetInvisibleStatus;
constructor(element?: HTMLElement, options?: PopupModel);

@@ -154,3 +182,13 @@ /**

render(): void;
private wireEvents();
private unwireEvents();
private getRelateToElement();
private scrollRefresh(e);
/**
* 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.
*/
private isElementOnViewport(relateToElement);
/**
* Initialize the event handler

@@ -167,2 +205,3 @@ * @private

refreshPosition(): void;
private reposition();
private getAnchorPosition(anchorEle, ele, position, offsetX, offsetY);

@@ -169,0 +208,0 @@ private callFlip(param);

194

src/popup/popup.js

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

};
define(["require", "exports", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/browser", "../common/position", "@syncfusion/ej2-base", "@syncfusion/ej2-base/notify-property-change", "@syncfusion/ej2-base/event-handler", "../common/collision"], function (require, exports, dom_1, util_1, browser_1, position_1, ej2_base_1, notify_property_change_1, event_handler_1, collision_1) {
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";

@@ -37,9 +37,9 @@ Object.defineProperty(exports, "__esModule", { value: true });

case 'width':
dom_1.setStyleAttribute(this.element, { 'width': util_1.formatUnit(newProp.width) });
ej2_base_1.setStyleAttribute(this.element, { 'width': ej2_base_2.formatUnit(newProp.width) });
break;
case 'height':
dom_1.setStyleAttribute(this.element, { 'height': util_1.formatUnit(newProp.height) });
ej2_base_1.setStyleAttribute(this.element, { 'height': ej2_base_2.formatUnit(newProp.height) });
break;
case 'zIndex':
dom_1.setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });
ej2_base_1.setStyleAttribute(this.element, { 'zIndex': newProp.zIndex });
break;

@@ -52,3 +52,2 @@ case 'enableRtl':

this.refreshPosition();
this.checkCollision();
break;

@@ -77,5 +76,3 @@ case 'offsetX':

this.element.classList.remove(CLASSNAMES.ROOT, CLASSNAMES.RTL);
if (browser_1.Browser.isDevice) {
event_handler_1.EventHandler.remove(window, 'orientationchange', this.orientationOnChange);
}
this.unwireEvents();
_super.prototype.destroy.call(this);

@@ -90,22 +87,98 @@ };

if (this.width !== 'auto') {
styles.width = util_1.formatUnit(this.width);
styles.width = ej2_base_2.formatUnit(this.width);
}
if (this.height !== 'auto') {
styles.height = util_1.formatUnit(this.height);
styles.height = ej2_base_2.formatUnit(this.height);
}
dom_1.setStyleAttribute(this.element, styles);
ej2_base_1.setStyleAttribute(this.element, styles);
this.setEnableRtl();
this.setContent();
if (browser_1.Browser.isDevice) {
event_handler_1.EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);
this.wireEvents();
};
Popup.prototype.wireEvents = function () {
if (ej2_base_3.Browser.isDevice) {
ej2_base_6.EventHandler.add(window, 'orientationchange', this.orientationOnChange, this);
}
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);
}
}
};
Popup.prototype.unwireEvents = function () {
if (ej2_base_3.Browser.isDevice) {
ej2_base_6.EventHandler.remove(window, 'orientationchange', this.orientationOnChange);
}
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);
}
}
};
Popup.prototype.getRelateToElement = function () {
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 if (this.actionOnScroll === 'hide') {
this.hide();
}
if (this.getRelateToElement()) {
var targetVisible = this.isElementOnViewport(this.getRelateToElement());
if (!targetVisible && !this.targetInvisibleStatus) {
this.trigger('targetExitViewport');
this.targetInvisibleStatus = true;
}
else if (targetVisible) {
this.targetInvisibleStatus = false;
}
}
};
Popup.prototype.isElementOnViewport = function (relateToElement) {
var rect = relateToElement.getBoundingClientRect();
if (!rect.height || !rect.width) {
return false;
}
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;
};
Popup.prototype.preRender = function () {
};
Popup.prototype.setEnableRtl = function () {
this.refreshPosition();
this.reposition();
this.enableRtl ? this.element.classList.add(CLASSNAMES.RTL) : this.element.classList.remove(CLASSNAMES.RTL);
};
Popup.prototype.setContent = function () {
if (!util_1.isNullOrUndefined(this.content)) {
if (!ej2_base_2.isNullOrUndefined(this.content)) {
this.element.innerHTML = '';

@@ -124,9 +197,11 @@ if (typeof (this.content) === 'string') {

_this.refreshPosition();
_this.checkCollision();
}, 200);
};
Popup.prototype.refreshPosition = function () {
this.reposition();
this.checkCollision();
};
Popup.prototype.reposition = function () {
var pos;
var relateToElement = ((typeof this.relateTo) === 'string') ?
document.querySelector(this.relateTo) : this.relateTo;
var relateToElement = this.getRelateToElement();
if (typeof this.position.X === 'number' && typeof this.position.Y === 'number') {

@@ -205,4 +280,3 @@ pos = { left: this.position.X, top: this.position.Y };

Popup.prototype.callFlip = function (param) {
var relateToElement = ((typeof this.relateTo) === 'string') ?
document.querySelector(this.relateTo) : this.relateTo;
var relateToElement = this.getRelateToElement();
collision_1.flip(this.element, relateToElement, this.offsetX, this.offsetY, this.position.X, this.position.Y, this.viewPortElement, param);

@@ -246,14 +320,16 @@ };

var _this = this;
animationOptions = (!ej2_base_2.isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?
animationOptions : this.showAnimation;
if (this.collision.X !== 'none' || this.collision.Y !== 'none') {
dom_1.removeClass([this.element], CLASSNAMES.CLOSE);
dom_1.addClass([this.element], CLASSNAMES.OPEN);
ej2_base_1.removeClass([this.element], CLASSNAMES.CLOSE);
ej2_base_1.addClass([this.element], CLASSNAMES.OPEN);
this.checkCollision();
dom_1.removeClass([this.element], CLASSNAMES.OPEN);
dom_1.addClass([this.element], CLASSNAMES.CLOSE);
ej2_base_1.removeClass([this.element], CLASSNAMES.OPEN);
ej2_base_1.addClass([this.element], CLASSNAMES.CLOSE);
}
if (!util_1.isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') {
if (!ej2_base_2.isNullOrUndefined(animationOptions)) {
animationOptions.begin = function () {
if (!_this.isDestroyed) {
dom_1.removeClass([_this.element], CLASSNAMES.CLOSE);
dom_1.addClass([_this.element], CLASSNAMES.OPEN);
ej2_base_1.removeClass([_this.element], CLASSNAMES.CLOSE);
ej2_base_1.addClass([_this.element], CLASSNAMES.OPEN);
}

@@ -266,7 +342,7 @@ };

};
new ej2_base_1.Animation(animationOptions).animate(this.element);
new ej2_base_4.Animation(animationOptions).animate(this.element);
}
else {
dom_1.removeClass([this.element], CLASSNAMES.CLOSE);
dom_1.addClass([this.element], CLASSNAMES.OPEN);
ej2_base_1.removeClass([this.element], CLASSNAMES.CLOSE);
ej2_base_1.addClass([this.element], CLASSNAMES.OPEN);
this.trigger('open');

@@ -277,15 +353,17 @@ }

var _this = this;
if (animationOptions && typeof animationOptions === 'object') {
animationOptions = (!ej2_base_2.isNullOrUndefined(animationOptions) && typeof animationOptions === 'object') ?
animationOptions : this.hideAnimation;
if (!ej2_base_2.isNullOrUndefined(animationOptions)) {
animationOptions.end = function () {
if (!_this.isDestroyed) {
dom_1.removeClass([_this.element], CLASSNAMES.OPEN);
dom_1.addClass([_this.element], CLASSNAMES.CLOSE);
ej2_base_1.removeClass([_this.element], CLASSNAMES.OPEN);
ej2_base_1.addClass([_this.element], CLASSNAMES.CLOSE);
_this.trigger('close');
}
};
new ej2_base_1.Animation(animationOptions).animate(this.element);
new ej2_base_4.Animation(animationOptions).animate(this.element);
}
else {
dom_1.removeClass([this.element], CLASSNAMES.OPEN);
dom_1.addClass([this.element], CLASSNAMES.CLOSE);
ej2_base_1.removeClass([this.element], CLASSNAMES.OPEN);
ej2_base_1.addClass([this.element], CLASSNAMES.CLOSE);
this.trigger('close');

@@ -306,49 +384,61 @@ }

return Popup;
}(ej2_base_1.Component));
}(ej2_base_4.Component));
__decorate([
ej2_base_1.Property('auto')
ej2_base_4.Property('auto')
], Popup.prototype, "height", void 0);
__decorate([
ej2_base_1.Property('auto')
ej2_base_4.Property('auto')
], Popup.prototype, "width", void 0);
__decorate([
ej2_base_1.Property(null)
ej2_base_4.Property(null)
], Popup.prototype, "content", void 0);
__decorate([
ej2_base_1.Property('container')
ej2_base_4.Property('container')
], Popup.prototype, "targetType", void 0);
__decorate([
ej2_base_1.Property(null)
ej2_base_4.Property(null)
], Popup.prototype, "viewPortElement", void 0);
__decorate([
ej2_base_1.Property({ X: 'none', Y: 'none' })
ej2_base_4.Property({ X: 'none', Y: 'none' })
], Popup.prototype, "collision", void 0);
__decorate([
ej2_base_1.Property(document.body)
ej2_base_4.Property(document.body)
], Popup.prototype, "relateTo", void 0);
__decorate([
ej2_base_1.Property({ X: 'left', Y: 'top' })
ej2_base_4.Property({ X: 'left', Y: 'top' })
], Popup.prototype, "position", void 0);
__decorate([
ej2_base_1.Property(0)
ej2_base_4.Property(0)
], Popup.prototype, "offsetX", void 0);
__decorate([
ej2_base_1.Property(0)
ej2_base_4.Property(0)
], Popup.prototype, "offsetY", void 0);
__decorate([
ej2_base_1.Property(1000)
ej2_base_4.Property(1000)
], Popup.prototype, "zIndex", void 0);
__decorate([
ej2_base_1.Property(false)
ej2_base_4.Property(false)
], Popup.prototype, "enableRtl", void 0);
__decorate([
ej2_base_1.Event()
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_1.Event()
ej2_base_4.Event()
], Popup.prototype, "close", void 0);
__decorate([
ej2_base_4.Event()
], Popup.prototype, "targetExitViewport", void 0);
Popup = __decorate([
notify_property_change_1.NotifyPropertyChanges
ej2_base_5.NotifyPropertyChanges
], Popup);
exports.Popup = Popup;
});

143

src/tooltip/tooltip-model.d.ts

@@ -1,2 +0,2 @@

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 { 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';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';import { TooltipHelper } from './tooltip-builder';
import {TooltipAnimationSettings,Position,TipPointerPosition,TooltipEventArgs} from "./tooltip";

@@ -11,6 +11,10 @@ import {ComponentModel} from '@syncfusion/ej2-base';

/**
* Animation settings to be applied on the 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 the Tooltip, when it is closed. */ close?: TooltipAnimationSettings;
* Animation settings to be applied on the Tooltip, when it is closed.
*/
close?: TooltipAnimationSettings;

@@ -25,73 +29,158 @@ }

/**
* 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 `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 a 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 is considered 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 you to set the position for the Tooltip element, and provides 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 you to either 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 auto adjusts within the space of target's length * and does not point outside. * @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 `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;
* 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 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 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;
* 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;
/**
* Allows the CSS class name to be applied to 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, and the Tooltip and its content are displayed * in the right to left direction. * @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 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 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 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 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 returned false, then the Tooltip is no more 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>;
}

2

src/tooltip/tooltip.d.ts
import { Component, ChildProperty, BaseEventArgs } from '@syncfusion/ej2-base';
import { EmitType } from '@syncfusion/ej2-base';
import { INotifyPropertyChanged } from '@syncfusion/ej2-base/notify-property-change';
import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
import { TooltipModel, AnimationModel } from './tooltip-model';

@@ -5,0 +5,0 @@ import { TooltipHelper } from './tooltip-builder';

94

src/tooltip/tooltip.js

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

};
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/notify-property-change", "../popup/popup", "../common/position", "../common/collision"], function (require, exports, ej2_base_1, ej2_base_2, util_1, dom_1, notify_property_change_1, popup_1, position_1, collision_1) {
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";

@@ -65,3 +65,3 @@ Object.defineProperty(exports, "__esModule", { value: true });

this.formatPosition();
dom_1.addClass([this.element], ROOT);
ej2_base_4.addClass([this.element], ROOT);
};

@@ -79,5 +79,5 @@ Tooltip.prototype.formatPosition = function () {

this.setTipClass(this.position);
var tip = dom_1.createElement('div', { className: ARROW_TIP + ' ' + this.tipClass });
tip.appendChild(dom_1.createElement('div', { className: ARROW_TIP_OUTER + ' ' + this.tipClass }));
tip.appendChild(dom_1.createElement('div', { className: ARROW_TIP_INNER + ' ' + this.tipClass }));
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);

@@ -201,5 +201,5 @@ };

var removeList = [TIP_BOTTOM, TIP_TOP, TIP_LEFT, TIP_RIGHT];
dom_1.removeClass(selEle, removeList);
ej2_base_4.removeClass(selEle, removeList);
this.setTipClass(position);
dom_1.addClass(selEle, this.tipClass);
ej2_base_4.addClass(selEle, this.tipClass);
};

@@ -249,7 +249,7 @@ Tooltip.prototype.adjustArrow = function (target, position, tooltipPositionX, tooltipPositionY) {

var tooltipContent = this.tooltipEle.querySelector('.' + CONTENT);
if (target && !util_1.isNullOrUndefined(target.getAttribute('title'))) {
if (target && !ej2_base_3.isNullOrUndefined(target.getAttribute('title'))) {
target.setAttribute('data-content', target.getAttribute('title'));
target.removeAttribute('title');
}
if (!util_1.isNullOrUndefined(this.content)) {
if (!ej2_base_3.isNullOrUndefined(this.content)) {
if (typeof (this.content) === 'string') {

@@ -266,3 +266,3 @@ tooltipContent.innerHTML = this.content;

else {
if (target && !util_1.isNullOrUndefined(target.getAttribute('data-content'))) {
if (target && !ej2_base_3.isNullOrUndefined(target.getAttribute('data-content'))) {
tooltipContent.innerHTML = target.getAttribute('data-content');

@@ -276,3 +276,3 @@ }

}
var tipClose = dom_1.createElement('div', { className: ICON + ' ' + CLOSE });
var tipClose = ej2_base_4.createElement('div', { className: ICON + ' ' + CLOSE });
this.tooltipEle.appendChild(tipClose);

@@ -286,3 +286,3 @@ ej2_base_2.EventHandler.add(tipClose, ej2_base_2.Browser.touchStartEvent, this.onStickyClose, this);

}
dom_1.attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });
ej2_base_4.attributes(target, { 'aria-describedby': describedby.join(' ').trim(), 'data-tooltip-id': id });
};

@@ -322,3 +322,3 @@ Tooltip.prototype.removeDescribedBy = function (target) {

if (this.target) {
target = dom_1.closest(e.target, this.target);
target = ej2_base_4.closest(e.target, this.target);
}

@@ -328,3 +328,3 @@ else {

}
if (util_1.isNullOrUndefined(target)) {
if (ej2_base_3.isNullOrUndefined(target)) {
return;

@@ -342,3 +342,3 @@ }

if (this.target) {
target = dom_1.closest(e.target, this.target);
target = ej2_base_4.closest(e.target, this.target);
}

@@ -348,3 +348,3 @@ else {

}
if (util_1.isNullOrUndefined(target) || target.getAttribute('data-tooltip-id') !== null) {
if (ej2_base_3.isNullOrUndefined(target) || target.getAttribute('data-tooltip-id') !== null) {
return;

@@ -373,23 +373,23 @@ }

this.isHidden = false;
if (util_1.isNullOrUndefined(this.tooltipEle)) {
this.ctrlId = this.element.getAttribute('id') ? util_1.getUniqueID(this.element.getAttribute('id')) : util_1.getUniqueID('tooltip');
this.tooltipEle = dom_1.createElement('div', {
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:' + util_1.formatUnit(this.width) + ';height:' + util_1.formatUnit(this.height) + ';position:absolute;'
}, styles: 'width:' + ej2_base_3.formatUnit(this.width) + ';height:' + ej2_base_3.formatUnit(this.height) + ';position:absolute;'
});
if (this.cssClass) {
dom_1.addClass([this.tooltipEle], this.cssClass);
ej2_base_4.addClass([this.tooltipEle], this.cssClass);
}
if (ej2_base_2.Browser.isDevice) {
dom_1.addClass([this.tooltipEle], DEVICE);
ej2_base_4.addClass([this.tooltipEle], DEVICE);
}
if (this.width !== 'auto') {
this.tooltipEle.style.maxWidth = util_1.formatUnit(this.width);
this.tooltipEle.style.maxWidth = ej2_base_3.formatUnit(this.width);
}
this.tooltipEle.appendChild(dom_1.createElement('div', { className: CONTENT }));
this.tooltipEle.appendChild(ej2_base_4.createElement('div', { className: CONTENT }));
document.body.appendChild(this.tooltipEle);
this.addDescribedBy(target, this.ctrlId + '_content');
this.renderContent(target);
dom_1.addClass([this.tooltipEle], POPUP_OPEN);
ej2_base_4.addClass([this.tooltipEle], POPUP_OPEN);
if (this.showTipPointer) {

@@ -408,4 +408,4 @@ this.renderArrow();

}
dom_1.removeClass([this.tooltipEle], POPUP_OPEN);
dom_1.addClass([this.tooltipEle], POPUP_CLOSE);
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 } :

@@ -511,3 +511,3 @@ { type: null, cancel: false, target: target, event: null, element: this.tooltipEle };

}
if (util_1.isNullOrUndefined(target)) {
if (ej2_base_3.isNullOrUndefined(target)) {
return;

@@ -543,3 +543,3 @@ }

this.unwireMouseEvents(target);
if (!util_1.isNullOrUndefined(target.getAttribute('data-content'))) {
if (!ej2_base_3.isNullOrUndefined(target.getAttribute('data-content'))) {
target.setAttribute('title', target.getAttribute('data-content'));

@@ -552,4 +552,4 @@ target.removeAttribute('data-content');

if (this.tooltipEle) {
dom_1.removeClass([this.tooltipEle], POPUP_CLOSE);
dom_1.addClass([this.tooltipEle], POPUP_OPEN);
ej2_base_4.removeClass([this.tooltipEle], POPUP_CLOSE);
ej2_base_4.addClass([this.tooltipEle], POPUP_OPEN);
}

@@ -561,3 +561,3 @@ if (this.isHidden) {

if (this.tooltipEle) {
dom_1.remove(this.tooltipEle);
ej2_base_4.remove(this.tooltipEle);
}

@@ -587,4 +587,4 @@ this.tooltipEle = null;

ej2_base_2.Animation.stop(this.tooltipEle);
dom_1.removeClass([this.tooltipEle], POPUP_CLOSE);
dom_1.addClass([this.tooltipEle], POPUP_OPEN);
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);

@@ -613,3 +613,3 @@ var pos = this.calculateTooltipOffset(this.position);

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

@@ -670,3 +670,3 @@ }

Tooltip.prototype.wireFocusEvents = function () {
if (!util_1.isNullOrUndefined(this.target)) {
if (!ej2_base_3.isNullOrUndefined(this.target)) {
var targetList = [].slice.call(this.element.querySelectorAll(this.target));

@@ -725,3 +725,3 @@ for (var _i = 0, targetList_2 = targetList; _i < targetList_2.length; _i++) {

Tooltip.prototype.unwireFocusEvents = function () {
if (!util_1.isNullOrUndefined(this.target)) {
if (!ej2_base_3.isNullOrUndefined(this.target)) {
var targetList = [].slice.call(this.element.querySelectorAll(this.target));

@@ -766,3 +766,3 @@ for (var _i = 0, targetList_3 = targetList; _i < targetList_3.length; _i++) {

if (this.tooltipEle) {
this.tooltipEle.style.width = util_1.formatUnit(newProp.width);
this.tooltipEle.style.width = ej2_base_3.formatUnit(newProp.width);
}

@@ -772,3 +772,3 @@ break;

if (this.tooltipEle) {
this.tooltipEle.style.height = util_1.formatUnit(newProp.height);
this.tooltipEle.style.height = ej2_base_3.formatUnit(newProp.height);
}

@@ -807,6 +807,6 @@ break;

if (oldProp.cssClass) {
dom_1.removeClass([this.tooltipEle], oldProp.cssClass);
ej2_base_4.removeClass([this.tooltipEle], oldProp.cssClass);
}
if (newProp.cssClass) {
dom_1.addClass([this.tooltipEle], newProp.cssClass);
ej2_base_4.addClass([this.tooltipEle], newProp.cssClass);
}

@@ -818,6 +818,6 @@ }

if (this.enableRtl) {
dom_1.addClass([this.tooltipEle], RTL);
ej2_base_4.addClass([this.tooltipEle], RTL);
}
else {
dom_1.removeClass([this.tooltipEle], RTL);
ej2_base_4.removeClass([this.tooltipEle], RTL);
}

@@ -850,3 +850,3 @@ }

_super.prototype.destroy.call(this);
dom_1.removeClass([this.element], ROOT);
ej2_base_4.removeClass([this.element], ROOT);
this.unwireEvents(this.opensOn);

@@ -857,3 +857,3 @@ if (this.popupObj) {

if (this.tooltipEle) {
dom_1.remove(this.tooltipEle);
ej2_base_4.remove(this.tooltipEle);
}

@@ -902,3 +902,3 @@ this.tooltipEle = null;

__decorate([
notify_property_change_1.Complex({}, Animation)
ej2_base_5.Complex({}, Animation)
], Tooltip.prototype, "animation", void 0);

@@ -939,3 +939,3 @@ __decorate([

Tooltip = __decorate([
notify_property_change_1.NotifyPropertyChanges
ej2_base_5.NotifyPropertyChanges
], Tooltip);

@@ -942,0 +942,0 @@ exports.Tooltip = Tooltip;

2

tooltip.d.ts
/**
* tooltip
*/
export * from './src/tooltip';
export * from './src/tooltip/index';

4

tooltip.js

@@ -1,2 +0,2 @@

define(["require", "exports", "./src/tooltip"], function (require, exports, tooltip_1) {
define(["require", "exports", "./src/tooltip/index"], function (require, exports, index_1) {
"use strict";

@@ -7,3 +7,3 @@ function __export(m) {

Object.defineProperty(exports, "__esModule", { value: true });
__export(tooltip_1);
__export(index_1);
});
dist/ej2-popups.umd.min.js

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

dist/global/ej2-popups.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

dist\global\dialog.js

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

dist\global\popup.js

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

dist\global\tooltip.js

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

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-definition.scss

Sorry, the diff of this file is not supported yet

styles/dialog/_theme.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/material.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc