@syncfusion/ej2-inputs 22.2.12 → 23.1.38

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

@@ -1,5 +1,5 @@
 import { Ajax, Animation, Base, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getInstance, getNumericObject, getUniqueID, getValue, initializeCSPTemplate, isNullOrUndefined, merge, onIntlChange, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
-import { Popup, Tooltip, createSpinner, getZindexPartial, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
+import { Popup, Tooltip, createSpinner, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
 import { Deferred, SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';
 
 /* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */
@@ -7168,7 +7168,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
             input.removeAttribute('aria-invalid');
             const inputParent = input.parentElement;
             const grandParent = inputParent.parentElement;
-            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                 inputParent.classList.remove(this.errorClass);
             }
             else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
@@ -7182,7 +7182,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
                 this.getErrorElement(input.name);
                 this.hideMessage(input.name);
             }
-            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                 inputParent.classList.remove(this.validClass);
             }
             else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
@@ -7435,7 +7435,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
                     this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');
                     const inputParent = this.inputElement.parentElement;
                     const grandParent = inputParent.parentElement;
-                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                         inputParent.classList.add(this.errorClass);
                         inputParent.classList.remove(this.validClass);
                     }
@@ -7455,7 +7455,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
                     }
                     eventArgs.errorElement = this.infoElement;
                     eventArgs.status = 'failure';
-                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                         inputParent.classList.add(this.errorClass);
                         inputParent.classList.remove(this.validClass);
                     }
@@ -7610,7 +7610,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
             this.removeErrorRules(name);
             const inputParent = this.inputElement.parentElement;
             const grandParent = inputParent.parentElement;
-            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper')) {
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                 inputParent.classList.add(this.validClass);
                 inputParent.classList.remove(this.errorClass);
             }
@@ -8997,6 +8997,7 @@ let Uploader = class Uploader extends Component {
         let fileData = [];
         if (!this.multiple) {
             this.clearData(true);
+            this.actionCompleteCount = 0;
             targetFiles = [targetFiles[0]];
         }
         for (let i = 0; i < targetFiles.length; i++) {
@@ -11402,6 +11403,15 @@ let ColorPicker = class ColorPicker extends Component {
     }
     onOpen() {
         this.trigger('open', { element: this.container });
+        if (!Browser.isDevice) {
+            const popupInst = this.getPopupInst();
+            const collision = isCollide(popupInst.element);
+            if (collision.length > 0) {
+                popupInst.collision = { X: 'flip', Y: 'fit' };
+                popupInst.position = { X: 'right', Y: 'bottom' };
+                popupInst.targetType = 'container';
+            }
+        }
     }
     getPopupInst() {
         return getInstance(this.getPopupEle(), Popup);
@@ -11812,7 +11822,6 @@ let ColorPicker = class ColorPicker extends Component {
         });
         tooltip.createElement = this.createElement;
         tooltip.appendTo(this.container);
-        // eslint-disable-next-line
         tooltip.open(this.container);
         this.tooltipEle.style.zIndex = getZindexPartial(this.tooltipEle).toString();
         select('.e-tip-content', this.tooltipEle).appendChild(this.createElement('div', { className: 'e-tip-transparent' }));
@@ -13909,20 +13918,28 @@ class SignatureBase extends Component {
         }
     }
     setHTMLProperties() {
-        if (this.element.height === 150 && this.element.width === 300) {
+        if (this.element.height === 150 && this.element.width === 300 && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {
             this.element.height = this.element.offsetHeight;
             this.element.width = this.element.offsetWidth;
             this.isResponsive = true;
         }
-        else if (this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1) {
+        else if ((this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1)
+            && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {
             this.element.height = this.element.offsetHeight;
             this.element.width = this.element.offsetWidth;
         }
         this.canvasContext.scale(1, 1);
         this.canvasContext.fillStyle = this.strokeColor;
+        this.tempCanvas = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-temp' });
+        this.tempContext = this.tempCanvas.getContext('2d');
+        this.tempCanvas.width = this.element.width;
+        this.tempCanvas.height = this.element.height;
         if (this.backgroundImage) {
             this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
             this.canvasContext.canvas.style.backgroundRepeat = 'no-repeat';
+            if (this.saveWithBackground) {
+                this.setBackgroundImage(this.backgroundImage, 'temp');
+            }
         }
         else if (this.backgroundColor) {
             this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
@@ -14028,7 +14045,7 @@ class SignatureBase extends Component {
         }
     }
     beginStroke(e) {
-        this.refresh();
+        this.internalRefresh();
         this.updateStroke(e);
     }
     updateStroke(e) {
@@ -14279,19 +14296,27 @@ class SignatureBase extends Component {
             this.clearArray.push(this.incStep);
         }
     }
-    setBackgroundImage(imageSrc) {
+    setBackgroundImage(imageSrc, type) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
         const imageObj = new Image();
         imageObj.crossOrigin = 'anonymous';
         imageObj.src = imageSrc;
-        imageObj.onload = () => {
-            proxy.canvasContext.globalCompositeOperation = 'source-over';
-            proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
-            proxy.updateSnapCollection();
-            proxy.saveBackground(true);
-        };
-        this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        if (type == 'temp') {
+            imageObj.onload = () => {
+                proxy.tempContext.globalCompositeOperation = 'source-over';
+                proxy.tempContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
+            };
+        }
+        else {
+            imageObj.onload = () => {
+                proxy.canvasContext.globalCompositeOperation = 'source-over';
+                proxy.canvasContext.drawImage(imageObj, 0, 0, proxy.element.width, proxy.element.height);
+                proxy.updateSnapCollection();
+                proxy.saveBackground(true);
+            };
+            this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        }
     }
     setBackgroundColor(color) {
         const canvasEle = this.canvasContext;
@@ -14347,16 +14372,21 @@ class SignatureBase extends Component {
         a.click();
         a.parentNode.removeChild(a);
     }
+    internalRefresh() {
+        this.pointColl = [];
+        this.lastVelocity = 0;
+        this.lastWidth = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
+    }
     /**
      * To refresh the signature.
      *
-     * @private
      * @returns {void}.
      */
     refresh() {
-        this.pointColl = [];
-        this.lastVelocity = 0;
-        this.lastWidth = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
+        this.isResponsive = false;
+        this.setHTMLProperties();
+        this.resizeHandler();
+        this.internalRefresh();
     }
     /**
      * Erases all the signature strokes signed by user.
@@ -14366,7 +14396,7 @@ class SignatureBase extends Component {
     clear() {
         const args = { actionName: 'clear' };
         this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
-        this.refresh();
+        this.internalRefresh();
         this.signRatioPointsColl = [];
         this.updateSnapCollection(true);
         this.isSignatureEmpty = true;
@@ -14640,8 +14670,7 @@ class SignatureBase extends Component {
         this.snapColl.pop();
         this.incStep--;
     }
-    toSVG(fileName) {
-        const dataUrl = this.canvasContext.canvas.toDataURL();
+    toSVG(fileName, dataUrl) {
         const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         svg.setAttribute('width', this.canvasContext.canvas.width.toString());
         svg.setAttribute('height', this.canvasContext.canvas.height.toString());
@@ -14682,27 +14711,23 @@ class SignatureBase extends Component {
      * @returns {string}.
      */
     getSignature(type) {
+        if (this.saveWithBackground && this.backgroundColor && !this.backgroundImage) {
+            this.tempContext.fillStyle = this.backgroundColor;
+            this.tempContext.fillRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        }
+        else if (!this.backgroundColor && !this.backgroundImage && type === 'Jpeg') {
+            this.tempContext.fillStyle = "#fff";
+            this.tempContext.fillRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
+        }
+        this.tempContext.drawImage(this.element, 0, 0);
         if (type === 'Jpeg') {
-            const imgData = this.canvasContext.getImageData(0, 0, this.element.width, this.element.height);
-            const data = imgData.data;
-            for (let i = 0; i < data.length; i += 4) {
-                if (data[i + 3] < 255) {
-                    data[i] = 255 - data[i];
-                    data[i + 1] = 255 - data[i + 1];
-                    data[i + 2] = 255 - data[i + 2];
-                    data[i + 3] = 255 - data[i + 3];
-                }
-            }
-            this.canvasContext.putImageData(imgData, 0, 0);
-            const dataURL = this.canvasContext.canvas.toDataURL('image/jpeg');
-            this.resizeHandler();
-            return dataURL;
+            return this.tempCanvas.toDataURL('image/jpeg');
         }
         else if (type === 'Svg') {
-            return this.toSVG(null);
+            return this.toSVG(null, this.tempCanvas.toDataURL('image/png'));
         }
         else {
-            return this.canvasContext.canvas.toDataURL('image/png');
+            return this.tempCanvas.toDataURL('image/png');
         }
     }
     /**
@@ -14757,6 +14782,9 @@ class SignatureBase extends Component {
             case 'backgroundImage':
                 canvasNew.canvas.style.backgroundImage = 'url(' + value + ')';
                 this.backgroundImage = value;
+                if (this.saveWithBackground) {
+                    this.setBackgroundImage(this.backgroundImage, 'temp');
+                }
                 break;
             case 'strokeColor':
                 canvasNew.fillStyle = value;