@syncfusion/ej2-inputs 25.2.5 → 26.1.35

package/dist/es6/ej2-inputs.es2015.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, Component, getValue, setValue, L10n, getUniqueID, Internationalization, EventHandler, Browser, merge, getNumericObject, Property, Event, NotifyPropertyChanges, extend, ChildProperty, setStyleAttribute, SanitizeHtmlHelper, initializeCSPTemplate, Collection, Complex, Base, onIntlChange, select, selectAll, 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 */
 const 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 };
-        args.element.__eventHandlers["inputBlurHandler"] = { blurHandler };
-        args.element.__eventHandlers["inputHandler"] = { inputHandler };
+        args.element.__eventHandlers['inputFocusHandler'] = { focusHandler };
+        args.element.__eventHandlers['inputBlurHandler'] = { blurHandler };
+        args.element.__eventHandlers['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"])) {
-                    const focusHandler = args.element.__eventHandlers["inputFocusHandler"].focusHandler;
-                    const blurHandler = args.element.__eventHandlers["inputBlurHandler"].blurHandler;
-                    const inputHandler = args.element.__eventHandlers["inputHandler"].inputHandler;
+                if (!isNullOrUndefined(args.element.__eventHandlers['inputFocusHandler'])
+                    && !isNullOrUndefined(args.element.__eventHandlers['inputBlurHandler'])
+                    && !isNullOrUndefined(args.element.__eventHandlers['inputHandler'])) {
+                    const focusHandler = args.element.__eventHandlers['inputFocusHandler'].focusHandler;
+                    const blurHandler = args.element.__eventHandlers['inputBlurHandler'].blurHandler;
+                    const inputHandler = args.element.__eventHandlers['inputHandler'].inputHandler;
                     args.element.removeEventListener('focus', focusHandler);
                     args.element.removeEventListener('blur', blurHandler);
                     args.element.removeEventListener('input', inputHandler);
                     // 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 };
-            args.element.__eventHandlers["floatBlurHandler"] = { blurFloatHandler };
+            args.element.__eventHandlers['floatInputHandler'] = { inputFloatHandler };
+            args.element.__eventHandlers['floatBlurHandler'] = { 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"])) {
-            const inputFloatHandler = args.element.__eventHandlers["floatInputHandler"].inputFloatHandler;
-            const blurFloatHandler = args.element.__eventHandlers["floatBlurHandler"].blurFloatHandler;
+        if (!isNullOrUndefined(args.element) &&
+            !isNullOrUndefined(args.element.__eventHandlers)
+            && !isNullOrUndefined(args.element.__eventHandlers['floatInputHandler'])
+            && !isNullOrUndefined(args.element.__eventHandlers['floatBlurHandler'])) {
+            const inputFloatHandler = args.element.__eventHandlers['floatInputHandler'].inputFloatHandler;
+            const 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) {
@@ -366,7 +366,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;
     }
@@ -399,7 +399,7 @@ var Input;
         if (isBindClearAction === undefined || isBindClearAction) {
             const clickHandlerEvent = (e) => clickHandler(e, element, button);
             button.addEventListener('click', clickHandlerEvent);
-            element.__eventHandlers["clearClickHandler"] = { clickHandlerEvent };
+            element.__eventHandlers['clearClickHandler'] = { clickHandlerEvent };
         }
         const inputHandlerEvent = () => inputHandler(element, button);
         const focusHandlerEvent = () => focusHandler(element, button);
@@ -408,35 +408,36 @@ var Input;
         element.addEventListener('focus', focusHandlerEvent);
         element.addEventListener('blur', blurHandlerEvent);
         // Store the bound functions to remove them later
-        element.__eventHandlers["clearInputHandler"] = { inputHandlerEvent };
-        element.__eventHandlers["clearFocusHandler"] = { focusHandlerEvent };
-        element.__eventHandlers["clearBlurHandler"] = { blurHandlerEvent };
+        element.__eventHandlers['clearInputHandler'] = { inputHandlerEvent };
+        element.__eventHandlers['clearFocusHandler'] = { focusHandlerEvent };
+        element.__eventHandlers['clearBlurHandler'] = { blurHandlerEvent };
     }
     Input.wireClearBtnEvents = wireClearBtnEvents;
     function unWireClearBtnEvents(element, button) {
-        if (!isNullOrUndefined(element) && !isNullOrUndefined(element.__eventHandlers)) {
-            if (!isNullOrUndefined(element.__eventHandlers["clearClickHandler"])) {
-                const clickHandlerEvent = element.__eventHandlers["clearClickHandler"].clickHandlerEvent;
+        if (!isNullOrUndefined(element) &&
+            !isNullOrUndefined(element.__eventHandlers)) {
+            if (!isNullOrUndefined(element.__eventHandlers['clearClickHandler'])) {
+                const 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"])) {
-                const inputHandlerEvent = element.__eventHandlers["clearInputHandler"].inputHandlerEvent;
-                const focusHandlerEvent = element.__eventHandlers["clearFocusHandler"].focusHandlerEvent;
-                const blurHandlerEvent = element.__eventHandlers["clearBlurHandler"].blurHandlerEvent;
+                delete element.__eventHandlers['clearClickHandler'];
+            }
+            if (!isNullOrUndefined(element.__eventHandlers['clearInputHandler'])
+                && !isNullOrUndefined(element.__eventHandlers['clearFocusHandler'])
+                && !isNullOrUndefined(element.__eventHandlers['clearBlurHandler'])) {
+                const inputHandlerEvent = element.__eventHandlers['clearInputHandler'].inputHandlerEvent;
+                const focusHandlerEvent = element.__eventHandlers['clearFocusHandler'].focusHandlerEvent;
+                const 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'];
             }
         }
     }
@@ -455,7 +456,6 @@ var Input;
         if (!isNullOrUndefined(args.element)) {
             delete args.element.__eventHandlers;
         }
-        
     }
     Input.destroy = destroy;
     function validateLabel(element, floatLabelType) {
@@ -502,7 +502,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);
@@ -526,7 +526,7 @@ var Input;
         }
         checkInputValue(floatLabelType, element);
     }
-    Input.setValue = setValue$$1;
+    Input.setValue = setValue;
     /**
      * Sets the single or multiple cssClass to wrapper of input element.
      * ```
@@ -604,13 +604,25 @@ var Input;
         const 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;
+                const 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 = '';
+                const floatTextContent = parentElement.getElementsByClassName('e-float-text-content')[0];
+                if (floatTextContent) {
+                    floatTextContent.children[0].textContent = '';
+                }
+                else {
+                    parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = '';
+                }
             }
         }
         else {
@@ -838,7 +850,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
@@ -865,7 +877,7 @@ var Input;
      */
     function setRipple(isRipple, inputObj) {
         for (let i = 0; i < inputObj.length; i++) {
-            _internalRipple(isRipple, inputObj[parseInt(i.toString())].container);
+            _internalRipple(isRipple, inputObj[parseInt(i.toString(), 10)].container);
         }
     }
     Input.setRipple = setRipple;
@@ -876,14 +888,14 @@ var Input;
             container.querySelectorAll('.e-input-group-icon') : argsButton;
         if (isRipple && buttons.length > 0) {
             for (let 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 (let 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);
             }
         }
     }
@@ -909,8 +921,7 @@ var Input;
         return true;
     }
     function _onMouseDownRipple() {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const ele = this;
+        const ele =  this;
         let parentEle = this.parentElement;
         while (!parentEle.classList.contains('e-input-group')) {
             parentEle = parentEle.parentElement;
@@ -918,8 +929,7 @@ var Input;
         _onMouseRipple(parentEle, ele);
     }
     function _onMouseUpRipple() {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const ele = this;
+        const ele =  this;
         setTimeout(() => {
             ele.classList.remove('e-input-btn-ripple');
         }, 500);
@@ -941,9 +951,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 */
         const result = typeof (icons) === 'string' ? icons.split(',')
             : icons;
         if (position.toLowerCase() === 'append') {
@@ -972,9 +980,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 */
         const makeElement = !isNullOrUndefined(internalCreateElement) ? internalCreateElement : createElement;
         const button = createIconEle(iconClass, makeElement);
         container.classList.add('e-float-icon-left');
@@ -985,7 +991,7 @@ var Input;
             const result = container.querySelectorAll(inputElement.tagName + ' ~ *');
             innerWrapper.appendChild(inputElement);
             for (let i = 0; i < result.length; i++) {
-                const element = result[parseInt(i.toString())];
+                const element = result[parseInt(i.toString(), 10)];
                 const parentElement = innerWrapper.parentElement;
                 if (!(element.classList.contains('e-float-line')) || (!(parentElement && parentElement.classList.contains('e-filled')) && parentElement)) {
                     innerWrapper.appendChild(element);
@@ -1121,9 +1127,7 @@ let NumericTextBox = class NumericTextBox extends Component {
      */
     constructor(options, element) {
         super(options, element);
-        this.isVue = false;
         this.preventChange = false;
-        this.isAngular = false;
         this.isDynamicChange = false;
         this.numericOptions = options;
     }
@@ -1221,6 +1225,9 @@ let NumericTextBox = class NumericTextBox extends Component {
             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;
             }
@@ -1228,9 +1235,9 @@ let NumericTextBox = class NumericTextBox extends Component {
         }
     }
     checkAttributes(isDynamic) {
-        const attributes$$1 = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
+        const attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
             ['value', 'min', 'max', 'step', 'disabled', 'readonly', 'style', 'name', 'placeholder'];
-        for (const prop of attributes$$1) {
+        for (const prop of attributes) {
             if (!isNullOrUndefined(this.element.getAttribute(prop))) {
                 switch (prop) {
                     case 'disabled':
@@ -1679,16 +1686,14 @@ let NumericTextBox = class NumericTextBox extends Component {
                 }
                 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);
                     }
@@ -1717,8 +1722,7 @@ let NumericTextBox = class NumericTextBox extends Component {
         }
     }
     inputHandler(event) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias
-        const numerictextboxObj = this;
+        const numerictextboxObj =  this;
         if (!this.enabled || this.readonly) {
             return;
         }
@@ -1741,7 +1745,9 @@ let NumericTextBox = class NumericTextBox extends Component {
             const 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
             const 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;
             }
             const eventArgs = {
@@ -1765,7 +1771,6 @@ let NumericTextBox = class NumericTextBox extends Component {
                     event.preventDefault();
                     this.action(DECREMENT, event);
                     break;
-                default: break;
             }
         }
     }
@@ -2050,8 +2055,7 @@ let NumericTextBox = class NumericTextBox extends Component {
         if (!this.getElementData(event)) {
             return;
         }
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const result = this.getElementData(event);
+        this.getElementData(event);
         const target = event.currentTarget;
         const action = (target.classList.contains(SPINUP)) ? INCREMENT : DECREMENT;
         EventHandler.add(target, 'mouseleave', this.mouseUpClick, this);
@@ -2196,15 +2200,14 @@ let NumericTextBox = class NumericTextBox extends Component {
         }, this.clearButton);
         super.destroy();
     }
-    /* 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.
      */
     getText() {
         return this.element.value;
     }
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns */
     /**
      * Sets the focus to widget for interaction.
      *
@@ -2227,17 +2230,15 @@ let NumericTextBox = class NumericTextBox extends Component {
             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.
      */
     getPersistData() {
         const keyEntity = ['value'];
         return this.addOnPersist(keyEntity);
     }
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Calls internally if any of the property value is changed.
      *
@@ -2451,14 +2452,7 @@ NumericTextBox = __decorate([
     NotifyPropertyChanges
 ], NumericTextBox);
 
-/**
- * NumericTextBox modules
- */
-
 /* eslint-disable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */
-/**
- * MaskedTextBox base module
- */
 const ERROR$1 = 'e-error';
 const INPUTGROUP = 'e-input-group';
 const FLOATINPUT = 'e-float-input';
@@ -2617,8 +2611,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) {
@@ -3600,13 +3594,8 @@ function getUtilMaskEle(args) {
  */
 class MaskUndo {
 }
-
 /* eslint-enable valid-jsdoc, jsdoc/require-jsdoc, jsdoc/require-returns, jsdoc/require-param */
 
-/**
- * MaskedTextbox base modules
- */
-
 var __decorate$1 = (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);
@@ -3641,7 +3630,6 @@ let MaskedTextBox = class MaskedTextBox extends Component {
     constructor(options, element) {
         super(options, element);
         this.initInputValue = '';
-        this.isAngular = false;
         this.preventChange = false;
         this.isClicked = false;
         this.maskOptions = options;
@@ -3716,7 +3704,6 @@ let MaskedTextBox = class MaskedTextBox extends Component {
         const keyEntity = ['value'];
         return this.addOnPersist(keyEntity);
     }
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Initializes the component rendering.
      *
@@ -3748,9 +3735,12 @@ let MaskedTextBox = class MaskedTextBox extends Component {
             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();
         }
     }
@@ -3842,9 +3832,9 @@ let MaskedTextBox = class MaskedTextBox extends Component {
         }
     }
     checkHtmlAttributes(isDynamic) {
-        const attributes$$1 = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes)
+        const attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes)
             : ['placeholder', 'disabled', 'value', 'readonly'];
-        for (const key of attributes$$1) {
+        for (const key of attributes) {
             if (!isNullOrUndefined(this.element.getAttribute(key))) {
                 switch (key) {
                     case 'placeholder':
@@ -3910,7 +3900,7 @@ let MaskedTextBox = class MaskedTextBox extends Component {
                     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;
                     }
@@ -3989,17 +3979,15 @@ let MaskedTextBox = class MaskedTextBox extends Component {
         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.
      */
     getMaskedValue() {
         return unstrippedValue.call(this, this.element);
     }
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Sets the focus to widget for interaction.
      *
@@ -4115,18 +4103,6 @@ MaskedTextBox = __decorate$1([
     NotifyPropertyChanges
 ], MaskedTextBox);
 
-/**
- * MaskedTextbox modules
- */
-
-/**
- * MaskedTextbox modules
- */
-
-/**
- * Input box Component
- */
-
 var __decorate$2 = (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);
@@ -4311,7 +4287,6 @@ let Slider = class Slider extends Component {
         this.initialTooltip = true;
     }
     preRender() {
-        // eslint-disable-next-line
         const localeText = { incrementTitle: 'Increase', decrementTitle: 'Decrease' };
         this.l10n = new L10n('slider', localeText, this.locale);
         this.isElementFocused = false;
@@ -4390,6 +4365,7 @@ let Slider = class Slider extends Component {
     /**
      * To Initialize the control rendering
      *
+     * @returns {void}
      * @private
      */
     render() {
@@ -4399,7 +4375,7 @@ let Slider = class Slider extends Component {
         this.setZindex();
         this.renderComplete();
         if (this.element.tagName === 'EJS-SLIDER') {
-            if (this.getTheme(this.sliderContainer) == 'none') {
+            if (this.getTheme(this.sliderContainer) === 'none') {
                 setTimeout(() => {
                     this.refresh();
                 }, 0);
@@ -4451,6 +4427,7 @@ let Slider = class Slider extends Component {
     /**
      * Initialize the rendering
      *
+     * @returns {void}
      * @private
      */
     initRender() {
@@ -4470,7 +4447,7 @@ let Slider = class Slider extends Component {
         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
             }
@@ -4485,7 +4462,7 @@ let Slider = class Slider extends Component {
             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()))),
@@ -4528,6 +4505,7 @@ let Slider = class Slider extends Component {
         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;
     }
     createRangeBar() {
@@ -4588,7 +4566,7 @@ let Slider = class Slider extends Component {
         }
         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 {
@@ -4734,9 +4712,13 @@ let Slider = class Slider extends Component {
         }
     }
     setEnableRTL() {
-        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);
-        let preDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;
+        }
+        const preDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;
         if (this.enableRtl) {
             this.horDir = 'right';
             this.verDir = 'bottom';
@@ -4745,7 +4727,7 @@ let Slider = class Slider extends Component {
             this.horDir = 'left';
             this.verDir = 'bottom';
         }
-        let currDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;
+        const currDir = (this.orientation !== 'Vertical') ? this.horDir : this.verDir;
         if (preDir !== currDir) {
             if (this.orientation === 'Horizontal') {
                 setStyleAttribute(this.firstHandle, { 'right': '', 'left': 'auto' });
@@ -4792,8 +4774,7 @@ let Slider = class Slider extends Component {
         }
     }
     setTooltipContent() {
-        let content;
-        content = this.formatContent(this.tooltipFormatInfo, false);
+        const content = this.formatContent(this.tooltipFormatInfo, false);
         const contentTemp = function () {
             return content;
         };
@@ -4854,13 +4835,13 @@ let Slider = class Slider extends Component {
     }
     addTooltipClass(content) {
         if (this.isMaterialTooltip) {
-            let count = content.toString().length;
+            const count = content.toString().length;
             if (!this.tooltipElement) {
-                let cssClass = count > 4 ? classNames.sliderMaterialRange : classNames.sliderMaterialDefault;
+                const cssClass = count > 4 ? classNames.sliderMaterialRange : classNames.sliderMaterialDefault;
                 this.tooltipObj.cssClass = classNames.sliderTooltip + ' ' + cssClass;
             }
             else {
-                let cssClass = count > 4 ?
+                const cssClass = count > 4 ?
                     { oldCss: classNames.sliderMaterialDefault, newCss: classNames.sliderMaterialRange } :
                     { oldCss: classNames.sliderMaterialRange, newCss: classNames.sliderMaterialDefault };
                 this.tooltipElement.classList.remove(cssClass.oldCss);
@@ -4943,7 +4924,7 @@ let Slider = class Slider extends Component {
     getTooltipTransformProperties(className) {
         let transformProperties;
         if (this.tooltipElement) {
-            let position = this.orientation === 'Horizontal' ?
+            const position = this.orientation === 'Horizontal' ?
                 ((this.tooltipElement.clientHeight + 14) - (this.tooltipElement.clientHeight / 2)) :
                 ((this.tooltipElement.clientWidth + 14) - (this.tooltipElement.clientWidth / 2));
             transformProperties = this.orientation === 'Horizontal' ?
@@ -4957,7 +4938,7 @@ let Slider = class Slider extends Component {
     openMaterialTooltip() {
         if (this.isMaterialTooltip) {
             this.refreshTooltip(this.firstHandle);
-            let tooltipContentElement = this.tooltipElement.firstElementChild;
+            const tooltipContentElement = this.tooltipElement.firstElementChild;
             tooltipContentElement.classList.remove(classNames.materialTooltipHide);
             tooltipContentElement.classList.add(classNames.materialTooltipShow);
             this.firstHandle.style.cursor = 'default';
@@ -4971,18 +4952,20 @@ let Slider = class Slider extends Component {
                 this.tooltipElement.style.transform = this.getTooltipTransformProperties(this.previousTooltipClass).rotate;
             }
             if (this.type === 'Default') {
-                setTimeout(() => { if (this.tooltipElement)
-                    this.tooltipElement.style.transition = this.transition.handle; }, 2500);
+                setTimeout(() => { if (this.tooltipElement) {
+                    this.tooltipElement.style.transition = this.transition.handle;
+                } }, 2500);
             }
             else {
-                setTimeout(() => { if (this.tooltipElement)
-                    this.tooltipElement.style.transition = 'none'; }, 2500);
+                setTimeout(() => { if (this.tooltipElement) {
+                    this.tooltipElement.style.transition = 'none';
+                } }, 2500);
             }
         }
     }
     closeMaterialTooltip() {
         if (this.isMaterialTooltip) {
-            let tooltipContentElement = this.tooltipElement.firstElementChild;
+            const tooltipContentElement = this.tooltipElement.firstElementChild;
             this.tooltipElement.style.transition = this.scaleTransform;
             tooltipContentElement.classList.remove(classNames.materialTooltipShow);
             tooltipContentElement.classList.add(classNames.materialTooltipHide);
@@ -4994,12 +4977,13 @@ let Slider = class Slider extends Component {
             this.tooltipElement.classList.remove(classNames.materialTooltipOpen);
             this.setTooltipTransform();
             this.tooltipTarget = undefined;
-            setTimeout(() => { if (this.tooltipElement)
-                this.tooltipElement.style.transition = 'none'; }, 2500);
+            setTimeout(() => { if (this.tooltipElement) {
+                this.tooltipElement.style.transition = 'none';
+            } }, 2500);
         }
     }
     checkTooltipPosition(args) {
-        let tooltipClass = this.tooltipPositionCalculation(args.collidedPosition);
+        const tooltipClass = this.tooltipPositionCalculation(args.collidedPosition);
         if (this.tooltipCollidedPosition === undefined ||
             this.tooltipCollidedPosition !== args.collidedPosition || !args.element.classList.contains(tooltipClass)) {
             if (this.isMaterialTooltip) {
@@ -5020,9 +5004,10 @@ let Slider = class Slider extends Component {
         }
     }
     setTooltipTransform() {
-        let transformProperties = this.getTooltipTransformProperties(this.previousTooltipClass);
-        if (isNullOrUndefined(this.tooltipElement))
+        const transformProperties = this.getTooltipTransformProperties(this.previousTooltipClass);
+        if (isNullOrUndefined(this.tooltipElement)) {
             return;
+        }
         if (this.tooltipElement.firstElementChild.innerText.length > 4) {
             this.tooltipElement.style.transform = `${transformProperties.translate} scale(0.01)`;
         }
@@ -5032,7 +5017,8 @@ let Slider = class Slider extends Component {
     }
     renderTooltip() {
         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 } },
@@ -5046,7 +5032,7 @@ let Slider = class Slider extends Component {
         this.initializeTooltipProps();
     }
     initializeTooltipProps() {
-        let tooltipShowOn = (this.tooltip.showOn === 'Auto' ? 'Hover' : this.tooltip.showOn);
+        const tooltipShowOn = (this.tooltip.showOn === 'Auto' ? 'Hover' : this.tooltip.showOn);
         this.setProperties({ tooltip: { showOn: tooltipShowOn } }, true);
         this.tooltipObj.position = this.tooltipPlacement();
         this.tooltipCollision(this.tooltipObj.position);
@@ -5086,10 +5072,10 @@ let Slider = class Slider extends Component {
         this.buttonTitle();
     }
     buttonTitle() {
-        let enabledRTL = this.enableRtl && this.orientation !== 'Vertical';
+        const enabledRTL = this.enableRtl && this.orientation !== 'Vertical';
         this.l10n.setLocale(this.locale);
-        let decrementTitle = this.l10n.getConstant('decrementTitle');
-        let incrementTitle = this.l10n.getConstant('incrementTitle');
+        const decrementTitle = this.l10n.getConstant('decrementTitle');
+        const incrementTitle = this.l10n.getConstant('incrementTitle');
         attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': decrementTitle, title: decrementTitle });
         attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': incrementTitle, title: incrementTitle });
     }
@@ -5099,18 +5085,26 @@ let Slider = class Slider extends Component {
         }
     }
     repeatButton(args) {
-        let hVal = this.handleValueUpdate();
-        let enabledRTL = this.enableRtl && this.orientation !== 'Vertical';
+        const hVal = this.handleValueUpdate();
+        const enabledRTL = this.enableRtl && this.orientation !== 'Vertical';
         let 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);
@@ -5161,9 +5155,8 @@ let Slider = class Slider extends Component {
         }
         return tickCount;
     }
-    // tslint:disable-next-line:max-func-body-length
     renderScale() {
-        let orien = this.orientation === 'Vertical' ? 'v' : 'h';
+        const orien = this.orientation === 'Vertical' ? 'v' : 'h';
         this.noOfDecimals = this.numberOfDecimals(this.step);
         this.ul = this.createElement('ul', {
             className: classNames.scale + ' ' + 'e-' + orien + '-scale ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),
@@ -5175,18 +5168,22 @@ let Slider = class Slider extends Component {
         }
         let 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));
         }
-        let min = this.fractionalToInteger(this.min);
-        let max = this.fractionalToInteger(this.max);
-        let steps = this.fractionalToInteger(smallStep);
-        let bigNum = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 && this.customValues.length - 1;
-        let customStep = this.customTickCounter(bigNum);
-        let count = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?
+        const min = this.fractionalToInteger(this.min);
+        const max = this.fractionalToInteger(this.max);
+        const steps = this.fractionalToInteger(smallStep);
+        const bigNum = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 && this.customValues.length - 1;
+        const customStep = this.customTickCounter(bigNum);
+        const count = !isNullOrUndefined(this.customValues) && this.customValues.length > 0 ?
             (bigNum * customStep) + bigNum : Math.abs((max - min) / steps);
         this.element.appendChild(this.ul);
         let li;
@@ -5234,8 +5231,8 @@ let Slider = class Slider extends Component {
                     }
                 }
                 else {
-                    let largestep = this.fractionalToInteger(this.ticks.largeStep);
-                    let startValue = this.fractionalToInteger(start);
+                    const largestep = this.fractionalToInteger(this.ticks.largeStep);
+                    const startValue = this.fractionalToInteger(start);
                     if (orien === 'h') {
                         islargeTick = ((startValue - min) % largestep === 0) ? true : false;
                     }
@@ -5247,8 +5244,13 @@ let Slider = class Slider extends Component {
             if (islargeTick) {
                 li.classList.add(classNames.large);
             }
-            (orien === 'h') ? (li.style.width = tickWidth + '%') : (li.style.height = tickWidth + '%');
-            let repeat = islargeTick ? (this.ticks.placement === 'Both' ? 2 : 1) : 0;
+            if (orien === 'h') {
+                li.style.width = tickWidth + '%';
+            }
+            else {
+                li.style.height = tickWidth + '%';
+            }
+            const repeat = islargeTick ? (this.ticks.placement === 'Both' ? 2 : 1) : 0;
             if (islargeTick) {
                 for (let j = 0; j < repeat; j++) {
                     this.createTick(li, start, tickWidth);
@@ -5297,20 +5299,20 @@ let Slider = class Slider extends Component {
             this.firstChild.style.height = tickWidth / 2 + '%';
             this.lastChild.style.height = tickWidth / 2 + '%';
         }
-        let eventArgs = { ticksWrapper: this.ul, tickElements: this.tickElementCollection };
+        const eventArgs = { ticksWrapper: this.ul, tickElements: this.tickElementCollection };
         if (triggerEvent) {
             this.trigger('renderedTicks', eventArgs);
         }
         this.scaleAlignment();
     }
     createTick(li, start, tickWidth) {
-        let span = this.createElement('span', {
+        const span = this.createElement('span', {
             className: classNames.tickValue + ' ' + classNames.tick + '-' + this.ticks.placement.toLowerCase(),
             attrs: { role: 'presentation', tabIndex: '-1', 'aria-hidden': 'true' }
         });
         li.appendChild(span);
         if (isNullOrUndefined(this.customValues)) {
-            this.formatTicksValue(li, start, span, tickWidth);
+            this.formatTicksValue(li, start, span);
         }
         else {
             if (this.enableHtmlSanitizer) {
@@ -5321,7 +5323,7 @@ let Slider = class Slider extends Component {
             }
         }
     }
-    formatTicksValue(li, start, spanElement, tickWidth) {
+    formatTicksValue(li, start, spanElement) {
         const tickText = this.formatNumber(start);
         const text = !isNullOrUndefined(this.ticks) && !isNullOrUndefined(this.ticks.format) ?
             this.formatString(start, this.ticksFormatInfo).formatString : tickText;
@@ -5340,29 +5342,34 @@ let Slider = class Slider extends Component {
     }
     scaleAlignment() {
         this.tickValuePosition();
-        let 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);
+            }
         }
     }
     tickValuePosition() {
         this.firstChild = this.element.querySelector('ul').children[0];
-        let first = this.firstChild.getBoundingClientRect();
+        const first = this.firstChild.getBoundingClientRect();
         let firstChild;
         let otherChild;
-        let smallStep = this.ticks.smallStep;
-        let count = Math.abs((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min)))) / smallStep;
+        const smallStep = this.ticks.smallStep;
+        const count = Math.abs((parseFloat(formatUnit(this.max))) - (parseFloat(formatUnit(this.min)))) / smallStep;
         if (this.firstChild.children.length > 0) {
             firstChild = this.firstChild.children[0].getBoundingClientRect();
         }
-        let tickElements = [this.sliderContainer.querySelectorAll('.' + classNames.tick + '.' +
+        const tickElements = [this.sliderContainer.querySelectorAll('.' + classNames.tick + '.' +
                 classNames.large + ' .' + classNames.tickValue)];
         let other;
         if (this.ticks.placement === 'Both') {
@@ -5371,7 +5378,7 @@ let Slider = class Slider extends Component {
         else {
             other = [].slice.call(tickElements[0], 1);
         }
-        let tickWidth = this.orientation === 'Vertical' ?
+        const tickWidth = this.orientation === 'Vertical' ?
             (first.height * 2) : (first.width * 2);
         for (let i = 0; i < this.firstChild.children.length; i++) {
             if (this.orientation === 'Vertical') {
@@ -5443,13 +5450,22 @@ let Slider = class Slider extends Component {
             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] });
+                }
+            }
         }
     }
     handleValueUpdate() {
@@ -5494,27 +5510,39 @@ let Slider = class Slider extends Component {
         const 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());
@@ -5542,13 +5570,20 @@ let Slider = class Slider extends Component {
     }
     tooltipToggle(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);
+            }
         }
     }
     buttonUp(args) {
@@ -5562,14 +5597,21 @@ let Slider = class Slider extends Component {
     setRangeBar() {
         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' });
             }
         }
@@ -5673,10 +5715,9 @@ let Slider = class Slider extends Component {
             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) {
                 const values = this.getLimitValueAndPosition(this.handleVal1, this.limits.minStart, this.limits.minEnd);
@@ -5735,10 +5776,16 @@ let Slider = class Slider extends Component {
         }
         this.handleStart();
         handle.forEach((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`;
@@ -5758,7 +5805,7 @@ let Slider = class Slider extends Component {
         this.activeHandle = 1;
     }
     changeEvent(eventName, e) {
-        let previous = eventName === 'change' ? this.previousVal : this.previousChanged;
+        const previous = eventName === 'change' ? this.previousVal : this.previousChanged;
         if (this.type !== 'Range') {
             this.setProperties({ 'value': this.handleVal1 }, true);
             if (previous !== this.value && (!this.isMaterialTooltip || !this.initialTooltip)) {
@@ -5769,7 +5816,7 @@ let Slider = class Slider extends Component {
             this.setAriaAttrValue(this.firstHandle);
         }
         else {
-            let value = this.value = [this.handleVal1, this.handleVal2];
+            const value = this.value = [this.handleVal1, this.handleVal2];
             this.setProperties({ 'value': value }, true);
             if (previous.length === this.value.length
                 && this.value[0] !== previous[0] || this.value[1] !== previous[1]) {
@@ -5878,7 +5925,7 @@ let Slider = class Slider extends Component {
         if (this.min === this.max) {
             return (parseFloat(formatUnit(this.max)));
         }
-        let handle = this.tempStartEnd();
+        const handle = this.tempStartEnd();
         if (value < handle.start) {
             value = handle.start;
         }
@@ -5890,11 +5937,12 @@ let Slider = class Slider extends Component {
     /**
      * It is used to reposition slider.
      *
-     * @returns void
+     * @returns {void}
      */
     reposition() {
-        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';
         }
@@ -5906,26 +5954,38 @@ let Slider = class Slider extends Component {
             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' });
             }
         }
@@ -5955,8 +6015,9 @@ let Slider = class Slider extends Component {
         this.handleStart();
         if (!this.tooltip.isVisible) {
             setTimeout(() => {
-                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;
                 }
@@ -6002,7 +6063,6 @@ let Slider = class Slider extends Component {
             this.setHandlePosition(null);
         }
     }
-    // eslint-disable-next-line
     tempStartEnd() {
         if (this.min > this.max) {
             return {
@@ -6017,20 +6077,19 @@ let Slider = class Slider extends Component {
             };
         }
     }
-    // eslint-disable-next-line
     xyToPosition(position) {
         let pos;
         if (this.min === this.max) {
             return 100;
         }
         if (this.orientation === 'Horizontal') {
-            let left = position.x - this.element.getBoundingClientRect().left;
-            let num = this.element.offsetWidth / 100;
+            const left = position.x - this.element.getBoundingClientRect().left;
+            const num = this.element.offsetWidth / 100;
             this.val = (left / num);
         }
         else {
-            let top = position.y - this.element.getBoundingClientRect().top;
-            let num = this.element.offsetHeight / 100;
+            const top = position.y - this.element.getBoundingClientRect().top;
+            const num = this.element.offsetHeight / 100;
             this.val = 100 - (top / num);
         }
         let val = this.stepValueCalculation(this.val);
@@ -6055,8 +6114,8 @@ let Slider = class Slider extends Component {
         if (this.step === 0) {
             this.step = 1;
         }
-        let percentStep = (parseFloat(formatUnit(this.step))) / ((parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min))) / 100);
-        let remain = value % Math.abs(percentStep);
+        const percentStep = (parseFloat(formatUnit(this.step))) / ((parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min))) / 100);
+        const remain = value % Math.abs(percentStep);
         if (remain !== 0) {
             if ((percentStep / 2) > remain) {
                 value -= remain;
@@ -6068,8 +6127,7 @@ let Slider = class Slider extends Component {
         return value;
     }
     add(a, b, addition) {
-        let precision;
-        let x = Math.pow(10, precision || 3);
+        const x = Math.pow(10,  3);
         let val;
         if (addition) {
             val = (Math.round(a * x) + Math.round(b * x)) / x;
@@ -6081,19 +6139,18 @@ let Slider = class Slider extends Component {
     }
     positionToValue(pos) {
         let val;
-        let diff = parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min));
+        const diff = parseFloat(formatUnit(this.max)) - parseFloat(formatUnit(this.min));
         if (this.orientation === 'Horizontal') {
             val = (pos / this.element.getBoundingClientRect().width) * diff;
         }
         else {
             val = (pos / this.element.getBoundingClientRect().height) * diff;
         }
-        let total = this.add(val, parseFloat(this.min.toString()), true);
+        const total = this.add(val, parseFloat(this.min.toString()), true);
         return (total);
     }
     sliderBarClick(evt) {
         evt.preventDefault();
-        // eslint-disable-next-line
         let pos;
         if (evt.type === 'mousedown' || evt.type === 'mouseup' || evt.type === 'click') {
             pos = { x: evt.clientX, y: evt.clientY };
@@ -6107,7 +6164,7 @@ let Slider = class Slider extends Component {
             this.activeHandle = 2;
             if (!(this.limits.enabled && this.limits.endHandleFixed)) {
                 if (this.limits.enabled) {
-                    let value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);
+                    const value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);
                     handleVal = value[0];
                     handlepos = value[1];
                 }
@@ -6122,7 +6179,7 @@ let Slider = class Slider extends Component {
             this.activeHandle = 1;
             if (!(this.limits.enabled && this.limits.startHandleFixed)) {
                 if (this.limits.enabled) {
-                    let value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);
+                    const value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);
                     handleVal = value[0];
                     handlepos = value[1];
                 }
@@ -6136,17 +6193,17 @@ let Slider = class Slider extends Component {
         if (this.isMaterialTooltip) {
             this.tooltipElement.classList.add(classNames.materialTooltipActive);
         }
-        let focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);
+        const focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);
         if (focusedElement && this.getHandle() !== focusedElement) {
             focusedElement.classList.remove(classNames.sliderTabHandle);
         }
-        let handle = this.activeHandle === 1 ? this.firstHandle : this.secondHandle;
+        const handle = this.activeHandle === 1 ? this.firstHandle : this.secondHandle;
         let behindElement;
         if ((evt.type === 'click' || evt.type === 'mousedown') && evt.target === handle) {
             const { clientX: eventX, clientY: eventY } = evt;
             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();
@@ -6158,7 +6215,7 @@ let Slider = class Slider extends Component {
         if (!this.checkRepeatedValue(handleVal)) {
             return;
         }
-        let transition = (this.isMaterial || this.isMaterial3) && this.tooltip.isVisible ?
+        const transition = (this.isMaterial || this.isMaterial3) && this.tooltip.isVisible ?
             this.transitionOnMaterialTooltip : this.transition;
         this.getHandle().style.transition = transition.handle;
         if (this.type !== 'Default') {
@@ -6168,7 +6225,7 @@ let Slider = class Slider extends Component {
         if (this.isMaterialTooltip) {
             this.initialTooltip = false;
         }
-        if (evt.target != handle) {
+        if (evt.target !== handle) {
             this.changeEvent('changed', evt);
         }
         if (this.type !== 'Default') {
@@ -6302,7 +6359,7 @@ let Slider = class Slider extends Component {
         if (this.type !== 'Range' && this.activeHandle === 1) {
             if (!(this.limits.enabled && this.limits.startHandleFixed)) {
                 if (this.limits.enabled) {
-                    let valueAndPostion = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);
+                    const valueAndPostion = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);
                     handlepos = valueAndPostion[1];
                     handleVal = valueAndPostion[0];
                 }
@@ -6321,7 +6378,7 @@ let Slider = class Slider extends Component {
                     }
                     if (handlepos !== this.preHandlePos1) {
                         if (this.limits.enabled) {
-                            let value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);
+                            const value = this.getLimitValueAndPosition(handleVal, this.limits.minStart, this.limits.minEnd);
                             handleVal = value[0];
                             handlepos = value[1];
                         }
@@ -6340,7 +6397,7 @@ let Slider = class Slider extends Component {
                     }
                     if (handlepos !== this.preHandlePos2) {
                         if (this.limits.enabled) {
-                            let value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);
+                            const value = this.getLimitValueAndPosition(handleVal, this.limits.maxStart, this.limits.maxEnd);
                             handleVal = value[0];
                             handlepos = value[1];
                         }
@@ -6384,7 +6441,7 @@ let Slider = class Slider extends Component {
     }
     checkRepeatedValue(currentValue) {
         if (this.type === 'Range') {
-            let previousVal = this.enableRtl && this.orientation !== 'Vertical' ? (this.activeHandle === 1 ?
+            const previousVal = this.enableRtl && this.orientation !== 'Vertical' ? (this.activeHandle === 1 ?
                 this.previousVal[1] : this.previousVal[0]) :
                 (this.activeHandle === 1 ? this.previousVal[0] : this.previousVal[1]);
             if (currentValue === previousVal) {
@@ -6480,7 +6537,7 @@ let Slider = class Slider extends Component {
             }
             this.minDiff = this.handleVal2 - this.handleVal1;
             this.tooltipToggle(this.rangeBar);
-            let focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);
+            const focusedElement = this.element.querySelector('.' + classNames.sliderTabHandle);
             if (focusedElement) {
                 focusedElement.classList.remove(classNames.sliderTabHandle);
             }
@@ -6554,7 +6611,7 @@ let Slider = class Slider extends Component {
                     this.element.querySelector('.' + classNames.sliderTabHandle).classList.remove(classNames.sliderTabHandle);
                 }
                 event.target.classList.add(classNames.sliderTabHandle);
-                let parentElement = event.target.parentElement;
+                const parentElement = event.target.parentElement;
                 if (parentElement === this.element) {
                     parentElement.querySelector('.' + classNames.sliderTrack).classList.add(classNames.sliderTabTrack);
                     if (this.type === 'Range' || this.type === 'MinRange') {
@@ -6562,8 +6619,13 @@ let Slider = class Slider extends Component {
                     }
                 }
                 if (this.type === 'Range') {
-                    (event.target.previousSibling).classList.contains(classNames.sliderHandle) ?
-                        this.activeHandle = 2 : this.activeHandle = 1;
+                    const 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());
@@ -6687,7 +6749,7 @@ let Slider = class Slider extends Component {
             this.tooltipObj.refresh(this.firstHandle);
         }
         if (this.showButtons) {
-            let enabledRTL = this.enableRtl && this.orientation !== 'Vertical';
+            const enabledRTL = this.enableRtl && this.orientation !== 'Vertical';
             attributes(enabledRTL ? this.secondBtn : this.firstBtn, { 'aria-label': 'Decrease', title: 'Decrease' });
             attributes(enabledRTL ? this.firstBtn : this.secondBtn, { 'aria-label': 'Increase', title: 'Increase' });
         }
@@ -6733,10 +6795,11 @@ let Slider = class Slider extends Component {
     /**
      * Get the properties to be maintained in the persisted state.
      *
+     * @returns {string} - Returns the string
      * @private
      */
     getPersistData() {
-        let keyEntity = ['value'];
+        const keyEntity = ['value'];
         return this.addOnPersist(keyEntity);
     }
     /**
@@ -6744,7 +6807,7 @@ let Slider = class Slider extends Component {
      * Also it removes the attributes and classes.
      *
      * @method destroy
-     * @return {void}
+     * @returns {void}
      */
     destroy() {
         super.destroy();
@@ -6755,7 +6818,9 @@ let Slider = class Slider extends Component {
         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();
@@ -6783,18 +6848,20 @@ let Slider = class Slider extends Component {
     /**
      * 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
     onPropertyChanged(newProp, oldProp) {
-        for (let prop of Object.keys(newProp)) {
+        for (const prop of Object.keys(newProp)) {
             switch (prop) {
                 case 'cssClass':
                     this.setCSSClass(oldProp.cssClass);
                     break;
                 case 'value':
                     if (newProp && oldProp) {
-                        let value = isNullOrUndefined(newProp.value) ?
+                        const value = isNullOrUndefined(newProp.value) ?
                             (this.type === 'Range' ? [this.min, this.max] : this.min) : newProp.value;
                         this.setProperties({ 'value': value }, true);
                         if (!isNullOrUndefined(oldProp.value) && oldProp.value.toString() !== value.toString()) {
@@ -6942,8 +7009,9 @@ let Slider = class Slider extends Component {
         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) + '';
         }
@@ -6977,7 +7045,8 @@ let Slider = class Slider extends Component {
                         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);
@@ -7004,6 +7073,7 @@ let Slider = class Slider extends Component {
     /**
      * Gets the component name
      *
+     * @returns {string} - Returns the string
      * @private
      */
     getModuleName() {
@@ -7086,10 +7156,6 @@ Slider = __decorate$2([
     NotifyPropertyChanges
 ], Slider);
 
-/**
- * Slider modules
- */
-
 var __decorate$3 = (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);
@@ -7100,7 +7166,6 @@ var FormValidator_1;
 /**
  * global declarations
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const 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,}' +
@@ -7244,20 +7309,19 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
         }
         else if (!isNullOrUndefined(this.rules[`${name}`] && rules)) {
             for (let 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.
      */
     validate(selected) {
         const rules = Object.keys(this.rules);
@@ -7276,7 +7340,6 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
             return this.errorRules.length === 0;
         }
     }
-    /* eslint-enable valid-jsdoc, jsdoc/require-returns-description */
     /**
      * Reset the value of all the fields in form.
      *
@@ -7286,18 +7349,16 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
         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.
      */
     getInputElement(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.
      *
@@ -7351,9 +7412,9 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
     }
     /**
      * @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
     afterLocalization(args) {
         this.locale = args.locale;
         this.localeFunc();
@@ -7377,10 +7438,12 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
             input.removeAttribute('aria-invalid');
             const inputParent = input.parentElement;
             const 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 {
@@ -7391,10 +7454,12 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
                 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 {
@@ -7644,11 +7709,13 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
                     this.inputElement.setAttribute('aria-describedby', this.inputElement.id + '-info');
                     const inputParent = this.inputElement.parentElement;
                     const 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);
                     }
@@ -7664,11 +7731,13 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
                     }
                     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);
                     }
@@ -7737,8 +7806,8 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
         const formats = message.match(/{(\d)}/g);
         if (!isNullOrUndefined(formats)) {
             for (let i = 0; i < formats.length; i++) {
-                const value = ruleValue instanceof Array ? ruleValue[parseInt(i.toString())] : ruleValue;
-                message = message.replace(formats[parseInt(i.toString())], value);
+                const value = ruleValue instanceof Array ? ruleValue[parseInt(i.toString(), 10)] : ruleValue;
+                message = message.replace(formats[parseInt(i.toString(), 10)], value);
             }
         }
         return message;
@@ -7800,7 +7869,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
     // Remove existing rule from errorRules object
     removeErrorRules(name) {
         for (let i = 0; i < this.errorRules.length; i++) {
-            const rule = this.errorRules[parseInt(i.toString())];
+            const rule = this.errorRules[parseInt(i.toString(), 10)];
             if (rule.name === name) {
                 this.errorRules.splice(i, 1);
             }
@@ -7819,7 +7888,8 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
             this.removeErrorRules(name);
             const inputParent = this.inputElement.parentElement;
             const 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);
             }
@@ -7842,7 +7912,7 @@ let FormValidator = FormValidator_1 = class FormValidator extends Base {
             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
     static isCheckable(input) {
         const inputType = input.getAttribute('type');
         return inputType && (inputType === 'checkbox' || inputType === 'radio' || inputType === 'submit');
@@ -7875,10 +7945,10 @@ FormValidator.checkValidator = {
         return regex.DIGITS.test(option.value);
     },
     maxLength: (option) => {
-        return option.value.length <= option.param;
+        return option.value.length <= Number(option.param);
     },
     minLength: (option) => {
-        return option.value.length >= option.param;
+        return option.value.length >= Number(option.param);
     },
     rangeLength: (option) => {
         const param = option.param;
@@ -7890,9 +7960,9 @@ FormValidator.checkValidator = {
     },
     date: (option) => {
         if (!isNullOrUndefined(option.param) && (typeof (option.param) === 'string' && option.param !== '')) {
-            var globalize = new Internationalization;
-            var dateOptions = { format: option.param.toString(), type: 'dateTime', skeleton: 'yMd' };
-            var dateValue = globalize.parseDate(option.value, dateOptions);
+            const globalize = new Internationalization;
+            const dateOptions = { format: option.param.toString(), type: 'dateTime', skeleton: 'yMd' };
+            const dateValue = globalize.parseDate(option.value, dateOptions);
             return (!isNullOrUndefined(dateValue) && dateValue instanceof Date && !isNaN(+dateValue));
         }
         else {
@@ -7902,7 +7972,7 @@ FormValidator.checkValidator = {
     max: (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();
@@ -7910,11 +7980,11 @@ FormValidator.checkValidator = {
     min: (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) {
             const 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
@@ -7983,17 +8053,12 @@ FormValidator = FormValidator_1 = __decorate$3([
     NotifyPropertyChanges
 ], FormValidator);
 
-/**
- * Input box Component
- */
-
 var __decorate$4 = (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;
 };
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const CONTROL_WRAPPER = 'e-upload e-control-wrapper';
 const INPUT_WRAPPER = 'e-file-select';
 const DROP_AREA = 'e-file-drop';
@@ -8114,7 +8179,6 @@ let Uploader = class Uploader extends Component {
         this.newFileRef = 0;
         this.isFirstFileOnSelection = false;
         this.dragCounter = 0;
-        this.isAngular = false;
         /**
          * Get the file item(li) which are shown in file list.
          *
@@ -8176,8 +8240,7 @@ let Uploader = class Uploader extends Component {
                     this.updateDirectoryAttributes();
                     break;
                 case 'template':
-                    const ejInstance = getValue('ej2_instances', this.element);
-                    if (ejInstance[0].isReact) {
+                    if (this.isReact) {
                         this.reRenderFileList();
                     }
                     else {
@@ -9106,10 +9169,8 @@ let Uploader = class Uploader extends Component {
         }
         return false;
     }
-    /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
     /* istanbul ignore next */
     traverseFileTree(item, event) {
-        /* eslint-enable @typescript-eslint/explicit-module-boundary-types */
         if (item.isFile) {
             this.filesEntries.push(item);
         }
@@ -9222,8 +9283,8 @@ let Uploader = class Uploader extends Component {
         if (this.enableHtmlSanitizer) {
             for (let i = 0; i < fileData.length; i++) {
                 const sanitizeFile = SanitizeHtmlHelper.beforeSanitize();
-                const sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[parseInt(i.toString())].name);
-                const currentFileName = fileData[parseInt(i.toString())].name;
+                const sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[parseInt(i.toString(), 10)].name);
+                const currentFileName = fileData[parseInt(i.toString(), 10)].name;
                 let isUTF8 = false;
                 for (let i = 0; i < currentFileName.length; i++) {
                     if (currentFileName.charCodeAt(i) > 127) {
@@ -9231,15 +9292,15 @@ let Uploader = class Uploader extends Component {
                         break;
                     }
                 }
-                let htmlTagRegex = /<([a-z][a-z0-9]*)\b[^>]*>(.*?)<\/\1>/i;
-                let hasHTMLString = htmlTagRegex.test(currentFileName);
-                if ((sanitizeFileName !== fileData[parseInt(i.toString())].name) && !(isUTF8 && !hasHTMLString)) {
-                    const encodedFileName = targetFiles[parseInt(i.toString())].name.replace(/[\u00A0-\u9999<>\&]/g, function (i) {
+                const htmlTagRegex = /<([a-z][a-z0-9]*)\b[^>]*>(.*?)<\/\1>/i;
+                const hasHTMLString = htmlTagRegex.test(currentFileName);
+                if ((sanitizeFileName !== fileData[parseInt(i.toString(), 10)].name) && !(isUTF8 && !hasHTMLString)) {
+                    const 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';
                 }
             }
         }
@@ -9250,9 +9311,7 @@ let Uploader = class Uploader extends Component {
             this._internalRenderSelect(eventArgs, fileData);
         });
     }
-    updateInitialFileDetails(args, 
-    // eslint-disable-next-line @typescript-eslint/indent
-    targetFiles, file, i, fileData, directory, paste) {
+    updateInitialFileDetails(args, targetFiles, file, i, fileData, directory, paste) {
         const 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;
@@ -9396,7 +9455,8 @@ let Uploader = class Uploader extends Component {
                 allowedExtensions.push(extension.trim().toLocaleLowerCase());
             }
             for (let i = 0; i < files.length; i++) {
-                let checkFileType = files[i].type.indexOf(".") !== -1 ? files[i].type.replace(".", "") : files[i].type;
+                const 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';
@@ -9424,7 +9484,8 @@ let Uploader = class Uploader extends Component {
     isPreLoadFile(fileData) {
         let isPreload = false;
         for (let 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;
             }
         }
@@ -9667,7 +9728,6 @@ let Uploader = class Uploader extends Component {
         this.fileList.push(fileList);
         this.renderReactTemplates();
     }
-    /* eslint-disable valid-jsdoc, jsdoc/require-param */
     /**
      * Create the file list for specified files data.
      *
@@ -9679,7 +9739,6 @@ let Uploader = class Uploader extends Component {
         this.internalCreateFileList(fileData);
     }
     internalCreateFileList(fileData) {
-        /* eslint-enable valid-jsdoc, jsdoc/require-param */
         this.createParentUL();
         if (this.template !== '' && !isNullOrUndefined(this.template)) {
             if (this.isFormUpload()) {
@@ -9829,7 +9888,7 @@ let Uploader = class Uploader extends Component {
             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]);
             }
         }
@@ -10149,7 +10208,8 @@ let Uploader = class Uploader extends Component {
         for (let selectFileIndex = 0; selectFileIndex < selectedFiles.length; selectFileIndex++) {
             const selectedFileData = selectedFiles[selectFileIndex];
             for (let 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;
                 }
@@ -10259,9 +10319,9 @@ let Uploader = class Uploader extends Component {
         }
     }
     checkHTMLAttributes(isDynamic) {
-        const attributes$$1 = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
+        const attributes = isDynamic ? isNullOrUndefined(this.htmlAttributes) ? [] : Object.keys(this.htmlAttributes) :
             ['accept', 'multiple', 'disabled'];
-        for (const prop of attributes$$1) {
+        for (const prop of attributes) {
             if (!isNullOrUndefined(this.element.getAttribute(prop))) {
                 switch (prop) {
                     case 'accept':
@@ -10477,13 +10537,17 @@ let Uploader = class Uploader extends Component {
             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'));
+            }
             const 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);
@@ -10764,13 +10828,12 @@ let Uploader = class Uploader extends Component {
             }, 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.
      */
     bytesToSize(bytes) {
         let i = -1;
@@ -10812,7 +10875,6 @@ let Uploader = class Uploader extends Component {
         }
         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.
      *
@@ -10833,8 +10895,8 @@ let Uploader = class Uploader extends Component {
         }
         this.element.removeAttribute('accept');
         this.setInitialAttributes();
-        const attributes$$1 = ['aria-label', 'directory', 'webkitdirectory', 'tabindex'];
-        for (const key of attributes$$1) {
+        const attributes = ['aria-label', 'directory', 'webkitdirectory', 'tabindex'];
+        for (const key of attributes) {
             this.element.removeAttribute(key);
         }
         if (!isNullOrUndefined(this.uploadWrapper)) {
@@ -10939,20 +11001,6 @@ let Uploader = class Uploader extends Component {
         this.fileStreams[fileCount] = file;
         return fileCount;
     }
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    /* istanbul ignore next */
-    getFileInfo(index, ele) {
-        /* eslint-enable @typescript-eslint/no-unused-vars */
-        const files = this.filesData;
-        if (!files || files.length === 0) {
-            return null;
-        }
-        const file = files[index];
-        if (!file) {
-            return null;
-        }
-        return this.filesData[index];
-    }
     uploadFiles(files, custom) {
         let selectedFiles = [];
         if (this.asyncSettings.saveUrl === '' || isNullOrUndefined(this.asyncSettings.saveUrl)) {
@@ -11431,20 +11479,14 @@ __decorate$4([
 Uploader = __decorate$4([
     NotifyPropertyChanges
 ], Uploader);
-
 /* eslint-enable @typescript-eslint/no-explicit-any */
 
-/**
- * Uploader modules
- */
-
 var __decorate$5 = (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;
 };
-/* eslint-disable prefer-spread */
 const APPLY = 'e-apply';
 const CANCEL = 'e-cancel';
 const CURRENT = 'e-current';
@@ -12479,7 +12521,6 @@ let ColorPicker = class ColorPicker extends Component {
         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' });
     }
@@ -12619,7 +12660,6 @@ let ColorPicker = class ColorPicker extends Component {
         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' });
     }
@@ -13377,10 +13417,6 @@ ColorPicker = __decorate$5([
     NotifyPropertyChanges
 ], ColorPicker);
 
-/**
- * ColorPicker modules
- */
-
 var __decorate$6 = (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);
@@ -13410,11 +13446,9 @@ let TextBox = class TextBox extends Component {
     constructor(options, element) {
         super(options, element);
         this.previousValue = null;
-        this.isAngular = false;
         this.isHiddenInput = false;
         this.isForm = false;
         this.inputPreviousValue = null;
-        this.isVue = false;
         this.textboxOptions = options;
     }
     /**
@@ -13468,7 +13502,12 @@ let TextBox = class TextBox extends Component {
                         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':
@@ -13559,7 +13598,7 @@ let TextBox = class TextBox extends Component {
         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);
@@ -13696,13 +13735,17 @@ let TextBox = class TextBox extends Component {
         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();
     }
     updateHTMLAttributesToWrapper() {
         Input.updateHTMLAttributesToWrapper(this.htmlAttributes, this.textboxWrapper.container);
     }
     updateHTMLAttributesToElement() {
-        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));
     }
     setInitialValue() {
         if (!this.isAngular) {
@@ -13786,13 +13829,12 @@ let TextBox = class TextBox extends Component {
         this.trigger('blur', eventArgs);
     }
     keydownHandler(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);
         }
     }
     inputHandler(args) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias
-        const textboxObj = this;
+        const textboxObj =  this;
         const eventArgs = {
             event: args,
             value: this.respectiveElement.value,
@@ -13813,7 +13855,7 @@ let TextBox = class TextBox extends Component {
     }
     changeHandler(args) {
         this.setProperties({ value: this.respectiveElement.value }, true);
-        if (this.previousValue != this.value) {
+        if (this.previousValue !== this.value) {
             this.raiseChangeEvent(args, true);
         }
         args.stopPropagation();
@@ -13928,24 +13970,23 @@ let TextBox = class TextBox extends Component {
     addIcon(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.
      */
     getPersistData() {
         const 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}
      */
-    addAttributes(attributes$$1) {
-        for (const key of Object.keys(attributes$$1)) {
+    addAttributes(attributes) {
+        for (const key of Object.keys(attributes)) {
             if (key === 'disabled') {
                 this.setProperties({ enabled: false }, true);
                 Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);
@@ -13955,17 +13996,17 @@ let TextBox = class TextBox extends Component {
                 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}`]);
             }
         }
     }
@@ -13975,8 +14016,8 @@ let TextBox = class TextBox extends Component {
      * @param { string[] } attributes - Specifies the attributes name to be removed from TextBox element.
      * @returns {void}
      */
-    removeAttributes(attributes$$1) {
-        for (const key of attributes$$1) {
+    removeAttributes(attributes) {
+        for (const key of attributes) {
             if (key === 'disabled') {
                 this.setProperties({ enabled: true }, true);
                 Input.setEnabled(this.enabled, this.respectiveElement, this.floatLabelType, this.textboxWrapper.container);
@@ -14086,10 +14127,6 @@ TextBox = __decorate$6([
     NotifyPropertyChanges
 ], TextBox);
 
-/**
- * Uploader modules
- */
-
 var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -14108,8 +14145,6 @@ let TextArea = class TextArea extends Component {
         this.previousValue = null;
         this.isForm = false;
         this.inputPreviousValue = null;
-        this.isAngular = false;
-        this.isVue = false;
         this.textareaOptions = options;
     }
     /**
@@ -14211,14 +14246,14 @@ let TextArea = class TextArea extends Component {
                     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);
                         }
@@ -14295,11 +14330,11 @@ let TextArea = class TextArea extends Component {
         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());
@@ -14355,10 +14390,10 @@ let TextArea = class TextArea extends Component {
     getModuleName() {
         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.
      */
     getPersistData() {
         const keyEntity = ['value'];
@@ -14439,12 +14474,12 @@ let TextArea = class TextArea extends Component {
             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.destroy();
     }
     focusHandler(args) {
@@ -14473,8 +14508,7 @@ let TextArea = class TextArea extends Component {
         }
     }
     inputHandler(args) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-this-alias
-        const textareaObj = this;
+        const textareaObj =  this;
         const eventArgs = {
             event: args,
             value: this.element.value,
@@ -14551,15 +14585,14 @@ let TextArea = class TextArea extends Component {
             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}
      */
-    addAttributes(attributes$$1) {
-        for (const key of Object.keys(attributes$$1)) {
+    addAttributes(attributes) {
+        for (const key of Object.keys(attributes)) {
             if (key === 'disabled') {
                 this.setProperties({ enabled: false }, true);
                 Input.setEnabled(this.enabled, this.element, this.floatLabelType, this.textareaWrapper.container);
@@ -14569,14 +14602,14 @@ let TextArea = class TextArea extends Component {
                 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}`]);
             }
         }
     }
@@ -14586,8 +14619,8 @@ let TextArea = class TextArea extends Component {
      * @param { string[] } attributes - Specifies the attributes name to be removed from TextArea element.
      * @returns {void}
      */
-    removeAttributes(attributes$$1) {
-        for (const key of attributes$$1) {
+    removeAttributes(attributes) {
+        for (const key of attributes) {
             if (key === 'disabled') {
                 this.setProperties({ enabled: true }, true);
                 Input.setEnabled(this.enabled, this.element, this.floatLabelType, this.textareaWrapper.container);
@@ -14641,7 +14674,7 @@ let TextArea = class TextArea extends Component {
      * @returns {void}
      */
     setWrapperWidth() {
-        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);
@@ -14730,17 +14763,17 @@ __decorate$7([
     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);
@@ -14763,10 +14796,6 @@ TextArea = __decorate$7([
     NotifyPropertyChanges
 ], TextArea);
 
-/**
- * Uploader modules
- */
-
 class SignatureBase extends Component {
     constructor() {
         super(...arguments);
@@ -15050,7 +15079,6 @@ class SignatureBase extends Component {
         if (isNullOrUndefined(this.pointColl)) {
             return;
         }
-        
         const canDrawCurve = this.pointColl.length > 2;
         const point = this.pointColl[0];
         if (!canDrawCurve && point) {
@@ -15893,10 +15921,6 @@ Signature = __decorate$8([
     NotifyPropertyChanges
 ], Signature);
 
-/**
- * Signature modules
- */
-
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -16064,10 +16088,10 @@ let Rating = class Rating extends Component {
     }
     touchMoveHandler(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');
         const rect = this.ratingItemList.getBoundingClientRect();
         const x = e.touches[0].clientX - rect.x;
         let currValue = (x / rect.width) * this.itemsCount;
@@ -16098,7 +16122,7 @@ let Rating = class Rating extends Component {
     }
     touchEndHandler() {
         this.closeRatingTooltip();
-        this.wrapper.classList.remove("e-touch-select");
+        this.wrapper.classList.remove('e-touch-select');
     }
     updateTemplateFunction() {
         this.emptyTemplateFunction = this.emptyTemplate ? this.getTemplateString(this.emptyTemplate) : null;
@@ -16253,14 +16277,14 @@ let Rating = class Rating extends Component {
                 this.tooltipObj.setProperties({ content: content }, isChange);
                 if (this.isAngular) {
                     setTimeout(() => {
-                        let ratingSpan = this.ratingItemList.querySelectorAll('.' + ITEMCONTAINER + '.' + SELECTED);
+                        const ratingSpan = this.ratingItemList.querySelectorAll('.' + ITEMCONTAINER + '.' + SELECTED);
                         this.tooltipObj.refresh(ratingSpan[ratingSpan.length - 1]);
                     });
                 }
             }
             else {
                 content = this.currentValue.toString();
-                this.tooltipObj.setProperties({ content: initializeCSPTemplate(function () { return content; }) }, isChange);
+                this.tooltipObj.setProperties({ content: initializeCSPTemplate(() => { return content; }) }, isChange);
             }
             this.renderReactTemplates();
         }
@@ -16380,7 +16404,7 @@ let Rating = class Rating extends Component {
     }
     mouseMoveHandler(index, e) {
         if (this.isTouchSelected) {
-            this.wrapper.classList.remove("e-rating-touch");
+            this.wrapper.classList.remove('e-rating-touch');
             this.isTouchSelected = false;
         }
         let currValue = this.calculateCurrentValue(index, e);
@@ -16717,17 +16741,635 @@ Rating = __decorate$9([
     NotifyPropertyChanges
 ], Rating);
 
+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;
+};
+const INPUTFIELD = 'e-otp-input-field';
+const 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>
+ * ```
  */
+let OtpInput = class OtpInput extends Component {
+    constructor(options, element) {
+        super(options, element);
+        /* Private variables */
+        this.inputs = [];
+        this.previousValue = '';
+        this.separatorElements = [];
+        this.shouldFireFocus = true;
+        this.shouldFireBlur = true;
+        this.isFocusInCalled = false;
+        this.isFocusOutCalled = false;
+    }
+    preRender() {
+        if (!this.element.id) {
+            this.element.id = getUniqueID('e-' + this.getModuleName());
+        }
+    }
+    render() {
+        this.initialize();
+    }
+    initialize() {
+        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();
+    }
+    renderInputs() {
+        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 (let i = 0; i < this.length; i++) {
+            this.createOtpInput(i);
+        }
+    }
+    createOtpInput(index) {
+        const valueContainer = this.getDefaultValue();
+        let inputValue = '';
+        if (valueContainer) {
+            if (this.type === 'number') {
+                const valueAtIndex = valueContainer[parseInt(index.toString(), 10)];
+                if (!isNaN(Number(valueAtIndex))) {
+                    inputValue = valueAtIndex;
+                }
+            }
+            else {
+                inputValue = valueContainer[parseInt(index.toString(), 10)] || '';
+            }
+        }
+        const 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);
+    }
+    renderSeparator(index, length) {
+        if (this.separator.length > 0) {
+            for (let i = index; i < length; i++) {
+                const 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)]);
+            }
+        }
+    }
+    updateSeparatorValue() {
+        if (this.separator === '') {
+            for (let i = 0; i < this.separatorElements.length; i++) {
+                remove(this.separatorElements[parseInt(i.toString(), 10)]);
+            }
+            this.separatorElements = [];
+            return;
+        }
+        for (let i = 0; i < this.separatorElements.length; i++) {
+            this.separatorElements[parseInt(i.toString(), 10)].textContent = this.separator;
+        }
+    }
+    addPlaceHolder() {
+        for (let 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)]);
+        }
+    }
+    updateInputType(inputType) {
+        this.inputs.forEach((input) => {
+            input.type = inputType;
+            input.setAttribute('inputmode', (inputType === 'number' ? 'numeric' : 'text'));
+        });
+    }
+    getDefaultValue() {
+        const extractedValue = typeof this.value === 'number' ? this.value.toString() : this.value;
+        // To remove the white space if present.
+        const value = extractedValue.replace(/\s/g, '');
+        if (value.length > 0) {
+            return value.split('');
+        }
+        return undefined;
+    }
+    handleInputChange(index, event) {
+        const currentInputElement = this.inputs[parseInt(index.toString(), 10)];
+        if (currentInputElement && index < this.length - 1 && currentInputElement.value.length > 0) {
+            const nextInputElement = this.inputs[parseInt(index.toString(), 10) + 1];
+            this.shouldFireFocus = this.shouldFireBlur = false;
+            nextInputElement.focus();
+            if (nextInputElement && nextInputElement.value.length > 0) {
+                nextInputElement.select();
+            }
+        }
+        const target = event.target;
+        if (target.value.length > 1) {
+            target.value = target.value.slice(0, 1);
+        }
+        this.triggerInputEvent(event);
+        this.triggerValuechanged(event, true);
+    }
+    handleKeyAction(index, event) {
+        if (event.key.length > 1 && !((index === 0 && event.key === 'Backspace') ||
+            (index === this.length - 1 && event.key === 'Delete'))) {
+            this.shouldFireFocus = this.shouldFireBlur = false;
+        }
+        const currentInputElement = this.inputs[parseInt(index.toString(), 10)];
+        const previousInputElement = this.inputs[parseInt(index.toString(), 10) - 1];
+        const nextInputElement = this.inputs[parseInt(index.toString(), 10) + 1];
+        if (event.key === 'Delete') {
+            let 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) {
+                const 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();
+                }
+            }
+        }
+    }
+    handleSelection(index) {
+        const currentInputElement = this.inputs[parseInt(index.toString(), 10)];
+        if (currentInputElement.value) {
+            currentInputElement.select();
+        }
+    }
+    handleFocus(index, event) {
+        addClass([this.inputs[parseInt(index.toString(), 10)]], 'e-otp-input-focus');
+        if (this.shouldFireFocus) {
+            const eventArgs = {
+                element: this.element,
+                event: event,
+                isInteracted: this.isFocusInCalled ? false : true,
+                value: this.value
+            };
+            this.trigger('focus', eventArgs);
+        }
+        this.shouldFireFocus = true;
+    }
+    handleBlur(index, event) {
+        removeClass([this.inputs[parseInt(index.toString(), 10)]], 'e-otp-input-focus');
+        if (this.shouldFireBlur) {
+            const eventArgs = {
+                element: this.element,
+                event: event,
+                isInteracted: this.isFocusOutCalled ? false : true,
+                value: this.value
+            };
+            this.trigger('blur', eventArgs);
+        }
+        this.shouldFireBlur = true;
+    }
+    handlePaste(index, event) {
+        const clipboardData = event.clipboardData;
+        if (clipboardData) {
+            const pastedText = clipboardData.getData('text');
+            const pastedValues = pastedText.split('');
+            let pastedValueIndex = 0;
+            for (let 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);
+        }
+    }
+    triggerInputEvent(event) {
+        const previousValue = this.value.toString();
+        this.updateValueProperty();
+        const inputEventArgs = {
+            element: this.element,
+            event: event,
+            previousValue: previousValue,
+            value: this.value.toString()
+        };
+        this.trigger('input', inputEventArgs);
+    }
+    triggerValuechanged(event, isInteracted) {
+        if (this.length === this.value.toString().length) {
+            if (this.previousValue !== this.value) {
+                const 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();
+            }
+        }
+    }
+    wireEvents(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));
+    }
+    unWireEvents() {
+        for (let i = 0; i < this.inputs.length; i++) {
+            const 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));
+        }
+    }
+    updateValueProperty() {
+        let value = '';
+        this.inputs.forEach((input) => {
+            value += input.value;
+        });
+        const 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();
+    }
+    updateInputValue(previousValue) {
+        const stringifiedValue = this.value.toString();
+        for (let i = 0; i < this.inputs.length; i++) {
+            const 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();
+    }
+    updateCssClass(addCss, removeCss = '') {
+        let cssClasses;
+        if (removeCss) {
+            cssClasses = removeCss.trim().split(' ');
+            this.element.classList.remove(...cssClasses);
+        }
+        if (addCss) {
+            cssClasses = addCss.trim().split(' ');
+            this.element.classList.add(...cssClasses);
+        }
+    }
+    updateVariantClass() {
+        let 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}`);
+        }
+    }
+    updateAriaLabel(customAriaLabel) {
+        this.inputs.forEach((input, index) => {
+            const defaultLabel = `Enter Otp Character ${index + 1}`;
+            const ariaLabel = customAriaLabel && customAriaLabel.length > 0
+                ? customAriaLabel[parseInt(index.toString(), 10)] || defaultLabel
+                : defaultLabel;
+            input.setAttribute('aria-label', ariaLabel);
+        });
+    }
+    updateDisabledState() {
+        this.inputs.forEach((input) => {
+            if (this.disabled) {
+                input.setAttribute('disabled', 'disabled');
+            }
+            else {
+                input.removeAttribute('disabled');
+            }
+        });
+    }
+    setElementAttributes(htmlAttributes, element) {
+        if (!isNullOrUndefined(htmlAttributes)) {
+            for (const key in htmlAttributes) {
+                if (key === 'class') {
+                    const 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}`]);
+                }
+            }
+        }
+    }
+    handleLengthChange(currentValue, previousValue) {
+        const isLengthAdded = (currentValue - previousValue) > 0;
+        if (isLengthAdded) {
+            for (let 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 (let 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;
+                    const index = currentValue === 0 ? 0 : currentValue - 1;
+                    for (let 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
+     */
+    getModuleName() {
+        return 'otpinput';
+    }
+    /**
+     * To get the properties to be maintained in the persisted state.
+     *
+     * @returns {string} - Persist data
+     */
+    getPersistData() {
+        return this.addOnPersist([]);
+    }
+    /**
+     * Destroy the Otp input.
+     *
+     * @returns {void}
+     */
+    destroy() {
+        super.destroy();
+        this.unWireEvents();
+        for (let i = 0; i < this.inputs.length; i++) {
+            remove(this.inputs[parseInt(i.toString(), 10)]);
+        }
+        for (let 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}
+     */
+    focusIn() {
+        this.isFocusInCalled = true;
+        let focusIndex = 0;
+        this.inputs.forEach((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}
+     */
+    focusOut() {
+        this.isFocusOutCalled = true;
+        this.inputs.forEach((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
+     */
+    onPropertyChanged(newProp, oldProp) {
+        for (const prop of Object.keys(newProp)) {
+            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);
 
-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.es2015.js.map