@syncfusion/ej2-inputs 25.1.35 → 25.1.38

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

@@ -88,7 +88,7 @@ var Input;
         if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline') || parent.classList.contains('e-filled')) {
             parent.classList.add('e-input-focus');
         }
-        if (args.floatLabelType === 'Auto') {
+        if (args.floatLabelType !== 'Never') {
             setTimeout(() => {
                 Input.calculateWidth(args.element, parent);
             }, 80);
@@ -99,7 +99,7 @@ var Input;
         if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline') || parent.classList.contains('e-filled')) {
             parent.classList.remove('e-input-focus');
         }
-        if (args.floatLabelType === 'Auto' && args.element.value === '') {
+        if (args.floatLabelType !== 'Never') {
             setTimeout(() => {
                 Input.calculateWidth(args.element, parent);
             }, 80);
@@ -501,7 +501,7 @@ var Input;
      */
     function setValue$$1(value, element, floatLabelType, clearButton) {
         element.value = value;
-        if (floatLabelType === 'Auto' && value === '') {
+        if (floatLabelType !== 'Never') {
             calculateWidth(element, element.parentElement);
         }
         if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {
@@ -3888,7 +3888,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
                     if (this.placeholder && !this.isFocus) {
                         this.setMaskPlaceholder(false, false);
                     }
-                    if (this.value === "") {
+                    if (this.value === "" && oldProp.value != null) {
                         this.element.selectionStart = 0;
                         this.element.selectionEnd = 0;
                     }
@@ -6651,6 +6651,10 @@ let Slider = class Slider extends Component {
         if (args !== 'tooltip') {
             this.updateConfig();
         }
+        if (this.readonly) {
+            this.sliderContainer.classList.remove(classNames.readonly);
+            this.setReadOnly();
+        }
     }
     changeRtl() {
         if (!this.enableRtl && this.type === 'Range') {
@@ -6792,6 +6796,7 @@ let Slider = class Slider extends Component {
                     break;
                 case 'tooltip':
                     if (!isNullOrUndefined(newProp.tooltip) && !isNullOrUndefined(oldProp.tooltip)) {
+                        this.initialTooltip = true;
                         this.setTooltip(prop);
                         if (!this.showButtons) {
                             this.wireEvents();
@@ -11575,9 +11580,10 @@ let ColorPicker = class ColorPicker extends Component {
             createPopupOnClick: this.createPopupOnClick,
             open: this.onOpen.bind(this),
             click: () => {
+                const ev = new MouseEvent('click', { bubbles: true, cancelable: false });
                 this.trigger('change', {
                     currentValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) },
-                    previousValue: { hex: null, rgba: null }, value: this.value
+                    previousValue: { hex: null, rgba: null }, value: this.value, event: ev
                 });
             }
         });
@@ -12073,14 +12079,14 @@ let ColorPicker = class ColorPicker extends Component {
         this.hsv[2] = this.hsv[2] > 100 ? 100 : this.hsv[2];
         this.setHandlerPosition();
     }
-    convertToOtherFormat(isKey = false) {
+    convertToOtherFormat(isKey = false, e) {
         const pValue = this.rgbToHex(this.rgb);
         this.rgb = this.hsvToRgb.apply(this, this.hsv);
         const cValue = this.rgbToHex(this.rgb);
         const rgba = this.convertToRgbString(this.rgb);
         this.updatePreview(rgba);
         this.updateInput(cValue);
-        this.triggerEvent(cValue, pValue, rgba, isKey);
+        this.triggerEvent(cValue, pValue, rgba, isKey, e);
     }
     updateInput(value) {
         const wrapper = this.getWrapper();
@@ -12312,10 +12318,10 @@ let ColorPicker = class ColorPicker extends Component {
             }
         });
     }
-    triggerChangeEvent(value) {
+    triggerChangeEvent(value, e) {
         const hex = value.slice(0, 7);
         this.trigger('change', {
-            currentValue: { hex: hex, rgba: this.convertToRgbString(this.rgb) },
+            currentValue: { hex: hex, rgba: this.convertToRgbString(this.rgb) }, event: e,
             previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) },
             value: this.enableOpacity ? value : hex
         });
@@ -12334,7 +12340,7 @@ let ColorPicker = class ColorPicker extends Component {
             this.hsv[prob] = 0;
         }
         this.updateHsv();
-        this.convertToOtherFormat(true);
+        this.convertToOtherFormat(true, e);
     }
     handlerDown(e) {
         e.preventDefault();
@@ -12351,7 +12357,7 @@ let ColorPicker = class ColorPicker extends Component {
         this.setHsv(this.clientX, this.clientY);
         this.getDragHandler().style.transition = 'left .4s cubic-bezier(.25, .8, .25, 1), top .4s cubic-bezier(.25, .8, .25, 1)';
         this.updateHsv();
-        this.convertToOtherFormat();
+        this.convertToOtherFormat(false, e);
         this.getDragHandler().focus();
         EventHandler.add(document, 'mousemove touchmove', this.handlerMove, this);
         EventHandler.add(document, 'mouseup touchend', this.handlerEnd, this);
@@ -12373,7 +12379,7 @@ let ColorPicker = class ColorPicker extends Component {
         this.setHsv(x, y);
         const dragHandler = this.getDragHandler();
         this.updateHsv();
-        this.convertToOtherFormat();
+        this.convertToOtherFormat(false, e);
         this.getTooltipInst().refresh(dragHandler);
         if (!this.tooltipEle.style.transform) {
             if (Math.abs(this.clientX - x) > 8 || Math.abs(this.clientY - y) > 8) {
@@ -12517,7 +12523,7 @@ let ColorPicker = class ColorPicker extends Component {
         this.setHandlerPosition();
         this.updateInput(cValue);
         select('.' + PREVIEW + ' .' + CURRENT, this.container).style.backgroundColor = this.convertToRgbString(this.rgb);
-        this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb));
+        this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb), false, e);
     }
     paletteClickHandler(e) {
         e.preventDefault();
@@ -12536,7 +12542,7 @@ let ColorPicker = class ColorPicker extends Component {
                 if (this.getWrapper().classList.contains(SHOWVALUE)) {
                     this.updateInput(cValue);
                 }
-                this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb));
+                this.triggerEvent(cValue, pValue, this.convertToRgbString(this.rgb), false, e);
             }
             if (!this.inline && !this.showButtons) {
                 this.closePopup(e);
@@ -12594,7 +12600,7 @@ let ColorPicker = class ColorPicker extends Component {
     ctrlBtnClick(ele, e) {
         if (ele.classList.contains(APPLY)) {
             const cValue = this.rgbToHex(this.rgb);
-            this.triggerChangeEvent(cValue);
+            this.triggerChangeEvent(cValue, e);
         }
         if (!this.inline) {
             this.closePopup(e);
@@ -12702,7 +12708,7 @@ let ColorPicker = class ColorPicker extends Component {
                 if (value.length === 9) {
                     pValue = this.rgbToHex(this.rgb);
                     this.rgb = this.hexToRgb(value + value.substr(-2));
-                    this.inputValueChange(this.rgbToHsv.apply(this, this.rgb), pValue, target.value);
+                    this.inputValueChange(this.rgbToHsv.apply(this, this.rgb), pValue, target.value, e);
                 }
                 else {
                     return;
@@ -12714,7 +12720,7 @@ let ColorPicker = class ColorPicker extends Component {
                     pValue = this.rgbToHex(this.rgb);
                     this.rgb[0] = Number(target.value);
                     hsv = this.rgbToHsv.apply(this, this.rgb);
-                    this.inputValueChange(hsv, pValue);
+                    this.inputValueChange(hsv, pValue, null, e);
                 }
                 break;
             case 'G':
@@ -12722,7 +12728,7 @@ let ColorPicker = class ColorPicker extends Component {
                     pValue = this.rgbToHex(this.rgb);
                     this.rgb[1] = Number(target.value);
                     hsv = this.rgbToHsv.apply(this, this.rgb);
-                    this.inputValueChange(hsv, pValue);
+                    this.inputValueChange(hsv, pValue, null, e);
                 }
                 break;
             case 'B':
@@ -12730,7 +12736,7 @@ let ColorPicker = class ColorPicker extends Component {
                     pValue = this.rgbToHex(this.rgb);
                     this.rgb[2] = Number(target.value);
                     hsv = this.rgbToHsv.apply(this, this.rgb);
-                    this.inputValueChange(hsv, pValue);
+                    this.inputValueChange(hsv, pValue, null, e);
                 }
                 break;
             case 'H':
@@ -12740,14 +12746,14 @@ let ColorPicker = class ColorPicker extends Component {
                 if (this.hsv[1] !== Number(target.value)) {
                     this.hsv[1] = Number(target.value);
                     this.updateHsv();
-                    this.convertToOtherFormat();
+                    this.convertToOtherFormat(false, e);
                 }
                 break;
             case 'V':
                 if (this.hsv[2] !== Number(target.value)) {
                     this.hsv[2] = Number(target.value);
                     this.updateHsv();
-                    this.convertToOtherFormat();
+                    this.convertToOtherFormat(false, e);
                 }
                 break;
             case 'A':
@@ -12755,7 +12761,7 @@ let ColorPicker = class ColorPicker extends Component {
                 break;
         }
     }
-    inputValueChange(hsv, pValue, value) {
+    inputValueChange(hsv, pValue, value, e) {
         if (hsv[0] !== this.hsv[0]) {
             this.hueSlider.setProperties({ 'value': hsv[0] }, true);
             this.hueSlider.refresh();
@@ -12767,12 +12773,15 @@ let ColorPicker = class ColorPicker extends Component {
         this.updateInput(value ? value : cValue);
         const rgba = this.convertToRgbString(this.rgb);
         this.updatePreview(rgba);
-        this.triggerEvent(cValue, pValue, rgba);
+        this.triggerEvent(cValue, pValue, rgba, false, e);
     }
-    triggerEvent(cValue, pValue, rgba, isKey = false) {
+    triggerEvent(cValue, pValue, rgba, isKey = false, e) {
         const hex = cValue.slice(0, 7);
+        if (isNullOrUndefined(e)) {
+            e = new MouseEvent('click', { bubbles: true, cancelable: false });
+        }
         if (!this.showButtons && !isKey) {
-            this.trigger('change', { currentValue: { hex: hex, rgba: rgba },
+            this.trigger('change', { currentValue: { hex: hex, rgba: rgba }, event: e,
                 previousValue: { hex: this.value.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(this.value)) }, value: cValue });
             if (this.enableOpacity) {
                 this.setProperties({ 'value': cValue }, true);
@@ -12784,7 +12793,7 @@ let ColorPicker = class ColorPicker extends Component {
         }
         else {
             this.trigger('select', {
-                currentValue: { hex: hex, rgba: rgba },
+                currentValue: { hex: hex, rgba: rgba }, event: e,
                 previousValue: { hex: pValue.slice(0, 7), rgba: this.convertToRgbString(this.hexToRgb(pValue)) }
             });
         }
@@ -15012,6 +15021,10 @@ class SignatureBase extends Component {
         this.lastWidth = newWidth;
     }
     endDraw() {
+        if (isNullOrUndefined(this.pointColl)) {
+            return;
+        }
+        
         const canDrawCurve = this.pointColl.length > 2;
         const point = this.pointColl[0];
         if (!canDrawCurve && point) {
@@ -15281,7 +15294,7 @@ class SignatureBase extends Component {
         const args = { actionName: 'clear' };
         this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
         this.tempContext.clearRect(0, 0, this.tempContext.canvas.width, this.tempContext.canvas.height);
-        if (this.saveWithBackground) {
+        if (this.saveWithBackground && this.backgroundImage) {
             this.setBackgroundImage(this.backgroundImage, 'temp');
         }
         this.internalRefresh();