@syncfusion/ej2-inputs 20.4.54 → 21.1.37

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

@@ -298,7 +298,7 @@ var Input;
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     function wireClearBtnEvents(element, button, container) {
-        if (isBindClearAction == undefined || isBindClearAction) {
+        if (isBindClearAction === undefined || isBindClearAction) {
             button.addEventListener('click', function (event) {
                 if (!(element.classList.contains(CLASSNAMES.DISABLE) || element.readOnly)) {
                     event.preventDefault();
@@ -427,7 +427,7 @@ var Input;
      * @param {HTMLElement} container - The parent element which is need to get the label span to calculate width
      */
     function calculateWidth(element, container, moduleName) {
-        var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'));
+        var elementWidth = moduleName === 'multiselect' ? element : element.clientWidth - parseInt(getComputedStyle(element, null).getPropertyValue('padding-left'), 10);
         if (!isNullOrUndefined(container.getElementsByClassName('e-float-text-content')[0])) {
             if (container.getElementsByClassName('e-float-text-content')[0].classList.contains('e-float-text-overflow')) {
                 container.getElementsByClassName('e-float-text-content')[0].classList.remove('e-float-text-overflow');
@@ -629,10 +629,10 @@ var Input;
                 parentElement.classList.add(CLASSNAMES.DISABLE);
             }
             if (key === 'placeholder' && parentElement.classList.contains(CLASSNAMES.FLOATINPUT)) {
-                parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs[key];
+                parentElement.getElementsByClassName(CLASSNAMES.FLOATTEXT)[0].textContent = attrs["" + key];
             }
             else {
-                element.setAttribute(key, attrs[key]);
+                element.setAttribute(key, attrs["" + key]);
             }
         }
     }
@@ -734,7 +734,7 @@ var Input;
      */
     function setRipple(isRipple, inputObj) {
         for (var i = 0; i < inputObj.length; i++) {
-            _internalRipple(isRipple, inputObj[i].container);
+            _internalRipple(isRipple, inputObj[parseInt(i.toString())].container);
         }
     }
     Input.setRipple = setRipple;
@@ -745,14 +745,14 @@ var Input;
             container.querySelectorAll('.e-input-group-icon') : argsButton;
         if (isRipple && buttons.length > 0) {
             for (var index = 0; index < buttons.length; index++) {
-                buttons[index].addEventListener('mousedown', _onMouseDownRipple, false);
-                buttons[index].addEventListener('mouseup', _onMouseUpRipple, false);
+                buttons[parseInt(index.toString())].addEventListener('mousedown', _onMouseDownRipple, false);
+                buttons[parseInt(index.toString())].addEventListener('mouseup', _onMouseUpRipple, false);
             }
         }
         else if (buttons.length > 0) {
             for (var index = 0; index < buttons.length; index++) {
-                buttons[index].removeEventListener('mousedown', _onMouseDownRipple, this);
-                buttons[index].removeEventListener('mouseup', _onMouseUpRipple, this);
+                buttons[parseInt(index.toString())].removeEventListener('mousedown', _onMouseDownRipple, this);
+                buttons[parseInt(index.toString())].removeEventListener('mouseup', _onMouseUpRipple, this);
             }
         }
     }
@@ -840,7 +840,7 @@ var Input;
             var result = container.querySelectorAll(inputElement.tagName + ' ~ *');
             innerWrapper.appendChild(inputElement);
             for (var i = 0; i < result.length; i++) {
-                innerWrapper.appendChild(result[i]);
+                innerWrapper.appendChild(result[parseInt(i.toString())]);
             }
         }
         innerWrapper.parentNode.insertBefore(button, innerWrapper);
@@ -1043,7 +1043,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
             if (this.element.hasAttribute('data-val')) {
                 this.element.setAttribute('data-val', 'false');
             }
-            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;
             }
             this.renderComplete();
@@ -1737,7 +1737,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         }
         var currentChar = String.fromCharCode(event.which);
         var decimalSeparator = getValue('decimal', getNumericObject(this.locale));
-        var isAlterNumPadDecimalChar = event.code === "NumpadDecimal" && currentChar !== decimalSeparator;
+        var isAlterNumPadDecimalChar = event.code === 'NumpadDecimal' && currentChar !== decimalSeparator;
         //EJ2-59813-replace the culture decimal separator value with numberpad decimal separator value when culture decimal separator and numberpad decimal separator are different
         if (isAlterNumPadDecimalChar) {
             currentChar = decimalSeparator;
@@ -1774,7 +1774,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
         if (this.decimals && this.validateDecimalOnType) {
             fractionRule = '{0,' + this.decimals + '}';
         }
-        // eslint-disable-next-line detect-non-literal-regexp
+        /* eslint-disable-next-line security/detect-non-literal-regexp */
         return new RegExp('^(-)?(((\\d+(' + decimalSeparator + '\\d' + fractionRule +
             ')?)|(' + decimalSeparator + '\\d' + fractionRule + ')))?$');
     };
@@ -1887,7 +1887,7 @@ var NumericTextBox = /** @__PURE__ @class */ (function (_super) {
     };
     NumericTextBox.prototype.touchMoveOnSpinner = function (event) {
         var target;
-        if (event.type === "touchmove") {
+        if (event.type === 'touchmove') {
             var touchEvent = event.touches;
             target = touchEvent.length && document.elementFromPoint(touchEvent[0].pageX, touchEvent[0].pageY);
         }
@@ -2352,7 +2352,7 @@ function createMask() {
         if (!isNullOrUndefined(this.customCharacters)) {
             for (var i = 0; i < this.promptMask.length; i++) {
                 if (!isNullOrUndefined(this.customCharacters[this.promptMask[i]])) {
-                    // eslint-disable-next-line detect-non-literal-regexp
+                    /* eslint-disable-next-line security/detect-non-literal-regexp */
                     this.promptMask = this.promptMask.replace(new RegExp(this.promptMask[i], 'g'), this.promptChar);
                 }
             }
@@ -2652,7 +2652,7 @@ function maskInputBlurHandler(event) {
         event: event,
         value: this.value,
         maskedValue: this.element.value,
-        container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj,
+        container: !isNullOrUndefined(this.inputObj) ? this.inputObj.container : this.inputObj
     };
     this.trigger('blur', this.blurEventArgs);
     if (this.mask) {
@@ -3115,13 +3115,13 @@ function validateValue(key, isCtrlKey, event) {
                 var customValStr = this.customCharacters["" + curMask];
                 var customValArr = customValStr.split(',');
                 for (var i = 0; i < customValArr.length; i++) {
-                    // eslint-disable-next-line detect-non-literal-regexp
+                    /* eslint-disable-next-line security/detect-non-literal-regexp */
                     if (keyValue.match(new RegExp('[' + customValArr[i] + ']'))) {
                         allowText = true;
                         break;
                     }
                 }
-                // eslint-disable-next-line detect-non-literal-regexp
+                /* eslint-disable-next-line security/detect-non-literal-regexp */
             }
             else if (!isNullOrUndefined(this.regExpCollec["" + curMask]) && keyValue.match(new RegExp(this.regExpCollec["" + curMask]))
                 && this.promptMask[startIndex] === this.promptChar) {
@@ -3129,7 +3129,7 @@ function validateValue(key, isCtrlKey, event) {
             }
             else if (this.promptMask[startIndex] === this.promptChar && this.customRegExpCollec[startIndex][0] === '['
                 && this.customRegExpCollec[startIndex][this.customRegExpCollec[startIndex].length - 1] === ']'
-                // eslint-disable-next-line detect-non-literal-regexp
+                /* eslint-disable-next-line security/detect-non-literal-regexp */
                 && keyValue.match(new RegExp(this.customRegExpCollec[startIndex]))) {
                 allowText = true;
             }
@@ -3804,13 +3804,13 @@ var MaskedTextBox = /** @__PURE__ @class */ (function (_super) {
                     else {
                         this.promptChar = '_';
                     }
-                    // eslint-disable-next-line detect-non-literal-regexp
+                    /* eslint-disable-next-line security/detect-non-literal-regexp */
                     var value = this.element.value.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
                     if (this.promptMask === this.element.value) {
-                        // eslint-disable-next-line detect-non-literal-regexp
+                        /* eslint-disable-next-line security/detect-non-literal-regexp */
                         value = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
                     }
-                    // eslint-disable-next-line detect-non-literal-regexp
+                    /* eslint-disable-next-line security/detect-non-literal-regexp */
                     this.promptMask = this.promptMask.replace(new RegExp('[' + oldProp.promptChar + ']', 'g'), this.promptChar);
                     this.undoCollec = this.redoCollec = [];
                     setElementValue.call(this, value);
@@ -4251,6 +4251,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * To Initialize the control rendering
+     *
      * @private
      */
     Slider.prototype.render = function () {
@@ -4261,7 +4262,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
         this.setZindex();
         this.renderComplete();
         if (this.element.tagName === 'EJS-SLIDER') {
-            if (this.getTheme(this.sliderContainer) == "none") {
+            if (this.getTheme(this.sliderContainer) == 'none') {
                 setTimeout(function () {
                     _this.refresh();
                 }, 0);
@@ -4312,6 +4313,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * Initialize the rendering
+     *
      * @private
      */
     Slider.prototype.initRender = function () {
@@ -4908,7 +4910,6 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             this.sliderContainer.classList.add(classNames.materialSlider);
             this.tooltipValue();
             this.tooltipObj.animation.close.effect = 'None';
-            // eslint-disable-next-line security/detect-non-literal-fs-filename -- Safe as no value holds user input
             this.tooltipObj.open(this.firstHandle);
         }
     };
@@ -5736,6 +5737,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * It is used to reposition slider.
+     *
      * @returns void
      */
     Slider.prototype.reposition = function () {
@@ -5986,7 +5988,12 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
             focusedElement.classList.remove(classNames.sliderTabHandle);
         }
         var handle = this.activeHandle === 1 ? this.firstHandle : this.secondHandle;
-        if (evt.target === handle) {
+        var behindElement;
+        if ((evt.type === 'click' || evt.type === 'mousedown') && evt.target === handle) {
+            var eventX = evt.clientX, eventY = evt.clientY;
+            behindElement = document.elementFromPoint(eventX, eventY);
+        }
+        if (evt.target === handle && behindElement != handle) {
             if (this.isMaterial && !this.tooltip.isVisible &&
                 !this.getHandle().classList.contains(classNames.sliderTabHandle)) {
                 this.materialChange();
@@ -6237,7 +6244,6 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     Slider.prototype.openTooltip = function (target) {
         if (this.tooltip.isVisible && this.tooltipObj && !this.isMaterialTooltip) {
             this.tooltipValue();
-            // eslint-disable-next-line security/detect-non-literal-fs-filename -- Safe as no value holds user input
             this.tooltipObj.open(target);
             this.tooltipTarget = target;
         }
@@ -6557,6 +6563,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * Get the properties to be maintained in the persisted state.
+     *
      * @private
      */
     Slider.prototype.getPersistData = function () {
@@ -6566,6 +6573,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     /**
      * Removes the component from the DOM and detaches all its related event handlers.
      * Also it removes the attributes and classes.
+     *
      * @method destroy
      * @return {void}
      */
@@ -6587,6 +6595,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * Calls internally if any of the property value is changed.
+     *
      * @private
      */
     // tslint:disable-next-line
@@ -6805,6 +6814,7 @@ var Slider = /** @__PURE__ @class */ (function (_super) {
     };
     /**
      * Gets the component name
+     *
      * @private
      */
     Slider.prototype.getModuleName = function () {
@@ -6919,6 +6929,7 @@ var regex = {
     /* eslint-disable no-useless-escape */
     EMAIL: new RegExp('^[A-Za-z0-9._%+-]{1,}@[A-Za-z0-9._%+-]{1,}([.]{1}[a-zA-Z0-9]{2,}' +
         '|[.]{1}[a-zA-Z0-9]{2,4}[.]{1}[a-zA-Z0-9]{2,4})$'),
+    /* eslint-disable-next-line security/detect-unsafe-regex */
     URL: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/m,
     DATE_ISO: new RegExp('^([0-9]{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$'),
     DIGITS: new RegExp('^[0-9]*$'),
@@ -7036,10 +7047,10 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
         if (name) {
             // eslint-disable-next-line no-prototype-builtins
             if (this.rules.hasOwnProperty(name)) {
-                extend(this.rules[name], rules, {});
+                extend(this.rules["" + name], rules, {});
             }
             else {
-                this.rules[name] = rules;
+                this.rules["" + name] = rules;
             }
         }
     };
@@ -7055,12 +7066,12 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
         if (!name && !rules) {
             this.rules = {};
         }
-        else if (this.rules[name] && !rules) {
-            delete this.rules[name];
+        else if (this.rules["" + name] && !rules) {
+            delete this.rules["" + name];
         }
-        else if (!isNullOrUndefined(this.rules[name] && rules)) {
+        else if (!isNullOrUndefined(this.rules["" + name] && rules)) {
             for (var i = 0; i < rules.length; i++) {
-                delete this.rules[name][rules[i]];
+                delete this.rules["" + name][rules[parseInt(i.toString())]];
             }
         }
         else {
@@ -7158,7 +7169,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             var key = _a[_i];
             this.l10n.setLocale(this.locale);
             var value = this.l10n.getConstant(key);
-            this.localyMessage[key] = value;
+            this.localyMessage["" + key] = value;
         }
     };
     /**
@@ -7307,7 +7318,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
         var customMessage;
         if (this.rules[input.name] && ruleName !== 'validateHidden' && ruleName !== 'hidden') {
             this.getInputElement(input.name);
-            customMessage = this.getErrorMessage(this.rules[input.name][ruleName], ruleName);
+            customMessage = this.getErrorMessage(this.rules[input.name]["" + ruleName], ruleName);
         }
         if (message) {
             value = [value, message];
@@ -7318,7 +7329,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
         else if (customMessage) {
             value = [value, customMessage];
         }
-        ruleCon[ruleName] = value;
+        ruleCon["" + ruleName] = value;
     };
     // Wire events to the form elements
     FormValidator.prototype.wireEvents = function () {
@@ -7411,10 +7422,10 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
     };
     // Validate each rule based on input element name
     FormValidator.prototype.validateRules = function (name) {
-        if (!this.rules[name]) {
+        if (!this.rules["" + name]) {
             return;
         }
-        var rules = Object.keys(this.rules[name]);
+        var rules = Object.keys(this.rules["" + name]);
         var hiddenType = false;
         var validateHiddenType = false;
         var vhPos = rules.indexOf('validateHidden');
@@ -7436,7 +7447,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             this.getErrorElement(name);
             for (var _i = 0, rules_2 = rules; _i < rules_2.length; _i++) {
                 var rule = rules_2[_i];
-                var errorMessage = this.getErrorMessage(this.rules[name][rule], rule);
+                var errorMessage = this.getErrorMessage(this.rules["" + name]["" + rule], rule);
                 var errorRule = { name: name, message: errorMessage };
                 var eventArgs = {
                     inputName: name,
@@ -7482,7 +7493,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
     };
     // Update the optional validation status
     FormValidator.prototype.optionalValidationStatus = function (name, refer) {
-        if (!this.rules[name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
+        if (!this.rules["" + name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
             this.infoElement.innerHTML = this.inputElement.value;
             this.infoElement.setAttribute('aria-invalid', 'false');
             refer.status = '';
@@ -7491,9 +7502,9 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
     };
     // Check the input element whether it's value satisfy the validation rule or not
     FormValidator.prototype.isValid = function (name, rule) {
-        var params = this.rules[name][rule];
+        var params = this.rules["" + name]["" + rule];
         var param = (params instanceof Array && typeof params[1] === 'string') ? params[0] : params;
-        var currentRule = this.rules[name][rule];
+        var currentRule = this.rules["" + name]["" + rule];
         var args = { value: this.inputElement.value, param: param, element: this.inputElement, formElement: this.element };
         this.trigger('validationBegin', args);
         if (!args.param && rule === 'required') {
@@ -7510,7 +7521,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             return selectAll('input[name="' + name + '"]:checked', this.element).length > 0;
         }
         else {
-            return FormValidator_1.checkValidator[rule](args);
+            return FormValidator_1.checkValidator["" + rule](args);
         }
     };
     // Return default error message or custom error message
@@ -7518,12 +7529,12 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
         var message = this.inputElement.getAttribute('data-' + rule + '-message') ?
             this.inputElement.getAttribute('data-' + rule + '-message') :
             (ruleValue instanceof Array && typeof ruleValue[1] === 'string') ? ruleValue[1] :
-                (Object.keys(this.localyMessage).length !== 0) ? this.localyMessage[rule] : this.defaultMessages[rule];
+                (Object.keys(this.localyMessage).length !== 0) ? this.localyMessage["" + rule] : this.defaultMessages["" + rule];
         var formats = message.match(/{(\d)}/g);
         if (!isNullOrUndefined(formats)) {
             for (var i = 0; i < formats.length; i++) {
-                var value = ruleValue instanceof Array ? ruleValue[i] : ruleValue;
-                message = message.replace(formats[i], value);
+                var value = ruleValue instanceof Array ? ruleValue[parseInt(i.toString())] : ruleValue;
+                message = message.replace(formats[parseInt(i.toString())], value);
             }
         }
         return message;
@@ -7575,7 +7586,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
     // Remove existing rule from errorRules object
     FormValidator.prototype.removeErrorRules = function (name) {
         for (var i = 0; i < this.errorRules.length; i++) {
-            var rule = this.errorRules[i];
+            var rule = this.errorRules[parseInt(i.toString())];
             if (rule.name === name) {
                 this.errorRules.splice(i, 1);
             }
@@ -7599,7 +7610,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
     };
     // Check whether the input element have required rule and its value is not empty
     FormValidator.prototype.checkRequired = function (name) {
-        if (!this.rules[name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
+        if (!this.rules["" + name][this.required] && !this.inputElement.value.length && !isNullOrUndefined(this.infoElement)) {
             this.infoElement.innerHTML = this.inputElement.value;
             this.infoElement.setAttribute('aria-invalid', 'false');
             this.hideMessage(name);
@@ -7677,6 +7688,7 @@ var FormValidator = /** @__PURE__ @class */ (function (_super) {
             }
         },
         regex: function (option) {
+            /* eslint-disable-next-line security/detect-non-literal-regexp */
             return new RegExp(option.param).test(option.value);
         },
         equalTo: function (option) {
@@ -8645,7 +8657,7 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
     /* istanbul ignore next */
     Uploader.prototype.onPasteFile = function (event) {
         var item = event.clipboardData.items;
-        if (event.type == 'paste' && this.browserName !== 'msie' && this.browserName !== 'edge' && this.browserName !== 'safari') {
+        if (event.type === 'paste' && this.browserName !== 'msie' && this.browserName !== 'edge' && this.browserName !== 'safari') {
             this.element.files = event.clipboardData.files;
         }
         if (item.length !== 1) {
@@ -9022,14 +9034,14 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
         if (this.enableHtmlSanitizer) {
             for (var i = 0; i < fileData.length; i++) {
                 var sanitizeFile = SanitizeHtmlHelper.beforeSanitize();
-                var sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[i].name);
-                if (sanitizeFileName != fileData[i].name) {
-                    var encodedFileName = targetFiles[i].name.replace(/[\u00A0-\u9999<>\&]/g, function (i) {
+                var sanitizeFileName = SanitizeHtmlHelper.serializeValue(sanitizeFile, fileData[parseInt(i.toString())].name);
+                if (sanitizeFileName !== fileData[parseInt(i.toString())].name) {
+                    var encodedFileName = targetFiles[parseInt(i.toString())].name.replace(/[\u00A0-\u9999<>\&]/g, function (i) {
                         return '&#' + i.charCodeAt(0) + ';';
                     });
-                    fileData[i].name = encodedFileName;
-                    fileData[i].status = this.localizedTexts('invalidFileName');
-                    fileData[i].statusCode = '0';
+                    fileData[parseInt(i.toString())].name = encodedFileName;
+                    fileData[parseInt(i.toString())].status = this.localizedTexts('invalidFileName');
+                    fileData[parseInt(i.toString())].statusCode = '0';
                 }
             }
         }
@@ -10269,13 +10281,13 @@ var Uploader = /** @__PURE__ @class */ (function (_super) {
             this.updateStatus(metaData.file, this.localizedTexts('fileUploadCancel'), '5');
             this.updateProgressBarClasses(liElement, UPLOAD_FAILED);
             this.removeProgressbar(liElement, 'failure');
-            deleteIcon && deleteIcon.classList.remove(ABORT_ICON);
-            deleteIcon && deleteIcon.classList.add(REMOVE_ICON);
-            deleteIcon && deleteIcon.setAttribute('title', this.localizedTexts('remove'));
+            (deleteIcon && deleteIcon.classList.remove(ABORT_ICON));
+            (deleteIcon && deleteIcon.classList.add(REMOVE_ICON));
+            (deleteIcon && deleteIcon.setAttribute('title', this.localizedTexts('remove')));
             var pauseIcon = liElement.querySelector('.' + PAUSE_UPLOAD);
-            pauseIcon && pauseIcon.classList.add(RETRY_ICON);
-            pauseIcon && pauseIcon.classList.remove(PAUSE_UPLOAD);
-            pauseIcon && pauseIcon.setAttribute('title', this.localizedTexts('retry'));
+            (pauseIcon && pauseIcon.classList.add(RETRY_ICON));
+            (pauseIcon && pauseIcon.classList.remove(PAUSE_UPLOAD));
+            (pauseIcon && pauseIcon.setAttribute('title', this.localizedTexts('retry')));
             if (!isNullOrUndefined(liElement) && !isNullOrUndefined(deleteIcon)
                 && !isNullOrUndefined(liElement.querySelector('.e-spinner-pane'))) {
                 hideSpinner(spinnerTarget);
@@ -11382,7 +11394,7 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
             wrapper.classList.add(RTL$1);
         }
         if (this.cssClass) {
-            addClass([wrapper], this.cssClass.split(' '));
+            addClass([wrapper], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         this.tileRipple = rippleEffect(this.container, { selector: '.' + TILE });
         this.ctrlBtnRipple = rippleEffect(this.container, { selector: '.e-btn' });
@@ -11442,7 +11454,7 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
         var popupEle = this.getPopupEle();
         addClass([popupEle], 'e-colorpicker-popup');
         if (this.cssClass) {
-            addClass([popupEle], this.cssClass.split(' '));
+            addClass([popupEle], this.cssClass.replace(/\s+/g, ' ').trim().split(' '));
         }
         if (Browser.isDevice) {
             var popupInst = this.getPopupInst();
@@ -12081,6 +12093,10 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
         if (this.isPicker()) {
             var dragHandler = this.getDragHandler();
             EventHandler.add(dragHandler, 'keydown', this.pickerKeyDown, this);
+            var ctrlBtn = select('.' + CTRLBTN, this.container);
+            if (ctrlBtn) {
+                EventHandler.add(ctrlBtn, 'keydown', this.ctrlBtnKeyDown, this);
+            }
             EventHandler.add(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown, this);
             if (this.modeSwitcher || this.showButtons) {
                 this.addCtrlSwitchEvent();
@@ -12102,6 +12118,16 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
             EventHandler.add(ctrlSwitchBtn, 'click', this.btnClickHandler, this);
         }
     };
+    ColorPicker.prototype.ctrlBtnKeyDown = function (e) {
+        if (e.keyCode === 13) {
+            var applyBtn = select('.' + APPLY, this.container);
+            if (applyBtn) {
+                var cValue = this.rgbToHex(this.rgb);
+                this.triggerChangeEvent(cValue);
+            }
+            this.splitBtn.element.focus();
+        }
+    };
     ColorPicker.prototype.pickerKeyDown = function (e) {
         switch (e.keyCode) {
             case 39:
@@ -12126,7 +12152,6 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
     ColorPicker.prototype.enterKeyHandler = function (value, e) {
         this.triggerChangeEvent(value);
         if (!this.inline) {
-            this.closePopup(e);
             this.splitBtn.element.focus();
         }
     };
@@ -12654,6 +12679,10 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
         if (this.isPicker()) {
             var dragHandler = this.getDragHandler();
             EventHandler.remove(dragHandler, 'keydown', this.pickerKeyDown);
+            var ctrlBtn = select('.' + CTRLBTN, this.container);
+            if (ctrlBtn) {
+                EventHandler.remove(ctrlBtn, 'keydown', this.ctrlBtnKeyDown);
+            }
             EventHandler.remove(this.getHsvContainer(), 'mousedown touchstart', this.handlerDown);
             if (this.modeSwitcher || this.showButtons) {
                 EventHandler.remove(select('.' + CTRLSWITCH, this.container), 'click', this.btnClickHandler);
@@ -12895,7 +12924,7 @@ var ColorPicker = /** @__PURE__ @class */ (function (_super) {
             removeClass([wrapper, popupWrapper], oldProp.split(' '));
         }
         if (newProp) {
-            addClass([wrapper, popupWrapper], newProp.split(' '));
+            addClass([wrapper, popupWrapper], newProp.replace(/\s+/g, ' ').trim().split(' '));
         }
     };
     ColorPicker.prototype.changeRtlProps = function (newProp) {
@@ -13346,7 +13375,9 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
         if (this.element.tagName !== 'TEXTAREA') {
             this.element.setAttribute('type', this.type);
         }
-        this.element.setAttribute('role', 'textbox');
+        if (this.type === 'text') {
+            this.element.setAttribute('role', 'textbox');
+        }
         this.globalize = new Internationalization(this.locale);
         var localeText = { placeholder: this.placeholder };
         this.l10n = new L10n('textbox', localeText, this.locale);
@@ -13479,7 +13510,7 @@ var TextBox = /** @__PURE__ @class */ (function (_super) {
         this.inputPreviousValue = this.value;
         this.respectiveElement.defaultValue = this.respectiveElement.value;
         Input.setWidth(this.width, this.textboxWrapper.container);
-        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;
         }
         this.renderComplete();
@@ -13988,6 +14019,10 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
             this.element.width = this.element.offsetWidth;
             this.isResponsive = true;
         }
+        else if (this.element.height !== this.element.offsetHeight - 1 || this.element.width !== this.element.offsetWidth - 1) {
+            this.element.height = this.element.offsetHeight;
+            this.element.width = this.element.offsetWidth;
+        }
         this.canvasContext.scale(1, 1);
         this.canvasContext.fillStyle = this.strokeColor;
         if (this.backgroundImage) {
@@ -14081,7 +14116,6 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
             this.canvasContext.canvas.width = this.element.offsetWidth;
             this.canvasContext.canvas.height = this.element.offsetHeight;
             this.canvasContext.scale(1, 1);
-            this.canvasContext.clearRect(0, 0, this.canvasContext.canvas.width, this.canvasContext.canvas.height);
             var pointSize = (this.minStrokeWidth + this.maxStrokeWidth) / 2;
             for (var i = 0; i < this.signRatioPointsColl.length; i++) {
                 this.arcDraw((this.signRatioPointsColl[i].x * this.canvasContext.canvas.width), (this.signRatioPointsColl[i].y * this.canvasContext.canvas.height), pointSize);
@@ -14315,11 +14349,11 @@ var SignatureBase = /** @__PURE__ @class */ (function (_super) {
     SignatureBase.prototype.enableOrDisable = function (isDisable) {
         this.disabled = isDisable;
         if (isDisable) {
-            this.canvasContext.canvas.style.filter = "opacity(0.5)";
+            this.canvasContext.canvas.style.filter = 'opacity(0.5)';
             this.isRead(true);
         }
         else {
-            this.canvasContext.canvas.style.filter = "";
+            this.canvasContext.canvas.style.filter = '';
             this.isRead(false);
         }
     };
@@ -15125,7 +15159,6 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
     function Rating(options, element) {
         var _this = _super.call(this, options, element) || this;
         _this.itemElements = [];
-        _this.tooltipOpen = false;
         return _this;
     }
     Rating.prototype.preRender = function () {
@@ -15139,13 +15172,14 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
             uparrow: 'uparrow',
             space: 'space'
         };
+        this.tooltipOpen = false;
     };
     Rating.prototype.render = function () {
         this.initialize();
         this.updateMinValue();
         this.updateTemplateFunction();
+        this.triggerChange(null, this.value, false);
         this.renderItems();
-        this.updatePrecision();
         this.displayLabel();
     };
     Rating.prototype.initialize = function () {
@@ -15158,36 +15192,42 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         attributes(this.element, { 'aria-label': 'rating' });
         this.renderItemList();
         this.updateReset();
-        this.updateDisabled();
-        this.wrapper.classList[this.readOnly ? 'add' : 'remove'](READONLY);
-        this.wrapper.classList[!this.visible ? 'add' : 'remove'](HIDDEN);
-        this.wrapper.classList[this.enableRtl ? 'add' : 'remove'](RTL$2);
-        this.wrapper.classList[this.enableAnimation ? 'add' : 'remove'](ANIMATION);
+        if (this.readOnly) {
+            this.wrapper.classList.add(READONLY);
+        }
+        if (!this.visible) {
+            this.wrapper.classList.add(HIDDEN);
+        }
+        if (this.enableRtl) {
+            this.wrapper.classList.add(RTL$2);
+        }
+        if (this.enableAnimation) {
+            this.wrapper.classList.add(ANIMATION);
+        }
         if (this.cssClass) {
             addClass([this.wrapper], this.cssClass.split(' '));
         }
         this.updateTooltip();
         this.wireKeyboardEvent();
+        this.updateDisabled();
     };
     Rating.prototype.updateDisabled = function () {
         this.wrapper.classList[this.disabled ? 'add' : 'remove'](DISABLED$2);
         attributes(this.ratingItemList, { 'tabindex': (this.disabled) ? '-1' : '0' });
-        if (this.allowReset) {
-            this.updateResetButton();
-        }
+        this.updateResetButton();
     };
     Rating.prototype.updateResetButton = function () {
-        var isDisabled = (this.value <= this.min) || this.disabled;
-        this.resetElement.classList[isDisabled ? 'add' : 'remove'](DISABLED$2);
-        attributes(this.resetElement, { 'aria-label': 'resetbutton', 'role': 'button',
-            'tabindex': (isDisabled ? '-1' : '0'), 'aria-hidden': isDisabled.toString() });
+        if (this.allowReset) {
+            var isDisabled = (this.value <= this.min) || this.disabled;
+            this.resetElement.classList[isDisabled ? 'add' : 'remove'](DISABLED$2);
+            attributes(this.resetElement, { 'tabindex': (isDisabled ? '-1' : '0'), 'aria-hidden': isDisabled.toString() });
+        }
     };
     Rating.prototype.renderItemList = function () {
         var _this = this;
         this.ratingItemList = this.createElement('div', {
             className: ITEMLIST,
-            id: this.element.id + '_item-list',
-            attrs: { 'tabindex': '0' }
+            id: this.element.id + '_item-list'
         });
         attributes(this.ratingItemList, { 'aria-label': 'rating', 'role': 'slider' });
         this.wrapper.appendChild(this.ratingItemList);
@@ -15236,7 +15276,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
             var ratingItemContainer = this.createElement('span', { className: ITEMCONTAINER });
             var spanItem = this.createElement('span', { className: 'e-rating-item' });
             var ratingValue = this.getRatingValue(this.value, i);
-            this.renderItemContent(spanItem, ratingValue, i);
+            this.renderItemContent(spanItem, ratingValue, i, false);
             ratingItemContainer.appendChild(spanItem);
             this.wireItemsEvents(ratingItemContainer, i + 1);
             this.itemElements.push(ratingItemContainer);
@@ -15246,12 +15286,9 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
             });
         }
         attributes(this.ratingItemList, { 'aria-valuemax': this.itemsCount.toString() });
-        if (this.disabled) {
-            attributes(this.ratingItemList, { 'tabindex': '-1' });
-        }
+        this.updateItemValue(false);
     };
     Rating.prototype.renderItemContent = function (spanEle, val, index, isrerender) {
-        if (isrerender === void 0) { isrerender = false; }
         if (isrerender) {
             this.removeItemContent(spanEle);
         }
@@ -15290,17 +15327,12 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         }
     };
     Rating.prototype.updateMinValue = function () {
-        this.min = this.validateValue(this.min);
+        this.setProperties({ min: this.validateValue(this.min) }, true);
         if (this.min > 0 && this.value < this.min) {
             this.triggerChange(null, this.min, false);
         }
         attributes(this.ratingItemList, { 'aria-valuemin': this.min.toString() });
     };
-    Rating.prototype.updatePrecision = function () {
-        this.min = this.validateValue(this.min);
-        this.triggerChange(null, this.validateValue(this.value), false);
-        this.updateItemValue();
-    };
     Rating.prototype.validateValue = function (currentValue) {
         if (currentValue > this.itemsCount) {
             currentValue = this.itemsCount;
@@ -15319,7 +15351,11 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         return (this.enableSingleSelection) ? (((value > i) && (value <= i + 1)) ? 1 : 0) :
             (value >= i + 1) ? 1 : ((value < i) ? 0 : (value - i));
     };
-    Rating.prototype.updateItemValue = function () {
+    Rating.prototype.updateItemValue = function (isUpdate) {
+        if (isUpdate === void 0) { isUpdate = true; }
+        if (isUpdate && this.isReact) {
+            this.clearTemplate(['ratingEmptyTemplate', 'ratingFullTemplate']);
+        }
         for (var i = 0; i < this.itemsCount; i++) {
             var itemElement = this.itemElements[parseInt(i.toString(), 10)];
             itemElement.classList.remove(SELECTED, INTERMEDIATE, SELECTEDVALUE);
@@ -15333,13 +15369,16 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
             else if ((this.precision === PrecisionType.Full) && (i + 1 <= this.value) && (!this.enableSingleSelection)) {
                 itemElement.classList.add(SELECTEDVALUE);
             }
-            this.updateItemContent(ratingValue, i);
+            if (isUpdate) {
+                this.updateItemContent(ratingValue, i);
+            }
             itemElement.style.setProperty(RATINGVALUE, (ratingValue * 100) + '%');
             itemElement.classList[((this.value === 0) && (i === 0)) || (this.value === i + 1) || ((ratingValue > 0) && (ratingValue < 1)) ? 'add' : 'remove']('e-rating-focus');
         }
-        if (this.allowReset) {
-            this.updateResetButton();
+        if (isUpdate) {
+            this.renderReactTemplates();
         }
+        this.updateResetButton();
         attributes(this.ratingItemList, { 'aria-valuenow': this.currentValue.toString() });
         attributes(this.element, { 'value': this.value.toString() });
     };
@@ -15349,26 +15388,31 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         }
         var spanEle = this.itemElements[parseInt(index.toString(), 10)].querySelector('.e-rating-item');
         if (this.fullTemplate && ratingValue === 1) {
-            if (spanEle.classList.contains(FULLTEMPLATE)) {
+            if (!this.isReact && spanEle.classList.contains(FULLTEMPLATE)) {
                 return;
             }
             this.removeItemContent(spanEle);
             spanEle.classList.add(FULLTEMPLATE);
-            spanEle.append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate)[0]);
+            spanEle.append(this.fullTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate' + index), this.isStringTemplate)[0]);
         }
         else if (this.emptyTemplate) {
+            if (!this.isReact && spanEle.classList.contains(EMPTYTEMPLATE)) {
+                return;
+            }
             this.removeItemContent(spanEle);
             spanEle.classList.add(EMPTYTEMPLATE);
-            spanEle.append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingFullTemplate', (this.element.id + 'fullTemplate'), this.isStringTemplate)[0]);
+            spanEle.append(this.emptyTemplateFunction({ ratingValue: ratingValue, index: index }, this, 'ratingEmptyTemplate', (this.element.id + 'emptyTemplate' + index), this.isStringTemplate)[0]);
         }
         else {
             this.removeItemContent(spanEle);
             addClass([spanEle], ICONCSS.split(' '));
         }
-        this.renderReactTemplates();
     };
     Rating.prototype.updateTooltipContent = function (isChange) {
         if (this.showTooltip) {
+            if (this.isReact) {
+                this.clearTemplate(['ratingTooltipTemplate']);
+            }
             var content = void 0;
             if (this.tooltipTemplate) {
                 var templateFunction = this.getTemplateString(this.tooltipTemplate);
@@ -15414,21 +15458,27 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
     Rating.prototype.updateLabel = function () {
         if (this.showLabel) {
             if (this.labelTemplate) {
+                if (this.isReact) {
+                    this.clearTemplate(['ratingLabelTemplate']);
+                }
                 if (this.spanLabel.firstChild) {
                     this.spanLabel.removeChild(this.spanLabel.firstChild);
                 }
                 var templateFunction = this.getTemplateString(this.labelTemplate);
                 this.spanLabel.append(templateFunction({ value: this.currentValue }, this, 'ratingLabelTemplate', (this.element.id + 'labelTemplate'), this.isStringTemplate)[0]);
+                this.renderReactTemplates();
             }
             else {
                 this.spanLabel.textContent = this.currentValue + ' / ' + this.itemsCount;
             }
-            this.renderReactTemplates();
         }
     };
     Rating.prototype.updateReset = function () {
         if (this.allowReset) {
-            this.resetElement = this.createElement('span', { className: RESET });
+            this.resetElement = this.createElement('span', {
+                className: RESET,
+                attrs: { 'aria-label': 'resetbutton', 'role': 'button' }
+            });
             this.updateResetButton();
             EventHandler.add(this.resetElement, 'click', this.resetClicked, this);
             this.wrapper.insertBefore(this.resetElement, this.ratingItemList);
@@ -15467,9 +15517,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         this.triggerChange(e, this.currentValue);
         this.updateItemValue();
         this.updateLabel();
-        if (this.allowReset) {
-            this.updateResetButton();
-        }
+        this.updateResetButton();
     };
     Rating.prototype.updateValueChange = function (e, val, isInteracted) {
         if (isInteracted === void 0) { isInteracted = true; }
@@ -15547,6 +15595,8 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
     /**
      * Reset’s the value to minimum.
      *
+     * {% codeBlock src='rating/reset/index.md' %}{% endcodeBlock %}
+     *
      * @returns {void}
      */
     Rating.prototype.reset = function () {
@@ -15599,12 +15649,13 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
                     Math.round(0.1 * 10) / 10;
             currentValue = isIncrease ? this.value + currentValue : this.value - currentValue;
             this.updateValueChange(e, (currentValue));
-            if (this.allowReset) {
-                this.updateResetButton();
-            }
+            this.updateResetButton();
         }
     };
     Rating.prototype.updateContent = function () {
+        if (this.isReact) {
+            this.clearTemplate(['ratingEmptyTemplate', 'ratingFullTemplate']);
+        }
         for (var i = 0; i < this.itemsCount; i++) {
             var itemElement = this.itemElements[parseInt(i.toString(), 10)].firstElementChild;
             this.renderItemContent(itemElement, this.getRatingValue(this.value, i), i, true);
@@ -15643,6 +15694,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         _super.prototype.destroy.call(this);
         // unwires the events and detach the li elements
         this.removeItemElements();
+        this.clearTemplate();
         if (this.spanLabel) {
             remove(this.spanLabel);
             this.spanLabel = null;
@@ -15661,6 +15713,7 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
         remove(this.wrapper);
         this.wrapper = null;
         this.keyboardModuleRating.destroy();
+        this.keyboardModuleRating = null;
         ['value', 'aria-label', 'name'].forEach(function (attr) {
             _this.element.removeAttribute(attr);
         });
@@ -15721,7 +15774,9 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
                     this.updateTooltip();
                     break;
                 case 'precision':
-                    this.updatePrecision();
+                    this.updateMinValue();
+                    this.triggerChange(null, this.value, false);
+                    this.updateItemValue();
                     this.updateLabel();
                     break;
                 case 'enableSingleSelection':
@@ -15742,7 +15797,6 @@ var Rating = /** @__PURE__ @class */ (function (_super) {
                 case 'itemsCount':
                     this.removeItemElements();
                     this.renderItems();
-                    this.updateItemValue();
                     this.updateLabel();
                     break;
             }