@syncfusion/ej2-inputs 19.4.52 → 20.1.55

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

@@ -4173,6 +4173,7 @@ let Slider = class Slider extends Component {
         this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';
         this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';
         this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';
+        this.isFluent = this.getTheme(this.sliderContainer) === 'FluentUI';
         this.isMaterialTooltip = this.isMaterial && this.type !== 'Range' && this.tooltip.isVisible;
     }
     createRangeBar() {
@@ -4320,7 +4321,9 @@ let Slider = class Slider extends Component {
     transitionEnd(e) {
         if (e.propertyName !== 'transform') {
             this.handleStart();
-            this.getHandle().style.transition = 'none';
+            if (!this.enableAnimation) {
+                this.getHandle().style.transition = 'none';
+            }
             if (this.type !== 'Default') {
                 this.rangeBar.style.transition = 'none';
             }
@@ -4661,7 +4664,7 @@ let Slider = class Slider extends Component {
     }
     renderTooltip() {
         this.tooltipObj = new Tooltip({
-            showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5,
+            showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5 || this.isFluent,
             cssClass: classNames.sliderTooltip,
             height: this.isMaterial ? 30 : 'auto',
             animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },
@@ -9008,15 +9011,17 @@ let Uploader = class Uploader extends Component {
         fileList.classList.add(INVALID_FILE);
     }
     createFormInput(fileData) {
-        const inputElement = this.element.cloneNode(true);
-        inputElement.classList.add(HIDDEN_INPUT);
-        for (const listItem of fileData) {
-            listItem.input = inputElement;
-        }
-        inputElement.setAttribute('name', this.uploaderName);
-        this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).appendChild(inputElement);
-        if (this.browserName !== 'msie' && this.browserName !== 'edge') {
-            this.element.value = '';
+        if (this.browserName !== 'safari') {
+            const inputElement = this.element.cloneNode(true);
+            inputElement.classList.add(HIDDEN_INPUT);
+            for (const listItem of fileData) {
+                listItem.input = inputElement;
+            }
+            inputElement.setAttribute('name', this.uploaderName);
+            this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).appendChild(inputElement);
+            if (this.browserName !== 'msie' && this.browserName !== 'edge') {
+                this.element.value = '';
+            }
         }
     }
     getFileSize(fileData) {
@@ -9403,7 +9408,7 @@ let Uploader = class Uploader extends Component {
     }
     removecanceledFile(e, file) {
         const liElement = this.getLiElement(file);
-        if (liElement.querySelector('.' + RETRY_ICON) || isNullOrUndefined(liElement.querySelector('.' + ABORT_ICON))) {
+        if (isNullOrUndefined(liElement) || liElement.querySelector('.' + RETRY_ICON) || isNullOrUndefined(liElement.querySelector('.' + ABORT_ICON))) {
             return;
         }
         this.updateStatus(file, this.localizedTexts('fileUploadCancel'), '5');
@@ -9636,6 +9641,9 @@ let Uploader = class Uploader extends Component {
                 if (selectAll(uploadTemplate, document).length) {
                     return compile(select(uploadTemplate, document).innerHTML.trim());
                 }
+                else {
+                    return compile(uploadTemplate);
+                }
             }
             catch (exception) {
                 return compile(uploadTemplate);
@@ -11170,7 +11178,7 @@ let ColorPicker = class ColorPicker extends Component {
             }
             roundedColor = this.roundValue(colors[i]).toLowerCase();
             tile = this.createElement('span', {
-                className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false' }
+                className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false', 'tabindex': '0' }
             });
             this.trigger('beforeTileRender', { element: tile, presetName: key, value: colors[i] });
             row.appendChild(tile);
@@ -12894,6 +12902,9 @@ let TextBox = class TextBox extends Component {
         }
         this.updateHTMLAttrToElement();
         this.checkAttributes(false);
+        if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) && this.element.value !== '') {
+            this.setProperties({ value: this.element.value }, true);
+        }
         if (this.element.tagName !== 'TEXTAREA') {
             this.element.setAttribute('type', this.type);
         }
@@ -13188,6 +13199,10 @@ let TextBox = class TextBox extends Component {
         this.preventChange = false;
         this.trigger('change', eventArgs);
         this.previousValue = this.value;
+        //EJ2CORE-738:For this task we update the textarea value to the input when input tag with multiline is present
+        if (this.element.tagName === 'INPUT' && this.multiline && Browser.info.name === 'mozilla') {
+            this.element.value = this.respectiveElement.value;
+        }
     }
     bindClearEvent() {
         if (this.showClearButton && this.respectiveElement.tagName !== 'TEXTAREA') {
@@ -13442,53 +13457,36 @@ class SignatureBase extends Component {
         this.backgroundLoaded = null;
         this.clearArray = [];
         this.isBlazor = false;
+        this.isResponsive = false;
     }
     /**
      * To Initialize the component rendering
      *
      * @private
      * @param {HTMLCanvasElement} element - Specifies the canvas element.
-     * @param {parameter} parameter - Specifies only for the blazor parameter.
      * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
      * @returns {void}
      */
-    initialize(element, parameter, dotnetRef) {
+    initialize(element, dotnetRef) {
         this.element = element;
         this.canvasContext = this.element.getContext('2d');
         this.canvasContext.canvas.tabIndex = 0;
-        if (parameter) {
-            this.setBlazorParameter(parameter);
+        if (dotnetRef) {
             this.dotnetRef = dotnetRef;
+            this.isBlazor = true;
+            if (this.signatureValue) {
+                this.loadPersistedSignature();
+            }
         }
         this.setHTMLProperties();
         if (isNullOrUndefined(this.signatureValue)) {
             this.updateSnapCollection(true);
         }
         this.wireEvents();
-        this.isSignatureEmpty = true;
         if (!this.isBlazor) {
             this.trigger('created', null);
         }
     }
-    setBlazorParameter(parameter) {
-        this.isBlazor = true;
-        this.backgroundColor = parameter.backgroundColor;
-        this.backgroundImage = parameter.backgroundImage;
-        this.disabled = parameter.disabled;
-        this.isReadOnly = parameter.isReadOnly;
-        this.maxStrokeWidth = parameter.maxStrokeWidth || 2;
-        this.minStrokeWidth = parameter.minStrokeWidth || 0.5;
-        this.velocity = parameter.velocity || 0.7;
-        this.strokeColor = parameter.strokeColor || '#000000';
-        this.saveWithBackground = parameter.saveWithBackground;
-        this.interval = 30;
-        this.previous = 0;
-        this.minDistance = 5;
-        this.signatureValue = parameter.signatureValue;
-        if (this.signatureValue) {
-            this.loadPersistedSignature();
-        }
-    }
     wireEvents() {
         if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {
             EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
@@ -13509,24 +13507,21 @@ class SignatureBase extends Component {
         }
         else {
             EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
-            EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
-            EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
-            EventHandler.remove(document, 'mouseup', this.mouseUpHandler);
             EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
             window.removeEventListener('resize', this.resizeHandler);
         }
     }
     setHTMLProperties() {
-        if (this.element.height === 150) {
+        if (this.element.height === 150 && this.element.width === 300) {
             this.element.height = this.element.offsetHeight;
-        }
-        if (this.element.width === 300) {
             this.element.width = this.element.offsetWidth;
+            this.isResponsive = true;
         }
         this.canvasContext.scale(1, 1);
         this.canvasContext.fillStyle = this.strokeColor;
         if (this.backgroundImage) {
             this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
+            this.canvasContext.canvas.style.backgroundRepeat = "no-repeat";
         }
         else if (this.backgroundColor) {
             this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
@@ -13604,9 +13599,11 @@ class SignatureBase extends Component {
     resizeHandler() {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         const proxy = this;
-        this.canvasContext.canvas.width = this.element.offsetWidth;
-        this.canvasContext.canvas.height = this.element.offsetHeight;
-        this.canvasContext.scale(1, 1);
+        if (this.isResponsive) {
+            this.canvasContext.canvas.width = this.element.offsetWidth;
+            this.canvasContext.canvas.height = this.element.offsetHeight;
+            this.canvasContext.scale(1, 1);
+        }
         const restoreImg = new Image();
         restoreImg.src = this.snapColl[this.incStep];
         restoreImg.onload = () => {
@@ -14094,6 +14091,9 @@ class SignatureBase extends Component {
         const proxy = this;
         const bitmapImage = new Image();
         bitmapImage.src = signature;
+        if (signature.slice(0, 4) !== 'data') {
+            bitmapImage.crossOrigin = 'anonymous';
+        }
         bitmapImage.onload = () => {
             Promise.all([
                 createImageBitmap(bitmapImage, 0, 0, width, height)
@@ -14102,6 +14102,9 @@ class SignatureBase extends Component {
                 tempCanvas.width = width;
                 tempCanvas.height = height;
                 tempCanvas.getContext('2d').drawImage(results[0], 0, 0);
+                if (signature.slice(0, 4) !== 'data') {
+                    proxy.canvasContext.globalCompositeOperation = 'source-over';
+                }
                 proxy.canvasContext.drawImage(tempCanvas, 0, 0, width, height, 0, 0, proxy.element.width, proxy.element.height);
                 proxy.updateSnapCollection();
             });