@syncfusion/ej2-inputs 27.2.4 → 28.1.37

package/dist/global/index.d.ts

@@ -1,7 +1,7 @@
 /*!
 *  filename: index.d.ts
-*  version : 27.2.4
-*  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
+*  version : 28.1.37
+*  Copyright Syncfusion Inc. 2001 - 2024. 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
 *  licensing@syncfusion.com. Any infringement will be prosecuted under

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@27.2.2",
+  "_id": "@syncfusion/ej2-inputs@28.1.33",
   "_inBundle": false,
-  "_integrity": "sha512-nq91ptVmGbNbhUus/YIQI+3stGjgkRpv+vfIHQkOKq1wjC2+a7F+J5+7qbZw149fWw1nA2WgAXMTxuJtcTZ3PQ==",
+  "_integrity": "sha512-NIzV4t1zM7uZhDC7L5XlleROmjNmOkRxVdJMWPEbOC/iHrzwLGf7uK4OcDQEoDE9y1Aeq2YHKMjBl91Fx2e2gA==",
   "_location": "/@syncfusion/ej2-inputs",
   "_phantomChildren": {},
   "_requested": {
@@ -18,7 +18,6 @@
   },
   "_requiredBy": [
     "/",
-    "/@syncfusion/ej2",
     "/@syncfusion/ej2-angular-inputs",
     "/@syncfusion/ej2-calendars",
     "/@syncfusion/ej2-diagrams",
@@ -27,32 +26,29 @@
     "/@syncfusion/ej2-filemanager",
     "/@syncfusion/ej2-gantt",
     "/@syncfusion/ej2-grids",
-    "/@syncfusion/ej2-image-editor",
     "/@syncfusion/ej2-inplace-editor",
-    "/@syncfusion/ej2-interactive-chat",
     "/@syncfusion/ej2-kanban",
     "/@syncfusion/ej2-navigations",
     "/@syncfusion/ej2-pdfviewer",
     "/@syncfusion/ej2-pivotview",
-    "/@syncfusion/ej2-querybuilder",
     "/@syncfusion/ej2-react-inputs",
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-inputs"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-27.2.2.tgz",
-  "_shasum": "e61a97322e25d835e3b9004e3bdb9b64d66a8e32",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-28.1.33.tgz",
+  "_shasum": "dbd1c2d98a61671fc64edd179a11698985bac2f9",
   "_spec": "@syncfusion/ej2-inputs@*",
-  "_where": "/jenkins/workspace/elease-automation_release_27.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_28.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~27.2.2",
-    "@syncfusion/ej2-buttons": "~27.2.4",
-    "@syncfusion/ej2-popups": "~27.2.2",
-    "@syncfusion/ej2-splitbuttons": "~27.2.2"
+    "@syncfusion/ej2-base": "~28.1.33",
+    "@syncfusion/ej2-buttons": "~28.1.37",
+    "@syncfusion/ej2-popups": "~28.1.33",
+    "@syncfusion/ej2-splitbuttons": "~28.1.37"
   },
   "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.",
@@ -120,7 +116,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
   },
   "typings": "index.d.ts",
-  "version": "27.2.4",
+  "version": "28.1.37",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/common/signature-base.js

@@ -75,13 +75,17 @@ var SignatureBase = /** @class */ (function (_super) {
     };
     SignatureBase.prototype.unwireEvents = function (type) {
         if (type === 'mouseup' || type === 'touchend') {
-            EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
-            EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
+            if (this.canvasContext) {
+                EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
+                EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
+            }
             EventHandler.remove(document, 'mouseup', this.mouseUpHandler);
         }
         else {
-            EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
-            EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
+            if (this.canvasContext) {
+                EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
+                EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
+            }
             window.removeEventListener('resize', this.resizeHandler);
         }
     };
@@ -191,10 +195,11 @@ var SignatureBase = /** @class */ (function (_super) {
     SignatureBase.prototype.resizeHandler = function () {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
-        if (this.isResponsive && this.canRedraw) {
+        if (this.isResponsive && this.canRedraw && this.canvasContext && this.element) {
             this.canvasContext.canvas.width = this.element.offsetWidth;
             this.canvasContext.canvas.height = this.element.offsetHeight;
             this.canvasContext.scale(1, 1);
+            this.canvasContext.fillStyle = this.strokeColor;
             var pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
             for (var i = 0; i < this.signRatioPointsColl.length; i++) {
                 this.arcDraw((this.signRatioPointsColl[i].x * this.canvasContext.canvas.width), (this.signRatioPointsColl[i].y * this.canvasContext.canvas.height), pointSize);
@@ -203,7 +208,7 @@ var SignatureBase = /** @class */ (function (_super) {
             this.canvasContext.closePath();
             this.canvasContext.fill();
         }
-        else {
+        else if (this.canvasContext && this.element) {
             var restoreImg_1 = new Image();
             restoreImg_1.src = this.snapColl[this.incStep];
             restoreImg_1.onload = function () {
@@ -455,10 +460,12 @@ var SignatureBase = /** @class */ (function (_super) {
         if (this.incStep > 0) {
             var canvasNew = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-wrapper' });
             var canvasContextNew = canvasNew.getContext('2d');
-            canvasNew.width = this.canvasContext.canvas.width;
-            canvasNew.height = this.canvasContext.canvas.height;
-            canvasContextNew.drawImage(this.canvasContext.canvas, 0, 0, canvasNew.width, canvasNew.height);
-            this.snapColl.push(canvasNew.toDataURL());
+            if (this.canvasContext) {
+                canvasNew.width = this.canvasContext.canvas.width;
+                canvasNew.height = this.canvasContext.canvas.height;
+                canvasContextNew.drawImage(this.canvasContext.canvas, 0, 0, canvasNew.width, canvasNew.height);
+                this.snapColl.push(canvasNew.toDataURL());
+            }
         }
         else {
             this.snapColl.push(this.canvasContext.canvas.toDataURL());
@@ -789,7 +796,7 @@ var SignatureBase = /** @class */ (function (_super) {
         }
         else if (type === 'Svg') {
             fileName = fileName || 'Signature';
-            this.toSVG(fileName, this.canvasContext.canvas.toDataURL('image/png'));
+            this.toSVG(fileName);
         }
         else if (type === 'Jpeg') {
             fileName = fileName || 'Signature';
@@ -937,8 +944,12 @@ var SignatureBase = /** @class */ (function (_super) {
             removeClass([this.element], 'e-' + this.getModuleName());
             this.element.removeAttribute('tabindex');
             this.pointColl = null;
+            this.tempContext = null;
+            this.tempCanvas = null;
+            this.canvasContext = null;
         }
         _super.prototype.destroy.call(this);
+        this.element = null;
     };
     /**
      * Modified onPropertyChanged method for both blazor and EJ2 signature component.

package/src/numerictextbox/numerictextbox.js

@@ -780,8 +780,8 @@ var NumericTextBox = /** @class */ (function (_super) {
             var elementValue = this.isFocused ? value : this.instance.getNumberFormat(this.cultureInfo)(this.value);
             this.setElementValue(elementValue);
             attributes(this.element, { 'aria-valuenow': value });
-            this.hiddenInput.value = this.value.toString();
             if (!isNullOrUndefined(this.hiddenInput)) {
+                this.hiddenInput.value = this.value.toString();
                 if (this.value !== null && this.serverDecimalSeparator) {
                     this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);
                 }

package/src/otp-input/otp-input.js

@@ -150,14 +150,14 @@ var OtpInput = /** @class */ (function (_super) {
         var valueContainer = this.getDefaultValue();
         var inputValue = '';
         if (valueContainer) {
+            var valueAtIndex = valueContainer[parseInt(index.toString(), 10)];
             if (this.type === 'number') {
-                var valueAtIndex = valueContainer[parseInt(index.toString(), 10)];
                 if (!isNaN(Number(valueAtIndex))) {
                     inputValue = valueAtIndex;
                 }
             }
             else {
-                inputValue = valueContainer[parseInt(index.toString(), 10)] || '';
+                inputValue = valueAtIndex || '';
             }
         }
         var inputEle = this.createElement('input', {
@@ -166,7 +166,7 @@ var OtpInput = /** @class */ (function (_super) {
             attrs: {
                 maxlength: '1',
                 type: this.type,
-                inputmode: 'inputmode' in this.htmlAttributes ? this.htmlAttributes['inputmode'] : (this.type === 'number' ? 'numeric' : 'text')
+                inputmode: this.htmlAttributes['inputmode'] || (this.type === 'number' ? 'numeric' : 'text')
             }
         });
         if (this.disabled) {
@@ -192,27 +192,28 @@ var OtpInput = /** @class */ (function (_super) {
         }
     };
     OtpInput.prototype.updateSeparatorValue = function () {
+        var _this = this;
         if (this.separator === '') {
-            for (var i = 0; i < this.separatorElements.length; i++) {
-                remove(this.separatorElements[parseInt(i.toString(), 10)]);
-            }
+            this.separatorElements.forEach(function (element) { return remove(element); });
             this.separatorElements = [];
-            return;
         }
-        for (var i = 0; i < this.separatorElements.length; i++) {
-            this.separatorElements[parseInt(i.toString(), 10)].textContent = this.separator;
+        else {
+            this.separatorElements.forEach(function (element) {
+                element.textContent = _this.separator;
+            });
         }
     };
     OtpInput.prototype.addPlaceHolder = function () {
         for (var i = 0; i < this.inputs.length; i++) {
-            this.setElementAttributes({ 'placeholder': this.placeholder.length === 1 || this.placeholder.length === 0 ? this.placeholder : this.placeholder.charAt(i) }, this.inputs[parseInt(i.toString(), 10)]);
+            var placeholderValue = this.placeholder.length <= 1 ? this.placeholder : this.placeholder.charAt(i);
+            this.setElementAttributes({ 'placeholder': placeholderValue }, this.inputs[parseInt(i.toString(), 10)]);
         }
     };
     OtpInput.prototype.updateInputType = function (inputType) {
-        var _this = this;
+        var inputMode = this.htmlAttributes['inputmode'] || (inputType === 'number' ? 'numeric' : 'text');
         this.inputs.forEach(function (input) {
             input.type = inputType;
-            input.setAttribute('inputmode', 'inputmode' in _this.htmlAttributes ? _this.htmlAttributes['inputmode'] : (inputType === 'number' ? 'numeric' : 'text'));
+            input.setAttribute('inputmode', inputMode);
         });
     };
     OtpInput.prototype.getDefaultValue = function () {
@@ -222,10 +223,7 @@ var OtpInput = /** @class */ (function (_super) {
         }
         // To remove the white space if present.
         var value = extractedValue.replace(/\s/g, '');
-        if (value.length > 0) {
-            return value.split('');
-        }
-        return undefined;
+        return value.length > 0 ? value.split('') : undefined;
     };
     OtpInput.prototype.getTransformedText = function (transformingText) {
         var transformedText = this.textTransform.toLowerCase() === TextTransform.Lowercase ? transformingText.toLowerCase() :
@@ -266,12 +264,10 @@ var OtpInput = /** @class */ (function (_super) {
                 value = currentInputElement.value;
                 currentInputElement.value = '';
             }
-            else {
-                if (index !== this.inputs.length - 1) {
-                    value = nextInputElement.value;
-                    nextInputElement.value = '';
-                    nextInputElement.focus();
-                }
+            else if (index !== this.inputs.length - 1) {
+                value = nextInputElement.value;
+                nextInputElement.value = '';
+                nextInputElement.focus();
             }
             if (value.length > 0) {
                 this.triggerInputEvent(index, event);
@@ -288,28 +284,22 @@ var OtpInput = /** @class */ (function (_super) {
             }
         }
         else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
-            if (event.key === 'ArrowLeft') {
-                if (index > 0) {
-                    previousInputElement.focus();
-                    previousInputElement.select();
-                }
+            if (event.key === 'ArrowLeft' && index > 0) {
+                previousInputElement.focus();
+                previousInputElement.select();
             }
-            else {
-                if (index < this.inputs.length - 1) {
-                    nextInputElement.focus();
-                    nextInputElement.select();
-                }
+            else if (event.key === 'ArrowRight' && index < this.inputs.length - 1) {
+                nextInputElement.focus();
+                nextInputElement.select();
             }
             event.preventDefault();
         }
         else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
             event.preventDefault();
         }
-        else {
-            if (event.key !== 'Tab' && !event.shiftKey && !event.ctrlKey) {
-                if (this.type === 'number' && (/\D/.test(event.key.toLocaleLowerCase()))) {
-                    event.preventDefault();
-                }
+        else if (event.key !== 'Tab' && !event.shiftKey && !event.ctrlKey) {
+            if (this.type === 'number' && (/\D/.test(event.key.toLocaleLowerCase()))) {
+                event.preventDefault();
             }
         }
     };
@@ -428,9 +418,9 @@ var OtpInput = /** @class */ (function (_super) {
         if (this.textTransform) {
             stringifiedValue = this.getTransformedText(stringifiedValue);
         }
+        var previousStringValue = previousValue.toString();
         for (var i = 0; i < this.inputs.length; i++) {
-            var isValueChanged = previousValue.toString().charAt(i) !== stringifiedValue.charAt(i);
-            if (isValueChanged) {
+            if (previousStringValue.charAt(i) !== stringifiedValue.charAt(i)) {
                 this.inputs[parseInt(i.toString(), 10)].value = stringifiedValue.charAt(i);
                 this.hiddenInputEle.value = stringifiedValue;
             }
@@ -451,10 +441,10 @@ var OtpInput = /** @class */ (function (_super) {
         }
     };
     OtpInput.prototype.updateVariantClass = function () {
-        var variantClass = this.stylingMode.toLocaleLowerCase();
-        variantClass = variantClass === 'outlined' ? 'outline' : variantClass;
-        if (variantClass === 'underlined' || variantClass === 'filled' || variantClass === 'outline') {
-            removeClass([this.element], ['e-underlined', 'e-filled', 'e-outline']);
+        var variantClass = this.stylingMode.toLocaleLowerCase() === 'outlined' ? 'outline' : this.stylingMode.toLocaleLowerCase();
+        var validClasses = ['underlined', 'filled', 'outline'];
+        if (validClasses.indexOf(variantClass) !== -1) {
+            removeClass([this.element], validClasses.map(function (cls) { return "e-" + cls; }));
             addClass([this.element], "e-" + variantClass);
         }
     };
@@ -556,12 +546,8 @@ var OtpInput = /** @class */ (function (_super) {
     OtpInput.prototype.destroy = function () {
         _super.prototype.destroy.call(this);
         this.unWireEvents();
-        for (var i = 0; i < this.inputs.length; i++) {
-            remove(this.inputs[parseInt(i.toString(), 10)]);
-        }
-        for (var i = 0; i < this.separatorElements.length; i++) {
-            remove(this.separatorElements[parseInt(i.toString(), 10)]);
-        }
+        this.inputs.forEach(function (input) { remove(input); });
+        this.separatorElements.forEach(function (separatorElement) { remove(separatorElement); });
         remove(this.hiddenInputEle);
         removeClass([this.element], ['e-underlined', 'e-filled', 'e-outline', 'e-rtl']);
         if (this.cssClass) {

package/src/slider/slider.d.ts

@@ -330,6 +330,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     private isBootstrap;
     private isBootstrap4;
     private isTailwind;
+    private isTailwind3;
     private isBootstrap5;
     private isFluent;
     private isFluent2;

package/src/slider/slider.js

@@ -445,6 +445,7 @@ var Slider = /** @class */ (function (_super) {
             || this.getTheme(this.sliderContainer) === 'bootstrap-dark';
         this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';
         this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';
+        this.isTailwind3 = this.getTheme(this.sliderContainer) === 'tailwind3' || this.getTheme(this.sliderContainer) === 'tailwind3-dark';
         this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';
         this.isFluent = this.getTheme(this.sliderContainer) === 'FluentUI';
         this.isFluent2 = this.getTheme(this.sliderContainer) === 'fluent2';
@@ -964,8 +965,8 @@ var Slider = /** @class */ (function (_super) {
     };
     Slider.prototype.renderTooltip = function () {
         this.tooltipObj = new Tooltip({
-            showTipPointer: this.isBootstrap || this.isMaterial || this.isMaterial3 ||
-                this.isBootstrap4 || this.isTailwind || this.isBootstrap5 || this.isFluent || this.isFluent2 || this.isBootstrap5Dot3,
+            showTipPointer: this.isBootstrap || this.isMaterial || this.isMaterial3 || this.isBootstrap4 || this.isTailwind
+                || this.isTailwind3 || this.isBootstrap5 || this.isFluent || this.isFluent2 || this.isBootstrap5Dot3,
             cssClass: classNames.sliderTooltip,
             height: (this.isMaterial || this.isMaterial3) ? 30 : 'auto',
             animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },
@@ -1002,13 +1003,13 @@ var Slider = /** @class */ (function (_super) {
     Slider.prototype.setButtons = function () {
         this.firstBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.firstButton });
         this.firstBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));
-        if (this.isTailwind) {
+        if (this.isTailwind || this.isTailwind3) {
             this.firstBtn.querySelector('span').classList.add('e-icons');
         }
         this.firstBtn.tabIndex = -1;
         this.secondBtn = this.createElement('div', { className: classNames.sliderButton + ' ' + classNames.secondButton });
         this.secondBtn.appendChild(this.createElement('span', { className: classNames.sliderButtonIcon }));
-        if (this.isTailwind) {
+        if (this.isTailwind || this.isTailwind3) {
             this.secondBtn.querySelector('span').classList.add('e-icons');
         }
         this.secondBtn.tabIndex = -1;

package/src/uploader/uploader.js

@@ -921,7 +921,7 @@ var Uploader = /** @class */ (function (_super) {
         }
         for (var file = 0; file < item.length; file++) {
             var pasteFile = [].slice.call(item)[file];
-            if ((pasteFile.kind === 'file') || pasteFile.type.match('^image/')) {
+            if (!isNullOrUndefined(pasteFile.getAsFile()) && ((pasteFile.kind === 'file') || pasteFile.type.match('^image/'))) {
                 this.renderSelectedFiles(event, [pasteFile.getAsFile()], false, true);
             }
         }