@syncfusion/ej2-inputs 25.2.5 → 26.1.35

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

@@ -1,6 +1,6 @@
-import { Ajax, Animation, Base, Browser, ChildProperty, Collection, Complex, Component, Event, EventHandler, Internationalization, KeyboardEvents, L10n, NotifyPropertyChanges, Property, SanitizeHtmlHelper, addClass, append, attributes, classList, closest, compile, createElement, detach, extend, formatUnit, getInstance, getNumericObject, getUniqueID, getValue, initializeCSPTemplate, isNullOrUndefined, merge, onIntlChange, remove, removeClass, rippleEffect, select, selectAll, setStyleAttribute, setValue } from '@syncfusion/ej2-base';
-import { Popup, Tooltip, createSpinner, getZindexPartial, hideSpinner, isCollide, showSpinner } from '@syncfusion/ej2-popups';
-import { Deferred, SplitButton, getModel } from '@syncfusion/ej2-splitbuttons';
+import { isNullOrUndefined, createElement, addClass, attributes, removeClass, formatUnit, remove, detach, classList, closest, getValue, setValue, L10n, getUniqueID, Internationalization, EventHandler, Browser, merge, getNumericObject, Property, Event, NotifyPropertyChanges, Component, extend, ChildProperty, setStyleAttribute, SanitizeHtmlHelper, initializeCSPTemplate, Collection, Complex, onIntlChange, select, selectAll, Base, KeyboardEvents, Ajax, append, Animation, compile, rippleEffect, getInstance } from '@syncfusion/ej2-base';
+import { Tooltip, getZindexPartial, createSpinner, showSpinner, hideSpinner, isCollide, Popup } from '@syncfusion/ej2-popups';
+import { SplitButton, Deferred, getModel } from '@syncfusion/ej2-splitbuttons';
 
 /* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */
 var CLASSNAMES = {
@@ -79,7 +79,6 @@ var Input;
         validateInputType(inputObject.container, args.element);
         inputObject = setPropertyValue(args, inputObject);
         createSpanElement(inputObject.container, makeElement);
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         return inputObject;
     }
     Input.createInput = createInput;
@@ -116,27 +115,27 @@ var Input;
         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 };
+        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;
+                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"];
+                    delete args.element.__eventHandlers['inputFocusHandler'];
+                    delete args.element.__eventHandlers['inputBlurHandler'];
+                    delete args.element.__eventHandlers['inputHandler'];
                 }
             }
         }
@@ -261,8 +260,8 @@ var Input;
             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 };
+            args.element.__eventHandlers['floatInputHandler'] = { inputFloatHandler: inputFloatHandler };
+            args.element.__eventHandlers['floatBlurHandler'] = { blurFloatHandler: blurFloatHandler };
         }
         else {
             unWireFloatLabelEvents(args);
@@ -272,17 +271,18 @@ var Input;
         }
     }
     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;
+        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"];
+            delete args.element.__eventHandlers['floatInputHandler'];
+            delete args.element.__eventHandlers['floatBlurHandler'];
         }
     }
     function checkFloatLabelType(type, container) {
@@ -368,7 +368,7 @@ var Input;
             baseElement.insertAdjacentElement('afterend', button);
         }
         addClass([button], CLASSNAMES.CLEARICONHIDE);
-        wireClearBtnEvents(element, button, container);
+        wireClearBtnEvents(element, button);
         button.setAttribute('aria-label', 'close');
         return button;
     }
@@ -401,7 +401,7 @@ var Input;
         if (isBindClearAction === undefined || isBindClearAction) {
             var clickHandlerEvent = function (e) { return clickHandler(e, element, button); };
             button.addEventListener('click', clickHandlerEvent);
-            element.__eventHandlers["clearClickHandler"] = { clickHandlerEvent: clickHandlerEvent };
+            element.__eventHandlers['clearClickHandler'] = { clickHandlerEvent: clickHandlerEvent };
         }
         var inputHandlerEvent = function () { return inputHandler(element, button); };
         var focusHandlerEvent = function () { return focusHandler(element, button); };
@@ -410,35 +410,36 @@ var Input;
         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 };
+        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 (!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);
                     }
                 }
-                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;
+                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"];
+                delete element.__eventHandlers['clearInputHandler'];
+                delete element.__eventHandlers['clearFocusHandler'];
+                delete element.__eventHandlers['clearBlurHandler'];
             }
         }
     }
@@ -458,7 +459,6 @@ var Input;
         if (!isNullOrUndefined(args.element)) {
             delete args.element.__eventHandlers;
         }
-        
     }
     Input.destroy = destroy;
     function validateLabel(element, floatLabelType) {
@@ -505,7 +505,7 @@ var Input;
      * @param {string} floatLabelType - Specify the float label type of the input element.
      * @param {boolean} clearButton - Boolean value to specify whether the clear icon is enabled / disabled on the input.
      */
-    function setValue$$1(value, element, floatLabelType, clearButton) {
+    function setValue(value, element, floatLabelType, clearButton) {
         element.value = value;
         if (floatLabelType !== 'Never') {
             calculateWidth(element, element.parentElement);
@@ -529,7 +529,7 @@ var Input;
         }
         checkInputValue(floatLabelType, element);
     }
-    Input.setValue = setValue$$1;
+    Input.setValue = setValue;
     /**
      * Sets the single or multiple cssClass to wrapper of input element.
      * ```
@@ -607,13 +607,25 @@ var Input;
         var parentElement = getParentNode(element);
         if (parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {
             if (!isNullOrUndefined(placeholder) && placeholder !== '') {
-                parentElement.getElementsByClassName('e-float-text-content')[0] ? parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].children[0].textContent = placeholder : parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;
+                var floatTextContent = parentElement.getElementsByClassName('e-float-text-content')[0];
+                if (floatTextContent) {
+                    floatTextContent.children[0].textContent = placeholder;
+                }
+                else {
+                    parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = placeholder;
+                }
                 parentElement.classList.remove(CLASSNAMES.NOFLOATLABEL);
                 element.removeAttribute('placeholder');
             }
             else {
                 parentElement.classList.add(CLASSNAMES.NOFLOATLABEL);
-                parentElement.getElementsByClassName('e-float-text-content')[0] ? parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].children[0].textContent = '' : parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';
+                var floatTextContent = parentElement.getElementsByClassName('e-float-text-content')[0];
+                if (floatTextContent) {
+                    floatTextContent.children[0].textContent = '';
+                }
+                else {
+                    parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';
+                }
             }
         }
         else {
@@ -843,7 +855,7 @@ var Input;
      * E.g : Input.createSpanElement(inputObject, makeElement);
      * ```
      *
-     * @param {InputObject} inputObject
+     * @param {Element} inputObject
      * - Element which is need to get the label
      * @param {createElementParams} makeElement
      * - Element which is need to create the span
@@ -870,7 +882,7 @@ var Input;
      */
     function setRipple(isRipple, inputObj) {
         for (var i = 0; i < inputObj.length; i++) {
-            _internalRipple(isRipple, inputObj[parseInt(i.toString())].container);
+            _internalRipple(isRipple, inputObj[parseInt(i.toString(), 10)].container);
         }
     }
     Input.setRipple = setRipple;
@@ -881,14 +893,14 @@ var Input;
             container.querySelectorAll('.e-input-group-icon') : argsButton;
         if (isRipple && buttons.length > 0) {
             for (var index = 0; index < buttons.length; index++) {
-                buttons[parseInt(index.toString())].addEventListener('mousedown', _onMouseDownRipple, false);
-                buttons[parseInt(index.toString())].addEventListener('mouseup', _onMouseUpRipple, false);
+                buttons[parseInt(index.toString(), 10)].addEventListener('mousedown', _onMouseDownRipple, false);
+                buttons[parseInt(index.toString(), 10)].addEventListener('mouseup', _onMouseUpRipple, false);
             }
         }
         else if (buttons.length > 0) {
             for (var index = 0; index < buttons.length; index++) {
-                buttons[parseInt(index.toString())].removeEventListener('mousedown', _onMouseDownRipple);
-                buttons[parseInt(index.toString())].removeEventListener('mouseup', _onMouseUpRipple);
+                buttons[parseInt(index.toString(), 10)].removeEventListener('mousedown', _onMouseDownRipple, this);
+                buttons[parseInt(index.toString(), 10)].removeEventListener('mouseup', _onMouseUpRipple, this);
             }
         }
     }
@@ -914,8 +926,7 @@ var Input;
         return true;
     }
     function _onMouseDownRipple() {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        var ele = this;
+        var ele =  this;
         var parentEle = this.parentElement;
         while (!parentEle.classList.contains('e-input-group')) {
             parentEle = parentEle.parentElement;
@@ -923,8 +934,7 @@ var Input;
         _onMouseRipple(parentEle, ele);
     }
     function _onMouseUpRipple() {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        var ele = this;
+        var ele =  this;
         setTimeout(function () {
             ele.classList.remove('e-input-btn-ripple');
         }, 500);
@@ -946,9 +956,7 @@ var Input;
      * @param {HTMLElement} container - The container on which created span element is going to append.
      * @param {HTMLElement} input - The inputElement on which created span element is going to prepend.
      */
-    /* eslint-disable @typescript-eslint/indent */
     function addIcon(position, icons, container, input, internalCreate) {
-        /* eslint-enable @typescript-eslint/indent */
         var result = typeof (icons) === 'string' ? icons.split(',')
             : icons;
         if (position.toLowerCase() === 'append') {
@@ -979,9 +987,7 @@ var Input;
      * @param {HTMLElement} container - The container on which created span element is going to append.
      * @param {HTMLElement} inputElement - The inputElement on which created span element is going to prepend.
      */
-    /* eslint-disable @typescript-eslint/indent */
     function prependSpan(iconClass, container, inputElement, internalCreateElement) {
-        /* eslint-enable @typescript-eslint/indent */
         var makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;
         var button = createIconEle(iconClass, makeElement);
         container.classList.add('e-float-icon-left');
@@ -992,7 +998,7 @@ var Input;
             var result = container.querySelectorAll(inputElement.tagName + ' ~ *');
             innerWrapper.appendChild(inputElement);
             for (var i = 0; i < result.length; i++) {
-                var element = result[parseInt(i.toString())];
+                var element = result[parseInt(i.toString(), 10)];
                 var parentElement = innerWrapper.parentElement;
                 if (!(element.classList.contains('e-float-line')) || (!(parentElement && parentElement.classList.contains('e-filled')) && parentElement)) {
                     innerWrapper.appendChild(element);
@@ -1144,9 +1150,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
      */
     function NumericTextBox(options, element) {
         var _this = _super.call(this, options, element) || this;
-        _this.isVue = false;
         _this.preventChange = false;
-        _this.isAngular = false;
         _this.isDynamicChange = false;
         _this.numericOptions = options;
         return _this;
@@ -1245,6 +1249,9 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
             if (this.element.hasAttribute('data-val')) {
                 this.element.setAttribute('data-val', 'false');
             }
+            if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder')) {
+                this.element.setAttribute('aria-label', 'numerictextbox');
+            }
             if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
                 this.enabled = false;
             }
@@ -1252,9 +1259,9 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     NumericTextBox.prototype.checkAttributes = function (isDynamic) {
-        var attributes$$1 = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
+        var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
             ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];
-        for (var _i = 0, attributes_1 = attributes$$1; _i < attributes_1.length; _i++) {
+        for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
             var prop = attributes_1[_i];
             if (!isNullOrUndefined(this.element.getAttribute(prop))) {
                 switch (prop) {
@@ -1709,16 +1716,14 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
                 }
                 if (_this.element.selectionStart > 0) {
                     if ((_this.element.value[_this.element.selectionStart - 1].charCodeAt(0) === 45) && _this.element.selectionStart > 1) {
-                        if (isNullOrUndefined(_this.prevVal)) {
-                            // eslint-disable-next-line no-self-assign
-                            _this.element.value = _this.element.value;
-                        }
-                        else {
+                        if (!isNullOrUndefined(_this.prevVal)) {
                             _this.element.value = _this.prevVal;
                         }
                         _this.element.setSelectionRange(_this.element.selectionStart, _this.element.selectionStart);
                     }
-                    if (_this.element.value[_this.element.selectionStart - 1] === decimalSeparator && _this.decimals === 0 && _this.validateDecimalOnType) {
+                    if (_this.element.value[_this.element.selectionStart - 1] === decimalSeparator &&
+                        _this.decimals === 0 &&
+                        _this.validateDecimalOnType) {
                         _this.element.value = _this.element.value.substring(0, prevPos) +
                             _this.element.value.substring(currentPos, _this.element.value.length);
                     }
@@ -1747,8 +1752,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     NumericTextBox.prototype.inputHandler = function (event) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias
-        var numerictextboxObj = this;
+        var numerictextboxObj =  this;
         if (!this.enabled || this.readonly) {
             return;
         }
@@ -1771,7 +1775,9 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
             var previous = this.instance.getNumberParser({ format: 'n' })(this.elementPrevValue);
             //EJ2-54963-if type "." or ".0" or "-.0" it converts to "0" automatically when binding v-model
             var nonZeroRegex = new RegExp('[^0-9]+$');
-            if (nonZeroRegex.test(this.element.value) || ((this.elementPrevValue.indexOf('.') !== -1 || this.elementPrevValue.indexOf('-') !== -1) && this.element.value[this.element.value.length - 1] === '0')) {
+            if (nonZeroRegex.test(this.element.value) ||
+                ((this.elementPrevValue.indexOf('.') !== -1 || this.elementPrevValue.indexOf('-') !== -1) &&
+                    this.element.value[this.element.value.length - 1] === '0')) {
                 current = this.value;
             }
             var eventArgs = {
@@ -1795,7 +1801,6 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
                     event.preventDefault();
                     this.action(DECREMENT, event);
                     break;
-                default: break;
             }
         }
     };
@@ -2083,8 +2088,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         if (!this.getElementData(event)) {
             return;
         }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        var result = this.getElementData(event);
+        this.getElementData(event);
         var target = event.currentTarget;
         var action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;
         EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);
@@ -2231,15 +2235,14 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         }, this.clearButton);
         _super.prototype.destroy.call(this);
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns */
     /**
      * Returns the value of NumericTextBox with the format applied to the NumericTextBox.
      *
+     * @returns {string} - Returns the formatted value of the NumericTextBox.
      */
     NumericTextBox.prototype.getText = function () {
         return this.element.value;
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns */
     /**
      * Sets the focus to widget for interaction.
      *
@@ -2262,17 +2265,15 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
             removeClass([this.container], [NUMERIC_FOCUS]);
         }
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Gets the properties to be maintained in the persisted state.
      *
-     * @returns {string}
+     * @returns {string} - Returns the persisted data.
      */
     NumericTextBox.prototype.getPersistData = function () {
         var keyEntity = ['value'];
         return this.addOnPersist(keyEntity);
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Calls internally if any of the property value is changed.
      *
@@ -2488,14 +2489,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
     return NumericTextBox;
 }(Component));
 
-/**
- * NumericTextBox modules
- */
-
 /* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */
-/**
- * MaskedTextBox base module
- */
 var ERROR$1 = 'e-error';
 var INPUTGROUP = 'e-input-group';
 var FLOATINPUT = 'e-float-input';
@@ -2654,8 +2648,8 @@ 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, 'drop', maskInputDropHandler);
     EventHandler.remove(this.element, 'mousedown', maskInputMouseDownHandler);
     EventHandler.remove(this.element, 'mouseup', maskInputMouseUpHandler);
     if (this.formElement) {
@@ -3644,13 +3638,8 @@ var MaskUndo = /** @__PURE__ @class */ (function () {
     }
     return MaskUndo;
 }());
-
 /* eslint-enable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */
 
-/**
- * MaskedTextbox base modules
- */
-
 var __extends$1 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -3699,7 +3688,6 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
     function MaskedTextBox(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.initInputValue = '';
-        _this.isAngular = false;
         _this.preventChange = false;
         _this.isClicked = false;
         _this.maskOptions = options;
@@ -3775,7 +3763,6 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
         var keyEntity = ['value'];
         return this.addOnPersist(keyEntity);
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Initializes the component rendering.
      *
@@ -3807,9 +3794,12 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
             if (this.element.getAttribute('value') || this.value) {
                 this.element.setAttribute('value', this.element.value);
             }
-            if (!isNullOrUndefined(closest(this.element, "fieldset")) && closest(this.element, "fieldset").disabled) {
+            if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
                 this.enabled = false;
             }
+            if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder')) {
+                this.element.setAttribute('aria-label', 'maskedtextbox');
+            }
             this.renderComplete();
         }
     };
@@ -3903,9 +3893,9 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
         }
     };
     MaskedTextBox.prototype.checkHtmlAttributes = function (isDynamic) {
-        var attributes$$1 = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes)
+        var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes)
             : ['placeholder', 'disabled', 'value', 'readonly'];
-        for (var _i = 0, attributes_1 = attributes$$1; _i < attributes_1.length; _i++) {
+        for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
             var key = attributes_1[_i];
             if (!isNullOrUndefined(this.element.getAttribute(key))) {
                 switch (key) {
@@ -3973,7 +3963,7 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
                     if (this.placeholder && !this.isFocus) {
                         this.setMaskPlaceholder(false, false);
                     }
-                    if (this.value === "" && oldProp.value != null) {
+                    if (this.value === '' && oldProp.value != null) {
                         this.element.selectionStart = 0;
                         this.element.selectionEnd = 0;
                     }
@@ -4052,17 +4042,15 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
         this.resetMaskedTextBox();
         setMaskValue.call(this, strippedVal);
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Gets the value of the MaskedTextBox with the masked format.
      * By using `value` property, you can get the raw value of maskedtextbox without literals and prompt characters.
      *
-     * @returns {string}
+     * @returns {string} Returns the value with the masked format.
      */
     MaskedTextBox.prototype.getMaskedValue = function () {
         return unstrippedValue.call(this, this.element);
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Sets the focus to widget for interaction.
      *
@@ -4179,18 +4167,6 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
     return MaskedTextBox;
 }(Component));
 
-/**
- * MaskedTextbox modules
- */
-
-/**
- * MaskedTextbox modules
- */
-
-/**
- * Input box Component
- */
-
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -4410,7 +4386,6 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         return _this;
     }
     Slider.prototype.preRender = function () {
-        // eslint-disable-next-line
         var localeText = { incrementTitle: 'Increase', decrementTitle: 'Decrease' };
         this.l10n = new L10n('slider', localeText, this.locale);
         this.isElementFocused = false;
@@ -4489,6 +4464,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     /**
      * To Initialize the control rendering
      *
+     * @returns {void}
      * @private
      */
     Slider.prototype.render = function () {
@@ -4499,7 +4475,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         this.setZindex();
         this.renderComplete();
         if (this.element.tagName === 'EJS-SLIDER') {
-            if (this.getTheme(this.sliderContainer) == 'none') {
+            if (this.getTheme(this.sliderContainer) === 'none') {
                 setTimeout(function () {
                     _this.refresh();
                 }, 0);
@@ -4551,6 +4527,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     /**
      * Initialize the rendering
      *
+     * @returns {void}
      * @private
      */
     Slider.prototype.initRender = function () {
@@ -4570,7 +4547,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         this.setOrientClass();
         this.hiddenInput = (this.createElement('input', {
             attrs: {
-                type: 'hidden', value: (isNullOrUndefined(this.value) ? this.min.toString() : this.value.toString()),
+                type: 'hidden', value: (isNullOrUndefined(this.value) ? (isNullOrUndefined(this.min) ? '0' : this.min.toString()) : this.value.toString()),
                 name: this.element.getAttribute('name') || this.element.getAttribute('id') ||
                     '_' + (Math.random() * 1000).toFixed(0) + 'slider', class: classNames.sliderHiddenInput
             }
@@ -4585,7 +4562,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             this.rangeValueUpdate();
         }
         else {
-            this.value = isNullOrUndefined(this.value) ? parseFloat(formatUnit(this.min.toString())) : this.value;
+            this.value = isNullOrUndefined(this.value) ? (isNullOrUndefined(this.min) ? 0 : parseFloat(formatUnit(this.min.toString()))) : this.value;
         }
         this.previousVal = this.type !== 'Range' ? this.checkHandleValue(parseFloat(formatUnit(this.value.toString()))) :
             [this.checkHandleValue(parseFloat(formatUnit(this.value[0].toString()))),
@@ -4628,6 +4605,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         this.isTailwind = this.getTheme(this.sliderContainer) === 'tailwind' || this.getTheme(this.sliderContainer) === 'tailwind-dark';
         this.isBootstrap5 = this.getTheme(this.sliderContainer) === 'bootstrap5';
         this.isFluent = this.getTheme(this.sliderContainer) === 'FluentUI';
+        this.isFluent2 = this.getTheme(this.sliderContainer) === 'fluent2';
         this.isMaterialTooltip = (this.isMaterial || this.isMaterial3) && this.type !== 'Range' && this.tooltip.isVisible;
     };
     Slider.prototype.createRangeBar = function () {
@@ -4689,7 +4667,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
         if (this.type !== 'Range') {
             attributes(element, {
-                'aria-valuemin': min.toString(), 'aria-valuemax': max.toString()
+                'aria-valuemin': isNullOrUndefined(min) ? '0' : min.toString(), 'aria-valuemax': (isNullOrUndefined(max) ? '100' : max.toString())
             });
         }
         else {
@@ -4835,8 +4813,12 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Slider.prototype.setEnableRTL = function () {
-        this.enableRtl && this.orientation !== 'Vertical' ? addClass([this.sliderContainer], classNames.rtl) :
+        if (this.enableRtl && this.orientation !== 'Vertical') {
+            addClass([this.sliderContainer], classNames.rtl);
+        }
+        else {
             removeClass([this.sliderContainer], classNames.rtl);
+        }
         var preDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;
         if (this.enableRtl) {
             this.horDir = 'right';
@@ -4894,8 +4876,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Slider.prototype.setTooltipContent = function () {
-        var content;
-        content = this.formatContent(this.tooltipFormatInfo, false);
+        var content = this.formatContent(this.tooltipFormatInfo, false);
         var contentTemp = function () {
             return content;
         };
@@ -5074,12 +5055,14 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
                 this.tooltipElement.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;
             }
             if (this.type === 'Default') {
-                setTimeout(function () { if (_this.tooltipElement)
-                    _this.tooltipElement.style.transition = _this.transition.handle; }, 2500);
+                setTimeout(function () { if (_this.tooltipElement) {
+                    _this.tooltipElement.style.transition = _this.transition.handle;
+                } }, 2500);
             }
             else {
-                setTimeout(function () { if (_this.tooltipElement)
-                    _this.tooltipElement.style.transition = 'none'; }, 2500);
+                setTimeout(function () { if (_this.tooltipElement) {
+                    _this.tooltipElement.style.transition = 'none';
+                } }, 2500);
             }
         }
     };
@@ -5098,8 +5081,9 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             this.tooltipElement.classList.remove(classNames.materialTooltipOpen);
             this.setTooltipTransform();
             this.tooltipTarget = undefined;
-            setTimeout(function () { if (_this.tooltipElement)
-                _this.tooltipElement.style.transition = 'none'; }, 2500);
+            setTimeout(function () { if (_this.tooltipElement) {
+                _this.tooltipElement.style.transition = 'none';
+            } }, 2500);
         }
     };
     Slider.prototype.checkTooltipPosition = function (args) {
@@ -5125,8 +5109,9 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     Slider.prototype.setTooltipTransform = function () {
         var transformProperties = this.getTooltipTransformProperties(this.previousTooltipClass);
-        if (isNullOrUndefined(this.tooltipElement))
+        if (isNullOrUndefined(this.tooltipElement)) {
             return;
+        }
         if (this.tooltipElement.firstElementChild.innerText.length > 4) {
             this.tooltipElement.style.transform = transformProperties.translate + " scale(0.01)";
         }
@@ -5136,7 +5121,8 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     Slider.prototype.renderTooltip = function () {
         this.tooltipObj = new Tooltip({
-            showTipPointer: this.isBootstrap || this.isMaterial || this.isMaterial3 || this.isBootstrap4 || this.isTailwind || this.isBootstrap5 || this.isFluent,
+            showTipPointer: this.isBootstrap || this.isMaterial || this.isMaterial3 ||
+                this.isBootstrap4 || this.isTailwind || this.isBootstrap5 || this.isFluent || this.isFluent2,
             cssClass: classNames.sliderTooltip,
             height: (this.isMaterial || this.isMaterial3) ? 30 : 'auto',
             animation: { open: { effect: 'None' }, close: { effect: 'FadeOut', duration: 500 } },
@@ -5208,13 +5194,21 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         var value;
         if (args.target.parentElement.classList.contains(classNames.firstButton)
             || args.target.classList.contains(classNames.firstButton)) {
-            enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), true)) :
-                (value = this.add(hVal, parseFloat(this.step.toString()), false));
+            if (enabledRTL) {
+                value = this.add(hVal, parseFloat(this.step.toString()), true);
+            }
+            else {
+                value = this.add(hVal, parseFloat(this.step.toString()), false);
+            }
         }
         else if (args.target.parentElement.classList.contains(classNames.secondButton)
             || (args.target.classList.contains(classNames.secondButton))) {
-            enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), false)) :
-                (value = this.add(hVal, parseFloat(this.step.toString()), true));
+            if (enabledRTL) {
+                value = this.add(hVal, parseFloat(this.step.toString()), false);
+            }
+            else {
+                value = this.add(hVal, parseFloat(this.step.toString()), true);
+            }
         }
         if (this.limits.enabled) {
             value = this.getLimitCorrectedValues(value);
@@ -5265,7 +5259,6 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
         return tickCount;
     };
-    // tslint:disable-next-line:max-func-body-length
     Slider.prototype.renderScale = function () {
         var orien = this.orientation === 'Vertical' ? 'v' : 'h';
         this.noOfDecimals = this.numberOfDecimals(this.step);
@@ -5279,8 +5272,12 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
         var smallStep = this.ticks.smallStep;
         if (!this.ticks.showSmallTicks) {
-            this.ticks.largeStep > 0 ? (smallStep = this.ticks.largeStep) :
-                (smallStep = (parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min))));
+            if (this.ticks.largeStep > 0) {
+                smallStep = this.ticks.largeStep;
+            }
+            else {
+                smallStep = (parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min)));
+            }
         }
         else if (smallStep <= 0) {
             smallStep = parseFloat(formatUnit(this.step));
@@ -5351,7 +5348,12 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             if (islargeTick) {
                 li.classList.add(classNames.large);
             }
-            (orien === 'h') ? (li.style.width = tickWidth + '%') : (li.style.height = tickWidth + '%');
+            if (orien === 'h') {
+                li.style.width = tickWidth + '%';
+            }
+            else {
+                li.style.height = tickWidth + '%';
+            }
             var repeat = islargeTick ? (this.ticks.placement === 'Both' ? 2 : 1) : 0;
             if (islargeTick) {
                 for (var j = 0; j < repeat; j++) {
@@ -5415,7 +5417,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         });
         li.appendChild(span);
         if (isNullOrUndefined(this.customValues)) {
-            this.formatTicksValue(li, start, span, tickWidth);
+            this.formatTicksValue(li, start, span);
         }
         else {
             if (this.enableHtmlSanitizer) {
@@ -5426,7 +5428,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             }
         }
     };
-    Slider.prototype.formatTicksValue = function (li, start, spanElement, tickWidth) {
+    Slider.prototype.formatTicksValue = function (li, start, spanElement) {
         var _this = this;
         var tickText = this.formatNumber(start);
         var text = !isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format) ?
@@ -5446,16 +5448,21 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     Slider.prototype.scaleAlignment = function () {
         this.tickValuePosition();
-        var orien = this.orientation === 'Vertical' ? 'v' : 'h';
         if (this.orientation === 'Vertical') {
-            (this.element.getBoundingClientRect().width <= 15) ?
-                this.sliderContainer.classList.add(classNames.sliderSmallSize) :
+            if (this.element.getBoundingClientRect().width <= 15) {
+                this.sliderContainer.classList.add(classNames.sliderSmallSize);
+            }
+            else {
                 this.sliderContainer.classList.remove(classNames.sliderSmallSize);
+            }
         }
         else {
-            (this.element.getBoundingClientRect().height <= 15) ?
-                this.sliderContainer.classList.add(classNames.sliderSmallSize) :
+            if (this.element.getBoundingClientRect().height <= 15) {
+                this.sliderContainer.classList.add(classNames.sliderSmallSize);
+            }
+            else {
                 this.sliderContainer.classList.remove(classNames.sliderSmallSize);
+            }
         }
     };
     Slider.prototype.tickValuePosition = function () {
@@ -5549,13 +5556,22 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             attributes(element, { 'aria-valuenow': valuenow, 'aria-valuetext': text });
         }
         else {
-            // eslint-disable-next-line
-            (!this.enableRtl) ? ((element === this.firstHandle) ?
-                attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] }) :
-                attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] })) :
-                ((element === this.firstHandle) ?
-                    attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] }) :
-                    attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] }));
+            if (!this.enableRtl) {
+                if (element === this.firstHandle) {
+                    attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] });
+                }
+                else {
+                    attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] });
+                }
+            }
+            else {
+                if (element === this.firstHandle) {
+                    attributes(element, { 'aria-valuenow': valuenow.split(' - ')[1], 'aria-valuetext': ariaValueText[1] });
+                }
+                else {
+                    attributes(element, { 'aria-valuenow': valuenow.split(' - ')[0], 'aria-valuetext': ariaValueText[0] });
+                }
+            }
         }
     };
     Slider.prototype.handleValueUpdate = function () {
@@ -5600,27 +5616,39 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         var hVal = this.handleValueUpdate();
         if ((args.keyCode === 40) || (args.keyCode === 37)
             || args.currentTarget.classList.contains(classNames.firstButton)) {
-            // eslint-disable-next-line
-            enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), true)) :
-                (value = this.add(hVal, parseFloat(this.step.toString()), false));
+            if (enabledRTL) {
+                value = this.add(hVal, parseFloat(this.step.toString()), true);
+            }
+            else {
+                value = this.add(hVal, parseFloat(this.step.toString()), false);
+            }
         }
         else if ((args.keyCode === 38) || (args.keyCode === 39) ||
             args.currentTarget.classList.contains(classNames.secondButton)) {
-            // eslint-disable-next-line
-            enabledRTL ? (value = this.add(hVal, parseFloat(this.step.toString()), false)) :
-                (value = this.add(hVal, parseFloat(this.step.toString()), true));
+            if (enabledRTL) {
+                value = this.add(hVal, parseFloat(this.step.toString()), false);
+            }
+            else {
+                value = this.add(hVal, parseFloat(this.step.toString()), true);
+            }
         }
         else if ((args.keyCode === 33
             || args.currentTarget.classList.contains(classNames.firstButton))) {
-            // eslint-disable-next-line
-            enabledRTL ? (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false)) :
-                (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true));
+            if (enabledRTL) {
+                value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false);
+            }
+            else {
+                value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true);
+            }
         }
         else if ((args.keyCode === 34) ||
             args.currentTarget.classList.contains(classNames.secondButton)) {
-            // eslint-disable-next-line
-            enabledRTL ? (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true)) :
-                (value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false));
+            if (enabledRTL) {
+                value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), true);
+            }
+            else {
+                value = this.add(hVal, parseFloat(this.ticks.largeStep.toString()), false);
+            }
         }
         else if ((args.keyCode === 36)) {
             value = parseFloat(this.min < this.max ? this.min.toString() : this.max.toString());
@@ -5648,13 +5676,20 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     Slider.prototype.tooltipToggle = function (target) {
         if (this.isMaterialTooltip) {
-            // eslint-disable-next-line
-            !this.tooltipElement.classList.contains(classNames.materialTooltipOpen) ?
-                this.openMaterialTooltip() : this.refreshTooltip(this.firstHandle);
+            if (!this.tooltipElement.classList.contains(classNames.materialTooltipOpen)) {
+                this.openMaterialTooltip();
+            }
+            else {
+                this.refreshTooltip(this.firstHandle);
+            }
         }
         else {
-            // eslint-disable-next-line
-            !this.tooltipElement ? this.openTooltip(target) : this.refreshTooltip(target);
+            if (!this.tooltipElement) {
+                this.openTooltip(target);
+            }
+            else {
+                this.refreshTooltip(target);
+            }
         }
     };
     Slider.prototype.buttonUp = function (args) {
@@ -5668,14 +5703,21 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     Slider.prototype.setRangeBar = function () {
         if (this.orientation === 'Horizontal' && !isNullOrUndefined(this.rangeBar)) {
             if (this.type === 'MinRange') {
-                // eslint-disable-next-line
-                this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');
+                if (this.enableRtl) {
+                    this.rangeBar.style.right = '0px';
+                }
+                else {
+                    this.rangeBar.style.left = '0px';
+                }
                 setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });
             }
             else {
-                // eslint-disable-next-line
-                this.enableRtl ? (this.rangeBar.style.right =
-                    this.handlePos1 + 'px') : (this.rangeBar.style.left = this.handlePos1 + 'px');
+                if (this.enableRtl) {
+                    this.rangeBar.style.right = this.handlePos1 + 'px';
+                }
+                else {
+                    this.rangeBar.style.left = this.handlePos1 + 'px';
+                }
                 setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });
             }
         }
@@ -5779,10 +5821,9 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             this.checkHandleValue(parseFloat(this.value.toString()));
         this.handlePos1 = this.checkHandlePosition(this.handleVal1);
         this.preHandlePos1 = this.handlePos1;
-        // eslint-disable-next-line
-        isNullOrUndefined(this.activeHandle) ? (this.type === 'Range' ? this.activeHandle = 2 : this.activeHandle = 1) :
-            // eslint-disable-next-line no-self-assign
-            this.activeHandle = this.activeHandle;
+        if (isNullOrUndefined(this.activeHandle)) {
+            this.activeHandle = this.type === 'Range' ? 2 : 1;
+        }
         if (this.type === 'Default' || this.type === 'MinRange') {
             if (this.limits.enabled) {
                 var values = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);
@@ -5842,10 +5883,16 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         }
         this.handleStart();
         handle.forEach(function (handle) {
+            if (isNullOrUndefined(handle)) {
+                return;
+            }
             if (_this.orientation === 'Horizontal') {
-                // eslint-disable-next-line
-                _this.enableRtl ? (handle.style.right =
-                    pos + "px") : (handle.style.left = pos + "px");
+                if (_this.enableRtl) {
+                    handle.style.right = pos + "px";
+                }
+                else {
+                    handle.style.left = pos + "px";
+                }
             }
             else {
                 handle.style.bottom = pos + "px";
@@ -5997,12 +6044,13 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     /**
      * It is used to reposition slider.
      *
-     * @returns void
+     * @returns {void}
      */
     Slider.prototype.reposition = function () {
         var _this = this;
-        if (!isNullOrUndefined(this.firstHandle))
+        if (!isNullOrUndefined(this.firstHandle)) {
             this.firstHandle.style.transition = 'none';
+        }
         if (this.type !== 'Default' && !isNullOrUndefined(this.rangeBar)) {
             this.rangeBar.style.transition = 'none';
         }
@@ -6014,26 +6062,38 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             this.handlePos2 = this.checkHandlePosition(this.handleVal2);
         }
         if (this.orientation === 'Horizontal') {
-            // eslint-disable-next-line
-            this.enableRtl ? this.firstHandle.style.right =
-                this.handlePos1 + "px" : this.firstHandle.style.left = this.handlePos1 + "px";
+            if (this.enableRtl) {
+                this.firstHandle.style.right = this.handlePos1 + "px";
+            }
+            else {
+                this.firstHandle.style.left = this.handlePos1 + "px";
+            }
             if (this.isMaterialTooltip && !isNullOrUndefined(this.materialHandle)) {
-                // eslint-disable-next-line
-                this.enableRtl ? this.materialHandle.style.right =
-                    this.handlePos1 + "px" : this.materialHandle.style.left = this.handlePos1 + "px";
+                if (this.enableRtl) {
+                    this.materialHandle.style.right = this.handlePos1 + "px";
+                }
+                else {
+                    this.materialHandle.style.left = this.handlePos1 + "px";
+                }
             }
             if (this.type === 'MinRange' && !isNullOrUndefined(this.rangeBar)) {
-                // eslint-disable-next-line
-                this.enableRtl ? (this.rangeBar.style.right = '0px') : (this.rangeBar.style.left = '0px');
+                if (this.enableRtl) {
+                    this.rangeBar.style.right = '0px';
+                }
+                else {
+                    this.rangeBar.style.left = '0px';
+                }
                 setStyleAttribute(this.rangeBar, { 'width': isNullOrUndefined(this.handlePos1) ? 0 : this.handlePos1 + 'px' });
             }
             else if (this.type === 'Range' && !isNullOrUndefined(this.secondHandle) && !isNullOrUndefined(this.rangeBar)) {
-                // eslint-disable-next-line
-                this.enableRtl ? this.secondHandle.style.right =
-                    this.handlePos2 + "px" : this.secondHandle.style.left = this.handlePos2 + "px";
-                // eslint-disable-next-line
-                this.enableRtl ? (this.rangeBar.style.right =
-                    this.handlePos1 + 'px') : (this.rangeBar.style.left = this.handlePos1 + 'px');
+                if (this.enableRtl) {
+                    this.secondHandle.style.right = this.handlePos2 + "px";
+                    this.rangeBar.style.right = this.handlePos1 + 'px';
+                }
+                else {
+                    this.secondHandle.style.left = this.handlePos2 + "px";
+                    this.rangeBar.style.left = this.handlePos1 + 'px';
+                }
                 setStyleAttribute(this.rangeBar, { 'width': this.handlePos2 - this.handlePos1 + 'px' });
             }
         }
@@ -6063,8 +6123,9 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         this.handleStart();
         if (!this.tooltip.isVisible) {
             setTimeout(function () {
-                if (!isNullOrUndefined(_this.firstHandle))
+                if (!isNullOrUndefined(_this.firstHandle)) {
                     _this.firstHandle.style.transition = _this.scaleTransform;
+                }
                 if (_this.type === 'Range' && !isNullOrUndefined(_this.secondHandle)) {
                     _this.secondHandle.style.transition = _this.scaleTransform;
                 }
@@ -6110,7 +6171,6 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             this.setHandlePosition(null);
         }
     };
-    // eslint-disable-next-line
     Slider.prototype.tempStartEnd = function () {
         if (this.min > this.max) {
             return {
@@ -6125,7 +6185,6 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             };
         }
     };
-    // eslint-disable-next-line
     Slider.prototype.xyToPosition = function (position) {
         var pos;
         if (this.min === this.max) {
@@ -6176,8 +6235,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         return value;
     };
     Slider.prototype.add = function (a, b, addition) {
-        var precision;
-        var x = Math.pow(10, precision || 3);
+        var x = Math.pow(10,  3);
         var val;
         if (addition) {
             val = (Math.round(a * x) + Math.round(b * x)) / x;
@@ -6201,7 +6259,6 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     Slider.prototype.sliderBarClick = function (evt) {
         evt.preventDefault();
-        // eslint-disable-next-line
         var pos;
         if (evt.type === 'mousedown' || evt.type === 'mouseup' || evt.type === 'click') {
             pos = { x: evt.clientX, y: evt.clientY };
@@ -6254,7 +6311,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             var eventX = evt.clientX, eventY = evt.clientY;
             behindElement = document.elementFromPoint(eventX, eventY);
         }
-        if (evt.target === handle && behindElement != handle) {
+        if (evt.target === handle && behindElement !== handle) {
             if ((this.isMaterial || this.isMaterial3) && !this.tooltip.isVisible &&
                 !this.getHandle().classList.contains(classNames.sliderTabHandle)) {
                 this.materialChange();
@@ -6276,7 +6333,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         if (this.isMaterialTooltip) {
             this.initialTooltip = false;
         }
-        if (evt.target != handle) {
+        if (evt.target !== handle) {
             this.changeEvent('changed', evt);
         }
         if (this.type !== 'Default') {
@@ -6672,8 +6729,13 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
                     }
                 }
                 if (this.type === 'Range') {
-                    (event.target.previousSibling).classList.contains(classNames.sliderHandle) ?
-                        this.activeHandle = 2 : this.activeHandle = 1;
+                    var previousSibling = event.target.previousSibling;
+                    if (previousSibling && previousSibling.classList.contains(classNames.sliderHandle)) {
+                        this.activeHandle = 2;
+                    }
+                    else {
+                        this.activeHandle = 1;
+                    }
                 }
                 this.getHandle().focus();
                 this.tooltipToggle(this.getHandle());
@@ -6843,6 +6905,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     /**
      * Get the properties to be maintained in the persisted state.
      *
+     * @returns {string} - Returns the string
      * @private
      */
     Slider.prototype.getPersistData = function () {
@@ -6854,7 +6917,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
      * Also it removes the attributes and classes.
      *
      * @method destroy
-     * @return {void}
+     * @returns {void}
      */
     Slider.prototype.destroy = function () {
         _super.prototype.destroy.call(this);
@@ -6865,7 +6928,9 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         if (this.type === 'Range') {
             this.secondHandle.removeAttribute('aria-orientation');
         }
-        this.sliderContainer.parentNode.insertBefore(this.element, this.sliderContainer);
+        if (this.sliderContainer.parentNode) {
+            this.sliderContainer.parentNode.insertBefore(this.element, this.sliderContainer);
+        }
         detach(this.sliderContainer);
         if (this.tooltip.isVisible) {
             this.tooltipObj.destroy();
@@ -6893,9 +6958,11 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     /**
      * Calls internally if any of the property value is changed.
      *
+     * @param {SliderModel} newProp - Specifies the new properties
+     * @param {SliderModel} oldProp - Specifies the old properties
+     * @returns {void}
      * @private
      */
-    // tslint:disable-next-line
     Slider.prototype.onPropertyChanged = function (newProp, oldProp) {
         var _this = this;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -7055,8 +7122,9 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         if (!this.isMaterial && !this.isMaterial3 && !isNullOrUndefined(this.ticks) && this.ticks.placement === 'Both') {
             this.element.style.zIndex = (this.zIndex + 2) + '';
         }
-        if (!isNullOrUndefined(this.firstHandle))
+        if (!isNullOrUndefined(this.firstHandle)) {
             this.firstHandle.style.zIndex = (this.zIndex + 3) + '';
+        }
         if (this.type === 'Range' && !isNullOrUndefined(this.secondHandle)) {
             this.secondHandle.style.zIndex = (this.zIndex + 4) + '';
         }
@@ -7090,7 +7158,8 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
                         trackClassName = classNames.sliderHorizantalColor;
                         if (this.enableRtl) {
                             if (isNullOrUndefined(this.customValues)) {
-                                trackPosition = this.checkHandlePosition(this.max) - this.checkHandlePosition(this.colorRange[i].end);
+                                trackPosition =
+                                    this.checkHandlePosition(this.max) - this.checkHandlePosition(this.colorRange[i].end);
                             }
                             else {
                                 trackPosition = this.checkHandlePosition(this.customValues.length - this.colorRange[i].end - 1);
@@ -7117,6 +7186,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     /**
      * Gets the component name
      *
+     * @returns {string} - Returns the string
      * @private
      */
     Slider.prototype.getModuleName = function () {
@@ -7200,10 +7270,6 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     return Slider;
 }(Component));
 
-/**
- * Slider modules
- */
-
 var __extends$3 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7226,7 +7292,6 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
 /**
  * global declarations
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var regex = {
     /* eslint-disable no-useless-escape */
     EMAIL: new RegExp('^[A-Za-z0-9._%+-]{1,}@[A-Za-z0-9._%+-]{1,}([.]{1}[a-zA-Z0-9]{2,}' +
@@ -7373,20 +7438,19 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
         }
         else if (!isNullOrUndefined(this.rules["" + name] && rules)) {
             for (var i = 0; i < rules.length; i++) {
-                delete this.rules["" + name][rules[parseInt(i.toString())]];
+                delete this.rules["" + name][rules[parseInt(i.toString(), 10)]];
             }
         }
         else {
             return;
         }
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Validate the current form values using defined rules.
      * Returns `true` when the form is valid otherwise `false`
      *
      * @param {string} selected - Optional parameter to validate specified element.
-     * @returns {boolean}
+     * @returns {boolean} - Returns form validation status.
      */
     FormValidator.prototype.validate = function (selected) {
         var rules = Object.keys(this.rules);
@@ -7406,7 +7470,6 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             return this.errorRules.length === 0;
         }
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Reset the value of all the fields in form.
      *
@@ -7416,18 +7479,16 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
         this.element.reset();
         this.clearForm();
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Get input element by name.
      *
      * @param {string} name - Input element name attribute value.
-     * @returns {HTMLInputElement}
+     * @returns {HTMLInputElement} - Returns the input element.
      */
     FormValidator.prototype.getInputElement = function (name) {
         this.inputElement = (select('[name="' + name + '"]', this.element));
         return this.inputElement;
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Destroy the form validator object and error elements.
      *
@@ -7484,9 +7545,9 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * @param {any} args - Specifies the culture name.
+     * @returns {void}
      * @private
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
     FormValidator.prototype.afterLocalization = function (args) {
         this.locale = args.locale;
         this.localeFunc();
@@ -7511,10 +7572,12 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             input.removeAttribute('aria-invalid');
             var inputParent = input.parentElement;
             var grandParent = inputParent.parentElement;
-            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||
+                (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                 inputParent.classList.remove(this.errorClass);
             }
-            else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
+            else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') ||
+                grandParent.classList.contains('e-wrapper'))) {
                 grandParent.classList.remove(this.errorClass);
             }
             else {
@@ -7525,10 +7588,12 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
                 this.getErrorElement(input.name);
                 this.hideMessage(input.name);
             }
-            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||
+                (input.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                 inputParent.classList.remove(this.validClass);
             }
-            else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
+            else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') ||
+                grandParent.classList.contains('e-wrapper'))) {
                 grandParent.classList.remove(this.validClass);
             }
             else {
@@ -7783,11 +7848,13 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
                     this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');
                     var inputParent = this.inputElement.parentElement;
                     var grandParent = inputParent.parentElement;
-                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
+                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||
+                        (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                         inputParent.classList.add(this.errorClass);
                         inputParent.classList.remove(this.validClass);
                     }
-                    else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
+                    else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') ||
+                        grandParent.classList.contains('e-wrapper'))) {
                         grandParent.classList.add(this.errorClass);
                         grandParent.classList.remove(this.validClass);
                     }
@@ -7803,11 +7870,13 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
                     }
                     eventArgs.errorElement = this.infoElement;
                     eventArgs.status = 'failure';
-                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
+                    if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||
+                        (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                         inputParent.classList.add(this.errorClass);
                         inputParent.classList.remove(this.validClass);
                     }
-                    else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') || grandParent.classList.contains('e-wrapper'))) {
+                    else if ((grandParent != null) && (grandParent.classList.contains('e-control-wrapper') ||
+                        grandParent.classList.contains('e-wrapper'))) {
                         grandParent.classList.add(this.errorClass);
                         grandParent.classList.remove(this.validClass);
                     }
@@ -7876,8 +7945,8 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
         var formats = message.match(/{(\d)}/g);
         if (!isNullOrUndefined(formats)) {
             for (var i = 0; i < formats.length; i++) {
-                var value = ruleValue instanceof Array ? ruleValue[parseInt(i.toString())] : ruleValue;
-                message = message.replace(formats[parseInt(i.toString())], value);
+                var value = ruleValue instanceof Array ? ruleValue[parseInt(i.toString(), 10)] : ruleValue;
+                message = message.replace(formats[parseInt(i.toString(), 10)], value);
             }
         }
         return message;
@@ -7939,7 +8008,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
     // Remove existing rule from errorRules object
     FormValidator.prototype.removeErrorRules = function (name) {
         for (var i = 0; i < this.errorRules.length; i++) {
-            var rule = this.errorRules[parseInt(i.toString())];
+            var rule = this.errorRules[parseInt(i.toString(), 10)];
             if (rule.name === name) {
                 this.errorRules.splice(i, 1);
             }
@@ -7958,7 +8027,8 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             this.removeErrorRules(name);
             var inputParent = this.inputElement.parentElement;
             var grandParent = inputParent.parentElement;
-            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') || (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
+            if (inputParent.classList.contains('e-control-wrapper') || inputParent.classList.contains('e-wrapper') ||
+                (this.inputElement.classList.contains('e-input') && inputParent.classList.contains('e-input-group'))) {
                 inputParent.classList.add(this.validClass);
                 inputParent.classList.remove(this.errorClass);
             }
@@ -7981,7 +8051,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             this.hideMessage(name);
         }
     };
-    // Return boolean result if the input have chekcable or submit types
+    // Return boolean result if the input have checkable or submit types
     FormValidator.isCheckable = function (input) {
         var inputType = input.getAttribute('type');
         return inputType && (inputType === 'checkbox' || inputType === 'radio' || inputType === 'submit');
@@ -8014,10 +8084,10 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             return regex.DIGITS.test(option.value);
         },
         maxLength: function (option) {
-            return option.value.length <= option.param;
+            return option.value.length <= Number(option.param);
         },
         minLength: function (option) {
-            return option.value.length >= option.param;
+            return option.value.length >= Number(option.param);
         },
         rangeLength: function (option) {
             var param = option.param;
@@ -8041,7 +8111,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
         max: function (option) {
             if (!isNaN(Number(option.value))) {
                 // Maximum rule validation for number
-                return +option.value <= option.param;
+                return +option.value <= +option.param;
             }
             // Maximum rule validation for date
             return new Date(option.value).getTime() <= new Date(JSON.parse(JSON.stringify(option.param))).getTime();
@@ -8049,11 +8119,11 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
         min: function (option) {
             if (!isNaN(Number(option.value))) {
                 // Minimum rule validation for number
-                return +option.value >= option.param;
+                return +option.value >= +option.param;
             }
             else if ((option.value).indexOf(',') !== -1) {
                 var uNum = (option.value).replace(/,/g, '');
-                return parseFloat(uNum) >= option.param;
+                return parseFloat(uNum) >= Number(option.param); // Convert option.param to a number
             }
             else {
                 // Minimum rule validation for date
@@ -8124,10 +8194,6 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
     return FormValidator;
 }(Base));
 
-/**
- * Input box Component
- */
-
 var __extends$4 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -8147,7 +8213,6 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
     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;
 };
-/* eslint-disable @typescript-eslint/no-explicit-any */
 var CONTROL_WRAPPER = 'e-upload e-control-wrapper';
 var INPUT_WRAPPER = 'e-file-select';
 var DROP_AREA = 'e-file-drop';
@@ -8284,7 +8349,6 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         _this.newFileRef = 0;
         _this.isFirstFileOnSelection = false;
         _this.dragCounter = 0;
-        _this.isAngular = false;
         /**
          * Get the file item(li) which are shown in file list.
          *
@@ -8348,8 +8412,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
                     this.updateDirectoryAttributes();
                     break;
                 case 'template':
-                    var ejInstance = getValue('ej2_instances', this.element);
-                    if (ejInstance[0].isReact) {
+                    if (this.isReact) {
                         this.reRenderFileList();
                     }
                     else {
@@ -9293,10 +9356,8 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         }
         return false;
     };
-    /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
     /* istanbul ignore next */
     Uploader.prototype.traverseFileTree = function (item, event) {
-        /* eslint-enable @typescript-eslint/explicit-module-boundary-types */
         if (item.isFile) {
             this.filesEntries.push(item);
         }
@@ -9416,8 +9477,8 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         if (this.enableHtmlSanitizer) {
             for (var i = 0; i < fileData.length; i++) {
                 var sanitizeFile = SanitizeHtmlHelper.beforeSanitize();
-                var sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[parseInt(i.toString())].name);
-                var currentFileName = fileData[parseInt(i.toString())].name;
+                var sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[parseInt(i.toString(), 10)].name);
+                var currentFileName = fileData[parseInt(i.toString(), 10)].name;
                 var isUTF8 = false;
                 for (var i_1 = 0; i_1 < currentFileName.length; i_1++) {
                     if (currentFileName.charCodeAt(i_1) > 127) {
@@ -9427,13 +9488,13 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
                 }
                 var htmlTagRegex = /<([a-z][a-z0-9]*)\b[^>]*>(.*?)<\/\1>/i;
                 var hasHTMLString = htmlTagRegex.test(currentFileName);
-                if ((sanitizeFileName !== fileData[parseInt(i.toString())].name) && !(isUTF8 && !hasHTMLString)) {
-                    var encodedFileName = targetFiles[parseInt(i.toString())].name.replace(/[\u00A0-\u9999<>\&]/g, function (i) {
+                if ((sanitizeFileName !== fileData[parseInt(i.toString(), 10)].name) && !(isUTF8 && !hasHTMLString)) {
+                    var encodedFileName = targetFiles[parseInt(i.toString(), 10)].name.replace(/[\u00A0-\u9999<>\\&]/g, function (i) {
                         return '&#' + i.charCodeAt(0) + ';';
                     });
-                    fileData[parseInt(i.toString())].name = encodedFileName;
-                    fileData[parseInt(i.toString())].status = this.localizedTexts('invalidFileName');
-                    fileData[parseInt(i.toString())].statusCode = '0';
+                    fileData[parseInt(i.toString(), 10)].name = encodedFileName;
+                    fileData[parseInt(i.toString(), 10)].status = this.localizedTexts('invalidFileName');
+                    fileData[parseInt(i.toString(), 10)].statusCode = '0';
                 }
             }
         }
@@ -9444,9 +9505,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
             _this._internalRenderSelect(eventArgs, fileData);
         });
     };
-    Uploader.prototype.updateInitialFileDetails = function (args, 
-    // eslint-disable-next-line @typescript-eslint/indent
-    targetFiles, file, i, fileData, directory, paste) {
+    Uploader.prototype.updateInitialFileDetails = function (args, targetFiles, file, i, fileData, directory, paste) {
         var fileName = directory ? targetFiles[i].path.substring(1, targetFiles[i].path.length) : paste ?
             getUniqueID(file.name.substring(0, file.name.lastIndexOf('.'))) + '.' + this.getFileType(file.name) :
             this.directoryUpload ? targetFiles[i].webkitRelativePath : file.name;
@@ -9591,7 +9650,8 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
                 allowedExtensions.push(extension.trim().toLocaleLowerCase());
             }
             for (var i = 0; i < files.length; i++) {
-                var checkFileType = files[i].type.indexOf(".") !== -1 ? files[i].type.replace(".", "") : files[i].type;
+                var checkFileType = files[i].type.indexOf('.') !== -1 ?
+                    files[i].type.replace('.', '') : files[i].type;
                 if (allowedExtensions.indexOf(('.' + checkFileType).toLocaleLowerCase()) === -1) {
                     files[i].status = this.localizedTexts('invalidFileType');
                     files[i].statusCode = '0';
@@ -9619,7 +9679,8 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
     Uploader.prototype.isPreLoadFile = function (fileData) {
         var isPreload = false;
         for (var i = 0; i < this.files.length; i++) {
-            if (this.files[i].name === fileData.name.slice(0, fileData.name.lastIndexOf('.')) && this.files[i].type === fileData.type) {
+            if (this.files[i].name === fileData.name.slice(0, fileData.name.lastIndexOf('.')) &&
+                this.files[i].type === fileData.type) {
                 isPreload = true;
             }
         }
@@ -9868,7 +9929,6 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         this.fileList.push(fileList);
         this.renderReactTemplates();
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
      * Create the file list for specified files data.
      *
@@ -9880,7 +9940,6 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         this.internalCreateFileList(fileData);
     };
     Uploader.prototype.internalCreateFileList = function (fileData) {
-        /* eslint-enable valid-jsdoc, jsdoc/require-param */
         this.createParentUL();
         if (this.template !== '' && !isNullOrUndefined(this.template)) {
             if (this.isFormUpload()) {
@@ -10032,7 +10091,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
             if (!isNullOrUndefined(li) && !li.classList.contains(UPLOAD_SUCCESS)) {
                 filterFiles.push(files[i]);
             }
-            else if (!this.showFileList && files[i].status !== "File uploaded successfully") {
+            else if (!this.showFileList && files[i].status !== 'File uploaded successfully') {
                 filterFiles.push(files[i]);
             }
         }
@@ -10357,7 +10416,8 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         for (var selectFileIndex = 0; selectFileIndex < selectedFiles.length; selectFileIndex++) {
             var selectedFileData = selectedFiles[selectFileIndex];
             for (var fileDataIndex = 0; fileDataIndex < this.filesData.length; fileDataIndex++) {
-                if (this.filesData[fileDataIndex].name === selectedFileData.name && this.filesData[fileDataIndex].status === selectedFileData.status) {
+                if (this.filesData[fileDataIndex].name === selectedFileData.name &&
+                    this.filesData[fileDataIndex].status === selectedFileData.status) {
                     matchFiles[matchFilesIndex] = this.filesData[fileDataIndex];
                     ++matchFilesIndex;
                 }
@@ -10468,9 +10528,9 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Uploader.prototype.checkHTMLAttributes = function (isDynamic) {
-        var attributes$$1 = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
+        var attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
             ['accept', 'multiple', 'disabled'];
-        for (var _i = 0, attributes_1 = attributes$$1; _i < attributes_1.length; _i++) {
+        for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
             var prop = attributes_1[_i];
             if (!isNullOrUndefined(this.element.getAttribute(prop))) {
                 switch (prop) {
@@ -10690,13 +10750,17 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
             this.updateStatus(metaData.file, this.localizedTexts('fileUploadCancel'), '5');
             this.updateProgressBarClasses(liElement, UPLOAD_FAILED);
             this.removeProgressbar(liElement, 'failure');
-            (deleteIcon && deleteIcon.classList.remove(ABORT_ICON));
-            (deleteIcon && deleteIcon.classList.add(REMOVE_ICON));
-            (deleteIcon && deleteIcon.setAttribute('title', this.localizedTexts('remove')));
+            if (deleteIcon) {
+                deleteIcon.classList.remove(ABORT_ICON);
+                deleteIcon.classList.add(REMOVE_ICON);
+                deleteIcon.setAttribute('title', this.localizedTexts('remove'));
+            }
             var pauseIcon = liElement.querySelector('.' + PAUSE_UPLOAD);
-            (pauseIcon && pauseIcon.classList.add(RETRY_ICON));
-            (pauseIcon && pauseIcon.classList.remove(PAUSE_UPLOAD));
-            (pauseIcon && pauseIcon.setAttribute('title', this.localizedTexts('retry')));
+            if (pauseIcon) {
+                pauseIcon.classList.add(RETRY_ICON);
+                pauseIcon.classList.remove(PAUSE_UPLOAD);
+                pauseIcon.setAttribute('title', this.localizedTexts('retry'));
+            }
             if (!isNullOrUndefined(liElement) && !isNullOrUndefined(deleteIcon)
                 && !isNullOrUndefined(liElement.querySelector('.e-spinner-pane'))) {
                 hideSpinner(spinnerTarget);
@@ -10979,13 +11043,12 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
             }, false);
         }
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * It is used to convert bytes value into kilobytes or megabytes depending on the size based
      * on [binary prefix](https://en.wikipedia.org/wiki/Binary_prefix).
      *
      * @param { number } bytes - Specifies the file size in bytes.
-     * @returns {string}
+     * @returns {string} - Returns the file size.
      */
     Uploader.prototype.bytesToSize = function (bytes) {
         var i = -1;
@@ -11028,7 +11091,6 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         }
         return sortedFilesData;
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Removes the component from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
      *
@@ -11049,8 +11111,8 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         }
         this.element.removeAttribute('accept');
         this.setInitialAttributes();
-        var attributes$$1 = ['aria-label', 'directory', 'webkitdirectory', 'tabindex'];
-        for (var _i = 0, attributes_2 = attributes$$1; _i < attributes_2.length; _i++) {
+        var attributes = ['aria-label', 'directory', 'webkitdirectory', 'tabindex'];
+        for (var _i = 0, attributes_2 = attributes; _i < attributes_2.length; _i++) {
             var key = attributes_2[_i];
             this.element.removeAttribute(key);
         }
@@ -11158,20 +11220,6 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         this.fileStreams[fileCount] = file;
         return fileCount;
     };
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    /* istanbul ignore next */
-    Uploader.prototype.getFileInfo = function (index, ele) {
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        var files = this.filesData;
-        if (!files || files.length === 0) {
-            return null;
-        }
-        var file = files[index];
-        if (!file) {
-            return null;
-        }
-        return this.filesData[index];
-    };
     Uploader.prototype.uploadFiles = function (files, custom) {
         var selectedFiles = [];
         if (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl)) {
@@ -11659,13 +11707,8 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
     ], Uploader);
     return Uploader;
 }(Component));
-
 /* eslint-enable @typescript-eslint/no-explicit-any */
 
-/**
- * Uploader modules
- */
-
 var __extends$5 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -11685,7 +11728,6 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
     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;
 };
-/* eslint-disable prefer-spread */
 var APPLY = 'e-apply';
 var CANCEL = 'e-cancel';
 var CURRENT = 'e-current';
@@ -12729,7 +12771,6 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
         if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {
             this.refreshImageEditorPopupPos();
         }
-        
         this.wireEvents();
         this.trigger('onModeSwitch', { element: this.container, mode: 'Palette' });
     };
@@ -12870,7 +12911,6 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
         if (this.element.parentElement && this.element.parentElement.parentElement && this.element.parentElement.parentElement.classList.contains('e-ie-ddb-popup')) {
             this.refreshImageEditorPopupPos();
         }
-        
         this.wireEvents();
         this.trigger('onModeSwitch', { element: this.container, mode: 'Picker' });
     };
@@ -13637,10 +13677,6 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
     return ColorPicker;
 }(Component));
 
-/**
- * ColorPicker modules
- */
-
 var __extends$6 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -13684,11 +13720,9 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
     function TextBox(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.previousValue = null;
-        _this.isAngular = false;
         _this.isHiddenInput = false;
         _this.isForm = false;
         _this.inputPreviousValue = null;
-        _this.isVue = false;
         _this.textboxOptions = options;
         return _this;
     }
@@ -13744,7 +13778,12 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
                         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);
+                        if (this.multiline && !isNullOrUndefined(this.textarea)) {
+                            Input.validateInputType(this.textboxWrapper.container, this.textarea);
+                        }
+                        else {
+                            Input.validateInputType(this.textboxWrapper.container, this.element);
+                        }
                     }
                     break;
                 case 'readonly':
@@ -13835,7 +13874,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
         if (this.element.tagName !== 'TEXTAREA') {
             this.element.setAttribute('type', this.type);
         }
-        if (this.type === 'text') {
+        if (this.type === 'text' || (this.element.tagName === 'INPUT' && this.multiline && this.isReact)) {
             this.element.setAttribute('role', 'textbox');
         }
         this.globalize = new Internationalization(this.locale);
@@ -13973,13 +14012,17 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(closest(this.element, 'fieldset')) && closest(this.element, 'fieldset').disabled) {
             this.enabled = false;
         }
+        if (!this.element.hasAttribute('aria-labelledby') && !this.element.hasAttribute('placeholder')) {
+            this.element.setAttribute('aria-label', 'textbox');
+        }
         this.renderComplete();
     };
     TextBox.prototype.updateHTMLAttributesToWrapper = function () {
         Input.updateHTMLAttributesToWrapper(this.htmlAttributes, this.textboxWrapper.container);
     };
     TextBox.prototype.updateHTMLAttributesToElement = function () {
-        Input.updateHTMLAttributesToElement(this.htmlAttributes, this.respectiveElement ? this.respectiveElement : (this.multiline && !isNullOrUndefined(this.textarea) ? this.textarea : this.element));
+        Input.updateHTMLAttributesToElement(this.htmlAttributes, this.respectiveElement ? this.respectiveElement :
+            (this.multiline && !isNullOrUndefined(this.textarea) ? this.textarea : this.element));
     };
     TextBox.prototype.setInitialValue = function () {
         if (!this.isAngular) {
@@ -14063,13 +14106,12 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
         this.trigger('blur', eventArgs);
     };
     TextBox.prototype.keydownHandler = function (args) {
-        if ((args.keyCode === 13 || args.keyCode === 9) && !((this.previousValue === null || this.previousValue === "") && (this.value === null || this.value === "") && this.respectiveElement.value === "")) {
+        if ((args.keyCode === 13 || args.keyCode === 9) && !((this.previousValue === null || this.previousValue === '') && (this.value === null || this.value === '') && this.respectiveElement.value === '')) {
             this.setProperties({ value: this.respectiveElement.value }, true);
         }
     };
     TextBox.prototype.inputHandler = function (args) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias
-        var textboxObj = this;
+        var textboxObj =  this;
         var eventArgs = {
             event: args,
             value: this.respectiveElement.value,
@@ -14090,7 +14132,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
     };
     TextBox.prototype.changeHandler = function (args) {
         this.setProperties({ value: this.respectiveElement.value }, true);
-        if (this.previousValue != this.value) {
+        if (this.previousValue !== this.value) {
             this.raiseChangeEvent(args, true);
         }
         args.stopPropagation();
@@ -14205,24 +14247,23 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
     TextBox.prototype.addIcon = function (position, icons) {
         Input.addIcon(position, icons, this.textboxWrapper.container, this.respectiveElement, this.createElement);
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns */
     /**
      * Gets the properties to be maintained in the persisted state.
      *
+     * @returns {string} Returns the persisted data.
      */
     TextBox.prototype.getPersistData = function () {
         var keyEntity = ['value'];
         return this.addOnPersist(keyEntity);
     };
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns */
     /**
      * Adding the multiple attributes as key-value pair to the TextBox element.
      *
      * @param {string} attributes - Specifies the attributes to be add to TextBox element.
      * @returns {void}
      */
-    TextBox.prototype.addAttributes = function (attributes$$1) {
-        for (var _i = 0, _a = Object.keys(attributes$$1); _i < _a.length; _i++) {
+    TextBox.prototype.addAttributes = function (attributes) {
+        for (var _i = 0, _a = Object.keys(attributes); _i < _a.length; _i++) {
             var key = _a[_i];
             if (key === 'disabled') {
                 this.setProperties({ enabled: false }, true);
@@ -14233,17 +14274,17 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
                 Input.setReadonly(this.readonly, this.respectiveElement);
             }
             else if (key === 'class') {
-                this.respectiveElement.classList.add(attributes$$1["" + key]);
+                this.respectiveElement.classList.add(attributes["" + key]);
             }
             else if (key === 'placeholder') {
-                this.setProperties({ placeholder: attributes$$1["" + key] }, true);
+                this.setProperties({ placeholder: attributes["" + key] }, true);
                 Input.setPlaceholder(this.placeholder, this.respectiveElement);
             }
             else if (key === 'rows' && this.respectiveElement.tagName === 'TEXTAREA') {
-                this.respectiveElement.setAttribute(key, attributes$$1["" + key]);
+                this.respectiveElement.setAttribute(key, attributes["" + key]);
             }
             else {
-                this.respectiveElement.setAttribute(key, attributes$$1["" + key]);
+                this.respectiveElement.setAttribute(key, attributes["" + key]);
             }
         }
     };
@@ -14253,8 +14294,8 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
      * @param { string[] } attributes - Specifies the attributes name to be removed from TextBox element.
      * @returns {void}
      */
-    TextBox.prototype.removeAttributes = function (attributes$$1) {
-        for (var _i = 0, attributes_1 = attributes$$1; _i < attributes_1.length; _i++) {
+    TextBox.prototype.removeAttributes = function (attributes) {
+        for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
             var key = attributes_1[_i];
             if (key === 'disabled') {
                 this.setProperties({ enabled: true }, true);
@@ -14366,10 +14407,6 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
     return TextBox;
 }(Component));
 
-/**
- * Uploader modules
- */
-
 var __extends$7 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -14402,8 +14439,6 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
         _this.previousValue = null;
         _this.isForm = false;
         _this.inputPreviousValue = null;
-        _this.isAngular = false;
-        _this.isVue = false;
         _this.textareaOptions = options;
         return _this;
     }
@@ -14507,14 +14542,14 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
                     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());
+                case 'rows':
+                    if (this.rows) {
+                        this.element.setAttribute('rows', this.rows.toString());
                     }
                     break;
-                case 'columnsCount':
-                    if (this.columnsCount) {
-                        this.element.setAttribute('cols', this.columnsCount.toString());
+                case 'cols':
+                    if (this.cols) {
+                        this.element.setAttribute('cols', this.cols.toString());
                         if (this.width == null) {
                             this.textareaWrapper.container.classList.add(AUTO_WIDTH);
                         }
@@ -14591,11 +14626,11 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
         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.rows) {
+            this.element.setAttribute('rows', this.rows.toString());
         }
-        if (this.columnsCount) {
-            this.element.setAttribute('cols', this.columnsCount.toString());
+        if (this.cols) {
+            this.element.setAttribute('cols', this.cols.toString());
         }
         if (this.maxLength) {
             this.element.setAttribute('maxlength', this.maxLength.toString());
@@ -14651,10 +14686,10 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
     TextArea.prototype.getModuleName = function () {
         return 'textarea';
     };
-    /* eslint-disable valid-jsdoc, jsdoc/require-returns */
     /**
      * Gets the properties to be maintained in the persisted state.
      *
+     * @returns {string} - Returns the string value.
      */
     TextArea.prototype.getPersistData = function () {
         var keyEntity = ['value'];
@@ -14736,12 +14771,12 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
             detach(this.textareaWrapper.container);
         }
         this.textareaWrapper = null;
-        this.formElement = null;
         Input.destroy({
             element: this.element,
             floatLabelType: this.floatLabelType,
             properties: this.properties
         }, this.clearButton);
+        this.formElement = null;
         _super.prototype.destroy.call(this);
     };
     TextArea.prototype.focusHandler = function (args) {
@@ -14770,8 +14805,7 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
         }
     };
     TextArea.prototype.inputHandler = function (args) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias
-        var textareaObj = this;
+        var textareaObj =  this;
         var eventArgs = {
             event: args,
             value: this.element.value,
@@ -14848,15 +14882,14 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
             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++) {
+    TextArea.prototype.addAttributes = function (attributes) {
+        for (var _i = 0, _a = Object.keys(attributes); _i < _a.length; _i++) {
             var key = _a[_i];
             if (key === 'disabled') {
                 this.setProperties({ enabled: false }, true);
@@ -14867,14 +14900,14 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
                 Input.setReadonly(this.readonly, this.element);
             }
             else if (key === 'class') {
-                this.element.classList.add(attributes$$1["" + key]);
+                this.element.classList.add(attributes["" + key]);
             }
             else if (key === 'placeholder') {
-                this.setProperties({ placeholder: attributes$$1["" + key] }, true);
+                this.setProperties({ placeholder: attributes["" + key] }, true);
                 Input.setPlaceholder(this.placeholder, this.element);
             }
             else {
-                this.element.setAttribute(key, attributes$$1["" + key]);
+                this.element.setAttribute(key, attributes["" + key]);
             }
         }
     };
@@ -14884,8 +14917,8 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
      * @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++) {
+    TextArea.prototype.removeAttributes = function (attributes) {
+        for (var _i = 0, attributes_1 = attributes; _i < attributes_1.length; _i++) {
             var key = attributes_1[_i];
             if (key === 'disabled') {
                 this.setProperties({ enabled: true }, true);
@@ -14940,7 +14973,7 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
      * @returns {void}
      */
     TextArea.prototype.setWrapperWidth = function () {
-        if (this.enabled && ((this.resizeMode !== 'None' && this.resizeMode !== 'Vertical') || (this.columnsCount || this.element.getAttribute('cols')))) {
+        if (this.enabled && ((this.resizeMode !== 'None' && this.resizeMode !== 'Vertical') || (this.cols || this.element.getAttribute('cols')))) {
             if (this.resizeMode !== 'None' && this.resizeMode !== 'Vertical') {
                 if (this.textareaWrapper.container.style.width) {
                     this.setElementWidth(this.textareaWrapper.container.style.width);
@@ -15028,17 +15061,17 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
         Property(null)
     ], TextArea.prototype, "width", void 0);
     __decorate$7([
-        Property('Vertical')
+        Property('Both')
     ], TextArea.prototype, "resizeMode", void 0);
     __decorate$7([
         Property(null)
     ], TextArea.prototype, "maxLength", void 0);
     __decorate$7([
         Property(null)
-    ], TextArea.prototype, "columnsCount", void 0);
+    ], TextArea.prototype, "cols", void 0);
     __decorate$7([
         Property(null)
-    ], TextArea.prototype, "rowsCount", void 0);
+    ], TextArea.prototype, "rows", void 0);
     __decorate$7([
         Event()
     ], TextArea.prototype, "created", void 0);
@@ -15063,11 +15096,7 @@ var TextArea = /** @__PURE__ @class */ (function (_super) {
     return TextArea;
 }(Component));
 
-/**
- * Uploader modules
- */
-
-var __extends$9 = (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; }) ||
@@ -15081,7 +15110,7 @@ var __extends$9 = (undefined && undefined.__extends) || (function () {
     };
 })();
 var SignatureBase = /** @__PURE__ @class */ (function (_super) {
-    __extends$9(SignatureBase, _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.*/
@@ -15366,7 +15395,6 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
         if (isNullOrUndefined(this.pointColl)) {
             return;
         }
-        
         var canDrawCurve = this.pointColl.length > 2;
         var point = this.pointColl[0];
         if (!canDrawCurve && point) {
@@ -16057,7 +16085,7 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
     return SignatureBase;
 }(Component));
 
-var __extends$8 = (undefined && undefined.__extends) || (function () {
+var __extends$9 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -16092,7 +16120,7 @@ var __decorate$8 = (undefined && undefined.__decorate) || function (decorators,
  * ```
  */
 var Signature = /** @__PURE__ @class */ (function (_super) {
-    __extends$8(Signature, _super);
+    __extends$9(Signature, _super);
     /**
      * Constructor for creating the widget.
      *
@@ -16227,11 +16255,7 @@ var Signature = /** @__PURE__ @class */ (function (_super) {
     return Signature;
 }(SignatureBase));
 
-/**
- * Signature modules
- */
-
-var __extends$10 = (undefined && undefined.__extends) || (function () {
+var __extends$a = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -16326,7 +16350,7 @@ var PrecisionType;
  * ```
  */
 var Rating = /** @__PURE__ @class */ (function (_super) {
-    __extends$10(Rating, _super);
+    __extends$a(Rating, _super);
     /**
      * Constructor for creating the widget
      *
@@ -16414,10 +16438,10 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
     };
     Rating.prototype.touchMoveHandler = function (e) {
         if (!this.isTouchSelected) {
-            this.wrapper.classList.add("e-rating-touch");
+            this.wrapper.classList.add('e-rating-touch');
             this.isTouchSelected = true;
         }
-        this.wrapper.classList.add("e-touch-select");
+        this.wrapper.classList.add('e-touch-select');
         var rect = this.ratingItemList.getBoundingClientRect();
         var x = e.touches[0].clientX - rect.x;
         var currValue = (x / rect.width) * this.itemsCount;
@@ -16448,7 +16472,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
     };
     Rating.prototype.touchEndHandler = function () {
         this.closeRatingTooltip();
-        this.wrapper.classList.remove("e-touch-select");
+        this.wrapper.classList.remove('e-touch-select');
     };
     Rating.prototype.updateTemplateFunction = function () {
         this.emptyTemplateFunction = this.emptyTemplate ? this.getTemplateString(this.emptyTemplate) : null;
@@ -16736,7 +16760,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
     };
     Rating.prototype.mouseMoveHandler = function (index, e) {
         if (this.isTouchSelected) {
-            this.wrapper.classList.remove("e-rating-touch");
+            this.wrapper.classList.remove('e-rating-touch');
             this.isTouchSelected = false;
         }
         var currValue = this.calculateCurrentValue(index, e);
@@ -17077,17 +17101,655 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
     return Rating;
 }(Component));
 
+var __extends$b = (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 __decorate$a = (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 INPUTFIELD = 'e-otp-input-field';
+var RTL$3 = 'e-rtl';
 /**
- * Rating modules
+ * Specifies the type of input for the Otp (One-Time Password) input component.
  */
-
+var OtpInputType;
+(function (OtpInputType) {
+    /**
+     * Specifies the type of input to be number for the Otp input.
+     */
+    OtpInputType["Number"] = "number";
+    /**
+     * Specifies the type of input to be text for the Otp input.
+     */
+    OtpInputType["Text"] = "text";
+    /**
+     * Specifies the type of input to be password for the Otp input.
+     */
+    OtpInputType["Password"] = "password";
+})(OtpInputType || (OtpInputType = {}));
 /**
- * Signature base modules
+ * Specifies the style variant for the Otp (One-Time Password) input component.
  */
-
+var OtpInputStyle;
+(function (OtpInputStyle) {
+    /**
+     * Specifies the style of the Otp input to be outlined.
+     */
+    OtpInputStyle["Outlined"] = "outlined";
+    /**
+     * Specifies the style of the Otp input to be underlined.
+     */
+    OtpInputStyle["Underlined"] = "underlined";
+    /**
+     * Specifies the style of the Otp input to be filled.
+     */
+    OtpInputStyle["Filled"] = "filled";
+})(OtpInputStyle || (OtpInputStyle = {}));
 /**
- * NumericTextBox all modules
+ * Represents the Otp component that allows the user to enter the otp values.
+ * ```html
+ * <div id='OTPInput'></div>
+ * ```
+ * ```typescript
+ * <script>
+ *   var OtpinputObj = new OtpInput();
+ *   OtpinputObj.appendTo('#OTPInput');
+ * </script>
+ * ```
  */
+var OtpInput = /** @__PURE__ @class */ (function (_super) {
+    __extends$b(OtpInput, _super);
+    function OtpInput(options, element) {
+        var _this = _super.call(this, options, element) || this;
+        /* Private variables */
+        _this.inputs = [];
+        _this.previousValue = '';
+        _this.separatorElements = [];
+        _this.shouldFireFocus = true;
+        _this.shouldFireBlur = true;
+        _this.isFocusInCalled = false;
+        _this.isFocusOutCalled = false;
+        return _this;
+    }
+    OtpInput.prototype.preRender = function () {
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+    };
+    OtpInput.prototype.render = function () {
+        this.initialize();
+    };
+    OtpInput.prototype.initialize = function () {
+        attributes(this.element, { 'role': 'group' });
+        this.renderInputs();
+        this.renderSeparator(1, this.inputs.length);
+        this.addPlaceHolder();
+        this.updateCssClass(this.cssClass);
+        this.updateVariantClass();
+        this.updateAriaLabel(this.ariaLabels);
+        this.setElementAttributes(this.htmlAttributes, this.element);
+        if (this.enableRtl) {
+            this.element.classList.add(RTL$3);
+        }
+        this.previousValue = this.value.toString();
+    };
+    OtpInput.prototype.renderInputs = function () {
+        this.hiddenInputEle = this.createElement('input', {
+            id: 'otpInput_hidden',
+            attrs: {
+                name: this.element.id,
+                type: 'hidden',
+                value: this.type === 'number' ? this.value.toString().replace(/\D/g, '') : this.value.toString(),
+                autoComplete: 'off'
+            }
+        });
+        this.element.appendChild(this.hiddenInputEle);
+        for (var i = 0; i < this.length; i++) {
+            this.createOtpInput(i);
+        }
+    };
+    OtpInput.prototype.createOtpInput = function (index) {
+        var valueContainer = this.getDefaultValue();
+        var inputValue = '';
+        if (valueContainer) {
+            if (this.type === 'number') {
+                var valueAtIndex = valueContainer[parseInt(index.toString(), 10)];
+                if (!isNaN(Number(valueAtIndex))) {
+                    inputValue = valueAtIndex;
+                }
+            }
+            else {
+                inputValue = valueContainer[parseInt(index.toString(), 10)] || '';
+            }
+        }
+        var inputEle = this.createElement('input', {
+            id: this.element.id + "-" + (index + 1),
+            className: INPUTFIELD + ' ' + 'e-input',
+            attrs: {
+                maxlength: '1',
+                type: this.type,
+                inputmode: (this.type === 'number' ? 'numeric' : 'text')
+            }
+        });
+        if (this.disabled) {
+            inputEle.setAttribute('disabled', 'disabled');
+        }
+        this.element.appendChild(inputEle);
+        this.inputs.push(inputEle);
+        if (inputValue) {
+            inputEle.value = inputValue;
+        }
+        this.wireEvents(inputEle, index);
+    };
+    OtpInput.prototype.renderSeparator = function (index, length) {
+        if (this.separator.length > 0) {
+            for (var i = index; i < length; i++) {
+                var separatorElement = this.createElement('span', {
+                    className: 'e-otp-separator'
+                });
+                separatorElement.textContent = this.separator;
+                this.separatorElements.push(separatorElement);
+                this.element.insertBefore(separatorElement, this.inputs[parseInt(i.toString(), 10)]);
+            }
+        }
+    };
+    OtpInput.prototype.updateSeparatorValue = function () {
+        if (this.separator === '') {
+            for (var i = 0; i < this.separatorElements.length; i++) {
+                remove(this.separatorElements[parseInt(i.toString(), 10)]);
+            }
+            this.separatorElements = [];
+            return;
+        }
+        for (var i = 0; i < this.separatorElements.length; i++) {
+            this.separatorElements[parseInt(i.toString(), 10)].textContent = this.separator;
+        }
+    };
+    OtpInput.prototype.addPlaceHolder = function () {
+        for (var i = 0; i < this.inputs.length; i++) {
+            this.setElementAttributes({ 'placeholder': this.placeholder.length === 1 || this.placeholder.length === 0 ? this.placeholder : this.placeholder.charAt(i) }, this.inputs[parseInt(i.toString(), 10)]);
+        }
+    };
+    OtpInput.prototype.updateInputType = function (inputType) {
+        this.inputs.forEach(function (input) {
+            input.type = inputType;
+            input.setAttribute('inputmode', (inputType === 'number' ? 'numeric' : 'text'));
+        });
+    };
+    OtpInput.prototype.getDefaultValue = function () {
+        var extractedValue = typeof this.value === 'number' ? this.value.toString() : this.value;
+        // To remove the white space if present.
+        var value = extractedValue.replace(/\s/g, '');
+        if (value.length > 0) {
+            return value.split('');
+        }
+        return undefined;
+    };
+    OtpInput.prototype.handleInputChange = function (index, event) {
+        var currentInputElement = this.inputs[parseInt(index.toString(), 10)];
+        if (currentInputElement && index < this.length - 1 && currentInputElement.value.length > 0) {
+            var nextInputElement = this.inputs[parseInt(index.toString(), 10) + 1];
+            this.shouldFireFocus = this.shouldFireBlur = false;
+            nextInputElement.focus();
+            if (nextInputElement && nextInputElement.value.length > 0) {
+                nextInputElement.select();
+            }
+        }
+        var target = event.target;
+        if (target.value.length > 1) {
+            target.value = target.value.slice(0, 1);
+        }
+        this.triggerInputEvent(event);
+        this.triggerValuechanged(event, true);
+    };
+    OtpInput.prototype.handleKeyAction = function (index, event) {
+        if (event.key.length > 1 && !((index === 0 && event.key === 'Backspace') ||
+            (index === this.length - 1 && event.key === 'Delete'))) {
+            this.shouldFireFocus = this.shouldFireBlur = false;
+        }
+        var currentInputElement = this.inputs[parseInt(index.toString(), 10)];
+        var previousInputElement = this.inputs[parseInt(index.toString(), 10) - 1];
+        var nextInputElement = this.inputs[parseInt(index.toString(), 10) + 1];
+        if (event.key === 'Delete') {
+            var value = '';
+            if (currentInputElement.value.length > 0) {
+                value = currentInputElement.value;
+                currentInputElement.value = '';
+            }
+            else {
+                if (index !== this.inputs.length - 1) {
+                    value = nextInputElement.value;
+                    nextInputElement.value = '';
+                    nextInputElement.focus();
+                }
+            }
+            if (value.length > 0) {
+                this.triggerInputEvent(event);
+            }
+        }
+        else if (event.key === 'Backspace') {
+            if (index !== 0 && currentInputElement.value.length === 0) {
+                var previousValue = previousInputElement.value;
+                previousInputElement.value = '';
+                previousInputElement.focus();
+                if (previousValue.length > 0) {
+                    this.triggerInputEvent(event);
+                }
+            }
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            if (event.key === 'ArrowLeft') {
+                if (index > 0) {
+                    previousInputElement.focus();
+                    previousInputElement.select();
+                }
+            }
+            else {
+                if (index < this.inputs.length - 1) {
+                    nextInputElement.focus();
+                    nextInputElement.select();
+                }
+            }
+            event.preventDefault();
+        }
+        else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            event.preventDefault();
+        }
+        else {
+            if (event.key !== 'Tab' && !event.shiftKey && !event.ctrlKey) {
+                if (this.type === 'number' && (/\D/.test(event.key.toLocaleLowerCase()))) {
+                    event.preventDefault();
+                }
+            }
+        }
+    };
+    OtpInput.prototype.handleSelection = function (index) {
+        var currentInputElement = this.inputs[parseInt(index.toString(), 10)];
+        if (currentInputElement.value) {
+            currentInputElement.select();
+        }
+    };
+    OtpInput.prototype.handleFocus = function (index, event) {
+        addClass([this.inputs[parseInt(index.toString(), 10)]], 'e-otp-input-focus');
+        if (this.shouldFireFocus) {
+            var eventArgs = {
+                element: this.element,
+                event: event,
+                isInteracted: this.isFocusInCalled ? false : true,
+                value: this.value
+            };
+            this.trigger('focus', eventArgs);
+        }
+        this.shouldFireFocus = true;
+    };
+    OtpInput.prototype.handleBlur = function (index, event) {
+        removeClass([this.inputs[parseInt(index.toString(), 10)]], 'e-otp-input-focus');
+        if (this.shouldFireBlur) {
+            var eventArgs = {
+                element: this.element,
+                event: event,
+                isInteracted: this.isFocusOutCalled ? false : true,
+                value: this.value
+            };
+            this.trigger('blur', eventArgs);
+        }
+        this.shouldFireBlur = true;
+    };
+    OtpInput.prototype.handlePaste = function (index, event) {
+        var clipboardData = event.clipboardData;
+        if (clipboardData) {
+            var pastedText = clipboardData.getData('text');
+            var pastedValues = pastedText.split('');
+            var pastedValueIndex = 0;
+            for (var i = index; i < this.inputs.length; i++) {
+                if (pastedValues.length > 0 && pastedValues[parseInt(pastedValueIndex.toString(), 10)]) {
+                    this.inputs[parseInt(i.toString(), 10)].value = pastedValues[parseInt(pastedValueIndex.toString(), 10)];
+                    pastedValueIndex++;
+                    this.updateValueProperty();
+                }
+            }
+            this.focusIn();
+            this.triggerValuechanged(event, true);
+        }
+    };
+    OtpInput.prototype.triggerInputEvent = function (event) {
+        var previousValue = this.value.toString();
+        this.updateValueProperty();
+        var inputEventArgs = {
+            element: this.element,
+            event: event,
+            previousValue: previousValue,
+            value: this.value.toString()
+        };
+        this.trigger('input', inputEventArgs);
+    };
+    OtpInput.prototype.triggerValuechanged = function (event, isInteracted) {
+        if (this.length === this.value.toString().length) {
+            if (this.previousValue !== this.value) {
+                var eventArgs = {
+                    element: this.element,
+                    event: event,
+                    isInteracted: isInteracted ? isInteracted : false,
+                    previousValue: this.previousValue,
+                    value: this.value
+                };
+                this.trigger('valueChanged', eventArgs);
+                this.previousValue = this.value.toString();
+            }
+        }
+    };
+    OtpInput.prototype.wireEvents = function (inputEle, index) {
+        inputEle.addEventListener('focus', this.handleFocus.bind(this, index));
+        inputEle.addEventListener('blur', this.handleBlur.bind(this, index));
+        inputEle.addEventListener('input', this.handleInputChange.bind(this, index));
+        inputEle.addEventListener('keydown', this.handleKeyAction.bind(this, index));
+        inputEle.addEventListener('click', this.handleSelection.bind(this, index));
+        inputEle.addEventListener('paste', this.handlePaste.bind(this, index));
+    };
+    OtpInput.prototype.unWireEvents = function () {
+        for (var i = 0; i < this.inputs.length; i++) {
+            var currentInputElement = this.inputs[parseInt(i.toString(), 10)];
+            currentInputElement.removeEventListener('focus', this.handleFocus.bind(this, i));
+            currentInputElement.removeEventListener('blur', this.handleBlur.bind(this, i));
+            currentInputElement.removeEventListener('input', this.handleInputChange.bind(this, i));
+            currentInputElement.removeEventListener('keydown', this.handleKeyAction.bind(this, i));
+            currentInputElement.removeEventListener('click', this.handleSelection.bind(this, i));
+            currentInputElement.removeEventListener('paste', this.handlePaste.bind(this, i));
+        }
+    };
+    OtpInput.prototype.updateValueProperty = function () {
+        var value = '';
+        this.inputs.forEach(function (input) {
+            value += input.value;
+        });
+        var prevOnChange = this.isProtectedOnChange;
+        this.isProtectedOnChange = true;
+        this.value = typeof this.value === 'number' ? parseInt(value, 10) : value;
+        this.isProtectedOnChange = prevOnChange;
+        this.hiddenInputEle.value = this.value.toString();
+    };
+    OtpInput.prototype.updateInputValue = function (previousValue) {
+        var stringifiedValue = this.value.toString();
+        for (var i = 0; i < this.inputs.length; i++) {
+            var isValueChanged = previousValue.toString().charAt(i) !== stringifiedValue.charAt(i);
+            if (isValueChanged) {
+                this.inputs[parseInt(i.toString(), 10)].value = stringifiedValue.charAt(i);
+                this.hiddenInputEle.value = stringifiedValue;
+            }
+        }
+        this.focusIn();
+    };
+    OtpInput.prototype.updateCssClass = function (addCss, removeCss) {
+        if (removeCss === void 0) { removeCss = ''; }
+        var _a, _b;
+        var cssClasses;
+        if (removeCss) {
+            cssClasses = removeCss.trim().split(' ');
+            (_a = this.element.classList).remove.apply(_a, cssClasses);
+        }
+        if (addCss) {
+            cssClasses = addCss.trim().split(' ');
+            (_b = this.element.classList).add.apply(_b, cssClasses);
+        }
+    };
+    OtpInput.prototype.updateVariantClass = function () {
+        var variantClass = this.stylingMode.toLocaleLowerCase();
+        variantClass = variantClass === 'outlined' ? 'outline' : variantClass;
+        if (variantClass === 'underlined' || variantClass === 'filled' || variantClass === 'outline') {
+            removeClass([this.element], ['e-underlined', 'e-filled', 'e-outline']);
+            addClass([this.element], "e-" + variantClass);
+        }
+    };
+    OtpInput.prototype.updateAriaLabel = function (customAriaLabel) {
+        this.inputs.forEach(function (input, index) {
+            var defaultLabel = "Enter Otp Character " + (index + 1);
+            var ariaLabel = customAriaLabel && customAriaLabel.length > 0
+                ? customAriaLabel[parseInt(index.toString(), 10)] || defaultLabel
+                : defaultLabel;
+            input.setAttribute('aria-label', ariaLabel);
+        });
+    };
+    OtpInput.prototype.updateDisabledState = function () {
+        var _this = this;
+        this.inputs.forEach(function (input) {
+            if (_this.disabled) {
+                input.setAttribute('disabled', 'disabled');
+            }
+            else {
+                input.removeAttribute('disabled');
+            }
+        });
+    };
+    OtpInput.prototype.setElementAttributes = function (htmlAttributes, element) {
+        if (!isNullOrUndefined(htmlAttributes)) {
+            for (var key in htmlAttributes) {
+                if (key === 'class') {
+                    var elementClass = htmlAttributes['class'].replace(/\s+/g, ' ').trim();
+                    if (elementClass) {
+                        addClass([element], elementClass.split(' '));
+                    }
+                }
+                else if (key === 'name' && this.element.id === element.id) {
+                    this.hiddenInputEle.setAttribute(key, htmlAttributes["" + key]);
+                }
+                else {
+                    element.setAttribute(key, htmlAttributes["" + key]);
+                }
+            }
+        }
+    };
+    OtpInput.prototype.handleLengthChange = function (currentValue, previousValue) {
+        var isLengthAdded = (currentValue - previousValue) > 0;
+        if (isLengthAdded) {
+            for (var i = previousValue; i < currentValue; i++) {
+                this.createOtpInput(i);
+            }
+            this.renderSeparator(previousValue, currentValue);
+            this.addPlaceHolder();
+            this.updateAriaLabel(this.ariaLabels);
+        }
+        else {
+            if (currentValue >= 0 && this.inputs.length > 0) {
+                for (var i = currentValue; i < this.inputs.length; i++) {
+                    remove(this.inputs[parseInt(i.toString(), 10)]);
+                }
+                this.inputs.splice(currentValue);
+                if (this.separatorElements.length > 0) {
+                    // separator should be completely removed when length is 0 or 1;
+                    var index = currentValue === 0 ? 0 : currentValue - 1;
+                    for (var i = index; i < this.separatorElements.length; i++) {
+                        remove(this.separatorElements[parseInt(i.toString(), 10)]);
+                    }
+                    this.separatorElements.splice(index);
+                }
+            }
+        }
+    };
+    /**
+     * To get component name.
+     *
+     * @returns {string} - Module Name
+     * @private
+     */
+    OtpInput.prototype.getModuleName = function () {
+        return 'otpinput';
+    };
+    /**
+     * To get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    OtpInput.prototype.getPersistData = function () {
+        return this.addOnPersist([]);
+    };
+    /**
+     * Destroy the Otp input.
+     *
+     * @returns {void}
+     */
+    OtpInput.prototype.destroy = function () {
+        _super.prototype.destroy.call(this);
+        this.unWireEvents();
+        for (var i = 0; i < this.inputs.length; i++) {
+            remove(this.inputs[parseInt(i.toString(), 10)]);
+        }
+        for (var i = 0; i < this.separatorElements.length; i++) {
+            remove(this.separatorElements[parseInt(i.toString(), 10)]);
+        }
+        remove(this.hiddenInputEle);
+        removeClass([this.element], ['e-underlined', 'e-filled', 'e-outline', 'e-rtl']);
+        if (this.cssClass) {
+            removeClass([this.element], this.cssClass.trim().split(' '));
+        }
+        this.element.removeAttribute('role');
+        this.inputs = [];
+        this.separatorElements = [];
+        this.hiddenInputEle = null;
+    };
+    /**
+     * Sets the focus to the Otp input for interaction.
+     *
+     * @returns {void}
+     */
+    OtpInput.prototype.focusIn = function () {
+        this.isFocusInCalled = true;
+        var focusIndex = 0;
+        this.inputs.forEach(function (input, index) {
+            if (input.value.length > 0) {
+                focusIndex = index;
+            }
+        });
+        this.inputs[parseInt(focusIndex.toString(), 10)].focus();
+        this.isFocusInCalled = false;
+    };
+    /**
+     * Remove the focus from Otp input, if it is in focus state.
+     *
+     * @returns {void}
+     */
+    OtpInput.prototype.focusOut = function () {
+        this.isFocusOutCalled = true;
+        this.inputs.forEach(function (input) {
+            input.blur();
+        });
+        this.isFocusOutCalled = false;
+    };
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param  {OtpInputModel} newProp - Specifies new properties
+     * @param  {OtpInputModel} oldProp - Specifies old properties
+     * @returns {void}
+     * @private
+     */
+    OtpInput.prototype.onPropertyChanged = function (newProp, oldProp) {
+        for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
+            var prop = _a[_i];
+            switch (prop) {
+                case 'value':
+                    {
+                        this.updateInputValue(oldProp.value);
+                        this.triggerValuechanged();
+                    }
+                    break;
+                case 'placeholder':
+                    this.addPlaceHolder();
+                    break;
+                case 'disabled':
+                    this.updateDisabledState();
+                    break;
+                case 'cssClass':
+                    this.updateCssClass(newProp.cssClass, oldProp.cssClass);
+                    break;
+                case 'separator':
+                    if (oldProp.separator === '') {
+                        this.renderSeparator(1, this.inputs.length);
+                    }
+                    else {
+                        this.updateSeparatorValue();
+                    }
+                    break;
+                case 'type':
+                    this.updateInputType(newProp.type);
+                    break;
+                case 'stylingMode':
+                    this.updateVariantClass();
+                    break;
+                case 'ariaLabels':
+                    this.updateAriaLabel(newProp.ariaLabels);
+                    break;
+                case 'length':
+                    this.handleLengthChange(newProp.length, oldProp.length);
+                    break;
+                case 'enableRtl':
+                    this.element.classList[this.enableRtl ? 'add' : 'remove'](RTL$3);
+                    break;
+            }
+        }
+    };
+    __decorate$a([
+        Property(4)
+    ], OtpInput.prototype, "length", void 0);
+    __decorate$a([
+        Property('')
+    ], OtpInput.prototype, "value", void 0);
+    __decorate$a([
+        Property(OtpInputType.Number)
+    ], OtpInput.prototype, "type", void 0);
+    __decorate$a([
+        Property('')
+    ], OtpInput.prototype, "separator", void 0);
+    __decorate$a([
+        Property('')
+    ], OtpInput.prototype, "placeholder", void 0);
+    __decorate$a([
+        Property(OtpInputStyle.Outlined)
+    ], OtpInput.prototype, "stylingMode", void 0);
+    __decorate$a([
+        Property(false)
+    ], OtpInput.prototype, "disabled", void 0);
+    __decorate$a([
+        Property('')
+    ], OtpInput.prototype, "cssClass", void 0);
+    __decorate$a([
+        Property({})
+    ], OtpInput.prototype, "htmlAttributes", void 0);
+    __decorate$a([
+        Property([])
+    ], OtpInput.prototype, "ariaLabels", void 0);
+    __decorate$a([
+        Event()
+    ], OtpInput.prototype, "created", void 0);
+    __decorate$a([
+        Event()
+    ], OtpInput.prototype, "valueChanged", void 0);
+    __decorate$a([
+        Event()
+    ], OtpInput.prototype, "focus", void 0);
+    __decorate$a([
+        Event()
+    ], OtpInput.prototype, "blur", void 0);
+    __decorate$a([
+        Event()
+    ], OtpInput.prototype, "input", void 0);
+    OtpInput = __decorate$a([
+        NotifyPropertyChanges
+    ], OtpInput);
+    return OtpInput;
+}(Component));
 
-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 };
+export { AsyncSettings, ButtonsProps, ColorPicker, ColorRangeData, ErrorOption, FilesProp, FormValidator, Input, LabelPosition, LimitData, MaskUndo, MaskedTextBox, NumericTextBox, OtpInput, OtpInputStyle, OtpInputType, PrecisionType, Rating, Signature, SignatureBase, Slider, TEXTBOX_FOCUS, TextArea, TextBox, TicksData, TooltipData, Uploader, applyMask, bindClearEvent, containerAttributes, createMask, escapeRegExp, getMaskedVal, getVal, maskInput, maskInputBlurHandler, maskInputDropHandler, maskInputFocusHandler, maskInputMouseDownHandler, maskInputMouseUpHandler, mobileRemoveFunction, regex, regularExpressions, setElementValue, setMaskValue, strippedValue, triggerFocus, unstrippedValue, unwireEvents, wireEvents };
 //# sourceMappingURL=ej2-inputs.es5.js.map