@syncfusion/ej2-inputs 20.2.43 → 20.2.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.2.43
+*  version : 20.2.48
 *  Copyright Syncfusion Inc. 2001 - 2020. 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@20.2.38",
+  "_id": "@syncfusion/ej2-inputs@20.2.45",
   "_inBundle": false,
-  "_integrity": "sha512-vDKj0Q+Dppsnr5bDFxQIdrjzyyZCW6hKx7xcvnliiUdzck+hdX227OhPoGi5svNPwiWHKLq0vzyRV5PJM5QRBA==",
+  "_integrity": "sha512-tHprHgofQjfmkC/OjBnYM+/EqPWqAD7nbo9WSCNFmMt8FJKC3nX8iqWec23Q32FdVRHRwIIJ6ZngI/+AO6Q5Rg==",
   "_location": "/@syncfusion/ej2-inputs",
   "_phantomChildren": {},
   "_requested": {
@@ -38,8 +38,8 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-inputs"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-20.2.38.tgz",
-  "_shasum": "64be66ac842b17c0bc891b5e620bf6d36d078175",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-20.2.45.tgz",
+  "_shasum": "1aeb2e6ef5c1df6754829f547f2ceca0ae9e5c32",
   "_spec": "@syncfusion/ej2-inputs@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -47,10 +47,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.2.43",
-    "@syncfusion/ej2-buttons": "~20.2.43",
-    "@syncfusion/ej2-popups": "~20.2.43",
-    "@syncfusion/ej2-splitbuttons": "~20.2.43"
+    "@syncfusion/ej2-base": "~20.2.48",
+    "@syncfusion/ej2-buttons": "~20.2.46",
+    "@syncfusion/ej2-popups": "~20.2.45",
+    "@syncfusion/ej2-splitbuttons": "~20.2.45"
   },
   "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.",
@@ -118,6 +118,6 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
   },
   "typings": "index.d.ts",
-  "version": "20.2.43",
+  "version": "20.2.48",
   "sideEffects": false
 }

package/src/input/input.d.ts

@@ -41,6 +41,16 @@ export declare namespace Input {
      * - Css class names which are needed to remove. If old classes are need to remove, can give this optional parameter.
      */
     function setCssClass(cssClass: string, elements: Element[] | NodeList, oldClass?: string): void;
+    /**
+     * Set the width to the placeholder when it overflows on the button such as spinbutton, clearbutton, icon etc
+     * ```
+     * E.g : Input.calculateWidth(element, container);
+     * ```
+     *
+     * @param {any} element - Input element which is need to add.
+     * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
+     */
+    function calculateWidth(element: any, container: HTMLElement): void;
     /**
      * Set the width to the wrapper of input element.
      * ```
@@ -128,6 +138,18 @@ export declare namespace Input {
     }, element: HTMLInputElement | HTMLElement): void;
     function removeFloating(input: InputObject): void;
     function addFloating(input: HTMLInputElement | HTMLTextAreaElement, type: FloatLabelType | string, placeholder: string, internalCreateElement?: createElementParams): void;
+    /**
+    * Create the span inside the label and add the label text into the span textcontent
+    * ```
+    * E.g : Input.createSpanElement(inputObject, makeElement);
+    * ```
+    *
+    * @param {InputObject} inputObject
+    * - Element which is need to get the label
+    * @param {createElementParams} makeElement
+    * - Element which is need to create the span
+    */
+    function createSpanElement(inputObject: InputObject, makeElement: createElementParams): void;
     /**
      * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.
      * ```

package/src/input/input.js

@@ -10,6 +10,7 @@ var CLASSNAMES = {
     FLOATINPUT: 'e-float-input',
     FLOATLINE: 'e-float-line',
     FLOATTEXT: 'e-float-text',
+    FLOATTEXTCONTENT: 'e-float-text-content',
     CLEARICON: 'e-clear-icon',
     CLEARICONHIDE: 'e-clear-icon-hide',
     LABELTOP: 'e-label-top',
@@ -71,6 +72,7 @@ export var Input;
         }
         validateInputType(inputObject.container, args.element);
         inputObject = setPropertyValue(args, inputObject);
+        createSpanElement(inputObject, makeElement);
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         privateInputObj = inputObject;
         return inputObject;
@@ -368,6 +370,9 @@ export var Input;
      */
     function setValue(value, element, floatLabelType, clearButton) {
         element.value = value;
+        if (isNullOrUndefined(element.getAttribute('value'))) {
+            calculateWidth(element, element.parentElement);
+        }
         if ((!isNullOrUndefined(floatLabelType)) && floatLabelType === 'Auto') {
             validateLabel(element, floatLabelType);
         }
@@ -408,6 +413,26 @@ export var Input;
         }
     }
     Input.setCssClass = setCssClass;
+    /**
+     * Set the width to the placeholder when it overflows on the button such as spinbutton, clearbutton, icon etc
+     * ```
+     * E.g : Input.calculateWidth(element, container);
+     * ```
+     *
+     * @param {any} element - Input element which is need to add.
+     * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
+     */
+    function calculateWidth(element, container) {
+        if (!isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
+            if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
+                container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');
+            }
+            if (element.clientWidth < container.getElementsByClassName('e-float-text-content')[0].clientWidth || element.clientWidth === container.getElementsByClassName('e-float-text-content')[0].clientWidth) {
+                container.getElementsByClassName('e-float-text-content')[0].classList.add('e-float-text-overflow');
+            }
+        }
+    }
+    Input.calculateWidth = calculateWidth;
     /**
      * Set the width to the wrapper of input element.
      * ```
@@ -424,6 +449,7 @@ export var Input;
         else if (typeof width === 'string') {
             container.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));
         }
+        calculateWidth(container.firstChild, container);
     }
     Input.setWidth = setWidth;
     /**
@@ -440,13 +466,13 @@ export var Input;
         var parentElement = getParentNode(element);
         if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {
             if (!isNullOrUndefined(placeholder) && placeholder !== '') {
-                parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;
+                parentElement.getElementsByClassName('e-float-text-content')[0] ? parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].children[0].textContent = placeholder : parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;
                 parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL);
                 element.removeAttribute('placeholder');
             }
             else {
                 parentElement.classList.add(CLASSNAMES.NOFLOATLABEL);
-                parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';
+                parentElement.getElementsByClassName('e-float-text-content')[0] ? parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].children[0].textContent = '' : parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';
             }
         }
         else {
@@ -639,6 +665,8 @@ export var Input;
             var inputObj = { container: container };
             input.classList.remove(CLASSNAMES.INPUT);
             createFloatingInput(args, inputObj, makeElement);
+            createSpanElement(inputObj, makeElement);
+            calculateWidth(args.element, inputObj.container);
             var isPrependIcon = container.classList.contains('e-float-icon-left');
             if (isNullOrUndefined(iconEle)) {
                 if (isPrependIcon) {
@@ -669,6 +697,26 @@ export var Input;
         checkFloatLabelType(type, input.parentElement);
     }
     Input.addFloating = addFloating;
+    /**
+    * Create the span inside the label and add the label text into the span textcontent
+    * ```
+    * E.g : Input.createSpanElement(inputObject, makeElement);
+    * ```
+    *
+    * @param {InputObject} inputObject
+    * - Element which is need to get the label
+    * @param {createElementParams} makeElement
+    * - Element which is need to create the span
+    */
+    function createSpanElement(inputObject, makeElement) {
+        if (inputObject.container.classList.contains('e-outline') && inputObject.container.getElementsByClassName('e-float-text')[0]) {
+            var labelSpanElement = makeElement('span', { className: CLASSNAMES.FLOATTEXTCONTENT });
+            labelSpanElement.innerHTML = inputObject.container.getElementsByClassName('e-float-text')[0].innerHTML;
+            inputObject.container.getElementsByClassName('e-float-text')[0].innerHTML = '';
+            inputObject.container.getElementsByClassName('e-float-text')[0].appendChild(labelSpanElement);
+        }
+    }
+    Input.createSpanElement = createSpanElement;
     /**
      * Enable or Disable the ripple effect on the icons inside the Input. Ripple effect is only applicable for material theme.
      * ```
@@ -759,6 +807,9 @@ export var Input;
                 prependSpan(icon, container, input, internalCreate);
             }
         }
+        if (container.getElementsByClassName('e-input-group-icon')[0] && container.getElementsByClassName('e-float-text-overflow')[0]) {
+            container.getElementsByClassName('e-float-text-overflow')[0].classList.add('e-icon');
+        }
     }
     Input.addIcon = addIcon;
     /**

package/src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -326,6 +326,7 @@ var MaskedTextBox = /** @class */ (function (_super) {
                     break;
                 case 'width':
                     this.setWidth(newProp.width);
+                    Input.calculateWidth(this.element, this.inputObj.container);
                     break;
                 case 'cssClass':
                     this.updateCssClass(newProp.cssClass, oldProp.cssClass);

package/src/numerictextbox/numerictextbox.js

@@ -1168,6 +1168,7 @@ var NumericTextBox = /** @class */ (function (_super) {
             switch (prop) {
                 case 'width':
                     this.setElementWidth(newProp.width);
+                    Input.calculateWidth(this.element, this.container);
                     break;
                 case 'cssClass':
                     this.updateCssClass(newProp.cssClass, oldProp.cssClass);
@@ -1196,6 +1197,7 @@ var NumericTextBox = /** @class */ (function (_super) {
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(newProp.placeholder, this.element);
+                    Input.calculateWidth(this.element, this.container);
                     break;
                 case 'step':
                     this.step = newProp.step;

package/src/textbox/textbox.js

@@ -131,6 +131,7 @@ var TextBox = /** @class */ (function (_super) {
                     break;
                 case 'placeholder':
                     Input.setPlaceholder(this.placeholder, this.respectiveElement);
+                    Input.calculateWidth(this.respectiveElement, this.textboxWrapper.container);
                     break;
                 case 'autocomplete':
                     if (this.autocomplete !== 'on' && this.autocomplete !== '') {
@@ -426,7 +427,7 @@ var TextBox = /** @class */ (function (_super) {
         }
         if (!isNullOrUndefined(this.textboxWrapper)) {
             var label = this.textboxWrapper.container.querySelector('.e-float-text');
-            if (!isNullOrUndefined(label)) {
+            if (!isNullOrUndefined(label) && this.floatLabelType !== 'Always') {
                 if ((isNullOrUndefined(this.initialValue) || this.initialValue === '')) {
                     label.classList.add('e-label-bottom');
                     label.classList.remove('e-label-top');
@@ -448,7 +449,7 @@ var TextBox = /** @class */ (function (_super) {
     };
     TextBox.prototype.focusOutHandler = function (args) {
         if (!(this.previousValue === null && this.value === null && this.respectiveElement.value === '') &&
-            (this.previousValue !== this.respectiveElement.value)) {
+            (this.previousValue !== this.value)) {
             this.raiseChangeEvent(args, true);
         }
         var eventArgs = {

package/src/uploader/uploader.d.ts

@@ -518,6 +518,7 @@ export declare class Uploader extends Component<HTMLInputElement> implements INo
     private isFirstFileOnSelection;
     private dragCounter;
     private isPreloadFiles;
+    private isAngular;
     /**
      * Get the file item(li) which are shown in file list.
      *

package/src/uploader/uploader.js

@@ -163,6 +163,7 @@ var Uploader = /** @class */ (function (_super) {
         _this.newFileRef = 0;
         _this.isFirstFileOnSelection = false;
         _this.dragCounter = 0;
+        _this.isAngular = false;
         /**
          * Get the file item(li) which are shown in file list.
          *
@@ -1226,6 +1227,9 @@ var Uploader = /** @class */ (function (_super) {
             targetFiles = [].slice.call(args.target.files);
             this.renderSelectedFiles(args, targetFiles);
         }
+        if (this.isAngular) {
+            args.stopPropagation();
+        }
     };
     /* istanbul ignore next */
     Uploader.prototype.getBase64 = function (file) {

package/styles/bootstrap5-dark.css

@@ -5941,7 +5941,7 @@ input.e-input::-webkit-input-placeholder {
 .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons:hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   border-radius: 50%;
   box-shadow: 0 0 0 transparent;
@@ -6239,7 +6239,7 @@ input.e-input::-webkit-input-placeholder {
   color: #dee2e6;
 }
 .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-reload-btn.e-icons:focus, .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):focus, .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }

package/styles/bootstrap5.css

@@ -5941,7 +5941,7 @@ input.e-input::-webkit-input-placeholder {
 .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons:hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   border-radius: 50%;
   box-shadow: 0 0 0 transparent;
@@ -6239,7 +6239,7 @@ input.e-input::-webkit-input-placeholder {
   color: #343a40;
 }
 .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-reload-btn.e-icons:focus, .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):focus, .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }

package/styles/fluent-dark.css

@@ -5729,7 +5729,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
 .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons:hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   border-radius: 50%;
   box-shadow: 0 0 0 transparent;
@@ -6060,7 +6060,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   color: #f3f2f1;
 }
 .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-reload-btn.e-icons:focus, .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):focus, .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }

package/styles/fluent.css

@@ -5729,7 +5729,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
 .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons:hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   border-radius: 50%;
   box-shadow: 0 0 0 transparent;
@@ -6060,7 +6060,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   color: #323130;
 }
 .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-reload-btn.e-icons:focus, .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):focus, .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }

package/styles/input/_layout.scss

@@ -2502,7 +2502,7 @@
     @include input-ripple-animation;
   }
 
-  // sass-lint:disable no-vendor-prefixes  
+  // sass-lint:disable no-vendor-prefixes
   input.e-input#{$css}::-ms-clear,
   .e-float-input input::-ms-clear,
   .e-float-input.e-control-wrapper input::-ms-clear {
@@ -5229,6 +5229,43 @@
     }
   }
 
+  .e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
+    @if $input-skin-name == 'material' {
+      width: calc(100% - 80px);
+    }
+  }
+
+  .e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
+  .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+  .e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow {
+    @if $input-skin-name == 'material' {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+  }
+
+  .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
+  .e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
+    @if $input-skin-name == 'material' {
+      width: calc(100% - 45px);
+    }
+  }
+
+  .e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
+    @if $input-skin-name == 'material' {
+      width: calc(100% - 75px);
+    }
+  }
+
+  .e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
+    @if $input-skin-name == 'material' {
+      width: calc(100% - 110px);
+    }
+  }
+
   .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
   .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
   .e-outline.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,

package/styles/input/material-dark.css

@@ -4091,6 +4091,33 @@ textarea.e-outline.e-input,
   width: calc(100% - 1px);
 }
 
+.e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
+  width: calc(100% - 80px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
+  width: calc(100% - 45px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
+  width: calc(100% - 75px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
+  width: calc(100% - 110px);
+}
+
 .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
 .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
 .e-outline.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,

package/styles/input/material.css

@@ -4099,6 +4099,33 @@ textarea.e-outline.e-input,
   width: calc(100% - 1px);
 }
 
+.e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
+  width: calc(100% - 80px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
+  width: calc(100% - 45px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
+  width: calc(100% - 75px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
+  width: calc(100% - 110px);
+}
+
 .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
 .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
 .e-outline.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,

package/styles/material-dark.css

@@ -4101,6 +4101,33 @@ textarea.e-outline.e-input,
   width: calc(100% - 1px);
 }
 
+.e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
+  width: calc(100% - 80px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
+  width: calc(100% - 45px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
+  width: calc(100% - 75px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
+  width: calc(100% - 110px);
+}
+
 .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
 .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
 .e-outline.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,

package/styles/material.css

@@ -4109,6 +4109,33 @@ textarea.e-outline.e-input,
   width: calc(100% - 1px);
 }
 
+.e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
+  width: calc(100% - 80px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-numeric label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-top span.e-float-text-content.e-float-text-overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow,
+.e-outline.e-float-input.e-control-wrapper label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
+  width: calc(100% - 45px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow.e-icon {
+  width: calc(100% - 75px);
+}
+
+.e-outline.e-float-input.e-control-wrapper.e-numeric.e-static-clear label.e-float-text.e-label-bottom span.e-float-text-content.e-float-text-overflow {
+  width: calc(100% - 110px);
+}
+
 .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::before,
 .e-outline.e-float-input.e-input-group:not(.e-float-icon-left).e-input-focus .e-float-line::after,
 .e-outline.e-float-input.e-input-group.e-float-icon-left.e-input-focus .e-input-in-wrap .e-float-line::before,

package/styles/tailwind-dark.css

@@ -5797,7 +5797,7 @@ input.e-input::-webkit-input-placeholder {
 .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons:hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   border-radius: 50%;
   box-shadow: 0 0 0 transparent;
@@ -6098,7 +6098,7 @@ input.e-input::-webkit-input-placeholder {
   color: #f3f4f6;
 }
 .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-reload-btn.e-icons:focus, .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):focus, .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }

package/styles/tailwind.css

@@ -5797,7 +5797,7 @@ input.e-input::-webkit-input-placeholder {
 .e-bigger.e-small .e-upload .e-upload-files .e-file-reload-btn.e-icons:hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):hover,
 .e-bigger.e-small .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   border-radius: 50%;
   box-shadow: 0 0 0 transparent;
@@ -6098,7 +6098,7 @@ input.e-input::-webkit-input-placeholder {
   color: #374151;
 }
 .e-upload .e-upload-files .e-file-remove-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-delete-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-pause-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-play-btn.e-icons:not(.e-upload-progress):focus, .e-upload .e-upload-files .e-file-reload-btn.e-icons:focus, .e-upload .e-upload-files .e-file-abort-btn.e-icons:not(.e-disabled):focus, .e-upload .e-upload-files .e-clear-icon-focus {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.12);
   border-color: transparent;
   box-shadow: 0 0 0 transparent;
 }

package/styles/uploader/_bootstrap5-definition.scss

@@ -204,7 +204,7 @@ $upload-failure-color: $danger !default;
 $upload-in-progress-color: $primary !default;
 $progress-background-color: $content-bg-color-alt3 !default;
 $progress-text-color: $content-text-color-alt2 !default;
-$clear-icon-focus-color: transparent !default;
+$clear-icon-focus-color: rgba($black, .12) !default;
 $list-bottom-border: 1px solid $border-light !default;
 $upload-border: 1px dashed $border-dark !default;
 $drag-hover-border: 1px dashed $primary !default;

package/styles/uploader/_fluent-definition.scss

@@ -222,7 +222,7 @@ $upload-in-progress-color: $primary !default;
 $progress-background-color: $content-bg-color-alt3 !default;
 $progress-text-color: $content-text-color-alt2 !default;
 $file-status-color: $content-text-color-alt2 !default;
-$clear-icon-focus-color: transparent !default;
+$clear-icon-focus-color: rgba($black, .12) !default;
 $list-bottom-border: 0 solid $border-light !default;
 $upload-border: 1px dashed $border-dark !default;
 $drag-hover-border: 2px dashed $primary-outline !default;

package/styles/uploader/_tailwind-definition.scss

@@ -208,7 +208,7 @@ $upload-failure-color: $danger !default;
 $upload-in-progress-color: $primary !default;
 $progress-background-color: $content-bg-color-alt3 !default;
 $progress-text-color: $content-text-color-alt2 !default;
-$clear-icon-focus-color: transparent !default;
+$clear-icon-focus-color: rgba($black, .12) !default;
 $list-bottom-border: 1px solid $border-light !default;
 $upload-border: 1px dashed $border-dark !default;
 $drag-hover-border: 2px dashed $primary !default;