@syncfusion/ej2-inputs 25.1.35 → 25.1.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 25.1.35
+*  version : 25.1.38
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@18.78.15",
+  "_id": "@syncfusion/ej2-inputs@25.1.37",
   "_inBundle": false,
-  "_integrity": "sha512-rXgFizmLuWasLGwlHimRN2E8XhlAFp76EEUFDgV90QcQNrMt0mJYlOOHgEnSeNJxble4xPNfPKg/REgHoApb/w==",
+  "_integrity": "sha512-dCCpQYC6SdVpO+yC5NgVS/giDJaF7KR+SuwDRNzfEr02YPBEQxIkpgtzpLaGPNmJWGoCgml5w2cU/xskpYcVeg==",
   "_location": "/@syncfusion/ej2-inputs",
   "_phantomChildren": {},
   "_requested": {
@@ -39,8 +39,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-inputs"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-inputs/-/ej2-inputs-18.78.15.tgz",
-  "_shasum": "8ef93741dd68775ea404b54c10bfd6a17a331e7b",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-25.1.37.tgz",
+  "_shasum": "fc877de63b76cbf7c262c5ca4e962a0413ca46c0",
   "_spec": "@syncfusion/ej2-inputs@*",
   "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
@@ -50,8 +50,8 @@
   "dependencies": {
     "@syncfusion/ej2-base": "~25.1.35",
     "@syncfusion/ej2-buttons": "~25.1.35",
-    "@syncfusion/ej2-popups": "~25.1.35",
-    "@syncfusion/ej2-splitbuttons": "~25.1.35"
+    "@syncfusion/ej2-popups": "~25.1.38",
+    "@syncfusion/ej2-splitbuttons": "~25.1.38"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
@@ -119,7 +119,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
   },
   "typings": "index.d.ts",
-  "version": "25.1.35",
+  "version": "25.1.38",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/color-picker/color-picker-model.d.ts

@@ -1,4 +1,4 @@
-import { BaseEventArgs, Component, EmitType, Event, INotifyPropertyChanged, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';import { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';import { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { SplitButton, BeforeOpenCloseMenuEventArgs, getModel } from '@syncfusion/ej2-splitbuttons';import { Deferred } from '@syncfusion/ej2-splitbuttons';import { Tooltip, TooltipEventArgs, getZindexPartial, Popup, isCollide } from '@syncfusion/ej2-popups';import { Input } from './../input/index';import { NumericTextBox, NumericTextBoxModel, ChangeEventArgs } from './../numerictextbox/index';import { Slider, SliderChangeEventArgs } from './../slider/slider';
+import { BaseEventArgs, Component, EmitType, Event, INotifyPropertyChanged, NotifyPropertyChanges, Property } from '@syncfusion/ej2-base';import { Browser, closest, detach, EventHandler, getInstance, select, selectAll, formatUnit } from '@syncfusion/ej2-base';import { addClass, attributes, classList, isNullOrUndefined, L10n } from '@syncfusion/ej2-base';import { remove, removeClass, rippleEffect } from '@syncfusion/ej2-base';import { SplitButton, BeforeOpenCloseMenuEventArgs, getModel, ClickEventArgs } from '@syncfusion/ej2-splitbuttons';import { Deferred } from '@syncfusion/ej2-splitbuttons';import { Tooltip, TooltipEventArgs, getZindexPartial, Popup, isCollide } from '@syncfusion/ej2-popups';import { Input } from './../input/index';import { NumericTextBox, NumericTextBoxModel, ChangeEventArgs } from './../numerictextbox/index';import { Slider, SliderChangeEventArgs } from './../slider/slider';
 import {ColorPickerMode,ColorPickerEventArgs,PaletteTileEventArgs,BeforeOpenCloseEventArgs,OpenEventArgs,ModeSwitchEventArgs} from "./color-picker";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/color-picker/color-picker.d.ts

@@ -354,6 +354,7 @@ export interface ColorPickerEventArgs extends BaseEventArgs {
         rgba: string;
     };
     value?: string;
+    event?: Event;
 }
 /**
  * Interface for before change event.

package/src/color-picker/color-picker.js

@@ -191,9 +191,10 @@ var ColorPicker = /** @class */ (function (_super) {
             createPopupOnClick: this.createPopupOnClick,
             open: this.onOpen.bind(this),
             click: function () {
+                var 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
                 });
             }
         });
@@ -694,7 +695,7 @@ var ColorPicker = /** @class */ (function (_super) {
         this.hsv[2] = this.hsv[2] > 100 ? 100 : this.hsv[2];
         this.setHandlerPosition();
     };
-    ColorPicker.prototype.convertToOtherFormat = function (isKey) {
+    ColorPicker.prototype.convertToOtherFormat = function (isKey, e) {
         if (isKey === void 0) { isKey = false; }
         var pValue = this.rgbToHex(this.rgb);
         this.rgb = this.hsvToRgb.apply(this, this.hsv);
@@ -702,7 +703,7 @@ var ColorPicker = /** @class */ (function (_super) {
         var rgba = this.convertToRgbString(this.rgb);
         this.updatePreview(rgba);
         this.updateInput(cValue);
-        this.triggerEvent(cValue, pValue, rgba, isKey);
+        this.triggerEvent(cValue, pValue, rgba, isKey, e);
     };
     ColorPicker.prototype.updateInput = function (value) {
         var wrapper = this.getWrapper();
@@ -935,10 +936,10 @@ var ColorPicker = /** @class */ (function (_super) {
             }
         });
     };
-    ColorPicker.prototype.triggerChangeEvent = function (value) {
+    ColorPicker.prototype.triggerChangeEvent = function (value, e) {
         var 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
         });
@@ -957,7 +958,7 @@ var ColorPicker = /** @class */ (function (_super) {
             this.hsv[prob] = 0;
         }
         this.updateHsv();
-        this.convertToOtherFormat(true);
+        this.convertToOtherFormat(true, e);
     };
     ColorPicker.prototype.handlerDown = function (e) {
         e.preventDefault();
@@ -974,7 +975,7 @@ var ColorPicker = /** @class */ (function (_super) {
         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);
@@ -996,7 +997,7 @@ var ColorPicker = /** @class */ (function (_super) {
         this.setHsv(x, y);
         var 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) {
@@ -1140,7 +1141,7 @@ var ColorPicker = /** @class */ (function (_super) {
         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);
     };
     ColorPicker.prototype.paletteClickHandler = function (e) {
         e.preventDefault();
@@ -1159,7 +1160,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 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);
@@ -1218,7 +1219,7 @@ var ColorPicker = /** @class */ (function (_super) {
     ColorPicker.prototype.ctrlBtnClick = function (ele, e) {
         if (ele.classList.contains(APPLY)) {
             var cValue = this.rgbToHex(this.rgb);
-            this.triggerChangeEvent(cValue);
+            this.triggerChangeEvent(cValue, e);
         }
         if (!this.inline) {
             this.closePopup(e);
@@ -1326,7 +1327,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 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;
@@ -1338,7 +1339,7 @@ var ColorPicker = /** @class */ (function (_super) {
                     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':
@@ -1346,7 +1347,7 @@ var ColorPicker = /** @class */ (function (_super) {
                     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':
@@ -1354,7 +1355,7 @@ var ColorPicker = /** @class */ (function (_super) {
                     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':
@@ -1364,14 +1365,14 @@ var ColorPicker = /** @class */ (function (_super) {
                 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':
@@ -1379,7 +1380,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 break;
         }
     };
-    ColorPicker.prototype.inputValueChange = function (hsv, pValue, value) {
+    ColorPicker.prototype.inputValueChange = function (hsv, pValue, value, e) {
         if (hsv[0] !== this.hsv[0]) {
             this.hueSlider.setProperties({ 'value': hsv[0] }, true);
             this.hueSlider.refresh();
@@ -1391,13 +1392,16 @@ var ColorPicker = /** @class */ (function (_super) {
         this.updateInput(value ? value : cValue);
         var rgba = this.convertToRgbString(this.rgb);
         this.updatePreview(rgba);
-        this.triggerEvent(cValue, pValue, rgba);
+        this.triggerEvent(cValue, pValue, rgba, false, e);
     };
-    ColorPicker.prototype.triggerEvent = function (cValue, pValue, rgba, isKey) {
+    ColorPicker.prototype.triggerEvent = function (cValue, pValue, rgba, isKey, e) {
         if (isKey === void 0) { isKey = false; }
         var 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);
@@ -1409,7 +1413,7 @@ var ColorPicker = /** @class */ (function (_super) {
         }
         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)) }
             });
         }

package/src/common/signature-base.js

@@ -296,6 +296,10 @@ var SignatureBase = /** @class */ (function (_super) {
         this.lastWidth = newWidth;
     };
     SignatureBase.prototype.endDraw = function () {
+        if (isNullOrUndefined(this.pointColl)) {
+            return;
+        }
+        ;
         var canDrawCurve = this.pointColl.length > 2;
         var point = this.pointColl[0];
         if (!canDrawCurve && point) {
@@ -565,7 +569,7 @@ var SignatureBase = /** @class */ (function (_super) {
         var 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();

package/src/input/input.js

@@ -92,7 +92,7 @@ export 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(function () {
                 Input.calculateWidth(args.element, parent);
             }, 80);
@@ -103,7 +103,7 @@ export 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(function () {
                 Input.calculateWidth(args.element, parent);
             }, 80);
@@ -508,7 +508,7 @@ export var Input;
      */
     function setValue(value, element, floatLabelType, clearButton) {
         element.value = value;
-        if (floatLabelType === 'Auto' && value === '') {
+        if (floatLabelType !== 'Never') {
             calculateWidth(element, element.parentElement);
         }
         if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {

package/src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -326,7 +326,7 @@ var MaskedTextBox = /** @class */ (function (_super) {
                     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;
                     }

package/src/slider/slider.js

@@ -2605,6 +2605,10 @@ var Slider = /** @class */ (function (_super) {
         if (args !== 'tooltip') {
             this.updateConfig();
         }
+        if (this.readonly) {
+            this.sliderContainer.classList.remove(classNames.readonly);
+            this.setReadOnly();
+        }
     };
     Slider.prototype.changeRtl = function () {
         if (!this.enableRtl && this.type === 'Range') {
@@ -2748,6 +2752,7 @@ var Slider = /** @class */ (function (_super) {
                     break;
                 case 'tooltip':
                     if (!isNullOrUndefined(newProp.tooltip) && !isNullOrUndefined(oldProp.tooltip)) {
+                        this.initialTooltip = true;
                         this.setTooltip(prop);
                         if (!this.showButtons) {
                             this.wireEvents();