@syncfusion/ej2-inputs 24.2.9 → 25.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.9
+*  version : 25.1.35
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-inputs@*",
-  "_id": "@syncfusion/ej2-inputs@24.2.7",
+  "_id": "@syncfusion/ej2-inputs@18.78.15",
   "_inBundle": false,
-  "_integrity": "sha512-P/yEOFoayVt5EMQEmKRlsAk9CZbDfM2k+zqnieGtSPGazGLxhQiaVtoE98n36DHm3fwI7daGBLISdftIogXaIw==",
+  "_integrity": "sha512-rXgFizmLuWasLGwlHimRN2E8XhlAFp76EEUFDgV90QcQNrMt0mJYlOOHgEnSeNJxble4xPNfPKg/REgHoApb/w==",
   "_location": "/@syncfusion/ej2-inputs",
   "_phantomChildren": {},
   "_requested": {
@@ -39,19 +39,19 @@
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-vue-inputs"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-inputs/-/ej2-inputs-24.2.7.tgz",
-  "_shasum": "c1d5c0f397725e8b599df5051a99bcd32db96a94",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-inputs/-/ej2-inputs-18.78.15.tgz",
+  "_shasum": "8ef93741dd68775ea404b54c10bfd6a17a331e7b",
   "_spec": "@syncfusion/ej2-inputs@*",
-  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.2.7",
-    "@syncfusion/ej2-buttons": "~24.2.7",
-    "@syncfusion/ej2-popups": "~24.2.9",
-    "@syncfusion/ej2-splitbuttons": "~24.2.7"
+    "@syncfusion/ej2-base": "~25.1.35",
+    "@syncfusion/ej2-buttons": "~25.1.35",
+    "@syncfusion/ej2-popups": "~25.1.35",
+    "@syncfusion/ej2-splitbuttons": "~25.1.35"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 input components such as Textbox, Color-picker, Masked-textbox, Numeric-textbox, Slider, Upload, and Form-validator that is used to get input from the users.",
@@ -119,7 +119,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/inputs"
   },
   "typings": "index.d.ts",
-  "version": "24.2.9",
+  "version": "25.1.35",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

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

@@ -30,6 +30,7 @@ export declare abstract class SignatureBase extends Component<HTMLCanvasElement>
     private signRatioPointsColl;
     private tempCanvas;
     private tempContext;
+    private canRedraw;
     /**
      * Gets or sets the background color of the component.
      *

package/src/common/signature-base.js

@@ -29,6 +29,7 @@ var SignatureBase = /** @class */ (function (_super) {
         _this.isResponsive = false;
         _this.signPointsColl = [];
         _this.signRatioPointsColl = [];
+        _this.canRedraw = true;
         return _this;
     }
     /**
@@ -190,7 +191,7 @@ var SignatureBase = /** @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);
@@ -570,7 +571,7 @@ var SignatureBase = /** @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);
         }
@@ -734,7 +735,7 @@ var SignatureBase = /** @class */ (function (_super) {
                 proxy.updateSnapCollection();
             });
         };
-        this.isSignatureEmpty = false;
+        this.isSignatureEmpty = this.canRedraw = false;
     };
     SignatureBase.prototype.saveBackground = function (savebg) {
         var imageSrc;

package/src/index.d.ts

@@ -9,6 +9,7 @@ export * from './form-validator/index';
 export * from './uploader/index';
 export * from './color-picker/index';
 export * from './textbox/index';
+export * from './textarea/index';
 export * from './signature/index';
 export * from './rating/index';
 export * from './common/index';

package/src/index.js

@@ -9,6 +9,7 @@ export * from './form-validator/index';
 export * from './uploader/index';
 export * from './color-picker/index';
 export * from './textbox/index';
+export * from './textarea/index';
 export * from './signature/index';
 export * from './rating/index';
 export * from './common/index';

package/src/input/input.d.ts

@@ -2,6 +2,14 @@
  * Defines floating label type of the input and decides how the label should float on the input.
  */
 export declare type FloatLabelType = 'Never' | 'Always' | 'Auto';
+/**
+ * Defines the constant attributes for the input element container.
+ */
+export declare const containerAttributes: string[];
+/**
+ * Defines the constant focus class for the input element.
+ */
+export declare const TEXTBOX_FOCUS: string;
 /**
  * Base for Input creation through util methods.
  */
@@ -17,7 +25,7 @@ export declare namespace Input {
     function bindInitialEvent(args: InputArgs): void;
     function wireFloatingEvents(element: HTMLInputElement | HTMLTextAreaElement): void;
     function wireClearBtnEvents(element: HTMLInputElement | HTMLTextAreaElement, button: HTMLElement, container: HTMLElement): void;
-    function destroy(): void;
+    function destroy(args: InputArgs, button?: HTMLElement): void;
     /**
      * Sets the value to the input element.
      * ```
@@ -200,6 +208,15 @@ export declare namespace Input {
      */
     function appendSpan(iconClass: string, container: HTMLElement, internalCreateElement?: createElementParams): HTMLElement;
     function validateInputType(containerElement: HTMLElement, input: HTMLInputElement | HTMLTextAreaElement): void;
+    function updateHTMLAttributesToElement(htmlAttributes: {
+        [key: string]: string;
+    }, element: HTMLInputElement | HTMLTextAreaElement): void;
+    function updateCssClass(newClass: string, oldClass: string, container: HTMLElement): void;
+    function getInputValidClassList(inputClassName: string): string;
+    function updateHTMLAttributesToWrapper(htmlAttributes: {
+        [key: string]: string;
+    }, container: HTMLElement): void;
+    function isBlank(inputString: string): boolean;
 }
 export interface InputObject {
     container?: HTMLElement;

package/src/input/input.js

@@ -19,6 +19,14 @@ var CLASSNAMES = {
     INPUTCUSTOMTAG: 'e-input-custom-tag',
     FLOATCUSTOMTAG: 'e-float-custom-tag'
 };
+/**
+ * Defines the constant attributes for the input element container.
+ */
+export var containerAttributes = ['title', 'style', 'class'];
+/**
+ * Defines the constant focus class for the input element.
+ */
+export var TEXTBOX_FOCUS = 'e-input-focus';
 /**
  * Base for Input creation through util methods.
  */
@@ -40,6 +48,7 @@ export 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;
@@ -78,37 +87,64 @@ export 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;
@@ -158,8 +194,16 @@ export 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;
@@ -215,19 +259,36 @@ export 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');
@@ -315,40 +376,89 @@ export 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;
+        }
         privateInputObj = null;
     }
     Input.destroy = destroy;
@@ -569,7 +679,7 @@ export 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);
@@ -684,11 +794,11 @@ export 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);
@@ -719,6 +829,9 @@ export var Input;
                 wrapper.insertBefore(floatText, iconEle);
             }
         }
+        else {
+            unWireFloatLabelEvents(args);
+        }
         checkFloatLabelType(type, input.parentElement);
     }
     Input.addFloating = addFloating;
@@ -902,5 +1015,57 @@ export 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 */

package/src/maskedtextbox/base/mask-base.js

@@ -162,6 +162,7 @@ export 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);

package/src/maskedtextbox/maskedtextbox/maskedtextbox.d.ts

@@ -39,6 +39,7 @@ export declare class MaskedTextBox extends Component<HTMLInputElement> implement
     private isAngular;
     private preventChange;
     private isClicked;
+    private clearButton;
     /**
      * Gets or sets the CSS classes to root element of the MaskedTextBox which helps to customize the
      * complete UI styles for the MaskedTextBox component.

package/src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -449,6 +449,9 @@ var MaskedTextBox = /** @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++) {
@@ -460,7 +463,11 @@ var MaskedTextBox = /** @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);

package/src/numerictextbox/numerictextbox.d.ts

@@ -52,6 +52,7 @@ export declare class NumericTextBox extends Component<HTMLInputElement> implemen
     private isAngular;
     private isDynamicChange;
     private inputValue;
+    private clearButton;
     /**
      * Gets or Sets the CSS classes to root element of the NumericTextBox which helps to customize the
      * complete UI styles for the NumericTextBox component.

package/src/numerictextbox/numerictextbox.js

@@ -1114,6 +1114,9 @@ var NumericTextBox = /** @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();
@@ -1137,7 +1140,11 @@ var NumericTextBox = /** @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 */

package/src/rating/rating.js

@@ -587,6 +587,7 @@ var Rating = /** @class */ (function (_super) {
         });
     };
     Rating.prototype.keyActionHandler = function (e) {
+        e.preventDefault();
         if (this.disabled || this.readOnly) {
             return;
         }

package/src/signature/signature.js

@@ -60,6 +60,8 @@ var Signature = /** @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) {

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

@@ -342,9 +342,10 @@ export interface SliderModel extends ComponentModel{
     cssClass?: string;
 
     /**
-     * Defines whether to allow the cross-scripting site or not.
+     * Specifies whether to display or remove the untrusted HTML values in the Slider component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer?: boolean;