@syncfusion/ej2-inputs 24.2.7 → 25.1.35

package/dist/es6/ej2-inputs.es5.js

@@ -21,6 +21,14 @@ var CLASSNAMES = {
     INPUTCUSTOMTAG: 'e-input-custom-tag',
     FLOATCUSTOMTAG: 'e-float-custom-tag'
 };
+/**
+ * Defines the constant attributes for the input element container.
+ */
+var containerAttributes = ['title', 'style', 'class'];
+/**
+ * Defines the constant focus class for the input element.
+ */
+var TEXTBOX_FOCUS = 'e-input-focus';
 /**
  * Base for Input creation through util methods.
  */
@@ -37,6 +45,7 @@ var Input;
      *
      */
     function createInput(args, internalCreateElement) {
+        args.element.__eventHandlers = {};
         var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;
         var inputObject = { container: null, buttons: [], clearButton: null };
         floatType = args.floatLabelType;
@@ -74,37 +83,64 @@ var Input;
         return inputObject;
     }
     Input.createInput = createInput;
+    function bindFocusEventHandler(args) {
+        var parent = getParentNode(args.element);
+        if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline') || parent.classList.contains('e-filled')) {
+            parent.classList.add('e-input-focus');
+        }
+        if (args.floatLabelType === 'Auto') {
+            setTimeout(function () {
+                Input.calculateWidth(args.element, parent);
+            }, 80);
+        }
+    }
+    function bindBlurEventHandler(args) {
+        var parent = getParentNode(args.element);
+        if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline') || parent.classList.contains('e-filled')) {
+            parent.classList.remove('e-input-focus');
+        }
+        if (args.floatLabelType === 'Auto' && args.element.value === '') {
+            setTimeout(function () {
+                Input.calculateWidth(args.element, parent);
+            }, 80);
+        }
+    }
+    function bindInputEventHandler(args) {
+        checkInputValue(args.floatLabelType, args.element);
+    }
     function bindInitialEvent(args) {
         checkInputValue(args.floatLabelType, args.element);
-        args.element.addEventListener('focus', function () {
-            var parent = getParentNode(this);
-            if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline')
-                || parent.classList.contains('e-filled')) {
-                parent.classList.add('e-input-focus');
-            }
-            if (args.floatLabelType === 'Auto') {
-                setTimeout(function () {
-                    Input.calculateWidth(args.element, parent);
-                }, 80);
-            }
-        });
-        args.element.addEventListener('blur', function () {
-            var parent = getParentNode(this);
-            if (parent.classList.contains('e-input-group') || parent.classList.contains('e-outline')
-                || parent.classList.contains('e-filled')) {
-                parent.classList.remove('e-input-focus');
-            }
-            if (args.floatLabelType === 'Auto' && args.element.value === '') {
-                setTimeout(function () {
-                    Input.calculateWidth(args.element, parent);
-                }, 80);
-            }
-        });
-        args.element.addEventListener('input', function () {
-            checkInputValue(floatType, args.element);
-        });
+        var focusHandler = function () { return bindFocusEventHandler(args); };
+        var blurHandler = function () { return bindBlurEventHandler(args); };
+        var inputHandler = function () { return bindInputEventHandler(args); };
+        args.element.addEventListener('focus', focusHandler);
+        args.element.addEventListener('blur', blurHandler);
+        args.element.addEventListener('input', inputHandler);
+        args.element.__eventHandlers["inputFocusHandler"] = { focusHandler: focusHandler };
+        args.element.__eventHandlers["inputBlurHandler"] = { blurHandler: blurHandler };
+        args.element.__eventHandlers["inputHandler"] = { inputHandler: inputHandler };
     }
     Input.bindInitialEvent = bindInitialEvent;
+    function unbindInitialEvent(args) {
+        if (!isNullOrUndefined(args.element)) {
+            if (!isNullOrUndefined(args.element.__eventHandlers)) {
+                if (!isNullOrUndefined(args.element.__eventHandlers["inputFocusHandler"])
+                    && !isNullOrUndefined(args.element.__eventHandlers["inputBlurHandler"])
+                    && !isNullOrUndefined(args.element.__eventHandlers["inputHandler"])) {
+                    var focusHandler_1 = args.element.__eventHandlers["inputFocusHandler"].focusHandler;
+                    var blurHandler_1 = args.element.__eventHandlers["inputBlurHandler"].blurHandler;
+                    var inputHandler_1 = args.element.__eventHandlers["inputHandler"].inputHandler;
+                    args.element.removeEventListener('focus', focusHandler_1);
+                    args.element.removeEventListener('blur', blurHandler_1);
+                    args.element.removeEventListener('input', inputHandler_1);
+                    // Clean up stored bound functions
+                    delete args.element.__eventHandlers["inputFocusHandler"];
+                    delete args.element.__eventHandlers["inputBlurHandler"];
+                    delete args.element.__eventHandlers["inputHandler"];
+                }
+            }
+        }
+    }
     function checkInputValue(floatLabelType, inputElement) {
         var inputValue = inputElement.value;
         var inputParent = inputElement.parentElement;
@@ -154,8 +190,16 @@ var Input;
     }
     Input.wireFloatingEvents = wireFloatingEvents;
     function unwireFloatingEvents(element) {
-        element.removeEventListener('focus', _focusFn);
-        element.removeEventListener('blur', _blurFn);
+        if (!isNullOrUndefined(element)) {
+            element.removeEventListener('focus', _focusFn);
+            element.removeEventListener('blur', _blurFn);
+        }
+    }
+    function inputEventHandler(args) {
+        validateLabel(args.element, args.floatLabelType);
+    }
+    function blurEventHandler(args) {
+        validateLabel(args.element, args.floatLabelType);
     }
     function createFloatingInput(args, inputObject, internalCreateElement) {
         var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;
@@ -211,19 +255,36 @@ var Input;
             addClass([floatLabelElement], CLASSNAMES.LABELTOP);
         }
         if (args.floatLabelType === 'Auto') {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            args.element.addEventListener('input', function (event) {
-                validateLabel(args.element, args.floatLabelType);
-            });
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            args.element.addEventListener('blur', function (event) {
-                validateLabel(args.element, args.floatLabelType);
-            });
+            var inputFloatHandler = function () { return inputEventHandler(args); };
+            var blurFloatHandler = function () { return blurEventHandler(args); };
+            // Add event listeners using the defined functions
+            args.element.addEventListener('input', inputFloatHandler);
+            args.element.addEventListener('blur', blurFloatHandler);
+            // Store the event handler functions to remove them later
+            args.element.__eventHandlers["floatInputHandler"] = { inputFloatHandler: inputFloatHandler };
+            args.element.__eventHandlers["floatBlurHandler"] = { blurFloatHandler: blurFloatHandler };
+        }
+        else {
+            unWireFloatLabelEvents(args);
         }
         if (!isNullOrUndefined(args.element.getAttribute('id'))) {
             floatLabelElement.setAttribute('for', args.element.getAttribute('id'));
         }
     }
+    function unWireFloatLabelEvents(args) {
+        if (!isNullOrUndefined(args.element) && !isNullOrUndefined(args.element.__eventHandlers)
+            && !isNullOrUndefined(args.element.__eventHandlers["floatInputHandler"])
+            && !isNullOrUndefined(args.element.__eventHandlers["floatBlurHandler"])) {
+            var inputFloatHandler = args.element.__eventHandlers["floatInputHandler"].inputFloatHandler;
+            var blurFloatHandler = args.element.__eventHandlers["floatBlurHandler"].blurFloatHandler;
+            // Remove the event listeners using the defined functions
+            args.element.removeEventListener('input', inputFloatHandler);
+            args.element.removeEventListener('blur', blurFloatHandler);
+            // Clean up stored event handler functions
+            delete args.element.__eventHandlers["floatInputHandler"];
+            delete args.element.__eventHandlers["floatBlurHandler"];
+        }
+    }
     function checkFloatLabelType(type, container) {
         if (type === 'Always' && container.classList.contains('e-outline')) {
             container.classList.add('e-valid-input');
@@ -311,40 +372,89 @@ var Input;
         button.setAttribute('aria-label', 'close');
         return button;
     }
+    function clickHandler(event, element, button) {
+        if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {
+            event.preventDefault();
+            if (element !== document.activeElement) {
+                element.focus();
+            }
+            element.value = '';
+            addClass([button], CLASSNAMES.CLEARICONHIDE);
+        }
+    }
+    function inputHandler(element, button) {
+        updateIconState(element.value, button);
+    }
+    function focusHandler(element, button) {
+        updateIconState(element.value, button, element.readOnly);
+    }
+    function blurHandler(element, button) {
+        setTimeout(function () {
+            if (!isNullOrUndefined(button)) {
+                addClass([button], CLASSNAMES.CLEARICONHIDE);
+                button = !isNullOrUndefined(element) && element.classList.contains('e-combobox') ? null : button;
+            }
+        }, 200);
+    }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     function wireClearBtnEvents(element, button, container) {
         if (isBindClearAction === undefined || isBindClearAction) {
-            button.addEventListener('click', function (event) {
-                if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {
-                    event.preventDefault();
-                    if (element !== document.activeElement) {
-                        element.focus();
+            var clickHandlerEvent = function (e) { return clickHandler(e, element, button); };
+            button.addEventListener('click', clickHandlerEvent);
+            element.__eventHandlers["clearClickHandler"] = { clickHandlerEvent: clickHandlerEvent };
+        }
+        var inputHandlerEvent = function () { return inputHandler(element, button); };
+        var focusHandlerEvent = function () { return focusHandler(element, button); };
+        var blurHandlerEvent = function () { return blurHandler(element, button); };
+        element.addEventListener('input', inputHandlerEvent);
+        element.addEventListener('focus', focusHandlerEvent);
+        element.addEventListener('blur', blurHandlerEvent);
+        // Store the bound functions to remove them later
+        element.__eventHandlers["clearInputHandler"] = { inputHandlerEvent: inputHandlerEvent };
+        element.__eventHandlers["clearFocusHandler"] = { focusHandlerEvent: focusHandlerEvent };
+        element.__eventHandlers["clearBlurHandler"] = { blurHandlerEvent: blurHandlerEvent };
+    }
+    Input.wireClearBtnEvents = wireClearBtnEvents;
+    function unWireClearBtnEvents(element, button) {
+        if (!isNullOrUndefined(element) && !isNullOrUndefined(element.__eventHandlers)) {
+            if (!isNullOrUndefined(element.__eventHandlers["clearClickHandler"])) {
+                var clickHandlerEvent = element.__eventHandlers["clearClickHandler"].clickHandlerEvent;
+                if (isBindClearAction === undefined || isBindClearAction) {
+                    if (!isNullOrUndefined(button)) {
+                        button.removeEventListener('click', clickHandlerEvent);
                     }
-                    element.value = '';
-                    addClass([button], CLASSNAMES.CLEARICONHIDE);
                 }
-            });
+                delete element.__eventHandlers["clearClickHandler"];
+            }
+            if (!isNullOrUndefined(element.__eventHandlers["clearInputHandler"])
+                && !isNullOrUndefined(element.__eventHandlers["clearFocusHandler"])
+                && !isNullOrUndefined(element.__eventHandlers["clearBlurHandler"])) {
+                var inputHandlerEvent = element.__eventHandlers["clearInputHandler"].inputHandlerEvent;
+                var focusHandlerEvent = element.__eventHandlers["clearFocusHandler"].focusHandlerEvent;
+                var blurHandlerEvent = element.__eventHandlers["clearBlurHandler"].blurHandlerEvent;
+                element.removeEventListener('input', inputHandlerEvent);
+                element.removeEventListener('focus', focusHandlerEvent);
+                element.removeEventListener('blur', blurHandlerEvent);
+                // Clean up stored Event functions
+                delete element.__eventHandlers["clearInputHandler"];
+                delete element.__eventHandlers["clearFocusHandler"];
+                delete element.__eventHandlers["clearBlurHandler"];
+            }
         }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        element.addEventListener('input', function (event) {
-            updateIconState(element.value, button);
-        });
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        element.addEventListener('focus', function (event) {
-            updateIconState(element.value, button, element.readOnly);
-        });
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        element.addEventListener('blur', function (event) {
-            setTimeout(function () {
-                if (!isNullOrUndefined(button)) {
-                    addClass([button], CLASSNAMES.CLEARICONHIDE);
-                    button = !isNullOrUndefined(element) && element.classList.contains('e-combobox') ? null : button;
-                }
-            }, 200);
-        });
     }
-    Input.wireClearBtnEvents = wireClearBtnEvents;
-    function destroy() {
+    function destroy(args, button) {
+        if (button === void 0) { button = null; }
+        unbindInitialEvent(args);
+        if (args.floatLabelType === 'Auto') {
+            unWireFloatLabelEvents(args);
+        }
+        if (args.properties.showClearButton) {
+            unWireClearBtnEvents(args.element, button);
+        }
+        unwireFloatingEvents(args.element);
+        if (!isNullOrUndefined(args.element)) {
+            delete args.element.__eventHandlers;
+        }
         
     }
     Input.destroy = destroy;
@@ -565,7 +675,7 @@ var Input;
      * - Element to be enabled or disabled.
      */
     function setEnabled(isEnable, element, floatLabelType, inputContainer) {
-        var disabledAttrs = { 'disabled': 'disabled', 'aria-disabled': 'true' };
+        var disabledAttrs = { 'disabled': '', 'aria-disabled': 'true' };
         var considerWrapper = isNullOrUndefined(inputContainer) ? false : true;
         if (isEnable) {
             element.classList.remove(CLASSNAMES.DISABLE);
@@ -680,11 +790,11 @@ var Input;
         var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;
         var container = closest(input, '.' + CLASSNAMES.INPUTGROUP);
         floatType = type;
+        var customTag = container.tagName;
+        customTag = customTag !== 'DIV' && customTag !== 'SPAN' ? customTag : null;
+        var args = { element: input, floatLabelType: type,
+            customTag: customTag, properties: { placeholder: placeholder } };
         if (type !== 'Never') {
-            var customTag = container.tagName;
-            customTag = customTag !== 'DIV' && customTag !== 'SPAN' ? customTag : null;
-            var args = { element: input, floatLabelType: type,
-                customTag: customTag, properties: { placeholder: placeholder } };
             var iconEle = container.querySelector('.e-clear-icon');
             var inputObj = { container: container };
             input.classList.remove(CLASSNAMES.INPUT);
@@ -715,6 +825,9 @@ var Input;
                 wrapper.insertBefore(floatText, iconEle);
             }
         }
+        else {
+            unWireFloatLabelEvents(args);
+        }
         checkFloatLabelType(type, input.parentElement);
     }
     Input.addFloating = addFloating;
@@ -898,6 +1011,58 @@ var Input;
         }
     }
     Input.validateInputType = validateInputType;
+    function updateHTMLAttributesToElement(htmlAttributes, element) {
+        if (!isNullOrUndefined(htmlAttributes)) {
+            for (var _i = 0, _a = Object.keys(htmlAttributes); _i < _a.length; _i++) {
+                var key = _a[_i];
+                if (containerAttributes.indexOf(key) < 0) {
+                    element.setAttribute(key, htmlAttributes["" + key]);
+                }
+            }
+        }
+    }
+    Input.updateHTMLAttributesToElement = updateHTMLAttributesToElement;
+    function updateCssClass(newClass, oldClass, container) {
+        setCssClass(getInputValidClassList(newClass), [container], getInputValidClassList(oldClass));
+    }
+    Input.updateCssClass = updateCssClass;
+    function getInputValidClassList(inputClassName) {
+        var result = inputClassName;
+        if (!isNullOrUndefined(inputClassName) && inputClassName !== '') {
+            result = (inputClassName.replace(/\s+/g, ' ')).trim();
+        }
+        return result;
+    }
+    Input.getInputValidClassList = getInputValidClassList;
+    function updateHTMLAttributesToWrapper(htmlAttributes, container) {
+        if (!isNullOrUndefined(htmlAttributes)) {
+            for (var _i = 0, _a = Object.keys(htmlAttributes); _i < _a.length; _i++) {
+                var key = _a[_i];
+                if (containerAttributes.indexOf(key) > -1) {
+                    if (key === 'class') {
+                        var updatedClassValues = this.getInputValidClassList(htmlAttributes["" + key]);
+                        if (updatedClassValues !== '') {
+                            addClass([container], updatedClassValues.split(' '));
+                        }
+                    }
+                    else if (key === 'style') {
+                        var setStyle = container.getAttribute(key);
+                        setStyle = !isNullOrUndefined(setStyle) ? (setStyle + htmlAttributes["" + key]) :
+                            htmlAttributes["" + key];
+                        container.setAttribute(key, setStyle);
+                    }
+                    else {
+                        container.setAttribute(key, htmlAttributes["" + key]);
+                    }
+                }
+            }
+        }
+    }
+    Input.updateHTMLAttributesToWrapper = updateHTMLAttributesToWrapper;
+    function isBlank(inputString) {
+        return (!inputString || /^\s*$/.test(inputString));
+    }
+    Input.isBlank = isBlank;
 })(Input || (Input = {}));
 /* eslint-enable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */
 
@@ -2011,6 +2176,9 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
      */
     NumericTextBox.prototype.destroy = function () {
         this.unwireEvents();
+        if (this.showClearButton) {
+            this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
+        }
         detach(this.hiddenInput);
         if (this.showSpinButton) {
             this.unwireSpinBtnEvents();
@@ -2034,7 +2202,11 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         this.blurEventArgs = null;
         this.focusEventArgs = null;
         this.inputWrapper = null;
-        Input.destroy();
+        Input.destroy({
+            element: this.element,
+            floatLabelType: this.floatLabelType,
+            properties: this.properties
+        }, this.clearButton);
         _super.prototype.destroy.call(this);
     };
     /* eslint-disable valid-jsdoc, jsdoc/require-returns */
@@ -2460,6 +2632,7 @@ function unwireEvents() {
     EventHandler.remove(this.element, 'focus', maskInputFocusHandler);
     EventHandler.remove(this.element, 'blur', maskInputBlurHandler);
     EventHandler.remove(this.element, 'paste', maskInputPasteHandler);
+    EventHandler.remove(this.element, 'drop', maskInputDropHandler);
     EventHandler.remove(this.element, 'cut', maskInputCutHandler);
     EventHandler.remove(this.element, 'mousedown', maskInputMouseDownHandler);
     EventHandler.remove(this.element, 'mouseup', maskInputMouseUpHandler);
@@ -3901,6 +4074,9 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
      */
     MaskedTextBox.prototype.destroy = function () {
         unwireEvents.call(this);
+        if (this.showClearButton) {
+            this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
+        }
         var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
             'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-invalid'];
         for (var i = 0; i < attrArray.length; i++) {
@@ -3912,7 +4088,11 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
             detach(this.inputObj.container);
         }
         this.blurEventArgs = null;
-        Input.destroy();
+        Input.destroy({
+            element: this.element,
+            floatLabelType: this.floatLabelType,
+            properties: this.properties
+        }, this.clearButton);
         this.changeEventArgs = null;
         this.inputObj = null;
         _super.prototype.destroy.call(this);
@@ -6967,7 +7147,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         Property('')
     ], Slider.prototype, "cssClass", void 0);
     __decorate$2([
-        Property(false)
+        Property(true)
     ], Slider.prototype, "enableHtmlSanitizer", void 0);
     __decorate$2([
         Event()
@@ -11654,7 +11834,7 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
         if (this.cssClass) {
             addClass([popupEle], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
-        if (Browser.isDevice) {
+        if (Browser.isDevice && !this.createPopupOnClick) {
             var popupInst = this.getPopupInst();
             popupInst.relateTo = document.body;
             popupInst.position = { X: 'center', Y: 'center' };
@@ -11693,6 +11873,15 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
                     _this.createWidget();
                     popupEle.style.display = '';
                     if (Browser.isDevice) {
+                        if (_this.createPopupOnClick) {
+                            var popupInst = _this.getPopupInst();
+                            popupInst.relateTo = document.body;
+                            popupInst.position = { X: 'center', Y: 'center' };
+                            popupInst.targetType = 'container';
+                            popupInst.collision = { X: 'fit', Y: 'fit' };
+                            popupInst.offsetY = 4;
+                            popupEle.style.zIndex = getZindexPartial(_this.splitBtn.element).toString();
+                        }
                         _this.modal = _this.createElement('div');
                         _this.modal.className = 'e-' + _this.getModuleName() + ' e-modal';
                         _this.modal.style.display = 'none';
@@ -13437,8 +13626,6 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 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
@@ -13497,7 +13684,7 @@ var TextBox = /** @__PURE__ @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;
@@ -13519,8 +13706,8 @@ var TextBox = /** @__PURE__ @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);
                     }
@@ -13555,7 +13742,7 @@ var TextBox = /** @__PURE__ @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);
@@ -13575,9 +13762,6 @@ var TextBox = /** @__PURE__ @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');
@@ -13608,7 +13792,7 @@ var TextBox = /** @__PURE__ @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);
@@ -13644,7 +13828,7 @@ var TextBox = /** @__PURE__ @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);
@@ -13711,7 +13895,7 @@ var TextBox = /** @__PURE__ @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({
@@ -13726,7 +13910,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
                 showClearButton: this.showClearButton
             }
         });
-        this.updateHTMLAttrToWrapper();
+        this.updateHTMLAttributesToWrapper();
         if (this.isHiddenInput) {
             this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);
         }
@@ -13756,49 +13940,11 @@ var TextBox = /** @__PURE__ @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.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.updateHTMLAttributesToWrapper = function () {
+        Input.updateHTMLAttributesToWrapper(this.htmlAttributes, this.textboxWrapper.container);
     };
-    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) {
@@ -13990,6 +14136,9 @@ var TextBox = /** @__PURE__ @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;
@@ -14003,7 +14152,11 @@ var TextBox = /** @__PURE__ @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);
     };
     /**
@@ -14182,7 +14335,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
  * Uploader modules
  */
 
-var __extends$8 = (undefined && undefined.__extends) || (function () {
+var __extends$7 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -14195,108 +14348,806 @@ var __extends$8 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var SignatureBase = /** @__PURE__ @class */ (function (_super) {
-    __extends$8(SignatureBase, _super);
-    function SignatureBase() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        /* minDistance(distance between the two point) was calaculated for smoothness.*/
-        _this.minDistance = 5;
-        _this.previous = 0;
-        /* interval handles for the smoothness in the mouse move event.*/
-        _this.interval = 30;
-        _this.timeout = null;
-        _this.isSignatureEmpty = true;
-        _this.backgroundLoaded = null;
-        _this.isBlazor = false;
-        _this.isResponsive = false;
-        _this.signPointsColl = [];
-        _this.signRatioPointsColl = [];
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+var HIDE_CLEAR$1 = 'e-clear-icon-hide';
+var AUTO_WIDTH = 'e-auto-width';
+var RESIZE_X = 'e-resize-x';
+var RESIZE_Y = 'e-resize-y';
+var RESIZE_XY = 'e-resize-xy';
+var RESIZE_NONE = 'e-resize-none';
+var TextArea = /** @__PURE__ @class */ (function (_super) {
+    __extends$7(TextArea, _super);
+    function TextArea(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        _this.previousValue = null;
+        _this.isForm = false;
+        _this.inputPreviousValue = null;
+        _this.isAngular = false;
+        _this.isVue = false;
+        _this.textareaOptions = options;
         return _this;
     }
     /**
-     * To Initialize the component rendering
+     * Calls internally if any of the property value is changed.
      *
-     * @private
-     * @param {HTMLCanvasElement} element - Specifies the canvas element.
-     * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
+     * @param {TextAreaModel} newProp - Returns the dynamic property value of the component.
+     * @param {TextAreaModel} oldProp - Returns the previous property value of the component.
      * @returns {void}
+     * @private
      */
-    SignatureBase.prototype.initialize = function (element, dotnetRef) {
-        this.clearArray = [];
-        this.element = element;
-        this.canvasContext = this.element.getContext('2d');
-        this.canvasContext.canvas.tabIndex = -1;
-        if (dotnetRef) {
-            this.dotnetRef = dotnetRef;
-            this.isBlazor = true;
-            if (this.signatureValue) {
-                this.loadPersistedSignature();
-            }
-        }
-        this.setHTMLProperties();
-        if (isNullOrUndefined(this.signatureValue)) {
-            this.updateSnapCollection(true);
-        }
-        this.wireEvents();
-        if (!this.isBlazor) {
-            this.trigger('created', null);
-        }
-    };
-    SignatureBase.prototype.wireEvents = function () {
-        if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {
-            EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
-            EventHandler.add(this.canvasContext.canvas, 'keydown', this.keyboardHandler, this);
-            window.addEventListener('resize', this.resizeHandler.bind(this));
-        }
-        else if (this.pointColl) {
-            EventHandler.add(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler, this);
-            EventHandler.add(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler, this);
-            EventHandler.add(document, 'mouseup', this.mouseUpHandler, this);
-        }
-    };
-    SignatureBase.prototype.unwireEvents = function (type) {
-        if (type === 'mouseup' || type === 'touchend') {
-            EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
-            EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
-            EventHandler.remove(document, 'mouseup', this.mouseUpHandler);
-        }
-        else {
-            EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
-            EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
-            window.removeEventListener('resize', this.resizeHandler);
-        }
-    };
-    SignatureBase.prototype.setHTMLProperties = function () {
-        if (this.element.height === 150 && this.element.width === 300 && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {
-            this.element.height = this.element.offsetHeight;
-            this.element.width = this.element.offsetWidth;
-            this.isResponsive = true;
-        }
-        else if ((this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1)
-            && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {
-            this.element.height = this.element.offsetHeight;
-            this.element.width = this.element.offsetWidth;
-        }
-        this.canvasContext.fillStyle = this.strokeColor;
-        this.tempCanvas = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-temp' });
-        this.tempContext = this.tempCanvas.getContext('2d');
-        this.tempCanvas.width = this.element.width;
-        this.tempCanvas.height = this.element.height;
-        if (this.backgroundImage) {
-            this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
-            this.canvasContext.canvas.style.backgroundRepeat = 'no-repeat';
-            if (this.saveWithBackground) {
-                this.setBackgroundImage(this.backgroundImage, 'temp');
-            }
-        }
-        else if (this.backgroundColor) {
-            this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
-        }
-    };
-    // eslint-disable-next-line
-    SignatureBase.prototype.mouseDownHandler = function (e) {
-        if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {
-            if (e.type === 'touchstart') {
+    TextArea.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'floatLabelType':
+                    Input.removeFloating(this.textareaWrapper);
+                    Input.addFloating(this.element, this.floatLabelType, this.placeholder);
+                    if (this.floatLabelType === 'Never') {
+                        this.element.removeAttribute('aria-labelledby');
+                    }
+                    break;
+                case 'enabled':
+                    Input.setEnabled(this.enabled, this.element, this.floatLabelType, this.textareaWrapper.container);
+                    this.bindClearEvent();
+                    if (!this.enabled && this.resizeMode !== 'None') {
+                        this.element.classList.remove(this.getCurrentResizeClass(this.resizeMode));
+                        this.element.classList.add(RESIZE_NONE);
+                    }
+                    else {
+                        this.element.classList.add(this.getCurrentResizeClass(this.resizeMode));
+                    }
+                    break;
+                case 'width':
+                    if (this.resizeMode !== 'None' && this.resizeMode !== 'Vertical') {
+                        this.setElementWidth(newProp.width);
+                        this.textareaWrapper.container.classList.add(AUTO_WIDTH);
+                    }
+                    else {
+                        if (this.textareaWrapper.container.classList.contains(AUTO_WIDTH)) {
+                            this.textareaWrapper.container.classList.remove(AUTO_WIDTH);
+                        }
+                        Input.setWidth(newProp.width, this.textareaWrapper.container);
+                    }
+                    break;
+                case 'value':
+                    {
+                        var prevOnChange = this.isProtectedOnChange;
+                        this.isProtectedOnChange = true;
+                        if (!Input.isBlank(this.value)) {
+                            this.value = this.value.toString();
+                        }
+                        this.isProtectedOnChange = prevOnChange;
+                        Input.setValue(this.value, this.element, this.floatLabelType, this.showClearButton);
+                        this.inputPreviousValue = this.element.value;
+                        /* istanbul ignore next */
+                        if ((this.isAngular || this.isVue) && this.preventChange === true) {
+                            this.previousValue = this.isAngular ? this.value : this.previousValue;
+                            this.preventChange = false;
+                        }
+                        else if (isNullOrUndefined(this.isAngular) || !this.isAngular
+                            || (this.isAngular && !this.preventChange) || (this.isAngular && isNullOrUndefined(this.preventChange))) {
+                            this.raiseChangeEvent();
+                        }
+                    }
+                    break;
+                case 'htmlAttributes':
+                    {
+                        this.updateHTMLAttributesToElement();
+                        this.updateHTMLAttributesToWrapper();
+                        this.checkAttributes(true);
+                        Input.validateInputType(this.textareaWrapper.container, this.element);
+                    }
+                    break;
+                case 'readonly':
+                    Input.setReadonly(this.readonly, this.element);
+                    if (this.readonly) {
+                        this.element.setAttribute('aria-readonly', 'true');
+                    }
+                    else {
+                        this.element.removeAttribute('aria-readonly');
+                    }
+                    break;
+                case 'showClearButton':
+                    Input.setClearButton(this.showClearButton, this.element, this.textareaWrapper);
+                    this.bindClearEvent();
+                    break;
+                case 'enableRtl':
+                    Input.setEnableRtl(this.enableRtl, [this.textareaWrapper.container]);
+                    break;
+                case 'placeholder':
+                    Input.setPlaceholder(this.placeholder, this.element);
+                    Input.calculateWidth(this.element, this.textareaWrapper.container);
+                    break;
+                case 'cssClass':
+                    Input.updateCssClass(newProp.cssClass, oldProp.cssClass, this.textareaWrapper.container);
+                    break;
+                case 'locale':
+                    this.globalize = new Internationalization(this.locale);
+                    this.l10n.setLocale(this.locale);
+                    this.setProperties({ placeholder: this.l10n.getConstant('placeholder') }, true);
+                    Input.setPlaceholder(this.placeholder, this.element);
+                    break;
+                case 'rowsCount':
+                    if (this.rowsCount) {
+                        this.element.setAttribute('rows', this.rowsCount.toString());
+                    }
+                    break;
+                case 'columnsCount':
+                    if (this.columnsCount) {
+                        this.element.setAttribute('cols', this.columnsCount.toString());
+                        if (this.width == null) {
+                            this.textareaWrapper.container.classList.add(AUTO_WIDTH);
+                        }
+                    }
+                    break;
+                case 'maxLength':
+                    if (this.maxLength) {
+                        this.element.setAttribute('maxlength', this.maxLength.toString());
+                    }
+                    break;
+                case 'resizeMode':
+                    if (this.enabled) {
+                        if (this.element.classList.contains(this.getCurrentResizeClass(oldProp.resizeMode))) {
+                            this.element.classList.remove(this.getCurrentResizeClass(oldProp.resizeMode));
+                        }
+                        this.element.classList.add(this.getCurrentResizeClass(this.resizeMode));
+                        if (this.element.style.width && (this.resizeMode === 'None' || this.resizeMode === 'Vertical')) {
+                            Input.setWidth(this.element.style.width, this.textareaWrapper.container);
+                        }
+                        else {
+                            var currentWidth = this.element.offsetWidth;
+                            this.element.style.width = currentWidth + 'px';
+                            if (this.textareaWrapper.container.style.width) {
+                                this.textareaWrapper.container.style.width = '';
+                            }
+                        }
+                        this.setWrapperWidth();
+                    }
+                    break;
+            }
+        }
+    };
+    TextArea.prototype.preRender = function () {
+        this.formElement = closest(this.element, 'form');
+        if (!isNullOrUndefined(this.formElement)) {
+            this.isForm = true;
+        }
+        /* istanbul ignore next */
+        if (this.element.tagName === 'EJS-TEXTAREA') {
+            var ejInstance = getValue('ej2_instances', this.element);
+            var inputElement = this.createElement('textarea');
+            var index = 0;
+            for (index; index < this.element.attributes.length; index++) {
+                var attributeName = this.element.attributes[index].nodeName;
+                if (attributeName !== 'id' && attributeName !== 'class') {
+                    inputElement.setAttribute(attributeName, this.element.attributes[index].nodeValue);
+                    inputElement.innerHTML = this.element.innerHTML;
+                    if (attributeName === 'name') {
+                        this.element.removeAttribute('name');
+                    }
+                }
+                else if (attributeName === 'class') {
+                    inputElement.setAttribute(attributeName, this.element.className.split(' ').filter(function (item) { return item.indexOf('ng-') !== 0; }).join(' '));
+                }
+            }
+            this.element.appendChild(inputElement);
+            this.element = inputElement;
+            setValue('ej2_instances', ejInstance, this.element);
+        }
+        this.updateHTMLAttributesToElement();
+        this.checkAttributes(false);
+        if ((isNullOrUndefined(this.textareaOptions) || (this.textareaOptions['value'] === undefined)) && this.element.value !== '') {
+            this.setProperties({ value: this.element.value }, true);
+        }
+        this.globalize = new Internationalization(this.locale);
+        var localeText = { placeholder: this.placeholder };
+        this.l10n = new L10n('textarea', localeText, this.locale);
+        if (this.l10n.getConstant('placeholder') !== '') {
+            this.setProperties({ placeholder: this.placeholder || this.l10n.getConstant('placeholder') }, true);
+        }
+        if (!this.element.hasAttribute('id')) {
+            this.element.setAttribute('id', getUniqueID('textbox'));
+        }
+        if (!this.element.hasAttribute('name')) {
+            this.element.setAttribute('name', this.element.getAttribute('id'));
+        }
+        if (this.rowsCount) {
+            this.element.setAttribute('rows', this.rowsCount.toString());
+        }
+        if (this.columnsCount) {
+            this.element.setAttribute('cols', this.columnsCount.toString());
+        }
+        if (this.maxLength) {
+            this.element.setAttribute('maxlength', this.maxLength.toString());
+        }
+        if (!this.element.style.resize && this.enabled) {
+            this.element.classList.add(this.getCurrentResizeClass(this.resizeMode));
+        }
+        if (this.enabled) {
+            this.element.setAttribute('aria-multiline', 'true');
+        }
+    };
+    /**
+     * To Initialize the control rendering
+     *
+     * @returns {void}
+     * @private
+     */
+    TextArea.prototype.render = function () {
+        var updatedCssClassValue = this.cssClass;
+        if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
+            updatedCssClassValue = Input.getInputValidClassList(this.cssClass);
+        }
+        this.textareaWrapper = Input.createInput({
+            element: this.element,
+            floatLabelType: this.floatLabelType,
+            properties: {
+                enabled: this.enabled,
+                enableRtl: this.enableRtl,
+                cssClass: updatedCssClassValue,
+                readonly: this.readonly,
+                placeholder: this.placeholder,
+                showClearButton: this.showClearButton
+            }
+        });
+        this.updateHTMLAttributesToWrapper();
+        this.wireEvents();
+        if (!isNullOrUndefined(this.value)) {
+            Input.setValue(this.value, this.element, this.floatLabelType, this.showClearButton);
+        }
+        if (!isNullOrUndefined(this.value)) {
+            this.initialValue = this.value;
+            if (!this.isAngular) {
+                this.element.setAttribute('value', this.initialValue);
+            }
+        }
+        this.previousValue = this.value;
+        this.inputPreviousValue = this.value;
+        this.element.defaultValue = this.element.value;
+        Input.setWidth(this.width, this.textareaWrapper.container);
+        this.setWrapperWidth();
+        this.renderComplete();
+    };
+    TextArea.prototype.getModuleName = function () {
+        return 'textarea';
+    };
+    /* eslint-disable valid-jsdoc, jsdoc/require-returns */
+    /**
+     * Gets the properties to be maintained in the persisted state.
+     *
+     */
+    TextArea.prototype.getPersistData = function () {
+        var keyEntity = ['value'];
+        return this.addOnPersist(keyEntity);
+    };
+    TextArea.prototype.checkAttributes = function (isDynamic) {
+        var attrs = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
+            ['placeholder', 'disabled', 'value', 'readonly'];
+        for (var _i = 0, attrs_1 = attrs; _i < attrs_1.length; _i++) {
+            var key = attrs_1[_i];
+            if (!isNullOrUndefined(this.element.getAttribute(key))) {
+                switch (key) {
+                    case 'disabled':
+                        if ((isNullOrUndefined(this.textareaOptions) || (this.textareaOptions['enabled'] === undefined)) || isDynamic) {
+                            var enabled = this.element.getAttribute(key) === 'disabled' || this.element.getAttribute(key) === '' ||
+                                this.element.getAttribute(key) === 'true' ? false : true;
+                            this.setProperties({ enabled: enabled }, !isDynamic);
+                        }
+                        break;
+                    case 'readonly':
+                        if ((isNullOrUndefined(this.textareaOptions) || (this.textareaOptions['readonly'] === undefined)) || isDynamic) {
+                            var readonly = this.element.getAttribute(key) === 'readonly' || this.element.getAttribute(key) === ''
+                                || this.element.getAttribute(key) === 'true' ? true : false;
+                            this.setProperties({ readonly: readonly }, !isDynamic);
+                        }
+                        break;
+                    case 'placeholder':
+                        if ((isNullOrUndefined(this.textareaOptions) || (this.textareaOptions['placeholder'] === undefined)) || isDynamic) {
+                            this.setProperties({ placeholder: this.element.placeholder }, !isDynamic);
+                        }
+                        break;
+                    case 'value':
+                        if (((isNullOrUndefined(this.textareaOptions) || (this.textareaOptions['value'] === undefined)) || isDynamic) && this.element.value !== '') {
+                            this.setProperties({ value: this.element.value }, !isDynamic);
+                        }
+                        break;
+                }
+            }
+        }
+    };
+    TextArea.prototype.wireEvents = function () {
+        EventHandler.add(this.element, 'focus', this.focusHandler, this);
+        EventHandler.add(this.element, 'blur', this.focusOutHandler, this);
+        EventHandler.add(this.element, 'keydown', this.keydownHandler, this);
+        EventHandler.add(this.element, 'input', this.inputHandler, this);
+        EventHandler.add(this.element, 'change', this.changeHandler, this);
+        if (this.isForm) {
+            EventHandler.add(this.formElement, 'reset', this.resetForm, this);
+        }
+        this.bindClearEvent();
+    };
+    TextArea.prototype.unWireEvents = function () {
+        EventHandler.remove(this.element, 'focus', this.focusHandler);
+        EventHandler.remove(this.element, 'blur', this.focusOutHandler);
+        EventHandler.remove(this.element, 'keydown', this.keydownHandler);
+        EventHandler.remove(this.element, 'input', this.inputHandler);
+        EventHandler.remove(this.element, 'change', this.changeHandler);
+        if (this.isForm) {
+            EventHandler.remove(this.formElement, 'reset', this.resetForm);
+        }
+    };
+    /**
+     * Removes the component from the DOM and detaches all its related event handlers.
+     * Also, it maintains the initial TextArea element from the DOM.
+     *
+     * @method destroy
+     * @returns {void}
+     */
+    TextArea.prototype.destroy = function () {
+        this.unWireEvents();
+        if (this.showClearButton) {
+            this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
+        }
+        this.element.value = this.element.defaultValue;
+        this.element.classList.remove('e-input', RESIZE_X, RESIZE_Y, RESIZE_XY, RESIZE_NONE);
+        this.removeAttributes(['aria-disabled', 'aria-readonly', 'aria-labelledby', 'aria-multiline']);
+        if (!isNullOrUndefined(this.textareaWrapper)) {
+            this.textareaWrapper.container.insertAdjacentElement('afterend', this.element);
+            detach(this.textareaWrapper.container);
+        }
+        this.textareaWrapper = null;
+        this.formElement = null;
+        Input.destroy({
+            element: this.element,
+            floatLabelType: this.floatLabelType,
+            properties: this.properties
+        }, this.clearButton);
+        _super.prototype.destroy.call(this);
+    };
+    TextArea.prototype.focusHandler = function (args) {
+        var eventArgs = {
+            container: this.textareaWrapper.container,
+            event: args,
+            value: this.value
+        };
+        this.trigger('focus', eventArgs);
+    };
+    TextArea.prototype.focusOutHandler = function (args) {
+        if (!(this.previousValue === null && this.value === null) &&
+            (this.previousValue !== this.value)) {
+            this.raiseChangeEvent(args, true);
+        }
+        var eventArgs = {
+            container: this.textareaWrapper.container,
+            event: args,
+            value: this.value
+        };
+        this.trigger('blur', eventArgs);
+    };
+    TextArea.prototype.keydownHandler = function (args) {
+        if ((args.keyCode === 13 || args.keyCode === 9) && !((this.previousValue === null || this.previousValue === '') && (this.value === null || this.value === '') && this.element.value === '')) {
+            this.setProperties({ value: this.element.value }, true);
+        }
+    };
+    TextArea.prototype.inputHandler = function (args) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias
+        var textareaObj = this;
+        var eventArgs = {
+            event: args,
+            value: this.element.value,
+            previousValue: this.inputPreviousValue,
+            container: this.textareaWrapper.container
+        };
+        this.inputPreviousValue = this.element.value;
+        /* istanbul ignore next */
+        if (this.isAngular) {
+            textareaObj.localChange({ value: this.element.value });
+            this.preventChange = true;
+        }
+        if (this.isVue) {
+            this.preventChange = true;
+        }
+        this.trigger('input', eventArgs);
+        args.stopPropagation();
+    };
+    TextArea.prototype.changeHandler = function (args) {
+        this.setProperties({ value: this.element.value }, true);
+        if (this.previousValue !== this.value) {
+            this.raiseChangeEvent(args, true);
+        }
+        args.stopPropagation();
+    };
+    TextArea.prototype.raiseChangeEvent = function (event, interaction) {
+        var eventArgs = {
+            event: event,
+            value: this.value,
+            previousValue: this.previousValue,
+            container: this.textareaWrapper.container,
+            isInteraction: interaction ? interaction : false,
+            isInteracted: interaction ? interaction : false
+        };
+        this.preventChange = false;
+        this.trigger('change', eventArgs);
+        this.previousValue = this.value;
+    };
+    TextArea.prototype.updateHTMLAttributesToWrapper = function () {
+        Input.updateHTMLAttributesToWrapper(this.htmlAttributes, this.textareaWrapper.container);
+    };
+    TextArea.prototype.updateHTMLAttributesToElement = function () {
+        Input.updateHTMLAttributesToElement(this.htmlAttributes, this.element);
+    };
+    TextArea.prototype.bindClearEvent = function () {
+        if (this.showClearButton) {
+            if (this.enabled) {
+                EventHandler.add(this.textareaWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler, this);
+            }
+            else {
+                EventHandler.remove(this.textareaWrapper.clearButton, 'mousedown touchstart', this.resetInputHandler);
+            }
+        }
+    };
+    TextArea.prototype.resetInputHandler = function (event) {
+        event.preventDefault();
+        if (!(this.textareaWrapper.clearButton.classList.contains(HIDE_CLEAR$1)) || this.textareaWrapper.container.classList.contains('e-static-clear')) {
+            Input.setValue('', this.element, this.floatLabelType, this.showClearButton);
+            this.setProperties({ value: this.element.value }, true);
+        }
+        var eventArgs = {
+            event: event,
+            value: this.element.value,
+            previousValue: this.inputPreviousValue,
+            container: this.textareaWrapper.container
+        };
+        this.trigger('input', eventArgs);
+        this.inputPreviousValue = this.element.value;
+        this.raiseChangeEvent(event, true);
+        if (closest(this.element, 'form')) {
+            var element = this.element;
+            var keyupEvent = document.createEvent('KeyboardEvent');
+            keyupEvent.initEvent('keyup', false, true);
+            element.dispatchEvent(keyupEvent);
+        }
+    };
+    /* eslint-enable valid-jsdoc, jsdoc/require-returns */
+    /**
+     * Adding the multiple attributes as key-value pair to the TextArea element.
+     *
+     * @param {string} attributes - Specifies the attributes to be add to TextArea element.
+     * @returns {void}
+     */
+    TextArea.prototype.addAttributes = function (attributes$$1) {
+        for (var _i = 0, _a = Object.keys(attributes$$1); _i < _a.length; _i++) {
+            var key = _a[_i];
+            if (key === 'disabled') {
+                this.setProperties({ enabled: false }, true);
+                Input.setEnabled(this.enabled, this.element, this.floatLabelType, this.textareaWrapper.container);
+            }
+            else if (key === 'readonly') {
+                this.setProperties({ readonly: true }, true);
+                Input.setReadonly(this.readonly, this.element);
+            }
+            else if (key === 'class') {
+                this.element.classList.add(attributes$$1["" + key]);
+            }
+            else if (key === 'placeholder') {
+                this.setProperties({ placeholder: attributes$$1["" + key] }, true);
+                Input.setPlaceholder(this.placeholder, this.element);
+            }
+            else {
+                this.element.setAttribute(key, attributes$$1["" + key]);
+            }
+        }
+    };
+    /**
+     * Removing the multiple attributes as key-value pair to the TextArea element.
+     *
+     * @param { string[] } attributes - Specifies the attributes name to be removed from TextArea element.
+     * @returns {void}
+     */
+    TextArea.prototype.removeAttributes = function (attributes$$1) {
+        for (var _i = 0, attributes_1 = attributes$$1; _i < attributes_1.length; _i++) {
+            var key = attributes_1[_i];
+            if (key === 'disabled') {
+                this.setProperties({ enabled: true }, true);
+                Input.setEnabled(this.enabled, this.element, this.floatLabelType, this.textareaWrapper.container);
+            }
+            else if (key === 'readonly') {
+                this.setProperties({ readonly: false }, true);
+                Input.setReadonly(this.readonly, this.element);
+            }
+            else if (key === 'placeholder') {
+                this.setProperties({ placeholder: null }, true);
+                Input.setPlaceholder(this.placeholder, this.element);
+            }
+            else {
+                this.element.removeAttribute(key);
+            }
+        }
+    };
+    /**
+     * Sets the focus to widget for interaction.
+     *
+     * @returns {void}
+     */
+    TextArea.prototype.focusIn = function () {
+        if (document.activeElement !== this.element && this.enabled) {
+            this.element.focus();
+            if (this.textareaWrapper.container.classList.contains('e-input-group')
+                || this.textareaWrapper.container.classList.contains('e-outline')
+                || this.textareaWrapper.container.classList.contains('e-filled')) {
+                addClass([this.textareaWrapper.container], [TEXTBOX_FOCUS]);
+            }
+        }
+    };
+    /**
+     * Remove the focus from widget, if the widget is in focus state.
+     *
+     * @returns {void}
+     */
+    TextArea.prototype.focusOut = function () {
+        if (document.activeElement === this.element && this.enabled) {
+            this.element.blur();
+            if (this.textareaWrapper.container.classList.contains('e-input-group')
+                || this.textareaWrapper.container.classList.contains('e-outline')
+                || this.textareaWrapper.container.classList.contains('e-filled')) {
+                removeClass([this.textareaWrapper.container], [TEXTBOX_FOCUS]);
+            }
+        }
+    };
+    /**
+     * Sets up the width for the textarea wrapper.
+     *
+     * @returns {void}
+     */
+    TextArea.prototype.setWrapperWidth = function () {
+        if (this.enabled && ((this.resizeMode !== 'None' && this.resizeMode !== 'Vertical') || (this.columnsCount || this.element.getAttribute('cols')))) {
+            if (this.resizeMode !== 'None' && this.resizeMode !== 'Vertical') {
+                if (this.textareaWrapper.container.style.width) {
+                    this.setElementWidth(this.textareaWrapper.container.style.width);
+                    this.textareaWrapper.container.style.width = '';
+                    this.textareaWrapper.container.classList.add(AUTO_WIDTH);
+                }
+            }
+            this.textareaWrapper.container.classList.add(AUTO_WIDTH);
+        }
+        else {
+            if (this.textareaWrapper.container.classList.contains(AUTO_WIDTH)) {
+                this.textareaWrapper.container.classList.remove(AUTO_WIDTH);
+            }
+        }
+    };
+    TextArea.prototype.resetForm = function () {
+        if (this.isAngular) {
+            this.resetValue('');
+        }
+        else {
+            this.resetValue(this.initialValue);
+        }
+        if (!isNullOrUndefined(this.textareaWrapper)) {
+            var label = this.textareaWrapper.container.querySelector('.e-float-text');
+            if (!isNullOrUndefined(label) && this.floatLabelType !== 'Always') {
+                if ((isNullOrUndefined(this.initialValue) || this.initialValue === '')) {
+                    label.classList.add('e-label-bottom');
+                    label.classList.remove('e-label-top');
+                }
+                else if (this.initialValue !== '') {
+                    label.classList.add('e-label-top');
+                    label.classList.remove('e-label-bottom');
+                }
+            }
+        }
+    };
+    TextArea.prototype.resetValue = function (value) {
+        var prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.value = value;
+        if (value == null && this.textareaWrapper.container.classList.contains('e-valid-input')) {
+            this.textareaWrapper.container.classList.remove('e-valid-input');
+        }
+        this.isProtectedOnChange = prevOnChange;
+    };
+    TextArea.prototype.setElementWidth = function (width) {
+        if (typeof width === 'number') {
+            this.element.style.width = formatUnit(width);
+        }
+        else if (typeof width === 'string') {
+            this.element.style.width = (width.match(/px|%|em/)) ? (width) : (formatUnit(width));
+        }
+    };
+    TextArea.prototype.getCurrentResizeClass = function (resizeMode) {
+        return resizeMode === 'None' ? RESIZE_NONE : (resizeMode === 'Both' ? RESIZE_XY : resizeMode === 'Horizontal' ? RESIZE_X : RESIZE_Y);
+    };
+    __decorate$7([
+        Property(false)
+    ], TextArea.prototype, "readonly", void 0);
+    __decorate$7([
+        Property(null)
+    ], TextArea.prototype, "value", void 0);
+    __decorate$7([
+        Property('Never')
+    ], TextArea.prototype, "floatLabelType", void 0);
+    __decorate$7([
+        Property('')
+    ], TextArea.prototype, "cssClass", void 0);
+    __decorate$7([
+        Property(null)
+    ], TextArea.prototype, "placeholder", void 0);
+    __decorate$7([
+        Property({})
+    ], TextArea.prototype, "htmlAttributes", void 0);
+    __decorate$7([
+        Property(true)
+    ], TextArea.prototype, "enabled", void 0);
+    __decorate$7([
+        Property(false)
+    ], TextArea.prototype, "showClearButton", void 0);
+    __decorate$7([
+        Property(false)
+    ], TextArea.prototype, "enablePersistence", void 0);
+    __decorate$7([
+        Property(null)
+    ], TextArea.prototype, "width", void 0);
+    __decorate$7([
+        Property('Vertical')
+    ], TextArea.prototype, "resizeMode", void 0);
+    __decorate$7([
+        Property(null)
+    ], TextArea.prototype, "maxLength", void 0);
+    __decorate$7([
+        Property(null)
+    ], TextArea.prototype, "columnsCount", void 0);
+    __decorate$7([
+        Property(null)
+    ], TextArea.prototype, "rowsCount", void 0);
+    __decorate$7([
+        Event()
+    ], TextArea.prototype, "created", void 0);
+    __decorate$7([
+        Event()
+    ], TextArea.prototype, "destroyed", void 0);
+    __decorate$7([
+        Event()
+    ], TextArea.prototype, "change", void 0);
+    __decorate$7([
+        Event()
+    ], TextArea.prototype, "blur", void 0);
+    __decorate$7([
+        Event()
+    ], TextArea.prototype, "focus", void 0);
+    __decorate$7([
+        Event()
+    ], TextArea.prototype, "input", void 0);
+    TextArea = __decorate$7([
+        NotifyPropertyChanges
+    ], TextArea);
+    return TextArea;
+}(Component));
+
+/**
+ * Uploader modules
+ */
+
+var __extends$9 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var SignatureBase = /** @__PURE__ @class */ (function (_super) {
+    __extends$9(SignatureBase, _super);
+    function SignatureBase() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /* minDistance(distance between the two point) was calaculated for smoothness.*/
+        _this.minDistance = 5;
+        _this.previous = 0;
+        /* interval handles for the smoothness in the mouse move event.*/
+        _this.interval = 30;
+        _this.timeout = null;
+        _this.isSignatureEmpty = true;
+        _this.backgroundLoaded = null;
+        _this.isBlazor = false;
+        _this.isResponsive = false;
+        _this.signPointsColl = [];
+        _this.signRatioPointsColl = [];
+        _this.canRedraw = true;
+        return _this;
+    }
+    /**
+     * To Initialize the component rendering
+     *
+     * @private
+     * @param {HTMLCanvasElement} element - Specifies the canvas element.
+     * @param {BlazorDotnetObject} dotnetRef - Specifies for blazor client to server communication.
+     * @returns {void}
+     */
+    SignatureBase.prototype.initialize = function (element, dotnetRef) {
+        this.clearArray = [];
+        this.element = element;
+        this.canvasContext = this.element.getContext('2d');
+        this.canvasContext.canvas.tabIndex = -1;
+        if (dotnetRef) {
+            this.dotnetRef = dotnetRef;
+            this.isBlazor = true;
+            if (this.signatureValue) {
+                this.loadPersistedSignature();
+            }
+        }
+        this.setHTMLProperties();
+        if (isNullOrUndefined(this.signatureValue)) {
+            this.updateSnapCollection(true);
+        }
+        this.wireEvents();
+        if (!this.isBlazor) {
+            this.trigger('created', null);
+        }
+    };
+    SignatureBase.prototype.wireEvents = function () {
+        if (isNullOrUndefined(this.pointColl) && !this.isReadOnly && !this.disabled) {
+            EventHandler.add(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler, this);
+            EventHandler.add(this.canvasContext.canvas, 'keydown', this.keyboardHandler, this);
+            window.addEventListener('resize', this.resizeHandler.bind(this));
+        }
+        else if (this.pointColl) {
+            EventHandler.add(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler, this);
+            EventHandler.add(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler, this);
+            EventHandler.add(document, 'mouseup', this.mouseUpHandler, this);
+        }
+    };
+    SignatureBase.prototype.unwireEvents = function (type) {
+        if (type === 'mouseup' || type === 'touchend') {
+            EventHandler.remove(this.canvasContext.canvas, 'mousemove touchmove', this.mouseMoveHandler);
+            EventHandler.remove(this.canvasContext.canvas, 'mouseup touchend', this.mouseUpHandler);
+            EventHandler.remove(document, 'mouseup', this.mouseUpHandler);
+        }
+        else {
+            EventHandler.remove(this.canvasContext.canvas, 'mousedown touchstart', this.mouseDownHandler);
+            EventHandler.remove(this.canvasContext.canvas, 'keydown', this.keyboardHandler);
+            window.removeEventListener('resize', this.resizeHandler);
+        }
+    };
+    SignatureBase.prototype.setHTMLProperties = function () {
+        if (this.element.height === 150 && this.element.width === 300 && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {
+            this.element.height = this.element.offsetHeight;
+            this.element.width = this.element.offsetWidth;
+            this.isResponsive = true;
+        }
+        else if ((this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1)
+            && this.element.offsetHeight !== 0 && this.element.offsetWidth !== 0) {
+            this.element.height = this.element.offsetHeight;
+            this.element.width = this.element.offsetWidth;
+        }
+        this.canvasContext.fillStyle = this.strokeColor;
+        this.tempCanvas = this.createElement('canvas', { className: 'e-' + this.getModuleName() + '-temp' });
+        this.tempContext = this.tempCanvas.getContext('2d');
+        this.tempCanvas.width = this.element.width;
+        this.tempCanvas.height = this.element.height;
+        if (this.backgroundImage) {
+            this.canvasContext.canvas.style.backgroundImage = 'url(' + this.backgroundImage + ')';
+            this.canvasContext.canvas.style.backgroundRepeat = 'no-repeat';
+            if (this.saveWithBackground) {
+                this.setBackgroundImage(this.backgroundImage, 'temp');
+            }
+        }
+        else if (this.backgroundColor) {
+            this.canvasContext.canvas.style.backgroundColor = this.backgroundColor;
+        }
+    };
+    // eslint-disable-next-line
+    SignatureBase.prototype.mouseDownHandler = function (e) {
+        if (e.buttons === 1 || e.buttons === 2 || e.type === 'touchstart') {
+            if (e.type === 'touchstart') {
                 e.preventDefault();
                 e.stopPropagation();
             }
@@ -14372,7 +15223,7 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
     SignatureBase.prototype.resizeHandler = function () {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
         var proxy = this;
-        if (this.isResponsive) {
+        if (this.isResponsive && this.canRedraw) {
             this.canvasContext.canvas.width = this.element.offsetWidth;
             this.canvasContext.canvas.height = this.element.offsetHeight;
             this.canvasContext.scale(1, 1);
@@ -14752,7 +15603,7 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
         this.internalRefresh();
         this.signRatioPointsColl = [];
         this.updateSnapCollection(true);
-        this.isSignatureEmpty = true;
+        this.isSignatureEmpty = this.canRedraw = true;
         if (!this.isBlazor) {
             this.trigger('change', args);
         }
@@ -14916,7 +15767,7 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
                 proxy.updateSnapCollection();
             });
         };
-        this.isSignatureEmpty = false;
+        this.isSignatureEmpty = this.canRedraw = false;
     };
     SignatureBase.prototype.saveBackground = function (savebg) {
         var imageSrc;
@@ -15167,7 +16018,7 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
     return SignatureBase;
 }(Component));
 
-var __extends$7 = (undefined && undefined.__extends) || (function () {
+var __extends$8 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -15180,7 +16031,7 @@ var __extends$7 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     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;
@@ -15202,7 +16053,7 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
  * ```
  */
 var Signature = /** @__PURE__ @class */ (function (_super) {
-    __extends$7(Signature, _super);
+    __extends$8(Signature, _super);
     /**
      * Constructor for creating the widget.
      *
@@ -15226,6 +16077,8 @@ var Signature = /** @__PURE__ @class */ (function (_super) {
         this.initialize();
     };
     Signature.prototype.initialize = function () {
+        this.element.setAttribute('role', 'img');
+        this.element.setAttribute('aria-label', 'signature');
         addClass([this.element], 'e-' + this.getModuleName());
         _super.prototype.initialize.call(this, this.element);
         if (this.enablePersistence) {
@@ -15284,52 +16137,52 @@ var Signature = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    __decorate$7([
+    __decorate$8([
         Property('')
     ], Signature.prototype, "backgroundColor", void 0);
-    __decorate$7([
+    __decorate$8([
         Property('')
     ], Signature.prototype, "backgroundImage", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(false)
     ], Signature.prototype, "disabled", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(false)
     ], Signature.prototype, "isReadOnly", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(true)
     ], Signature.prototype, "saveWithBackground", void 0);
-    __decorate$7([
+    __decorate$8([
         Property('#000000')
     ], Signature.prototype, "strokeColor", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(0.5)
     ], Signature.prototype, "minStrokeWidth", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(2)
     ], Signature.prototype, "maxStrokeWidth", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(0.7)
     ], Signature.prototype, "velocity", void 0);
-    __decorate$7([
+    __decorate$8([
         Property('en-US')
     ], Signature.prototype, "locale", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(false)
     ], Signature.prototype, "enableRtl", void 0);
-    __decorate$7([
+    __decorate$8([
         Property(false)
     ], Signature.prototype, "enablePersistence", void 0);
-    __decorate$7([
+    __decorate$8([
         Event()
     ], Signature.prototype, "beforeSave", void 0);
-    __decorate$7([
+    __decorate$8([
         Event()
     ], Signature.prototype, "change", void 0);
-    __decorate$7([
+    __decorate$8([
         Event()
     ], Signature.prototype, "created", void 0);
-    Signature = __decorate$7([
+    Signature = __decorate$8([
         NotifyPropertyChanges
     ], Signature);
     return Signature;
@@ -15339,7 +16192,7 @@ var Signature = /** @__PURE__ @class */ (function (_super) {
  * Signature modules
  */
 
-var __extends$9 = (undefined && undefined.__extends) || (function () {
+var __extends$10 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -15352,7 +16205,7 @@ var __extends$9 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     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;
@@ -15434,7 +16287,7 @@ var PrecisionType;
  * ```
  */
 var Rating = /** @__PURE__ @class */ (function (_super) {
-    __extends$9(Rating, _super);
+    __extends$10(Rating, _super);
     /**
      * Constructor for creating the widget
      *
@@ -15925,6 +16778,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         });
     };
     Rating.prototype.keyActionHandler = function (e) {
+        e.preventDefault();
         if (this.disabled || this.readOnly) {
             return;
         }
@@ -16112,73 +16966,73 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    __decorate$8([
+    __decorate$9([
         Property(false)
     ], Rating.prototype, "allowReset", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('')
     ], Rating.prototype, "cssClass", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(false)
     ], Rating.prototype, "disabled", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('')
     ], Rating.prototype, "emptyTemplate", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(true)
     ], Rating.prototype, "enableAnimation", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(false)
     ], Rating.prototype, "enableSingleSelection", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('')
     ], Rating.prototype, "fullTemplate", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(5)
     ], Rating.prototype, "itemsCount", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(LabelPosition.Right)
     ], Rating.prototype, "labelPosition", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('')
     ], Rating.prototype, "labelTemplate", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(0.0)
     ], Rating.prototype, "min", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(PrecisionType.Full)
     ], Rating.prototype, "precision", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(false)
     ], Rating.prototype, "readOnly", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(false)
     ], Rating.prototype, "showLabel", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(true)
     ], Rating.prototype, "showTooltip", void 0);
-    __decorate$8([
+    __decorate$9([
         Property('')
     ], Rating.prototype, "tooltipTemplate", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(0.0)
     ], Rating.prototype, "value", void 0);
-    __decorate$8([
+    __decorate$9([
         Property(true)
     ], Rating.prototype, "visible", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], Rating.prototype, "beforeItemRender", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], Rating.prototype, "created", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], Rating.prototype, "onItemHover", void 0);
-    __decorate$8([
+    __decorate$9([
         Event()
     ], Rating.prototype, "valueChanged", void 0);
-    Rating = __decorate$8([
+    Rating = __decorate$9([
         NotifyPropertyChanges
     ], Rating);
     return Rating;
@@ -16196,5 +17050,5 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
  * NumericTextBox all modules
  */
 
-export { NumericTextBox, regularExpressions, createMask, applyMask, wireEvents, unwireEvents, bindClearEvent, unstrippedValue, strippedValue, maskInputMouseDownHandler, maskInputMouseUpHandler, maskInputFocusHandler, triggerFocus, escapeRegExp, maskInputBlurHandler, maskInputDropHandler, mobileRemoveFunction, setMaskValue, setElementValue, maskInput, getVal, getMaskedVal, MaskUndo, MaskedTextBox, Input, TicksData, ColorRangeData, LimitData, TooltipData, Slider, regex, ErrorOption, FormValidator, FilesProp, ButtonsProps, AsyncSettings, Uploader, ColorPicker, TextBox, Signature, LabelPosition, PrecisionType, Rating, SignatureBase };
+export { NumericTextBox, regularExpressions, createMask, applyMask, wireEvents, unwireEvents, bindClearEvent, unstrippedValue, strippedValue, maskInputMouseDownHandler, maskInputMouseUpHandler, maskInputFocusHandler, triggerFocus, escapeRegExp, maskInputBlurHandler, maskInputDropHandler, mobileRemoveFunction, setMaskValue, setElementValue, maskInput, getVal, getMaskedVal, MaskUndo, MaskedTextBox, containerAttributes, TEXTBOX_FOCUS, Input, TicksData, ColorRangeData, LimitData, TooltipData, Slider, regex, ErrorOption, FormValidator, FilesProp, ButtonsProps, AsyncSettings, Uploader, ColorPicker, TextBox, TextArea, Signature, LabelPosition, PrecisionType, Rating, SignatureBase };
 //# sourceMappingURL=ej2-inputs.es5.js.map