@syncfusion/ej2-inputs - npm Package Compare versions

Comparing version 24.2.9 to 25.1.35

CHANGELOG.md

@@ -5,24 +5,2 @@ # Changelog
 
-### ColorPicker
-
-#### Bug Fixes
-
-- `#I526571` - Fixed the issue where Color Picker throws an error on mobile devices while createPopupOnClick is set to true has been resolved.
-
-## 24.2.4 (2024-02-06)
-
-### Uploader
-
-#### Bug Fixes
-
-- `#I526571` - Fixed the issue where the header in the Cancel Event was not returning in the header as expected. Instead, it was returning in the payload.
-
-### TextBox
-
-#### Bug Fixes
-
-- `#I548068` - Fixed the issue where a compilation error occurred while generating the CSS file from the `DataForm` related styles.
-
-## 24.1.47 (2024-01-23)
-
 ### Signature
@@ -32,18 +10,2 @@
 
-- `#F86282` - Issue with "The `getSignature` method data is not cleared after using clear method of signature" has been resolved.
-
-## 24.1.45 (2024-01-09)
-
-### Signature
-
-#### Bug Fixes
-
-- `#I510300` - Issue with "drawn points will be in a significantly different location than the cursor while zooming" has been resolved.
-
-## 24.1.41 (2023-12-18)
-
-### Signature
-
-#### Bug Fixes
-
 - `#I510300` - Issue with "`isEmpty` method return wrong value in signature control" has been resolved.
@@ -50,0 +12,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 24.2.9
+*  version : 25.1.35
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "_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",
@@ -42,6 +42,6 @@ "_phantomChildren": {},
   ],
-  "_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": {
@@ -52,6 +52,6 @@ "name": "Syncfusion Inc."
   "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"
   },
@@ -124,5 +124,5 @@ "deprecated": false,
   "typings": "index.d.ts",
-  "version": "24.2.9",
+  "version": "25.1.35",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

src/common/signature-base.d.ts

@@ -33,2 +33,3 @@ import { BlazorDotnetObject, Component } from '@syncfusion/ej2-base';
     private tempContext;
+    private canRedraw;
     /**
@@ -35,0 +36,0 @@ * Gets or sets the background color of the component.

src/common/signature-base.js

@@ -32,2 +32,3 @@ var __extends = (this && this.__extends) || (function () {
         _this.signRatioPointsColl = [];
+        _this.canRedraw = true;
         return _this;
@@ -194,3 +195,3 @@ }
         var proxy = this;
-        if (this.isResponsive) {
+        if (this.isResponsive && this.canRedraw) {
             this.canvasContext.canvas.width = this.element.offsetWidth;
@@ -575,3 +576,3 @@ this.canvasContext.canvas.height = this.element.offsetHeight;
         this.updateSnapCollection(true);
-        this.isSignatureEmpty = true;
+        this.isSignatureEmpty = this.canRedraw = true;
         if (!this.isBlazor) {
@@ -740,3 +741,3 @@ this.trigger('change', args);
         };
-        this.isSignatureEmpty = false;
+        this.isSignatureEmpty = this.canRedraw = false;
     };
@@ -743,0 +744,0 @@ SignatureBase.prototype.saveBackground = function (savebg) {

src/index.d.ts

@@ -12,4 +12,5 @@ /**
 export * from './textbox/index';
+export * from './textarea/index';
 export * from './signature/index';
 export * from './rating/index';
 export * from './common/index';

src/index.js

@@ -12,4 +12,5 @@ /**
 export * from './textbox/index';
+export * from './textarea/index';
 export * from './signature/index';
 export * from './rating/index';
 export * from './common/index';

src/input/input.d.ts

@@ -6,2 +6,10 @@ /**
 /**
+ * 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.
@@ -21,3 +29,3 @@ */
     function wireClearBtnEvents(element: HTMLInputElement | HTMLTextAreaElement, button: HTMLElement, container: HTMLElement): void;
-    function destroy(): void;
+    function destroy(args: InputArgs, button?: HTMLElement): void;
     /**
@@ -205,2 +213,11 @@ * Sets the value to the input element.
     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;
 }
@@ -207,0 +224,0 @@ export interface InputObject {

src/input/input.js

@@ -23,2 +23,10 @@ /* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */
 /**
+ * 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.
@@ -44,2 +52,3 @@ */
     function createInput(args, internalCreateElement) {
+        args.element.__eventHandlers = {};
         var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;
@@ -83,33 +92,60 @@ var inputObject = { container: null, buttons: [], clearButton: null };
     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');
+        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"];
+                }
             }
-            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);
-        });
+        }
     }
-    Input.bindInitialEvent = bindInitialEvent;
     function checkInputValue(floatLabelType, inputElement) {
@@ -164,5 +200,13 @@ var inputValue = inputElement.value;
     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) {
@@ -222,11 +266,14 @@ var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;
         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'))) {
@@ -236,2 +283,16 @@ 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) {
@@ -324,36 +385,85 @@ if (type === 'Always' && container.classList.contains('e-outline')) {
     }
+    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;
@@ -579,3 +689,3 @@ }
     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;
@@ -695,7 +805,7 @@ if (isEnable) {
         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');
@@ -731,2 +841,5 @@ var inputObj = { container: container };
         }
+        else {
+            unWireFloatLabelEvents(args);
+        }
         checkFloatLabelType(type, input.parentElement);
@@ -915,3 +1028,55 @@ }
     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 */

src/maskedtextbox/base/mask-base.js

@@ -165,2 +165,3 @@ /* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */
     EventHandler.remove(this.element, 'paste', maskInputPasteHandler);
+    EventHandler.remove(this.element, 'drop', maskInputDropHandler);
     EventHandler.remove(this.element, 'cut', maskInputCutHandler);
@@ -167,0 +168,0 @@ EventHandler.remove(this.element, 'mousedown', maskInputMouseDownHandler);

src/maskedtextbox/maskedtextbox/maskedtextbox.d.ts

@@ -42,2 +42,3 @@ import { Component, EmitType, INotifyPropertyChanged, BaseEventArgs } from '@syncfusion/ej2-base';
     private isClicked;
+    private clearButton;
     /**
@@ -44,0 +45,0 @@ * Gets or sets the CSS classes to root element of the MaskedTextBox which helps to customize the

src/maskedtextbox/maskedtextbox/maskedtextbox.js

@@ -452,2 +452,5 @@ var __extends = (this && this.__extends) || (function () {
         unwireEvents.call(this);
+        if (this.showClearButton) {
+            this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
+        }
         var attrArray = ['aria-labelledby', 'role', 'autocomplete', 'aria-readonly',
@@ -464,3 +467,7 @@ 'aria-disabled', 'autocapitalize', 'spellcheck', 'aria-autocomplete', 'aria-live', 'aria-invalid'];
         this.blurEventArgs = null;
-        Input.destroy();
+        Input.destroy({
+            element: this.element,
+            floatLabelType: this.floatLabelType,
+            properties: this.properties
+        }, this.clearButton);
         this.changeEventArgs = null;
@@ -467,0 +474,0 @@ this.inputObj = null;

src/numerictextbox/numerictextbox.d.ts

@@ -55,2 +55,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     private inputValue;
+    private clearButton;
     /**
@@ -57,0 +58,0 @@ * Gets or Sets the CSS classes to root element of the NumericTextBox which helps to customize the

src/rating/rating.js

@@ -590,2 +590,3 @@ var __extends = (this && this.__extends) || (function () {
     Rating.prototype.keyActionHandler = function (e) {
+        e.preventDefault();
         if (this.disabled || this.readOnly) {
@@ -592,0 +593,0 @@ return;

src/signature/signature.js

@@ -63,2 +63,4 @@ var __extends = (this && this.__extends) || (function () {
     Signature.prototype.initialize = function () {
+        this.element.setAttribute('role', 'img');
+        this.element.setAttribute('aria-label', 'signature');
         addClass([this.element], 'e-' + this.getModuleName());
@@ -65,0 +67,0 @@ _super.prototype.initialize.call(this, this.element);

src/slider/slider-model.d.ts

@@ -345,5 +345,6 @@ import { Component, EventHandler, Property, Event, EmitType, Complex, Collection } from '@syncfusion/ej2-base';import { L10n, Internationalization, NumberFormatOptions } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';import { attributes, addClass, removeClass, setStyleAttribute, detach, closest } from '@syncfusion/ej2-base';import { isNullOrUndefined, formatUnit, Browser, SanitizeHtmlHelper, initializeCSPTemplate } from '@syncfusion/ej2-base';import { Tooltip, Position, TooltipEventArgs, getZindexPartial } from '@syncfusion/ej2-popups';
     /**
-     * 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
      */
@@ -350,0 +351,0 @@ enableHtmlSanitizer?: boolean;

src/slider/slider.d.ts

@@ -493,5 +493,6 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     /**
-     * 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
      */
@@ -498,0 +499,0 @@ enableHtmlSanitizer: boolean;

src/textbox/textbox-model.d.ts

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

src/textbox/textbox.d.ts

@@ -62,2 +62,3 @@ import { Component, EmitType } from '@syncfusion/ej2-base';
     private isVue;
+    private clearButton;
     /**
@@ -214,3 +215,2 @@ * Specifies the behavior of the TextBox such as text, password, email, etc.
     getModuleName(): string;
-    private isBlank;
     protected preRender(): void;
@@ -225,6 +225,4 @@ private checkAttributes;
     render(): void;
-    private updateHTMLAttrToWrapper;
-    private updateHTMLAttrToElement;
-    private updateCssClass;
-    private getInputValidClassList;
+    private updateHTMLAttributesToWrapper;
+    private updateHTMLAttributesToElement;
     private setInitialValue;
@@ -231,0 +229,0 @@ private wireEvents;

src/textbox/textbox.js

@@ -23,6 +23,4 @@ var __extends = (this && this.__extends) || (function () {
 import { addClass, removeClass } from '@syncfusion/ej2-base';
-import { Input } from '../input/input';
+import { Input, containerAttributes, TEXTBOX_FOCUS } from '../input/input';
 var HIDE_CLEAR = 'e-clear-icon-hide';
-var TEXTBOX_FOCUS = 'e-input-focus';
-var containerAttr = ['title', 'style', 'class'];
 /**
@@ -86,3 +84,3 @@ * Represents the TextBox component that allows the user to enter the values based on it's type.
                         this.isProtectedOnChange = true;
-                        if (!this.isBlank(this.value)) {
+                        if (!Input.isBlank(this.value)) {
                             this.value = this.value.toString();
@@ -109,4 +107,4 @@ }
                     {
-                        this.updateHTMLAttrToElement();
-                        this.updateHTMLAttrToWrapper();
+                        this.updateHTMLAttributesToElement();
+                        this.updateHTMLAttributesToWrapper();
                         this.checkAttributes(true);
@@ -146,3 +144,3 @@ this.multiline && !isNullOrUndefined(this.textarea) ? Input.validateInputType(this.textboxWrapper.container, this.textarea) : Input.validateInputType(this.textboxWrapper.container, this.element);
                 case 'cssClass':
-                    this.updateCssClass(newProp.cssClass, oldProp.cssClass);
+                    Input.updateCssClass(newProp.cssClass, oldProp.cssClass, this.textboxWrapper.container);
                     break;
@@ -167,5 +165,2 @@ case 'locale':
     };
-    TextBox.prototype.isBlank = function (str) {
-        return (!str || /^\s*$/.test(str));
-    };
     TextBox.prototype.preRender = function () {
@@ -201,3 +196,3 @@ this.cloneElement = this.element.cloneNode(true);
         }
-        this.updateHTMLAttrToElement();
+        this.updateHTMLAttributesToElement();
         this.checkAttributes(false);
@@ -238,3 +233,3 @@ if ((isNullOrUndefined(this.textboxOptions) || (this.textboxOptions['value'] === undefined)) && this.element.value !== '') {
                 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')) {
@@ -306,3 +301,3 @@ // e-mappinguid attribute is handled for Grid component.
         if (!isNullOrUndefined(this.cssClass) && this.cssClass !== '') {
-            updatedCssClassValue = this.getInputValidClassList(this.cssClass);
+            updatedCssClassValue = Input.getInputValidClassList(this.cssClass);
         }
@@ -322,3 +317,3 @@ this.respectiveElement = (this.isHiddenInput) ? this.textarea : this.element;
         });
-        this.updateHTMLAttrToWrapper();
+        this.updateHTMLAttributesToWrapper();
         if (this.isHiddenInput) {
@@ -353,46 +348,8 @@ this.respectiveElement.parentNode.insertBefore(this.element, this.respectiveElement);
     };
-    TextBox.prototype.updateHTMLAttrToWrapper = function () {
-        if (!isNullOrUndefined(this.htmlAttributes)) {
-            for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
-                var key = _a[_i];
-                if (containerAttr.indexOf(key) > -1) {
-                    if (key === 'class') {
-                        var updatedClassValues = this.getInputValidClassList(this.htmlAttributes["" + key]);
-                        if (updatedClassValues !== '') {
-                            addClass([this.textboxWrapper.container], updatedClassValues.split(' '));
-                        }
-                    }
-                    else if (key === 'style') {
-                        var setStyle = this.textboxWrapper.container.getAttribute(key);
-                        setStyle = !isNullOrUndefined(setStyle) ? (setStyle + this.htmlAttributes["" + key]) :
-                            this.htmlAttributes["" + key];
-                        this.textboxWrapper.container.setAttribute(key, setStyle);
-                    }
-                    else {
-                        this.textboxWrapper.container.setAttribute(key, this.htmlAttributes["" + key]);
-                    }
-                }
-            }
-        }
+    TextBox.prototype.updateHTMLAttributesToWrapper = function () {
+        Input.updateHTMLAttributesToWrapper(this.htmlAttributes, this.textboxWrapper.container);
     };
-    TextBox.prototype.updateHTMLAttrToElement = function () {
-        if (!isNullOrUndefined(this.htmlAttributes)) {
-            for (var _i = 0, _a = Object.keys(this.htmlAttributes); _i < _a.length; _i++) {
-                var key = _a[_i];
-                if (containerAttr.indexOf(key) < 0) {
-                    this.multiline && !isNullOrUndefined(this.textarea) ? this.textarea.setAttribute(key, this.htmlAttributes["" + key]) : this.element.setAttribute(key, this.htmlAttributes["" + key]);
-                }
-            }
-        }
+    TextBox.prototype.updateHTMLAttributesToElement = function () {
+        Input.updateHTMLAttributesToElement(this.htmlAttributes, this.respectiveElement ? this.respectiveElement : (this.multiline && !isNullOrUndefined(this.textarea) ? this.textarea : this.element));
     };
-    TextBox.prototype.updateCssClass = function (newClass, oldClass) {
-        Input.setCssClass(this.getInputValidClassList(newClass), [this.textboxWrapper.container], this.getInputValidClassList(oldClass));
-    };
-    TextBox.prototype.getInputValidClassList = function (inputClassName) {
-        var result = inputClassName;
-        if (!isNullOrUndefined(inputClassName) && inputClassName !== '') {
-            result = (inputClassName.replace(/\s+/g, ' ')).trim();
-        }
-        return result;
-    };
     TextBox.prototype.setInitialValue = function () {
@@ -588,2 +545,5 @@ if (!this.isAngular) {
         this.unWireEvents();
+        if (this.showClearButton) {
+            this.clearButton = document.getElementsByClassName('e-clear-icon')[0];
+        }
         if (this.element.tagName === 'INPUT' && this.multiline) {
@@ -602,3 +562,7 @@ detach(this.textboxWrapper.container.getElementsByTagName('textarea')[0]);
         this.textboxWrapper = null;
-        Input.destroy();
+        Input.destroy({
+            element: this.respectiveElement,
+            floatLabelType: this.floatLabelType,
+            properties: this.properties
+        }, this.clearButton);
         _super.prototype.destroy.call(this);
@@ -605,0 +569,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

26969445

increased by2.24%

Number of package files

853

increased by9.92%

Lines of code

365509

increased by1.4%

Dependency changes

• + Added@syncfusion/ej2-base@25.1.35(transitive)

• + Added@syncfusion/ej2-buttons@25.1.39(transitive)

• + Added@syncfusion/ej2-icons@25.1.35(transitive)

• + Added@syncfusion/ej2-popups@25.1.42(transitive)

• + Added@syncfusion/ej2-splitbuttons@25.1.38(transitive)

• - Removed@syncfusion/ej2-base@24.2.8(transitive)

• - Removed@syncfusion/ej2-buttons@24.2.7(transitive)

• - Removed@syncfusion/ej2-icons@24.2.3(transitive)

• - Removed@syncfusion/ej2-popups@24.2.10(transitive)

• - Removed@syncfusion/ej2-splitbuttons@24.2.7(transitive)

• Updated@syncfusion/ej2-base@~25.1.35

• Updated@syncfusion/ej2-buttons@~25.1.35

• Updated@syncfusion/ej2-popups@~25.1.35

• Updated@syncfusion/ej2-splitbuttons@~25.1.35