@syncfusion/ej2-inputs 22.1.39 → 22.2.7

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 22.1.39
+*  version : 22.2.7
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@22.1.38",
+  "_id": "@syncfusion/ej2-inputs@22.2.5",
   "_inBundle": false,
-  "_integrity": "sha512-4baJA8Seg3ZBD8LHkc9C14+JHsRpVAok3824wYR52xp/QD9Lr6+9ueUsPMIVHYB3bPx/ElAKbElkiB2yGYfVWA==",
+  "_integrity": "sha512-CaRDPv2lDQ41JkSSavDI6EqP9OFDIXzjWFpPRcK3uYyDJmN9GLpjEr3aDQ+lSUQz0RMucHYX3yGDWPwL3GEnPg==",
   "_location": "/@syncfusion/ej2-inputs",
   "_phantomChildren": {},
   "_requested": {
@@ -39,8 +39,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-inputs"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-22.1.38.tgz",
-  "_shasum": "af9599bc4fb8fd9a70efbb1bb6e8427f92e99498",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-22.2.5.tgz",
+  "_shasum": "011d05921cd27fa496623263e41e13ac51776885",
   "_spec": "@syncfusion/ej2-inputs@*",
   "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
@@ -48,10 +48,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~22.1.38",
-    "@syncfusion/ej2-buttons": "~22.1.39",
-    "@syncfusion/ej2-popups": "~22.1.38",
-    "@syncfusion/ej2-splitbuttons": "~22.1.37"
+    "@syncfusion/ej2-base": "~22.2.5",
+    "@syncfusion/ej2-buttons": "~22.2.5",
+    "@syncfusion/ej2-popups": "~22.2.7",
+    "@syncfusion/ej2-splitbuttons": "~22.2.5"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
@@ -119,7 +119,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
   },
   "typings": "index.d.ts",
-  "version": "22.1.39",
+  "version": "22.2.7",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/signature-base.d.ts

@@ -176,10 +176,12 @@ export declare abstract class SignatureBase extends Component<HTMLCanvasElement>
      * @param {string} text - specify text to be drawn as signature.
      * @param {string} fontFamily - specify font family of a signature.
      * @param {number} fontSize - specify font size of a signature.
+     * @param {number} x- Specifies the x-coordinate to start the text of a signature. Default to the center point of the image if it not specified.
+     * @param {number} y - Specifies the y-coordinate to start the text of a signature. Default to the center point of the image if it not specified.
      *
      * @returns {void}.
      */
-    draw(text: string, fontFamily?: string, fontSize?: number): void;
+    draw(text: string, fontFamily?: string, fontSize?: number, x?: number, y?: number): void;
     /**
      * To load the signature with the given base 64 string, height and width.
      *

package/src/common/signature-base.js

@@ -650,18 +650,28 @@ var SignatureBase = /** @class */ (function (_super) {
      * @param {string} text - specify text to be drawn as signature.
      * @param {string} fontFamily - specify font family of a signature.
      * @param {number} fontSize - specify font size of a signature.
+     * @param {number} x- Specifies the x-coordinate to start the text of a signature. Default to the center point of the image if it not specified.
+     * @param {number} y - Specifies the y-coordinate to start the text of a signature. Default to the center point of the image if it not specified.
      *
      * @returns {void}.
      */
-    SignatureBase.prototype.draw = function (text, fontFamily, fontSize) {
+    SignatureBase.prototype.draw = function (text, fontFamily, fontSize, x, y) {
         var args = { actionName: 'draw-text' };
         this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
         fontFamily = fontFamily || 'Arial';
         fontSize = fontSize || 30;
         this.canvasContext.font = fontSize + 'px ' + fontFamily;
-        this.canvasContext.textAlign = 'center';
-        this.canvasContext.textBaseline = 'middle';
-        this.canvasContext.fillText(text, this.element.width / 2, this.element.height / 2);
+        var startX = this.element.width / 2;
+        var startY = this.element.height / 2;
+        if (isNullOrUndefined(x) && isNullOrUndefined(y)) {
+            this.canvasContext.textAlign = 'center';
+            this.canvasContext.textBaseline = 'middle';
+        }
+        else {
+            startX = isNullOrUndefined(x) ? startX : x;
+            startY = isNullOrUndefined(y) ? startY + fontSize / 2 : (y + fontSize / 2);
+        }
+        this.canvasContext.fillText(text, startX, startY);
         this.updateSnapCollection();
         this.isSignatureEmpty = false;
         this.trigger('change', args);

package/src/form-validator/form-validator.js

@@ -306,13 +306,31 @@ var FormValidator = /** @class */ (function (_super) {
             var element = elements_2[_i];
             var input = element;
             input.removeAttribute('aria-invalid');
-            input.classList.remove(this.errorClass);
+            var inputParent = input.parentElement;
+            var grandParent = inputParent.parentElement;
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                inputParent.classList.remove(this.errorClass);
+            }
+            else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
+                grandParent.classList.remove(this.errorClass);
+            }
+            else {
+                input.classList.remove(this.errorClass);
+            }
             if (input.name.length > 0) {
                 this.getInputElement(input.name);
                 this.getErrorElement(input.name);
                 this.hideMessage(input.name);
             }
-            input.classList.remove(this.validClass);
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                inputParent.classList.remove(this.validClass);
+            }
+            else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
+                grandParent.classList.remove(this.validClass);
+            }
+            else {
+                input.classList.remove(this.validClass);
+            }
         }
     };
     FormValidator.prototype.createHTML5Rules = function () {
@@ -560,8 +578,20 @@ var FormValidator = /** @class */ (function (_super) {
                     // Set aria attributes to invalid elements
                     this.inputElement.setAttribute('aria-invalid', 'true');
                     this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');
-                    this.inputElement.classList.add(this.errorClass);
-                    this.inputElement.classList.remove(this.validClass);
+                    var inputParent = this.inputElement.parentElement;
+                    var grandParent = inputParent.parentElement;
+                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                        inputParent.classList.add(this.errorClass);
+                        inputParent.classList.remove(this.validClass);
+                    }
+                    else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
+                        grandParent.classList.add(this.errorClass);
+                        grandParent.classList.remove(this.validClass);
+                    }
+                    else {
+                        this.inputElement.classList.add(this.errorClass);
+                        this.inputElement.classList.remove(this.validClass);
+                    }
                     if (!this.infoElement) {
                         this.createErrorElement(name, errorRule.message, this.inputElement);
                     }
@@ -570,8 +600,18 @@ var FormValidator = /** @class */ (function (_super) {
                     }
                     eventArgs.errorElement = this.infoElement;
                     eventArgs.status = 'failure';
-                    this.inputElement.classList.add(this.errorClass);
-                    this.inputElement.classList.remove(this.validClass);
+                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                        inputParent.classList.add(this.errorClass);
+                        inputParent.classList.remove(this.validClass);
+                    }
+                    else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
+                        grandParent.classList.add(this.errorClass);
+                        grandParent.classList.remove(this.validClass);
+                    }
+                    else {
+                        this.inputElement.classList.add(this.errorClass);
+                        this.inputElement.classList.remove(this.validClass);
+                    }
                     this.optionalValidationStatus(name, eventArgs);
                     this.trigger('validationComplete', eventArgs);
                     // Set aria-required to required rule elements
@@ -713,8 +753,20 @@ var FormValidator = /** @class */ (function (_super) {
         if (this.infoElement) {
             this.infoElement.style.display = 'none';
             this.removeErrorRules(name);
-            this.inputElement.classList.add(this.validClass);
-            this.inputElement.classList.remove(this.errorClass);
+            var inputParent = this.inputElement.parentElement;
+            var grandParent = inputParent.parentElement;
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                inputParent.classList.add(this.validClass);
+                inputParent.classList.remove(this.errorClass);
+            }
+            else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
+                grandParent.classList.add(this.validClass);
+                grandParent.classList.remove(this.errorClass);
+            }
+            else {
+                this.inputElement.classList.add(this.validClass);
+                this.inputElement.classList.remove(this.errorClass);
+            }
             this.inputElement.setAttribute('aria-invalid', 'false');
         }
     };

package/src/slider/slider.js

@@ -328,7 +328,7 @@ var Slider = /** @class */ (function (_super) {
         this.setCSSClass();
     };
     Slider.prototype.setElementWidth = function (width) {
-        if (!isNullOrUndefined(width)) {
+        if (!isNullOrUndefined(width) && !isNullOrUndefined(this.sliderContainer)) {
             if (typeof width === 'number') {
                 this.sliderContainer.style.width = formatUnit(width);
             }
@@ -891,10 +891,12 @@ var Slider = /** @class */ (function (_super) {
                 this.tooltipElement.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;
             }
             if (this.type === 'Default') {
-                setTimeout(function () { _this.tooltipElement.style.transition = _this.transition.handle; }, 2500);
+                setTimeout(function () { if (_this.tooltipElement)
+                    _this.tooltipElement.style.transition = _this.transition.handle; }, 2500);
             }
             else {
-                setTimeout(function () { _this.tooltipElement.style.transition = 'none'; }, 2500);
+                setTimeout(function () { if (_this.tooltipElement)
+                    _this.tooltipElement.style.transition = 'none'; }, 2500);
             }
         }
     };
@@ -913,7 +915,8 @@ var Slider = /** @class */ (function (_super) {
             this.tooltipElement.classList.remove(classNames.materialTooltipOpen);
             this.setTooltipTransform();
             this.tooltipTarget = undefined;
-            setTimeout(function () { _this.tooltipElement.style.transition = 'none'; }, 2500);
+            setTimeout(function () { if (_this.tooltipElement)
+                _this.tooltipElement.style.transition = 'none'; }, 2500);
         }
     };
     Slider.prototype.checkTooltipPosition = function (args) {
@@ -939,6 +942,8 @@ var Slider = /** @class */ (function (_super) {
     };
     Slider.prototype.setTooltipTransform = function () {
         var transformProperties = this.getTooltipTransformProperties(this.previousTooltipClass);
+        if (isNullOrUndefined(this.tooltipElement))
+            return;
         if (this.tooltipElement.firstElementChild.innerText.length > 4) {
             this.tooltipElement.style.transform = transformProperties.translate + " scale(0.01)";
         }
@@ -1483,7 +1488,7 @@ var Slider = /** @class */ (function (_super) {
         }
     };
     Slider.prototype.setRangeBar = function () {
-        if (this.orientation === 'Horizontal') {
+        if (this.orientation === 'Horizontal' && !isNullOrUndefined(this.rangeBar)) {
             if (this.type === 'MinRange') {
                 // eslint-disable-next-line
                 this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');
@@ -1496,7 +1501,7 @@ var Slider = /** @class */ (function (_super) {
                 setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });
             }
         }
-        else {
+        else if (!isNullOrUndefined(this.rangeBar)) {
             if (this.type === 'MinRange') {
                 this.rangeBar.style.bottom = this.min > this.max ? this.handlePos1 + 'px' : '0px';
                 setStyleAttribute(this.rangeBar, { 'height': isNullOrUndefined(this.handlePos1) ? 0 : this.min > this.max ? this.element.clientHeight - this.handlePos1 + 'px' : this.handlePos1 + 'px' });
@@ -1633,7 +1638,7 @@ var Slider = /** @class */ (function (_super) {
         this.setRangeValue();
     };
     Slider.prototype.modifyZindex = function () {
-        if (this.type === 'Range') {
+        if (this.type === 'Range' && !isNullOrUndefined(this.firstHandle) && !isNullOrUndefined(this.secondHandle)) {
             if (this.activeHandle === 1) {
                 this.firstHandle.style.zIndex = (this.zIndex + 4) + '';
                 this.secondHandle.style.zIndex = (this.zIndex + 3) + '';
@@ -1818,11 +1823,12 @@ var Slider = /** @class */ (function (_super) {
      */
     Slider.prototype.reposition = function () {
         var _this = this;
-        this.firstHandle.style.transition = 'none';
-        if (this.type !== 'Default') {
+        if (!isNullOrUndefined(this.firstHandle))
+            this.firstHandle.style.transition = 'none';
+        if (this.type !== 'Default' && !isNullOrUndefined(this.rangeBar)) {
             this.rangeBar.style.transition = 'none';
         }
-        if (this.type === 'Range') {
+        if (this.type === 'Range' && !isNullOrUndefined(this.secondHandle)) {
             this.secondHandle.style.transition = 'none';
         }
         this.handlePos1 = this.checkHandlePosition(this.handleVal1);
@@ -1833,17 +1839,17 @@ var Slider = /** @class */ (function (_super) {
             // eslint-disable-next-line
             this.enableRtl ? this.firstHandle.style.right =
                 this.handlePos1 + "px" : this.firstHandle.style.left = this.handlePos1 + "px";
-            if (this.isMaterialTooltip) {
+            if (this.isMaterialTooltip && !isNullOrUndefined(this.materialHandle)) {
                 // eslint-disable-next-line
                 this.enableRtl ? this.materialHandle.style.right =
                     this.handlePos1 + "px" : this.materialHandle.style.left = this.handlePos1 + "px";
             }
-            if (this.type === 'MinRange') {
+            if (this.type === 'MinRange' && !isNullOrUndefined(this.rangeBar)) {
                 // eslint-disable-next-line
                 this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');
                 setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });
             }
-            else if (this.type === 'Range') {
+            else if (this.type === 'Range' && !isNullOrUndefined(this.secondHandle) && !isNullOrUndefined(this.rangeBar)) {
                 // eslint-disable-next-line
                 this.enableRtl ? this.secondHandle.style.right =
                     this.handlePos2 + "px" : this.secondHandle.style.left = this.handlePos2 + "px";
@@ -1879,8 +1885,9 @@ var Slider = /** @class */ (function (_super) {
         this.handleStart();
         if (!this.tooltip.isVisible) {
             setTimeout(function () {
-                _this.firstHandle.style.transition = _this.scaleTransform;
-                if (_this.type === 'Range') {
+                if (!isNullOrUndefined(_this.firstHandle))
+                    _this.firstHandle.style.transition = _this.scaleTransform;
+                if (_this.type === 'Range' && !isNullOrUndefined(_this.secondHandle)) {
                     _this.secondHandle.style.transition = _this.scaleTransform;
                 }
             });
@@ -2680,6 +2687,24 @@ var Slider = /** @class */ (function (_super) {
             this.tooltipObj.destroy();
         }
         this.element.innerHTML = '';
+        this.hiddenInput = null;
+        this.sliderContainer = null;
+        this.sliderTrack = null;
+        this.rangeBar = null;
+        this.firstHandle = null;
+        this.secondHandle = null;
+        this.tickElementCollection = null;
+        this.ul = null;
+        this.firstBtn = null;
+        this.secondBtn = null;
+        this.materialHandle = null;
+        this.tooltipObj = null;
+        this.tooltipTarget = null;
+        this.limitBarFirst = null;
+        this.limitBarSecond = null;
+        this.firstChild = null;
+        this.lastChild = null;
+        this.tooltipElement = null;
     };
     /**
      * Calls internally if any of the property value is changed.
@@ -2838,15 +2863,16 @@ var Slider = /** @class */ (function (_super) {
     };
     Slider.prototype.setZindex = function () {
         this.zIndex = 6;
-        if (!isNullOrUndefined(this.ticks) && this.ticks.placement !== 'None') {
+        if (!isNullOrUndefined(this.ticks) && this.ticks.placement !== 'None' && !isNullOrUndefined(this.ul) && !isNullOrUndefined(this.element)) {
             this.ul.style.zIndex = (this.zIndex + -7) + '';
             this.element.style.zIndex = (this.zIndex + 2) + '';
         }
         if (!this.isMaterial && !this.isMaterial3 && !isNullOrUndefined(this.ticks) && this.ticks.placement === 'Both') {
             this.element.style.zIndex = (this.zIndex + 2) + '';
         }
-        this.firstHandle.style.zIndex = (this.zIndex + 3) + '';
-        if (this.type === 'Range') {
+        if (!isNullOrUndefined(this.firstHandle))
+            this.firstHandle.style.zIndex = (this.zIndex + 3) + '';
+        if (this.type === 'Range' && !isNullOrUndefined(this.secondHandle)) {
             this.secondHandle.style.zIndex = (this.zIndex + 4) + '';
         }
     };

package/src/textbox/textbox.d.ts

@@ -231,6 +231,7 @@ export declare class TextBox extends Component<HTMLInputElement | HTMLTextAreaEl
     private resetForm;
     private focusHandler;
     private focusOutHandler;
+    private keydownHandler;
     private inputHandler;
     private changeHandler;
     private raiseChangeEvent;

package/src/textbox/textbox.js

@@ -393,6 +393,7 @@ var TextBox = /** @class */ (function (_super) {
     TextBox.prototype.wireEvents = function () {
         EventHandler.add(this.respectiveElement, 'focus', this.focusHandler, this);
         EventHandler.add(this.respectiveElement, 'blur', this.focusOutHandler, this);
+        EventHandler.add(this.respectiveElement, 'keydown', this.keydownHandler, this);
         EventHandler.add(this.respectiveElement, 'input', this.inputHandler, this);
         EventHandler.add(this.respectiveElement, 'change', this.changeHandler, this);
         if (this.isForm) {
@@ -462,6 +463,11 @@ var TextBox = /** @class */ (function (_super) {
         };
         this.trigger('blur', eventArgs);
     };
+    TextBox.prototype.keydownHandler = function (args) {
+        if ((args.keyCode === 13 || args.keyCode === 9) && !((this.previousValue === null || this.previousValue === "") && (this.value === null || this.value === "") && this.respectiveElement.value === "")) {
+            this.setProperties({ value: this.respectiveElement.value }, true);
+        }
+    };
     TextBox.prototype.inputHandler = function (args) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias
         var textboxObj = this;
@@ -545,6 +551,7 @@ var TextBox = /** @class */ (function (_super) {
     TextBox.prototype.unWireEvents = function () {
         EventHandler.remove(this.respectiveElement, 'focus', this.focusHandler);
         EventHandler.remove(this.respectiveElement, 'blur', this.focusOutHandler);
+        EventHandler.remove(this.respectiveElement, 'keydown', this.keydownHandler);
         EventHandler.remove(this.respectiveElement, 'input', this.inputHandler);
         EventHandler.remove(this.respectiveElement, 'change', this.changeHandler);
         if (this.isForm) {