@syncfusion/ej2-inputs 24.2.7 → 25.1.35-579988

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

@@ -1,4 +1,4 @@
-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 { 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, containerAttributes, TEXTBOX_FOCUS } from '../input/input';
 import {ChangedEventArgs,FocusOutEventArgs,FocusInEventArgs,InputEventArgs} from "./textbox";
 import {ComponentModel} from '@syncfusion/ej2-base';
 

package/src/textbox/textbox.d.ts

@@ -59,6 +59,7 @@ export declare class TextBox extends Component<HTMLInputElement | HTMLTextAreaEl
     private textboxOptions;
     private inputPreviousValue;
     private isVue;
+    private clearButton;
     /**
      * Specifies the behavior of the TextBox such as text, password, email, etc.
      *
@@ -210,7 +211,6 @@ export declare class TextBox extends Component<HTMLInputElement | HTMLTextAreaEl
      * @private
      */
     getModuleName(): string;
-    private isBlank;
     protected preRender(): void;
     private checkAttributes;
     /**
@@ -220,10 +220,8 @@ export declare class TextBox extends Component<HTMLInputElement | HTMLTextAreaEl
      * @private
      */
     render(): void;
-    private updateHTMLAttrToWrapper;
-    private updateHTMLAttrToElement;
-    private updateCssClass;
-    private getInputValidClassList;
+    private updateHTMLAttributesToWrapper;
+    private updateHTMLAttributesToElement;
     private setInitialValue;
     private wireEvents;
     private animationHandler;

package/src/textbox/textbox.js

@@ -20,10 +20,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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';
+import { Input, containerAttributes, TEXTBOX_FOCUS } from '../input/input';
 var HIDE_CLEAR = 'e-clear-icon-hide';
-var TEXTBOX_FOCUS = 'e-input-focus';
-var containerAttr = ['title', 'style', 'class'];
 /**
  * Represents the TextBox component that allows the user to enter the values based on it's type.
  * ```html
@@ -82,7 +80,7 @@ var TextBox = /** @class */ (function (_super) {
                     {
                         var prevOnChange = this.isProtectedOnChange;
                         this.isProtectedOnChange = true;
-                        if (!this.isBlank(this.value)) {
+                        if (!Input.isBlank(this.value)) {
                             this.value = this.value.toString();
                         }
                         this.isProtectedOnChange = prevOnChange;
@@ -104,8 +102,8 @@ var TextBox = /** @class */ (function (_super) {
                     break;
                 case 'htmlAttributes':
                     {
-                        this.updateHTMLAttrToElement();
-                        this.updateHTMLAttrToWrapper();
+                        this.updateHTMLAttributesToElement();
+                        this.updateHTMLAttributesToWrapper();
                         this.checkAttributes(true);
                         this.multiline && !isNullOrUndefined(this.textarea) ? Input.validateInputType(this.textboxWrapper.container, this.textarea) : Input.validateInputType(this.textboxWrapper.container, this.element);
                     }
@@ -140,7 +138,7 @@ var TextBox = /** @class */ (function (_super) {
                     }
                     break;
                 case 'cssClass':
-                    this.updateCssClass(newProp.cssClass, oldProp.cssClass);
+                    Input.updateCssClass(newProp.cssClass, oldProp.cssClass, this.textboxWrapper.container);
                     break;
                 case 'locale':
                     this.globalize = new Internationalization(this.locale);
@@ -160,9 +158,6 @@ var TextBox = /** @class */ (function (_super) {
     TextBox.prototype.getModuleName = function () {
         return 'textbox';
     };
-    TextBox.prototype.isBlank = function (str) {
-        return (!str || /^\s*$/.test(str));
-    };
     TextBox.prototype.preRender = function () {
         this.cloneElement = this.element.cloneNode(true);
         this.formElement = closest(this.element, 'form');
@@ -193,7 +188,7 @@ var TextBox = /** @class */ (function (_super) {
             this.element = inputElement;
             setValue('ej2_instances', ejInstance, this.element);
         }
-        this.updateHTMLAttrToElement();
+        this.updateHTMLAttributesToElement();
         this.checkAttributes(false);
         if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) && this.element.value !== '') {
             this.setProperties({ value: this.element.value }, true);
@@ -229,7 +224,7 @@ var TextBox = /** @class */ (function (_super) {
             var apiAttributes = ['placeholder', 'disabled', 'value', 'readonly', 'type', 'autocomplete'];
             for (var index = 0; index < this.element.attributes.length; index++) {
                 var attributeName = this.element.attributes[index].nodeName;
-                if (this.element.hasAttribute(attributeName) && containerAttr.indexOf(attributeName) < 0 &&
+                if (this.element.hasAttribute(attributeName) && containerAttributes.indexOf(attributeName) < 0 &&
                     !(attributeName === 'id' || attributeName === 'type' || attributeName === 'e-mappinguid')) {
                     // e-mappinguid attribute is handled for Grid component.
                     this.textarea.setAttribute(attributeName, this.element.attributes[index].nodeValue);
@@ -296,7 +291,7 @@ var TextBox = /** @class */ (function (_super) {
     TextBox.prototype.render = function () {
         var updatedCssClassValue = this.cssClass;
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
-            updatedCssClassValue = this.getInputValidClassList(this.cssClass);
+            updatedCssClassValue = Input.getInputValidClassList(this.cssClass);
         }
         this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;
         this.textboxWrapper = Input.createInput({
@@ -311,7 +306,7 @@ var TextBox = /** @class */ (function (_super) {
                 showClearButton: this.showClearButton
             }
         });
-        this.updateHTMLAttrToWrapper();
+        this.updateHTMLAttributesToWrapper();
         if (this.isHiddenInput) {
             this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);
         }
@@ -341,49 +336,11 @@ var TextBox = /** @class */ (function (_super) {
         }
         this.renderComplete();
     };
-    TextBox.prototype.updateHTMLAttrToWrapper = function () {
-        if (!isNullOrUndefined(this.htmlAttributes)) {
-            for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
-                var key = _a[_i];
-                if (containerAttr.indexOf(key) > -1) {
-                    if (key === 'class') {
-                        var updatedClassValues = this.getInputValidClassList(this.htmlAttributes["" + key]);
-                        if (updatedClassValues !== '') {
-                            addClass([this.textboxWrapper.container], updatedClassValues.split(' '));
-                        }
-                    }
-                    else if (key === 'style') {
-                        var setStyle = this.textboxWrapper.container.getAttribute(key);
-                        setStyle = !isNullOrUndefined(setStyle) ? (setStyle + this.htmlAttributes["" + key]) :
-                            this.htmlAttributes["" + key];
-                        this.textboxWrapper.container.setAttribute(key, setStyle);
-                    }
-                    else {
-                        this.textboxWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
-                    }
-                }
-            }
-        }
+    TextBox.prototype.updateHTMLAttributesToWrapper = function () {
+        Input.updateHTMLAttributesToWrapper(this.htmlAttributes, this.textboxWrapper.container);
     };
-    TextBox.prototype.updateHTMLAttrToElement = function () {
-        if (!isNullOrUndefined(this.htmlAttributes)) {
-            for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
-                var key = _a[_i];
-                if (containerAttr.indexOf(key) < 0) {
-                    this.multiline && !isNullOrUndefined(this.textarea) ? this.textarea.setAttribute(key, this.htmlAttributes["" + key]) : this.element.setAttribute(key, this.htmlAttributes["" + key]);
-                }
-            }
-        }
-    };
-    TextBox.prototype.updateCssClass = function (newClass, oldClass) {
-        Input.setCssClass(this.getInputValidClassList(newClass), [this.textboxWrapper.container], this.getInputValidClassList(oldClass));
-    };
-    TextBox.prototype.getInputValidClassList = function (inputClassName) {
-        var result = inputClassName;
-        if (!isNullOrUndefined(inputClassName) && inputClassName !== '') {
-            result = (inputClassName.replace(/\s+/g, ' ')).trim();
-        }
-        return result;
+    TextBox.prototype.updateHTMLAttributesToElement = function () {
+        Input.updateHTMLAttributesToElement(this.htmlAttributes, this.respectiveElement ? this.respectiveElement : (this.multiline && !isNullOrUndefined(this.textarea) ? this.textarea : this.element));
     };
     TextBox.prototype.setInitialValue = function () {
         if (!this.isAngular) {
@@ -575,6 +532,9 @@ var TextBox = /** @class */ (function (_super) {
      */
     TextBox.prototype.destroy = function () {
         this.unWireEvents();
+        if (this.showClearButton) {
+            this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
+        }
         if (this.element.tagName === 'INPUT' && this.multiline) {
             detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);
             this.respectiveElement = this.element;
@@ -588,7 +548,11 @@ var TextBox = /** @class */ (function (_super) {
             detach(this.textboxWrapper.container);
         }
         this.textboxWrapper = null;
-        Input.destroy();
+        Input.destroy({
+            element: this.respectiveElement,
+            floatLabelType: this.floatLabelType,
+            properties: this.properties
+        }, this.clearButton);
         _super.prototype.destroy.call(this);
     };
     /**

package/styles/bootstrap-dark.css

@@ -5240,8 +5240,69 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
 .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
   border-color: #acacac;
 }
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable-line no-empty-source */
+.e-content-placeholder.e-textbox.e-placeholder-textbox {
+  background-size: 300px 33px;
+  min-height: 33px;
+}
+
+.e-bigger .e-content-placeholder.e-textbox.e-placeholder-textbox,
+.e-bigger.e-content-placeholder.e-textbox.e-placeholder-textbox {
+  background-size: 300px 40px;
+  min-height: 40px;
+}
+
+.e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
+  padding-right: 30px;
+}
+
+.e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
+  padding-left: 30px;
+}
+
+.e-bigger .e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
+  padding-right: 32px;
+}
+
+.e-bigger .e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
+  padding-left: 32px;
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable-line no-empty-source */ /* stylelint-disable-line no-empty-source */
+.e-input-group.e-multi-line-input.e-auto-width {
+  width: auto;
+}
+
+.e-input-group.e-multi-line-input textarea.e-resize-x {
+  resize: horizontal;
+}
+.e-input-group.e-multi-line-input textarea.e-resize-y {
+  resize: vertical;
+}
+.e-input-group.e-multi-line-input textarea.e-resize-xy {
+  resize: both;
+}
+.e-input-group.e-multi-line-input textarea.e-resize-none {
+  resize: none;
+}
+
+.e-float-input .e-clear-icon:hover,
+.e-float-input.e-control-wrapper .e-clear-icon:hover,
+.e-input-group .e-clear-icon:hover,
+.e-input-group.e-control-wrapper .e-clear-icon:hover {
+  background: none;
+  border: none;
+}
+
+.e-float-input:not(.e-disabled) .e-clear-icon:hover,
+.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
+.e-input-group:not(.e-disabled) .e-clear-icon:hover,
+.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
+  background: none;
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
@@ -7198,12 +7259,12 @@ body.e-colorpicker-overflow {
   -ms-grid-column: span 12;
       grid-column: span 12/span 12;
 }
-.e-data-form .e-label-left .e-form-item-wrapper {
+.e-data-form .e-label-position-left .e-form-item-wrapper {
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
   max-width: calc(75% - 12px);
 }
-.e-data-form .e-label-left .e-form-label {
+.e-data-form .e-label-position-left .e-form-label {
   margin-right: 12px;
   width: 25%;
   text-align: end;
@@ -7214,7 +7275,7 @@ body.e-colorpicker-overflow {
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
-.e-data-form .e-label-left .validation-message {
+.e-data-form .e-label-position-left .validation-message {
   display: -ms-flexbox;
   display: flex;
 }
@@ -7240,27 +7301,27 @@ body.e-colorpicker-overflow {
   height: 1px;
   border-bottom: 1px solid #1a1a1a;
 }
-.e-data-form .e-label-top {
+.e-data-form .e-label-position-top {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
       flex-direction: column;
   margin-top: 20px;
 }
-.e-data-form .e-label-top .e-label-right {
+.e-data-form .e-label-position-top .e-label-right {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
       align-items: center;
 }
-.e-data-form .e-label-top .e-label-right .e-switch-wrapper + .e-form-label {
+.e-data-form .e-label-position-top .e-label-right .e-switch-wrapper + .e-form-label {
   margin-top: 3px;
   margin-left: 5px;
 }
-.e-data-form .e-label-top .e-label-right .e-checkbox-wrapper + .e-form-label {
+.e-data-form .e-label-position-top .e-label-right .e-checkbox-wrapper + .e-form-label {
   margin-top: 5px;
 }
-.e-data-form .e-label-left {
+.e-data-form .e-label-position-left {
   display: -ms-flexbox;
   display: flex;
   text-align: center;

package/styles/bootstrap-dark.scss

@@ -4,6 +4,7 @@
 @import 'maskedtextbox/bootstrap-dark.scss';
 @import 'slider/bootstrap-dark.scss';
 @import 'textbox/bootstrap-dark.scss';
+@import 'textarea/bootstrap-dark.scss';
 @import 'uploader/bootstrap-dark.scss';
 @import 'color-picker/bootstrap-dark.scss';
 @import 'rating/bootstrap-dark.scss';

package/styles/bootstrap.css

@@ -5219,8 +5219,69 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
 .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
   border-color: #ccc;
 }
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable-line no-empty-source */
+.e-content-placeholder.e-textbox.e-placeholder-textbox {
+  background-size: 300px 33px;
+  min-height: 33px;
+}
+
+.e-bigger .e-content-placeholder.e-textbox.e-placeholder-textbox,
+.e-bigger.e-content-placeholder.e-textbox.e-placeholder-textbox {
+  background-size: 300px 40px;
+  min-height: 40px;
+}
+
+.e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
+  padding-right: 30px;
+}
+
+.e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
+  padding-left: 30px;
+}
+
+.e-bigger .e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
+  padding-right: 32px;
+}
+
+.e-bigger .e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
+  padding-left: 32px;
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable-line no-empty-source */ /* stylelint-disable-line no-empty-source */
+.e-input-group.e-multi-line-input.e-auto-width {
+  width: auto;
+}
+
+.e-input-group.e-multi-line-input textarea.e-resize-x {
+  resize: horizontal;
+}
+.e-input-group.e-multi-line-input textarea.e-resize-y {
+  resize: vertical;
+}
+.e-input-group.e-multi-line-input textarea.e-resize-xy {
+  resize: both;
+}
+.e-input-group.e-multi-line-input textarea.e-resize-none {
+  resize: none;
+}
+
+.e-float-input .e-clear-icon:hover,
+.e-float-input.e-control-wrapper .e-clear-icon:hover,
+.e-input-group .e-clear-icon:hover,
+.e-input-group.e-control-wrapper .e-clear-icon:hover {
+  background: none;
+  border: none;
+}
+
+.e-float-input:not(.e-disabled) .e-clear-icon:hover,
+.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
+.e-input-group:not(.e-disabled) .e-clear-icon:hover,
+.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
+  background: none;
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
@@ -7177,12 +7238,12 @@ body.e-colorpicker-overflow {
   -ms-grid-column: span 12;
       grid-column: span 12/span 12;
 }
-.e-data-form .e-label-left .e-form-item-wrapper {
+.e-data-form .e-label-position-left .e-form-item-wrapper {
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
   max-width: calc(75% - 12px);
 }
-.e-data-form .e-label-left .e-form-label {
+.e-data-form .e-label-position-left .e-form-label {
   margin-right: 12px;
   width: 25%;
   text-align: end;
@@ -7193,7 +7254,7 @@ body.e-colorpicker-overflow {
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
-.e-data-form .e-label-left .validation-message {
+.e-data-form .e-label-position-left .validation-message {
   display: -ms-flexbox;
   display: flex;
 }
@@ -7219,27 +7280,27 @@ body.e-colorpicker-overflow {
   height: 1px;
   border-bottom: 1px solid #000;
 }
-.e-data-form .e-label-top {
+.e-data-form .e-label-position-top {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
       flex-direction: column;
   margin-top: 20px;
 }
-.e-data-form .e-label-top .e-label-right {
+.e-data-form .e-label-position-top .e-label-right {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
       align-items: center;
 }
-.e-data-form .e-label-top .e-label-right .e-switch-wrapper + .e-form-label {
+.e-data-form .e-label-position-top .e-label-right .e-switch-wrapper + .e-form-label {
   margin-top: 3px;
   margin-left: 5px;
 }
-.e-data-form .e-label-top .e-label-right .e-checkbox-wrapper + .e-form-label {
+.e-data-form .e-label-position-top .e-label-right .e-checkbox-wrapper + .e-form-label {
   margin-top: 5px;
 }
-.e-data-form .e-label-left {
+.e-data-form .e-label-position-left {
   display: -ms-flexbox;
   display: flex;
   text-align: center;

package/styles/bootstrap.scss

@@ -4,6 +4,7 @@
 @import 'maskedtextbox/bootstrap.scss';
 @import 'slider/bootstrap.scss';
 @import 'textbox/bootstrap.scss';
+@import 'textarea/bootstrap.scss';
 @import 'uploader/bootstrap.scss';
 @import 'color-picker/bootstrap.scss';
 @import 'rating/bootstrap.scss';

package/styles/bootstrap4.css

@@ -5290,8 +5290,69 @@ textarea.e-input::-webkit-input-placeholder {
   background-color: transparent;
   border-color: transparent;
 }
+/* stylelint-disable property-no-vendor-prefix */
+/* stylelint-disable-line no-empty-source */
+.e-content-placeholder.e-textbox.e-placeholder-textbox {
+  background-size: 300px 33px;
+  min-height: 33px;
+}
+
+.e-bigger .e-content-placeholder.e-textbox.e-placeholder-textbox,
+.e-bigger.e-content-placeholder.e-textbox.e-placeholder-textbox {
+  background-size: 300px 40px;
+  min-height: 40px;
+}
+
+.e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
+  padding-right: 30px;
+}
+
+.e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
+  padding-left: 30px;
+}
+
+.e-bigger .e-input-group.e-input-focus.e-multi-line-input textarea.e-textbox {
+  padding-right: 32px;
+}
+
+.e-bigger .e-input-group.e-input-focus.e-rtl.e-multi-line-input textarea.e-textbox {
+  padding-left: 32px;
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 /* stylelint-disable-line no-empty-source */ /* stylelint-disable-line no-empty-source */
+.e-input-group.e-multi-line-input.e-auto-width {
+  width: auto;
+}
+
+.e-input-group.e-multi-line-input textarea.e-resize-x {
+  resize: horizontal;
+}
+.e-input-group.e-multi-line-input textarea.e-resize-y {
+  resize: vertical;
+}
+.e-input-group.e-multi-line-input textarea.e-resize-xy {
+  resize: both;
+}
+.e-input-group.e-multi-line-input textarea.e-resize-none {
+  resize: none;
+}
+
+.e-float-input .e-clear-icon:hover,
+.e-float-input.e-control-wrapper .e-clear-icon:hover,
+.e-input-group .e-clear-icon:hover,
+.e-input-group.e-control-wrapper .e-clear-icon:hover {
+  background: none;
+  border: none;
+}
+
+.e-float-input:not(.e-disabled) .e-clear-icon:hover,
+.e-float-input.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover,
+.e-input-group:not(.e-disabled) .e-clear-icon:hover,
+.e-input-group.e-control-wrapper:not(.e-disabled) .e-clear-icon:hover {
+  background: none;
+}
+
 /* stylelint-disable property-no-vendor-prefix */
 @keyframes material-spinner-rotate {
   0% {
@@ -7331,12 +7392,12 @@ body.e-colorpicker-overflow {
   -ms-grid-column: span 12;
       grid-column: span 12/span 12;
 }
-.e-data-form .e-label-left .e-form-item-wrapper {
+.e-data-form .e-label-position-left .e-form-item-wrapper {
   -ms-flex: 1 1 auto;
       flex: 1 1 auto;
   max-width: calc(75% - 12px);
 }
-.e-data-form .e-label-left .e-form-label {
+.e-data-form .e-label-position-left .e-form-label {
   margin-right: 12px;
   width: 25%;
   text-align: end;
@@ -7347,7 +7408,7 @@ body.e-colorpicker-overflow {
   -ms-flex-pack: start;
       justify-content: flex-start;
 }
-.e-data-form .e-label-left .validation-message {
+.e-data-form .e-label-position-left .validation-message {
   display: -ms-flexbox;
   display: flex;
 }
@@ -7373,27 +7434,27 @@ body.e-colorpicker-overflow {
   height: 1px;
   border-bottom: 1px solid #dee2e6;
 }
-.e-data-form .e-label-top {
+.e-data-form .e-label-position-top {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
       flex-direction: column;
   margin-top: 20px;
 }
-.e-data-form .e-label-top .e-label-right {
+.e-data-form .e-label-position-top .e-label-right {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-align: center;
       align-items: center;
 }
-.e-data-form .e-label-top .e-label-right .e-switch-wrapper + .e-form-label {
+.e-data-form .e-label-position-top .e-label-right .e-switch-wrapper + .e-form-label {
   margin-top: 3px;
   margin-left: 5px;
 }
-.e-data-form .e-label-top .e-label-right .e-checkbox-wrapper + .e-form-label {
+.e-data-form .e-label-position-top .e-label-right .e-checkbox-wrapper + .e-form-label {
   margin-top: 6px;
 }
-.e-data-form .e-label-left {
+.e-data-form .e-label-position-left {
   display: -ms-flexbox;
   display: flex;
   text-align: center;

package/styles/bootstrap4.scss

@@ -4,6 +4,7 @@
 @import 'maskedtextbox/bootstrap4.scss';
 @import 'slider/bootstrap4.scss';
 @import 'textbox/bootstrap4.scss';
+@import 'textarea/bootstrap4.scss';
 @import 'uploader/bootstrap4.scss';
 @import 'color-picker/bootstrap4.scss';
 @import 'rating/bootstrap4.scss';