@syncfusion/ej2-inputs 30.2.6 → 31.1.20

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 30.2.6
+*  version : 31.1.20
 *  Copyright Syncfusion Inc. 2001 - 2024. 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": "30.2.6",
+  "version": "31.1.20",
   "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": "~30.2.4",
-    "@syncfusion/ej2-buttons": "~30.2.4",
-    "@syncfusion/ej2-popups": "~30.2.4",
-    "@syncfusion/ej2-splitbuttons": "~30.2.4"
+    "@syncfusion/ej2-base": "~31.1.20",
+    "@syncfusion/ej2-buttons": "~31.1.17",
+    "@syncfusion/ej2-popups": "~31.1.20",
+    "@syncfusion/ej2-splitbuttons": "~31.1.17"
   },
   "devDependencies": {},
   "keywords": [

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

@@ -96,7 +96,8 @@ var ColorPicker = /** @class */ (function (_super) {
         if (this.formElement) {
             EventHandler.add(this.formElement, 'reset', this.formResetHandler, this);
         }
-        var localeText = { Apply: 'Apply', Cancel: 'Cancel', ModeSwitcher: 'Switch Mode', RecentColors: 'Recent colors' };
+        var localeText = { Apply: 'Apply', Cancel: 'Cancel', ModeSwitcher: 'Switch Mode', RecentColors: 'Recent colors',
+            CurrentColor: 'Current', PreviousColor: 'Previous' };
         this.l10n = new L10n('colorpicker', localeText, this.locale);
         if (ele.getAttribute('ejs-for') && !ele.getAttribute('name')) {
             ele.setAttribute('name', ele.id);
@@ -555,11 +556,11 @@ var ColorPicker = /** @class */ (function (_super) {
     ColorPicker.prototype.createPreview = function (parentEle) {
         var previewContainer = this.createElement('div', { className: PREVIEW });
         parentEle.appendChild(previewContainer);
-        var preview = this.createElement('span', { className: 'e-preview ' + CURRENT });
+        var preview = this.createElement('span', { className: 'e-preview ' + CURRENT, attrs: { title: this.l10n.getConstant('CurrentColor') } });
         previewContainer.appendChild(preview);
         var colorValue = this.convertToRgbString(this.rgb);
         preview.style.backgroundColor = colorValue;
-        preview = this.createElement('span', { className: 'e-preview ' + PREVIOUS });
+        preview = this.createElement('span', { className: 'e-preview ' + PREVIOUS, attrs: { title: this.l10n.getConstant('PreviousColor') } });
         previewContainer.appendChild(preview);
         preview.style.backgroundColor = colorValue;
     };

package/src/input/input.js

@@ -643,7 +643,7 @@ export var Input;
             else {
                 parentElement.classList.add(CLASSNAMES.NOFLOATLABEL);
                 var floatTextContent = parentElement.getElementsByClassName('e-float-text-content')[0];
-                if (floatTextContent) {
+                if (floatTextContent && floatTextContent.children[0]) {
                     floatTextContent.children[0].textContent = '';
                 }
                 else {

package/styles/bootstrap4-lite.css

@@ -2098,7 +2098,7 @@ textarea.e-input,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
   border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input.e-success,
@@ -2305,7 +2305,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #495057;
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input-group input.e-input,

package/styles/bootstrap4.css

@@ -2098,7 +2098,7 @@ textarea.e-input,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
   border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input.e-success,
@@ -2305,7 +2305,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #495057;
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input-group input.e-input,

package/styles/bootstrap5-dark-lite.css

@@ -2141,7 +2141,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2345,7 +2345,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #adb5bd;
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/bootstrap5-dark.css

@@ -2141,7 +2141,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2345,7 +2345,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #adb5bd;
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/bootstrap5-lite.css

@@ -2141,7 +2141,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2345,7 +2345,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #6c757d;
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/bootstrap5.css

@@ -2141,7 +2141,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2345,7 +2345,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #6c757d;
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/input/_bootstrap4-definition.scss

@@ -181,7 +181,7 @@ $textarea-small-height: auto !default;
 $textarea-bigger-small-height: auto !default;
 $textarea-full-height: 100% !default;
 $input-group-disabled-color: $gray-600 !default;
-$input-group-hovered-color: $white !default;
+$input-group-hovered-color: $gray-100 !default;
 $input-icon-font-size: 14px !default;
 $input-bigger-icon-font-size: 16px !default;
 $input-small-icon-font-size: 12px !default;

package/styles/input/_bootstrap5-definition.scss

@@ -236,7 +236,7 @@ $float-label-font-color: $content-text-color-alt1 !default;
 $float-label-disbale-font-color: $content-text-color-alt3 !default;
 $input-placeholder-color: $placeholder-text-color !default;
 $input-group-disabled-color: $icon-color-disabled !default;
-$input-group-hovered-color: $icon-color-hover !default;
+$input-group-hovered-color: $secondary-text-color-hover !default;
 $input-readonly-bg-color: $content-bg-color !default;
 $input-readonly-color: $content-text-color-alt1 !default;
 $input-icon-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;

package/styles/input/_layout.scss

@@ -761,7 +761,6 @@
       @if $input-skin-name == 'tailwind3' {
         padding-left: 0;
         left: 12px;
-        top: 40%;
       }
     }
     @else if ($input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap5.3') {

package/styles/input/bootstrap4.css

@@ -2088,7 +2088,7 @@ textarea.e-input,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(90.2703862661, 97.7929184549, 104.4796137339);
   border-color: rgb(84.3605150215, 91.3905579399, 97.6394849785);
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input.e-success,
@@ -2295,7 +2295,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #495057;
-  color: #fff;
+  color: #f8f9fa;
 }
 
 .e-input-group input.e-input,

package/styles/input/bootstrap5-dark.css

@@ -2131,7 +2131,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2335,7 +2335,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #adb5bd;
-  color: #dee2e6;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/input/bootstrap5.css

@@ -2131,7 +2131,7 @@ textarea.e-input,
 .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
   background: rgb(91.8, 99.45, 106.25);
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input.e-success,
@@ -2335,7 +2335,7 @@ textarea.e-input::selection,
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #6c757d;
-  color: #343a40;
+  color: #fff;
 }
 
 .e-input-group input.e-input,

package/styles/input/tailwind3.css

@@ -529,7 +529,6 @@ label.e-float-text,
           transform: translate3d(-10px, -35px, 0) scale(1);
   padding-left: 0;
   left: 12px;
-  top: 40%;
 }
 
 .e-float-input.e-small input:focus ~ label.e-float-text,

package/styles/tailwind3-lite.css

@@ -541,7 +541,6 @@ label.e-float-text,
           transform: translate3d(-10px, -35px, 0) scale(1);
   padding-left: 0;
   left: 12px;
-  top: 40%;
 }
 
 .e-float-input.e-small input:focus ~ label.e-float-text,

package/styles/tailwind3.css

@@ -541,7 +541,6 @@ label.e-float-text,
           transform: translate3d(-10px, -35px, 0) scale(1);
   padding-left: 0;
   left: 12px;
-  top: 40%;
 }
 
 .e-float-input.e-small input:focus ~ label.e-float-text,