@syncfusion/ej2-inputs 19.4.48 → 20.1.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 19.4.48
+*  version : 20.1.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@19.4.47",
+  "_id": "@syncfusion/ej2-inputs@20.1.47",
   "_inBundle": false,
-  "_integrity": "sha512-+59fMVBbHx1CR0Un3RaYGDuVC7jk91Z+Mfgf7FdMEcK2VCZ8N6zSuGh8/Yqtlyyml1bfa2ERur7M/ADJi5BhAw==",
+  "_integrity": "sha512-rCma6vTU5RKepKxtjizZsQPvWibkiX3WtNDFgS9UTA+75K6wCagt839cG7Xpzlt6S5E6WRoGABNoeK+dyVXC3w==",
   "_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-19.4.47.tgz",
-  "_shasum": "c3f4424e06dc13e83a60299ea8db829bfde227c9",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-20.1.47.tgz",
+  "_shasum": "683f590bd05d5c7ccbee926b8f1bac963d876340",
   "_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": "~19.4.48",
-    "@syncfusion/ej2-buttons": "~19.4.48",
-    "@syncfusion/ej2-popups": "~19.4.48",
-    "@syncfusion/ej2-splitbuttons": "~19.4.48"
+    "@syncfusion/ej2-base": "~20.1.48",
+    "@syncfusion/ej2-buttons": "~20.1.47",
+    "@syncfusion/ej2-popups": "~20.1.47",
+    "@syncfusion/ej2-splitbuttons": "~20.1.47"
   },
   "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": "19.4.48",
+  "version": "20.1.48",
   "sideEffects": false
 }

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

@@ -341,7 +341,7 @@ var ColorPicker = /** @class */ (function (_super) {
             }
             roundedColor = this.roundValue(colors[i]).toLowerCase();
             tile = this.createElement('span', {
-                className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false' }
+                className: TILE, attrs: { 'role': 'gridcell', 'aria-label': roundedColor, 'aria-selected': 'false', 'tabindex': '0' }
             });
             this.trigger('beforeTileRender', { element: tile, presetName: key, value: colors[i] });
             row.appendChild(tile);

package/src/common/signature-base.d.ts

@@ -19,12 +19,12 @@ export declare abstract class SignatureBase extends Component<HTMLCanvasElement>
     private timeout;
     private storedArgs;
     private isSignatureEmpty;
-    private signatureValue;
     private backgroundLoaded;
     private fileType;
     private fileName;
     private clearArray;
     private isBlazor;
+    private isResponsive;
     private dotnetRef;
     /**
      * Gets or sets the background color of the component.
@@ -71,17 +71,20 @@ export declare abstract class SignatureBase extends Component<HTMLCanvasElement>
      *
      */
     velocity: number;
+    /**
+     * Gets or sets the last signature url to maintain the persist state.
+     *
+     */
+    signatureValue: string;
     /**
      * To Initialize the component rendering
      *
      * @private
      * @param {HTMLCanvasElement} element - Specifies the canvas element.
-     * @param {parameter} parameter - Specifies only for the blazor parameter.
      * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
      * @returns {void}
      */
-    initialize(element: HTMLCanvasElement, parameter?: Parameter, dotnetRef?: BlazorDotnetObject): void;
-    private setBlazorParameter;
+    initialize(element: HTMLCanvasElement, dotnetRef?: BlazorDotnetObject): void;
     private wireEvents;
     private unwireEvents;
     private setHTMLProperties;
@@ -273,48 +276,3 @@ export interface SignatureChangeEventArgs {
      */
     actionName: string;
 }
-/**
- * Blazor parameter for signature component.
- */
-export interface Parameter {
-    /**
-     * Gets or sets the background color of the component.
-     */
-    backgroundColor: string;
-    /**
-     * Gets or sets the background image for the component.
-     */
-    backgroundImage: string;
-    /**
-     * Gets or sets the stroke color of the signature.
-     */
-    strokeColor: string;
-    /**
-     * Gets or sets whether to prevent the interaction in signature component.
-     */
-    isReadOnly: boolean;
-    /**
-     * Gets or sets whether to disable the signature component where the opacity is set to show disabled state.
-     */
-    disabled: boolean;
-    /**
-     * Gets or sets whether to save the signature along with Background Color and background Image while saving.
-     */
-    saveWithBackground: boolean;
-    /**
-     * Gets or sets the minimum stroke width for signature.
-     */
-    minStrokeWidth: number;
-    /**
-     * Gets or sets the maximum stroke width for signature.
-     */
-    maxStrokeWidth: number;
-    /**
-     * Gets or sets the velocity to calculate the stroke thickness based on the pressure of the contact on the digitizer surface.
-     */
-    velocity: number;
-    /**
-     * Gets or sets the last signature url to maintain the persist state.
-     */
-    signatureValue: string;
-}

package/src/common/signature-base.js

@@ -27,6 +27,7 @@ var SignatureBase = /** @class */ (function (_super) {
         _this.backgroundLoaded = null;
         _this.clearArray = [];
         _this.isBlazor = false;
+        _this.isResponsive = false;
         return _this;
     }
     /**
@@ -34,47 +35,29 @@ var SignatureBase = /** @class */ (function (_super) {
      *
      * @private
      * @param {HTMLCanvasElement} element - Specifies the canvas element.
-     * @param {parameter} parameter - Specifies only for the blazor parameter.
      * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
      * @returns {void}
      */
-    SignatureBase.prototype.initialize = function (element, parameter, dotnetRef) {
+    SignatureBase.prototype.initialize = function (element, dotnetRef) {
         this.element = element;
         this.canvasContext = this.element.getContext('2d');
         this.canvasContext.canvas.tabIndex = 0;
-        if (parameter) {
-            this.setBlazorParameter(parameter);
+        if (dotnetRef) {
             this.dotnetRef = dotnetRef;
+            this.isBlazor = true;
+            if (this.signatureValue) {
+                this.loadPersistedSignature();
+            }
         }
         this.setHTMLProperties();
         if (isNullOrUndefined(this.signatureValue)) {
             this.updateSnapCollection(true);
         }
         this.wireEvents();
-        this.isSignatureEmpty = true;
         if (!this.isBlazor) {
             this.trigger('created', null);
         }
     };
-    SignatureBase.prototype.setBlazorParameter = function (parameter) {
-        this.isBlazor = true;
-        this.backgroundColor = parameter.backgroundColor;
-        this.backgroundImage = parameter.backgroundImage;
-        this.disabled = parameter.disabled;
-        this.isReadOnly = parameter.isReadOnly;
-        this.maxStrokeWidth = parameter.maxStrokeWidth || 2;
-        this.minStrokeWidth = parameter.minStrokeWidth || 0.5;
-        this.velocity = parameter.velocity || 0.7;
-        this.strokeColor = parameter.strokeColor || '#000000';
-        this.saveWithBackground = parameter.saveWithBackground;
-        this.interval = 30;
-        this.previous = 0;
-        this.minDistance = 5;
-        this.signatureValue = parameter.signatureValue;
-        if (this.signatureValue) {
-            this.loadPersistedSignature();
-        }
-    };
     SignatureBase.prototype.wireEvents = function () {
         if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {
             EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
@@ -95,24 +78,21 @@ var SignatureBase = /** @class */ (function (_super) {
         }
         else {
             EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
-            EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
-            EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
-            EventHandler.remove(document, 'mouseup', this.mouseUpHandler);
             EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
             window.removeEventListener('resize', this.resizeHandler);
         }
     };
     SignatureBase.prototype.setHTMLProperties = function () {
-        if (this.element.height === 150) {
+        if (this.element.height === 150 && this.element.width === 300) {
             this.element.height = this.element.offsetHeight;
-        }
-        if (this.element.width === 300) {
             this.element.width = this.element.offsetWidth;
+            this.isResponsive = true;
         }
         this.canvasContext.scale(1, 1);
         this.canvasContext.fillStyle = this.strokeColor;
         if (this.backgroundImage) {
             this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
+            this.canvasContext.canvas.style.backgroundRepeat = "no-repeat";
         }
         else if (this.backgroundColor) {
             this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
@@ -191,9 +171,11 @@ var SignatureBase = /** @class */ (function (_super) {
     SignatureBase.prototype.resizeHandler = function () {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
-        this.canvasContext.canvas.width = this.element.offsetWidth;
-        this.canvasContext.canvas.height = this.element.offsetHeight;
-        this.canvasContext.scale(1, 1);
+        if (this.isResponsive) {
+            this.canvasContext.canvas.width = this.element.offsetWidth;
+            this.canvasContext.canvas.height = this.element.offsetHeight;
+            this.canvasContext.scale(1, 1);
+        }
         var restoreImg = new Image();
         restoreImg.src = this.snapColl[this.incStep];
         restoreImg.onload = function () {
@@ -681,6 +663,9 @@ var SignatureBase = /** @class */ (function (_super) {
         var proxy = this;
         var bitmapImage = new Image();
         bitmapImage.src = signature;
+        if (signature.slice(0, 4) !== 'data') {
+            bitmapImage.crossOrigin = 'anonymous';
+        }
         bitmapImage.onload = function () {
             Promise.all([
                 createImageBitmap(bitmapImage, 0, 0, width, height)
@@ -689,6 +674,9 @@ var SignatureBase = /** @class */ (function (_super) {
                 tempCanvas.width = width;
                 tempCanvas.height = height;
                 tempCanvas.getContext('2d').drawImage(results[0], 0, 0);
+                if (signature.slice(0, 4) !== 'data') {
+                    proxy.canvasContext.globalCompositeOperation = 'source-over';
+                }
                 proxy.canvasContext.drawImage(tempCanvas, 0, 0, width, height, 0, 0, proxy.element.width, proxy.element.height);
                 proxy.updateSnapCollection();
             });

package/src/slider/slider.d.ts

@@ -286,6 +286,7 @@ export declare class Slider extends Component<HTMLElement> implements INotifyPro
     private isBootstrap4;
     private isTailwind;
     private isBootstrap5;
+    private isFluent;
     private zIndex;
     private l10n;
     private internationalization;

package/src/slider/slider.js

@@ -440,6 +440,7 @@ var Slider = /** @class */ (function (_super) {
         this.isBootstrap4 = this.getTheme(this.sliderContainer) === 'bootstrap4';
         this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';
         this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';
+        this.isFluent = this.getTheme(this.sliderContainer) === 'FluentUI';
         this.isMaterialTooltip = this.isMaterial && this.type !== 'Range' && this.tooltip.isVisible;
     };
     Slider.prototype.createRangeBar = function () {
@@ -588,7 +589,9 @@ var Slider = /** @class */ (function (_super) {
     Slider.prototype.transitionEnd = function (e) {
         if (e.propertyName !== 'transform') {
             this.handleStart();
-            this.getHandle().style.transition = 'none';
+            if (!this.enableAnimation) {
+                this.getHandle().style.transition = 'none';
+            }
             if (this.type !== 'Default') {
                 this.rangeBar.style.transition = 'none';
             }
@@ -932,7 +935,7 @@ var Slider = /** @class */ (function (_super) {
     };
     Slider.prototype.renderTooltip = function () {
         this.tooltipObj = new Tooltip({
-            showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5,
+            showTipPointer: this.isBootstrap || this.isMaterial || this.isBootstrap4 || this.isTailwind || this.isBootstrap5 || this.isFluent,
             cssClass: classNames.sliderTooltip,
             height: this.isMaterial ? 30 : 'auto',
             animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },

package/src/textbox/textbox-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, Property, Event, EmitType, EventHandler, L10n, setValue, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, detach, Internationalization, getUniqueID, closest } from '@syncfusion/ej2-base';import { addClass, removeClass } from '@syncfusion/ej2-base';import { FloatLabelType, Input, InputObject } from '../input/input';
+import { Component, Property, Event, EmitType, EventHandler, L10n, setValue, getValue, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, detach, Internationalization, getUniqueID, closest } from '@syncfusion/ej2-base';import { addClass, removeClass } from '@syncfusion/ej2-base';import { FloatLabelType, Input, InputObject } from '../input/input';
 import {ChangedEventArgs,FocusOutEventArgs,FocusInEventArgs,InputEventArgs} from "./textbox";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/textbox/textbox.js

@@ -17,7 +17,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Property, Event, EventHandler, L10n, setValue, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { Component, Property, Event, EventHandler, L10n, setValue, getValue, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
 import { NotifyPropertyChanges, detach, Internationalization, getUniqueID, closest } from '@syncfusion/ej2-base';
 import { addClass, removeClass } from '@syncfusion/ej2-base';
 import { Input } from '../input/input';
@@ -193,6 +193,9 @@ var TextBox = /** @class */ (function (_super) {
         }
         this.updateHTMLAttrToElement();
         this.checkAttributes(false);
+        if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) && this.element.value !== '') {
+            this.setProperties({ value: this.element.value }, true);
+        }
         if (this.element.tagName !== 'TEXTAREA') {
             this.element.setAttribute('type', this.type);
         }
@@ -490,6 +493,10 @@ var TextBox = /** @class */ (function (_super) {
         this.preventChange = false;
         this.trigger('change', eventArgs);
         this.previousValue = this.value;
+        //EJ2CORE-738:For this task we update the textarea value to the input when input tag with multiline is present
+        if (this.element.tagName === 'INPUT' && this.multiline && Browser.info.name === 'mozilla') {
+            this.element.value = this.respectiveElement.value;
+        }
     };
     TextBox.prototype.bindClearEvent = function () {
         if (this.showClearButton && this.respectiveElement.tagName !== 'TEXTAREA') {

package/src/uploader/uploader.js

@@ -1588,16 +1588,18 @@ var Uploader = /** @class */ (function (_super) {
         fileList.classList.add(INVALID_FILE);
     };
     Uploader.prototype.createFormInput = function (fileData) {
-        var inputElement = this.element.cloneNode(true);
-        inputElement.classList.add(HIDDEN_INPUT);
-        for (var _i = 0, fileData_3 = fileData; _i < fileData_3.length; _i++) {
-            var listItem = fileData_3[_i];
-            listItem.input = inputElement;
-        }
-        inputElement.setAttribute('name', this.uploaderName);
-        this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).appendChild(inputElement);
-        if (this.browserName !== 'msie' && this.browserName !== 'edge') {
-            this.element.value = '';
+        if (this.browserName !== 'safari') {
+            var inputElement = this.element.cloneNode(true);
+            inputElement.classList.add(HIDDEN_INPUT);
+            for (var _i = 0, fileData_3 = fileData; _i < fileData_3.length; _i++) {
+                var listItem = fileData_3[_i];
+                listItem.input = inputElement;
+            }
+            inputElement.setAttribute('name', this.uploaderName);
+            this.uploadWrapper.querySelector('.' + INPUT_WRAPPER).appendChild(inputElement);
+            if (this.browserName !== 'msie' && this.browserName !== 'edge') {
+                this.element.value = '';
+            }
         }
     };
     Uploader.prototype.getFileSize = function (fileData) {
@@ -1991,7 +1993,7 @@ var Uploader = /** @class */ (function (_super) {
     };
     Uploader.prototype.removecanceledFile = function (e, file) {
         var liElement = this.getLiElement(file);
-        if (liElement.querySelector('.' + RETRY_ICON) || isNullOrUndefined(liElement.querySelector('.' + ABORT_ICON))) {
+        if (isNullOrUndefined(liElement) || liElement.querySelector('.' + RETRY_ICON) || isNullOrUndefined(liElement.querySelector('.' + ABORT_ICON))) {
             return;
         }
         this.updateStatus(file, this.localizedTexts('fileUploadCancel'), '5');
@@ -2228,6 +2230,9 @@ var Uploader = /** @class */ (function (_super) {
                 if (selectAll(uploadTemplate, document).length) {
                     return compile(select(uploadTemplate, document).innerHTML.trim());
                 }
+                else {
+                    return compile(uploadTemplate);
+                }
             }
             catch (exception) {
                 return compile(uploadTemplate);

package/styles/bootstrap-dark.css

@@ -162,11 +162,7 @@ textarea.e-input.e-bigger,
 .e-input-group.e-bigger,
 .e-bigger .e-input-group,
 .e-input-group.e-control-wrapper.e-bigger,
-.e-bigger .e-input-group.e-control-wrapper,
-.e-input-group.e-bigger.e-disabled,
-.e-bigger .e-input-group.e-disabled,
-.e-input-group.e-control-wrapper.e-bigger.e-disabled,
-.e-bigger .e-input-group.e-control-wrapper.e-disabled {
+.e-bigger .e-input-group.e-control-wrapper {
   font-size: 15px;
 }
 
@@ -261,7 +257,7 @@ textarea.e-input.e-bigger,
 .e-rtl .e-input-group input ~ .e-input-group-icon,
 .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
   border-left-width: 0;
-  border-right-width: 1px;
+  border-right: 1px solid #767676;
 }
 
 .e-input-group.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
@@ -548,8 +544,8 @@ textarea.e-input.e-small,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
-.e-small .e-bigger.e-input-group .e-input-group-icon,
-.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
+.e-small.e-bigger .e-input-group .e-input-group-icon,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   font-size: 12px;
@@ -2779,6 +2775,10 @@ textarea.e-input.e-bigger.e-small,
 .e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
+.e-small.e-bigger .e-float-input .e-clear-icon::before,
+.e-small.e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
+.e-small.e-bigger .e-input-group .e-clear-icon::before,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before,
 .e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon::before,
@@ -5267,6 +5267,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
   background-color: #6e6e6e;
   border: 1px solid #6e6e6e;
+  border-color: #6e6e6e;
 }
 
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-material-tooltip {
@@ -6287,6 +6288,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
 
 .e-upload .e-file-drop {
   color: #f0f0f0;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -6376,10 +6378,6 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   box-shadow: 0 0 0 transparent;
 }
 
-.e-upload-drag-hover {
-  outline: 2px dashed #0070f0;
-}
-
 .e-container .e-value-switch-btn::before {
   content: '\e431';
 }

package/styles/bootstrap.css

@@ -162,11 +162,7 @@ textarea.e-input.e-bigger,
 .e-input-group.e-bigger,
 .e-bigger .e-input-group,
 .e-input-group.e-control-wrapper.e-bigger,
-.e-bigger .e-input-group.e-control-wrapper,
-.e-input-group.e-bigger.e-disabled,
-.e-bigger .e-input-group.e-disabled,
-.e-input-group.e-control-wrapper.e-bigger.e-disabled,
-.e-bigger .e-input-group.e-control-wrapper.e-disabled {
+.e-bigger .e-input-group.e-control-wrapper {
   font-size: 15px;
 }
 
@@ -261,7 +257,7 @@ textarea.e-input.e-bigger,
 .e-rtl .e-input-group input ~ .e-input-group-icon,
 .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
   border-left-width: 0;
-  border-right-width: 1px;
+  border-right: 1px solid #ccc;
 }
 
 .e-input-group.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
@@ -548,8 +544,8 @@ textarea.e-input.e-small,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
-.e-small .e-bigger.e-input-group .e-input-group-icon,
-.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
+.e-small.e-bigger .e-input-group .e-input-group-icon,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   font-size: 12px;
@@ -2779,6 +2775,10 @@ textarea.e-input.e-bigger.e-small,
 .e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
+.e-small.e-bigger .e-float-input .e-clear-icon::before,
+.e-small.e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
+.e-small.e-bigger .e-input-group .e-clear-icon::before,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before,
 .e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon::before,
@@ -5246,6 +5246,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
 .e-control-wrapper.e-slider-container .e-slider .e-handle {
   background-color: #fff;
   border: 1px solid #ccc;
+  border-color: #ccc;
 }
 
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-material-tooltip {
@@ -6266,6 +6267,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
 
 .e-upload .e-file-drop {
   color: #333;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -6355,10 +6357,6 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
   box-shadow: 0 0 0 transparent;
 }
 
-.e-upload-drag-hover {
-  outline: 2px dashed #317ab9;
-}
-
 .e-container .e-value-switch-btn::before {
   content: '\e431';
 }

package/styles/bootstrap4.css

@@ -162,11 +162,7 @@ textarea.e-input.e-bigger,
 .e-input-group.e-bigger,
 .e-bigger .e-input-group,
 .e-input-group.e-control-wrapper.e-bigger,
-.e-bigger .e-input-group.e-control-wrapper,
-.e-input-group.e-bigger.e-disabled,
-.e-bigger .e-input-group.e-disabled,
-.e-input-group.e-control-wrapper.e-bigger.e-disabled,
-.e-bigger .e-input-group.e-control-wrapper.e-disabled {
+.e-bigger .e-input-group.e-control-wrapper {
   font-size: 16px;
 }
 
@@ -261,7 +257,7 @@ textarea.e-input.e-bigger,
 .e-rtl .e-input-group input ~ .e-input-group-icon,
 .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
   border-left-width: 0;
-  border-right-width: 1px;
+  border-right: 1px solid #ced4da;
 }
 
 .e-input-group.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
@@ -548,8 +544,8 @@ textarea.e-input.e-small,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
-.e-small .e-bigger.e-input-group .e-input-group-icon,
-.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
+.e-small.e-bigger .e-input-group .e-input-group-icon,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   font-size: 12px;
@@ -2779,6 +2775,10 @@ textarea.e-input.e-bigger.e-small,
 .e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
+.e-small.e-bigger .e-float-input .e-clear-icon::before,
+.e-small.e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
+.e-small.e-bigger .e-input-group .e-clear-icon::before,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before,
 .e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon::before,
@@ -4810,8 +4810,6 @@ textarea.e-input::-webkit-input-placeholder {
 
 .e-bigger .e-control-wrapper.e-slider-container.e-horizontal .e-slider .e-handle,
 .e-control-wrapper.e-slider-container.e-bigger.e-horizontal .e-slider .e-handle {
-  margin-left: -9px;
-  top: calc(50% - 9px);
   margin-left: -8px;
   top: calc(50% - 8px);
 }
@@ -6352,6 +6350,7 @@ textarea.e-input::-webkit-input-placeholder {
 
 .e-upload .e-file-drop {
   color: #212529;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -6441,10 +6440,6 @@ textarea.e-input::-webkit-input-placeholder {
   box-shadow: 0 0 0 transparent;
 }
 
-.e-upload-drag-hover {
-  outline: dashed 2px #007bff;
-}
-
 .e-container .e-value-switch-btn::before {
   content: '\e799';
 }