@syncfusion/ej2-popups - npm Package Compare versions

Comparing version 16.2.52 to 16.3.17

CHANGELOG.md

@@ -5,18 +5,2 @@ # Changelog
 
-### Popup library
-
-#### Bug Fixes
-
-- Popup can be created, even if the element is not available in DOM.
-
-## 16.2.49 (2018-08-21)
-
-### Spinner
-
-#### Bug Fixes
-
-- Provided angular view encapsulation support for spinner utility.
-
-## 16.2.46 (2018-07-30)
-
 ### Dialog
@@ -28,2 +12,4 @@
 
+- Provided built-in utility functions to render the alert and confirm dialogs with minimal code.
+
 #### Bug Fixes
@@ -30,0 +16,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.2.52
+*  version : 16.3.17
 *  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
@@ -11,9 +11,5 @@ *  Use of this code is subject to the terms of our license.
 import * as _popups from '@syncfusion/ej2-popups';
-import * as _base from '@syncfusion/ej2-base';
-import * as _buttons from '@syncfusion/ej2-buttons';
 
 export declare namespace ej {
     const popups: typeof _popups;
-    const base: typeof _base;
-    const buttons: typeof _buttons;
 }

package.json

 {
   "name": "@syncfusion/ej2-popups",
-  "version": "16.2.52",
-  "description": "Essential JS 2 popup Component",
+  "version": "16.3.17",
+  "description": "A package of Essential JS 2 popup components such as Dialog and Tooltip that is used to display information or messages in separate pop-ups.",
   "author": "Syncfusion Inc.",
@@ -11,4 +11,4 @@ "license": "SEE LICENSE IN license",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.2.50",
-    "@syncfusion/ej2-buttons": "~16.2.50"
+    "@syncfusion/ej2-base": "~16.3.17",
+    "@syncfusion/ej2-buttons": "~16.3.17"
   },
@@ -15,0 +15,0 @@ "devDependencies": {

src/dialog/dialog-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, Property, Event, Collection, L10n, Browser, EmitType, Complex, compile } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, append } from '@syncfusion/ej2-base';import { EventHandler } from '@syncfusion/ej2-base';import { Draggable } from '@syncfusion/ej2-base';import { Popup, PositionData, getZindexPartial } from '../popup/popup';import { PositionDataModel } from '../popup/popup-model';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';
+import { Component, Property, Event, Collection, L10n, Browser, EmitType, Complex, compile, createElement  } from '@syncfusion/ej2-base';import { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, append } from '@syncfusion/ej2-base';import { EventHandler } from '@syncfusion/ej2-base';import { Draggable } from '@syncfusion/ej2-base';import { Popup, PositionData, getZindexPartial } from '../popup/popup';import { PositionDataModel } from '../popup/popup-model';import { Button, ButtonModel } from '@syncfusion/ej2-buttons';
 import {DialogEffect,BeforeOpenEventArgs,BeforeCloseEventArgs} from "./dialog";
@@ -155,3 +155,3 @@ import {ComponentModel} from '@syncfusion/ej2-base';
      * 
-     * More information on the draggable behavior can be found on this [documentation](./getting-started.html#draggable) section.
+     * > More information on the draggable behavior can be found on this [documentation](./getting-started.html#draggable) section.
      * 
@@ -166,3 +166,3 @@ * @default false
      * 
-     * More information on the button configuration can be found on this [documentation](./getting-started.html#enable-footer) section.
+     * > More information on the button configuration can be found on this [documentation](./getting-started.html#enable-footer) section.
      * 
@@ -187,3 +187,3 @@ * {% codeBlock src="dialog/buttons-api/index.ts" %}{% endcodeBlock %}
      * 
-     * More information on the animation settings in dialog can be found on this [documentation](./animation.html) section.
+     * > More information on the animation settings in dialog can be found on this [documentation](./animation.html)  section.
      * 
@@ -190,0 +190,0 @@ * {% codeBlock src="dialog/animation-api/index.ts" %}{% endcodeBlock %}

src/dialog/dialog.d.ts

@@ -5,3 +5,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
 import { PositionDataModel } from '../popup/popup-model';
-import { ButtonModel } from '@syncfusion/ej2-buttons';
+import { Button, ButtonModel } from '@syncfusion/ej2-buttons';
 export declare class ButtonProps extends ChildProperty<ButtonProps> {
@@ -218,3 +218,3 @@ /**
      *
-     * More information on the draggable behavior can be found on this [documentation](./getting-started.html#draggable) section.
+     * > More information on the draggable behavior can be found on this [documentation](./getting-started.html#draggable) section.
      *
@@ -228,3 +228,3 @@ * @default false
      *
-     * More information on the button configuration can be found on this [documentation](./getting-started.html#enable-footer) section.
+     * > More information on the button configuration can be found on this [documentation](./getting-started.html#enable-footer) section.
      *
@@ -247,3 +247,3 @@ * {% codeBlock src="dialog/buttons-api/index.ts" %}{% endcodeBlock %}
      *
-     * More information on the animation settings in dialog can be found on this [documentation](./animation.html) section.
+     * > More information on the animation settings in dialog can be found on this [documentation](./animation.html)  section.
      *
@@ -419,2 +419,57 @@ * {% codeBlock src="dialog/animation-api/index.ts" %}{% endcodeBlock %}
     private fullScreen(args);
+    /**
+     * Returns the dialog button instances.
+     * Based on that, you can dynamically change the button states.
+     * @param { number } index - Index of the button.
+     * @return {Button}
+     */
+    getButtons(index?: number): Button[] | Button;
 }
+/**
+ * Base for creating Alert and Confirmation Dialog through util method.
+ */
+export declare namespace DialogUtility {
+    /**
+     * An alert dialog box is used to display warning like messages to the users.
+     * ```
+     * Eg : DialogUtility.alert('Alert message');
+     *
+     * ```
+     */
+    function alert(args?: AlertDialogArgs | string): DialogModel;
+    /**
+     * A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.
+     * ```
+     * Eg : DialogUtility.confirm('Confirm dialog message');
+     *
+     * ```
+     */
+    function confirm(args?: ConfirmDialogArgs | string): DialogModel;
+}
+export interface ButtonArgs {
+    icon?: string;
+    cssClass?: string;
+    click?: EmitType<Object>;
+    text?: string;
+}
+export interface AlertDialogArgs {
+    title?: string;
+    content?: string | HTMLElement;
+    isModal?: boolean;
+    isDraggable?: boolean;
+    showCloseIcon?: boolean;
+    closeOnEscape?: boolean;
+    position?: PositionDataModel;
+    okButton?: ButtonArgs;
+}
+export interface ConfirmDialogArgs {
+    title?: string;
+    content?: string | HTMLElement;
+    isModal?: boolean;
+    isDraggable?: boolean;
+    showCloseIcon?: boolean;
+    closeOnEscape?: boolean;
+    position?: PositionDataModel;
+    okButton?: ButtonArgs;
+    cancelButton?: ButtonArgs;
+}

src/dialog/dialog.js

@@ -17,3 +17,3 @@ var __extends = (this && this.__extends) || (function () {
 };
-import { Component, Property, Event, Collection, L10n, Browser, Complex, compile } from '@syncfusion/ej2-base';
+import { Component, Property, Event, Collection, L10n, Browser, Complex, compile, createElement } from '@syncfusion/ej2-base';
 import { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';
@@ -79,2 +79,6 @@ import { NotifyPropertyChanges, ChildProperty } from '@syncfusion/ej2-base';
 var DLG_SHOW = 'e-popup-open';
+var DLG_UTIL_DEFAULT_TITLE = 'Information';
+var DLG_UTIL_ROOT = 'e-scroll-disabled';
+var DLG_UTIL_ALERT = 'e-alert-dialog';
+var DLG_UTIL_CONFIRM = 'e-confirm-dialog';
 /**
@@ -110,2 +114,5 @@ * Represents the dialog component that displays the information and get input from the user.
         this.wireEvents();
+        if (this.width === '100%') {
+            this.element.style.width = '';
+        }
     };
@@ -656,2 +663,3 @@ /**
                     }
+                    this.calculatezIndex = false;
                     break;
@@ -900,3 +908,2 @@ case 'cssClass':
         if (this.isModal) {
-            this.dlgOverlay.style.display = 'none';
             !isNullOrUndefined(this.targetEle) ? removeClass([this.targetEle], SCROLL_DISABLED) :
@@ -945,2 +952,14 @@ removeClass([document.body], SCROLL_DISABLED);
     };
+    /**
+     * Returns the dialog button instances.
+     * Based on that, you can dynamically change the button states.
+     * @param { number } index - Index of the button.
+     * @return {Button}
+     */
+    Dialog.prototype.getButtons = function (index) {
+        if (!isNullOrUndefined(index)) {
+            return this.btnObj[index];
+        }
+        return this.btnObj;
+    };
     __decorate([
@@ -1027,1 +1046,174 @@ Property('')
 export { Dialog };
+/**
+ * Base for creating Alert and Confirmation Dialog through util method.
+ */
+export var DialogUtility;
+(function (DialogUtility) {
+    /**
+     * An alert dialog box is used to display warning like messages to the users.
+     * ```
+     * Eg : DialogUtility.alert('Alert message');
+     *
+     * ```
+     */
+    /* istanbul ignore next */
+    function alert(args) {
+        var dialogComponent;
+        var dialogElement = createElement('div', { 'className': DLG_UTIL_ALERT });
+        document.body.appendChild(dialogElement);
+        var alertDialogObj;
+        var okButtonModel = [{
+                buttonModel: { isPrimary: true, content: 'OK' },
+                click: function () {
+                    this.hide();
+                }
+            }];
+        if (typeof (args) === 'string') {
+            alertDialogObj = createDialog({ content: args,
+                position: { X: 'center', Y: 'top' },
+                isModal: true, header: DLG_UTIL_DEFAULT_TITLE,
+                buttons: okButtonModel }, dialogElement);
+        }
+        else {
+            alertDialogObj = createDialog(alertOptions(args), dialogElement);
+        }
+        alertDialogObj.close = function () {
+            alertDialogObj.destroy();
+            if (alertDialogObj.element.classList.contains('e-dlg-modal')) {
+                alertDialogObj.element.parentElement.remove();
+                alertDialogObj.target.classList.remove(DLG_UTIL_ROOT);
+            }
+            else {
+                alertDialogObj.element.remove();
+            }
+        };
+        return alertDialogObj;
+    }
+    DialogUtility.alert = alert;
+    /**
+     * A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.
+     * ```
+     * Eg : DialogUtility.confirm('Confirm dialog message');
+     *
+     * ```
+     */
+    /* istanbul ignore next */
+    function confirm(args) {
+        var dialogComponent;
+        var dialogElement = createElement('div', { 'className': DLG_UTIL_CONFIRM });
+        document.body.appendChild(dialogElement);
+        var confirmDialogObj;
+        var okCancelButtonModel = [{
+                buttonModel: { isPrimary: true, content: 'OK' },
+                click: function () {
+                    this.hide();
+                }
+            }, {
+                buttonModel: { content: 'Cancel' },
+                click: function () {
+                    this.hide();
+                }
+            }];
+        if (typeof (args) === 'string') {
+            confirmDialogObj = createDialog({ position: { X: 'center', Y: 'top' }, content: args, isModal: true,
+                header: DLG_UTIL_DEFAULT_TITLE, buttons: okCancelButtonModel
+            }, dialogElement);
+        }
+        else {
+            confirmDialogObj = createDialog(confirmOptions(args), dialogElement);
+        }
+        confirmDialogObj.close = function () {
+            confirmDialogObj.destroy();
+            if (confirmDialogObj.element.classList.contains('e-dlg-modal')) {
+                confirmDialogObj.element.parentElement.remove();
+                confirmDialogObj.target.classList.remove(DLG_UTIL_ROOT);
+            }
+            else {
+                confirmDialogObj.element.remove();
+            }
+        };
+        return confirmDialogObj;
+    }
+    DialogUtility.confirm = confirm;
+    function createDialog(options, element) {
+        var dialogObject = new Dialog(options);
+        dialogObject.appendTo(element);
+        return dialogObject;
+    }
+    function alertOptions(option) {
+        var options = {};
+        options.buttons = [];
+        options = formOptions(options, option);
+        options = setAlertButtonModel(options, option);
+        return options;
+    }
+    function confirmOptions(option) {
+        var options = {};
+        options.buttons = [];
+        options = formOptions(options, option);
+        options = setConfirmButtonModel(options, option);
+        return options;
+    }
+    function formOptions(options, option) {
+        options.header = !isNullOrUndefined(option.title) ? option.title : DLG_UTIL_DEFAULT_TITLE;
+        options.content = !isNullOrUndefined(option.content) ? option.content : '';
+        options.isModal = !isNullOrUndefined(option.isModal) ? option.isModal : true;
+        options.showCloseIcon = !isNullOrUndefined(option.showCloseIcon) ? option.showCloseIcon : false;
+        options.allowDragging = !isNullOrUndefined(option.isDraggable) ? option.isDraggable : false;
+        options.closeOnEscape = !isNullOrUndefined(option.closeOnEscape) ? option.closeOnEscape : false;
+        options.position = !isNullOrUndefined(option.position) ? option.position : { X: 'center', Y: 'top' };
+        return options;
+    }
+    function setAlertButtonModel(options, option) {
+        var alertButtonModel = [{
+                buttonModel: { isPrimary: true, content: 'OK' },
+                click: function () { return; }
+            }];
+        if (!isNullOrUndefined(option.okButton)) {
+            options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, alertButtonModel[0]);
+        }
+        else {
+            options.buttons = alertButtonModel;
+        }
+        return options;
+    }
+    function setConfirmButtonModel(options, option) {
+        var okButtonModel = {
+            buttonModel: { isPrimary: true, content: 'OK' },
+            click: function () { return; }
+        };
+        var cancelButtonModel = {
+            buttonModel: { content: 'Cancel' },
+            click: function () { return; }
+        };
+        if (!isNullOrUndefined(option.okButton)) {
+            options.buttons[0] = formButtonModel(options.buttons[0], option.okButton, okButtonModel);
+        }
+        else {
+            options.buttons[0] = okButtonModel;
+        }
+        if (!isNullOrUndefined(option.cancelButton)) {
+            options.buttons[1] = formButtonModel(options.buttons[1], option.cancelButton, cancelButtonModel);
+        }
+        else {
+            options.buttons[1] = cancelButtonModel;
+        }
+        return options;
+    }
+    function formButtonModel(buttonModel, option, buttonPropModel) {
+        var buttonProps = buttonPropModel;
+        if (!isNullOrUndefined(option.text)) {
+            buttonProps.buttonModel.content = option.text;
+        }
+        if (!isNullOrUndefined(option.icon)) {
+            buttonProps.buttonModel.iconCss = option.icon;
+        }
+        if (!isNullOrUndefined(option.cssClass)) {
+            buttonProps.buttonModel.cssClass = option.cssClass;
+        }
+        if (!isNullOrUndefined(option.click)) {
+            buttonProps.click = option.click;
+        }
+        return buttonProps;
+    }
+})(DialogUtility || (DialogUtility = {}));

src/global.js

@@ -1,4 +0,1 @@
-import * as popups from './index';
-import * as base from '@syncfusion/ej2-base';
-import * as buttons from '@syncfusion/ej2-buttons';
-export { popups, base, buttons };
+export * from './index';

src/popup/popup.d.ts

@@ -203,3 +203,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      */
-    refreshPosition(target?: HTMLElement): void;
+    refreshPosition(target?: HTMLElement, collision?: boolean): void;
     private reposition();
@@ -242,1 +242,7 @@ private checkGetBoundingClientRect(ele);
 export declare function getZindexPartial(element: HTMLElement): number;
+/**
+ * Gets the maximum z-index of the page.
+ * @param { HTMLElement } tagName - Specify the tagName to get the maximum z-index of it.
+ * @private
+ */
+export declare function getMaxZindex(tagName?: string[]): number;

src/popup/popup.js

@@ -65,5 +65,3 @@ var __extends = (this && this.__extends) || (function () {
     function Popup(element, options) {
-        var _this = _super.call(this, options, element) || this;
-        _this.fixedParent = false;
-        return _this;
+        return _super.call(this, options, element) || this;
     }
@@ -154,2 +152,3 @@ /**
         setStyleAttribute(this.element, styles);
+        this.fixedParent = false;
         this.setEnableRtl();
@@ -309,3 +308,3 @@ this.setContent();
      */
-    Popup.prototype.refreshPosition = function (target) {
+    Popup.prototype.refreshPosition = function (target, collision) {
         if (!isNullOrUndefined(target)) {
@@ -315,3 +314,5 @@ this.checkFixedParent(target);
         this.reposition();
-        this.checkCollision();
+        if (!collision) {
+            this.checkCollision();
+        }
     };
@@ -691,1 +692,21 @@ Popup.prototype.reposition = function () {
 }
+/**
+ * Gets the maximum z-index of the page.
+ * @param { HTMLElement } tagName - Specify the tagName to get the maximum z-index of it.
+ * @private
+ */
+export function getMaxZindex(tagName) {
+    if (tagName === void 0) { tagName = ['*']; }
+    var maxZindex = [];
+    for (var i = 0; i < tagName.length; i++) {
+        var elements = document.getElementsByTagName(tagName[i]);
+        for (var i_1 = 0; i_1 < elements.length; i_1++) {
+            var index = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('z-index');
+            var position = document.defaultView.getComputedStyle(elements[i_1], null).getPropertyValue('position');
+            if (index !== 'auto' && position !== 'static') {
+                maxZindex.push(index);
+            }
+        }
+    }
+    return Math.max.apply(Math, maxZindex) + 1;
+}

src/tooltip/tooltip.d.ts

@@ -101,4 +101,4 @@ import { Component, ChildProperty, BaseEventArgs } from '@syncfusion/ej2-base';
     private tipWidth;
+    private touchModule;
     private tipHeight;
-    private touchModule;
     private autoCloseTimer;
@@ -337,2 +337,3 @@ /**
     private unwireMouseEvents(target);
+    private findTarget();
     /**
@@ -339,0 +340,0 @@ * Core method to return the component name.

src/tooltip/tooltip.js

@@ -798,2 +798,6 @@ var __extends = (this && this.__extends) || (function () {
     };
+    Tooltip.prototype.findTarget = function () {
+        var target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');
+        return target;
+    };
     /**
@@ -818,2 +822,3 @@ * Core method to return the component name.
     Tooltip.prototype.onPropertyChanged = function (newProp, oldProp) {
+        var targetElement = this.findTarget();
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -823,9 +828,11 @@ var prop = _a[_i];
                 case 'width':
-                    if (this.tooltipEle) {
+                    if (this.tooltipEle && targetElement) {
                         this.tooltipEle.style.width = formatUnit(newProp.width);
+                        this.reposition(targetElement);
                     }
                     break;
                 case 'height':
-                    if (this.tooltipEle) {
+                    if (this.tooltipEle && targetElement) {
                         this.tooltipEle.style.height = formatUnit(newProp.height);
+                        this.reposition(targetElement);
                     }
@@ -844,13 +851,11 @@ break;
                     this.formatPosition();
-                    var target = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');
-                    if (this.tooltipEle && target) {
+                    if (this.tooltipEle && targetElement) {
                         var arrowInnerELe = this.tooltipEle.querySelector('.' + ARROW_TIP_INNER);
                         arrowInnerELe.style.top = arrowInnerELe.style.left = null;
-                        this.reposition(target);
+                        this.reposition(targetElement);
                     }
                     break;
                 case 'tipPointerPosition':
-                    var trgt = document.querySelector('[data-tooltip-id= ' + this.ctrlId + '_content]');
-                    if (this.tooltipEle && trgt) {
-                        this.reposition(trgt);
+                    if (this.tooltipEle && targetElement) {
+                        this.reposition(targetElement);
                     }
@@ -857,0 +862,0 @@ break;

New alerts

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1878215

decreased by-78.13%

Lines of code

19049

decreased by-68.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@syncfusion/ej2-base@16.3.34(transitive)

• + Added@syncfusion/ej2-buttons@16.3.34(transitive)

• - Removed@syncfusion/ej2-base@16.2.50(transitive)

• - Removed@syncfusion/ej2-buttons@16.2.50(transitive)

• Updated@syncfusion/ej2-base@~16.3.17

• Updated@syncfusion/ej2-buttons@~16.3.17