@syncfusion/ej2-inputs 27.2.2 → 28.1.33

package/dist/es6/ej2-inputs.es5.js

@@ -1872,9 +1872,11 @@ var NumericTextBox = /** @__PURE__ @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 (this.value !== null && this.serverDecimalSeparator) {
-                this.hiddenInput.value = this.hiddenInput.value.replace('.', this.serverDecimalSeparator);
+            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);
+                }
             }
         }
         else {
@@ -4612,6 +4614,7 @@ var Slider = /** @__PURE__ @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';
@@ -5131,8 +5134,8 @@ var Slider = /** @__PURE__ @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 } },
@@ -5169,13 +5172,13 @@ var Slider = /** @__PURE__ @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;
@@ -11189,6 +11192,8 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
             };
             this.trigger('beforeUpload', eventArgs, function (eventArgs) {
                 if (!eventArgs.cancel) {
+                    _this.customFormDatas = (eventArgs.customFormData && eventArgs.customFormData.length > 0) ?
+                        eventArgs.customFormData : _this.customFormDatas;
                     _this.uploadFiles(uploadFiles_1, custom);
                 }
             });
@@ -11294,6 +11299,9 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
                 if (eventArgs.cancel) {
                     _this.eventCancelByArgs(e, eventArgs, selectedFiles[i]);
                 }
+                if (_this.customFormDatas && _this.customFormDatas.length > 0) {
+                    _this.updateFormData(formData, _this.customFormDatas);
+                }
                 _this.updateFormData(formData, eventArgs.customFormData);
             });
         };
@@ -15872,13 +15880,17 @@ var SignatureBase = /** @__PURE__ @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);
         }
     };
@@ -15988,7 +16000,7 @@ var SignatureBase = /** @__PURE__ @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);
@@ -16000,7 +16012,7 @@ var SignatureBase = /** @__PURE__ @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 () {
@@ -16252,10 +16264,12 @@ var SignatureBase = /** @__PURE__ @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());
@@ -16586,7 +16600,7 @@ var SignatureBase = /** @__PURE__ @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';
@@ -16734,8 +16748,12 @@ var SignatureBase = /** @__PURE__ @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.
@@ -17968,14 +17986,14 @@ var OtpInput = /** @__PURE__ @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', {
@@ -17984,7 +18002,7 @@ var OtpInput = /** @__PURE__ @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) {
@@ -18010,27 +18028,28 @@ var OtpInput = /** @__PURE__ @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 () {
@@ -18040,10 +18059,7 @@ var OtpInput = /** @__PURE__ @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() :
@@ -18084,12 +18100,10 @@ var OtpInput = /** @__PURE__ @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);
@@ -18106,28 +18120,22 @@ var OtpInput = /** @__PURE__ @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();
             }
         }
     };
@@ -18246,9 +18254,9 @@ var OtpInput = /** @__PURE__ @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;
             }
@@ -18269,10 +18277,10 @@ var OtpInput = /** @__PURE__ @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);
         }
     };
@@ -18374,12 +18382,8 @@ var OtpInput = /** @__PURE__ @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) {