@syncfusion/ej2-popups - npm Package Compare versions

Comparing version 16.3.34 to 16.4.40-beta

CHANGELOG.md

@@ -5,2 +5,8 @@ # Changelog
 
+### Dialog
+
+#### New Features
+
+- Provided resizable support to the dialog for both modal dialog and modeless dialog (non-modal).
+
 ## 16.3.32 (2018-11-13)
@@ -7,0 +13,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.3.34
+*  version : 16.4.40-beta
 *  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "name": "@syncfusion/ej2-popups",
-  "version": "16.3.34",
+  "version": "16.4.40-beta",
   "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.",
@@ -11,4 +11,4 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.3.34",
-    "@syncfusion/ej2-buttons": "~16.3.34"
+    "@syncfusion/ej2-base": "~16.4.40-beta",
+    "@syncfusion/ej2-buttons": "~16.4.40-beta"
   },
@@ -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, 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 { 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 { createResize, removeResize, setMinHeight } from '../common/resize';
 import {ButtonType,DialogEffect,BeforeOpenEventArgs,BeforeCloseEventArgs} from "./dialog";
@@ -55,2 +55,3 @@ import {ComponentModel} from '@syncfusion/ej2-base';
      * 16. None
+     * @default 'Fade'
      */
@@ -61,2 +62,3 @@ effect?: DialogEffect;
      * Specifies the duration in milliseconds that the animation takes to open or close the dialog.
+     * @default 400
      */
@@ -66,3 +68,4 @@ duration?: number;
     /**
-     * Specifies the delay in milliseconds to start animation. 
+     * Specifies the delay in milliseconds to start animation.
+     * @default 0
      */
@@ -119,2 +122,9 @@ delay?: number;
     /**
+     * Specifies the value whether the dialog component can be resized by the end-user.
+     * If enableResize is true, the dialog component creates grip to resize it diagonal direction.
+     * @default false 
+     */
+    enableResize?: boolean;
+
+    /**
      * Specifies the height of the dialog component.
@@ -272,2 +282,20 @@ * @default 'auto'
 
+    /**
+     * Event triggers when the user begins to resize a dialog.
+     * @event
+     */
+    resizeStart?: EmitType<Object>;
+
+    /**
+     * Event triggers when the user resize the dialog.
+     * @event
+     */
+    resizing?: EmitType<Object>;
+
+    /**
+     * Event triggers when the user stop to resize a dialog.
+     * @event
+     */
+    resizeStop?: EmitType<Object>;
+
 }

src/dialog/dialog.d.ts

@@ -48,2 +48,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
      * 16. None
+     * @default 'Fade'
      */
@@ -53,2 +54,3 @@ effect: DialogEffect;
      * Specifies the duration in milliseconds that the animation takes to open or close the dialog.
+     * @default 400
      */
@@ -58,2 +60,3 @@ duration: number;
      * Specifies the delay in milliseconds to start animation.
+     * @default 0
      */
@@ -187,2 +190,8 @@ delay: number;
     /**
+     * Specifies the value whether the dialog component can be resized by the end-user.
+     * If enableResize is true, the dialog component creates grip to resize it diagonal direction.
+     * @default false
+     */
+    enableResize: boolean;
+    /**
      * Specifies the height of the dialog component.
@@ -321,2 +330,17 @@ * @default 'auto'
     /**
+     * Event triggers when the user begins to resize a dialog.
+     * @event
+     */
+    resizeStart: EmitType<Object>;
+    /**
+     * Event triggers when the user resize the dialog.
+     * @event
+     */
+    resizing: EmitType<Object>;
+    /**
+     * Event triggers when the user stop to resize a dialog.
+     * @event
+     */
+    resizeStop: EmitType<Object>;
+    /**
      * Constructor for creating the widget
@@ -336,2 +360,9 @@ * @hidden
     protected preRender(): void;
+    private isNumberValue;
+    private checkPositionData;
+    private getMinHeight;
+    private onResizeStart;
+    private onResizing;
+    private onResizeComplete;
+    private setResize;
     private keyDown;
@@ -472,2 +503,3 @@ /**
     okButton?: ButtonArgs;
+    animationSettings?: AnimationSettingsModel;
 }
@@ -484,2 +516,3 @@ export interface ConfirmDialogArgs {
     cancelButton?: ButtonArgs;
+    animationSettings?: AnimationSettingsModel;
 }

src/dialog/dialog.js

@@ -28,2 +28,3 @@ var __extends = (this && this.__extends) || (function () {
 import { Button } from '@syncfusion/ej2-buttons';
+import { createResize, removeResize, setMinHeight } from '../common/resize';
 var ButtonProps = /** @class */ (function (_super) {
@@ -89,2 +90,5 @@ __extends(ButtonProps, _super);
 var DLG_UTIL_CONFIRM = 'e-confirm-dialog';
+var DLG_RESIZABLE = 'e-dlg-resizable';
+var DLG_RESTRICT_LEFT_VALUE = 'e-restrict-left';
+var DLG_RESTRICT_WIDTH_VALUE = 'e-resize-viewport';
 /**
@@ -123,2 +127,8 @@ * Represents the dialog component that displays the information and get input from the user.
         }
+        if (this.enableResize) {
+            this.setResize();
+            if (this.animationSettings.effect === 'None') {
+                this.getMinHeight();
+            }
+        }
     };
@@ -149,2 +159,3 @@ /**
         this.l10n = new L10n('dialog', localeText, this.locale);
+        this.checkPositionData();
         if (isNullOrUndefined(this.target)) {
@@ -158,3 +169,88 @@ var prevOnChange = this.isProtectedOnChange;
     ;
+    Dialog.prototype.isNumberValue = function (value) {
+        var isNumber = /^[-+]?\d*\.?\d+$/.test(value);
+        return isNumber;
+    };
+    Dialog.prototype.checkPositionData = function () {
+        if (!isNullOrUndefined(this.position)) {
+            if (!isNullOrUndefined(this.position.X) && (typeof (this.position.X) !== 'number')) {
+                var isNumber = this.isNumberValue(this.position.X);
+                if (isNumber) {
+                    var prevOnChange = this.isProtectedOnChange;
+                    this.isProtectedOnChange = true;
+                    this.position.X = parseFloat(this.position.X);
+                    this.isProtectedOnChange = prevOnChange;
+                }
+            }
+            if (!isNullOrUndefined(this.position.Y) && (typeof (this.position.Y) !== 'number')) {
+                var isNumber = this.isNumberValue(this.position.Y);
+                if (isNumber) {
+                    var prevOnChange = this.isProtectedOnChange;
+                    this.isProtectedOnChange = true;
+                    this.position.Y = parseFloat(this.position.Y);
+                    this.isProtectedOnChange = prevOnChange;
+                }
+            }
+        }
+    };
     /* istanbul ignore next */
+    Dialog.prototype.getMinHeight = function () {
+        var computedHeaderHeight = '0px';
+        var computedFooterHeight = '0px';
+        if (!isNullOrUndefined(this.element.querySelector('.' + DLG_HEADER_CONTENT))) {
+            computedHeaderHeight = getComputedStyle(this.headerContent).height;
+        }
+        if (!isNullOrUndefined(this.element.querySelector('.' + DLG_FOOTER_CONTENT))) {
+            computedFooterHeight = getComputedStyle(this.element.querySelector('.' + DLG_FOOTER_CONTENT)).height;
+        }
+        var headerHeight = parseInt(computedHeaderHeight.slice(0, computedHeaderHeight.indexOf('p')), 10);
+        var footerHeight = parseInt(computedFooterHeight.slice(0, computedFooterHeight.indexOf('p')), 10);
+        setMinHeight(headerHeight + 30 + footerHeight);
+    };
+    Dialog.prototype.onResizeStart = function (args) {
+        this.trigger('resizeStart', args);
+    };
+    Dialog.prototype.onResizing = function (args) {
+        this.trigger('resizing', args);
+    };
+    Dialog.prototype.onResizeComplete = function (args) {
+        this.trigger('resizeStop', args);
+    };
+    Dialog.prototype.setResize = function () {
+        if (this.enableResize) {
+            this.element.classList.add(DLG_RESIZABLE);
+            var computedHeight = getComputedStyle(this.element).minHeight;
+            var computedWidth = getComputedStyle(this.element).minWidth;
+            var direction = this.enableRtl ? 'south-west' : 'south-east';
+            if (this.isModal && this.enableRtl) {
+                this.element.classList.add(DLG_RESTRICT_LEFT_VALUE);
+            }
+            else if (this.isModal && this.target === document.body) {
+                this.element.classList.add(DLG_RESTRICT_WIDTH_VALUE);
+            }
+            createResize({
+                element: this.element,
+                direction: direction,
+                minHeight: parseInt(computedHeight.slice(0, computedWidth.indexOf('p')), 10),
+                maxHeight: this.targetEle.clientHeight,
+                minWidth: parseInt(computedWidth.slice(0, computedWidth.indexOf('p')), 10),
+                maxWidth: this.targetEle.clientWidth,
+                boundary: this.target === document.body ? null : this.targetEle,
+                resizeBegin: this.onResizeStart.bind(this),
+                resizeComplete: this.onResizeComplete.bind(this),
+                resizing: this.onResizing.bind(this)
+            });
+        }
+        else {
+            removeResize();
+            if (this.isModal) {
+                this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);
+            }
+            else {
+                this.element.classList.remove(DLG_RESTRICT_WIDTH_VALUE);
+            }
+            this.element.classList.remove(DLG_RESIZABLE);
+        }
+    };
+    /* istanbul ignore next */
     Dialog.prototype.keyDown = function (event) {
@@ -274,2 +370,5 @@ var _this = this;
                 };
+                if (_this.enableResize && _this.animationSettings.effect !== 'None') {
+                    _this.getMinHeight();
+                }
                 _this.trigger('open', eventArgs);
@@ -286,3 +385,7 @@ },
                 _this.trigger('close', _this.closeArgs);
+                if (!isNullOrUndefined(document.activeElement.blur)) {
+                    document.activeElement.blur();
+                }
                 if (!isNullOrUndefined(_this.storeActiveElement)) {
+                    document.activeElement.blur();
                     _this.storeActiveElement.focus();
@@ -364,2 +467,3 @@ }
                 _this.trigger('dragStop', event);
+                _this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);
             },
@@ -439,2 +543,6 @@ drag: function (event) {
         this.enableRtl ? addClass([this.element], RTL) : removeClass([this.element], RTL);
+        if (!isNullOrUndefined(this.element.querySelector('.e-resize-handle'))) {
+            removeResize();
+            this.setResize();
+        }
     };
@@ -710,2 +818,3 @@ Dialog.prototype.setTargetContent = function () {
                 case 'position':
+                    this.checkPositionData();
                     if (this.isModal) {
@@ -723,2 +832,5 @@ var positionX = isNullOrUndefined(oldProp.position.X) ? this.position.X : oldProp.position.X;
                     break;
+                case 'enableResize':
+                    this.setResize();
+                    break;
             }
@@ -1001,2 +1113,5 @@ }
     __decorate([
+        Property(false)
+    ], Dialog.prototype, "enableResize", void 0);
+    __decorate([
         Property('auto')
@@ -1061,2 +1176,11 @@ ], Dialog.prototype, "height", void 0);
     ], Dialog.prototype, "overlayClick", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "resizeStart", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "resizing", void 0);
+    __decorate([
+        Event()
+    ], Dialog.prototype, "resizeStop", void 0);
     Dialog = __decorate([
@@ -1186,2 +1310,4 @@ NotifyPropertyChanges
         options.position = !isNullOrUndefined(option.position) ? option.position : { X: 'center', Y: 'top' };
+        options.animationSettings = !isNullOrUndefined(option.animationSettings) ? option.animationSettings :
+            { effect: 'Fade', duration: 400, delay: 0 };
         return options;
@@ -1188,0 +1314,0 @@ }

src/popup/popup-model.d.ts

@@ -12,3 +12,2 @@ import { setStyleAttribute, addClass, removeClass, ChildProperty, Complex } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit } from '@syncfusion/ej2-base';import { Browser } from '@syncfusion/ej2-base';import { calculatePosition, 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';
      * specify the offset left value
-     * @asptype object
      */
@@ -19,3 +18,2 @@ X?: string | number;
      * specify the offset top value.
-     * @asptype object
      */
@@ -22,0 +20,0 @@ Y?: string | number;

src/popup/popup.d.ts

@@ -11,3 +11,2 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * specify the offset left value
-     * @asptype object
      */
@@ -17,3 +16,2 @@ X: string | number;
      * specify the offset top value.
-     * @asptype object
      */
@@ -20,0 +18,0 @@ Y: string | number;

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2297733

increased by19.67%

Number of package files

179

increased by46.72%

Lines of code

25261

increased by30.86%

Worsened metrics

Number of low quality alerts

3

increased by50%

Dependency changes

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

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

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

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

• Updated@syncfusion/ej2-base@~16.4.40-beta

• Updated@syncfusion/ej2-buttons@~16.4.40-beta