@syncfusion/ej2-inputs 20.4.48 → 20.4.52

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

@@ -424,8 +424,8 @@ var Input;
      * @param {any} element - Input element which is need to add.
      * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
      */
-    function calculateWidth(element, container) {
-        let elementWidth = element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'));
+    function calculateWidth(element, container, moduleName) {
+        let elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'));
         if (!isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
             if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
                 container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');
@@ -2910,7 +2910,7 @@ function removeMaskInputValues(event) {
 function maskInputKeyPressHandler(event) {
     if (this.mask && !this.readonly) {
         const oldValue = this.element.value;
-        if ((!event.ctrlKey) || (event.ctrlKey && event.code !== 'KeyA' && event.code !== 'KeyY'
+        if (!(event.ctrlKey || event.metaKey) || ((event.ctrlKey || event.metaKey) && event.code !== 'KeyA' && event.code !== 'KeyY'
             && event.code !== 'KeyZ' && event.code !== 'KeyX' && event.code !== 'KeyC' && event.code !== 'KeyV')) {
             this.maskKeyPress = true;
             let key = event.key;
@@ -7903,7 +7903,12 @@ let Uploader = class Uploader extends Component {
             const inputElement = this.createElement('input', { attrs: { type: 'file' } });
             let index = 0;
             for (index; index < this.element.attributes.length; index++) {
-                inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
+                if (this.element.attributes[index].nodeName !== 'id') {
+                    inputElement.setAttribute(this.element.attributes[index].nodeName, this.element.attributes[index].nodeValue);
+                }
+                else if (this.element.attributes[index].nodeName === 'id') {
+                    inputElement.setAttribute(this.element.attributes[index].nodeName, getUniqueID('uploader'));
+                }
                 inputElement.innerHTML = this.element.innerHTML;
             }
             if (!inputElement.hasAttribute('name')) {
@@ -9725,7 +9730,7 @@ let Uploader = class Uploader extends Component {
         for (let selectFileIndex = 0; selectFileIndex < selectedFiles.length; selectFileIndex++) {
             const selectedFileData = selectedFiles[selectFileIndex];
             for (let fileDataIndex = 0; fileDataIndex < this.filesData.length; fileDataIndex++) {
-                if (this.filesData[fileDataIndex].name === selectedFileData.name) {
+                if (this.filesData[fileDataIndex].name === selectedFileData.name && this.filesData[fileDataIndex].status === selectedFileData.status) {
                     matchFiles[matchFilesIndex] = this.filesData[fileDataIndex];
                     ++matchFilesIndex;
                 }
@@ -13627,7 +13632,8 @@ class SignatureBase extends Component {
         this.clearArray = [];
         this.isBlazor = false;
         this.isResponsive = false;
-        this.imageEditorPointsColl = [];
+        this.signPointsColl = [];
+        this.signRatioPointsColl = [];
     }
     /**
      * To Initialize the component rendering
@@ -13698,17 +13704,12 @@ class SignatureBase extends Component {
         }
     }
     // eslint-disable-next-line
-    mouseDownHandler(e, canvas, panStart, zoomState) {
+    mouseDownHandler(e) {
         if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {
             if (e.type === 'touchstart') {
                 e.preventDefault();
                 e.stopPropagation();
             }
-            if (canvas) {
-                this.canvasContext = canvas.getContext('2d');
-                this.scale = zoomState;
-                this.panStart = panStart;
-            }
             this.beginStroke(e);
             this.wireEvents();
         }
@@ -13743,6 +13744,11 @@ class SignatureBase extends Component {
             this.dotnetRef.invokeMethodAsync('TriggerEventAsync', 'mouseUp');
         }
         this.signatureValue = this.snapColl[this.incStep];
+        for (let i = 0; i < this.signPointsColl.length; i++) {
+            this.signRatioPointsColl.push({ x: (this.signPointsColl[i].x / this.canvasContext.canvas.width),
+                y: (this.signPointsColl[i].y / this.canvasContext.canvas.height) });
+        }
+        this.signPointsColl = [];
     }
     keyboardHandler(e) {
         const args = { fileName: 'Signature', type: 'Png', cancel: false };
@@ -13779,13 +13785,23 @@ class SignatureBase extends Component {
             this.canvasContext.canvas.width = this.element.offsetWidth;
             this.canvasContext.canvas.height = this.element.offsetHeight;
             this.canvasContext.scale(1, 1);
+            this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+            const pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
+            for (let 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);
+            }
+            this.signPointsColl = [];
+            this.canvasContext.closePath();
+            this.canvasContext.fill();
+        }
+        else {
+            const restoreImg = new Image();
+            restoreImg.src = this.snapColl[this.incStep];
+            restoreImg.onload = () => {
+                proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);
+                proxy.canvasContext.drawImage(restoreImg, 0, 0, proxy.element.width, proxy.element.height);
+            };
         }
-        const restoreImg = new Image();
-        restoreImg.src = this.snapColl[this.incStep];
-        restoreImg.onload = () => {
-            proxy.canvasContext.clearRect(0, 0, proxy.element.width, proxy.element.height);
-            proxy.canvasContext.drawImage(restoreImg, 0, 0, proxy.element.width, proxy.element.height);
-        };
     }
     beginStroke(e) {
         this.refresh();
@@ -13825,34 +13841,10 @@ class SignatureBase extends Component {
     createPoint(e) {
         const rect = this.canvasContext.canvas.getBoundingClientRect();
         if (e.type === 'mousedown' || e.type === 'mousemove') {
-            // signature
-            if (this.canvasRatio === undefined) {
-                return this.point(e.clientX - rect.left, e.clientY - rect.top, new Date().getTime());
-            }
-            // image editor
-            else if (this.scale === 1) {
-                return this.point(((e.clientX - rect.left) * this.canvasRatio.width) / this.scale, ((e.clientY - rect.top) * this.canvasRatio.height) / this.scale, new Date().getTime());
-            }
-            else {
-                return this.point((((e.clientX - rect.left) + ((this.panStart.startX) / this.canvasRatio.width
-                    * this.scale)) / this.scale) * this.canvasRatio.width, (((e.clientY - rect.top) + ((this.panStart.startY) / this.canvasRatio.height
-                    * this.scale)) / this.scale) * this.canvasRatio.height, new Date().getTime());
-            }
+            return this.point(e.clientX - rect.left, e.clientY - rect.top, new Date().getTime());
         }
         else {
-            // signature
-            if (this.canvasRatio === undefined) {
-                return this.point(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, new Date().getTime());
-            }
-            // image editor
-            else if (this.scale === 1) {
-                return this.point(((e.touches[0].clientX - rect.left) * this.canvasRatio.width) / this.scale, ((e.touches[0].clientY - rect.top) * this.canvasRatio.height) / this.scale, new Date().getTime());
-            }
-            else {
-                return this.point((e.touches[0].clientX - rect.left) + this.panStart.startX / (this.canvasRatio.width
-                    * this.scale), (e.touches[0].clientY - rect.top) + this.panStart.startY / (this.canvasRatio.height
-                    * this.scale), new Date().getTime());
-            }
+            return this.point(e.touches[0].clientX - rect.left, e.touches[0].clientY - rect.top, new Date().getTime());
         }
     }
     /* Returns the current point corrdinates(x, y) and time.*/
@@ -13870,7 +13862,6 @@ class SignatureBase extends Component {
         const isLastPointTooClose = lastPoint ? this.distanceTo(lastPoint) <= this.minDistance : false;
         if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
             points.push(point);
-            this.imageEditorPointsColl.push(point);
             if (points.length > 2) {
                 if (points.length === 3) {
                     points.unshift(points[0]);
@@ -13951,6 +13942,7 @@ class SignatureBase extends Component {
         this.isSignatureEmpty = false;
     }
     arcDraw(x, y, size) {
+        this.signPointsColl.push({ x: x, y: y });
         const context = this.canvasContext;
         context.moveTo(x, y);
         context.arc(x, y, size, 0, 2 * Math.PI, false);
@@ -14151,6 +14143,7 @@ class SignatureBase extends Component {
         const args = { actionName: 'clear' };
         this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
         this.refresh();
+        this.signRatioPointsColl = [];
         this.updateSnapCollection(true);
         this.isSignatureEmpty = true;
         if (!this.isBlazor) {