@syncfusion/ej2-inputs 31.1.22 → 31.2.2

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.1.22
+*  version : 31.2.2
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-inputs",
-  "version": "31.1.22",
+  "version": "31.2.2",
   "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.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,10 +8,10 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-inputs.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.1.22",
-    "@syncfusion/ej2-buttons": "~31.1.21",
-    "@syncfusion/ej2-popups": "~31.1.20",
-    "@syncfusion/ej2-splitbuttons": "~31.1.17"
+    "@syncfusion/ej2-base": "~31.2.2",
+    "@syncfusion/ej2-buttons": "~31.2.2",
+    "@syncfusion/ej2-popups": "~31.2.2",
+    "@syncfusion/ej2-splitbuttons": "~31.2.2"
   },
   "devDependencies": {},
   "keywords": [

package/src/numerictextbox/numerictextbox.d.ts

@@ -51,6 +51,7 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     private isDynamicChange;
     private inputValue;
     private clearButton;
+    private storedValueString;
     /**
      * Gets or Sets the CSS classes to root element of the NumericTextBox which helps to customize the
      * complete UI styles for the NumericTextBox component.
@@ -319,6 +320,7 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     private getElementData;
     private floatLabelTypeUpdate;
     private mouseUpClick;
+    private formatScientificNotation;
     /**
      * Increments the NumericTextBox value with the specified step value.
      *

package/src/numerictextbox/numerictextbox.js

@@ -781,6 +781,9 @@ var NumericTextBox = /** @class */ (function (_super) {
         if (this.value || this.value === 0) {
             var value = this.formatNumber();
             var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);
+            if (/[eE]/.test(value)) {
+                elementValue = this.formatScientificNotation(elementValue);
+            }
             this.setElementValue(elementValue);
             attributes(this.element, { 'aria-valuenow': value });
             if (!isNullOrUndefined(this.hiddenInput)) {
@@ -812,9 +815,17 @@ var NumericTextBox = /** @class */ (function (_super) {
         var EXPREGEXP = new RegExp('[eE][\-+]?([0-9]+)');
         var valueString = value.toString();
         if (EXPREGEXP.test(valueString)) {
-            var result = EXPREGEXP.exec(valueString);
-            if (!isNullOrUndefined(result)) {
-                valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));
+            if (/[eE]/.test(valueString)) {
+                valueString = value.toFixed(20).replace(/0+$/, '');
+                if (valueString.charAt(valueString.length - 1) === '.') {
+                    valueString = valueString.slice(0, valueString.length - 1);
+                }
+            }
+            else {
+                var result = EXPREGEXP.exec(valueString);
+                if (!isNullOrUndefined(result)) {
+                    valueString = value.toFixed(Math.min(parseInt(result[1], 10), 20));
+                }
             }
         }
         var decimalPart = valueString.split('.')[1];
@@ -826,6 +837,7 @@ var NumericTextBox = /** @class */ (function (_super) {
     };
     NumericTextBox.prototype.formatNumber = function () {
         var numberOfDecimals = this.getNumberOfDecimals(this.value);
+        this.storedValueString = this.value.toString();
         return this.instance.getNumberFormat({
             maximumFractionDigits: numberOfDecimals,
             minimumFractionDigits: numberOfDecimals, useGrouping: false
@@ -939,6 +951,9 @@ var NumericTextBox = /** @class */ (function (_super) {
         this.prevValue = this.value;
         if ((this.value || this.value === 0)) {
             var formatValue_1 = this.formatNumber();
+            if (/[eE]/.test(this.value.toString())) {
+                formatValue_1 = this.formatScientificNotation(formatValue_1);
+            }
             this.setElementValue(formatValue_1);
             if (!this.isPrevFocused) {
                 if (!Browser.isDevice && Browser.info.version === '11.0') {
@@ -981,6 +996,9 @@ var NumericTextBox = /** @class */ (function (_super) {
                 this.setProperties({ value: null }, true);
             }
             var parsedInput = this.instance.getNumberParser({ format: 'n' })(this.element.value);
+            if (/[eE]/.test(this.element.value)) {
+                parsedInput = parseFloat(this.formatScientificNotation(this.element.value));
+            }
             this.updateValue(parsedInput);
             if (!Browser.isDevice) {
                 EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);
@@ -1082,6 +1100,40 @@ var NumericTextBox = /** @class */ (function (_super) {
             EventHandler.remove(this.spinDown, 'mouseleave', this.mouseUpClick);
         }
     };
+    NumericTextBox.prototype.formatScientificNotation = function (value) {
+        value = this.storedValueString ? this.storedValueString : value;
+        var _a = value.toLowerCase().split('e'), base = _a[0], exponentPart = _a[1];
+        var exponent = parseInt(exponentPart, 10);
+        var match = this.format.match(/n(\d+)/i);
+        var requiredDigits = match ? parseInt(match[1], 10) : 10;
+        var baseDigits = base.replace('.', '');
+        var fullDecimal;
+        if (exponent < 0) {
+            var zerosCount = Math.abs(Number(exponent)) - 1;
+            var limitedZeros = '0'.repeat(Math.min(zerosCount, requiredDigits));
+            fullDecimal = '0.' + limitedZeros + baseDigits;
+        }
+        else {
+            var _b = base.split('.'), intPart_1 = _b[0], _c = _b[1], decPart_1 = _c === void 0 ? '' : _c;
+            var shift = exponent - decPart_1.length;
+            if (shift >= 0) {
+                fullDecimal = intPart_1 + decPart_1 + '0'.repeat(shift);
+            }
+            else {
+                var newDec = decPart_1.slice(0, exponent) + '.' + decPart_1.slice(exponent);
+                fullDecimal = intPart_1 + newDec;
+            }
+        }
+        var _d = fullDecimal.split('.'), intPart = _d[0], _e = _d[1], decPart = _e === void 0 ? '' : _e;
+        if (this.isFocused) {
+            var limitedDecimal = decPart.slice(0, requiredDigits);
+            return intPart + "." + decPart;
+        }
+        else {
+            var formattedDecimal = decPart.padEnd(requiredDigits, '0').slice(0, requiredDigits);
+            return intPart + "." + formattedDecimal;
+        }
+    };
     /**
      * Increments the NumericTextBox value with the specified step value.
      *

package/src/uploader/uploader.js

@@ -1981,7 +1981,7 @@ var Uploader = /** @class */ (function (_super) {
         var progressbarWrapper = this.createElement('span', { className: PROGRESS_WRAPPER });
         var progressBar = this.createElement('progressbar', { className: PROGRESSBAR, attrs: { value: '0', max: '100' } });
         var progressbarInnerWrapper = this.createElement('span', { className: PROGRESS_INNER_WRAPPER });
-        progressBar.setAttribute('style', 'width: 0%');
+        progressBar.style.width = '0%';
         var progressbarText = this.createElement('span', { className: PROGRESSBAR_TEXT });
         progressbarText.textContent = '0%';
         progressbarInnerWrapper.appendChild(progressBar);
@@ -2004,7 +2004,7 @@ var Uploader = /** @class */ (function (_super) {
         }
     };
     Uploader.prototype.changeProgressValue = function (li, progressValue) {
-        li.querySelector('.' + PROGRESSBAR).setAttribute('style', 'width:' + progressValue);
+        li.querySelector('.' + PROGRESSBAR).style.width = progressValue;
         li.querySelector('.' + PROGRESSBAR_TEXT).textContent = progressValue;
     };
     Uploader.prototype.uploadInProgress = function (e, files, customUI, request) {

package/styles/bootstrap4.css

@@ -3853,7 +3853,7 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input .e-clear-icon::before,
 .e-bigger .e-input-group .e-clear-icon::before,
 .e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before {
-  font-size: 12px;
+  font-size: 16px;
 }
 
 .e-float-input.e-small.e-bigger .e-clear-icon::before,

package/styles/input/_bootstrap4-definition.scss

@@ -49,7 +49,7 @@ $float-input-wrap-padding-top: $zero-value !default;
 $input-padding-bottom: $zero-value !default;
 $input-focus-padding-bottom: $zero-value !default;
 $input-clear-icon: 10px !default;
-$input-bigger-clear-icon: 12px !default;
+$input-bigger-clear-icon: 16px !default;
 $input-small-clear-icon: 8px !default;
 $input-bigger-small-clear-icon: 12px !default;
 $input-clear-icon-padding: $zero-value !default;

package/styles/input/bootstrap4.css

@@ -3843,7 +3843,7 @@ textarea.e-input.e-bigger.e-small,
 .e-bigger .e-float-input .e-clear-icon::before,
 .e-bigger .e-input-group .e-clear-icon::before,
 .e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before {
-  font-size: 12px;
+  font-size: 16px;
 }
 
 .e-float-input.e-small.e-bigger .e-clear-icon::before,