@syncfusion/ej2-inputs 27.2.4 → 28.1.33

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

@@ -1842,8 +1842,8 @@ let NumericTextBox = class NumericTextBox extends Component {
             const 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);
                 }
@@ -4514,6 +4514,7 @@ let Slider = class Slider extends Component {
             || 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';
@@ -5029,8 +5030,8 @@ let Slider = class Slider extends Component {
     }
     renderTooltip() {
         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 } },
@@ -5067,13 +5068,13 @@ let Slider = class Slider extends Component {
     setButtons() {
         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;
@@ -15476,13 +15477,17 @@ class SignatureBase extends Component {
     }
     unwireEvents(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);
         }
     }
@@ -15591,7 +15596,7 @@ class SignatureBase extends Component {
     resizeHandler() {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const 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);
@@ -15603,7 +15608,7 @@ class SignatureBase extends Component {
             this.canvasContext.closePath();
             this.canvasContext.fill();
         }
-        else {
+        else if (this.canvasContext && this.element) {
             const restoreImg = new Image();
             restoreImg.src = this.snapColl[this.incStep];
             restoreImg.onload = () => {
@@ -15855,10 +15860,12 @@ class SignatureBase extends Component {
         if (this.incStep > 0) {
             const canvasNew = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-wrapper' });
             const 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());
@@ -16189,7 +16196,7 @@ class SignatureBase extends Component {
         }
         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';
@@ -16336,8 +16343,12 @@ class SignatureBase extends Component {
             removeClass([this.element], 'e-' + this.getModuleName());
             this.element.removeAttribute('tabindex');
             this.pointColl = null;
+            this.tempContext = null;
+            this.tempCanvas = null;
+            this.canvasContext = null;
         }
         super.destroy();
+        this.element = null;
     }
     /**
      * Modified onPropertyChanged method for both blazor and EJ2 signature component.
@@ -17512,14 +17523,14 @@ let OtpInput = class OtpInput extends Component {
         const valueContainer = this.getDefaultValue();
         let inputValue = '';
         if (valueContainer) {
+            const valueAtIndex = valueContainer[parseInt(index.toString(), 10)];
             if (this.type === 'number') {
-                const valueAtIndex = valueContainer[parseInt(index.toString(), 10)];
                 if (!isNaN(Number(valueAtIndex))) {
                     inputValue = valueAtIndex;
                 }
             }
             else {
-                inputValue = valueContainer[parseInt(index.toString(), 10)] || '';
+                inputValue = valueAtIndex || '';
             }
         }
         const inputEle = this.createElement('input', {
@@ -17528,7 +17539,7 @@ let OtpInput = class OtpInput extends Component {
             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) {
@@ -17555,25 +17566,26 @@ let OtpInput = class OtpInput extends Component {
     }
     updateSeparatorValue() {
         if (this.separator === '') {
-            for (let i = 0; i < this.separatorElements.length; i++) {
-                remove(this.separatorElements[parseInt(i.toString(), 10)]);
-            }
+            this.separatorElements.forEach((element) => remove(element));
             this.separatorElements = [];
-            return;
         }
-        for (let i = 0; i < this.separatorElements.length; i++) {
-            this.separatorElements[parseInt(i.toString(), 10)].textContent = this.separator;
+        else {
+            this.separatorElements.forEach((element) => {
+                element.textContent = this.separator;
+            });
         }
     }
     addPlaceHolder() {
         for (let 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)]);
+            const placeholderValue = this.placeholder.length <= 1 ? this.placeholder : this.placeholder.charAt(i);
+            this.setElementAttributes({ 'placeholder': placeholderValue }, this.inputs[parseInt(i.toString(), 10)]);
         }
     }
     updateInputType(inputType) {
+        const inputMode = this.htmlAttributes['inputmode'] || (inputType === 'number' ? 'numeric' : 'text');
         this.inputs.forEach((input) => {
             input.type = inputType;
-            input.setAttribute('inputmode', 'inputmode' in this.htmlAttributes ? this.htmlAttributes['inputmode'] : (inputType === 'number' ? 'numeric' : 'text'));
+            input.setAttribute('inputmode', inputMode);
         });
     }
     getDefaultValue() {
@@ -17583,10 +17595,7 @@ let OtpInput = class OtpInput extends Component {
         }
         // To remove the white space if present.
         const value = extractedValue.replace(/\s/g, '');
-        if (value.length > 0) {
-            return value.split('');
-        }
-        return undefined;
+        return value.length > 0 ? value.split('') : undefined;
     }
     getTransformedText(transformingText) {
         const transformedText = this.textTransform.toLowerCase() === TextTransform.Lowercase ? transformingText.toLowerCase() :
@@ -17627,12 +17636,10 @@ let OtpInput = class OtpInput extends Component {
                 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);
@@ -17649,28 +17656,22 @@ let OtpInput = class OtpInput extends Component {
             }
         }
         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();
             }
         }
     }
@@ -17789,9 +17790,9 @@ let OtpInput = class OtpInput extends Component {
         if (this.textTransform) {
             stringifiedValue = this.getTransformedText(stringifiedValue);
         }
+        const previousStringValue = previousValue.toString();
         for (let i = 0; i < this.inputs.length; i++) {
-            const 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;
             }
@@ -17810,10 +17811,10 @@ let OtpInput = class OtpInput extends Component {
         }
     }
     updateVariantClass() {
-        let 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']);
+        const variantClass = this.stylingMode.toLocaleLowerCase() === 'outlined' ? 'outline' : this.stylingMode.toLocaleLowerCase();
+        const validClasses = ['underlined', 'filled', 'outline'];
+        if (validClasses.indexOf(variantClass) !== -1) {
+            removeClass([this.element], validClasses.map((cls) => `e-${cls}`));
             addClass([this.element], `e-${variantClass}`);
         }
     }
@@ -17914,12 +17915,8 @@ let OtpInput = class OtpInput extends Component {
     destroy() {
         super.destroy();
         this.unWireEvents();
-        for (let i = 0; i < this.inputs.length; i++) {
-            remove(this.inputs[parseInt(i.toString(), 10)]);
-        }
-        for (let i = 0; i < this.separatorElements.length; i++) {
-            remove(this.separatorElements[parseInt(i.toString(), 10)]);
-        }
+        this.inputs.forEach((input) => { remove(input); });
+        this.separatorElements.forEach((separatorElement) => { remove(separatorElement); });
         remove(this.hiddenInputEle);
         removeClass([this.element], ['e-underlined', 'e-filled', 'e-outline', 'e-rtl']);
         if (this.cssClass) {