@syncfusion/ej2-inputs 31.1.23 → 31.2.4

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.1.23
+*  version : 31.2.4
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-inputs",
-  "version": "31.1.23",
+  "version": "31.2.4",
   "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.",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -8,10 +8,10 @@
   "module": "./index.js",
   "es2015": "./dist/es6/ej2-inputs.es5.js",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.1.22",
-    "@syncfusion/ej2-buttons": "~31.1.21",
-    "@syncfusion/ej2-popups": "~31.1.20",
-    "@syncfusion/ej2-splitbuttons": "~31.1.17"
+    "@syncfusion/ej2-base": "~31.2.4",
+    "@syncfusion/ej2-buttons": "~31.2.3",
+    "@syncfusion/ej2-popups": "~31.2.2",
+    "@syncfusion/ej2-splitbuttons": "~31.2.2"
   },
   "devDependencies": {},
   "keywords": [

package/src/maskedtextbox/base/mask-base.js

@@ -287,6 +287,12 @@ export function maskInputFocusHandler(event) {
     if (!this.isClicked) {
         triggerFocus.call(this, eventArgs, inputElement);
     }
+    if (this.floatLabelType !== 'Never' && this.inputObj && this.inputObj.container) {
+        var label = this.inputObj.container.querySelector('.e-float-text');
+        if (label) {
+            label.removeAttribute('style');
+        }
+    }
     if (this.mask) {
         if (!(!(modelValue === null || modelValue === '') || this.floatLabelType === 'Always' ||
             this.placeholder === null || this.placeholder === '')) {
@@ -388,6 +394,7 @@ export function maskInputBlurHandler(event) {
         container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj
     };
     this.trigger('blur', this.blurEventArgs);
+    this.updateFloatLabelOverflowWidth();
     if (this.mask) {
         this.isFocus = false;
         if (this.placeholder && this.element.value === this.promptMask && this.floatLabelType !== 'Always') {

package/src/maskedtextbox/maskedtextbox/maskedtextbox.d.ts

@@ -255,6 +255,8 @@ export declare class MaskedTextBox extends Component<HTMLInputElement> implement
      * @returns {void}
      */
     focusOut(): void;
+    private getRightIconsWidth;
+    private updateFloatLabelOverflowWidth;
     /**
      * Removes the component from the DOM and detaches all its related event handlers.
      * Also it maintains the initial input element from the DOM.

package/src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -165,6 +165,7 @@ var MaskedTextBox = /** @class */ (function (_super) {
             if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder') && !this.element.hasAttribute('aria-label')) {
                 this.element.setAttribute('aria-label', 'maskedtextbox');
             }
+            this.updateFloatLabelOverflowWidth();
             this.renderComplete();
         }
     };
@@ -441,6 +442,24 @@ var MaskedTextBox = /** @class */ (function (_super) {
             removeClass([this.inputObj.container], [MASKINPUT_FOCUS]);
         }
     };
+    MaskedTextBox.prototype.getRightIconsWidth = function () {
+        var container = this.inputObj.container;
+        var width = 0;
+        var iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        var icons = container.querySelectorAll(iconSelectors);
+        for (var index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        return width;
+    };
+    MaskedTextBox.prototype.updateFloatLabelOverflowWidth = function () {
+        var container = this.inputObj.container;
+        var label = container.querySelector('.e-float-text-overflow') || container.querySelector('.e-float-text');
+        var calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+        if (label && calculateWidth) {
+            label.style.width = calculateWidth + 'px';
+        }
+    };
     /**
      * Removes the component from the DOM and detaches all its related event handlers.
      * Also it maintains the initial input element from the DOM.

package/src/numerictextbox/numerictextbox.d.ts

@@ -380,6 +380,8 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     onPropertyChanged(newProp: NumericTextBoxModel, oldProp: NumericTextBoxModel): void;
     private updateClearButton;
     private updateSpinButton;
+    private getRightIconsWidth;
+    private updateFloatLabelOverflowWidth;
     /**
      * Gets the component name
      *

package/src/numerictextbox/numerictextbox.js

@@ -165,6 +165,7 @@ var NumericTextBox = /** @class */ (function (_super) {
             if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
                 this.enabled = false;
             }
+            this.updateFloatLabelOverflowWidth();
             this.renderComplete();
         }
     };
@@ -948,6 +949,12 @@ var NumericTextBox = /** @class */ (function (_super) {
             return;
         }
         this.isFocused = true;
+        if (this.floatLabelType !== 'Never' && this.inputWrapper && this.inputWrapper.container) {
+            var label = this.inputWrapper.container.querySelector('.e-float-text');
+            if (label) {
+                label.removeAttribute('style');
+            }
+        }
         this.prevValue = this.value;
         if ((this.value || this.value === 0)) {
             var formatValue_1 = this.formatNumber();
@@ -1004,6 +1011,7 @@ var NumericTextBox = /** @class */ (function (_super) {
                 EventHandler.remove(this.element, 'mousewheel DOMMouseScroll', this.mouseWheel);
             }
         }
+        this.updateFloatLabelOverflowWidth();
         var formElement = closest(this.element, 'form');
         if (formElement) {
             var element = this.element.nextElementSibling;
@@ -1366,6 +1374,24 @@ var NumericTextBox = /** @class */ (function (_super) {
             detach(this.spinDown);
         }
     };
+    NumericTextBox.prototype.getRightIconsWidth = function () {
+        var container = this.inputWrapper.container;
+        var width = 0;
+        var iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        var icons = container.querySelectorAll(iconSelectors);
+        for (var index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        return width;
+    };
+    NumericTextBox.prototype.updateFloatLabelOverflowWidth = function () {
+        var container = this.inputWrapper.container;
+        var label = container.querySelector('.e-float-text-overflow') || container.querySelector('.e-float-text');
+        var calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+        if (label && calculateWidth) {
+            label.style.width = calculateWidth + 'px';
+        }
+    };
     /**
      * Gets the component name
      *

package/src/textarea/textarea.d.ts

@@ -234,4 +234,6 @@ export declare class TextArea extends Component<HTMLTextAreaElement> implements
     private resetValue;
     private setElementWidth;
     private getCurrentResizeClass;
+    private getRightIconsWidth;
+    private updateFloatLabelOverflowWidth;
 }

package/src/textarea/textarea.js

@@ -275,6 +275,7 @@ var TextArea = /** @class */ (function (_super) {
         this.element.defaultValue = this.element.value;
         Input.setWidth(this.width, this.textareaWrapper.container);
         this.setWrapperWidth();
+        this.updateFloatLabelOverflowWidth();
         this.renderComplete();
     };
     TextArea.prototype.getModuleName = function () {
@@ -382,6 +383,12 @@ var TextArea = /** @class */ (function (_super) {
             event: args,
             value: this.value
         };
+        if (this.floatLabelType !== 'Never' && this.textareaWrapper && this.textareaWrapper.container) {
+            var label = this.textareaWrapper.container.querySelector('.e-float-text');
+            if (label) {
+                label.removeAttribute('style');
+            }
+        }
         this.trigger('focus', eventArgs);
     };
     TextArea.prototype.focusOutHandler = function (args) {
@@ -394,6 +401,7 @@ var TextArea = /** @class */ (function (_super) {
             event: args,
             value: this.value
         };
+        this.updateFloatLabelOverflowWidth();
         this.trigger('blur', eventArgs);
     };
     TextArea.prototype.keydownHandler = function (args) {
@@ -641,6 +649,24 @@ var TextArea = /** @class */ (function (_super) {
     TextArea.prototype.getCurrentResizeClass = function (resizeMode) {
         return resizeMode === 'None' ? RESIZE_NONE : (resizeMode === 'Both' ? RESIZE_XY : resizeMode === 'Horizontal' ? RESIZE_X : RESIZE_Y);
     };
+    TextArea.prototype.getRightIconsWidth = function () {
+        var container = this.textareaWrapper.container;
+        var width = 0;
+        var iconSelectors = '.e-input-group-icon, .e-clear-icon';
+        var icons = container.querySelectorAll(iconSelectors);
+        for (var index = 0; index < icons.length; index++) {
+            width += icons[index].offsetWidth;
+        }
+        return width;
+    };
+    TextArea.prototype.updateFloatLabelOverflowWidth = function () {
+        var container = this.textareaWrapper.container;
+        var label = container.querySelector('.e-float-text-overflow') || container.querySelector('.e-float-text');
+        var calculateWidth = (container.clientWidth - this.getRightIconsWidth());
+        if (label && calculateWidth) {
+            label.style.width = calculateWidth + 'px';
+        }
+    };
     __decorate([
         Property(false)
     ], TextArea.prototype, "readonly", void 0);

package/src/uploader/uploader.js

@@ -1227,6 +1227,12 @@ var Uploader = /** @class */ (function (_super) {
         if (!this.enabled) {
             return;
         }
+        if (!this.multiple && this.getFilesData().length > 0) {
+            var selectedFile = this.getSelectedFiles(0);
+            if (selectedFile) {
+                this.remove(selectedFile, false, false, true, null);
+            }
+        }
         var targetFiles;
         /* istanbul ignore next */
         if (args.type === 'drop') {
@@ -1981,7 +1987,7 @@ var Uploader = /** @class */ (function (_super) {
         var progressbarWrapper = this.createElement('span', { className: PROGRESS_WRAPPER });
         var progressBar = this.createElement('progressbar', { className: PROGRESSBAR, attrs: { value: '0', max: '100' } });
         var progressbarInnerWrapper = this.createElement('span', { className: PROGRESS_INNER_WRAPPER });
-        progressBar.setAttribute('style', 'width: 0%');
+        progressBar.style.width = '0%';
         var progressbarText = this.createElement('span', { className: PROGRESSBAR_TEXT });
         progressbarText.textContent = '0%';
         progressbarInnerWrapper.appendChild(progressBar);
@@ -2004,7 +2010,7 @@ var Uploader = /** @class */ (function (_super) {
         }
     };
     Uploader.prototype.changeProgressValue = function (li, progressValue) {
-        li.querySelector('.' + PROGRESSBAR).setAttribute('style', 'width:' + progressValue);
+        li.querySelector('.' + PROGRESSBAR).style.width = progressValue;
         li.querySelector('.' + PROGRESSBAR_TEXT).textContent = progressValue;
     };
     Uploader.prototype.uploadInProgress = function (e, files, customUI, request) {